Changeset 22692

Timestamp:

11/20/2012 12:53:02 AM (14 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;
                 },