Changeset 28095

Timestamp:

04/13/2014 04:01:53 AM (11 years ago)

Author:

azaozz

Message:

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

Location:

trunk/src/wp-includes

Files:

• css/media-views.css (modified) (1 diff)
• js/media-models.js (modified) (1 diff)
• js/media-views.js (modified) (5 diffs)
• js/tinymce/plugins/wpeditimage/plugin.js (modified) (3 diffs)
• media-template.php (modified) (1 diff)

trunk/src/wp-includes/css/media-views.css

@@ -1808 +1808 @@
 }
 
-.advanced,
+.advanced-section,
 .link-settings {
     margin-top: 10px;

trunk/src/wp-includes/js/media-models.js

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

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

@@ -31 +31 @@
         };
     }());
+
+    /**
+     * 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 );
 
     /**
@@ -2754 +2761 @@
             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 );
@@ -2787 +2794 @@
         },
 
-        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 );
-
+            });
         },
 
@@ -6257 +6261 @@
                 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' );
         },
 
@@ -6324 +6331 @@
 
         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');
             }
         },

trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

@@ -339 +339 @@
         }
 
+        if ( wp.media.events ) {
+            wp.media.events.trigger( 'editor:image-update', {
+                editor: editor,
+                metadata: imageData,
+                image: imageNode
+            } );
+        }
+
         editor.nodeChanged();
         // Refresh the toolbar
@@ -345 +353 @@
 
     function editImage( img ) {
-        var frame, callback;
+        var frame, callback, metadata;
 
         if ( typeof wp === 'undefined' || ! wp.media ) {
@@ -352 +360 @@
         }
 
+        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 ) {

trunk/src/wp-includes/media-template.php

@@ -756 +756 @@
                         <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">
-                            <label class="setting title-text">
-                                <span><?php _e('Image Title Attribute'); ?></span>
-                                <input type="text" data-setting="title" value="{{ data.model.title }}" />
-                            </label>
-                            <label class="setting extra-classes">
-                                <span><?php _e('Image CSS Class'); ?></span>
-                                <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
-                            </label>
-                            <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 class="advanced-settings hidden">
+                            <div class="advanced-image">
+                                <label class="setting title-text">
+                                    <span><?php _e('Image Title Attribute'); ?></span>
+                                    <input type="text" data-setting="title" value="{{ data.model.title }}" />
+                                </label>
+                                <label class="setting extra-classes">
+                                    <span><?php _e('Image CSS Class'); ?></span>
+                                    <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
+                                </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 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>
                         </div>
                     </div>