mirror of
https://github.com/WordPress/WordPress.git
synced 2024-09-10 22:58:33 +02:00
* The way that the JS modules for media are currently set up turns the existing global `wp.media` namespace into a read-only API, this is bad. * For the existing module implementation to work with plugins, those looking to override or extend a class would have to modify their own plugin to use `browserify` - we can't expect this to happen * Because the general way that plugins override media classes is via machete (resetting them to something else), we cannot use `require( 'module' )` in the internal code for media modules We CAN continue to use `require( 'fun/js' )` in the manifests for media. Future code/projects should carefully consider what is made to be public API. In 3.5, EVERYTHING was made public, so everything shall remain public. See #31684, #28510. Built from https://develop.svn.wordpress.org/trunk@31935 git-svn-id: http://core.svn.wordpress.org/trunk@31914 1a063a9b-81f0-0310-95a4-ce76da25c4cd
167 lines
4.0 KiB
JavaScript
167 lines
4.0 KiB
JavaScript
/*globals _, Backbone */
|
|
|
|
/**
|
|
* wp.media.view.Frame
|
|
*
|
|
* A frame is a composite view consisting of one or more regions and one or more
|
|
* states.
|
|
*
|
|
* @see wp.media.controller.State
|
|
* @see wp.media.controller.Region
|
|
*
|
|
* @class
|
|
* @augments wp.media.View
|
|
* @augments wp.Backbone.View
|
|
* @augments Backbone.View
|
|
* @mixes wp.media.controller.StateMachine
|
|
*/
|
|
var Frame = wp.media.View.extend({
|
|
initialize: function() {
|
|
_.defaults( this.options, {
|
|
mode: [ 'select' ]
|
|
});
|
|
this._createRegions();
|
|
this._createStates();
|
|
this._createModes();
|
|
},
|
|
|
|
_createRegions: function() {
|
|
// Clone the regions array.
|
|
this.regions = this.regions ? this.regions.slice() : [];
|
|
|
|
// Initialize regions.
|
|
_.each( this.regions, function( region ) {
|
|
this[ region ] = new wp.media.controller.Region({
|
|
view: this,
|
|
id: region,
|
|
selector: '.media-frame-' + region
|
|
});
|
|
}, this );
|
|
},
|
|
/**
|
|
* Create the frame's states.
|
|
*
|
|
* @see wp.media.controller.State
|
|
* @see wp.media.controller.StateMachine
|
|
*
|
|
* @fires wp.media.controller.State#ready
|
|
*/
|
|
_createStates: function() {
|
|
// Create the default `states` collection.
|
|
this.states = new Backbone.Collection( null, {
|
|
model: wp.media.controller.State
|
|
});
|
|
|
|
// Ensure states have a reference to the frame.
|
|
this.states.on( 'add', function( model ) {
|
|
model.frame = this;
|
|
model.trigger('ready');
|
|
}, this );
|
|
|
|
if ( this.options.states ) {
|
|
this.states.add( this.options.states );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* A frame can be in a mode or multiple modes at one time.
|
|
*
|
|
* For example, the manage media frame can be in the `Bulk Select` or `Edit` mode.
|
|
*/
|
|
_createModes: function() {
|
|
// Store active "modes" that the frame is in. Unrelated to region modes.
|
|
this.activeModes = new Backbone.Collection();
|
|
this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) );
|
|
|
|
_.each( this.options.mode, function( mode ) {
|
|
this.activateMode( mode );
|
|
}, this );
|
|
},
|
|
/**
|
|
* Reset all states on the frame to their defaults.
|
|
*
|
|
* @returns {wp.media.view.Frame} Returns itself to allow chaining
|
|
*/
|
|
reset: function() {
|
|
this.states.invoke( 'trigger', 'reset' );
|
|
return this;
|
|
},
|
|
/**
|
|
* Map activeMode collection events to the frame.
|
|
*/
|
|
triggerModeEvents: function( model, collection, options ) {
|
|
var collectionEvent,
|
|
modeEventMap = {
|
|
add: 'activate',
|
|
remove: 'deactivate'
|
|
},
|
|
eventToTrigger;
|
|
// Probably a better way to do this.
|
|
_.each( options, function( value, key ) {
|
|
if ( value ) {
|
|
collectionEvent = key;
|
|
}
|
|
} );
|
|
|
|
if ( ! _.has( modeEventMap, collectionEvent ) ) {
|
|
return;
|
|
}
|
|
|
|
eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent];
|
|
this.trigger( eventToTrigger );
|
|
},
|
|
/**
|
|
* Activate a mode on the frame.
|
|
*
|
|
* @param string mode Mode ID.
|
|
* @returns {this} Returns itself to allow chaining.
|
|
*/
|
|
activateMode: function( mode ) {
|
|
// Bail if the mode is already active.
|
|
if ( this.isModeActive( mode ) ) {
|
|
return;
|
|
}
|
|
this.activeModes.add( [ { id: mode } ] );
|
|
// Add a CSS class to the frame so elements can be styled for the mode.
|
|
this.$el.addClass( 'mode-' + mode );
|
|
|
|
return this;
|
|
},
|
|
/**
|
|
* Deactivate a mode on the frame.
|
|
*
|
|
* @param string mode Mode ID.
|
|
* @returns {this} Returns itself to allow chaining.
|
|
*/
|
|
deactivateMode: function( mode ) {
|
|
// Bail if the mode isn't active.
|
|
if ( ! this.isModeActive( mode ) ) {
|
|
return this;
|
|
}
|
|
this.activeModes.remove( this.activeModes.where( { id: mode } ) );
|
|
this.$el.removeClass( 'mode-' + mode );
|
|
/**
|
|
* Frame mode deactivation event.
|
|
*
|
|
* @event this#{mode}:deactivate
|
|
*/
|
|
this.trigger( mode + ':deactivate' );
|
|
|
|
return this;
|
|
},
|
|
/**
|
|
* Check if a mode is enabled on the frame.
|
|
*
|
|
* @param string mode Mode ID.
|
|
* @return bool
|
|
*/
|
|
isModeActive: function( mode ) {
|
|
return Boolean( this.activeModes.where( { id: mode } ).length );
|
|
}
|
|
});
|
|
|
|
// Make the `Frame` a `StateMachine`.
|
|
_.extend( Frame.prototype, wp.media.controller.StateMachine.prototype );
|
|
|
|
module.exports = Frame;
|