The first inklings of a gallery management screen.

* Adds `view.Workspace.Library` and `view.Workspace.Gallery` as extensions of `view.Workspace` to implement the individual screens
* Shifts the toolbar logic that was library-specific from the generic `Workspace` view to `Workspace.Library`.
* Adds a toolbar to the `Gallery` view.
* 'Create a gallery' and 'Return to media library' buttons toggle between the two views.
* 'Insert gallery into post' closes the modal, but does not actually perform its namesake action.
* Note that elements can still be deselected in the gallery view. This will be fixed in a future commit.

Improvements to avoid over-eager event unbinding:
* `Modal` views now properly detach their contents before replacing them with a new element.
* Likewise, `Workspace` views detach their main content blocks when re-rendering the view.

To test the gallery workflow (which is incomplete), run the following in your browser's console:

	`wp.media({ multiple: true });`

see #21809, #21390.


git-svn-id: https://develop.svn.wordpress.org/trunk@21906 602fd350-edb4-49c9-b593-d223f7449a82

wp-includes/css/media-views.css

@@ -178,8 +178,7 @@
 	margin-top: 0;
 }
 
-.media-workspace .media-toolbar .add-to-gallery,
+.media-workspace .media-toolbar .add-to-gallery {
-.media-workspace .media-toolbar .create-new-gallery {
 	display: none;
 }
 

wp-includes/js/media-views.js

@@ -31,7 +31,8 @@
 			this.modal = new media.view.Modal({ controller: this });
 
 			// Add default views.
-			this.add( 'library', media.view.Workspace );
+			this.add( 'library', media.view.Workspace.Library, { collection: media.query() } );
+			this.add( 'gallery', media.view.Workspace.Gallery, { collection: this.selection } );
 		},
 
 
@@ -212,6 +213,11 @@
 		},
 
 		content: function( $content ) {
+			// Detach any existing content to prevent events from being lost.
+			if ( this.options.$content )
+				this.options.$content.detach();
+
+			// Set and render the content.
 			this.options.$content = ( $content instanceof Backbone.View ) ? $content.$el : $content;
 			return this.render();
 		},
@@ -293,18 +299,20 @@
 
 		initialize: function() {
 			_.defaults( this.options, {
-				style:   'secondary',
 				text:    '',
 				classes: []
 			});
 		},
 
 		render: function() {
-			var classes = [ this.className ];
+			var classes = [ 'button', this.className ];
 
 			if ( this.options.style )
 				classes.push( 'button-' + this.options.style );
 
+			if ( this.options.size )
+				classes.push( 'button-' + this.options.size );
+
 			classes = classes.concat( this.options.classes );
 			this.el.className = classes.join(' ');
 			this.$el.text( this.options.text );
@@ -341,14 +349,10 @@
 
 			this.$content = $('<div class="existing-attachments" />');
 
-			// If this supports multiple attachments, initialize the sample toolbar view.
-			if ( this.controller.get('multiple') )
-				this.initToolbarView();
-
 			this.attachmentsView = new media.view.Attachments({
 				controller: this.controller,
 				directions: 'Select stuff.',
-				collection: media.query()
+				collection: this.collection
 			});
 
 			this.$content.append( this.attachmentsView.$el );
@@ -358,6 +362,8 @@
 		},
 
 		render: function() {
+			this.$content.detach();
+
 			this.attachmentsView.render();
 			this.renderUploadProgress();
 			this.$el.html( this.template( this.options ) ).append( this.$content );
@@ -393,6 +399,19 @@
 				else
 					return memo + 100;
 			}, 0 ) / queue.length ) + '%' );
+		}
+	});
+
+	/**
+	 * wp.media.view.Workspace.Library
+	 */
+	media.view.Workspace.Library = media.view.Workspace.extend({
+		initialize: function() {
+			media.view.Workspace.prototype.initialize.apply( this, arguments );
+
+			// If this supports multiple attachments, initialize the sample toolbar view.
+			if ( this.controller.get('multiple') )
+				this.initToolbarView();
 		},
 
 		// Initializes the toolbar view. Currently uses defaults set for
@@ -400,6 +419,8 @@
 		// appropriate workflow when the time comes, but is currently here
 		// to test multiple selections.
 		initToolbarView: function() {
+			var controller = this.controller;
+
 			this.toolbarView = new media.view.Toolbar({
 				items: {
 					'selection-preview': new media.view.SelectionPreview({
@@ -415,7 +436,10 @@
 					'create-new-gallery': {
 						style: 'primary',
 						text:  'Create a new gallery',
-						priority: 30
+						priority: 30,
+						click:  function() {
+							controller.render('gallery');
+						}
 					},
 					'add-to-gallery': {
 						text:  'Add to gallery',
@@ -432,6 +456,53 @@
 		}
 	});
 
+	/**
+	 * wp.media.view.Workspace.Gallery
+	 */
+	media.view.Workspace.Gallery = media.view.Workspace.extend({
+		initialize: function() {
+			media.view.Workspace.prototype.initialize.apply( this, arguments );
+			this.initToolbarView();
+		},
+
+		// Initializes the toolbar view. Currently uses defaults set for
+		// inserting media into a post. This should be pulled out into the
+		// appropriate workflow when the time comes, but is currently here
+		// to test multiple selections.
+		initToolbarView: function() {
+			var controller = this.controller;
+
+			this.toolbarView = new media.view.Toolbar({
+				items: {
+					'return-to-library': {
+						text:  'Return to media library',
+						priority: -40,
+						click:  function() {
+							controller.render('library');
+						}
+					},
+
+					'insert-gallery-into-post': {
+						style: 'primary',
+						text:  'Insert gallery into post',
+						priority: 40,
+						click:  function() {
+							controller.close();
+						}
+					},
+
+					'add-images': {
+						text:  'Add images from media library',
+						priority: 30
+					}
+				}
+			});
+
+			this.$el.addClass('with-toolbar');
+			this.$content.append( this.toolbarView.$el );
+		}
+	});
+
 
 	/**
 	 * wp.media.view.Attachments