/*globals _, Backbone */ /** * wp.media.view.Toolbar * * A toolbar which consists of a primary and a secondary section. Each sections * can be filled with views. * * @class * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View */ var View = require( './view.js' ), Button = require( './button.js' ), PriorityList = require( './priority-list.js' ), Toolbar; Toolbar = View.extend({ tagName: 'div', className: 'media-toolbar', initialize: function() { var state = this.controller.state(), selection = this.selection = state.get('selection'), library = this.library = state.get('library'); this._views = {}; // The toolbar is composed of two `PriorityList` views. this.primary = new PriorityList(); this.secondary = new PriorityList(); this.primary.$el.addClass('media-toolbar-primary search-form'); this.secondary.$el.addClass('media-toolbar-secondary'); this.views.set([ this.secondary, this.primary ]); if ( this.options.items ) { this.set( this.options.items, { silent: true }); } if ( ! this.options.silent ) { this.render(); } if ( selection ) { selection.on( 'add remove reset', this.refresh, this ); } if ( library ) { library.on( 'add remove reset', this.refresh, this ); } }, /** * @returns {wp.media.view.Toolbar} Returns itsef to allow chaining */ dispose: function() { if ( this.selection ) { this.selection.off( null, null, this ); } if ( this.library ) { this.library.off( null, null, this ); } /** * call 'dispose' directly on the parent class */ return View.prototype.dispose.apply( this, arguments ); }, ready: function() { this.refresh(); }, /** * @param {string} id * @param {Backbone.View|Object} view * @param {Object} [options={}] * @returns {wp.media.view.Toolbar} Returns itself to allow chaining */ set: function( id, view, options ) { var list; options = options || {}; // Accept an object with an `id` : `view` mapping. if ( _.isObject( id ) ) { _.each( id, function( view, id ) { this.set( id, view, { silent: true }); }, this ); } else { if ( ! ( view instanceof Backbone.View ) ) { view.classes = [ 'media-button-' + id ].concat( view.classes || [] ); view = new Button( view ).render(); } view.controller = view.controller || this.controller; this._views[ id ] = view; list = view.options.priority < 0 ? 'secondary' : 'primary'; this[ list ].set( id, view, options ); } if ( ! options.silent ) { this.refresh(); } return this; }, /** * @param {string} id * @returns {wp.media.view.Button} */ get: function( id ) { return this._views[ id ]; }, /** * @param {string} id * @param {Object} options * @returns {wp.media.view.Toolbar} Returns itself to allow chaining */ unset: function( id, options ) { delete this._views[ id ]; this.primary.unset( id, options ); this.secondary.unset( id, options ); if ( ! options || ! options.silent ) { this.refresh(); } return this; }, refresh: function() { var state = this.controller.state(), library = state.get('library'), selection = state.get('selection'); _.each( this._views, function( button ) { if ( ! button.model || ! button.options || ! button.options.requires ) { return; } var requires = button.options.requires, disabled = false; // Prevent insertion of attachments if any of them are still uploading disabled = _.some( selection.models, function( attachment ) { return attachment.get('uploading') === true; }); if ( requires.selection && selection && ! selection.length ) { disabled = true; } else if ( requires.library && library && ! library.length ) { disabled = true; } button.model.set( 'disabled', disabled ); }); } }); module.exports = Toolbar;