Changeset 22594

Timestamp:

11/15/2012 02:36:06 AM (12 years ago)

Author:

koopersmith

Message:

Media: Enter batch insert workflow by editing the selection instead of having an explicit button. see #21390.

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (2 diffs)
• js/media-views.js (modified) (26 diffs)
• media.php (modified) (2 diffs)

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

@@ -812 +812 @@
 }
 
-.media-selection .clear-selection {
-    display: block;
+.media-selection .selection-info a {
+    display: block;
+    float: left;
+    padding: 1px 8px;
+    margin: 1px 8px 1px -8px;
+    line-height: 16px;
     text-decoration: none;
-    line-height: 16px;
+    border-right: 1px solid #dfdfdf;
+    color: #21759B;
+}
+
+.media-selection .selection-info a:hover {
+    background: #21759B;
+    color: #fff;
+    border-color: transparent;
+}
+
+.media-selection .selection-info a:last-child {
+    border-right: 0;
+}
+
+.media-selection .selection-info .clear-selection {
+    color: red;
+}
+
+.media-selection .selection-info .clear-selection:hover {
+    background: red;
 }
 
@@ -826 +849 @@
 }
 
-.media-selection .selected.attachment {
+.attachment.selection.selected {
     box-shadow: none;
 }
 
-.media-selection .details.attachment {
+.attachment.selection.details {
+    box-shadow:
+        0 0 0 1px #fff,
+        0 0 0 4px #1e8cbe;
+}
+
+.media-selection .attachment.selection.details {
     box-shadow:
         0 0 0 1px #fff,

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

@@ -373 +373 @@
 
         refreshSelection: function() {
+            var selection = this.get('selection'),
+                mode = this.frame.content.mode();
+
             this.frame.toolbar.view().refresh();
-            this.trigger( 'refresh:selection', this, this.get('selection') );
+            this.trigger( 'refresh:selection', this, selection );
+
+            if ( ! selection.length && 'browse' !== mode && 'upload' !== mode )
+                this.content();
         },
 
         selectUpload: function( attachment ) {
             this.get('selection').add( attachment );
-        },
-
-        toggleSelection: function( model ) {
-            var selection = this.get('selection');
-
-            if ( ! model )
-                return;
-
-            if ( selection.has( model ) ) {
-                // If the model is the single model, remove it.
-                // If it is not the same as the single model,
-                // it now becomes the single model.
-                selection[ selection.single() === model ? 'remove' : 'single' ]( model );
-            } else {
-                selection.add( model ).single();
-            }
-
-            return this;
         },
 
@@ -519 +507 @@
             // The single `Attachment` view to be used in the `Attachments` view.
             if ( ! this.get('AttachmentView') )
-                this.set( 'AttachmentView', media.view.Attachment.Gallery );
+                this.set( 'AttachmentView', media.view.Attachment.EditLibrary );
             media.controller.Library.prototype.initialize.apply( this, arguments );
         },
@@ -868 +856 @@
                 controller: this,
                 collection: state.get('library'),
+                selection:  state.get('selection'),
                 model:      state,
                 sortable:   state.get('sortable'),
@@ -981 +970 @@
                 multiple: this.options.multiple,
                 menu:      'main',
+                sidebar:   'attachment-settings',
 
                 // Update user settings when users adjust the
@@ -1059 +1049 @@
             var handlers = {
                     menu: {
-                        batch:   'batchMenu',
-                        gallery: 'galleryMenu'
+                        'batch':   'batchMenu',
+                        'gallery': 'galleryMenu'
                     },
 
                     content: {
-                        embed: 'embedContent'
+                        'embed':          'embedContent',
+                        'edit-selection': 'editSelectionContent'
                     },
 
@@ -1084 +1075 @@
                 _.each( regionHandlers, function( callback, handler ) {
                     this[ region ].on( 'activate:' + handler, this[ callback ], this );
-                }, this );
-            }, this );
-
-            _.each(['library', 'upload'], function( id ) {
-                this.get( id ).on( 'refresh:selection', function( state, selection ) {
-                    var sidebar = this.sidebar;
-
-                    if ( ! selection.length )
-                        sidebar.mode('clear');
-                    else if ( selection.length === 1 )
-                        sidebar.mode('attachment-settings');
-                    else
-                        sidebar.mode('settings');
                 }, this );
             }, this );
@@ -1205 +1183 @@
         },
 
+        editSelectionContent: function() {
+            var state = this.state(),
+                selection = state.get('selection'),
+                view;
+
+            view = new media.view.AttachmentsBrowser({
+                controller: this,
+                collection: selection,
+                selection:  selection,
+                model:      state,
+                sortable:   true,
+                search:     false,
+
+                AttachmentView: media.view.Attachment.EditSelection
+            }).render();
+
+            view.toolbar.set( 'backToLibrary', {
+                text:     l10n.returnToLibrary,
+                priority: -100,
+
+                click: function() {
+                    this.controller.content.mode('browse');
+                }
+            });
+
+            // Browse our library of attachments.
+            this.content.view( view );
+        },
+
         // Sidebars
         onSidebarGallerySettings: function( options ) {
@@ -1762 +1769 @@
                     controller: controller,
                     collection: selection,
-                    priority:   -40
+                    priority:   -40,
+
+                    editable: function() {
+                        this.controller.content.mode('edit-selection');
+                    }
                 }).render(),
 
@@ -1772 +1783 @@
                     click: function() {
                         controller.close();
-                        controller.state().trigger( 'insert', selection );
-                        selection.clear();
+                        controller.state().trigger( 'insert', selection ).reset();
                     }
                 },
@@ -1783 +1793 @@
                         return selection.where({ type: 'image' });
                     })
-                },
-
-                batch: {
-                    text:     l10n.batchInsert,
-                    priority: 60,
-                    click:    selectionToLibrary('batch-edit')
                 }
             });
@@ -1801 +1805 @@
             this.get('insert').model.set( 'disabled', ! selection.length );
 
-            // Check if every attachment in the selection is an image.
+            // Check if any attachment in the selection is an image.
             this.get('gallery').$el.toggle( count > 1 && selection.any( function( attachment ) {
                 return 'image' === attachment.get('type');
             }) );
-
-            // Batch insert shows for multiple selected attachments.
-            this.get('batch').$el.toggle( count > 1 );
-
-            // Insert only shows for single attachments.
-            this.get('insert').$el.toggle( count <= 1 );
         }
     });
@@ -2076 +2074 @@
             'change [data-setting] input':    'updateSetting',
             'change [data-setting] select':   'updateSetting',
-            'change [data-setting] textarea': 'updateSetting'
+            'change [data-setting] textarea': 'updateSetting',
+            'click .close':                   'removeFromLibrary'
         },
 
@@ -2148 +2147 @@
 
         toggleSelection: function( event ) {
-            this.controller.state().toggleSelection( this.model );
+            var selection = this.options.selection,
+                model = this.model;
+
+            if ( ! selection )
+                return;
+
+            if ( selection.has( model ) ) {
+                // If the model is the single model, remove it.
+                // If it is not the same as the single model,
+                // it now becomes the single model.
+                selection[ selection.single() === model ? 'remove' : 'single' ]( model );
+            } else {
+                selection.add( model ).single();
+            }
         },
 
         selected: function() {
-            var selection = this.controller.state().get('selection');
+            var selection = this.options.selection;
             if ( selection )
                 return selection.has( this.model );
@@ -2158 +2170 @@
 
         select: function( model, collection ) {
-            var selection = this.controller.state().get('selection');
+            var selection = this.options.selection;
 
             // Check if a selection exists and if it's the collection provided.
@@ -2170 +2182 @@
 
         deselect: function( model, collection ) {
-            var selection = this.controller.state().get('selection');
+            var selection = this.options.selection;
 
             // Check if a selection exists and if it's the collection provided.
@@ -2182 +2194 @@
 
         details: function( model, collection ) {
-            var selection = this.controller.state().get('selection'),
+            var selection = this.options.selection,
                 details;
 
@@ -2221 +2233 @@
 
             this.model.save( $setting.data('setting'), event.target.value );
+        },
+
+        removeFromLibrary: function( event ) {
+            // Stop propagation so the model isn't selected.
+            event.stopPropagation();
+
+            this.collection.remove( this.model );
         }
     });
@@ -2232 +2251 @@
 
     /**
-     * wp.media.view.Attachment.Gallery
-     */
-    media.view.Attachment.Gallery = media.view.Attachment.extend({
+     * wp.media.view.Attachment.EditLibrary
+     */
+    media.view.Attachment.EditLibrary = media.view.Attachment.extend({
         buttons: {
             close: true
-        },
-
-        events: (function() {
-            var events = _.clone( media.view.Attachment.prototype.events );
-            events['click .close'] = 'removeFromGallery';
-            return events;
-        }()),
-
-        removeFromGallery: function( event ) {
-            // Stop propagation so the model isn't selected.
-            event.stopPropagation();
-
-            this.controller.state().get('library').remove( this.model );
         }
     });
@@ -2389 +2395 @@
                 return new this.options.AttachmentView({
                     controller: this.controller,
-                    model:      attachment
+                    model:      attachment,
+                    collection: this.collection,
+                    selection:  this.options.selection
                 }).render().$el;
             }, this ) );
@@ -2405 +2413 @@
             view = new this.options.AttachmentView({
                 controller: this.controller,
-                model:      attachment
+                model:      attachment,
+                collection: this.collection,
+                selection:  this.options.selection
             }).render();
 
@@ -2522 +2532 @@
                 controller: this.controller,
                 collection: this.collection,
+                selection:  this.options.selection,
                 model:      this.model,
                 sortable:   this.options.sortable,
@@ -2604 +2615 @@
 
         events: {
+            'click .edit-selection':  'edit',
             'click .clear-selection': 'clear'
         },
@@ -2609 +2621 @@
         initialize: function() {
             _.defaults( this.options, {
+                editable:  false,
                 clearable: true
             });
@@ -2616 +2629 @@
                 controller: this.controller,
                 collection: this.collection,
+                selection:  this.collection,
                 sortable:   true,
                 model:      new Backbone.Model({
@@ -2656 +2670 @@
         },
 
+        edit: function( event ) {
+            event.preventDefault();
+            if ( this.options.editable )
+                this.options.editable.call( this, this.collection );
+        },
+
         clear: function( event ) {
             event.preventDefault();
@@ -2667 +2687 @@
      */
     media.view.Attachment.Selection = media.view.Attachment.extend({
+        className: 'attachment selection',
+
         // On click, just select the model, instead of removing the model from
         // the selection.
         toggleSelection: function() {
-            this.controller.state().get('selection').single( this.model );
+            this.options.selection.single( this.model );
+        }
+    });
+
+    media.view.Attachment.EditSelection = media.view.Attachment.Selection.extend({
+        buttons: {
+            close: true
         }
     });

trunk/wp-includes/media.php

@@ -1356 +1356 @@
         'createNewGallery'  => __( 'Create a new gallery' ),
         'insertIntoPost'    => __( 'Insert into post' ),
+        'returnToLibrary'   => __( '← Return to library' ),
 
         // Embed
@@ -1523 +1524 @@
         <div class="selection-info">
             <span class="count"></span>
+            <# if ( data.editable ) { #>
+                <a class="edit-selection" href="#"><?php _e('Edit'); ?></a>
+            <# } #>
             <# if ( data.clearable ) { #>
                 <a class="clear-selection" href="#"><?php _e('Clear'); ?></a>