Changeset 22340

Timestamp:

10/31/2012 07:22:25 PM (12 years ago)

Author:

koopersmith

Message:

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 #21390, #21815.

Location:

trunk/wp-includes

Files:

• js/mce-view.js (modified) (2 diffs)
• js/media-views.js (modified) (5 diffs)
• media.php (modified) (1 diff)

trunk/wp-includes/js/mce-view.js

@@ -591 +591 @@
                     var shortcodeString = shortcode.string(),
                         result = galleries[ shortcodeString ],
-                        attrs, args;
+                        attrs, args, query;
 
                     delete galleries[ shortcodeString ];
@@ -618 +618 @@
                         args.parent = attrs.id || parent;
 
-                    return media.query( args );
+                    query = media.query( args );
+                    query.props.set( _.pick( attrs, 'columns', 'link' ) );
+                    return query;
                 },
 
                 shortcode: function( attachments ) {
                     var props = attachments.props.toJSON(),
-                        attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order' ),
+                        attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order', 'link', 'columns' ),
                         shortcode;
 

trunk/wp-includes/js/media-views.js

@@ -283 +283 @@
 
             this.details();
+            frame.sidebar().add({
+                settings: new media.view.Settings.Gallery({
+                    controller: frame,
+                    model:      this.get('library').props,
+                    priority:   40
+                }).render()
+            });
         },
 
@@ -753 +760 @@
                         {
                             classes:  ['down-arrow'],
-                            dropdown: new media.view.AttachmentDisplaySettings().render().$el,
+                            dropdown: new media.view.Settings.AttachmentDisplay().render().$el,
 
                             click: function( event ) {
@@ -1445 +1452 @@
 
     /**
-     * wp.media.view.AttachmentDisplaySettings
-     */
-    media.view.AttachmentDisplaySettings = Backbone.View.extend({
+     * wp.media.view.Settings
+     */
+    media.view.Settings = Backbone.View.extend({
         tagName:   'div',
         className: 'attachment-display-settings',
@@ -1453 +1460 @@
 
         events: {
-            'click button': 'updateHandler'
-        },
-
-        settings:   {
+            'click button':    'updateHandler',
+            'change input':    'updateHandler',
+            'change select':   'updateHandler',
+            'change textarea': 'updateHandler'
+        },
+
+        settings: {},
+
+        initialize: function() {
+            var settings = this.settings;
+
+            this.model = this.model || new Backbone.Model();
+
+            _.each( settings, function( setting, key ) {
+                if ( setting.name )
+                    this.model.set( key, getUserSetting( setting.name, setting.fallback ) );
+                else
+                    this.model.set( key, this.model.get( key ) || setting.fallback );
+            }, this );
+
+            this.model.validate = function( attrs ) {
+                return _.any( attrs, function( value, key ) {
+                    return ! settings[ key ] || ! _.contains( settings[ key ].accepts, value );
+                });
+            };
+
+            this.model.on( 'change', function( model, options ) {
+                if ( ! options.changes )
+                    return;
+
+                _.each( _.keys( options.changes ), function( key ) {
+                    if ( settings[ key ] && settings[ key ].name )
+                        setUserSetting( settings[ key ].name, model.get( key ) );
+                });
+            }, this );
+
+            this.model.on( 'change', this.updateChanges, this );
+        },
+
+        render: function() {
+            this.$el.html( this.template( this.model.toJSON() ) );
+
+            // Select the correct values.
+            _( this.model.attributes ).chain().keys().each( this.update, this );
+            return this;
+        },
+
+        update: function( key ) {
+            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');
+            }
+        },
+
+        updateHandler: function( event ) {
+            var $setting = $( event.target ).closest('[data-setting]');
+
+            event.preventDefault();
+
+            if ( $setting.length )
+                this.model.set( $setting.data('setting'), event.target.value );
+        },
+
+        updateChanges: function( model, options ) {
+            if ( options.changes )
+                _( options.changes ).chain().keys().each( this.update, this );
+        }
+    });
+
+    /**
+     * 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'],
@@ -1473 +1562 @@
                 fallback: 'medium'
             }
-        },
-
-        initialize: function() {
-            var settings = this.settings;
-
-            this.model = new Backbone.Model();
-
-            _.each( settings, function( setting, key ) {
-                this.model.set( key, getUserSetting( setting.name, setting.fallback ) );
-            }, this );
-
-            this.model.validate = function( attrs ) {
-                return _.any( attrs, function( value, key ) {
-                    return ! settings[ key ] || ! _.contains( settings[ key ].accepts, value );
-                });
-            };
-
-            this.model.on( 'change', function( model, options ) {
-                if ( ! options.changes )
-                    return;
-
-                _.each( _.keys( options.changes ), function( key ) {
-                    if ( settings[ key ] )
-                        setUserSetting( settings[ key ].name, model.get( key ) );
-                });
-            }, this );
-
-            this.model.on( 'change', this.updateChanges, this );
-        },
-
-        render: function() {
-            this.$el.html( this.template( this.model.toJSON() ) );
-
-            // Select the correct values.
-            _( this.model.attributes ).chain().keys().each( this.update, this );
-            return this;
-        },
-
-        update: function( key ) {
-            var buttons = this.$('[data-setting="' + key + '"] button').removeClass('active');
-            buttons.filter( '[value="' + this.model.get( key ) + '"]' ).addClass('active');
-        },
-
-        updateHandler: function( event ) {
-            var group = $( event.target ).closest('.button-group');
-
-            event.preventDefault();
-
-            if ( group.length )
-                this.model.set( group.data('setting'), event.target.value );
-        },
-
-        updateChanges: function( model, options ) {
-            if ( options.changes )
-                _( options.changes ).chain().keys().each( this.update, this );
-        }
+        }
+    });
+
+    /**
+     * 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');
+        // }
     });
 

trunk/wp-includes/media.php

@@ -1435 +1435 @@
     </script>
 
+    <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>
+
     <script type="text/html" id="tmpl-editor-attachment">
         <div class="editor-attachment-preview">