From 07885ba6c9f9a63427ed9651505f547e77925097 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Sun, 13 Apr 2014 04:01:53 +0000 Subject: [PATCH] Add hooks to the wpeditimage tinymce plugin and to the image details portion of the media modal. - Add wp.media.events which is intended to be a global media event bus. - Add a post-render event to the ImageDetails view that third-party code can leverage to add subviews. - Performance improvement for the initialization of the PostImage model. - A bit more markup to the image details template to make it easier to add a view to the advanced options. Props gcorne, fixes #27698 git-svn-id: https://develop.svn.wordpress.org/trunk@28095 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/css/media-views.css | 2 +- src/wp-includes/js/media-models.js | 7 ++- src/wp-includes/js/media-views.js | 39 +++++++++------- .../js/tinymce/plugins/wpeditimage/plugin.js | 23 +++++++++- src/wp-includes/media-template.php | 44 ++++++++++--------- 5 files changed, 75 insertions(+), 40 deletions(-) diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index c339723301..787a74f59a 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -1807,7 +1807,7 @@ left: 440px; } -.advanced, +.advanced-section, .link-settings { margin-top: 10px; } diff --git a/src/wp-includes/js/media-models.js b/src/wp-includes/js/media-models.js index 53eefdfe15..1dd719688e 100644 --- a/src/wp-includes/js/media-models.js +++ b/src/wp-includes/js/media-models.js @@ -360,7 +360,12 @@ window.wp = window.wp || {}; if ( attributes.attachment_id ) { this.attachment = Attachment.get( attributes.attachment_id ); - this.dfd = this.attachment.fetch(); + if ( this.attachment.get( 'url' ) ) { + this.dfd = $.Deferred(); + this.dfd.resolve(); + } else { + this.dfd = this.attachment.fetch(); + } this.bindAttachmentListeners(); } diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 5713cf1fad..c74040c770 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -31,6 +31,13 @@ }; }()); + /** + * A shared event bus used to provide events into + * the media workflows that 3rd-party devs can use to hook + * in. + */ + media.events = _.extend( {}, Backbone.Events ); + /** * Makes it easier to bind events using transitions. * @@ -2753,7 +2760,7 @@ bindHandlers: function() { media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments ); this.on( 'menu:create:image-details', this.createMenu, this ); - this.on( 'content:render:image-details', this.renderImageDetailsContent, this ); + this.on( 'content:create:image-details', this.imageDetailsContent, this ); this.on( 'content:render:edit-image', this.editImageContent, this ); this.on( 'menu:render:image-details', this.renderMenu, this ); this.on( 'toolbar:render:image-details', this.renderImageDetailsToolbar, this ); @@ -2786,15 +2793,12 @@ ]); }, - renderImageDetailsContent: function() { - var view = new media.view.ImageDetails({ + imageDetailsContent: function( options ) { + options.view = new media.view.ImageDetails({ controller: this, model: this.state().image, attachment: this.state().image.attachment - }).render(); - - this.content.set( view ); - + }); }, editImageContent: function() { @@ -6256,23 +6260,26 @@ if ( this.model.attachment && 'pending' === this.model.dfd.state() ) { this.model.dfd.done( function() { media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args ); - self.resetFocus(); - self.toggleLinkSettings(); + self.postRender(); } ).fail( function() { self.model.attachment = false; media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args ); - self.resetFocus(); - self.toggleLinkSettings(); + self.postRender(); } ); } else { media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments ); - setTimeout( function() { self.resetFocus(); }, 10 ); - self.toggleLinkSettings(); + this.postRender(); } return this; }, + postRender: function() { + setTimeout( _.bind( this.resetFocus, this ), 10 ); + this.toggleLinkSettings(); + this.trigger( 'post-render' ); + }, + resetFocus: function() { this.$( '.link-to-custom' ).blur(); this.$( '.embed-media-settings' ).scrollTop( 0 ); @@ -6323,14 +6330,14 @@ }, toggleAdvanced: function( event ) { - var $advanced = $( event.target ).closest( '.advanced' ); + var $advanced = $( event.target ).closest( '.advanced-section' ); event.preventDefault(); if ( $advanced.hasClass('advanced-visible') ) { $advanced.removeClass('advanced-visible'); - $advanced.find('div').addClass('hidden'); + $advanced.find('.advanced-settings').addClass('hidden'); } else { $advanced.addClass('advanced-visible'); - $advanced.find('div').removeClass('hidden'); + $advanced.find('.advanced-settings').removeClass('hidden'); } }, diff --git a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js index efe221e055..050a1f53f6 100644 --- a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js @@ -338,25 +338,44 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { dom.remove( captionNode ); } + if ( wp.media.events ) { + wp.media.events.trigger( 'editor:image-update', { + editor: editor, + metadata: imageData, + image: imageNode + } ); + } + editor.nodeChanged(); // Refresh the toolbar addToolbar( imageNode ); } function editImage( img ) { - var frame, callback; + var frame, callback, metadata; if ( typeof wp === 'undefined' || ! wp.media ) { editor.execCommand( 'mceImage' ); return; } + metadata = extractImageData( img ); + + // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal + wp.media.events.trigger( 'editor:image-edit', { + editor: editor, + metadata: metadata, + image: img + } ); + frame = wp.media({ frame: 'image', state: 'image-details', - metadata: extractImageData( img ) + metadata: metadata } ); + wp.media.events.trigger( 'editor:frame-create', { frame: frame } ); + callback = function( imageData ) { editor.focus(); editor.undoManager.transact( function() { diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php index a284d8dec5..5a49ae33b4 100644 --- a/src/wp-includes/media-template.php +++ b/src/wp-includes/media-template.php @@ -755,28 +755,32 @@ function wp_print_media_templates() { -
+

-