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
Built from https://develop.svn.wordpress.org/trunk@28095


git-svn-id: http://core.svn.wordpress.org/trunk@27926 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views-rtl.css

@@ -1807,7 +1807,7 @@
 	right: 440px;
 }
 
-.advanced,
+.advanced-section,
 .link-settings {
 	margin-top: 10px;
 }

wp-includes/css/media-views.css

@@ -1807,7 +1807,7 @@
 	left: 440px;
 }
 
-.advanced,
+.advanced-section,
 .link-settings {
 	margin-top: 10px;
 }

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();
 			}
 

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() {
+		imageDetailsContent: function( options ) {
-			var view = new media.view.ImageDetails({
+			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.postRender();
-					self.toggleLinkSettings();
 				} ).fail( function() {
 					self.model.attachment = false;
 					media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args );
-					self.resetFocus();
+					self.postRender();
-					self.toggleLinkSettings();
 				} );
 			} else {
 				media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
-				setTimeout( function() { self.resetFocus(); }, 10 );
+				this.postRender();
-				self.toggleLinkSettings();
 			}
 
 			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');
 			}
 		},
 

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() {

wp-includes/media-template.php

@@ -755,28 +755,32 @@ function wp_print_media_templates() {
 						</select>
 						<input type="text" class="link-to-custom" data-setting="linkUrl" />
 					</div>
-					<div class="advanced">
+					<div class="advanced-section">
 						<h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>
-						<div class="hidden">
+						<div class="advanced-settings hidden">
-							<label class="setting title-text">
+							<div class="advanced-image">
-								<span><?php _e('Image Title Attribute'); ?></span>
+								<label class="setting title-text">
-								<input type="text" data-setting="title" value="{{ data.model.title }}" />
+									<span><?php _e('Image Title Attribute'); ?></span>
-							</label>
+									<input type="text" data-setting="title" value="{{ data.model.title }}" />
-							<label class="setting extra-classes">
+								</label>
-								<span><?php _e('Image CSS Class'); ?></span>
+								<label class="setting extra-classes">
-								<input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
+									<span><?php _e('Image CSS Class'); ?></span>
-							</label>
+									<input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
-							<div class="setting link-target">
+								</label>
-								<label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new window/tab' ); ?></label>
+							</div>
+							<div class="advanced-link">
+								<div class="setting link-target">
+									<label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new window/tab' ); ?></label>
+								</div>
+								<label class="setting link-rel">
+									<span><?php _e('Link Rel'); ?></span>
+									<input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
+								</label>
+								<label class="setting link-class-name">
+									<span><?php _e('Link CSS Class'); ?></span>
+									<input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
+								</label>
 							</div>
-							<label class="setting link-rel">
-								<span><?php _e('Link Rel'); ?></span>
-								<input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
-							</label>
-							<label class="setting link-class-name">
-								<span><?php _e('Link CSS Class'); ?></span>
-								<input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
-							</label>
 						</div>
 					</div>
 				</div>