Ticket #28842: 28842.6.diff

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

@@ -944 +944 @@
                 0 0 0 2px #1e8cbe;
 }
 
-.media-frame.mode-grid .attachment .check {
-        display: block;
-}
-
-.media-frame.mode-grid .attachment .check div {
-        background-position: 21px 0;
-}
-
 .attachment.details .check div,
 .media-frame.mode-grid .attachment.selected .check div {
         background-position: -21px 0;
@@ -997 +989 @@
 .attachments-browser .media-toolbar-primary > .media-button-group,
 .attachments-browser .media-toolbar-secondary > .media-button,
 .attachments-browser .media-toolbar-secondary > .media-button-group {
-        margin-top: 10px;
+        margin: 11px 0;
 }
 
 .attachments-browser .attachments,
@@ -2453 +2445 @@
 
 /* Regions we don't use at all */
 .media-frame.mode-grid .media-frame-title,
-.media-frame.mode-grid .media-frame-toolbar,
 .media-frame.mode-grid .media-frame-router,
 .media-frame.mode-grid .media-frame-menu {
         display: none;
 }
 
+.media-frame.mode-grid .media-frame-toolbar {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+}
+
 .media-frame.mode-grid .media-frame-content {
         background-color: transparent;
         border: none;
@@ -2485 +2483 @@
 }
 
 .media-frame.mode-grid .attachments {
-        padding: 2px;
+        padding: 92px 2px 2px;
 }
 
 /**
@@ -2493 +2491 @@
  *
  * This should be OOCSS'd so both use a shared selector.
  */
+.media-frame.mode-grid .media-toolbar,
 .media-frame.mode-grid .attachments-browser .media-toolbar {
         background: #fff;
         -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
@@ -2501 +2500 @@
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         color: #555;
-        display: inline-block;
         font-size: 13px;
         margin: 20px 0;
         padding: 0 20px;
-        position: relative;
-        width: 100%;
         height: auto;
         border: none;
 }
 
+.media-frame.mode-grid .media-frame-toolbar .media-toolbar {
+        position: fixed;
+        height: 60px;
+        top: auto;
+        right: 20px;
+        bottom: 0;
+        left: 182px;
+}
+
+.media-frame.mode-grid.hide-toolbar .media-frame-toolbar .media-toolbar {
+        display: none;
+}
+
+.media-frame.mode-grid .attachments-browser .media-toolbar {
+        position: absolute;
+        width: 100%;
+}
+
+.media-frame.mode-grid .attachments-browser .media-toolbar.fixed {
+        position: fixed;
+        top: 28px;
+        left: 182px;
+        right: 20px;
+        width: auto;
+}
+
 .media-frame.mode-grid input[type="search"] {
         margin: 1px;
         padding: 3px 5px;

src/wp-includes/js/media-grid.js

@@ -62 +62 @@
                                 multiple:  'add',
                                 state:     'library',
                                 uploader:  true,
-                                mode:      [ 'grid' ]
+                                mode:      [ 'grid', 'edit' ]
                         });
 
                         $(document).on( 'click', '.add-new-h2', _.bind( this.addNewClickHandler, this ) );
@@ -103 +103 @@
                         this.bindRegionModeHandlers();
                         this.render();
 
+                        this.toggleToolbar();
+                        this.on( 'select:activate edit:activate', _.bind( this.toggleToolbar, this ) );
+
                         // Update the URL when entering search string (at most once per second)
                         $( '#media-search-input' ).on( 'input', _.debounce( function(e) {
                                 var val = $( e.currentTarget ).val(), url = '';
@@ -130 +133 @@
                                         multiple:           options.multiple,
                                         title:              options.title,
                                         content:            'browse',
+                                        toolbar:            'select',
                                         contentUserSetting: false,
                                         filterable:         'all'
                                 })
@@ -144 +148 @@
 
                         // Handle a frame-level event for editing an attachment.
                         this.on( 'edit:attachment', this.openEditAttachmentModal, this );
+                        this.on( 'toolbar:create:select', this.createToolbar, this );
                 },
 
                 /**
@@ -203 +208 @@
                         this.errors.on( 'add remove reset', this.sidebarVisibility, this );
                 },
 
+                createToolbar: function( toolbar ) {
+                        toolbar.view = new media.view.Toolbar({
+                                controller: this,
+                                items: {
+                                        delete: {
+                                                style: 'primary',
+                                                text:     'Delete Selected',
+                                                priority: 10,
+                                                click:    function() {
+                                                        // media.view.Button.prototype.click.apply( this, arguments );
+                                                        while ( this.controller.state().get('selection').length > 0 ) {
+                                                                this.controller.state().get('selection').at(0).destroy();
+                                                        }
+                                                }
+                                        }
+                                }
+                        });
+                },
+
                 sidebarVisibility: function() {
                         this.browserView.$( '.media-sidebar' ).toggle( this.errors.length );
                 },
@@ -219 +243 @@
                                         pushState: true
                                 } );
                         }
+                },
+
+                toggleToolbar: function() {
+                        if ( this.isModeActive( 'edit' ) ) {
+                                this.$el.addClass( 'hide-toolbar' );
+                        } else {
+                                this.$el.removeClass( 'hide-toolbar' );
+                        }
                 }
         });
 
@@ -507 +539 @@
                 }
         });
 
-        /**
-         * Controller for bulk selection.
-         */
-        media.view.BulkSelection = media.View.extend({
-                className: 'bulk-select',
-
-                initialize: function() {
-                        this.model = new Backbone.Model({
-                                currentAction: ''
-
-                        });
-
-                        this.views.add( new media.view.Label({
-                                value: l10n.bulkActionsLabel,
-                                attributes: {
-                                        'for': 'bulk-select-dropdown'
-                                }
-                        }) );
-
-                        this.views.add(
-                                new media.view.BulkSelectionActionDropdown({
-                                        controller: this
-                                })
-                        );
-
-                        this.views.add(
-                                new media.view.BulkSelectionActionButton({
-                                        disabled:   true,
-                                        text:       l10n.apply,
-                                        controller: this
-                                })
-                        );
-                }
-        });
-
-        /**
-         * Bulk Selection dropdown view.
-         *
-         * @constructor
-         * @augments wp.media.View
-         * @augments wp.Backbone.View
-         * @augments Backbone.View
-         */
-        media.view.BulkSelectionActionDropdown = media.View.extend({
-                tagName: 'select',
-                id:      'bulk-select-dropdown',
-
+        media.view.SelectModeToggleButton = media.view.Button.extend({
                 initialize: function() {
                         media.view.Button.prototype.initialize.apply( this, arguments );
-                        this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
-                        this.$el.append( $('<option></option>').val( '' ).html( l10n.bulkActions ) )
-                                .append( $('<option></option>').val( 'delete' ).html( l10n.deletePermanently ) );
-                        this.$el.prop( 'disabled', true );
-                        this.$el.on( 'change', _.bind( this.changeHandler, this ) );
+                        this.listenTo( this.controller, 'select:activate select:deactivate', _.bind( this.toggleBulkEditHandler, this ) );
                 },
 
-                /**
-                 * Change handler for the dropdown.
-                 *
-                 * Sets the bulk selection controller's currentAction.
-                 */
-                changeHandler: function() {
-                        this.controller.model.set( { 'currentAction': this.$el.val() } );
-                },
-
-                /**
-                 * Enable or disable the dropdown if attachments have been selected.
-                 */
-                enabled: function() {
-                        var disabled = ! this.controller.controller.state().get('selection').length;
-                        this.$el.prop( 'disabled', disabled );
-                }
-        });
-
-        /**
-         * Bulk Selection dropdown view.
-         *
-         * @constructor
-         *
-         * @augments wp.media.view.Button
-         * @augments wp.media.View
-         * @augments wp.Backbone.View
-         * @augments Backbone.View
-         */
-        media.view.BulkSelectionActionButton = media.view.Button.extend({
-                tagName: 'button',
-
-                initialize: function() {
-                        media.view.Button.prototype.initialize.apply( this, arguments );
-
-                        this.listenTo( this.controller.model, 'change', this.enabled, this );
-                        this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
-                },
-                /**
-                 * Button click handler.
-                 */
                 click: function() {
-                        var selection = this.controller.controller.state().get('selection');
                         media.view.Button.prototype.click.apply( this, arguments );
-
-                        if ( 'delete' === this.controller.model.get( 'currentAction' ) ) {
-                                // Currently assumes delete is the only action
-                                if ( confirm( l10n.warnBulkDelete ) ) {
-                                        while ( selection.length > 0 ) {
-                                                selection.at(0).destroy();
-                                        }
-                                }
+                        if ( this.controller.isModeActive( 'select' ) ) {
+                                this.controller.deactivateMode( 'select' ).activateMode( 'edit' );
+                        } else {
+                                this.controller.deactivateMode( 'edit' ).activateMode( 'select' );
                         }
+                },
 
-                        this.enabled();
+                render: function() {
+                        media.view.Button.prototype.render.apply( this, arguments );
+                        this.el.className = this.el.className + ' select-mode-toggle-button';
+                        return this;
                 },
-                /**
-                 * Enable or disable the button depending if a bulk action is selected
-                 * in the bulk select dropdown, and if attachments have been selected.
-                 */
-                enabled: function() {
-                        var currentAction = this.controller.model.get( 'currentAction' ),
-                                selection = this.controller.controller.state().get('selection'),
-                                disabled = ! currentAction || ! selection.length;
-                        this.$el.prop( 'disabled', disabled );
+
+                toggleBulkEditHandler: function() {
+                        if ( this.controller.isModeActive( 'select' ) ) {
+                                this.model.set( 'text', 'Cancel' );
+                                this.controller.content.get().toolbar.$el.find( '.media-toolbar-secondary > *, .media-toolbar-primary > *').hide();
+                                this.controller.content.get().toolbar.$el.find( '.select-mode-toggle-button').show();
+                        } else {
+                                this.model.set( 'text', 'Select' );
+                                this.controller.content.get().toolbar.$el.find( '.media-toolbar-secondary > *, .media-toolbar-primary > *').not('.spinner').show();
+                                this.controller.state().get('selection').reset();
+                        }
                 }
         });
 

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

@@ -1792 +1792 @@
                 deactivateMode: function( mode ) {
                         // Bail if the mode isn't active.
                         if ( ! this.isModeActive( mode ) ) {
-                                return;
+                                return this;
                         }
                         this.activeModes.remove( this.activeModes.where( { id: mode } ) );
                         this.$el.removeClass( 'mode-' + mode );
@@ -3947 +3947 @@
 
                         this._views = {};
 
+                        $(window).on( 'scroll', this.fixPosition );
                         // The toolbar is composed of two `PriorityList` views.
                         this.primary   = new media.view.PriorityList();
                         this.secondary = new media.view.PriorityList();
@@ -3971 +3972 @@
                                 library.on( 'add remove reset', this.refresh, this );
                         }
                 },
+
+                fixPosition: function() {
+                        $adminBar = $( '#wpadminbar' );
+                        var parentOffset = $('.attachments-browser').offset().top;
+                        // debugger;
+                        if ( parentOffset < $(window).scrollTop() + $adminBar.height() ) {
+                                $('.attachments-browser .media-toolbar').addClass( 'fixed' );
+                        } else {
+                                $('.attachments-browser .media-toolbar').removeClass( 'fixed' );
+                        }
+                },
                 /**
                  * @returns {wp.media.view.Toolbar} Returns itsef to allow chaining
                  */
@@ -4804 +4816 @@
                         }
 
                         // In the grid view, bubble up an edit:attachment event to the controller.
-                        if ( this.controller.isModeActive( 'grid' ) ) {
+                        if ( this.controller.isModeActive( 'grid' ) && this.controller.isModeActive( 'edit' ) ) {
                                 // Pass the current target to restore focus when closing
                                 this.controller.trigger( 'edit:attachment', this.model, event.currentTarget );
 
@@ -5758 +5770 @@
                         // browser view. Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar );
                         // which the controller can tap into and add this view?
                         if ( this.controller.activeModes.where( { id: 'grid' } ).length ) {
-                                LibraryViewSwitcher = media.View.extend({
+                                var LibraryViewSwitcher = media.View.extend({
                                         className: 'view-switch media-grid-view-switch',
                                         template: media.template( 'media-library-view-switcher')
                                 });
@@ -5769 +5781 @@
                                 }).render() );
 
                                 // BulkSelection is a <div> with subviews, including screen reader text
-                                this.toolbar.set( 'bulkSelection', new media.view.BulkSelection({
+                                this.toolbar.set( 'selectModeToggleButton', new media.view.SelectModeToggleButton({
+                                        text: 'Select',
                                         controller: this.controller,
                                         priority: -70
                                 }).render() );