Changeset 23024

Timestamp:

12/04/2012 04:21:57 PM (13 years ago)

Author:

nacin

Message:

Media: Disable 'Insert gallery' and 'Set featured image' if nothing is queued. Converts selection toolbars to use the newer view manager. props koopersmith, fixes #22714.

Location:

trunk

Files:

• wp-admin/js/custom-background.js (modified) (2 diffs)
• wp-admin/js/custom-header.js (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (1 diff)
• wp-includes/js/media-views.js (modified) (29 diffs)

trunk/wp-admin/js/custom-background.js

@@ -26 +26 @@
             event.preventDefault();
 
+            // If the media frame already exists, reopen it.
             if ( frame ) {
                 frame.open();
@@ -31 +32 @@
             }
 
+            // Create the media frame.
             frame = wp.media({
-                title:     $el.data('choose'),
-                library:   {
+                // Set the title of the modal.
+                title: $el.data('choose'),
+
+                // Tell the modal to show only images.
+                library: {
                     type: 'image'
+                },
+
+                // Customize the submit button.
+                button: {
+                    // Set the text of the button.
+                    text: $el.data('update'),
+                    // Tell the button not to close the modal, since we're
+                    // going to refresh the page when the image is selected.
+                    close: false
                 }
             });
 
-            frame.on( 'toolbar:render:select', function( view ) {
-                view.set({
-                    select: {
-                        style: 'primary',
-                        text:  $el.data('update'),
+            // When an image is selected, run a callback.
+            frame.on( 'select', function() {
+                // Grab the selected attachment.
+                var attachment = frame.state().get('selection').first();
 
-                        click: function() {
-                            var attachment = frame.state().get('selection').first();
-                            $.post( ajaxurl, {
-                                action: 'set-background-image',
-                                attachment_id: attachment.id,
-                                size: 'full'
-                            }, function() {
-                                window.location.reload();
-                            });
-                        }
-                    }
+                // Run an AJAX request to set the background image.
+                $.post( ajaxurl, {
+                    action: 'set-background-image',
+                    attachment_id: attachment.id,
+                    size: 'full'
+                }).done( function() {
+                    // When the request completes, reload the window.
+                    window.location.reload();
                 });
             });
 
-            frame.setState('library').open();
+            // Finally, open the modal.
+            frame.open();
         });
     });

trunk/wp-admin/js/custom-header.js

@@ -19 +19 @@
             event.preventDefault();
 
+            // Create the media frame.
             frame = wp.media({
-                title:     $el.data('choose'),
-                library:   {
+                // Set the title of the modal.
+                title: $el.data('choose'),
+
+                // Tell the modal to show only images.
+                library: {
                     type: 'image'
+                },
+
+                // Customize the submit button.
+                button: {
+                    // Set the text of the button.
+                    text: $el.data('update'),
+                    // Tell the button not to close the modal, since we're
+                    // going to refresh the page when the image is selected.
+                    close: false
                 }
             });
 
-            frame.on( 'toolbar:render:select', function( view ) {
-                view.set({
-                    select: {
-                        style: 'primary',
-                        text:  $el.data('update'),
+            // When an image is selected, run a callback.
+            frame.on( 'select', function() {
+                // Grab the selected attachment.
+                var attachment = frame.state().get('selection').first(),
+                    link = $el.data('updateLink');
 
-                        click: function() {
-                            var attachment = frame.state().get('selection').first(),
-                                link = $el.data('updateLink');
-
-                            window.location = link + '&file=' + attachment.id;
-                        }
-                    }
-                });
+                // Tell the browser to navigate to the crop step.
+                window.location = link + '&file=' + attachment.id;
             });
 
-            frame.setState('library').open();
+            frame.open();
         });
     });

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

@@ -1175 +1175 @@
 }
 
+.media-selection .selection-view {
+    display: inline-block;
+}
+
 .media-selection .attachments {
     display: inline-block;

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

@@ -390 +390 @@
 
         activate: function() {
-            var library = this.get('library'),
-                selection = this.get('selection'),
-                mode;
-
             if ( this.get('syncLastSelection') ) {
                 this.getLastSelection();
@@ -405 +401 @@
             wp.Uploader.queue.on( 'add', this.uploading, this );
 
-            selection.on( 'add remove reset', this.refreshSelection, this );
+            this.get('selection').on( 'add remove reset', this.refreshContent, this );
 
             this.on( 'insert', this._insertDisplaySettings, this );
@@ -489 +485 @@
 
             selection.reset( lastSelection.toArray() ).single( lastSelection.single() );
-        },
-
-        refreshSelection: function() {
-            this.frame.toolbar.get().refresh();
-            this.trigger( 'refresh:selection', this, this.get('selection') );
-            this.refreshContent();
         },
 
@@ -1318 +1308 @@
 
         createToolbar: function( toolbar ) {
-            menu.view = new media.view.Toolbar({
+            toolbar.view = new media.view.Toolbar({
                 controller: this
             });
@@ -1426 +1416 @@
                 selection: [],
                 library:   {},
-                multiple:  false
+                multiple:  false,
+                state:    'library'
             });
 
@@ -1469 +1460 @@
             this.on( 'content:render:upload', this.uploadContent, this );
             this.on( 'toolbar:create:select', this.createSelectToolbar, this );
-
-            this.on( 'refresh:selection', this.refreshSelectToolbar, this );
         },
 
@@ -1518 +1507 @@
         // Toolbars
         createSelectToolbar: function( toolbar, options ) {
-            options = _.defaults( options || {}, {
-                event:  'select',
-                silent: false,
-                state:  false
-            });
-
-            toolbar.view = new media.view.Toolbar({
-                controller: this,
-                silent:     options.silent,
-
-                items: {
-                    select: {
-                        style:    'primary',
-                        text:     l10n.select,
-                        priority: 80,
-
-                        click: function() {
-                            var controller = this.controller;
-
-                            controller.close();
-                            controller.state().trigger( options.event );
-                            controller.reset();
-                            if ( options.state )
-                                controller.setState( options.state );
-                        }
-                    }
-                }
-            });
-        },
-
-        refreshSelectToolbar: function() {
-            var selection = this.state().get('selection');
-
-            if ( ! selection || 'select' !== this.toolbar.mode() )
-                return;
-
-            this.toolbar.get().get('select').model.set( 'disabled', ! selection.length );
+            options = options || this.options.button || {};
+            options.controller = this;
+
+            toolbar.view = new media.view.Toolbar.Select( options );
         }
     });
@@ -1565 +1521 @@
             _.defaults( this.options, {
                 multiple:  true,
-                editing:   false
+                editing:   false,
+                state:    'insert'
             });
 
@@ -1652 +1609 @@
             media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
             this.on( 'menu:create:gallery', this.createMenu, this );
-            this.on( 'toolbar:create:main-insert', this.createSelectionToolbar, this );
-            this.on( 'toolbar:create:main-gallery', this.createSelectionToolbar, this );
+            this.on( 'toolbar:create:main-insert', this.createToolbar, this );
+            this.on( 'toolbar:create:main-gallery', this.createToolbar, this );
+            this.on( 'toolbar:create:featured-image', this.featuredImageToolbar, this );
+            this.on( 'toolbar:create:main-embed', this.mainEmbedToolbar, this );
 
             var handlers = {
@@ -1669 +1628 @@
                         'main-insert':      'mainInsertToolbar',
                         'main-gallery':     'mainGalleryToolbar',
-                        'main-embed':       'mainEmbedToolbar',
-                        'featured-image':   'featuredImageToolbar',
                         'gallery-edit':     'galleryEditToolbar',
                         'gallery-add':      'galleryAddToolbar'
@@ -1758 +1715 @@
 
         // Toolbars
-        createSelectionToolbar: function( toolbar ) {
-            toolbar.view = new media.view.Toolbar.Selection({
+        selectionStatusToolbar: function( view ) {
+            var editable = this.state().get('editable');
+
+            view.set( 'selection', new media.view.Selection({
                 controller: this,
-                editable:   this.state().get('editable')
-            });
+                collection: this.state().get('selection'),
+                priority:   -40,
+
+                // If the selection is editable, pass the callback to
+                // switch the content mode.
+                editable: editable && function() {
+                    this.controller.content.mode('edit-selection');
+                }
+            }).render() );
         },
 
@@ -1768 +1734 @@
             var controller = this;
 
-            view.button = 'insert';
+            this.selectionStatusToolbar( view );
+
             view.set( 'insert', {
                 style:    'primary',
                 priority: 80,
                 text:     l10n.insertIntoPost,
+                requires: { selection: true },
 
                 click: function() {
@@ -1787 +1755 @@
             var controller = this;
 
-            view.button = 'gallery';
+            this.selectionStatusToolbar( view );
+
             view.set( 'gallery', {
                 style:    'primary',
                 text:     l10n.createNewGallery,
                 priority: 60,
+                requires: { selection: true },
 
                 click: function() {
@@ -1808 +1778 @@
         },
 
-        featuredImageToolbar: function() {
-            this.toolbar.set( new media.view.Toolbar.Select({
-                controller: this,
-                text:       l10n.setFeaturedImage,
-                state:      this.options.state || 'upload'
-            }) );
-        },
-
-        mainEmbedToolbar: function() {
-            this.toolbar.set( new media.view.Toolbar.Embed({
+        featuredImageToolbar: function( toolbar ) {
+            this.createSelectToolbar( toolbar, {
+                text:  l10n.setFeaturedImage,
+                state: this.options.state || 'upload'
+            });
+        },
+
+        mainEmbedToolbar: function( toolbar ) {
+            toolbar.view = new media.view.Toolbar.Embed({
                 controller: this
-            }) );
-
-            this.$el.removeClass('hide-toolbar');
+            });
         },
 
@@ -1833 +1800 @@
                         text:     editing ? l10n.updateGallery : l10n.insertGallery,
                         priority: 80,
+                        requires: { library: true },
 
                         click: function() {
@@ -2221 +2189 @@
 
         initialize: function() {
-            this._views     = {};
-            this.$primary   = $('<div class="media-toolbar-primary" />').prependTo( this.$el );
-            this.$secondary = $('<div class="media-toolbar-secondary" />').prependTo( this.$el );
+            var state = this.controller.state(),
+                selection = this.selection = state.get('selection'),
+                library = this.library = state.get('library');
+
+            this._views = {};
+
+            // The toolbar is composed of two `PriorityList` views.
+            this.primary   = new media.view.PriorityList();
+            this.secondary = new media.view.PriorityList();
+            this.primary.$el.addClass('media-toolbar-primary');
+            this.secondary.$el.addClass('media-toolbar-secondary');
+
+            this.views.set([ this.secondary, this.primary ]);
 
             if ( this.options.items )
@@ -2230 +2208 @@
             if ( ! this.options.silent )
                 this.render();
-        },
-
-        destroy: function() {
-            this.remove();
-
-            if ( this.model )
-                this.model.off( null, null, this );
-
-            if ( this.collection )
-                this.collection.off( null, null, this );
-
-            this.controller.off( null, null, this );
-
-            _.each( this._views, function( view ) {
-                if ( view.destroy )
-                    view.destroy();
-            });
-        },
-
-        render: function() {
-            var views = _.chain( this._views ).sortBy( function( view ) {
-                return view.options.priority || 10;
-            }).groupBy( function( view ) {
-                return ( view.options.priority || 10 ) > 0 ? 'primary' : 'secondary';
-            }).value();
-
-            // Make sure to detach the elements we want to reuse.
-            // Otherwise, `jQuery.html()` will unbind their events.
-            $( _.pluck( this._views, 'el' ) ).detach();
-            this.$primary.html( _.pluck( views.primary || [], 'el' ) );
-            this.$secondary.html( _.pluck( views.secondary || [], 'el' ) );
-
+
+            selection.on( 'add remove reset', this.refresh, this );
+            library.on( 'add remove reset', this.refresh, this );
+        },
+
+        dispose: function() {
+            this.selection.off( null, null, this );
+            this.library.off( null, null, this );
+            return media.View.prototype.dispose.apply( this, arguments );
+        },
+
+        ready: function() {
             this.refresh();
-
-            return this;
         },
 
         set: function( id, view, options ) {
+            var list;
             options = options || {};
 
@@ -2285 +2242 @@
 
                 this._views[ id ] = view;
+
+                list = view.options.priority < 0 ? 'secondary' : 'primary';
+                this[ list ].set( id, view, options );
             }
 
             if ( ! options.silent )
-                this.render();
+                this.refresh();
+
             return this;
         },
@@ -2298 +2259 @@
         unset: function( id, options ) {
             delete this._views[ id ];
+            this.primary.unset( id, options );
+            this.secondary.unset( id, options );
+
             if ( ! options || ! options.silent )
-                this.render();
+                this.refresh();
             return this;
         },
 
-        refresh: function() {}
+        refresh: function() {
+            var state = this.controller.state(),
+                library = state.get('library'),
+                selection = state.get('selection');
+
+            _.each( this._views, function( button ) {
+                if ( ! button.model || ! button.options || ! button.options.requires )
+                    return;
+
+                var requires = button.options.requires,
+                    disabled = false;
+
+                if ( requires.selection && ! selection.length )
+                    disabled = true;
+                else if ( requires.library && ! library.length )
+                    disabled = true;
+
+                button.model.set( 'disabled', disabled );
+            });
+        }
     });
 
@@ -2321 +2304 @@
                 reset: true,
                 close: true,
-                text:  l10n.select
+                text:  l10n.select,
+
+                // Does the button rely on the selection?
+                requires: {
+                    selection: true
+                }
             });
 
@@ -2329 +2317 @@
                     text:     options.text,
                     priority: 80,
-                    click:    this.clickSelect
+                    click:    this.clickSelect,
+                    requires: options.requires
                 }
             });
@@ -2366 +2355 @@
         },
 
+        dispose: function() {
+            this.controller.state().props.off( 'change:url', this.refresh, this );
+            media.view.Toolbar.Select.prototype.dispose.apply( this, arguments );
+        },
+
         refresh: function() {
             var url = this.controller.state().props.get('url');
             this.get('select').model.set( 'disabled', ! url || /^https?:\/\/$/.test(url) );
-        }
-    });
-
-    // wp.media.view.Toolbar.Selection
-    // -------------------------------
-    media.view.Toolbar.Selection = media.view.Toolbar.extend({
-        button: 'insert',
-
-        initialize: function() {
-            var controller = this.controller;
-
-            this.options.items = _.defaults( this.options.items || {}, {
-                selection: new media.view.Selection({
-                    controller: controller,
-                    collection: controller.state().get('selection'),
-                    priority:   -40,
-
-                    // If the selection is editable, pass the callback to
-                    // switch the content mode.
-                    editable: this.options.editable && function() {
-                        this.controller.content.mode('edit-selection');
-                    }
-                }).render()
-            });
-
-            media.view.Toolbar.prototype.initialize.apply( this, arguments );
-        },
-
-        refresh: function() {
-            var selection = this.controller.state().get('selection'),
-                button = this.get( this.button );
-
-            if ( ! button )
-                return;
-
-            button.model.set( 'disabled', ! selection.length );
+
+            media.view.Toolbar.Select.prototype.refresh.apply( this, arguments );
         }
     });
@@ -2516 +2476 @@
                 this.render();
         },
-
-        destroy: this.dispose,
 
         set: function( id, view, options ) {
@@ -3650 +3608 @@
             });
 
+            this.views.set( '.selection-view', this.attachments );
             this.collection.on( 'add remove reset', this.refresh, this );
         },
 
-        destroy: function() {
-            this.remove();
-            this.collection.off( 'add remove reset', this.refresh, this );
-            this.attachments.destroy();
-        },
-
-        render: function() {
-            this.attachments.$el.detach();
-            this.attachments.render();
-
-            this.$el.html( this.template( this.options ) );
-
-            this.$('.selection-view').replaceWith( this.attachments.$el );
+        ready: function() {
             this.refresh();
-            return this;
         },
 
@@ -3729 +3675 @@
         },
 
-        destroy: function() {
-            this.model.off( null, null, this );
-        },
-
         render: function() {
             this.$el.html( this.template( _.defaults({
@@ -3935 +3877 @@
         },
 
-        destroy: function() {
-            this.model.off( null, null, this );
-        },
-
         render: function() {
             var compat = this.model.get('compat');
@@ -4006 +3944 @@
             view.render();
             this._settings.$el.replaceWith( view.$el );
-            if ( this._settings.destroy )
-                this._settings.destroy();
             this._settings.remove();
             this._settings = view;
@@ -4056 +3992 @@
         },
 
-        destroy: function() {
-            this.model.off( null, null, this );
-        },
-
         render: function() {
             var $input = this.$input;
@@ -4102 +4034 @@
         },
 
-        destroy: function() {
-            this.model.off( null, null, this );
-            media.view.Settings.AttachmentDisplay.prototype.destroy.apply( this, arguments );
-        },
-
         updateImage: function() {
             this.$('img').attr( 'src', this.model.get('url') );