diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index e27b665cfb..f17f3d1a33 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -585,7 +585,7 @@ border color while dragging a file over the uploader drop area */ margin-top: 15px; } -.attachments-browser .media-toolbar-secondary > .select-mode-toggle-button { +.attachments-browser .media-toolbar-secondary > .media-button { margin-right: 10px; } diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js index 0e38eb3f6c..f6e81a8504 100644 --- a/src/wp-includes/js/media-grid.js +++ b/src/wp-includes/js/media-grid.js @@ -630,22 +630,32 @@ children = toolbar.$( '.media-toolbar-secondary > *, .media-toolbar-primary > *'); + // TODO: the Frame should be doing all of this. if ( this.controller.isModeActive( 'select' ) ) { this.model.set( 'text', l10n.cancelSelection ); - children.not( '.delete-selected-button' ).hide(); - toolbar.$( '.select-mode-toggle-button' ).show(); + children.not( '.media-button' ).hide(); + this.$el.show(); toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' ); } else { this.model.set( 'text', l10n.bulkSelect ); - this.controller.content.get().$el.removeClass('fixed'); - toolbar.$el.css('width', ''); + this.controller.content.get().$el.removeClass( 'fixed' ); + toolbar.$el.css( 'width', '' ); toolbar.$( '.delete-selected-button' ).addClass( 'hidden' ); - children.not( '.spinner, .delete-selected-button' ).show(); + children.not( '.spinner, .media-button' ).show(); this.controller.state().get( 'selection' ).reset(); } } }); + /** + * A button that handles bulk Delete/Trash logic + * + * @constructor + * @augments wp.media.view.Button + * @augments wp.media.View + * @augments wp.Backbone.View + * @augments Backbone.View + */ media.view.DeleteSelectedButton = media.view.Button.extend({ initialize: function() { media.view.Button.prototype.initialize.apply( this, arguments ); @@ -676,6 +686,45 @@ } else { this.$el.addClass( 'delete-selected-button hidden' ); } + this.toggleDisabled(); + return this; + } + }); + + /** + * When MEDIA_TRASH is true, a button that handles bulk Delete Permanently logic + * + * @constructor + * @augments wp.media.view.DeleteSelectedButton + * @augments wp.media.view.Button + * @augments wp.media.View + * @augments wp.Backbone.View + * @augments Backbone.View + */ + media.view.DeleteSelectedPermanentlyButton = media.view.DeleteSelectedButton.extend({ + initialize: function() { + media.view.DeleteSelectedButton.prototype.initialize.apply( this, arguments ); + this.listenTo( this.controller, 'select:activate', this.selectActivate ); + this.listenTo( this.controller, 'select:deactivate', this.selectDeactivate ); + }, + + filterChange: function( model ) { + this.canShow = ( 'trash' === model.get( 'status' ) ); + }, + + selectActivate: function() { + this.toggleDisabled(); + this.$el.toggleClass( 'hidden', ! this.canShow ); + }, + + selectDeactivate: function() { + this.toggleDisabled(); + this.$el.addClass( 'hidden' ); + }, + + render: function() { + media.view.Button.prototype.render.apply( this, arguments ); + this.selectActivate(); return this; } }); diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 3655c0337d..cea65b4e3a 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -6079,6 +6079,41 @@ } } }).render() ); + + if ( media.view.settings.mediaTrash ) { + this.toolbar.set( 'deleteSelectedPermanentlyButton', new media.view.DeleteSelectedPermanentlyButton({ + filters: Filters, + style: 'primary', + disabled: true, + text: l10n.deleteSelected, + controller: this.controller, + priority: -55, + click: function() { + var removed = [], selection = this.controller.state().get( 'selection' ); + + if ( ! selection.length ) { + return; + } + + if ( ! confirm( l10n.warnBulkDelete ) ) { + return; + } + + selection.each( function( model ) { + if ( ! model.get( 'nonces' )['delete'] ) { + removed.push( model ); + return; + } + + model.destroy(); + } ); + + selection.remove( removed ); + this.controller.trigger( 'selection:action:done' ); + } + }).render() ); + } + } if ( this.options.search ) {