|
1 (function( $, wp, _ ) { |
|
2 |
|
3 if ( ! wp || ! wp.customize ) { return; } |
|
4 var api = wp.customize; |
|
5 |
|
6 |
|
7 /** |
|
8 * wp.customize.HeaderTool.CurrentView |
|
9 * |
|
10 * Displays the currently selected header image, or a placeholder in lack |
|
11 * thereof. |
|
12 * |
|
13 * Instantiate with model wp.customize.HeaderTool.currentHeader. |
|
14 * |
|
15 * @constructor |
|
16 * @augments wp.Backbone.View |
|
17 */ |
|
18 api.HeaderTool.CurrentView = wp.Backbone.View.extend({ |
|
19 template: wp.template('header-current'), |
|
20 |
|
21 initialize: function() { |
|
22 this.listenTo(this.model, 'change', this.render); |
|
23 this.render(); |
|
24 }, |
|
25 |
|
26 render: function() { |
|
27 this.$el.html(this.template(this.model.toJSON())); |
|
28 this.setPlaceholder(); |
|
29 this.setButtons(); |
|
30 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 }, |
|
71 |
|
72 setButtons: function() { |
|
73 var elements = $('#customize-control-header_image .actions .remove'); |
|
74 if (this.model.get('choice')) { |
|
75 elements.show(); |
|
76 } else { |
|
77 elements.hide(); |
|
78 } |
|
79 } |
|
80 }); |
|
81 |
|
82 |
|
83 /** |
|
84 * wp.customize.HeaderTool.ChoiceView |
|
85 * |
|
86 * Represents a choosable header image, be it user-uploaded, |
|
87 * theme-suggested or a special Randomize choice. |
|
88 * |
|
89 * Takes a wp.customize.HeaderTool.ImageModel. |
|
90 * |
|
91 * Manually changes model wp.customize.HeaderTool.currentHeader via the |
|
92 * `select` method. |
|
93 * |
|
94 * @constructor |
|
95 * @augments wp.Backbone.View |
|
96 */ |
|
97 api.HeaderTool.ChoiceView = wp.Backbone.View.extend({ |
|
98 template: wp.template('header-choice'), |
|
99 |
|
100 className: 'header-view', |
|
101 |
|
102 events: { |
|
103 'click .choice,.random': 'select', |
|
104 'click .close': 'removeImage' |
|
105 }, |
|
106 |
|
107 initialize: function() { |
|
108 var properties = [ |
|
109 this.model.get('header').url, |
|
110 this.model.get('choice') |
|
111 ]; |
|
112 |
|
113 this.listenTo(this.model, 'change:selected', this.toggleSelected); |
|
114 |
|
115 if (_.contains(properties, api.get().header_image)) { |
|
116 api.HeaderTool.currentHeader.set(this.extendedModel()); |
|
117 } |
|
118 }, |
|
119 |
|
120 render: function() { |
|
121 this.$el.html(this.template(this.extendedModel())); |
|
122 |
|
123 this.toggleSelected(); |
|
124 return this; |
|
125 }, |
|
126 |
|
127 toggleSelected: function() { |
|
128 this.$el.toggleClass('selected', this.model.get('selected')); |
|
129 }, |
|
130 |
|
131 extendedModel: function() { |
|
132 var c = this.model.get('collection'); |
|
133 return _.extend(this.model.toJSON(), { |
|
134 type: c.type |
|
135 }); |
|
136 }, |
|
137 |
|
138 getHeight: api.HeaderTool.CurrentView.prototype.getHeight, |
|
139 |
|
140 setPlaceholder: api.HeaderTool.CurrentView.prototype.setPlaceholder, |
|
141 |
|
142 select: function() { |
|
143 this.preventJump(); |
|
144 this.model.save(); |
|
145 api.HeaderTool.currentHeader.set(this.extendedModel()); |
|
146 }, |
|
147 |
|
148 preventJump: function() { |
|
149 var container = $('.wp-full-overlay-sidebar-content'), |
|
150 scroll = container.scrollTop(); |
|
151 |
|
152 _.defer(function() { |
|
153 container.scrollTop(scroll); |
|
154 }); |
|
155 }, |
|
156 |
|
157 removeImage: function(e) { |
|
158 e.stopPropagation(); |
|
159 this.model.destroy(); |
|
160 this.remove(); |
|
161 } |
|
162 }); |
|
163 |
|
164 |
|
165 /** |
|
166 * wp.customize.HeaderTool.ChoiceListView |
|
167 * |
|
168 * A container for ChoiceViews. These choices should be of one same type: |
|
169 * user-uploaded headers or theme-defined ones. |
|
170 * |
|
171 * Takes a wp.customize.HeaderTool.ChoiceList. |
|
172 * |
|
173 * @constructor |
|
174 * @augments wp.Backbone.View |
|
175 */ |
|
176 api.HeaderTool.ChoiceListView = wp.Backbone.View.extend({ |
|
177 initialize: function() { |
|
178 this.listenTo(this.collection, 'add', this.addOne); |
|
179 this.listenTo(this.collection, 'remove', this.render); |
|
180 this.listenTo(this.collection, 'sort', this.render); |
|
181 this.listenTo(this.collection, 'change', this.toggleList); |
|
182 this.render(); |
|
183 }, |
|
184 |
|
185 render: function() { |
|
186 this.$el.empty(); |
|
187 this.collection.each(this.addOne, this); |
|
188 this.toggleList(); |
|
189 }, |
|
190 |
|
191 addOne: function(choice) { |
|
192 var view; |
|
193 choice.set({ collection: this.collection }); |
|
194 view = new api.HeaderTool.ChoiceView({ model: choice }); |
|
195 this.$el.append(view.render().el); |
|
196 }, |
|
197 |
|
198 toggleList: function() { |
|
199 var title = this.$el.parents().prev('.customize-control-title'), |
|
200 randomButton = this.$el.find('.random').parent(); |
|
201 if (this.collection.shouldHideTitle()) { |
|
202 title.add(randomButton).hide(); |
|
203 } else { |
|
204 title.add(randomButton).show(); |
|
205 } |
|
206 } |
|
207 }); |
|
208 |
|
209 |
|
210 /** |
|
211 * wp.customize.HeaderTool.CombinedList |
|
212 * |
|
213 * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any |
|
214 * Backbone object, really) and acts as a bus to feed them events. |
|
215 * |
|
216 * @constructor |
|
217 * @augments wp.Backbone.View |
|
218 */ |
|
219 api.HeaderTool.CombinedList = wp.Backbone.View.extend({ |
|
220 initialize: function(collections) { |
|
221 this.collections = collections; |
|
222 this.on('all', this.propagate, this); |
|
223 }, |
|
224 propagate: function(event, arg) { |
|
225 _.each(this.collections, function(collection) { |
|
226 collection.trigger(event, arg); |
|
227 }); |
|
228 } |
|
229 }); |
|
230 |
|
231 })( jQuery, window.wp, _ ); |