Ticket #28842: 28842.3.diff

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

@@ -2601 +2601 @@
         margin-top: 0;
 }
 
+.media-grid-view .attachments-browser .bulk-select {
+        display: inline-block;
+}
+
 /**
  * Copied styles from the Add theme toolbar.
  *
@@ -2644 +2648 @@
         margin: 0 20px 0 0;
 }
 
-.media-grid-view select.attachment-filters {
+.media-grid-view select {
         margin: 0 10px 0 0;
 }
 

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

@@ -638 +638 @@
                 }
         });
 
-        media.view.BulkSelectionToggleButton = media.view.Button.extend({
+        media.view.BulkSelection = media.View.extend({
+                className: 'bulk-select',
+
+                initialize: function() {
+                        this.model = new Backbone.Model({
+                                currentAction: '',
+
+                        });
+
+                        this.views.add(
+                                new media.view.BulkSelectionActionDropdown({
+                                        controller: this
+                                })
+                        );
+
+                        this.views.add(
+                                new media.view.BulkSelectionActionButton({
+                                        disabled:   true,
+                                        text:       l10n.apply,
+                                        controller: this
+                                })
+                        );
+                }
+        });
+
+        media.view.BulkSelectionActionDropdown = media.View.extend({
+                tagName:   'select',
+
                 initialize: function() {
                         media.view.Button.prototype.initialize.apply( this, arguments );
-                        this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.toggleBulkEditHandler, this ) );
+                        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.toggleChange, this ) );
+                },
+
+                toggleChange: function() {
+                        this.controller.model.set( { 'currentAction': this.$el.val() } );
                 },
 
                 click: function() {
@@ -655 +690 @@
                         }
                 },
 
-                toggleBulkEditHandler: function() {
-                        var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
-                        if ( bulkEditActive ) {
-                                this.$el.addClass( 'button-primary' );
-                        } else {
-                                this.$el.removeClass( 'button-primary' );
-                                this.controller.state().get('selection').reset();
-                        }
+                enabled: function() {
+                        var disabled = ! this.controller.controller.state().get('selection').length;
+                        this.$el.prop( 'disabled', disabled );
                 }
         });
 
-        media.view.BulkDeleteButton = media.view.Button.extend({
+        media.view.BulkSelectionActionButton = media.view.Button.extend({
+                tagName: 'button',
+
                 initialize: function() {
                         media.view.Button.prototype.initialize.apply( this, arguments );
-                        this.$el.hide();
-                        this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.visibility, this ) );
+
+                        this.listenTo( this.controller.model, 'change', this.enabled, this );
                 },
 
                 click: function() {
+                        var selection = this.controller.controller.state().get('selection');
                         media.view.Button.prototype.click.apply( this, arguments );
-                        while (this.controller.state().get('selection').length > 0) {
-                                this.controller.state().get('selection').at(0).destroy();
+                        while ( selection.length > 0) {
+                                selection.at(0).destroy();
                         }
+                        this.enabled();
                 },
 
-                visibility: function() {
-                        var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
-                        if ( bulkEditActive ) {
-                                this.$el.show();
-                        } else {
-                                this.$el.hide();
-                        }
+                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 );
                 }
         });
 

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

@@ -5657 +5657 @@
                                         priority: -90
                                 }).render() );
 
-                                this.toolbar.set( 'bulkSelectionToggleButton', new media.view.BulkSelectionToggleButton({
-                                        text: 'Bulk Edit',
+                                this.toolbar.set( 'BulkSelection', new media.view.BulkSelection({
                                         controller: this.controller,
                                         priority: -70
                                 }).render() );
-
-                                this.toolbar.set( 'BulkDeleteButton', new media.view.BulkDeleteButton({
-                                        text: 'Bulk Delete',
-                                        controller: this.controller,
-                                        priority: -69
-                                }).render() );
                         }
 
                         filters = this.options.filters;

src/wp-includes/media.php

@@ -2908 +2908 @@
                 'insertIntoPost'     => $hier ? __( 'Insert into page' ) : __( 'Insert into post' ),
                 'uploadedToThisPost' => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ),
                 'warnDelete' =>      __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ),
+                'bulkActions' =>       __( 'Bulk Actions' ),
+                'deletePermanently' => __( 'Delete Permanently' ),
+                'apply'             => __( 'Apply' ),
+
 
                 // From URL
                 'insertFromUrlTitle' => __( 'Insert from URL' ),