From b9a5374e648c5e0e20ad7a9ec966c846ad75930a Mon Sep 17 00:00:00 2001 From: Daryl Koopersmith Date: Fri, 9 Nov 2012 01:44:02 +0000 Subject: [PATCH] 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 | 5 +- wp-includes/js/media-views.js | 167 ++++++++++++++++++++++++++++------ wp-includes/script-loader.php | 4 +- 3 files changed, 143 insertions(+), 33 deletions(-) diff --git a/wp-admin/js/media-upload.js b/wp-admin/js/media-upload.js index 9801477951..60dc0cb87b 100644 --- a/wp-admin/js/media-upload.js +++ b/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; diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js index 6a47d5878b..803ac8ec4d 100644 --- a/wp-includes/js/media-views.js +++ b/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, - menu: 'gallery', - toolbar: 'gallery-add' + multiple: true, + menu: 'gallery', + 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' }), - excludeState: 'gallery-edit' + library: media.query({ type: 'image' }) }, gallery ) ), new media.controller.Upload( _.defaults({ - id: 'gallery-upload', - excludeState: 'gallery-edit' - }, gallery ) ) + id: 'gallery-upload' + }, 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 || {}, { - gallery: { - text: l10n.createNewGallery, - priority: 40, - - click: function() { + var selectionToLibrary = function( state ) { + return 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: function() { - this.controller.state('batch-edit'); - } + click: selectionToLibrary('batch-edit') } }); @@ -1337,12 +1446,10 @@ }) ); // Batch insert shows for multiple selected attachments. - // Temporarily disabled with `false &&`. - this.get('batch').$el.toggle( false && count > 1 ); + this.get('batch').$el.toggle( count > 1 ); // Insert only shows for single attachments. - // Temporarily disabled. - // this.get('insert').$el.toggle( count <= 1 ); + this.get('insert').$el.toggle( count <= 1 ); } }); diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php index 2d1d4f91cb..a347b50dda 100644 --- a/wp-includes/script-loader.php +++ b/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 );