diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 541f488..da1cd9c 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -944,14 +944,6 @@ 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,7 +989,7 @@ .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,12 +2445,18 @@ /* 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,7 +2483,7 @@ } .media-frame.mode-grid .attachments { - padding: 2px; + padding: 92px 2px 2px; } /** @@ -2493,6 +2491,7 @@ * * 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,16 +2500,39 @@ -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; diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js index bf864fe..68a9acd 100644 --- a/src/wp-includes/js/media-grid.js +++ b/src/wp-includes/js/media-grid.js @@ -62,7 +62,7 @@ multiple: 'add', state: 'library', uploader: true, - mode: [ 'grid' ] + mode: [ 'grid', 'edit' ] }); $(document).on( 'click', '.add-new-h2', _.bind( this.addNewClickHandler, this ) ); @@ -103,6 +103,9 @@ 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,6 +133,7 @@ multiple: options.multiple, title: options.title, content: 'browse', + toolbar: 'select', contentUserSetting: false, filterable: 'all' }) @@ -144,6 +148,7 @@ // 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,6 +208,25 @@ 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,6 +243,14 @@ pushState: true } ); } + }, + + toggleToolbar: function() { + if ( this.isModeActive( 'edit' ) ) { + this.$el.addClass( 'hide-toolbar' ); + } else { + this.$el.removeClass( 'hide-toolbar' ); + } } }); @@ -507,126 +539,37 @@ } }); - /** - * 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( $('').val( '' ).html( l10n.bulkActions ) ) - .append( $('').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(); + } } }); diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 4fa1303..d1dbfb1 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -1792,7 +1792,7 @@ 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,6 +3947,7 @@ 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,6 +3972,17 @@ 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,7 +4816,7 @@ } // 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,7 +5770,7 @@ // 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,7 +5781,8 @@ }).render() ); // BulkSelection is a
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() );