Changeset 31559

Timestamp:

02/26/2015 07:31:27 PM (10 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:

• mce-view.js (modified) (14 diffs)
• tinymce/plugins/wpview/plugin.js (modified) (2 diffs)

trunk/src/wp-includes/js/mce-view.js

@@ -65 +65 @@
          *
          * @param {String} type The view type.
+         *
+         * @return {Function} The view constructor.
          */
         get: function( type ) {
@@ -143 +145 @@
          * @param {String} text    The textual representation of the view.
          * @param {Object} options Options.
+         *
+         * @return {wp.mce.View} The view instance.
          */
         createInstance: function( type, text, options ) {
@@ -164 +168 @@
          * Get a view instance.
          *
-         * @param {String} text The textual representation of the view.
-         */
-        getInstance: function( text ) {
-            return instances[ encodeURIComponent( text ) ];
+         * @param {(String|HTMLElement)} object The textual representation of the view or the view node.
+         *
+         * @return {wp.mce.View} The view instance or undefined.
+         */
+        getInstance: function( object ) {
+            if ( typeof object === 'string' ) {
+                return instances[ encodeURIComponent( object ) ];
+            }
+
+            return instances[ $( object ).data( 'wpview-text' ) ];
+        },
+
+        /**
+         * Given a view node, get the view's text.
+         *
+         * @param {HTMLElement} node The view node.
+         *
+         * @return {String} The textual representation of the view.
+         */
+        getText: function( node ) {
+            return decodeURIComponent( $( node ).data( 'wpview-text' ) || '' );
         },
 
@@ -189 +210 @@
          */
         update: function( text, editor, node ) {
-            var oldText = decodeURIComponent( $( node ).data( 'wpview-text' ) ),
-                instance = this.getInstance( oldText );
+            var instance = this.getInstance( node );
 
             if ( instance ) {
@@ -204 +224 @@
          */
         edit: function( editor, node ) {
-            var text = decodeURIComponent( $( node ).data( 'wpview-text' ) ),
-                instance = this.getInstance( text );
+            var instance = this.getInstance( node );
 
             if ( instance && instance.edit ) {
-                instance.edit( text, function( text ) {
+                instance.edit( instance.text, function( text ) {
                     instance.update( text, editor, node );
                 } );
+            }
+        },
+
+        /**
+         * Remove a given view node from the DOM.
+         *
+         * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in.
+         * @param {HTMLElement}    node   The view node to remove.
+         */
+        remove: function( editor, node ) {
+            var instance = this.getInstance( node );
+
+            if ( instance ) {
+                instance.remove( editor, node );
             }
         }
@@ -219 +252 @@
      * The main difference is that the TinyMCE View is not tied to a particular DOM node.
      *
-     * @param {Object} Options.
+     * @param {Object} options Options.
      */
     wp.mce.View = function( options ) {
@@ -277 +310 @@
             if ( this.getContent() ) {
                 this.setContent( this.getContent(), function( editor, node ) {
-                    $( node ).data( 'rendered', true );
-                    this.bindNodes.apply( this, arguments );
+                    $( node ).data( 'rendered', true ).trigger( 'wp-mce-view-bind' );
                 }, force ? null : false );
             } else {
@@ -286 +318 @@
 
         /**
-         * Binds a given rendered view node.
-         * Runs after a view node's content is added to the DOM.
-         *
-         * @param {tinymce.Editor} editor      The TinyMCE editor instance the view node is in.
-         * @param {HTMLElement}    node        The view node.
-         * @param {HTMLElement}    contentNode The view's content node.
-         */
-        bindNodes: function( /* editor, node, contentNode */ ) {},
-
-        /**
          * Unbinds all view nodes tied to this view instance.
          * Runs before their content is removed from the DOM.
          */
         unbind: function() {
-            this.getNodes( function() {
-                this.unbindNodes.apply( this, arguments );
+            this.getNodes( function( editor, node ) {
+                $( node ).trigger( 'wp-mce-view-unbind' );
             }, true );
         },
-
-        /**
-         * Unbinds a given view node.
-         * Runs before the view node's content is removed from the DOM.
-         *
-         * @param {tinymce.Editor} editor      The TinyMCE editor instance the view node is in.
-         * @param {HTMLElement}    node        The view node.
-         * @param {HTMLElement}    contentNode The view's content node.
-         */
-        unbindNodes: function( /* editor, node, contentNode */ ) {},
 
         /**
@@ -379 +391 @@
         replaceMarkers: function() {
             this.getMarkers( function( editor, node ) {
-                if ( $( node ).text() !== this.text ) {
+                if ( $( node ).html() !== this.text ) {
                     editor.dom.setAttrib( node, 'data-wpview-marker', null );
                     return;
@@ -456 +468 @@
                     styles = '',
                     bodyClasses = editor.getBody().className || '',
-                    iframe, iframeDoc, i, resize;
+                    iframe, iframeDoc, observer, i, resize;
 
                 content.innerHTML = '';
@@ -548 +560 @@
 
                     if ( MutationObserver ) {
-                        new MutationObserver( _.debounce( function() {
+                        observer = new MutationObserver( _.debounce( function() {
                             resize();
-                        }, 100 ) )
-                        .observe( iframeDoc.body, {
+                        }, 100 ) );
+
+                        observer.observe( iframeDoc.body, {
                             attributes: true,
                             childList: true,
@@ -562 +575 @@
                     }
 
+                    function classChange() {
+                        iframeDoc.body.className = editor.getBody().className;
+                    }
+
                     if ( importStyles ) {
-                        editor.on( 'wp-body-class-change', function() {
-                            iframeDoc.body.className = editor.getBody().className;
-                        } );
-                    }
+                        editor.on( 'wp-body-class-change', classChange );
+                    }
+
+                    $( node ).one( 'wp-mce-view-unbind', function() {
+                        observer.disconnect();
+                        editor.off( 'wp-body-class-change', classChange );
+                    } );
                 }, 50 );
 
@@ -632 +652 @@
             editor.dom.setAttrib( node, 'data-wpview-text', encodeURIComponent( text ) );
             wp.mce.views.createInstance( this.type, text, this.match( text ).options ).render();
+        },
+
+        /**
+         * Remove a given view node from the DOM.
+         *
+         * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in.
+         * @param {HTMLElement}    node   The view node to remove.
+         */
+        remove: function( editor, node ) {
+            $( node ).trigger( 'wp-mce-view-unbind' );
+            editor.dom.remove( node );
         }
     } );
@@ -663 +694 @@
                 frame.detach();
             } );
+
+            frame.open();
         }
     };

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

@@ -73 +73 @@
 
     function removeView( view ) {
-        // TODO: trigger an event to run a clean up function.
-        // Maybe `jQuery( view ).trigger( 'remove' );`?
         editor.undoManager.transact( function() {
             handleEnter( view );
-            editor.dom.remove( view );
+            wp.mce.views.remove( editor, view );
         });
     }
@@ -108 +106 @@
             'class': 'wpview-clipboard',
             'contenteditable': 'true'
-        }, decodeURIComponent( editor.dom.getAttrib( viewNode, 'data-wpview-text' ) ) );
+        }, wp.mce.views.getText( viewNode ) );
 
         editor.dom.select( '.wpview-body', viewNode )[0].appendChild( clipboard );