From db21ce7189471e1fab6665bbb384b5148f3a248d Mon Sep 17 00:00:00 2001 From: Daryl Koopersmith Date: Wed, 10 Oct 2012 08:31:12 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@22155 602fd350-edb4-49c9-b593-d223f7449a82 --- wp-admin/js/media-upload.js | 2 +- wp-includes/js/mce-view.js | 49 ++++++++++++++++++++++++++++++----- wp-includes/js/media-views.js | 48 ++++++++++++++++++++-------------- wp-includes/script-loader.php | 2 ++ 4 files changed, 74 insertions(+), 27 deletions(-) diff --git a/wp-admin/js/media-upload.js b/wp-admin/js/media-upload.js index 881f907424..93204a3144 100644 --- a/wp-admin/js/media-upload.js +++ b/wp-admin/js/media-upload.js @@ -90,7 +90,7 @@ var tb_position; // WordPress, TinyMCE, and Media // ----------------------------- (function($){ - // Stores the editors' `wp.media.controller.Workflow` instaces. + // Stores the editors' `wp.media.controller.Workflow` instances. var workflows = {}; wp.mce.media = { diff --git a/wp-includes/js/mce-view.js b/wp-includes/js/mce-view.js index d9622e6edc..93c0d26ed5 100644 --- a/wp-includes/js/mce-view.js +++ b/wp-includes/js/mce-view.js @@ -546,7 +546,8 @@ window.wp = window.wp || {}; }, 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; attrs.ids = attachments.pluck('id'); @@ -557,7 +558,11 @@ window.wp = window.wp || {}; type: 'single' }); - 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; } }; @@ -574,14 +579,18 @@ window.wp = window.wp || {}; parent: $('#post_ID').val(), events: { - 'click .close': 'remove' + 'click .close': 'remove', + 'click .edit': 'edit' }, initialize: function() { - var view = mceview.get('gallery'), - shortcode = this.options.shortcode; + this.update(); + }, - this.attachments = view.gallery.attachments( shortcode, this.parent ); + 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 ) ); }, @@ -601,6 +610,34 @@ window.wp = window.wp || {}; }; 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 ); } } }); diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js index 0b74f33b22..39a7a79b28 100644 --- a/wp-includes/js/media-views.js +++ b/wp-includes/js/media-views.js @@ -119,8 +119,8 @@ 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(); }, @@ -217,18 +217,22 @@ 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 ); }, closeHandler: function( event ) { @@ -277,8 +281,8 @@ // Make sure to detach the elements we want to reuse. // 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; }, @@ -736,22 +740,12 @@ // 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: 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' ) }, @@ -760,7 +754,21 @@ text: l10n.addImagesFromLibrary, 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 }); this.$el.addClass('with-toolbar'); diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php index d1790c2ef9..0d09967811 100644 --- a/wp-includes/script-loader.php +++ b/wp-includes/script-loader.php @@ -330,6 +330,7 @@ function wp_default_scripts( &$scripts ) { // Gallery 'returnToLibrary' => __( 'Return to media library' ), 'insertGalleryIntoPost' => __( 'Insert gallery into post' ), + 'updateGallery' => __( 'Update gallery' ), 'addImagesFromLibrary' => __( 'Add images from media library' ), ) ); @@ -337,6 +338,7 @@ function wp_default_scripts( &$scripts ) { $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 ); did_action( 'init' ) && $scripts->localize( 'mce-view', '_wpMceViewL10n', array( 'contentWidth' => isset( $GLOBALS['content_width'] ) ? $GLOBALS['content_width'] : 800, + 'editGallery' => __( 'Edit Gallery' ), ) ); if ( is_admin() ) {