sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Docs: Improve JSDoc for wp-includes/js/wp-backbone.js.

Browse Source 
Props ericlewis, gma992, adamsilverstein.
Fixes #35465.


git-svn-id: https://develop.svn.wordpress.org/trunk@42993 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Anton Timmermans 2018-04-19 14:01:48 +00:00
parent ed3b9746ce
commit ad13b8bbda
1 changed files with 288 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

410
src/wp-includes/js/wp-backbone.js
View File

@ -9,11 +9,19 @@ window.wp = window.wp || {};
*/ */
wp.Backbone = {}; wp.Backbone = {};
/**
// wp.Backbone.Subviews * A backbone subview manager.
// -------------------- *
// * @since 3.5.0
// A subview manager. * @since 3.6.0 Moved wp.media.Views to wp.Backbone.Subviews.
*
* @memberOf wp.Backbone
*
* @class
*
* @param {wp.Backbone.View} view The main view.
* @param {array|Object} views The subviews for the main view.
*/
wp.Backbone.Subviews = function( view, views ) { wp.Backbone.Subviews = function( view, views ) {
this.view = view; this.view = view;
this._views = _.isArray( views ) ? { '': views } : views || {}; this._views = _.isArray( views ) ? { '': views } : views || {};
@ -22,63 +30,95 @@ window.wp = window.wp || {};
wp.Backbone.Subviews.extend = Backbone.Model.extend; wp.Backbone.Subviews.extend = Backbone.Model.extend;
_.extend( wp.Backbone.Subviews.prototype, { _.extend( wp.Backbone.Subviews.prototype, {
// ### Fetch all of the subviews /**
// * Fetches all of the subviews.
// Returns an array of all subviews. *
* @since 3.5.0
*
* @return {array} All the subviews.
*/
all: function() { all: function() {
return _.flatten( _.values( this._views ) ); return _.flatten( _.values( this._views ) );
}, },
// ### Get a selector's subviews /**
// * Fetches all subviews that match a given `selector`.
// Fetches all subviews that match a given `selector`. *
// * If no `selector` is provided, it will grab all subviews attached
// If no `selector` is provided, it will grab all subviews attached * to the view's root.
// to the view's root. *
* @since 3.5.0
*
* @param {string} selector A jQuery selector.
*
* @return {array}
*/
get: function( selector ) { get: function( selector ) {
selector = selector || ''; selector = selector || '';
return this._views[ selector ]; return this._views[ selector ];
}, },
// ### Get a selector's first subview /**
// * Fetches the first subview that matches a given `selector`.
// Fetches the first subview that matches a given `selector`. *
// * If no `selector` is provided, it will grab the first subview attached to the
// If no `selector` is provided, it will grab the first subview * view's root.
// attached to the view's root. *
// * Useful when a selector only has one subview at a time.
// Useful when a selector only has one subview at a time. *
* @since 3.5.0
*
* @param {string} selector A jQuery selector.
*
* @return {Backbone.View} The view.
*/
first: function( selector ) { first: function( selector ) {
var views = this.get( selector ); var views = this.get( selector );
return views && views.length ? views[0] : null; return views && views.length ? views[0] : null;
}, },
// ### Register subview(s) /**
// * Registers subview(s).
// Registers any number of `views` to a `selector`. *
// * 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 * When no `selector` is provided, the root selector (the empty string)
// `Backbone.View` instances. * 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. * 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.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. * `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` * > By default, the provided `views` will replace
// is true, the provided `views` will be added to the existing views. * 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` – *integer, `undefined`*
// `options.at`. By default, `views` are added to the end of the array. * > When adding, to insert `views` at a specific index, use
* `options.at`. By default, `views` are added to the end of the array.
*
* @since 3.5.0
*
* @param {string} selector A jQuery selector.
* @param {array|Object} views The subviews for the main view.
* @param {Object} options Options for call. If `options.silent` is true,
* no DOM modifications will be made. Use
* `Views.add()` as a shortcut for setting
* `options.add` to true. If `options.add` is
* true, the provided `views` will be added to
* the existing views. When adding, to insert
* `views` at a specific index, use `options.at`.
*
* @return wp.Backbone.Subviews
*/
set: function( selector, views, options ) { set: function( selector, views, options ) {
var existing, next; var existing, next;
@ -134,24 +174,37 @@ window.wp = window.wp || {};
return this; return this;
}, },
// ### Add subview(s) to existing subviews /**
// * Add subview(s) to existing subviews.
// An alias to `Views.set()`, which defaults `options.add` to true. *
// * An alias to `Views.set()`, which defaults `options.add` to true.
// Adds any number of `views` to a `selector`. *
// * 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 * When no `selector` is provided, the root selector (the empty string)
// `Backbone.View` instances. * is used. `views` accepts a `Backbone.View` instance or an array of
// * `Backbone.View` instances.
// Use `Views.set()` when setting `options.add` to `false`. *
// * Uses `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 * Accepts an `options` object. By default, provided `views` will be
// `views` at a specific index, use `options.at`. If `options.silent` * inserted at the end of the array of existing views. To insert
// is true, no DOM modifications will be made. * `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()`. *
* For more information on the `options` object, see `Views.set()`.
*
* @since 3.5.0
*
* @param {string} selector A jQuery selector.
* @param {array|object} views The subviews for the main view.
* @param {Object} options Options for call. To insert `views` at a
* specific index, use `options.at`. If
* `options.silent` is true, no DOM modifications
* will be made.
*
* @return wp.Backbone.Subviews
*/
add: function( selector, views, options ) { add: function( selector, views, options ) {
if ( ! _.isString( selector ) ) { if ( ! _.isString( selector ) ) {
options = views; options = views;
@ -162,14 +215,26 @@ window.wp = window.wp || {};
return this.set( selector, views, _.extend({ add: true }, options ) ); return this.set( selector, views, _.extend({ add: true }, options ) );
}, },
// ### Stop tracking subviews /**
// * Removes an added subview.
// Stops tracking `views` registered to a `selector`. If no `views` are *
// set, then all of the `selector`'s subviews will be unregistered and * Stops tracking `views` registered to a `selector`. If no `views` are
// removed. * set, then all of the `selector`'s subviews will be unregistered and
// * removed.
// Accepts an `options` object. If `options.silent` is set, `remove` *
// will *not* be triggered on the unregistered views. * Accepts an `options` object. If `options.silent` is set, `remove`
* will *not* be triggered on the unregistered views.
*
* @since 3.5.0
*
* @param {string} selector A jQuery selector.
* @param {array|object} views The subviews for the main view.
* @param {Object} options Options for call. If `options.silent` is set,
* `remove` will *not* be triggered on the
* unregistered views.
*
* @return {wp.Backbone.Subviews} The current Subviews instance.
*/
unset: function( selector, views, options ) { unset: function( selector, views, options ) {
var existing; var existing;
@ -192,20 +257,30 @@ window.wp = window.wp || {};
return this; return this;
}, },
// ### Detach all subviews /**
// * Detaches all subviews.
// Detaches all subviews from the DOM. *
// * Helps to preserve all subview events when re-rendering the master
// Helps to preserve all subview events when re-rendering the master * view. Used in conjunction with `Views.render()`.
// view. Used in conjunction with `Views.render()`. *
* @since 3.5.0
*
* @return {wp.Backbone.Subviews} The current Subviews instance.
*/
detach: function() { detach: function() {
$( _.pluck( this.all(), 'el' ) ).detach(); $( _.pluck( this.all(), 'el' ) ).detach();
return this; return this;
}, },
// ### Render all subviews /**
// * Renders all subviews
// Renders all subviews. Used in conjunction with `Views.detach()`. *
* Used in conjunction with `Views.detach()`.
*
* @since 3.5.0
*
* @return {wp.Backbone.Subviews} The current Subviews instance.
*/
render: function() { render: function() {
var options = { var options = {
ready: this._isReady() ready: this._isReady()
@ -219,13 +294,23 @@ window.wp = window.wp || {};
return this; return this;
}, },
// ### Remove all subviews /**
// * Removes all subviews
// Triggers the `remove()` method on all subviews. Detaches the master *
// view from its parent. Resets the internals of the views manager. * Triggers the `remove()` 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. * Accepts an `options` object. If `options.silent` is set, `unset`
* will *not* be triggered on the master view's parent.
*
* @since 3.6.0
*
* @param {Object} options Options for call.
* @param {boolean} options.silent If true, `unset` wil *not* be triggered on
* the master views' parent.
*
* @return {wp.Backbone.Subviews} The current Subviews instance.
*/
remove: function( options ) { remove: function( options ) {
if ( ! options || ! options.silent ) { if ( ! options || ! options.silent ) {
if ( this.parent && this.parent.views ) if ( this.parent && this.parent.views )
@ -239,23 +324,44 @@ window.wp = window.wp || {};
return this; return this;
}, },
// ### Replace a selector's subviews /**
// * Replaces a selector's subviews
// By default, sets the `$target` selector's html to the subview `els`. *
// * By default, sets the `$target` selector's html to the subview `els`.
// Can be overridden in subclasses. *
* Can be overridden in subclasses.
*
* @since 3.5.0
*
* @param {string} $target Selector where to put the elements.
* @param {*} els HTML or elements to put into the selector's HTML.
*
* @return {wp.Backbone.Subviews} The current Subviews instance.
*/
replace: function( $target, els ) { replace: function( $target, els ) {
$target.html( els ); $target.html( els );
return this; return this;
}, },
// ### Insert subviews into a selector /**
// * 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 * By default, appends the subview `els` to the end of the `$target`
// provided index. * selector. If `options.at` is set, inserts the subview `els` at the
// * provided index.
// Can be overridden in subclasses. *
* Can be overridden in subclasses.
*
* @since 3.5.0
*
* @param {string} $target Selector where to put the elements.
* @param {*} els HTML or elements to put at the end of the
* $target.
* @param {?Object} options Options for call.
* @param {?number} options.at At which index to put the elements.
*
* @return {wp.Backbone.Subviews} The current Subviews instance.
*/
insert: function( $target, els, options ) { insert: function( $target, els, options ) {
var at = options && options.at, var at = options && options.at,
$children; $children;
@ -268,13 +374,17 @@ window.wp = window.wp || {};
return this; return this;
}, },
// ### Trigger the ready event /**
// * Triggers 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 * Only use this method if you know what you're doing. For performance reasons,
// actually attached to the DOM. It's taking your word for it. * 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. *
* Fires the ready event on the current view and all attached subviews.
*
* @since 3.5.0
*/
ready: function() { ready: function() {
this.view.trigger('ready'); this.view.trigger('ready');
@ -283,12 +393,24 @@ window.wp = window.wp || {};
return view.views; return view.views;
}).flatten().where({ attached: true }).invoke('ready'); }).flatten().where({ attached: true }).invoke('ready');
}, },
/**
// #### Internal. Attaches a series of views to a selector. * Attaches a series of views to a selector. Internal.
// *
// Checks to see if a matching selector exists, renders the views, * Checks to see if a matching selector exists, renders the views,
// performs the proper DOM operation, and then checks if the view is * performs the proper DOM operation, and then checks if the view is
// attached to the document. * attached to the document.
*
* @since 3.5.0
*
* @private
*
* @param {string} selector A jQuery selector.
* @param {array|object} views The subviews for the main view.
* @param {Object} options Options for call.
* @param {boolean} options.add If true the provided views will be added.
*
* @return {wp.Backbone.Subviews} The current Subviews instance.
*/
_attach: function( selector, views, options ) { _attach: function( selector, views, options ) {
var $selector = selector ? this.view.$( selector ) : this.view.$el, var $selector = selector ? this.view.$( selector ) : this.view.$el,
managers; managers;
@ -323,7 +445,15 @@ window.wp = window.wp || {};
return this; return this;
}, },
// #### Internal. Checks if the current view is in the DOM. /**
* Determines whether or not the current view is in the DOM.
*
* @since 3.5.0
*
* @private
*
* @returns {boolean} Whether or not the current view is in the DOM.
*/
_isReady: function() { _isReady: function() {
var node = this.view.el; var node = this.view.el;
while ( node ) { while ( node ) {
@ -336,15 +466,27 @@ window.wp = window.wp || {};
} }
}); });
// wp.Backbone.View
// ----------------
//
// The base view class.
wp.Backbone.View = Backbone.View.extend({ wp.Backbone.View = Backbone.View.extend({
// The constructor for the `Views` manager. // The constructor for the `Views` manager.
Subviews: wp.Backbone.Subviews, Subviews: wp.Backbone.Subviews,
/**
* The base view class.
*
* This extends the backbone view to have a build-in way to use subviews. This
* makes it easier to have nested views.
*
* @since 3.5.0
* @since 3.6.0 Moved wp.media.View to wp.Backbone.View
*
* @memberOf wp.Backbone
*
* @constructs
* @augments Backbone.View
*
* @param {Object} options The options for this view.
*/
constructor: function( options ) { constructor: function( options ) {
this.views = new this.Subviews( this, this.views ); this.views = new this.Subviews( this, this.views );
this.on( 'ready', this.ready, this ); this.on( 'ready', this.ready, this );
@ -354,6 +496,11 @@ window.wp = window.wp || {};
Backbone.View.apply( this, arguments ); Backbone.View.apply( this, arguments );
}, },
/**
* @since 3.5.0
*
* Removes this view and all subviews.
*/
remove: function() { remove: function() {
var result = Backbone.View.prototype.remove.apply( this, arguments ); var result = Backbone.View.prototype.remove.apply( this, arguments );
@ -364,6 +511,13 @@ window.wp = window.wp || {};
return result; return result;
}, },
/**
* Renders this view and all subviews.
*
* @since 3.5.0
*
* @returns {wp.Backbone.View} The current instance of the view.
*/
render: function() { render: function() {
var options; var options;
@ -382,10 +536,22 @@ window.wp = window.wp || {};
return this; return this;
}, },
/**
* Returns the options for this view.
*
* @since 3.5.0
*
* @returns {Object} The options for this view.
*/
prepare: function() { prepare: function() {
return this.options; return this.options;
}, },
/**
* Method that is called when the ready event is triggered.
*
* @since 3.5.0
*/
ready: function() {} ready: function() {}
}); });
}(jQuery)); }(jQuery));