Changeset 29198

Timestamp:

07/16/2014 10:09:13 PM (10 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:

• trunk/src/wp-includes/js/mce-view.js (modified) (12 diffs)

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

@@ -48 +48 @@
         },
         render: function() {
-            var html = this.getHtml() || this.loadingPlaceholder();
-
             this.setContent(
                 '<p class="wpview-selection-before">\u00a0</p>' +
@@ -58 +56 @@
                     '</div>' +
                     '<div class="wpview-content wpview-type-' + this.type + '">' +
-                        html +
+                        ( this.getHtml() || this.loadingPlaceholder() ) +
                     '</div>' +
                     ( this.overlay ? '<div class="wpview-overlay"></div>' : '' ) +
                 '</div>' +
                 '<p class="wpview-selection-after">\u00a0</p>',
-                function( self, editor, node ) {
-                    $( self ).trigger( 'ready', [ editor, node ] );
-                },
                 'wrap'
             );
+
+            $( this ).trigger( 'ready' );
         },
         unbind: function() {},
-        getNodes: function( callback ) {
-            var nodes = [];
+        getEditors: function( callback ) {
+            var editors = [];
 
             _.each( tinymce.editors, function( editor ) {
                 if ( editor.plugins.wpview ) {
-                    $( editor.getBody() )
-                    .find( '[data-wpview-text="' + this.encodedText + '"]' )
-                    .each( function ( i, node ) {
-                        if ( callback ) {
-                            callback( editor, node );
-                        }
-
-                        nodes.push( node );
-                    } );
+                    if ( callback ) {
+                        callback( editor );
+                    }
+
+                    editors.push( editor );
                 }
             }, this );
 
+            return editors;
+        },
+        getNodes: function( callback ) {
+            var nodes = [],
+                self = this;
+
+            this.getEditors( function( editor ) {
+                $( editor.getBody() )
+                .find( '[data-wpview-text="' + self.encodedText + '"]' )
+                .each( function ( i, node ) {
+                    if ( callback ) {
+                        callback( editor, node, $( node ).find( '.wpview-content' ).get( 0 ) );
+                    }
+
+                    nodes.push( node );
+                } );
+            } );
+
             return nodes;
         },
-        setContent: function( html, callback, option ) {
-            var self = this;
-
-            this.getNodes( function ( editor, element ) {
-                var contentWrap = $( element ).find( '.wpview-content' ),
-                    wrap = element;
-
-                if ( contentWrap.length && option !== 'wrap' ) {
-                    element = contentWrap = contentWrap[0];
-                }
-
-                if ( _.isString( html ) ) {
-                    if ( option === 'replace' ) {
-                        element = editor.dom.replace( editor.dom.createFragment( html ), wrap );
-                    } else {
-                        editor.dom.setHTML( element, html );
-                    }
+        setContent: function( html, option ) {
+            this.getNodes( function ( editor, node, content ) {
+                var el = ( option === 'wrap' || option === 'replace' ) ? node : content,
+                    insert = html;
+
+                if ( _.isString( insert ) ) {
+                    insert = editor.dom.createFragment( insert );
+                }
+
+                if ( option === 'replace' ) {
+                    editor.dom.replace( insert, el );
                 } else {
-                    if ( option === 'replace' ) {
-                        element = editor.dom.replace( html, wrap );
-                    } else {
-                        $( element ).empty().append( html );
-                    }
-                }
-
-                if ( _.isFunction( callback ) ) {
-                    callback( self, editor, $( element ).find( '.wpview-content' )[0] );
+                    el.innerHTML = '';
+                    el.appendChild( insert );
                 }
             } );
         },
-
         /* jshint scripturl: true */
-        createIframe: function ( content ) {
+        setIframes: function ( html ) {
             var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
 
-            if ( content.indexOf( '<script' ) !== -1 ) {
-                this.getNodes( function ( editor, node ) {
+            if ( html.indexOf( '<script' ) !== -1 ) {
+                this.getNodes( function ( editor, node, content ) {
                     var dom = editor.dom,
                         iframe, iframeDoc, i, resize;
 
-                    node = $( node ).find( '.wpview-content' )[0];
-                    if ( ! node ) {
-                        return;
-                    }
-                    node.innerHTML = '';
-
-                    iframe = dom.add( node, 'iframe', {
+                    content.innerHTML = '';
+
+                    iframe = dom.add( content, 'iframe', {
                         src: tinymce.Env.ie ? 'javascript:""' : '',
                         frameBorder: '0',
@@ -156 +149 @@
                             '</head>' +
                             '<body data-context="iframe-sandbox" style="padding: 0; margin: 0;" class="' + editor.getBody().className + '">' +
-                                content +
+                                html +
                             '</body>' +
                         '</html>'
@@ -183 +176 @@
                 });
             } else {
-                this.setContent( content );
-            }
-        },
-
+                this.setContent( html );
+            }
+        },
         setError: function( message, dashicon ) {
             this.setContent(
@@ -508 +500 @@
 
             initialize: function( options ) {
+                var self = this;
+
                 this.shortcode = options.shortcode;
-                this.fetching = false;
-
-                _.bindAll( this, 'createIframe', 'setNode', 'fetch', 'pausePlayers' );
-                $( this ).on( 'ready', this.setNode );
+
+                _.bindAll( this, 'setIframes', 'setNodes', 'fetch', 'pausePlayers' );
+                $( this ).on( 'ready', this.setNodes );
 
                 $( document ).on( 'media:edit', this.pausePlayers );
+
+                this.fetch();
+
+                this.getEditors( function( editor ) {
+                    editor.on( 'hide', self.pausePlayers );
+                });
             },
 
-            setNode: function ( event, editor ) {
-                editor.on( 'hide', this.pausePlayers );
-
+            setNodes: function () {
                 if ( this.parsed ) {
-                    this.createIframe( this.parsed );
-                } else if ( ! this.fetching ) {
-                    this.fetch();
+                    this.setIframes( this.parsed );
                 }
             },
@@ -529 +524 @@
             fetch: function () {
                 var self = this;
-                this.fetching = true;
 
                 wp.ajax.send( this.action, {
@@ -538 +532 @@
                     }
                 } )
-                .always( function() {
-                    self.fetching = false;
-                } )
                 .done( function( response ) {
                     if ( response ) {
                         self.parsed = response;
-                        self.createIframe( response );
+                        self.setIframes( response );
                     }
                 } )
@@ -554 +545 @@
                             self.setError( response.message, 'admin-media' );
                         } else {
-                            self.setContent( '<p>' + self.original + '</p>', null, 'replace' );
+                            self.setContent( '<p>' + self.original + '</p>', 'replace' );
                         }
                     } else if ( response && response.statusText ) {
@@ -562 +553 @@
             },
 
-            /**
-             * Return parsed response
-             *
-             * @returns {string}
-             */
-            getHtml: function() {
-                if ( ! this.parsed ) {
-                    return ' ';
-                }
-                return this.parsed;
-            },
-
             pausePlayers: function() {
-                this.getNodes( function( editor, node ) {
-                    var p, win = $( 'iframe', node ).get(0).contentWindow;
+                this.getNodes( function( editor, node, content ) {
+                    var p, win = $( 'iframe', content ).get(0).contentWindow;
 
                     if ( win && win.mejs ) {
@@ -587 +566 @@
 
             unsetPlayers: function() {
-                this.getNodes( function( editor, node ) {
-                    var p, win = $( 'iframe', node ).get(0).contentWindow;
+                this.getNodes( function( editor, node, content ) {
+                    var p, win = $( 'iframe', content ).get(0).contentWindow;
 
                     if ( win && win.mejs ) {
@@ -680 +659 @@
             initialize: function( options ) {
                 this.content = options.content;
-                this.fetching = false;
-                this.parsed = false;
                 this.original = options.url || options.shortcode.string();
 
@@ -692 +669 @@
                 }
 
-                _.bindAll( this, 'createIframe', 'setNode', 'fetch' );
-                $( this ).on( 'ready', this.setNode );
-            },
-
-            /**
-             * Return parsed response
-             *
-             * @returns {string}
-             */
-            getHtml: function() {
-                if ( ! this.parsed ) {
-                    return '';
-                }
-                return this.parsed;
+                _.bindAll( this, 'setIframes', 'setNodes', 'fetch' );
+                $( this ).on( 'ready', this.setNodes );
+
+                this.fetch();
             }
         } ),