WordPress.org

Make WordPress Core

Changeset 31559


Ignore:
Timestamp:
02/26/2015 07:31:27 PM (5 years ago)
Author:
azaozz
Message:

TinyMCE: wpView improvements: introduce getText() and remove() methods, improved getInstance(), better docs. Props iseulde. See #31412.

Location:
trunk/src/wp-includes/js
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/mce-view.js

    r31548 r31559  
    6565         *
    6666         * @param {String} type The view type.
     67         *
     68         * @return {Function} The view constructor.
    6769         */
    6870        get: function( type ) {
     
    143145         * @param {String} text    The textual representation of the view.
    144146         * @param {Object} options Options.
     147         *
     148         * @return {wp.mce.View} The view instance.
    145149         */
    146150        createInstance: function( type, text, options ) {
     
    164168         * Get a view instance.
    165169         *
    166          * @param {String} text The textual representation of the view.
    167          */
    168         getInstance: function( text ) {
    169             return instances[ encodeURIComponent( text ) ];
     170         * @param {(String|HTMLElement)} object The textual representation of the view or the view node.
     171         *
     172         * @return {wp.mce.View} The view instance or undefined.
     173         */
     174        getInstance: function( object ) {
     175            if ( typeof object === 'string' ) {
     176                return instances[ encodeURIComponent( object ) ];
     177            }
     178
     179            return instances[ $( object ).data( 'wpview-text' ) ];
     180        },
     181
     182        /**
     183         * Given a view node, get the view's text.
     184         *
     185         * @param {HTMLElement} node The view node.
     186         *
     187         * @return {String} The textual representation of the view.
     188         */
     189        getText: function( node ) {
     190            return decodeURIComponent( $( node ).data( 'wpview-text' ) || '' );
    170191        },
    171192
     
    189210         */
    190211        update: function( text, editor, node ) {
    191             var oldText = decodeURIComponent( $( node ).data( 'wpview-text' ) ),
    192                 instance = this.getInstance( oldText );
     212            var instance = this.getInstance( node );
    193213
    194214            if ( instance ) {
     
    204224         */
    205225        edit: function( editor, node ) {
    206             var text = decodeURIComponent( $( node ).data( 'wpview-text' ) ),
    207                 instance = this.getInstance( text );
     226            var instance = this.getInstance( node );
    208227
    209228            if ( instance && instance.edit ) {
    210                 instance.edit( text, function( text ) {
     229                instance.edit( instance.text, function( text ) {
    211230                    instance.update( text, editor, node );
    212231                } );
     232            }
     233        },
     234
     235        /**
     236         * Remove a given view node from the DOM.
     237         *
     238         * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in.
     239         * @param {HTMLElement}    node   The view node to remove.
     240         */
     241        remove: function( editor, node ) {
     242            var instance = this.getInstance( node );
     243
     244            if ( instance ) {
     245                instance.remove( editor, node );
    213246            }
    214247        }
     
    219252     * The main difference is that the TinyMCE View is not tied to a particular DOM node.
    220253     *
    221      * @param {Object} Options.
     254     * @param {Object} options Options.
    222255     */
    223256    wp.mce.View = function( options ) {
     
    277310            if ( this.getContent() ) {
    278311                this.setContent( this.getContent(), function( editor, node ) {
    279                     $( node ).data( 'rendered', true );
    280                     this.bindNodes.apply( this, arguments );
     312                    $( node ).data( 'rendered', true ).trigger( 'wp-mce-view-bind' );
    281313                }, force ? null : false );
    282314            } else {
     
    286318
    287319        /**
    288          * Binds a given rendered view node.
    289          * Runs after a view node's content is added to the DOM.
    290          *
    291          * @param {tinymce.Editor} editor      The TinyMCE editor instance the view node is in.
    292          * @param {HTMLElement}    node        The view node.
    293          * @param {HTMLElement}    contentNode The view's content node.
    294          */
    295         bindNodes: function( /* editor, node, contentNode */ ) {},
    296 
    297         /**
    298320         * Unbinds all view nodes tied to this view instance.
    299321         * Runs before their content is removed from the DOM.
    300322         */
    301323        unbind: function() {
    302             this.getNodes( function() {
    303                 this.unbindNodes.apply( this, arguments );
     324            this.getNodes( function( editor, node ) {
     325                $( node ).trigger( 'wp-mce-view-unbind' );
    304326            }, true );
    305327        },
    306 
    307         /**
    308          * Unbinds a given view node.
    309          * Runs before the view node's content is removed from the DOM.
    310          *
    311          * @param {tinymce.Editor} editor      The TinyMCE editor instance the view node is in.
    312          * @param {HTMLElement}    node        The view node.
    313          * @param {HTMLElement}    contentNode The view's content node.
    314          */
    315         unbindNodes: function( /* editor, node, contentNode */ ) {},
    316328
    317329        /**
     
    379391        replaceMarkers: function() {
    380392            this.getMarkers( function( editor, node ) {
    381                 if ( $( node ).text() !== this.text ) {
     393                if ( $( node ).html() !== this.text ) {
    382394                    editor.dom.setAttrib( node, 'data-wpview-marker', null );
    383395                    return;
     
    456468                    styles = '',
    457469                    bodyClasses = editor.getBody().className || '',
    458                     iframe, iframeDoc, i, resize;
     470                    iframe, iframeDoc, observer, i, resize;
    459471
    460472                content.innerHTML = '';
     
    548560
    549561                    if ( MutationObserver ) {
    550                         new MutationObserver( _.debounce( function() {
     562                        observer = new MutationObserver( _.debounce( function() {
    551563                            resize();
    552                         }, 100 ) )
    553                         .observe( iframeDoc.body, {
     564                        }, 100 ) );
     565
     566                        observer.observe( iframeDoc.body, {
    554567                            attributes: true,
    555568                            childList: true,
     
    562575                    }
    563576
     577                    function classChange() {
     578                        iframeDoc.body.className = editor.getBody().className;
     579                    }
     580
    564581                    if ( importStyles ) {
    565                         editor.on( 'wp-body-class-change', function() {
    566                             iframeDoc.body.className = editor.getBody().className;
    567                         } );
    568                     }
     582                        editor.on( 'wp-body-class-change', classChange );
     583                    }
     584
     585                    $( node ).one( 'wp-mce-view-unbind', function() {
     586                        observer.disconnect();
     587                        editor.off( 'wp-body-class-change', classChange );
     588                    } );
    569589                }, 50 );
    570590
     
    632652            editor.dom.setAttrib( node, 'data-wpview-text', encodeURIComponent( text ) );
    633653            wp.mce.views.createInstance( this.type, text, this.match( text ).options ).render();
     654        },
     655
     656        /**
     657         * Remove a given view node from the DOM.
     658         *
     659         * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in.
     660         * @param {HTMLElement}    node   The view node to remove.
     661         */
     662        remove: function( editor, node ) {
     663            $( node ).trigger( 'wp-mce-view-unbind' );
     664            editor.dom.remove( node );
    634665        }
    635666    } );
     
    663694                frame.detach();
    664695            } );
     696
     697            frame.open();
    665698        }
    666699    };
  • trunk/src/wp-includes/js/tinymce/plugins/wpview/plugin.js

    r31548 r31559  
    7373
    7474    function removeView( view ) {
    75         // TODO: trigger an event to run a clean up function.
    76         // Maybe `jQuery( view ).trigger( 'remove' );`?
    7775        editor.undoManager.transact( function() {
    7876            handleEnter( view );
    79             editor.dom.remove( view );
     77            wp.mce.views.remove( editor, view );
    8078        });
    8179    }
     
    108106            'class': 'wpview-clipboard',
    109107            'contenteditable': 'true'
    110         }, decodeURIComponent( editor.dom.getAttrib( viewNode, 'data-wpview-text' ) ) );
     108        }, wp.mce.views.getText( viewNode ) );
    111109
    112110        editor.dom.select( '.wpview-body', viewNode )[0].appendChild( clipboard );
Note: See TracChangeset for help on using the changeset viewer.