WordPress.org

Make WordPress Core

Changeset 28095


Ignore:
Timestamp:
04/13/2014 04:01:53 AM (6 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:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/css/media-views.css

    r28030 r28095  
    18081808}
    18091809
    1810 .advanced,
     1810.advanced-section,
    18111811.link-settings {
    18121812    margin-top: 10px;
  • trunk/src/wp-includes/js/media-models.js

    r27948 r28095  
    361361            if ( attributes.attachment_id ) {
    362362                this.attachment = Attachment.get( attributes.attachment_id );
    363                 this.dfd = this.attachment.fetch();
     363                if ( this.attachment.get( 'url' ) ) {
     364                    this.dfd = $.Deferred();
     365                    this.dfd.resolve();
     366                } else {
     367                    this.dfd = this.attachment.fetch();
     368                }
    364369                this.bindAttachmentListeners();
    365370            }
  • trunk/src/wp-includes/js/media-views.js

    r28048 r28095  
    3131        };
    3232    }());
     33
     34    /**
     35     * A shared event bus used to provide events into
     36     * the media workflows that 3rd-party devs can use to hook
     37     * in.
     38     */
     39    media.events = _.extend( {}, Backbone.Events );
    3340
    3441    /**
     
    27542761            media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
    27552762            this.on( 'menu:create:image-details', this.createMenu, this );
    2756             this.on( 'content:render:image-details', this.renderImageDetailsContent, this );
     2763            this.on( 'content:create:image-details', this.imageDetailsContent, this );
    27572764            this.on( 'content:render:edit-image', this.editImageContent, this );
    27582765            this.on( 'menu:render:image-details', this.renderMenu, this );
     
    27872794        },
    27882795
    2789         renderImageDetailsContent: function() {
    2790             var view = new media.view.ImageDetails({
     2796        imageDetailsContent: function( options ) {
     2797            options.view = new media.view.ImageDetails({
    27912798                controller: this,
    27922799                model: this.state().image,
    27932800                attachment: this.state().image.attachment
    2794             }).render();
    2795 
    2796             this.content.set( view );
    2797 
     2801            });
    27982802        },
    27992803
     
    62576261                this.model.dfd.done( function() {
    62586262                    media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args );
    6259                     self.resetFocus();
    6260                     self.toggleLinkSettings();
     6263                    self.postRender();
    62616264                } ).fail( function() {
    62626265                    self.model.attachment = false;
    62636266                    media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args );
    6264                     self.resetFocus();
    6265                     self.toggleLinkSettings();
     6267                    self.postRender();
    62666268                } );
    62676269            } else {
    62686270                media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
    6269                 setTimeout( function() { self.resetFocus(); }, 10 );
    6270                 self.toggleLinkSettings();
     6271                this.postRender();
    62716272            }
    62726273
    62736274            return this;
     6275        },
     6276
     6277        postRender: function() {
     6278            setTimeout( _.bind( this.resetFocus, this ), 10 );
     6279            this.toggleLinkSettings();
     6280            this.trigger( 'post-render' );
    62746281        },
    62756282
     
    63246331
    63256332        toggleAdvanced: function( event ) {
    6326             var $advanced = $( event.target ).closest( '.advanced' );
     6333            var $advanced = $( event.target ).closest( '.advanced-section' );
    63276334            event.preventDefault();
    63286335            if ( $advanced.hasClass('advanced-visible') ) {
    63296336                $advanced.removeClass('advanced-visible');
    6330                 $advanced.find('div').addClass('hidden');
     6337                $advanced.find('.advanced-settings').addClass('hidden');
    63316338            } else {
    63326339                $advanced.addClass('advanced-visible');
    6333                 $advanced.find('div').removeClass('hidden');
     6340                $advanced.find('.advanced-settings').removeClass('hidden');
    63346341            }
    63356342        },
  • trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

    r28094 r28095  
    339339        }
    340340
     341        if ( wp.media.events ) {
     342            wp.media.events.trigger( 'editor:image-update', {
     343                editor: editor,
     344                metadata: imageData,
     345                image: imageNode
     346            } );
     347        }
     348
    341349        editor.nodeChanged();
    342350        // Refresh the toolbar
     
    345353
    346354    function editImage( img ) {
    347         var frame, callback;
     355        var frame, callback, metadata;
    348356
    349357        if ( typeof wp === 'undefined' || ! wp.media ) {
     
    352360        }
    353361
     362        metadata = extractImageData( img );
     363
     364        // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal
     365        wp.media.events.trigger( 'editor:image-edit', {
     366            editor: editor,
     367            metadata: metadata,
     368            image: img
     369        } );
     370
    354371        frame = wp.media({
    355372            frame: 'image',
    356373            state: 'image-details',
    357             metadata: extractImageData( img )
     374            metadata: metadata
    358375        } );
     376
     377        wp.media.events.trigger( 'editor:frame-create', { frame: frame } );
    359378
    360379        callback = function( imageData ) {
  • trunk/src/wp-includes/media-template.php

    r28039 r28095  
    756756                        <input type="text" class="link-to-custom" data-setting="linkUrl" />
    757757                    </div>
    758                     <div class="advanced">
     758                    <div class="advanced-section">
    759759                        <h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>
    760                         <div class="hidden">
    761                             <label class="setting title-text">
    762                                 <span><?php _e('Image Title Attribute'); ?></span>
    763                                 <input type="text" data-setting="title" value="{{ data.model.title }}" />
    764                             </label>
    765                             <label class="setting extra-classes">
    766                                 <span><?php _e('Image CSS Class'); ?></span>
    767                                 <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
    768                             </label>
    769                             <div class="setting link-target">
    770                                 <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>
     760                        <div class="advanced-settings hidden">
     761                            <div class="advanced-image">
     762                                <label class="setting title-text">
     763                                    <span><?php _e('Image Title Attribute'); ?></span>
     764                                    <input type="text" data-setting="title" value="{{ data.model.title }}" />
     765                                </label>
     766                                <label class="setting extra-classes">
     767                                    <span><?php _e('Image CSS Class'); ?></span>
     768                                    <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
     769                                </label>
    771770                            </div>
    772                             <label class="setting link-rel">
    773                                 <span><?php _e('Link Rel'); ?></span>
    774                                 <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
    775                             </label>
    776                             <label class="setting link-class-name">
    777                                 <span><?php _e('Link CSS Class'); ?></span>
    778                                 <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
    779                             </label>
     771                            <div class="advanced-link">
     772                                <div class="setting link-target">
     773                                    <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>
     774                                </div>
     775                                <label class="setting link-rel">
     776                                    <span><?php _e('Link Rel'); ?></span>
     777                                    <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
     778                                </label>
     779                                <label class="setting link-class-name">
     780                                    <span><?php _e('Link CSS Class'); ?></span>
     781                                    <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
     782                                </label>
     783                            </div>
    780784                        </div>
    781785                    </div>
Note: See TracChangeset for help on using the changeset viewer.