Changeset 28084

Timestamp:

04/12/2014 12:45:48 AM (10 years ago)

Author:

azaozz

Message:

TinyMCE wpViews:

• Prevent undo steps from being added when the body of a wpview changes.
• Add unbind() to handle cleanup on DOM rebuilding in TinyMCE.
• Ensure that MediaElement's cleanup routine is run on every player in all instances of the editor.
• Initialize the players after some delay to ensure CSS is loaded.

Props gcorne and wonderboymusic, fixes #27389

Location:

trunk/src/wp-includes/js

Files:

• mce-view.js (modified) (6 diffs)
• media-audiovideo.js (modified) (2 diffs)
• tinymce/plugins/wpview/plugin.js (modified) (5 diffs)

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

@@ -42 +42 @@
                     $( doc ).find( '[data-wpview-text="' + this.encodedText + '"]' ).each(function (i, elem) {
                         var node = $( elem );
-                        node.html( html );
+                        // The <ins> is used to mark the end of the wrapper div. Needed when comparing
+                        // the content as string for preventing extra undo levels.
+                        node.html( html ).append( '<ins data-wpview-end="1"></ins>' );
                         $( self ).trigger( 'ready', elem );
                     });
                 }
             }, this );
-        }
+        },
+        unbind: function() {}
     } );
 
@@ -91 +94 @@
         unregister: function( type ) {
             delete views[ type ];
+        },
+
+        /**
+         * wp.mce.views.unbind( editor )
+         *
+         * The editor DOM is being rebuilt, run cleanup.
+         */
+        unbind: function() {
+            _.each( instances, function( instance ) {
+                instance.unbind();
+            } );
         },
 
@@ -340 +354 @@
      */
     wp.mce.media = {
+        loaded: false,
         /**
          * @global wp.shortcode
@@ -411 +426 @@
     wp.mce.media.View = wp.mce.View.extend({
         initialize: function( options ) {
+            this.players = [];
             this.shortcode = options.shortcode;
             _.bindAll( this, 'setPlayer' );
@@ -461 +477 @@
 
             setTimeout( function() {
-                self.player = new MediaElementPlayer( media, this.mejsSettings );
-            }, 75 );
+                wp.mce.media.loaded = true;
+                self.players.push( new MediaElementPlayer( media, self.mejsSettings ) );
+            }, wp.mce.media.loaded ? 10 : 500 );
         },
 
@@ -476 +493 @@
             );
             return this.template({ model: attrs });
+        },
+
+        unbind: function() {
+            var self = this;
+            this.pauseAllPlayers();
+            _.each( this.players, function (player) {
+                self.removePlayer( player );
+            } );
+            this.players = [];
         }
     });

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

@@ -129 +129 @@
          *  its container and re-add it to the DOM.
          */
-        removePlayer: function() {
-            var t = this.player, featureIndex, feature;
+        removePlayer: function(t) {
+            var featureIndex, feature;
 
             // invoke features cleanup
@@ -166 +166 @@
             if ( this.player ) {
                 wp.media.mixin.pauseAllPlayers();
-                wp.media.mixin.removePlayer.apply( this );
+                wp.media.mixin.removePlayer( this.player );
                 this.player = false;
             }

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

@@ -81 +81 @@
         }, getViewText( viewNode ) );
 
-        viewNode.appendChild( clipboard );
+        // Prepend inside the wrapper
+        viewNode.insertBefore( clipboard, viewNode.firstChild );
 
         // Both of the following are necessary to prevent manipulating the selection/focus
-        editor.dom.bind( clipboard, 'beforedeactivate focusin focusout', _stop );
-        editor.dom.bind( selected, 'beforedeactivate focusin focusout', _stop );
+        dom.bind( clipboard, 'beforedeactivate focusin focusout', _stop );
+        dom.bind( selected, 'beforedeactivate focusin focusout', _stop );
 
         // Make sure that the editor is focused.
@@ -141 +142 @@
     }
 
+    // Remove the content of view wrappers from HTML string
+    function emptyViews( content ) {
+        return content.replace(/(<div[^>]+wpview-wrap[^>]+>)[\s\S]+?data-wpview-end[^>]*><\/ins><\/div>/g, '$1</div>' );
+    }
+
+    // Prevent adding undo levels on changes inside a view wrapper
     editor.on( 'BeforeAddUndo', function( event ) {
-        if ( selected && ! toRemove ) {
+        if ( event.lastLevel && emptyViews( event.level.content ) === emptyViews( event.lastLevel.content ) ) {
             event.preventDefault();
         }
@@ -150 +157 @@
     // matching view patterns, and transform the matches into
     // view wrappers.
-    editor.on( 'BeforeSetContent', function( e ) {
-        if ( ! e.content ) {
+    editor.on( 'BeforeSetContent', function( event ) {
+        if ( ! event.content ) {
             return;
         }
 
-        e.content = wp.mce.views.toViews( e.content );
+        if ( ! event.initial ) {
+            wp.mce.views.unbind( editor );
+        }
+
+        event.content = wp.mce.views.toViews( event.content );
     });
 
@@ -163 +174 @@
         var body, padNode;
 
-        // don't (re-)render views if the format of the content is raw
-        // to avoid adding additional undo levels on undo/redo
-        if ( event.format !== 'raw' ) {
-            wp.mce.views.render();
-        }
+        wp.mce.views.render();
 
         // Add padding <p> if the noneditable node is last
@@ -176 +183 @@
                 padNode = createPadNode();
                 body.appendChild( padNode );
-                editor.selection.setCursorLocation( padNode, 0 );
+
+                if ( ! event.initial ) {
+                    editor.selection.setCursorLocation( padNode, 0 );
+                }
             }
         }