Changeset 22480

Timestamp:

11/09/2012 01:44:02 AM (12 years ago)

Author:

koopersmith

Message:

Media: Add batch insertion workflow. see #21390.

Location:

trunk

Files:

• wp-admin/js/media-upload.js (modified) (1 diff)
• wp-includes/js/media-views.js (modified) (10 diffs)
• wp-includes/script-loader.php (modified) (3 diffs)

trunk/wp-admin/js/media-upload.js

@@ -108 +108 @@
             } ) );
 
-            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 )

trunk/wp-includes/js/media-views.js

@@ -701 +701 @@
         createStates: function() {
             var options = this.options,
-                main, gallery;
+                main, gallery, batch;
 
             main = {
@@ -714 +714 @@
 
             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,
@@ -728 +737 @@
                 new media.controller.Upload( main ),
 
+                // Gallery states.
                 new media.controller.Gallery({
                     editing: options.editing,
@@ -735 +745 @@
                 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 ) )
             ]);
 
@@ -774 +803 @@
         },
 
-        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() {
@@ -811 +875 @@
                 }
             }) );
-
         },
 
@@ -901 +964 @@
 
         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() {
@@ -1293 +1402 @@
     media.view.Toolbar.Insert.Post = media.view.Toolbar.Insert.extend({
         initialize: function() {
+            var selectionToLibrary = function( state ) {
+                    return function() {
+                        var controller = this.controller,
+                            selection = controller.state().get('selection'),
+                            edit = controller.get( state );
+
+                        edit.set( 'library', new media.model.Selection( selection.models, {
+                            props:    selection.props.toJSON(),
+                            multiple: true
+                        }) );
+
+                        this.controller.state( state );
+                    };
+                };
+
             this.options.items = _.defaults( this.options.items || {}, {
                 gallery: {
                     text:     l10n.createNewGallery,
                     priority: 40,
-
-                    click: function() {
-                        var controller = this.controller,
-                            selection = controller.state().get('selection'),
-                            edit = controller.get('gallery-edit');
-
-                        edit.set( 'library', new media.model.Selection( selection.models, {
-                            props:    selection.props.toJSON(),
-                            multiple: true
-                        }) );
-
-                        this.controller.state('gallery-edit');
-                    }
+                    click:    selectionToLibrary('gallery-edit')
                 },
 
@@ -1315 +1427 @@
                     text:     l10n.batchInsert,
                     priority: 60,
-
-                    click: function() {
-                        this.controller.state('batch-edit');
-                    }
+                    click:    selectionToLibrary('batch-edit')
                 }
             });
@@ -1338 +1447 @@
 
             // 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 );
         }
     });

trunk/wp-includes/script-loader.php

@@ -339 +339 @@
         'createNewGallery'  => __( 'Create a new gallery' ),
         'insertIntoPost'    => __( 'Insert into post' ),
-        'addToGallery'      => __( 'Add to gallery' ),
 
         // Embed
@@ -347 +346 @@
         'batchInsert'      => __( 'Batch insert' ),
         'cancelBatchTitle' => __( '← Cancel Batch' ),
+        'editBatchTitle'   => __( 'Edit Batch' ),
+        'addToBatch'       => __( 'Add to batch' ),
 
         // Gallery
@@ -355 +356 @@
         'updateGallery'      => __( 'Update gallery' ),
         'continueEditing'    => __( 'Continue editing' ),
+        'addToGallery'       => __( 'Add to gallery' ),
     ) );