Changeset 22692

Timestamp:

11/20/2012 12:53:02 AM (12 years ago)

Author:

koopersmith

Message:

Media: Detect when views are added to the DOM and fire a ready event. see #21390.

File:

• trunk/wp-includes/js/media-views.js (modified) (14 diffs)

trunk/wp-includes/js/media-views.js

@@ -633 +633 @@
         // `options.at`. By default, `views` are added to the end of the array.
         set: function( selector, views, options ) {
-            var $selector, els, existing, method;
+            var existing, next;
 
             if ( ! _.isString( selector ) ) {
@@ -645 +645 @@
             existing = this.get( selector );
             next     = views;
-            method   = options.add ? 'insert' : 'replace';
 
             if ( existing ) {
@@ -673 +672 @@
             this._views[ selector ] = next;
 
-            $selector = selector ? this.view.$( selector ) : this.view.$el;
-            els = _.pluck( views, 'el' );
-
             _.each( views, function( subview ) {
                 var constructor = subview.Views || media.Views,
@@ -683 +679 @@
             }, this );
 
-            if ( ! options.silent ) {
-                _.each( views, this._maybeRender, this );
-                this[ method ]( $selector, els, options );
-            }
+            if ( ! options.silent )
+                this._attach( selector, views, _.extend({ ready: this._isReady() }, options ) );
 
             return this;
@@ -756 +750 @@
         // Renders all subviews. Used in conjunction with `Views.detach()`.
         render: function() {
-            var root = this._views[''];
-
-            _.each( this.all(), this._maybeRender, this );
-
-            if ( root )
-                this.replace( this.view.$el, _.pluck( root, 'el' ) );
+            var options = {
+                    ready: this._isReady()
+                };
 
             _.each( this._views, function( views, selector ) {
-                if ( selector )
-                    this.replace( this.view.$( selector ), _.pluck( views, 'el' ) );
+                this._attach( selector, views, options );
             }, this );
 
@@ -821 +811 @@
         },
 
-
-        // #### Internal. Maybe render a view.
-        _maybeRender: function( view ) {
-            if ( ! view.views || view.views.rendered )
-                return;
-
-            view.render();
-            view.views.rendered = true;
+        // ### Trigger the ready event
+        //
+        // **Only use this method if you know what you're doing.**
+        // For performance reasons, this method does not check if the view is
+        // actually attached to the DOM. It's taking your word for it.
+        //
+        // Fires the ready event on the current view and all attached subviews.
+        ready: function() {
+            this.view.trigger('ready');
+
+            // Find all attached subviews, and call ready on them.
+            _.chain( this.all() ).map( function( view ) {
+                return view.views;
+            }).flatten().where({ attached: true }).invoke('ready');
+        },
+
+        // #### Internal. Attaches a series of views to a selector.
+        //
+        // Checks to see if a matching selector exists, renders the views,
+        // performs the proper DOM operation, and then checks if the view is
+        // attached to the document.
+        _attach: function( selector, views, options ) {
+            var $selector = selector ? this.view.$( selector ) : this.view.$el,
+                managers;
+
+            // Check if we found a location to attach the views.
+            if ( ! $selector.length )
+                return this;
+
+            managers = _.chain( views ).pluck('views').flatten().value();
+
+            // Render the views if necessary.
+            _.each( managers, function( manager ) {
+                if ( manager.rendered )
+                    return;
+
+                manager.view.render();
+                manager.rendered = true;
+            }, this );
+
+            // Insert or replace the views.
+            this[ options.add ? 'insert' : 'replace' ]( $selector, _.pluck( views, 'el' ), options );
+
+            // Set attached and trigger ready if the current view is already
+            // attached to the DOM.
+            _.each( managers, function( manager ) {
+                manager.attached = true;
+
+                if ( options.ready )
+                    manager.ready();
+            }, this );
+
+            return this;
+        },
+
+        // #### Internal. Checks if the current view is in the DOM.
+        _isReady: function() {
+            var node = this.view.el;
+            while ( node ) {
+                if ( node === document.body )
+                    return true;
+                node = node.parentNode;
+            }
+
+            return false;
         }
     });
@@ -842 +889 @@
         constructor: function() {
             this.views = new this.Views( this, this.views );
+            this.on( 'ready', this.ready, this );
             Backbone.View.apply( this, arguments );
         },
@@ -886 +934 @@
         prepare: function() {
             return this.options;
-        }
+        },
+
+        ready: function() {}
     });
 
@@ -968 +1018 @@
                 });
             }
+
+            this.on( 'attach', _.bind( this.views.ready, this.views ), this );
         },
 
@@ -1061 +1113 @@
     _.each(['open','close','attach','detach'], function( method ) {
         media.view.MediaFrame.prototype[ method ] = function( view ) {
-            this.trigger( method );
             if ( this.modal )
                 this.modal[ method ].apply( this.modal, arguments );
+            this.trigger( method );
             return this;
         };
@@ -1593 +1645 @@
         attach: function() {
             this.$el.appendTo( this.options.container );
-            this.controller.trigger( 'attach', this.controller );
+            this.trigger('attach');
             return this;
         },
@@ -1599 +1651 @@
         detach: function() {
             this.$el.detach();
-            this.controller.trigger( 'detach', this.controller );
+            this.trigger('detach');
             return this;
         },
@@ -1605 +1657 @@
         open: function() {
             this.$el.show();
-            this.controller.trigger( 'open', this.controller );
+            this.trigger('open');
             return this;
         },
@@ -1611 +1663 @@
         close: function() {
             this.$el.hide();
-            this.controller.trigger( 'close', this.controller );
+            this.trigger('close');
             return this;
         },