Make a new file: `media-grid.js`. This will be way more useful in later commits and help reduce churn and bloat in `media-views.js`.

See #24716.

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


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

wp-admin/upload.php

@@ -22,7 +22,9 @@ if ( isset( $_GET['mode'] ) && in_array( $_GET['mode'], $modes ) ) {
 
 if ( 'grid' === $mode ) {
 	wp_enqueue_media();
+	wp_enqueue_script( 'media-grid' );
 	wp_enqueue_script( 'media' );
+	
 	require_once( ABSPATH . 'wp-admin/admin-header.php' );
 	?><div class="view-switch media-grid-view-switch">
 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-list">

wp-includes/js/media-grid.js

@@ -0,0 +1,166 @@
+(function( $, _, Backbone, wp ) {
+	var media = wp.media, l10n;
+
+	// Link any localized strings.
+	if ( media.view.l10n ) {
+		l10n = media.view.l10n;
+	} else {
+		l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n;
+		delete l10n.settings;
+	}
+
+	/**
+	 * wp.media.view.MediaFrame.Manage
+	 *
+	 * A generic management frame workflow.
+	 *
+	 * Used in the media grid view.
+	 *
+	 * @constructor
+	 * @augments wp.media.view.MediaFrame
+	 * @augments wp.media.view.Frame
+	 * @augments wp.media.View
+	 * @augments wp.Backbone.View
+	 * @augments Backbone.View
+	 * @mixes wp.media.controller.StateMachine
+	 */
+	media.view.MediaFrame.Manage = media.view.MediaFrame.extend({
+		/**
+		 * @global wp.Uploader
+		 */
+		initialize: function() {
+			_.defaults( this.options, {
+				title:     l10n.mediaLibraryTitle,
+				modal:     false,
+				selection: [],
+				library:   {},
+				multiple:  false,
+				state:     'library',
+				uploader:  true
+			});
+
+			// Ensure core and media grid view UI is enabled.
+			this.$el.addClass('wp-core-ui media-grid-view');
+
+			// 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 ) {
+				this.options.uploader = false;
+			}
+
+			// Initialize a window-wide uploader.
+			if ( this.options.uploader ) {
+				this.uploader = new media.view.UploaderWindow({
+					controller: this,
+					uploader: {
+						dropzone:  $('body'),
+						container: $('body')
+					}
+				}).render();
+				this.uploader.ready();
+				$('body').append( this.uploader.el );
+
+				this.options.uploader = false;
+			}
+
+			/**
+			 * 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.
+			this.$el.appendTo( this.options.container );
+
+			this.createSelection();
+			this.createStates();
+			this.bindHandlers();
+			this.render();
+		},
+
+		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: []
+			};
+		},
+
+		createStates: function() {
+			var options = this.options;
+
+			if ( this.options.states ) {
+				return;
+			}
+
+			// Add the default states.
+			this.states.add([
+				new media.controller.Library({
+					library:    media.query( options.library ),
+					multiple:   options.multiple,
+					title:      options.title,
+					priority:   20,
+					toolbar:    false,
+					router:     false,
+					content:    'browse',
+					filterable: 'mime-types'
+				}),
+
+				new media.controller.EditImage( { model: options.editImage } )
+			]);
+		},
+
+		bindHandlers: function() {
+			this.on( 'content:create:browse', this.browseContent, this );
+			this.on( 'content:render:edit-image', this.editImageContent, this );
+		},
+
+		/**
+		 * Content
+		 *
+		 * @param {Object} content
+		 * @this wp.media.controller.Region
+		 */
+		browseContent: function( content ) {
+			var state = this.state();
+
+			// Browse our library of attachments.
+			content.view = new media.view.AttachmentsBrowser({
+				controller: this,
+				collection: state.get('library'),
+				selection:  state.get('selection'),
+				model:      state,
+				sortable:   state.get('sortable'),
+				search:     state.get('searchable'),
+				filters:    state.get('filterable'),
+				display:    state.get('displaySettings'),
+				dragInfo:   state.get('dragInfo'),
+				bulkEdit:   true,
+
+				suggestedWidth:  state.get('suggestedWidth'),
+				suggestedHeight: state.get('suggestedHeight'),
+
+				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();
+
+		}
+	});
+	
+}( jQuery, _, Backbone, wp ));

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

@@ -0,0 +1 @@
+!function(a,b,c,d){var e,f=d.media;f.view.l10n?e=f.view.l10n:(e=f.view.l10n="undefined"==typeof _wpMediaViewsL10n?{}:_wpMediaViewsL10n,delete e.settings),f.view.MediaFrame.Manage=f.view.MediaFrame.extend({initialize:function(){b.defaults(this.options,{title:e.mediaLibraryTitle,modal:!1,selection:[],library:{},multiple:!1,state:"library",uploader:!0}),this.$el.addClass("wp-core-ui media-grid-view"),(d.Uploader.limitExceeded||!d.Uploader.browser.supported)&&(this.options.uploader=!1),this.options.uploader&&(this.uploader=new f.view.UploaderWindow({controller:this,uploader:{dropzone:a("body"),container:a("body")}}).render(),this.uploader.ready(),a("body").append(this.uploader.el),this.options.uploader=!1),f.view.MediaFrame.prototype.initialize.apply(this,arguments),this.$el.appendTo(this.options.container),this.createSelection(),this.createStates(),this.bindHandlers(),this.render()},createSelection:function(){var a=this.options.selection;a instanceof f.model.Selection||(this.options.selection=new f.model.Selection(a,{multiple:this.options.multiple})),this._selection={attachments:new f.model.Attachments,difference:[]}},createStates:function(){var a=this.options;this.options.states||this.states.add([new f.controller.Library({library:f.query(a.library),multiple:a.multiple,title:a.title,priority:20,toolbar:!1,router:!1,content:"browse",filterable:"mime-types"}),new f.controller.EditImage({model:a.editImage})])},bindHandlers:function(){this.on("content:create:browse",this.browseContent,this),this.on("content:render:edit-image",this.editImageContent,this)},browseContent:function(a){var b=this.state();a.view=new f.view.AttachmentsBrowser({controller:this,collection:b.get("library"),selection:b.get("selection"),model:b,sortable:b.get("sortable"),search:b.get("searchable"),filters:b.get("filterable"),display:b.get("displaySettings"),dragInfo:b.get("dragInfo"),bulkEdit:!0,suggestedWidth:b.get("suggestedWidth"),suggestedHeight:b.get("suggestedHeight"),AttachmentView:b.get("AttachmentView")})},editImageContent:function(){var a=this.state().get("image"),b=new f.view.EditImage({model:a,controller:this}).render();this.content.set(b),b.loadEditor()}})}(jQuery,_,Backbone,wp);

wp-includes/js/media-views.js

@@ -1954,160 +1954,6 @@
 		};
 	});
 
-	/**
-	 * wp.media.view.MediaFrame.Manage
-	 *
-	 * A generic management frame workflow.
-	 *
-	 * Used in the media grid view.
-	 *
-	 * @constructor
-	 * @augments wp.media.view.MediaFrame
-	 * @augments wp.media.view.Frame
-	 * @augments wp.media.View
-	 * @augments wp.Backbone.View
-	 * @augments Backbone.View
-	 * @mixes wp.media.controller.StateMachine
-	 */
-	media.view.MediaFrame.Manage = media.view.MediaFrame.extend({
-		/**
-		 * @global wp.Uploader
-		 */
-		initialize: function() {
-			_.defaults( this.options, {
-				title:     l10n.mediaLibraryTitle,
-				modal:     false,
-				selection: [],
-				library:   {},
-				multiple:  false,
-				state:     'library',
-				uploader:  true
-			});
-
-			// Ensure core and media grid view UI is enabled.
-			this.$el.addClass('wp-core-ui media-grid-view');
-
-			// 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 ) {
-				this.options.uploader = false;
-			}
-
-			// Initialize a window-wide uploader.
-			if ( this.options.uploader ) {
-				this.uploader = new media.view.UploaderWindow({
-					controller: this,
-					uploader: {
-						dropzone:  $('body'),
-						container: $('body')
-					}
-				}).render();
-				this.uploader.ready();
-				$('body').append( this.uploader.el );
-
-				this.options.uploader = false;
-			}
-
-			/**
-			 * 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.
-			this.$el.appendTo( this.options.container );
-
-			this.createSelection();
-			this.createStates();
-			this.bindHandlers();
-			this.render();
-		},
-
-		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: []
-			};
-		},
-
-		createStates: function() {
-			var options = this.options;
-
-			if ( this.options.states ) {
-				return;
-			}
-
-			// Add the default states.
-			this.states.add([
-				new media.controller.Library({
-					library:    media.query( options.library ),
-					multiple:   options.multiple,
-					title:      options.title,
-					priority:   20,
-					toolbar:    false,
-					router:     false,
-					content:    'browse',
-					filterable: 'mime-types'
-				}),
-
-				new media.controller.EditImage( { model: options.editImage } )
-			]);
-		},
-
-		bindHandlers: function() {
-			this.on( 'content:create:browse', this.browseContent, this );
-			this.on( 'content:render:edit-image', this.editImageContent, this );
-		},
-
-		/**
-		 * Content
-		 *
-		 * @param {Object} content
-		 * @this wp.media.controller.Region
-		 */
-		browseContent: function( content ) {
-			var state = this.state();
-
-			// Browse our library of attachments.
-			content.view = new media.view.AttachmentsBrowser({
-				controller: this,
-				collection: state.get('library'),
-				selection:  state.get('selection'),
-				model:      state,
-				sortable:   state.get('sortable'),
-				search:     state.get('searchable'),
-				filters:    state.get('filterable'),
-				display:    state.get('displaySettings'),
-				dragInfo:   state.get('dragInfo'),
-				bulkEdit:   true,
-
-				suggestedWidth:  state.get('suggestedWidth'),
-				suggestedHeight: state.get('suggestedHeight'),
-
-				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();
-
-		}
-	});
-
 	/**
 	 * wp.media.view.MediaFrame.Select
 	 *

wp-includes/script-loader.php

@@ -507,6 +507,7 @@ function wp_default_scripts( &$scripts ) {
 
 		$scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" );
 		
+		$scripts->add( 'media-grid', "/wp-includes/js/media-grid$suffix.js", array( 'media-editor' ), false, 1 );
 		$scripts->add( 'media', "/wp-admin/js/media$suffix.js", array( 'jquery' ), false, 1 );
 		did_action( 'init' ) && $scripts->localize( 'media', 'attachMediaBoxL10n', array(
 			'error' => __( 'An error has occurred. Please reload the page and try again.' ),