Changeset 22340

Timestamp:

10/31/2012 07:22:25 PM (14 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">