|
1 /* globals _wpCustomizeHeader, _ */ |
|
2 (function( $, wp ) { |
|
3 var api = wp.customize; |
|
4 api.HeaderTool = {}; |
|
5 |
|
6 |
|
7 /** |
|
8 * wp.customize.HeaderTool.ImageModel |
|
9 * |
|
10 * A header image. This is where saves via the Customizer API are |
|
11 * abstracted away, plus our own AJAX calls to add images to and remove |
|
12 * images from the user's recently uploaded images setting on the server. |
|
13 * These calls are made regardless of whether the user actually saves new |
|
14 * Customizer settings. |
|
15 * |
|
16 * @constructor |
|
17 * @augments Backbone.Model |
|
18 */ |
|
19 api.HeaderTool.ImageModel = Backbone.Model.extend({ |
|
20 defaults: function() { |
|
21 return { |
|
22 header: { |
|
23 attachment_id: 0, |
|
24 url: '', |
|
25 timestamp: _.now(), |
|
26 thumbnail_url: '' |
|
27 }, |
|
28 choice: '', |
|
29 selected: false, |
|
30 random: false |
|
31 }; |
|
32 }, |
|
33 |
|
34 initialize: function() { |
|
35 this.on('hide', this.hide, this); |
|
36 }, |
|
37 |
|
38 hide: function() { |
|
39 this.set('choice', ''); |
|
40 api('header_image').set('remove-header'); |
|
41 api('header_image_data').set('remove-header'); |
|
42 }, |
|
43 |
|
44 destroy: function() { |
|
45 var data = this.get('header'), |
|
46 curr = api.HeaderTool.currentHeader.get('header').attachment_id; |
|
47 |
|
48 // If the image we're removing is also the current header, unset |
|
49 // the latter |
|
50 if (curr && data.attachment_id === curr) { |
|
51 api.HeaderTool.currentHeader.trigger('hide'); |
|
52 } |
|
53 |
|
54 wp.ajax.post( 'custom-header-remove', { |
|
55 nonce: _wpCustomizeHeader.nonces.remove, |
|
56 wp_customize: 'on', |
|
57 theme: api.settings.theme.stylesheet, |
|
58 attachment_id: data.attachment_id |
|
59 }); |
|
60 |
|
61 this.trigger('destroy', this, this.collection); |
|
62 }, |
|
63 |
|
64 save: function() { |
|
65 if (this.get('random')) { |
|
66 api('header_image').set(this.get('header').random); |
|
67 api('header_image_data').set(this.get('header').random); |
|
68 } else { |
|
69 if (this.get('header').defaultName) { |
|
70 api('header_image').set(this.get('header').url); |
|
71 api('header_image_data').set(this.get('header').defaultName); |
|
72 } else { |
|
73 api('header_image').set(this.get('header').url); |
|
74 api('header_image_data').set(this.get('header')); |
|
75 } |
|
76 } |
|
77 |
|
78 api.HeaderTool.combinedList.trigger('control:setImage', this); |
|
79 }, |
|
80 |
|
81 importImage: function() { |
|
82 var data = this.get('header'); |
|
83 if (data.attachment_id === undefined) { |
|
84 return; |
|
85 } |
|
86 |
|
87 wp.ajax.post( 'custom-header-add', { |
|
88 nonce: _wpCustomizeHeader.nonces.add, |
|
89 wp_customize: 'on', |
|
90 theme: api.settings.theme.stylesheet, |
|
91 attachment_id: data.attachment_id |
|
92 } ); |
|
93 }, |
|
94 |
|
95 shouldBeCropped: function() { |
|
96 if (this.get('themeFlexWidth') === true && |
|
97 this.get('themeFlexHeight') === true) { |
|
98 return false; |
|
99 } |
|
100 |
|
101 if (this.get('themeFlexWidth') === true && |
|
102 this.get('themeHeight') === this.get('imageHeight')) { |
|
103 return false; |
|
104 } |
|
105 |
|
106 if (this.get('themeFlexHeight') === true && |
|
107 this.get('themeWidth') === this.get('imageWidth')) { |
|
108 return false; |
|
109 } |
|
110 |
|
111 if (this.get('themeWidth') === this.get('imageWidth') && |
|
112 this.get('themeHeight') === this.get('imageHeight')) { |
|
113 return false; |
|
114 } |
|
115 |
|
116 if (this.get('imageWidth') <= this.get('themeWidth')) { |
|
117 return false; |
|
118 } |
|
119 |
|
120 return true; |
|
121 } |
|
122 }); |
|
123 |
|
124 |
|
125 /** |
|
126 * wp.customize.HeaderTool.ChoiceList |
|
127 * |
|
128 * @constructor |
|
129 * @augments Backbone.Collection |
|
130 */ |
|
131 api.HeaderTool.ChoiceList = Backbone.Collection.extend({ |
|
132 model: api.HeaderTool.ImageModel, |
|
133 |
|
134 // Ordered from most recently used to least |
|
135 comparator: function(model) { |
|
136 return -model.get('header').timestamp; |
|
137 }, |
|
138 |
|
139 initialize: function() { |
|
140 var current = api.HeaderTool.currentHeader.get('choice').replace(/^https?:\/\//, ''), |
|
141 isRandom = this.isRandomChoice(api.get().header_image); |
|
142 |
|
143 // Overridable by an extending class |
|
144 if (!this.type) { |
|
145 this.type = 'uploaded'; |
|
146 } |
|
147 |
|
148 // Overridable by an extending class |
|
149 if (typeof this.data === 'undefined') { |
|
150 this.data = _wpCustomizeHeader.uploads; |
|
151 } |
|
152 |
|
153 if (isRandom) { |
|
154 // So that when adding data we don't hide regular images |
|
155 current = api.get().header_image; |
|
156 } |
|
157 |
|
158 this.on('control:setImage', this.setImage, this); |
|
159 this.on('control:removeImage', this.removeImage, this); |
|
160 this.on('add', this.maybeAddRandomChoice, this); |
|
161 |
|
162 _.each(this.data, function(elt, index) { |
|
163 if (!elt.attachment_id) { |
|
164 elt.defaultName = index; |
|
165 } |
|
166 |
|
167 if (typeof elt.timestamp === 'undefined') { |
|
168 elt.timestamp = 0; |
|
169 } |
|
170 |
|
171 this.add({ |
|
172 header: elt, |
|
173 choice: elt.url.split('/').pop(), |
|
174 selected: current === elt.url.replace(/^https?:\/\//, '') |
|
175 }, { silent: true }); |
|
176 }, this); |
|
177 |
|
178 if (this.size() > 0) { |
|
179 this.addRandomChoice(current); |
|
180 } |
|
181 }, |
|
182 |
|
183 maybeAddRandomChoice: function() { |
|
184 if (this.size() === 1) { |
|
185 this.addRandomChoice(); |
|
186 } |
|
187 }, |
|
188 |
|
189 addRandomChoice: function(initialChoice) { |
|
190 var isRandomSameType = RegExp(this.type).test(initialChoice), |
|
191 randomChoice = 'random-' + this.type + '-image'; |
|
192 |
|
193 this.add({ |
|
194 header: { |
|
195 timestamp: 0, |
|
196 random: randomChoice, |
|
197 width: 245, |
|
198 height: 41 |
|
199 }, |
|
200 choice: randomChoice, |
|
201 random: true, |
|
202 selected: isRandomSameType |
|
203 }); |
|
204 }, |
|
205 |
|
206 isRandomChoice: function(choice) { |
|
207 return (/^random-(uploaded|default)-image$/).test(choice); |
|
208 }, |
|
209 |
|
210 shouldHideTitle: function() { |
|
211 return this.size() < 2; |
|
212 }, |
|
213 |
|
214 setImage: function(model) { |
|
215 this.each(function(m) { |
|
216 m.set('selected', false); |
|
217 }); |
|
218 |
|
219 if (model) { |
|
220 model.set('selected', true); |
|
221 } |
|
222 }, |
|
223 |
|
224 removeImage: function() { |
|
225 this.each(function(m) { |
|
226 m.set('selected', false); |
|
227 }); |
|
228 } |
|
229 }); |
|
230 |
|
231 |
|
232 /** |
|
233 * wp.customize.HeaderTool.DefaultsList |
|
234 * |
|
235 * @constructor |
|
236 * @augments wp.customize.HeaderTool.ChoiceList |
|
237 * @augments Backbone.Collection |
|
238 */ |
|
239 api.HeaderTool.DefaultsList = api.HeaderTool.ChoiceList.extend({ |
|
240 initialize: function() { |
|
241 this.type = 'default'; |
|
242 this.data = _wpCustomizeHeader.defaults; |
|
243 api.HeaderTool.ChoiceList.prototype.initialize.apply(this); |
|
244 } |
|
245 }); |
|
246 |
|
247 })( jQuery, window.wp ); |