1 (function( $, wp, _ ) { |
1 (function( $, wp, _ ) { |
2 |
2 |
3 if ( ! wp || ! wp.customize ) { return; } |
3 if ( ! wp || ! wp.customize ) { return; } |
4 var api = wp.customize; |
4 var api = wp.customize; |
5 |
|
6 |
5 |
7 /** |
6 /** |
8 * wp.customize.HeaderTool.CurrentView |
7 * wp.customize.HeaderTool.CurrentView |
9 * |
8 * |
10 * Displays the currently selected header image, or a placeholder in lack |
9 * Displays the currently selected header image, or a placeholder in lack |
11 * thereof. |
10 * thereof. |
12 * |
11 * |
13 * Instantiate with model wp.customize.HeaderTool.currentHeader. |
12 * Instantiate with model wp.customize.HeaderTool.currentHeader. |
14 * |
13 * |
|
14 * @memberOf wp.customize.HeaderTool |
|
15 * @alias wp.customize.HeaderTool.CurrentView |
|
16 * |
15 * @constructor |
17 * @constructor |
16 * @augments wp.Backbone.View |
18 * @augments wp.Backbone.View |
17 */ |
19 */ |
18 api.HeaderTool.CurrentView = wp.Backbone.View.extend({ |
20 api.HeaderTool.CurrentView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CurrentView.prototype */{ |
19 template: wp.template('header-current'), |
21 template: wp.template('header-current'), |
20 |
22 |
21 initialize: function() { |
23 initialize: function() { |
22 this.listenTo(this.model, 'change', this.render); |
24 this.listenTo(this.model, 'change', this.render); |
23 this.render(); |
25 this.render(); |
24 }, |
26 }, |
25 |
27 |
26 render: function() { |
28 render: function() { |
27 this.$el.html(this.template(this.model.toJSON())); |
29 this.$el.html(this.template(this.model.toJSON())); |
28 this.setPlaceholder(); |
|
29 this.setButtons(); |
30 this.setButtons(); |
30 return this; |
31 return this; |
31 }, |
|
32 |
|
33 getHeight: function() { |
|
34 var image = this.$el.find('img'), |
|
35 saved, height, headerImageData; |
|
36 |
|
37 if (image.length) { |
|
38 this.$el.find('.inner').hide(); |
|
39 } else { |
|
40 this.$el.find('.inner').show(); |
|
41 return 40; |
|
42 } |
|
43 |
|
44 saved = this.model.get('savedHeight'); |
|
45 height = image.height() || saved; |
|
46 |
|
47 // happens at ready |
|
48 if (!height) { |
|
49 headerImageData = api.get().header_image_data; |
|
50 |
|
51 if (headerImageData && headerImageData.width && headerImageData.height) { |
|
52 // hardcoded container width |
|
53 height = 260 / headerImageData.width * headerImageData.height; |
|
54 } |
|
55 else { |
|
56 // fallback for when no image is set |
|
57 height = 40; |
|
58 } |
|
59 } |
|
60 |
|
61 return height; |
|
62 }, |
|
63 |
|
64 setPlaceholder: function(_height) { |
|
65 var height = _height || this.getHeight(); |
|
66 this.model.set('savedHeight', height); |
|
67 this.$el |
|
68 .add(this.$el.find('.placeholder')) |
|
69 .height(height); |
|
70 }, |
32 }, |
71 |
33 |
72 setButtons: function() { |
34 setButtons: function() { |
73 var elements = $('#customize-control-header_image .actions .remove'); |
35 var elements = $('#customize-control-header_image .actions .remove'); |
74 if (this.model.get('choice')) { |
36 if (this.model.get('choice')) { |
89 * Takes a wp.customize.HeaderTool.ImageModel. |
51 * Takes a wp.customize.HeaderTool.ImageModel. |
90 * |
52 * |
91 * Manually changes model wp.customize.HeaderTool.currentHeader via the |
53 * Manually changes model wp.customize.HeaderTool.currentHeader via the |
92 * `select` method. |
54 * `select` method. |
93 * |
55 * |
|
56 * @memberOf wp.customize.HeaderTool |
|
57 * @alias wp.customize.HeaderTool.ChoiceView |
|
58 * |
94 * @constructor |
59 * @constructor |
95 * @augments wp.Backbone.View |
60 * @augments wp.Backbone.View |
96 */ |
61 */ |
97 api.HeaderTool.ChoiceView = wp.Backbone.View.extend({ |
62 api.HeaderTool.ChoiceView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceView.prototype */{ |
98 template: wp.template('header-choice'), |
63 template: wp.template('header-choice'), |
99 |
64 |
100 className: 'header-view', |
65 className: 'header-view', |
101 |
66 |
102 events: { |
67 events: { |
168 * A container for ChoiceViews. These choices should be of one same type: |
129 * A container for ChoiceViews. These choices should be of one same type: |
169 * user-uploaded headers or theme-defined ones. |
130 * user-uploaded headers or theme-defined ones. |
170 * |
131 * |
171 * Takes a wp.customize.HeaderTool.ChoiceList. |
132 * Takes a wp.customize.HeaderTool.ChoiceList. |
172 * |
133 * |
|
134 * @memberOf wp.customize.HeaderTool |
|
135 * @alias wp.customize.HeaderTool.ChoiceListView |
|
136 * |
173 * @constructor |
137 * @constructor |
174 * @augments wp.Backbone.View |
138 * @augments wp.Backbone.View |
175 */ |
139 */ |
176 api.HeaderTool.ChoiceListView = wp.Backbone.View.extend({ |
140 api.HeaderTool.ChoiceListView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceListView.prototype */{ |
177 initialize: function() { |
141 initialize: function() { |
178 this.listenTo(this.collection, 'add', this.addOne); |
142 this.listenTo(this.collection, 'add', this.addOne); |
179 this.listenTo(this.collection, 'remove', this.render); |
143 this.listenTo(this.collection, 'remove', this.render); |
180 this.listenTo(this.collection, 'sort', this.render); |
144 this.listenTo(this.collection, 'sort', this.render); |
181 this.listenTo(this.collection, 'change', this.toggleList); |
145 this.listenTo(this.collection, 'change', this.toggleList); |
211 * wp.customize.HeaderTool.CombinedList |
175 * wp.customize.HeaderTool.CombinedList |
212 * |
176 * |
213 * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any |
177 * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any |
214 * Backbone object, really) and acts as a bus to feed them events. |
178 * Backbone object, really) and acts as a bus to feed them events. |
215 * |
179 * |
|
180 * @memberOf wp.customize.HeaderTool |
|
181 * @alias wp.customize.HeaderTool.CombinedList |
|
182 * |
216 * @constructor |
183 * @constructor |
217 * @augments wp.Backbone.View |
184 * @augments wp.Backbone.View |
218 */ |
185 */ |
219 api.HeaderTool.CombinedList = wp.Backbone.View.extend({ |
186 api.HeaderTool.CombinedList = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CombinedList.prototype */{ |
220 initialize: function(collections) { |
187 initialize: function(collections) { |
221 this.collections = collections; |
188 this.collections = collections; |
222 this.on('all', this.propagate, this); |
189 this.on('all', this.propagate, this); |
223 }, |
190 }, |
224 propagate: function(event, arg) { |
191 propagate: function(event, arg) { |