1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
/**
* wp.media.controller.Region
*
* A region is a persistent application layout area.
*
* A region assumes one mode at any time, and can be switched to another.
*
* When mode changes, events are triggered on the region's parent view.
* The parent view will listen to specific events and fill the region with an
* appropriate view depending on mode. For example, a frame listens for the
* 'browse' mode t be activated on the 'content' view and then fills the region
* with an AttachmentsBrowser view.
*
* @memberOf wp.media.controller
*
* @class
*
* @param {Object} options Options hash for the region.
* @param {string} options.id Unique identifier for the region.
* @param {Backbone.View} options.view A parent view the region exists within.
* @param {string} options.selector jQuery selector for the region within the parent view.
*/
var Region = function( options ) {
_.extend( this, _.pick( options || {}, 'id', 'view', 'selector' ) );
};
// Use Backbone's self-propagating `extend` inheritance method.
Region.extend = Backbone.Model.extend;
_.extend( Region.prototype,/** @lends wp.media.controller.Region.prototype */{
/**
* Activate a mode.
*
* @since 3.5.0
*
* @param {string} mode
*
* @fires Region#activate
* @fires Region#deactivate
*
* @return {wp.media.controller.Region} Returns itself to allow chaining.
*/
mode: function( mode ) {
if ( ! mode ) {
return this._mode;
}
// Bail if we're trying to change to the current mode.
if ( mode === this._mode ) {
return this;
}
/**
* Region mode deactivation event.
*
* @event wp.media.controller.Region#deactivate
*/
this.trigger('deactivate');
this._mode = mode;
this.render( mode );
/**
* Region mode activation event.
*
* @event wp.media.controller.Region#activate
*/
this.trigger('activate');
return this;
},
/**
* Render a mode.
*
* @since 3.5.0
*
* @param {string} mode
*
* @fires Region#create
* @fires Region#render
*
* @return {wp.media.controller.Region} Returns itself to allow chaining.
*/
render: function( mode ) {
// If the mode isn't active, activate it.
if ( mode && mode !== this._mode ) {
return this.mode( mode );
}
var set = { view: null },
view;
/**
* Create region view event.
*
* Region view creation takes place in an event callback on the frame.
*
* @event wp.media.controller.Region#create
* @type {object}
* @property {object} view
*/
this.trigger( 'create', set );
view = set.view;
/**
* Render region view event.
*
* Region view creation takes place in an event callback on the frame.
*
* @event wp.media.controller.Region#render
* @type {object}
*/
this.trigger( 'render', view );
if ( view ) {
this.set( view );
}
return this;
},
/**
* Get the region's view.
*
* @since 3.5.0
*
* @return {wp.media.View}
*/
get: function() {
return this.view.views.first( this.selector );
},
/**
* Set the region's view as a subview of the frame.
*
* @since 3.5.0
*
* @param {Array|Object} views
* @param {Object} [options={}]
* @return {wp.Backbone.Subviews} Subviews is returned to allow chaining.
*/
set: function( views, options ) {
if ( options ) {
options.add = false;
}
return this.view.views.set( this.selector, views, options );
},
/**
* Trigger regional view events on the frame.
*
* @since 3.5.0
*
* @param {string} event
* @return {undefined|wp.media.controller.Region} Returns itself to allow chaining.
*/
trigger: function( event ) {
var base, args;
if ( ! this._mode ) {
return;
}
args = _.toArray( arguments );
base = this.id + ':' + event;
// Trigger `{this.id}:{event}:{this._mode}` event on the frame.
args[0] = base + ':' + this._mode;
this.view.trigger.apply( this.view, args );
// Trigger `{this.id}:{event}` event on the frame.
args[0] = base;
this.view.trigger.apply( this.view, args );
return this;
}
});
module.exports = Region;
|
