From 80c4d6a96c466d42c0d1513e49170b3ce3ce3e27 Mon Sep 17 00:00:00 2001 From: Scott Taylor Date: Tue, 22 Jul 2014 16:20:59 +0000 Subject: [PATCH] Media Grid: general JS cleanup. Props ericlewis. See #28965. git-svn-id: https://develop.svn.wordpress.org/trunk@29266 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/css/media-views.css | 63 +++---- src/wp-includes/js/media-grid.js | 282 ++++++++++++---------------- src/wp-includes/js/media-views.js | 219 ++++++++++----------- src/wp-includes/media-template.php | 5 +- 4 files changed, 266 insertions(+), 303 deletions(-) diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 37cd50209d..d91e6e1e15 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -912,7 +912,7 @@ } .attachment.details, -.media-grid-view .selected.attachment { +.media-frame.mode-grid .selected.attachment { -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 5px #1e8cbe; box-shadow: 0 0 0 1px #fff, @@ -921,7 +921,7 @@ .attachment.details .check, .attachment.selected .check:focus, -.media-grid-view .attachment.selected .check { +.media-frame.mode-grid .attachment.selected .check { background-color: #1e8cbe; -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px #1e8cbe; @@ -929,22 +929,22 @@ 0 0 0 2px #1e8cbe; } -.media-grid-view .attachment .check { +.media-frame.mode-grid .attachment .check { display: block; } -.media-grid-view .attachment .check div { +.media-frame.mode-grid .attachment .check div { background-position: 21px 0; } .attachment.details .check div, -.media-grid-view .attachment.selected .check div { +.media-frame.mode-grid .attachment.selected .check div { background-position: -21px 0; } .attachment.details .check:hover div, .attachment.selected .check:focus div, -.media-grid-view .attachment.selected .check:hover div { +.media-frame.mode-grid .attachment.selected .check:hover div { background-position: -60px 0; } @@ -1068,7 +1068,8 @@ display: inline-block; } -.attachment-preview:hover ~ .inline-toolbar { +.attachment-preview:hover + .inline-toolbar, +.inline-toolbar:hover { display: block; } @@ -2596,26 +2597,27 @@ video#inline-media-node { /** * Media Grid */ -.media-grid-view, -.media-grid-view .media-frame-content, -.media-grid-view .attachments-browser .attachments, -.media-grid-view .uploader-inline-content { +.media-frame.mode-grid, +.media-frame.mode-grid .media-frame-content, +.media-frame.mode-grid .attachments-browser .attachments, +.media-frame.mode-grid .uploader-inline-content { position: static; } /* Regions we don't use at all */ -.media-grid-view .media-frame-title, -.media-grid-view .media-frame-toolbar, -.media-grid-view .media-frame-menu { +.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-grid-view .media-frame-content { +.media-frame.mode-grid .media-frame-content { background-color: transparent; border: none; } -.media-grid-view .uploader-inline { +.media-frame.mode-grid .uploader-inline { position: relative; top: auto; right: auto; @@ -2625,12 +2627,12 @@ video#inline-media-node { margin-top: 0; } -.media-grid-view .media-toolbar select { +.media-frame.mode-grid .media-toolbar select { margin-top: 1px; font-size: inherit; } -.media-grid-view .attachments-browser .bulk-select { +.media-frame.mode-grid .attachments-browser .bulk-select { display: inline-block; } @@ -2639,7 +2641,7 @@ video#inline-media-node { * * This should be OOCSS'd so both use a shared selector. */ -.media-grid-view .attachments-browser .media-toolbar { +.media-frame.mode-grid .attachments-browser .media-toolbar { background: #fff; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); @@ -2657,7 +2659,7 @@ video#inline-media-node { border: none; } -.media-grid-view input[type="search"] { +.media-frame.mode-grid input[type="search"] { margin: 1px; padding: 3px 5px; position: absolute; @@ -2669,7 +2671,7 @@ video#inline-media-node { width: 280px; } -.media-grid-view .view-switch { +.media-frame.mode-grid .view-switch { display: inline-block; float: none; vertical-align: middle; @@ -2677,19 +2679,19 @@ video#inline-media-node { margin: 0 20px 0 0; } -.media-grid-view select { +.media-frame.mode-grid select { margin: 0 10px 0 0; } -.media-grid-view .spinner { +.media-frame.mode-grid .spinner { margin-top: 15px; } -.media-grid-view .attachments-browser { +.media-frame.mode-grid .attachments-browser { padding: 0; } -.media-grid-view .attachments-browser .no-media { +.media-frame.mode-grid .attachments-browser .no-media { color: #999; font-size: 18px; font-style: normal; @@ -2807,11 +2809,6 @@ video#inline-media-node { top: 56px; } -/* Hiding this for the moment instead of removing it from the template. */ -.edit-attachment-frame h3 { - display: none; -} - .edit-attachment-frame .attachment-details { position: absolute; overflow: auto; @@ -2953,12 +2950,12 @@ video#inline-media-node { */ @media only screen and (max-width: 1120px) { - .media-grid-view .attachments-browser .media-toolbar-primary, - .media-grid-view .attachments-browser .media-toolbar-secondary { + .media-frame.mode-grid .attachments-browser .media-toolbar-primary, + .media-frame.mode-grid .attachments-browser .media-toolbar-secondary { float: none; } - .media-grid-view input[type="search"] { + .media-frame.mode-grid input[type="search"] { margin: 20px 0; position: static; width: 100%; diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js index 67f4dc53b0..a1f2e30ef1 100644 --- a/src/wp-includes/js/media-grid.js +++ b/src/wp-includes/js/media-grid.js @@ -1,8 +1,9 @@ /* global _wpMediaViewsL10n, MediaElementPlayer, _wpMediaGridSettings, confirm */ (function($, _, Backbone, wp) { + // Local reference to the WordPress media namespace. var media = wp.media, l10n; - // Link any localized strings. + // Link localized strings and settings. if ( media.view.l10n ) { l10n = media.view.l10n; } else { @@ -11,6 +12,8 @@ } /** + * wp.media.controller.EditAttachmentMetadata + * * A state for editing an attachment's metadata. * * @constructor @@ -20,45 +23,13 @@ media.controller.EditAttachmentMetadata = media.controller.State.extend({ defaults: { id: 'edit-attachment', + // Title string passed to the frame's title region view. title: l10n.attachmentDetails, // Region mode defaults. - menu: false, content: 'edit-metadata', - - url: '' - }, - - _ready: function() {}, - - /** - * Override media.controller.State._postActivate, since this state doesn't - * include the regions expected there. - */ - _postActivate: function() { - this.frame.on( 'title:render:default', this._renderTitle, this ); - - this._title(); - this._content(); - }, - - /** - * @access private - */ - _title: function() { - this.frame.title.render( this.get('titleMode') || 'default' ); - }, - /** - * @access private - */ - _renderTitle: function( view ) { - view.$el.text( this.get('title') || '' ); - }, - - _content: function() { - var mode = this.get( 'content' ); - if ( mode ) { - this.frame.content.render( mode ); - } + menu: false, + toolbar: false, + router: false } }); @@ -87,19 +58,17 @@ title: '', modal: false, selection: [], - library: {}, + library: {}, // Options hash for the query to the media library. multiple: 'add', state: 'library', uploader: true, - mode: [ 'grid', 'edit' ] + mode: [ 'grid' ] }); $(document).on( 'click', '.add-new-h2', _.bind( this.addNewClickHandler, this ) ); - $(document).on( 'screen:options:open', _.bind( this.screenOptionsOpen, this ) ); - $(document).on( 'screen:options:close', _.bind( this.screenOptionsClose, this ) ); // Ensure core and media grid view UI is enabled. - this.$el.addClass('wp-core-ui media-grid-view'); + this.$el.addClass('wp-core-ui'); // Force the uploader off if the upload limit has been exceeded or // if the browser isn't supported. @@ -122,18 +91,14 @@ this.options.uploader = false; } - /** - * call 'initialize' directly on the parent class - */ + // Call 'initialize' directly on the parent class. media.view.MediaFrame.prototype.initialize.apply( this, arguments ); - // Since we're not using the default modal built into - // a media frame, append our $element to the supplied container. + // Append the frame view directly the supplied container. this.$el.appendTo( this.options.container ); - this.createSelection(); this.createStates(); - this.bindHandlers(); + this.bindRegionModeHandlers(); this.render(); // Update the URL when entering search string (at most once per second) @@ -145,17 +110,10 @@ self.gridRouter.navigate( self.gridRouter.baseUrl( url ) ); }, 1000 ) ); + // This is problematic. _.delay( _.bind( this.createRouter, this ), 1000 ); }, - screenOptionsOpen: function() { - this.$el.addClass( 'media-grid-view-options' ); - }, - - screenOptionsClose: function() { - this.$el.removeClass( 'media-grid-view-options' ); - }, - createRouter: function() { this.gridRouter = new media.view.MediaFrame.Manage.Router(); @@ -168,21 +126,9 @@ } }, - createSelection: function() { - var selection = this.options.selection; - - if ( ! (selection instanceof media.model.Selection) ) { - this.options.selection = new media.model.Selection( selection, { - multiple: this.options.multiple - }); - } - - this._selection = { - attachments: new media.model.Attachments(), - difference: [] - }; - }, - + /** + * Create the default states for the frame. + */ createStates: function() { var options = this.options; @@ -196,9 +142,6 @@ library: media.query( options.library ), multiple: options.multiple, title: options.title, - priority: 20, - - router: false, content: 'browse', filterable: 'mime-types' @@ -206,14 +149,19 @@ ]); }, - bindHandlers: function() { + /** + * Bind region mode activation events to proper handlers. + */ + bindRegionModeHandlers: function() { this.on( 'content:create:browse', this.browseContent, this ); - this.on( 'content:render:edit-image', this.editImageContent, this ); // Handle a frame-level event for editing an attachment. - this.on( 'edit:attachment', this.editAttachment, this ); + this.on( 'edit:attachment', this.openEditAttachmentModal, this ); }, + /** + * Click handler for the `Add New` button. + */ addNewClickHandler: function( event ) { event.preventDefault(); this.trigger( 'toggle:upload:attachment' ); @@ -222,7 +170,7 @@ /** * Open the Edit Attachment modal. */ - editAttachment: function( model ) { + openEditAttachmentModal: function( model ) { // Create a new EditAttachment frame, passing along the library and the attachment model. wp.media( { frame: 'edit-attachments', @@ -233,16 +181,17 @@ }, /** - * Content + * Create an attachments browser view within the content region. * - * @param {Object} content + * @param {Object} contentRegion Basic object with a `view` property, which + * should be set with the proper region view. * @this wp.media.controller.Region */ - browseContent: function( content ) { + browseContent: function( contentRegion ) { var state = this.state(); // Browse our library of attachments. - content.view = new media.view.AttachmentsBrowser({ + contentRegion.view = new media.view.AttachmentsBrowser({ controller: this, collection: state.get('library'), selection: state.get('selection'), @@ -259,53 +208,22 @@ AttachmentView: state.get('AttachmentView') }); - }, - - editImageContent: function() { - var image = this.state().get('image'), - view = new media.view.EditImage( { model: image, controller: this } ).render(); - - this.content.set( view ); - - // after creating the wrapper view, load the actual editor via an ajax call - view.loadEditor(); - } }); + /** + * A similar view to media.view.Attachment.Details + * for use in the Edit Attachment modal. + * + * @constructor + * @augments wp.media.view.Attachment.Details + * @augments wp.media.view.Attachment + * @augments wp.media.View + * @augments wp.Backbone.View + * @augments Backbone.View + */ media.view.Attachment.Details.TwoColumn = media.view.Attachment.Details.extend({ - template: wp.template( 'attachment-details-two-column' ), - - events: { - 'change [data-setting]': 'updateSetting', - 'change [data-setting] input': 'updateSetting', - 'change [data-setting] select': 'updateSetting', - 'change [data-setting] textarea': 'updateSetting', - 'click .delete-attachment': 'deleteAttachment', - 'click .trash-attachment': 'trashAttachment', - 'click .edit-attachment': 'editAttachment', - 'click .refresh-attachment': 'refreshAttachment', - 'click .edit-image': 'handleEditImageClick' - }, - - initialize: function() { - if ( ! this.model ) { - return; - } - - this.$el.attr('aria-label', this.model.get( 'title' ) ).attr( 'aria-checked', false ); - - this.model.on( 'change:title', this._syncTitle, this ); - this.model.on( 'change:caption', this._syncCaption, this ); - this.model.on( 'change:percent', this.progress, this ); - this.model.on( 'change:album', this._syncAlbum, this ); - this.model.on( 'change:artist', this._syncArtist, this ); - - // Update the selection. - this.model.on( 'add', this.select, this ); - this.model.on( 'remove', this.deselect, this ); - this.model.on( 'sync', this.afterDelete, this ); - }, + template: media.template( 'attachment-details-two-column' ), preDestroy: function( event ) { event.preventDefault(); @@ -324,10 +242,16 @@ media.view.Attachment.Details.prototype.deleteAttachment.apply( this, arguments ); }, - handleEditImageClick: function() { + editAttachment: function( event ) { + event.preventDefault(); this.controller.setState( 'edit-image' ); }, + /** + * Noop this from parent class, doesn't apply here. + */ + toggleSelectionHandler: function() {}, + afterDelete: function( model ) { if ( ! model.destroyed ) { return; @@ -351,7 +275,7 @@ media.view.Attachment.Details.prototype.render.apply( this, arguments ); media.mixin.removeAllPlayers(); - $( 'audio, video', this.$el ).each( function (i, elem) { + this.$( 'audio, video' ).each( function (i, elem) { var el = media.view.MediaDetails.prepareSrc( elem ); new MediaElementPlayer( el, media.mixin.mejsSettings ); } ); @@ -359,11 +283,14 @@ }); /** - * A router for handling the browser history and application state + * A router for handling the browser history and application state. + * + * @constructor + * @augments Backbone.Router */ media.view.MediaFrame.Manage.Router = Backbone.Router.extend({ routes: { - 'upload.php?item=:slug': 'showitem', + 'upload.php?item=:slug': 'showItem', 'upload.php?search=:query': 'search', ':default': 'defaultRoute' }, @@ -381,7 +308,7 @@ }, // Show the modal with a specific item - showitem: function( query ) { + showItem: function( query ) { var library = media.frame.state().get('library'); // Remove existing modal if present @@ -410,6 +337,13 @@ * Opens in a modal by default. * * Requires an attachment model to be passed in the options hash under `model`. + * + * @constructor + * @augments wp.media.view.Frame + * @augments wp.media.View + * @augments wp.Backbone.View + * @augments Backbone.View + * @mixes wp.media.controller.StateMachine */ media.view.MediaFrame.EditAttachments = media.view.MediaFrame.extend({ @@ -443,8 +377,8 @@ this.createStates(); - this.on( 'content:render:edit-metadata', this.editMetadataContent, this ); - this.on( 'content:render:edit-image', this.editImageContentUgh, this ); + this.on( 'content:create:edit-metadata', this.editMetadataMode, this ); + this.on( 'content:create:edit-image', this.editImageMode, this ); this.on( 'close', this.detach ); // Bind default title creation. @@ -473,6 +407,7 @@ self.resetRoute(); } ); + // Set this frame as the modal's content. this.modal.content( this ); this.modal.open(); } @@ -496,41 +431,39 @@ /** * Content region rendering callback for the `edit-metadata` mode. + * + * @param {Object} contentRegion Basic object with a `view` property, which + * should be set with the proper region view. */ - editMetadataContent: function() { - var view = new media.view.Attachment.Details.TwoColumn({ + editMetadataMode: function( contentRegion ) { + contentRegion.view = new media.view.Attachment.Details.TwoColumn({ controller: this, model: this.model }); - this.content.set( view ); // Update browser url when navigating media details if ( this.model ) { this.gridRouter.navigate( this.gridRouter.baseUrl( '?item=' + this.model.id ) ); - } else { - this.resetRoute(); } }, /** - * For some reason the view doesn't exist in the DOM yet, don't have the - * patience to track this down right now. + * Render the EditImage view into the frame's content region. + * + * @param {Object} contentRegion Basic object with a `view` property, which + * should be set with the proper region view. */ - editImageContentUgh: function() { - _.defer( _.bind( this.editImageContent, this ) ); + editImageMode: function( contentRegion ) { + contentRegion.view = new media.view.EditImage( { model: this.model, controller: this } ); + // Defer a call to load the editor, which + // requires DOM elements to exist. + _.defer( _.bind( contentRegion.view.loadEditor, contentRegion.view ) ); }, /** - * Render the EditImage view into the frame's content region. + * Close this modal and immediately open another one. + * + * Allows for quickly swapping out the attachment being edited. */ - editImageContent: function() { - var view = new media.view.EditImage( { model: this.model, controller: this } ).render(); - - this.content.set( view ); - - // after creating the wrapper view, load the actual editor via an ajax call - view.loadEditor(); - }, - resetContent: function() { this.modal.close(); wp.media( { @@ -603,6 +536,9 @@ } }); + /** + * Controller for bulk selection. + */ media.view.BulkSelection = media.View.extend({ className: 'bulk-select', @@ -628,6 +564,14 @@ } }); + /** + * Bulk Selection dropdown view. + * + * @constructor + * @augments wp.media.View + * @augments wp.Backbone.View + * @augments Backbone.View + */ media.view.BulkSelectionActionDropdown = media.View.extend({ tagName: 'select', @@ -637,18 +581,37 @@ this.$el.append( $('').val( '' ).html( l10n.bulkActions ) ) .append( $('').val( 'delete' ).html( l10n.deletePermanently ) ); this.$el.prop( 'disabled', true ); - this.$el.on( 'change', _.bind( this.toggleChange, this ) ); + this.$el.on( 'change', _.bind( this.changeHandler, this ) ); }, - toggleChange: function() { + /** + * 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', @@ -658,7 +621,9 @@ 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 ); @@ -672,7 +637,10 @@ this.enabled(); }, - + /** + * 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'), @@ -681,4 +649,4 @@ } }); -}(jQuery, _, Backbone, wp)); +}(jQuery, _, Backbone, wp)); \ No newline at end of file diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index c57df05f25..ce8eadfdb6 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -1685,8 +1685,12 @@ */ media.view.Frame = media.View.extend({ initialize: function() { + _.defaults( this.options, { + mode: [ 'select' ] + }); this._createRegions(); this._createStates(); + this._createModes(); }, _createRegions: function() { @@ -1721,12 +1725,99 @@ this.states.add( this.options.states ); } }, + _createModes: function() { + // Store active "modes" that the frame is in. Unrelated to region modes. + this.activeModes = new Backbone.Collection(); + this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) ); + + _.each( this.options.mode, function( mode ) { + this.activateMode( mode ); + }, this ); + }, /** * @returns {wp.media.view.Frame} Returns itself to allow chaining */ reset: function() { this.states.invoke( 'trigger', 'reset' ); return this; + }, + /** + * Map activeMode collection events to the frame. + */ + triggerModeEvents: function( model, collection, options ) { + var collectionEvent, + modeEventMap = { + add: 'activate', + remove: 'deactivate' + }, + eventToTrigger; + // Probably a better way to do this. + _.each( options, function( value, key ) { + if ( value ) { + collectionEvent = key; + } + } ); + + if ( ! _.has( modeEventMap, collectionEvent ) ) { + return; + } + + eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent]; + this.trigger( eventToTrigger ); + }, + /** + * Activate a mode on the frame. + * + * @param string mode Mode ID. + * @returns {this} Returns itself to allow chaining. + */ + activateMode: function( mode ) { + // Bail if the mode is already active. + if ( this.isModeActive( mode ) ) { + return; + } + this.activeModes.add( [ { id: mode } ] ); + // Add a CSS class to the frame so elements can be styled for the mode. + this.$el.addClass( 'mode-' + mode ); + /** + * Frame mode activation event. + * + * @event this#{mode}:activate + */ + this.trigger( mode + ':activate' ); + + return this; + }, + /** + * Deactivate a mode on the frame. + * + * @param string mode Mode ID. + * @returns {this} Returns itself to allow chaining. + */ + deactivateMode: function( mode ) { + // Bail if the mode isn't active. + if ( ! this.isModeActive( mode ) ) { + return; + } + this.activeModes.remove( this.activeModes.where( { id: mode } ) ); + this.$el.removeClass( 'mode-' + mode ); + /** + * Frame mode deactivation event. + * + * @event this#{mode}:deactivate + */ + this.trigger( mode + ':deactivate' ); + + return this; + }, + /** + * Check if a mode is enabled on the frame. + * + * @param string mode Mode ID. + * @return bool + */ + isModeActive: function( mode ) { + return Boolean( this.activeModes.where( { id: mode } ).length ); } }); @@ -1759,8 +1850,7 @@ _.defaults( this.options, { title: '', modal: true, - uploader: true, - mode: [ 'select' ] + uploader: true }); // Ensure core UI is enabled. @@ -1776,14 +1866,6 @@ this.modal.content( this ); } - // Store active "modes" that the frame is in. Unrelated to region modes. - this.activeModes = new Backbone.Collection(); - this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) ); - - _.each( this.options.mode, function( mode ) { - this.activateMode( mode ); - }, this ); - // Force the uploader off if the upload limit has been exceeded or // if the browser isn't supported. if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported ) { @@ -1948,85 +2030,6 @@ window.tb_remove = this._tb_remove; delete this._tb_remove; - }, - - /** - * Map activeMode collection events to the frame. - */ - triggerModeEvents: function( model, collection, options ) { - var collectionEvent, - modeEventMap = { - add: 'activate', - remove: 'deactivate' - }, - eventToTrigger; - // Probably a better way to do this. - _.each( options, function( value, key ) { - if ( value ) { - collectionEvent = key; - } - } ); - - if ( ! _.has( modeEventMap, collectionEvent ) ) - return; - - eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent]; - this.trigger( eventToTrigger ); - }, - /** - * Activate a mode on the frame. - * - * @param string mode Mode ID. - * @returns {this} Returns itself to allow chaining. - */ - activateMode: function( mode ) { - // Bail if the mode is already active. - if ( this.isModeActive( mode ) ) { - return; - } - this.activeModes.add( [ { id: mode } ] ); - // Add a css class to the frame for anything that needs to be styled - // for the mode. - this.$el.addClass( 'mode-' + mode ); - /** - * Frame mode activation event. - * - * @event this#{mode}:activate - */ - this.trigger( mode + ':activate' ); - - return this; - }, - /** - * Deactivate a mode on the frame. - * - * @param string mode Mode ID. - * @returns {this} Returns itself to allow chaining. - */ - deactivateMode: function( mode ) { - // Bail if the mode isn't active. - if ( ! this.isModeActive( mode ) ) { - return; - } - this.activeModes.remove( this.activeModes.where( { id: mode } ) ); - this.$el.removeClass( 'mode-' + mode ); - /** - * Frame mode deactivation event. - * - * @event this#{mode}:deactivate - */ - this.trigger( mode + ':deactivate' ); - - return this; - }, - /** - * Check if a mode is enabled on the frame. - * - * @param string mode Mode ID. - * @return bool - */ - isModeActive: function( mode ) { - return Boolean( this.activeModes.where( { id: mode } ).length ); } }); @@ -4631,10 +4634,15 @@ buttons: {}, initialize: function() { - var selection = this.options.selection; + var selection = this.options.selection, + options = _.defaults( this.options, { + rerenderOnModelChange: true + } ); + this.$el.attr( 'aria-label', this.model.get( 'title' ) ).attr( 'aria-checked', false ); - this.$el.attr('aria-label', this.model.attributes.title).attr('aria-checked', false); - this.model.on( 'change', this.render, this ); + if ( options.rerenderOnModelChange ) { + this.model.on( 'change', this.render, this ); + } this.model.on( 'change:title', this._syncTitle, this ); this.model.on( 'change:caption', this._syncCaption, this ); this.model.on( 'change:artist', this._syncArtist, this ); @@ -4646,11 +4654,10 @@ this.model.on( 'remove', this.deselect, this ); if ( selection ) { selection.on( 'reset', this.updateSelect, this ); + // Update the model's details view. + this.model.on( 'selection:single selection:unsingle', this.details, this ); + this.details( this.model, this.controller.state().get('selection') ); } - - // Update the model's details view. - this.model.on( 'selection:single selection:unsingle', this.details, this ); - this.details( this.model, this.controller.state().get('selection') ); }, /** * @returns {wp.media.view.Attachment} Returns itself to allow chaining @@ -4752,7 +4759,7 @@ } // In the grid view, bubble up an edit:attachment event to the controller. - if ( this.controller.activeModes.where( { id: 'edit' } ).length ) { + if ( this.controller.isModeActive( 'grid' ) ) { this.controller.trigger( 'edit:attachment', this.model ); return; } @@ -6318,21 +6325,14 @@ }, initialize: function() { + this.options = _.defaults( this.options, { + rerenderOnModelChange: false + }); /** * call 'initialize' directly on the parent class */ media.view.Attachment.prototype.initialize.apply( this, arguments ); }, - /** - * @returns {wp.media.view..Attachment.Details} Returns itself to allow chaining - */ - render: function() { - /** - * call 'render' directly on the parent class - */ - media.view.Attachment.prototype.render.apply( this, arguments ); - return this; - }, /** * @param {Object} event */ @@ -6379,11 +6379,12 @@ this.model.fetch(); }, /** + * When reverse tabbing(shift+tab) out of the right details panel, deliver + * the focus to the item in the list that was being edited. + * * @param {Object} event */ toggleSelectionHandler: function( event ) { - // Reverse tabbing out of the right details panel - // should take me back to the item in the list that was being edited. if ( 'keydown' === event.type && 9 === event.keyCode && event.shiftKey && event.target === $( ':tabbable', this.$el ).filter( ':first' )[0] ) { $('.attachments-browser .details').focus(); return false; diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php index 8695d3813f..b130c4c16b 100644 --- a/src/wp-includes/media-template.php +++ b/src/wp-includes/media-template.php @@ -263,9 +263,6 @@ function wp_print_media_templates() {