From 56a6cac328eabd51f3048d297b215d78e1453f6e Mon Sep 17 00:00:00 2001 From: Daryl Koopersmith Date: Sat, 25 May 2013 21:03:04 +0000 Subject: [PATCH] Extract the base views from media. See #24424. git-svn-id: http://core.svn.wordpress.org/trunk@24360 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/js/media-views.js | 394 +-------------------------------- wp-includes/js/wp-backbone.js | 398 ++++++++++++++++++++++++++++++++++ 2 files changed, 399 insertions(+), 393 deletions(-) diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js index 584fbc3c28..570527ec65 100644 --- a/wp-includes/js/media-views.js +++ b/wp-includes/js/media-views.js @@ -843,403 +843,11 @@ * ======================================================================== */ - // wp.media.Views - // ------------- - // - // A subview manager. - - media.Views = function( view, views ) { - this.view = view; - this._views = _.isArray( views ) ? { '': views } : views || {}; - }; - - media.Views.extend = Backbone.Model.extend; - - _.extend( media.Views.prototype, { - // ### Fetch all of the subviews - // - // Returns an array of all subviews. - all: function() { - return _.flatten( this._views ); - }, - - // ### Get a selector's subviews - // - // Fetches all subviews that match a given `selector`. - // - // If no `selector` is provided, it will grab all subviews attached - // to the view's root. - get: function( selector ) { - selector = selector || ''; - return this._views[ selector ]; - }, - - // ### Get a selector's first subview - // - // Fetches the first subview that matches a given `selector`. - // - // If no `selector` is provided, it will grab the first subview - // attached to the view's root. - // - // Useful when a selector only has one subview at a time. - first: function( selector ) { - var views = this.get( selector ); - return views && views.length ? views[0] : null; - }, - - // ### Register subview(s) - // - // Registers any number of `views` to a `selector`. - // - // When no `selector` is provided, the root selector (the empty string) - // is used. `views` accepts a `Backbone.View` instance or an array of - // `Backbone.View` instances. - // - // --- - // - // Accepts an `options` object, which has a significant effect on the - // resulting behavior. - // - // `options.silent` – *boolean, `false`* - // > If `options.silent` is true, no DOM modifications will be made. - // - // `options.add` – *boolean, `false`* - // > Use `Views.add()` as a shortcut for setting `options.add` to true. - // - // > By default, the provided `views` will replace - // any existing views associated with the selector. If `options.add` - // is true, the provided `views` will be added to the existing views. - // - // `options.at` – *integer, `undefined`* - // > When adding, to insert `views` at a specific index, use - // `options.at`. By default, `views` are added to the end of the array. - set: function( selector, views, options ) { - var existing, next; - - if ( ! _.isString( selector ) ) { - options = views; - views = selector; - selector = ''; - } - - options = options || {}; - views = _.isArray( views ) ? views : [ views ]; - existing = this.get( selector ); - next = views; - - if ( existing ) { - if ( options.add ) { - if ( _.isUndefined( options.at ) ) { - next = existing.concat( views ); - } else { - next = existing; - next.splice.apply( next, [ options.at, 0 ].concat( views ) ); - } - } else { - _.each( next, function( view ) { - view.__detach = true; - }); - - _.each( existing, function( view ) { - if ( view.__detach ) - view.$el.detach(); - else - view.dispose(); - }); - - _.each( next, function( view ) { - delete view.__detach; - }); - } - } - - this._views[ selector ] = next; - - _.each( views, function( subview ) { - var constructor = subview.Views || media.Views, - subviews = subview.views = subview.views || new constructor( subview ); - subviews.parent = this.view; - subviews.selector = selector; - }, this ); - - if ( ! options.silent ) - this._attach( selector, views, _.extend({ ready: this._isReady() }, options ) ); - - return this; - }, - - // ### Add subview(s) to existing subviews - // - // An alias to `Views.set()`, which defaults `options.add` to true. - // - // Adds any number of `views` to a `selector`. - // - // When no `selector` is provided, the root selector (the empty string) - // is used. `views` accepts a `Backbone.View` instance or an array of - // `Backbone.View` instances. - // - // Use `Views.set()` when setting `options.add` to `false`. - // - // Accepts an `options` object. By default, provided `views` will be - // inserted at the end of the array of existing views. To insert - // `views` at a specific index, use `options.at`. If `options.silent` - // is true, no DOM modifications will be made. - // - // For more information on the `options` object, see `Views.set()`. - add: function( selector, views, options ) { - if ( ! _.isString( selector ) ) { - options = views; - views = selector; - selector = ''; - } - - return this.set( selector, views, _.extend({ add: true }, options ) ); - }, - - // ### Stop tracking subviews - // - // Stops tracking `views` registered to a `selector`. If no `views` are - // set, then all of the `selector`'s subviews will be unregistered and - // disposed. - // - // Accepts an `options` object. If `options.silent` is set, `dispose` - // will *not* be triggered on the unregistered views. - unset: function( selector, views, options ) { - var existing; - - if ( ! _.isString( selector ) ) { - options = views; - views = selector; - selector = ''; - } - - views = views || []; - - if ( existing = this.get( selector ) ) { - views = _.isArray( views ) ? views : [ views ]; - this._views[ selector ] = views.length ? _.difference( existing, views ) : []; - } - - if ( ! options || ! options.silent ) - _.invoke( views, 'dispose' ); - - return this; - }, - - // ### Detach all subviews - // - // Detaches all subviews from the DOM. - // - // Helps to preserve all subview events when re-rendering the master - // view. Used in conjunction with `Views.render()`. - detach: function() { - $( _.pluck( this.all(), 'el' ) ).detach(); - return this; - }, - - // ### Render all subviews - // - // Renders all subviews. Used in conjunction with `Views.detach()`. - render: function() { - var options = { - ready: this._isReady() - }; - - _.each( this._views, function( views, selector ) { - this._attach( selector, views, options ); - }, this ); - - this.rendered = true; - return this; - }, - - // ### Dispose all subviews - // - // Triggers the `dispose()` method on all subviews. Detaches the master - // view from its parent. Resets the internals of the views manager. - // - // Accepts an `options` object. If `options.silent` is set, `unset` - // will *not* be triggered on the master view's parent. - dispose: function( options ) { - if ( ! options || ! options.silent ) { - if ( this.parent && this.parent.views ) - this.parent.views.unset( this.selector, this.view, { silent: true }); - delete this.parent; - delete this.selector; - } - - _.invoke( this.all(), 'dispose' ); - this._views = []; - return this; - }, - - // ### Replace a selector's subviews - // - // By default, sets the `$target` selector's html to the subview `els`. - // - // Can be overridden in subclasses. - replace: function( $target, els ) { - $target.html( els ); - return this; - }, - - // ### Insert subviews into a selector - // - // By default, appends the subview `els` to the end of the `$target` - // selector. If `options.at` is set, inserts the subview `els` at the - // provided index. - // - // Can be overridden in subclasses. - insert: function( $target, els, options ) { - var at = options && options.at, - $children; - - if ( _.isNumber( at ) && ($children = $target.children()).length > at ) - $children.eq( at ).before( els ); - else - $target.append( els ); - - return this; - }, - - // ### 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; - } - }); - // wp.media.View // ------------- // // The base view class. - media.View = Backbone.View.extend({ - // The constructor for the `Views` manager. - Views: media.Views, - - constructor: function( options ) { - this.views = new this.Views( this, this.views ); - this.on( 'ready', this.ready, this ); - - if ( options && options.controller ) - this.controller = options.controller; - - Backbone.View.apply( this, arguments ); - }, - - dispose: function() { - // Undelegating events, removing events from the model, and - // removing events from the controller mirror the code for - // `Backbone.View.dispose` in Backbone master. - this.undelegateEvents(); - - if ( this.model && this.model.off ) - this.model.off( null, null, this ); - - if ( this.collection && this.collection.off ) - this.collection.off( null, null, this ); - - // Unbind controller events. - if ( this.controller && this.controller.off ) - this.controller.off( null, null, this ); - - // Recursively dispose child views. - if ( this.views ) - this.views.dispose(); - - return this; - }, - - remove: function() { - this.dispose(); - return Backbone.View.prototype.remove.apply( this, arguments ); - }, - - render: function() { - var options; - - if ( this.prepare ) - options = this.prepare(); - - this.views.detach(); - - if ( this.template ) { - options = options || {}; - this.trigger( 'prepare', options ); - this.$el.html( this.template( options ) ); - } - - this.views.render(); - return this; - }, - - prepare: function() { - return this.options; - }, - - ready: function() {} - }); + media.View = wp.View; /** * wp.media.view.Frame diff --git a/wp-includes/js/wp-backbone.js b/wp-includes/js/wp-backbone.js index 4e6a8f5009..2091ff49f5 100644 --- a/wp-includes/js/wp-backbone.js +++ b/wp-includes/js/wp-backbone.js @@ -25,4 +25,402 @@ window.wp = window.wp || {}; }; }); + + // wp.Subviews + // ----------- + // + // A subview manager. + wp.Subviews = function( view, views ) { + this.view = view; + this._views = _.isArray( views ) ? { '': views } : views || {}; + }; + + wp.Subviews.extend = Backbone.Model.extend; + + _.extend( wp.Subviews.prototype, { + // ### Fetch all of the subviews + // + // Returns an array of all subviews. + all: function() { + return _.flatten( this._views ); + }, + + // ### Get a selector's subviews + // + // Fetches all subviews that match a given `selector`. + // + // If no `selector` is provided, it will grab all subviews attached + // to the view's root. + get: function( selector ) { + selector = selector || ''; + return this._views[ selector ]; + }, + + // ### Get a selector's first subview + // + // Fetches the first subview that matches a given `selector`. + // + // If no `selector` is provided, it will grab the first subview + // attached to the view's root. + // + // Useful when a selector only has one subview at a time. + first: function( selector ) { + var views = this.get( selector ); + return views && views.length ? views[0] : null; + }, + + // ### Register subview(s) + // + // Registers any number of `views` to a `selector`. + // + // When no `selector` is provided, the root selector (the empty string) + // is used. `views` accepts a `Backbone.View` instance or an array of + // `Backbone.View` instances. + // + // --- + // + // Accepts an `options` object, which has a significant effect on the + // resulting behavior. + // + // `options.silent` – *boolean, `false`* + // > If `options.silent` is true, no DOM modifications will be made. + // + // `options.add` – *boolean, `false`* + // > Use `Views.add()` as a shortcut for setting `options.add` to true. + // + // > By default, the provided `views` will replace + // any existing views associated with the selector. If `options.add` + // is true, the provided `views` will be added to the existing views. + // + // `options.at` – *integer, `undefined`* + // > When adding, to insert `views` at a specific index, use + // `options.at`. By default, `views` are added to the end of the array. + set: function( selector, views, options ) { + var existing, next; + + if ( ! _.isString( selector ) ) { + options = views; + views = selector; + selector = ''; + } + + options = options || {}; + views = _.isArray( views ) ? views : [ views ]; + existing = this.get( selector ); + next = views; + + if ( existing ) { + if ( options.add ) { + if ( _.isUndefined( options.at ) ) { + next = existing.concat( views ); + } else { + next = existing; + next.splice.apply( next, [ options.at, 0 ].concat( views ) ); + } + } else { + _.each( next, function( view ) { + view.__detach = true; + }); + + _.each( existing, function( view ) { + if ( view.__detach ) + view.$el.detach(); + else + view.dispose(); + }); + + _.each( next, function( view ) { + delete view.__detach; + }); + } + } + + this._views[ selector ] = next; + + _.each( views, function( subview ) { + var constructor = subview.Views || wp.Subviews, + subviews = subview.views = subview.views || new constructor( subview ); + subviews.parent = this.view; + subviews.selector = selector; + }, this ); + + if ( ! options.silent ) + this._attach( selector, views, _.extend({ ready: this._isReady() }, options ) ); + + return this; + }, + + // ### Add subview(s) to existing subviews + // + // An alias to `Views.set()`, which defaults `options.add` to true. + // + // Adds any number of `views` to a `selector`. + // + // When no `selector` is provided, the root selector (the empty string) + // is used. `views` accepts a `Backbone.View` instance or an array of + // `Backbone.View` instances. + // + // Use `Views.set()` when setting `options.add` to `false`. + // + // Accepts an `options` object. By default, provided `views` will be + // inserted at the end of the array of existing views. To insert + // `views` at a specific index, use `options.at`. If `options.silent` + // is true, no DOM modifications will be made. + // + // For more information on the `options` object, see `Views.set()`. + add: function( selector, views, options ) { + if ( ! _.isString( selector ) ) { + options = views; + views = selector; + selector = ''; + } + + return this.set( selector, views, _.extend({ add: true }, options ) ); + }, + + // ### Stop tracking subviews + // + // Stops tracking `views` registered to a `selector`. If no `views` are + // set, then all of the `selector`'s subviews will be unregistered and + // disposed. + // + // Accepts an `options` object. If `options.silent` is set, `dispose` + // will *not* be triggered on the unregistered views. + unset: function( selector, views, options ) { + var existing; + + if ( ! _.isString( selector ) ) { + options = views; + views = selector; + selector = ''; + } + + views = views || []; + + if ( existing = this.get( selector ) ) { + views = _.isArray( views ) ? views : [ views ]; + this._views[ selector ] = views.length ? _.difference( existing, views ) : []; + } + + if ( ! options || ! options.silent ) + _.invoke( views, 'dispose' ); + + return this; + }, + + // ### Detach all subviews + // + // Detaches all subviews from the DOM. + // + // Helps to preserve all subview events when re-rendering the master + // view. Used in conjunction with `Views.render()`. + detach: function() { + $( _.pluck( this.all(), 'el' ) ).detach(); + return this; + }, + + // ### Render all subviews + // + // Renders all subviews. Used in conjunction with `Views.detach()`. + render: function() { + var options = { + ready: this._isReady() + }; + + _.each( this._views, function( views, selector ) { + this._attach( selector, views, options ); + }, this ); + + this.rendered = true; + return this; + }, + + // ### Dispose all subviews + // + // Triggers the `dispose()` method on all subviews. Detaches the master + // view from its parent. Resets the internals of the views manager. + // + // Accepts an `options` object. If `options.silent` is set, `unset` + // will *not* be triggered on the master view's parent. + dispose: function( options ) { + if ( ! options || ! options.silent ) { + if ( this.parent && this.parent.views ) + this.parent.views.unset( this.selector, this.view, { silent: true }); + delete this.parent; + delete this.selector; + } + + _.invoke( this.all(), 'dispose' ); + this._views = []; + return this; + }, + + // ### Replace a selector's subviews + // + // By default, sets the `$target` selector's html to the subview `els`. + // + // Can be overridden in subclasses. + replace: function( $target, els ) { + $target.html( els ); + return this; + }, + + // ### Insert subviews into a selector + // + // By default, appends the subview `els` to the end of the `$target` + // selector. If `options.at` is set, inserts the subview `els` at the + // provided index. + // + // Can be overridden in subclasses. + insert: function( $target, els, options ) { + var at = options && options.at, + $children; + + if ( _.isNumber( at ) && ($children = $target.children()).length > at ) + $children.eq( at ).before( els ); + else + $target.append( els ); + + return this; + }, + + // ### 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; + } + }); + + + // wp.View + // ------- + // + // The base view class. + wp.View = Backbone.View.extend({ + // The constructor for the `Views` manager. + Subviews: wp.Subviews, + + constructor: function( options ) { + this.views = new this.Subviews( this, this.views ); + this.on( 'ready', this.ready, this ); + + if ( options && options.controller ) + this.controller = options.controller; + + Backbone.View.apply( this, arguments ); + }, + + dispose: function() { + // Undelegating events, removing events from the model, and + // removing events from the controller mirror the code for + // `Backbone.View.dispose` in Backbone master. + this.undelegateEvents(); + + if ( this.model && this.model.off ) + this.model.off( null, null, this ); + + if ( this.collection && this.collection.off ) + this.collection.off( null, null, this ); + + // Unbind controller events. + if ( this.controller && this.controller.off ) + this.controller.off( null, null, this ); + + // Recursively dispose child views. + if ( this.views ) + this.views.dispose(); + + return this; + }, + + remove: function() { + this.dispose(); + return Backbone.View.prototype.remove.apply( this, arguments ); + }, + + render: function() { + var options; + + if ( this.prepare ) + options = this.prepare(); + + this.views.detach(); + + if ( this.template ) { + options = options || {}; + this.trigger( 'prepare', options ); + this.$el.html( this.template( options ) ); + } + + this.views.render(); + return this; + }, + + prepare: function() { + return this.options; + }, + + ready: function() {} + }); }(jQuery));