Media: Add batch insertion workflow. see #21390.

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

wp-admin/js/media-upload.js

@@ -107,11 +107,12 @@ var tb_position;
 				multiple: true
 			} ) );
 
-			workflow.on( 'insert', function() {
+			workflow.on( 'insert', function( selection ) {
 				var state = workflow.state(),
-					selection = state.get('selection'),
 					details = state.get('details');
 
+				selection = selection || state.get('selection');
+
 				if ( ! selection || ! details )
 					return;
 

wp-includes/js/media-views.js

@@ -700,7 +700,7 @@
 
 		createStates: function() {
 			var options = this.options,
-				main, gallery;
+				main, gallery, batch;
 
 			main = {
 				multiple: this.options.multiple,
@@ -713,13 +713,22 @@
 			};
 
 			gallery = {
-				multiple: true,
+				multiple:     true,
-				menu:     'gallery',
+				menu:         'gallery',
-				toolbar:  'gallery-add'
+				toolbar:      'gallery-add',
+				excludeState: 'gallery-edit'
+			};
+
+			batch = {
+				multiple:     true,
+				menu:         'batch',
+				toolbar:      'batch-add',
+				excludeState: 'batch-edit'
 			};
 
 			// Add the default states.
 			this.states.add([
+				// Main states.
 				new media.controller.Library( _.defaults({
 					selection: options.selection,
 					library:   media.query( options.library )
@@ -727,6 +736,7 @@
 
 				new media.controller.Upload( main ),
 
+				// Gallery states.
 				new media.controller.Gallery({
 					editing: options.editing,
 					menu:    'gallery'
@@ -734,14 +744,33 @@
 
 				new media.controller.Library( _.defaults({
 					id:      'gallery-library',
-					library: media.query({ type: 'image' }),
+					library: media.query({ type: 'image' })
-					excludeState: 'gallery-edit'
 				}, gallery ) ),
 
 				new media.controller.Upload( _.defaults({
-					id: 'gallery-upload',
+					id: 'gallery-upload'
-					excludeState: 'gallery-edit'
+				}, gallery ) ),
-				}, gallery ) )
+
+				// Batch states.
+				new media.controller.Library({
+					id:       'batch-edit',
+					multiple: false,
+					describe: true,
+					edge:     199,
+					sortable: true,
+					menu:     'batch',
+					toolbar:  'batch-edit',
+					sidebar:  'attachment-settings'
+				}),
+
+				new media.controller.Library( _.defaults({
+					id:      'batch-library',
+					library: media.query({ type: 'image' })
+				}, batch ) ),
+
+				new media.controller.Upload( _.defaults({
+					id: 'batch-upload'
+				}, batch ) )
 			]);
 
 			// Set the default state.
@@ -773,7 +802,42 @@
 			}) );
 		},
 
-		batchMenu: function() {},
+		batchMenu: function() {
+			var previous = this.previous(),
+				frame = this;
+
+			this.menu.view( new media.view.Menu({
+				controller: this,
+				views: {
+					cancel: {
+						text:     l10n.cancelBatchTitle,
+						priority: 20,
+						click:    function() {
+							if ( previous )
+								frame.state( previous );
+							else
+								frame.close();
+						}
+					},
+					separateCancel: new Backbone.View({
+						className: 'separator',
+						priority: 40
+					}),
+					'batch-edit': {
+						text: l10n.editBatchTitle,
+						priority: 60
+					},
+					'batch-upload': {
+						text: l10n.uploadFilesTitle,
+						priority: 80
+					},
+					'batch-library': {
+						text: l10n.mediaLibraryTitle,
+						priority: 100
+					}
+				}
+			}) );
+		},
 
 		galleryMenu: function() {
 			var previous = this.previous(),
@@ -810,7 +874,6 @@
 					}
 				}
 			}) );
-
 		},
 
 		// Content
@@ -900,8 +963,54 @@
 		},
 
 		mainEmbedToolbar: function() {},
-		batchEditToolbar: function() {},
+
-		batchAddToolbar: function() {},
+		batchEditToolbar: function() {
+			this.toolbar.view( new media.view.Toolbar({
+				controller: this,
+				items: {
+					insert: {
+						style:    'primary',
+						text:     l10n.insertIntoPost,
+						priority: 80,
+
+						click: function() {
+							var controller = this.controller,
+								state = controller.state();
+
+							controller.close();
+							state.trigger( 'insert', state.get('library') );
+
+							controller.reset();
+							// @todo: Make the state activated dynamic (instead of hardcoded).
+							controller.state('upload');
+						}
+					}
+				}
+			}) );
+		},
+
+		batchAddToolbar: function() {
+			this.toolbar.view( new media.view.Toolbar({
+				controller: this,
+				items: {
+					insert: {
+						style:    'primary',
+						text:     l10n.addToBatch,
+						priority: 80,
+
+						click: function() {
+							var controller = this.controller,
+								state = controller.state(),
+								edit = controller.get('batch-edit');
+
+							edit.get('library').add( state.get('selection').models );
+							state.trigger('reset');
+							controller.state('batch-edit');
+						}
+					}
+				}
+			}) );
+		},
 
 		galleryEditToolbar: function() {
 			var editing = this.state().get('editing');
@@ -1292,32 +1401,32 @@
 	// ---------------------------------
 	media.view.Toolbar.Insert.Post = media.view.Toolbar.Insert.extend({
 		initialize: function() {
-			this.options.items = _.defaults( this.options.items || {}, {
+			var selectionToLibrary = function( state ) {
-				gallery: {
+					return function() {
-					text:     l10n.createNewGallery,
-					priority: 40,
-
-					click: function() {
 						var controller = this.controller,
 							selection = controller.state().get('selection'),
-							edit = controller.get('gallery-edit');
+							edit = controller.get( state );
 
 						edit.set( 'library', new media.model.Selection( selection.models, {
 							props:    selection.props.toJSON(),
 							multiple: true
 						}) );
 
-						this.controller.state('gallery-edit');
+						this.controller.state( state );
-					}
+					};
+				};
+
+			this.options.items = _.defaults( this.options.items || {}, {
+				gallery: {
+					text:     l10n.createNewGallery,
+					priority: 40,
+					click:    selectionToLibrary('gallery-edit')
 				},
 
 				batch: {
 					text:     l10n.batchInsert,
 					priority: 60,
-
+					click:    selectionToLibrary('batch-edit')
-					click: function() {
-						this.controller.state('batch-edit');
-					}
 				}
 			});
 
@@ -1337,12 +1446,10 @@
 			}) );
 
 			// Batch insert shows for multiple selected attachments.
-			// Temporarily disabled with `false &&`.
+			this.get('batch').$el.toggle( count > 1 );
-			this.get('batch').$el.toggle( false && count > 1 );
 
 			// Insert only shows for single attachments.
-			// Temporarily disabled.
+			this.get('insert').$el.toggle( count <= 1 );
-			// this.get('insert').$el.toggle( count <= 1 );
 		}
 	});
 

wp-includes/script-loader.php

@@ -338,7 +338,6 @@ function wp_default_scripts( &$scripts ) {
 		'mediaLibraryTitle' => __( 'Media Library' ),
 		'createNewGallery'  => __( 'Create a new gallery' ),
 		'insertIntoPost'    => __( 'Insert into post' ),
-		'addToGallery'      => __( 'Add to gallery' ),
 
 		// Embed
 		'embedFromUrlTitle' => __( 'Embed From URL' ),
@@ -346,6 +345,8 @@ function wp_default_scripts( &$scripts ) {
 		// Batch
 		'batchInsert'      => __( 'Batch insert' ),
 		'cancelBatchTitle' => __( '← Cancel Batch' ),
+		'editBatchTitle'   => __( 'Edit Batch' ),
+		'addToBatch'       => __( 'Add to batch' ),
 
 		// Gallery
 		'createGalleryTitle' => __( 'Create Gallery' ),
@@ -354,6 +355,7 @@ function wp_default_scripts( &$scripts ) {
 		'insertGallery'      => __( 'Insert gallery' ),
 		'updateGallery'      => __( 'Update gallery' ),
 		'continueEditing'    => __( 'Continue editing' ),
+		'addToGallery'       => __( 'Add to gallery' ),
 	) );
 
 	$scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 );