<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[22340] trunk/wp-includes: Add gallery settings to the media modal.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg > ul, #logmsg > ol { margin-left: 0; margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/22340">22340</a></dd>
<dt>Author</dt> <dd>koopersmith</dd>
<dt>Date</dt> <dd>2012-10-31 19:22:25 +0000 (Wed, 31 Oct 2012)</dd>
</dl>
<h3>Log Message</h3>
<pre>Add gallery settings to the media modal.
* Abstracts `wp.media.view.AttachmentDisplaySettings` into `wp.media.view.Settings` for managing lists of settings with button groups and select boxes. Settings can optionally be tied to a user setting (i.e. using `getUserSetting`).
* Adds `wp.media.view.Settings.AttachmentDisplay`.
* Adds `wp.media.view.Settings.Gallery`.
see <a href="http://core.trac.wordpress.org/ticket/21390">#21390</a>, <a href="http://core.trac.wordpress.org/ticket/21815">#21815</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpincludesjsmceviewjs">trunk/wp-includes/js/mce-view.js</a></li>
<li><a href="#trunkwpincludesjsmediaviewsjs">trunk/wp-includes/js/media-views.js</a></li>
<li><a href="#trunkwpincludesmediaphp">trunk/wp-includes/media.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpincludesjsmceviewjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/js/mce-view.js (22339 => 22340)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/mce-view.js 2012-10-30 23:59:57 UTC (rev 22339)
+++ trunk/wp-includes/js/mce-view.js 2012-10-31 19:22:25 UTC (rev 22340)
</span><span class="lines">@@ -590,7 +590,7 @@
</span><span class="cx"> attachments: function( shortcode, parent ) {
</span><span class="cx"> var shortcodeString = shortcode.string(),
</span><span class="cx"> result = galleries[ shortcodeString ],
</span><del>- attrs, args;
</del><ins>+ attrs, args, query;
</ins><span class="cx">
</span><span class="cx"> delete galleries[ shortcodeString ];
</span><span class="cx">
</span><span class="lines">@@ -617,12 +617,14 @@
</span><span class="cx"> if ( ! args.post__in )
</span><span class="cx"> args.parent = attrs.id || parent;
</span><span class="cx">
</span><del>- return media.query( args );
</del><ins>+ query = media.query( args );
+ query.props.set( _.pick( attrs, 'columns', 'link' ) );
+ return query;
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> shortcode: function( attachments ) {
</span><span class="cx"> var props = attachments.props.toJSON(),
</span><del>- attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order' ),
</del><ins>+ attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order', 'link', 'columns' ),
</ins><span class="cx"> shortcode;
</span><span class="cx">
</span><span class="cx"> attrs.ids = attachments.pluck('id');
</span></span></pre></div>
<a id="trunkwpincludesjsmediaviewsjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/js/media-views.js (22339 => 22340)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/media-views.js 2012-10-30 23:59:57 UTC (rev 22339)
+++ trunk/wp-includes/js/media-views.js 2012-10-31 19:22:25 UTC (rev 22340)
</span><span class="lines">@@ -282,6 +282,13 @@
</span><span class="cx"> }) );
</span><span class="cx">
</span><span class="cx"> this.details();
</span><ins>+ frame.sidebar().add({
+ settings: new media.view.Settings.Gallery({
+ controller: frame,
+ model: this.get('library').props,
+ priority: 40
+ }).render()
+ });
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> content: function() {
</span><span class="lines">@@ -752,7 +759,7 @@
</span><span class="cx"> },
</span><span class="cx"> {
</span><span class="cx"> classes: ['down-arrow'],
</span><del>- dropdown: new media.view.AttachmentDisplaySettings().render().$el,
</del><ins>+ dropdown: new media.view.Settings.AttachmentDisplay().render().$el,
</ins><span class="cx">
</span><span class="cx"> click: function( event ) {
</span><span class="cx"> var $el = this.$el;
</span><span class="lines">@@ -1444,43 +1451,32 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> /**
</span><del>- * wp.media.view.AttachmentDisplaySettings
</del><ins>+ * wp.media.view.Settings
</ins><span class="cx"> */
</span><del>- media.view.AttachmentDisplaySettings = Backbone.View.extend({
</del><ins>+ media.view.Settings = Backbone.View.extend({
</ins><span class="cx"> tagName: 'div',
</span><span class="cx"> className: 'attachment-display-settings',
</span><span class="cx"> template: media.template('attachment-display-settings'),
</span><span class="cx">
</span><span class="cx"> events: {
</span><del>- 'click button': 'updateHandler'
</del><ins>+ 'click button': 'updateHandler',
+ 'change input': 'updateHandler',
+ 'change select': 'updateHandler',
+ 'change textarea': 'updateHandler'
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- settings: {
- align: {
- accepts: ['left','center','right','none'],
- name: 'align',
- fallback: 'none'
- },
- link: {
- accepts: ['post','file','none'],
- name: 'urlbutton',
- fallback: 'post'
- },
- size: {
- // @todo: Dynamically generate these.
- accepts: ['thumbnail','medium','large','full'],
- name: 'imgsize',
- fallback: 'medium'
- }
- },
</del><ins>+ settings: {},
</ins><span class="cx">
</span><span class="cx"> initialize: function() {
</span><span class="cx"> var settings = this.settings;
</span><span class="cx">
</span><del>- this.model = new Backbone.Model();
</del><ins>+ this.model = this.model || new Backbone.Model();
</ins><span class="cx">
</span><span class="cx"> _.each( settings, function( setting, key ) {
</span><del>- this.model.set( key, getUserSetting( setting.name, setting.fallback ) );
</del><ins>+ if ( setting.name )
+ this.model.set( key, getUserSetting( setting.name, setting.fallback ) );
+ else
+ this.model.set( key, this.model.get( key ) || setting.fallback );
</ins><span class="cx"> }, this );
</span><span class="cx">
</span><span class="cx"> this.model.validate = function( attrs ) {
</span><span class="lines">@@ -1494,7 +1490,7 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> _.each( _.keys( options.changes ), function( key ) {
</span><del>- if ( settings[ key ] )
</del><ins>+ if ( settings[ key ] && settings[ key ].name )
</ins><span class="cx"> setUserSetting( settings[ key ].name, model.get( key ) );
</span><span class="cx"> });
</span><span class="cx"> }, this );
</span><span class="lines">@@ -1511,17 +1507,28 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> update: function( key ) {
</span><del>- var buttons = this.$('[data-setting="' + key + '"] button').removeClass('active');
- buttons.filter( '[value="' + this.model.get( key ) + '"]' ).addClass('active');
</del><ins>+ var setting = this.settings[ key ],
+ $setting = this.$('[data-setting="' + key + '"]'),
+ $buttons;
+
+ if ( ! setting )
+ return;
+
+ if ( 'select' === setting.type ) {
+ $setting.find('[value="' + this.model.get( key ) + '"]').attr( 'selected', true );
+ } else {
+ $buttons = $setting.find('button').removeClass('active');
+ $buttons.filter( '[value="' + this.model.get( key ) + '"]' ).addClass('active');
+ }
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> updateHandler: function( event ) {
</span><del>- var group = $( event.target ).closest('.button-group');
</del><ins>+ var $setting = $( event.target ).closest('[data-setting]');
</ins><span class="cx">
</span><span class="cx"> event.preventDefault();
</span><span class="cx">
</span><del>- if ( group.length )
- this.model.set( group.data('setting'), event.target.value );
</del><ins>+ if ( $setting.length )
+ this.model.set( $setting.data('setting'), event.target.value );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> updateChanges: function( model, options ) {
</span><span class="lines">@@ -1531,6 +1538,62 @@
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> /**
</span><ins>+ * wp.media.view.Settings.AttachmentDisplay
+ */
+ media.view.Settings.AttachmentDisplay = media.view.Settings.extend({
+ className: 'attachment-display-settings',
+ template: media.template('attachment-display-settings'),
+
+ settings: {
+ align: {
+ accepts: ['left','center','right','none'],
+ name: 'align',
+ fallback: 'none'
+ },
+ link: {
+ accepts: ['post','file','none'],
+ name: 'urlbutton',
+ fallback: 'post'
+ },
+ size: {
+ // @todo: Dynamically generate these.
+ accepts: ['thumbnail','medium','large','full'],
+ name: 'imgsize',
+ fallback: 'medium'
+ }
+ }
+ });
+
+ /**
+ * wp.media.view.Settings.Gallery
+ */
+ media.view.Settings.Gallery = media.view.Settings.extend({
+ className: 'gallery-settings',
+ template: media.template('gallery-settings'),
+
+ settings: {
+ columns: {
+ accepts: _.invoke( _.range( 1, 10 ), 'toString' ),
+ fallback: 3,
+ type: 'select'
+ },
+ link: {
+ accepts: ['post','file'],
+ fallback: 'post'
+ }
+ }
+
+ // render: function() {
+ // this.$el.html( this.template({
+ // count: this.options.maxColumns
+ // }) );
+
+ // this.$('option[value="' + this.options.columns + '"]').attr( 'selected', true );
+ // this.$('option[value="' + this.options.linkTo + '"]').addClass('active');
+ // }
+ });
+
+ /**
</ins><span class="cx"> * wp.media.view.Attachment.Details
</span><span class="cx"> */
</span><span class="cx"> media.view.Attachment.Details = media.view.Attachment.extend({
</span></span></pre></div>
<a id="trunkwpincludesmediaphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/media.php (22339 => 22340)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/media.php 2012-10-30 23:59:57 UTC (rev 22339)
+++ trunk/wp-includes/media.php 2012-10-31 19:22:25 UTC (rev 22340)
</span><span class="lines">@@ -1434,6 +1434,26 @@
</span><span class="cx"> </div>
</span><span class="cx"> </script>
</span><span class="cx">
</span><ins>+ <script type="text/html" id="tmpl-gallery-settings">
+ <h4><?php _e('Link To'); ?></h4>
+ <div class="link-to button-group button-large" data-setting="link">
+ <button class="button" value="post">
+ <?php esc_attr_e('Attachment Page'); ?>
+ </button>
+ <button class="button" value="file">
+ <?php esc_attr_e('Media File'); ?>
+ </button>
+ </div>
+
+ <h4><?php _e('Gallery Columns'); ?></h4>
+
+ <select class="columns" name="columns" data-setting="columns">
+ <% _.times( 9, function( i ) { %>
+ <option value="<%- i %>"><%- i %></option>
+ <% }); %>
+ </select>
+ </script>
+
</ins><span class="cx"> <script type="text/html" id="tmpl-editor-attachment">
</span><span class="cx"> <div class="editor-attachment-preview">
</span><span class="cx"> <% if ( url ) { %>
</span></span></pre>
</div>
</div>
</body>
</html>