WordPress.org

Make WordPress Core

Changeset 29198


Ignore:
Timestamp:
07/16/2014 10:09:13 PM (6 years ago)
Author:
wonderboymusic
Message:

Make sure that the ready event only fires once for relevant MCE views that are sandbox'd in iframes. Move some editor callbacks to initialize.

Props avryl.
See #28905.

File:
1 edited

Legend:

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

    r29193 r29198  
    4848        },
    4949        render: function() {
    50             var html = this.getHtml() || this.loadingPlaceholder();
    51 
    5250            this.setContent(
    5351                '<p class="wpview-selection-before">\u00a0</p>' +
     
    5856                    '</div>' +
    5957                    '<div class="wpview-content wpview-type-' + this.type + '">' +
    60                         html +
     58                        ( this.getHtml() || this.loadingPlaceholder() ) +
    6159                    '</div>' +
    6260                    ( this.overlay ? '<div class="wpview-overlay"></div>' : '' ) +
    6361                '</div>' +
    6462                '<p class="wpview-selection-after">\u00a0</p>',
    65                 function( self, editor, node ) {
    66                     $( self ).trigger( 'ready', [ editor, node ] );
    67                 },
    6863                'wrap'
    6964            );
     65
     66            $( this ).trigger( 'ready' );
    7067        },
    7168        unbind: function() {},
    72         getNodes: function( callback ) {
    73             var nodes = [];
     69        getEditors: function( callback ) {
     70            var editors = [];
    7471
    7572            _.each( tinymce.editors, function( editor ) {
    7673                if ( editor.plugins.wpview ) {
    77                     $( editor.getBody() )
    78                     .find( '[data-wpview-text="' + this.encodedText + '"]' )
    79                     .each( function ( i, node ) {
    80                         if ( callback ) {
    81                             callback( editor, node );
    82                         }
    83 
    84                         nodes.push( node );
    85                     } );
     74                    if ( callback ) {
     75                        callback( editor );
     76                    }
     77
     78                    editors.push( editor );
    8679                }
    8780            }, this );
    8881
     82            return editors;
     83        },
     84        getNodes: function( callback ) {
     85            var nodes = [],
     86                self = this;
     87
     88            this.getEditors( function( editor ) {
     89                $( editor.getBody() )
     90                .find( '[data-wpview-text="' + self.encodedText + '"]' )
     91                .each( function ( i, node ) {
     92                    if ( callback ) {
     93                        callback( editor, node, $( node ).find( '.wpview-content' ).get( 0 ) );
     94                    }
     95
     96                    nodes.push( node );
     97                } );
     98            } );
     99
    89100            return nodes;
    90101        },
    91         setContent: function( html, callback, option ) {
    92             var self = this;
    93 
    94             this.getNodes( function ( editor, element ) {
    95                 var contentWrap = $( element ).find( '.wpview-content' ),
    96                     wrap = element;
    97 
    98                 if ( contentWrap.length && option !== 'wrap' ) {
    99                     element = contentWrap = contentWrap[0];
    100                 }
    101 
    102                 if ( _.isString( html ) ) {
    103                     if ( option === 'replace' ) {
    104                         element = editor.dom.replace( editor.dom.createFragment( html ), wrap );
    105                     } else {
    106                         editor.dom.setHTML( element, html );
    107                     }
     102        setContent: function( html, option ) {
     103            this.getNodes( function ( editor, node, content ) {
     104                var el = ( option === 'wrap' || option === 'replace' ) ? node : content,
     105                    insert = html;
     106
     107                if ( _.isString( insert ) ) {
     108                    insert = editor.dom.createFragment( insert );
     109                }
     110
     111                if ( option === 'replace' ) {
     112                    editor.dom.replace( insert, el );
    108113                } else {
    109                     if ( option === 'replace' ) {
    110                         element = editor.dom.replace( html, wrap );
    111                     } else {
    112                         $( element ).empty().append( html );
    113                     }
    114                 }
    115 
    116                 if ( _.isFunction( callback ) ) {
    117                     callback( self, editor, $( element ).find( '.wpview-content' )[0] );
     114                    el.innerHTML = '';
     115                    el.appendChild( insert );
    118116                }
    119117            } );
    120118        },
    121 
    122119        /* jshint scripturl: true */
    123         createIframe: function ( content ) {
     120        setIframes: function ( html ) {
    124121            var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    125122
    126             if ( content.indexOf( '<script' ) !== -1 ) {
    127                 this.getNodes( function ( editor, node ) {
     123            if ( html.indexOf( '<script' ) !== -1 ) {
     124                this.getNodes( function ( editor, node, content ) {
    128125                    var dom = editor.dom,
    129126                        iframe, iframeDoc, i, resize;
    130127
    131                     node = $( node ).find( '.wpview-content' )[0];
    132                     if ( ! node ) {
    133                         return;
    134                     }
    135                     node.innerHTML = '';
    136 
    137                     iframe = dom.add( node, 'iframe', {
     128                    content.innerHTML = '';
     129
     130                    iframe = dom.add( content, 'iframe', {
    138131                        src: tinymce.Env.ie ? 'javascript:""' : '',
    139132                        frameBorder: '0',
     
    156149                            '</head>' +
    157150                            '<body data-context="iframe-sandbox" style="padding: 0; margin: 0;" class="' + editor.getBody().className + '">' +
    158                                 content +
     151                                html +
    159152                            '</body>' +
    160153                        '</html>'
     
    183176                });
    184177            } else {
    185                 this.setContent( content );
    186             }
    187         },
    188 
     178                this.setContent( html );
     179            }
     180        },
    189181        setError: function( message, dashicon ) {
    190182            this.setContent(
     
    508500
    509501            initialize: function( options ) {
     502                var self = this;
     503
    510504                this.shortcode = options.shortcode;
    511                 this.fetching = false;
    512 
    513                 _.bindAll( this, 'createIframe', 'setNode', 'fetch', 'pausePlayers' );
    514                 $( this ).on( 'ready', this.setNode );
     505
     506                _.bindAll( this, 'setIframes', 'setNodes', 'fetch', 'pausePlayers' );
     507                $( this ).on( 'ready', this.setNodes );
    515508
    516509                $( document ).on( 'media:edit', this.pausePlayers );
     510
     511                this.fetch();
     512
     513                this.getEditors( function( editor ) {
     514                    editor.on( 'hide', self.pausePlayers );
     515                });
    517516            },
    518517
    519             setNode: function ( event, editor ) {
    520                 editor.on( 'hide', this.pausePlayers );
    521 
     518            setNodes: function () {
    522519                if ( this.parsed ) {
    523                     this.createIframe( this.parsed );
    524                 } else if ( ! this.fetching ) {
    525                     this.fetch();
     520                    this.setIframes( this.parsed );
    526521                }
    527522            },
     
    529524            fetch: function () {
    530525                var self = this;
    531                 this.fetching = true;
    532526
    533527                wp.ajax.send( this.action, {
     
    538532                    }
    539533                } )
    540                 .always( function() {
    541                     self.fetching = false;
    542                 } )
    543534                .done( function( response ) {
    544535                    if ( response ) {
    545536                        self.parsed = response;
    546                         self.createIframe( response );
     537                        self.setIframes( response );
    547538                    }
    548539                } )
     
    554545                            self.setError( response.message, 'admin-media' );
    555546                        } else {
    556                             self.setContent( '<p>' + self.original + '</p>', null, 'replace' );
     547                            self.setContent( '<p>' + self.original + '</p>', 'replace' );
    557548                        }
    558549                    } else if ( response && response.statusText ) {
     
    562553            },
    563554
    564             /**
    565              * Return parsed response
    566              *
    567              * @returns {string}
    568              */
    569             getHtml: function() {
    570                 if ( ! this.parsed ) {
    571                     return ' ';
    572                 }
    573                 return this.parsed;
    574             },
    575 
    576555            pausePlayers: function() {
    577                 this.getNodes( function( editor, node ) {
    578                     var p, win = $( 'iframe', node ).get(0).contentWindow;
     556                this.getNodes( function( editor, node, content ) {
     557                    var p, win = $( 'iframe', content ).get(0).contentWindow;
    579558
    580559                    if ( win && win.mejs ) {
     
    587566
    588567            unsetPlayers: function() {
    589                 this.getNodes( function( editor, node ) {
    590                     var p, win = $( 'iframe', node ).get(0).contentWindow;
     568                this.getNodes( function( editor, node, content ) {
     569                    var p, win = $( 'iframe', content ).get(0).contentWindow;
    591570
    592571                    if ( win && win.mejs ) {
     
    680659            initialize: function( options ) {
    681660                this.content = options.content;
    682                 this.fetching = false;
    683                 this.parsed = false;
    684661                this.original = options.url || options.shortcode.string();
    685662
     
    692669                }
    693670
    694                 _.bindAll( this, 'createIframe', 'setNode', 'fetch' );
    695                 $( this ).on( 'ready', this.setNode );
    696             },
    697 
    698             /**
    699              * Return parsed response
    700              *
    701              * @returns {string}
    702              */
    703             getHtml: function() {
    704                 if ( ! this.parsed ) {
    705                     return '';
    706                 }
    707                 return this.parsed;
     671                _.bindAll( this, 'setIframes', 'setNodes', 'fetch' );
     672                $( this ).on( 'ready', this.setNodes );
     673
     674                this.fetch();
    708675            }
    709676        } ),
Note: See TracChangeset for help on using the changeset viewer.