WordPress.org

Make WordPress Core

Changeset 28084


Ignore:
Timestamp:
04/12/2014 12:45:48 AM (5 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:
3 edited

Legend:

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

    r28008 r28084  
    4242                    $( doc ).find( '[data-wpview-text="' + this.encodedText + '"]' ).each(function (i, elem) {
    4343                        var node = $( elem );
    44                         node.html( html );
     44                        // The <ins> is used to mark the end of the wrapper div. Needed when comparing
     45                        // the content as string for preventing extra undo levels.
     46                        node.html( html ).append( '<ins data-wpview-end="1"></ins>' );
    4547                        $( self ).trigger( 'ready', elem );
    4648                    });
    4749                }
    4850            }, this );
    49         }
     51        },
     52        unbind: function() {}
    5053    } );
    5154
     
    9194        unregister: function( type ) {
    9295            delete views[ type ];
     96        },
     97
     98        /**
     99         * wp.mce.views.unbind( editor )
     100         *
     101         * The editor DOM is being rebuilt, run cleanup.
     102         */
     103        unbind: function() {
     104            _.each( instances, function( instance ) {
     105                instance.unbind();
     106            } );
    93107        },
    94108
     
    340354     */
    341355    wp.mce.media = {
     356        loaded: false,
    342357        /**
    343358         * @global wp.shortcode
     
    411426    wp.mce.media.View = wp.mce.View.extend({
    412427        initialize: function( options ) {
     428            this.players = [];
    413429            this.shortcode = options.shortcode;
    414430            _.bindAll( this, 'setPlayer' );
     
    461477
    462478            setTimeout( function() {
    463                 self.player = new MediaElementPlayer( media, this.mejsSettings );
    464             }, 75 );
     479                wp.mce.media.loaded = true;
     480                self.players.push( new MediaElementPlayer( media, self.mejsSettings ) );
     481            }, wp.mce.media.loaded ? 10 : 500 );
    465482        },
    466483
     
    476493            );
    477494            return this.template({ model: attrs });
     495        },
     496
     497        unbind: function() {
     498            var self = this;
     499            this.pauseAllPlayers();
     500            _.each( this.players, function (player) {
     501                self.removePlayer( player );
     502            } );
     503            this.players = [];
    478504        }
    479505    });
  • trunk/src/wp-includes/js/media-audiovideo.js

    r27979 r28084  
    129129         *  its container and re-add it to the DOM.
    130130         */
    131         removePlayer: function() {
    132             var t = this.player, featureIndex, feature;
     131        removePlayer: function(t) {
     132            var featureIndex, feature;
    133133
    134134            // invoke features cleanup
     
    166166            if ( this.player ) {
    167167                wp.media.mixin.pauseAllPlayers();
    168                 wp.media.mixin.removePlayer.apply( this );
     168                wp.media.mixin.removePlayer( this.player );
    169169                this.player = false;
    170170            }
  • trunk/src/wp-includes/js/tinymce/plugins/wpview/plugin.js

    r28063 r28084  
    8181        }, getViewText( viewNode ) );
    8282
    83         viewNode.appendChild( clipboard );
     83        // Prepend inside the wrapper
     84        viewNode.insertBefore( clipboard, viewNode.firstChild );
    8485
    8586        // Both of the following are necessary to prevent manipulating the selection/focus
    86         editor.dom.bind( clipboard, 'beforedeactivate focusin focusout', _stop );
    87         editor.dom.bind( selected, 'beforedeactivate focusin focusout', _stop );
     87        dom.bind( clipboard, 'beforedeactivate focusin focusout', _stop );
     88        dom.bind( selected, 'beforedeactivate focusin focusout', _stop );
    8889
    8990        // Make sure that the editor is focused.
     
    141142    }
    142143
     144    // Remove the content of view wrappers from HTML string
     145    function emptyViews( content ) {
     146        return content.replace(/(<div[^>]+wpview-wrap[^>]+>)[\s\S]+?data-wpview-end[^>]*><\/ins><\/div>/g, '$1</div>' );
     147    }
     148
     149    // Prevent adding undo levels on changes inside a view wrapper
    143150    editor.on( 'BeforeAddUndo', function( event ) {
    144         if ( selected && ! toRemove ) {
     151        if ( event.lastLevel && emptyViews( event.level.content ) === emptyViews( event.lastLevel.content ) ) {
    145152            event.preventDefault();
    146153        }
     
    150157    // matching view patterns, and transform the matches into
    151158    // view wrappers.
    152     editor.on( 'BeforeSetContent', function( e ) {
    153         if ( ! e.content ) {
     159    editor.on( 'BeforeSetContent', function( event ) {
     160        if ( ! event.content ) {
    154161            return;
    155162        }
    156163
    157         e.content = wp.mce.views.toViews( e.content );
     164        if ( ! event.initial ) {
     165            wp.mce.views.unbind( editor );
     166        }
     167
     168        event.content = wp.mce.views.toViews( event.content );
    158169    });
    159170
     
    163174        var body, padNode;
    164175
    165         // don't (re-)render views if the format of the content is raw
    166         // to avoid adding additional undo levels on undo/redo
    167         if ( event.format !== 'raw' ) {
    168             wp.mce.views.render();
    169         }
     176        wp.mce.views.render();
    170177
    171178        // Add padding <p> if the noneditable node is last
     
    176183                padNode = createPadNode();
    177184                body.appendChild( padNode );
    178                 editor.selection.setCursorLocation( padNode, 0 );
     185
     186                if ( ! event.initial ) {
     187                    editor.selection.setCursorLocation( padNode, 0 );
     188                }
    179189            }
    180190        }
Note: See TracChangeset for help on using the changeset viewer.