Media Grid: general JS cleanup.

Props ericlewis.
See #28965.


Built from https://develop.svn.wordpress.org/trunk@29266


git-svn-id: http://core.svn.wordpress.org/trunk@29049 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views-rtl.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-frame.mode-grid,
-.media-grid-view .media-frame-content,
+.media-frame.mode-grid .media-frame-content,
-.media-grid-view .attachments-browser .attachments,
+.media-frame.mode-grid .attachments-browser .attachments,
-.media-grid-view .uploader-inline-content {
+.media-frame.mode-grid .uploader-inline-content {
 	position: static;
 }
 
 /* Regions we don't use at all */
-.media-grid-view .media-frame-title,
+.media-frame.mode-grid .media-frame-title,
-.media-grid-view .media-frame-toolbar,
+.media-frame.mode-grid .media-frame-toolbar,
-.media-grid-view .media-frame-menu {
+.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;
 	left: 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 0 0 20px;
 }
 
-.media-grid-view select {
+.media-frame.mode-grid select {
 	margin: 0 0 0 10px;
 }
 
-.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-frame.mode-grid .attachments-browser .media-toolbar-primary,
-	.media-grid-view .attachments-browser .media-toolbar-secondary {
+	.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%;

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-frame.mode-grid,
-.media-grid-view .media-frame-content,
+.media-frame.mode-grid .media-frame-content,
-.media-grid-view .attachments-browser .attachments,
+.media-frame.mode-grid .attachments-browser .attachments,
-.media-grid-view .uploader-inline-content {
+.media-frame.mode-grid .uploader-inline-content {
 	position: static;
 }
 
 /* Regions we don't use at all */
-.media-grid-view .media-frame-title,
+.media-frame.mode-grid .media-frame-title,
-.media-grid-view .media-frame-toolbar,
+.media-frame.mode-grid .media-frame-toolbar,
-.media-grid-view .media-frame-menu {
+.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-frame.mode-grid .attachments-browser .media-toolbar-primary,
-	.media-grid-view .attachments-browser .media-toolbar-secondary {
+	.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%;

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',
-
+			menu:    false,
-			url:     ''
+			toolbar: false,
-		},
+			router:  false
-
-		_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 );
-			}
 		}
 	});
 
@@ -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
+			// Append the frame view directly the supplied container.
-			// a media frame, append our $element to 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;
+		 * Create the default states for the frame.
-
+		 */
-			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: []
-			};
-		},
-
 		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' ),
+		template: media.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 );
-		},
 
 		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:create:edit-metadata', this.editMetadataMode, this );
-			this.on( 'content:render:edit-image', this.editImageContentUgh, 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() {
+		editMetadataMode: function( contentRegion ) {
-			var view = new media.view.Attachment.Details.TwoColumn({
+			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
+		 * Render the EditImage view into the frame's content region.
-		 * patience to track this down right now.
+		 * 
+		 * @param {Object} contentRegion Basic object with a `view` property, which
+		 *                               should be set with the proper region view.
 		 */
-		editImageContentUgh: function() {
+		editImageMode: function( contentRegion ) {
-			_.defer( _.bind( this.editImageContent, this ) );
+			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( $('<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 ) );
+			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));

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,
+				uploader: true
-				mode:     [ 'select' ]
 			});
 
 			// 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);
+			if ( options.rerenderOnModelChange ) {
-			this.model.on( 'change', this.render, this );
+				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;

wp-includes/media-template.php

@@ -263,9 +263,6 @@ function wp_print_media_templates() {
 	</script>
 
 	<script type="text/html" id="tmpl-attachment-details-two-column">
-		<h3>
-			<?php _e('Attachment Details'); ?>
-		</h3>
 		<div class="attachment-media-view">
 			<div class="thumbnail thumbnail-{{ data.type }}">
 				<# if ( data.uploading ) { #>
@@ -294,7 +291,7 @@ function wp_print_media_templates() {
 
 				<div class="attachment-actions">
 					<# if ( 'image' === data.type && ! data.uploading ) { #>
-						<a class="button edit-image" href="#"><?php _e( 'Edit Image' ); ?></a>
+						<a class="button edit-attachment" href="#"><?php _e( 'Edit Image' ); ?></a>
 					<# } #>
 
 					<# if ( ! data.uploading && data.can.remove ) { #>