Changeset 22155

Timestamp:

10/10/2012 08:31:12 AM (11 years ago)

Author:

koopersmith

Message:

Gallery editing in the media modal.

The edit button on gallery MCE views will open a new instance of the media modal. Images can be removed, uploaded, and reordered. However, the "Add images from media library" button is not yet functional.

see #21390, #21809, #21815.

Location:

trunk

Files:

• wp-admin/js/media-upload.js (modified) (1 diff)
• wp-includes/js/mce-view.js (modified) (4 diffs)
• wp-includes/js/media-views.js (modified) (5 diffs)
• wp-includes/script-loader.php (modified) (2 diffs)

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

@@ -91 +91 @@
 // -----------------------------
 (function($){
-    // Stores the editors' `wp.media.controller.Workflow` instaces.
+    // Stores the editors' `wp.media.controller.Workflow` instances.
     var workflows = {};
 

trunk/wp-includes/js/mce-view.js

@@ -547 +547 @@
 
                 shortcode: function( attachments ) {
-                    var attrs = _.pick( attachments.props.toJSON(), 'include', 'exclude', 'orderby', 'order' ),
+                    var props = attachments.props.toJSON(),
+                        attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order' ),
                         shortcode;
 
@@ -558 +559 @@
                     });
 
-                    galleries[ shortcode.string() ] = attachments;
+                    // Use a cloned version of the gallery.
+                    galleries[ shortcode.string() ] = new wp.media.model.Attachments( attachments.models, {
+                        props: props
+                    });
+
                     return shortcode;
                 }
@@ -575 +580 @@
 
             events: {
-                'click .close': 'remove'
+                'click .close': 'remove',
+                'click .edit':  'edit'
             },
 
             initialize: function() {
-                var view      = mceview.get('gallery'),
-                    shortcode = this.options.shortcode;
-
-                this.attachments = view.gallery.attachments( shortcode, this.parent );
+                this.update();
+            },
+
+            update: function() {
+                var view = mceview.get('gallery');
+
+                this.attachments = view.gallery.attachments( this.options.shortcode, this.parent );
                 this.attachments.more().done( _.bind( this.render, this ) );
             },
@@ -602 +611 @@
 
                 this.$el.html( this.template( options ) );
+            },
+
+            edit: function() {
+                if ( ! wp.media.view || this.workflow )
+                    return;
+
+                this.workflow = wp.media({
+                    view:      'gallery',
+                    selection: this.attachments.models,
+                    title:     mceview.l10n.editGallery,
+                    editing:   true,
+                    multiple:  true
+                });
+
+                // Create a single-use workflow. If the workflow is closed,
+                // then detach it from the DOM and remove the reference.
+                this.workflow.on( 'close', function() {
+                    this.workflow.detach();
+                    delete this.workflow;
+                }, this );
+
+                // Update the `shortcode` and `attachments`.
+                this.workflow.on( 'update:gallery', function( selection ) {
+                    var view = mceview.get('gallery');
+
+                    this.options.shortcode = view.gallery.shortcode( selection );
+                    this.update();
+                }, this );
             }
         }

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

@@ -120 +120 @@
         update: function( event ) {
             this.close();
-            this.trigger( 'update', this.selection );
-            this.trigger( 'update:' + event, this.selection );
+            this.trigger( 'update', this.selection, this );
+            this.trigger( 'update:' + event, this.selection, this );
             this.selection.clear();
         },
@@ -218 +218 @@
         attach: function() {
             this.$el.appendTo( this.options.container );
+            this.controller.trigger( 'attach', this.controller );
         },
 
         detach: function() {
             this.$el.detach();
+            this.controller.trigger( 'detach', this.controller );
         },
 
         open: function() {
             this.$el.show();
+            this.controller.trigger( 'open', this.controller );
         },
 
         close: function() {
             this.$el.hide();
+            this.controller.trigger( 'close', this.controller );
         },
 
@@ -278 +282 @@
             // Otherwise, `jQuery.html()` will unbind their events.
             $( _.pluck( this._views, 'el' ) ).detach();
-            this.$primary.html( _.pluck( views.primary, 'el' ) );
-            this.$secondary.html( _.pluck( views.secondary, 'el' ) );
+            this.$primary.html( _.pluck( views.primary || [], 'el' ) );
+            this.$secondary.html( _.pluck( views.secondary || [], 'el' ) );
 
             return this;
@@ -737 +741 @@
         // to test multiple selections.
         initToolbarView: function() {
-            var controller = this.controller;
-
-            this.toolbarView = new media.view.Toolbar({
-                items: {
-                    'return-to-library': {
-                        text:     l10n.returnToLibrary,
-                        priority: -40,
-
-                        click:  function() {
-                            controller.render('library');
-                        }
-                    },
-
-                    'insert-gallery-into-post': {
+            var controller = this.controller,
+                editing = controller.get('editing'),
+                items = {
+                    'update-gallery': {
                         style:    'primary',
-                        text:     l10n.insertGalleryIntoPost,
+                        text:     editing ? l10n.updateGallery : l10n.insertGalleryIntoPost,
                         priority: 40,
                         click:    _.bind( controller.update, controller, 'gallery' )
@@ -761 +755 @@
                         priority: 30
                     }
-                }
+                };
+
+            if ( ! editing ) {
+                items['return-to-library'] = {
+                    text:     l10n.returnToLibrary,
+                    priority: -40,
+
+                    click:  function() {
+                        controller.render('library');
+                    }
+                };
+            }
+
+            this.toolbarView = new media.view.Toolbar({
+                items: items
             });
 

trunk/wp-includes/script-loader.php

@@ -331 +331 @@
         'returnToLibrary'       => __( 'Return to media library' ),
         'insertGalleryIntoPost' => __( 'Insert gallery into post' ),
+        'updateGallery'         => __( 'Update gallery' ),
         'addImagesFromLibrary'  => __( 'Add images from media library' ),
     ) );
@@ -338 +339 @@
     did_action( 'init' ) && $scripts->localize( 'mce-view', '_wpMceViewL10n', array(
         'contentWidth' => isset( $GLOBALS['content_width'] ) ? $GLOBALS['content_width'] : 800,
+        'editGallery'  => __( 'Edit Gallery' ),
     ) );