PluginProbe
Customify / 2.5.1
Customify v2.5.1
2.10.9 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.7.1 1.3.0 1.3.1 1.4.0 1.4.1 1.4.2 1.5.0 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 1.5.6 1.5.7 1.6.0 1.6.0.1 1.6.5 1.7.0 1.7.1 All 77 releases
← All changes | js/customizer_preview.js +196 -160 1.5.0 → 2.5.1 View file →
@@ -1,218 +1,246 @@
1 1 ;(function ($, window, document, undefined) {
2 2
3 - var fonts_cache = [];
3 + const fonts_cache = []
4 4
5 5 $(document).ready(function () {
6 6 var api = parent.wp.customize,
7 - wp_settings = api.settings.settings;
7 + wp_settings = api.settings.settings
8 8
9 - load_webfont_once();
9 + load_webfont_once()
10 10
11 11 $.each(customify_settings.settings, function (key, el) {
12 12
13 - if (el.type === "font") {
14 - var sliced_id = key.slice(0, -1);
15 - sliced_id = sliced_id.replace(customify_settings.options_name + '[', '');
16 -
13 + if (el.type === 'font') {
17 14 api(key, function (setting) {
18 15 setting.bind(function (to) {
19 - var $values = maybeJsonParse(to);
16 + let $values = maybeJsonParse(to)
20 17
21 - if (typeof $values.font_family !== "undefined") {
22 - maybeLoadFontFamily($values);
23 - }
18 + if (typeof $values !== 'undefined') {
19 + if (typeof $values.font_family !== 'undefined') {
20 + maybeLoadFontFamily($values)
21 + }
24 22
25 - var vls = get_CSS_values(this.id, $values);
26 - var CSS = get_CSS_code(this.id, vls);
27 - var field_style = $('#customify_font_output_for_' + sliced_id);
23 + let vls = get_CSS_values(this.id, $values),
24 + CSS = get_CSS_code(this.id, vls),
25 + field_style = $('#customify_font_output_for_' + el.html_safe_option_id)
28 26
29 - field_style.html(CSS);
30 - });
31 - });
27 + field_style.html(CSS)
28 + }
29 + })
30 + })
32 31
33 - } else if (typeof wp_settings[key] !== "undefined" && typeof el.css !== "undefined" && typeof el.live !== 'undefined' && el.live === true) {
34 -
35 - var sliced_id = key.slice(0, -1);
36 - sliced_id = sliced_id.replace(customify_settings.options_name + '[', '');
37 -
32 + } else if (typeof wp_settings !== 'undefined' && typeof wp_settings[key] !== 'undefined' && typeof el.css !== 'undefined' && typeof el.live !== 'undefined' && el.live === true) {
38 33 api(key, function (setting) {
39 34
40 35 setting.bind(function (to) {
41 - var properties = [];
42 36
43 37 $.each(el.css, function (counter, property_config) {
38 + let properties = []
44 39
45 - properties[property_config.property] = property_config.selector;
46 - if (typeof property_config.callback_filter !== "undefined") {
47 - properties['callback'] = property_config.callback_filter;
40 + properties[property_config.property] = property_config.selector
41 + if (typeof property_config.callback_filter !== 'undefined') {
42 + properties['callback'] = property_config.callback_filter
48 43 }
49 44
50 - var css_update_args = {
45 + let css_update_args = {
51 46 properties: properties,
52 - propertyValue: to
53 - };
47 + propertyValue: to,
48 + negative_value: property_config.hasOwnProperty('negative_value') ? property_config['negative_value'] : false
49 + }
54 50
55 51 if (typeof this.unit !== 'undefined') {
56 - css_update_args.unit = this.unit;
52 + css_update_args.unit = this.unit
57 53 }
58 54
59 - var req_Exp_for_multiple_replace = new RegExp('-', 'g');
60 - $('#dynamic_setting_' + sliced_id + '_property_' + property_config.property.replace(req_Exp_for_multiple_replace, '_')).cssUpdate(css_update_args);
61 - });
55 + // Replace all dashes with underscores thus making the CSS property safe to us in a HTML ID.
56 + let regex_for_multiple_replace = new RegExp('-', 'g'),
57 + cssStyleSelector = '.dynamic_setting_' + el.html_safe_option_id + '_property_' + property_config.property.replace(regex_for_multiple_replace, '_') + '_' + counter
62 58
63 - });
64 - });
65 - } else if (typeof el.live === "object" && el.live.length > 0) {
59 + $(cssStyleSelector).cssUpdate(css_update_args)
60 + })
61 +
62 + })
63 + })
64 + } else if (typeof el.live === 'object' && el.live.length > 0) {
66 65 // if the live parameter is an object it means that is a list of css classes
67 66 // these classes should be affected by the change of the text fields
68 - var field_class = el.live.join();
67 + var field_class = el.live.join()
69 68
70 69 // if this field is allowed to modify text then we'll edit this live
71 70 if ($.inArray(el.type, ['text', 'textarea', 'ace_editor']) > -1) {
72 71 wp.customize(key, function (value) {
73 72 value.bind(function (text) {
74 - var sanitizer = document.createElement('div');
75 - sanitizer.innerHTML = text;
76 - $(field_class).html(text);
77 - });
78 - });
73 + let sanitizer = document.createElement('div')
74 +
75 + sanitizer.innerHTML = text
76 + $(field_class).html(text)
77 + })
78 + })
79 79 }
80 80 }
81 - });
81 + })
82 82
83 - /** Bind Custom Events **/
84 -
85 - // api.previewer.bind('highlight',function(e){
86 - // $('.customizerHighlight').removeClass('customizerHighlight');
87 - //
88 - // if ( $(e).length > 0 ) {
89 - // $(e).each(function(){
90 - // $(this).addClass('customizerHighlight');
91 - // });
92 - // }
93 - // });
94 -
95 - api('live_css_edit', function (setting) {
96 - setting.bind(function (new_text) {
97 - $('#customify_css_editor_output').text(new_text);
98 - });
99 - });
100 -
101 -
102 83 /*** HELPERS **/
103 84
104 - function load_webfont_once() {
105 - if (typeof WebFont === "undefined") {
106 - var tk = document.createElement('script');
107 - tk.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
108 - tk.type = 'text/javascript';
109 - var s = document.getElementsByTagName('script')[0];
110 - s.parentNode.insertBefore(tk, s);
85 + function load_webfont_once () {
86 + if (typeof WebFont === 'undefined') {
87 + let tk = document.createElement('script')
88 + tk.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'
89 + tk.type = 'text/javascript'
90 + let s = document.getElementsByTagName('script')[0]
91 + s.parentNode.insertBefore(tk, s)
111 92 }
112 93 }
113 94
114 - var get_CSS_values = function (ID, $values) {
95 + const get_CSS_values = function (ID, values) {
115 96
116 - var store = {};
97 + let store = {}
117 98
118 - if (typeof $values.font_family !== "undefined") {
119 - store['font-family'] = $values.font_family;
99 + if (typeof values.font_family !== 'undefined') {
100 + store['font-family'] = values.font_family
120 101 }
121 102
122 - if (typeof $values.selected_variants !== "undefined") {
103 + if (typeof values.selected_variants !== 'undefined') {
123 104
124 - var variants = null;
105 + let variants = null
125 106
126 - if (typeof $values.selected_variants !== "undefined" && $values.selected_variants !== null) {
127 - variants = $values.selected_variants;
128 - } else if (typeof $values.variants !== "undefined" && typeof $values.variants[0] !== "undefined") {
129 - variants = $values.variants[0];
107 + if (typeof values.selected_variants !== 'undefined' && values.selected_variants !== null) {
108 + variants = values.selected_variants
109 + } else if (typeof values.variants !== 'undefined' && typeof values.variants[0] !== 'undefined') {
110 + variants = values.variants[0]
130 111 }
131 112
132 113 // google fonts also have the italic string inside, split that
133 - if (variants !== null && variants.indexOf('italic') !== -1) {
134 - store['font-style'] = 'italic';
135 - variants = variants.replace('italic', '');
114 + if (variants !== null && _.isString(variants) && variants.indexOf('italic') !== -1) {
115 + store['font-style'] = 'italic'
116 + variants = variants.replace('italic', '')
136 117 }
137 118
138 - if (variants !== "") {
119 + if (variants !== '') {
139 120 if (variants === 'regular') {
140 - variants = 'normal';
121 + variants = 'normal'
141 122 }
142 123
143 - store['font-weight'] = variants;
124 + store['font-weight'] = variants
144 125 }
145 126 }
146 127
147 - if (typeof $values.font_size !== "undefined") {
148 - store['font-size'] = $values.font_size + get_field_unit(ID, 'font-size');
128 + if (typeof values.font_size !== 'undefined') {
129 + store['font-size'] = values.font_size
130 + // If the value already contains a unit (is not numeric), go with that.
131 + if (isNaN(values.font_size)) {
132 + // If we have a standardized value field (as array), use that.
133 + if (typeof values.font_size.value !== 'undefined') {
134 + store['font-size'] = values.font_size.value
135 + if (typeof values.font_size.unit !== 'undefined') {
136 + store['font-size'] += values.font_size.unit
137 + }
138 + } else {
139 + store['font-size'] += get_field_unit(ID, 'font-size')
140 + }
141 + } else {
142 + store['font-size'] += get_field_unit(ID, 'font-size')
143 + }
149 144 }
150 145
151 - if (typeof $values.letter_spacing !== "undefined") {
152 - store['letter-spacing'] = $values.letter_spacing + get_field_unit(ID, 'letter-spacing');
146 + if (typeof values.letter_spacing !== 'undefined') {
147 + store['letter-spacing'] = values.letter_spacing
148 + // If the value already contains a unit (is not numeric), go with that.
149 + if (isNaN(values.letter_spacing)) {
150 + // If we have a standardized value field (as array), use that.
151 + if (typeof values.letter_spacing.value !== 'undefined') {
152 + store['letter-spacing'] = values.letter_spacing.value
153 + if (typeof values.letter_spacing.unit !== 'undefined') {
154 + store['letter-spacing'] += values.letter_spacing.unit
155 + }
156 + } else {
157 + store['letter-spacing'] += get_field_unit(ID, 'letter-spacing')
158 + }
159 + } else {
160 + store['letter-spacing'] += get_field_unit(ID, 'letter-spacing')
161 + }
153 162 }
154 163
155 - if (typeof $values.line_height !== "undefined") {
156 - store['line-height'] = $values.line_height + get_field_unit(ID, 'line-height');
164 + if (typeof values.line_height !== 'undefined') {
165 + store['line-height'] = values.line_height
166 + // If the value already contains a unit (is not numeric), go with that.
167 + if (isNaN(values.line_height)) {
168 + // If we have a standardized value field (as array), use that.
169 + if (typeof values.line_height.value !== 'undefined') {
170 + store['line-height'] = values.line_height.value
171 + if (typeof values.line_height.unit !== 'undefined') {
172 + store['line-height'] += values.line_height.unit
173 + }
174 + } else {
175 + store['line-height'] += get_field_unit(ID, 'line-height')
176 + }
177 + } else {
178 + store['line-height'] += get_field_unit(ID, 'line-height')
179 + }
157 180 }
158 181
159 - if (typeof $values.text_align !== "undefined") {
160 - store['text-align'] = $values.text_align;
182 + if (typeof values.text_align !== 'undefined') {
183 + store['text-align'] = values.text_align
161 184 }
162 185
163 - if (typeof $values.text_transform !== "undefined") {
164 - store['text-transform'] = $values.text_transform;
186 + if (typeof values.text_transform !== 'undefined') {
187 + store['text-transform'] = values.text_transform
165 188 }
166 - if (typeof $values.text_decoration !== "undefined") {
167 - store['text-decoration'] = $values.text_decoration;
189 + if (typeof values.text_decoration !== 'undefined') {
190 + store['text-decoration'] = values.text_decoration
168 191 }
169 192
170 - return store;
171 - };
193 + return store
194 + }
172 195
173 - var get_CSS_code = function (ID, $values) {
196 + const get_CSS_code = function (ID, values) {
174 197
175 - var field = customify_settings.settings[ID];
176 - var output = '';
198 + let field = customify_settings.settings[ID]
199 + let output = ''
177 200
178 - if (typeof window !== "undefined" && typeof field.callback !== "undefined" && typeof window[field.callback] === "function") {
179 - output = window[field.callback]($values, field);
201 + if (typeof window !== 'undefined' && typeof field.callback !== 'undefined' && typeof window[field.callback] === 'function') {
202 + output = window[field.callback](values, field)
180 203 } else {
181 - output = field.selector + "{\n";
182 - $.each($values, function (k, v) {
183 - output += k + ': ' + v + ";\n";
204 + output = field.selector + '{\n'
205 + $.each(values, function (k, v) {
206 + output += k + ': ' + v + ';\n'
184 207 })
185 - output += "}\n";
208 + output += '}\n'
186 209 }
187 210
188 - return output;
189 - };
211 + return output
212 + }
190 213
191 - var get_field_unit = function (ID, field) {
192 - var unit = 'px';
193 - if (typeof customify_settings.settings[ID] === "undefined" || typeof customify_settings.settings[ID].fields[field] === "undefined") {
194 - return unit;
214 + const get_field_unit = function (ID, field) {
215 + let unit = ''
216 + if (typeof customify_settings.settings[ID] === 'undefined' || typeof customify_settings.settings[ID].fields[field] === 'undefined') {
217 + return unit
195 218 }
196 219
197 - if (typeof customify_settings.settings[ID].fields[field].unit !== "undefined") {
198 - return customify_settings.settings[ID].fields[field].unit;
199 - } else if (typeof customify_settings.settings[ID].fields[field][3] !== "undefined") {
220 + if (typeof customify_settings.settings[ID].fields[field].unit !== 'undefined') {
221 + return customify_settings.settings[ID].fields[field].unit
222 + } else if (typeof customify_settings.settings[ID].fields[field][3] !== 'undefined') {
200 223 // in case of an associative array
201 - return customify_settings.settings[ID].fields[field][3];
224 + return customify_settings.settings[ID].fields[field][3]
202 225 }
203 226 }
204 227
205 - var maybeLoadFontFamily = function (font) {
228 + const maybeLoadFontFamily = function (font) {
206 229
207 - if (typeof WebFont === "undefined") {
208 - var tk = document.createElement('script');
209 - tk.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
210 - tk.type = 'text/javascript';
211 - var s = document.getElementsByTagName('script')[0];
212 - s.parentNode.insertBefore(tk, s);
230 + if (typeof WebFont === 'undefined') {
231 + let tk = document.createElement('script')
232 + tk.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'
233 + tk.type = 'text/javascript'
234 + let s = document.getElementsByTagName('script')[0]
235 + s.parentNode.insertBefore(tk, s)
213 236 }
214 237
238 + // If the font type is not defined, we assume is a Google font.
239 + if (typeof font.type === 'undefined') {
240 + font.type = 'google'
241 + }
242 +
215 243 if (font.type === 'theme_font') {
216 244 WebFont.load({
217 245 custom: {
218 246 families: [font.font_family],
@@ -217,67 +245,71 @@
217 245 custom: {
218 246 families: [font.font_family],
219 247 urls: [font.src]
220 248 }
221 - });
249 + })
222 250 } else if (font.type === 'google') {
223 - var family = font.font_family,
251 + let family = font.font_family,
224 252 variants = null,
225 - subsets = null;
253 + subsets = null
226 254
227 - if (typeof font.variants !== "undefined") {
228 - variants = maybeJsonParse(font.variants);
255 + if (typeof font.variants !== 'undefined') {
256 + variants = maybeJsonParse(font.variants)
229 257
258 + if (typeof variants === 'string' || typeof variants === 'number') {
259 + variants = [variants]
260 + }
261 +
230 262 $.each(variants, function (k, v) {
231 263
232 - if (k === "0") {
233 - family = family + ':';
264 + if (k == 0) {
265 + family = family + ':'
234 266 }
235 267
236 - family = family + v;
268 + family = family + v
237 269
238 - if ( Object.keys(variants).length > ( parseInt(k) + 1 ) ) {
239 - family = family + ',';
240 - } else if ( typeof font.selected_subsets !== "undefined" ) {
270 + if (Object.keys(variants).length > (parseInt(k) + 1)) {
271 + family = family + ','
272 + } else if (typeof font.selected_subsets !== 'undefined') {
241 273 // in case there is a subset selected, we need to separate it from the font weight
242 - family = family + ':';
274 + family = family + ':'
243 275 }
244 - });
276 + })
245 277 }
246 278
247 - if (typeof font.selected_subsets !== "undefined") {
248 - subsets = maybeJsonParse(font.selected_subsets);
279 + if (typeof font.selected_subsets !== 'undefined') {
280 + subsets = maybeJsonParse(font.selected_subsets)
249 281
250 282 $.each(subsets, function (k, v) {
251 283
252 - if ( k === "0" ) {
253 - family = family + ':';
284 + if (k === '0') {
285 + family = family + ':'
254 286 }
255 287
256 - family = family + v;
288 + family = family + v
257 289
258 - if ( Object.keys(subsets).length > ( parseInt(k) + 1 ) ) {
259 - family = family + ',';
290 + if (Object.keys(subsets).length > (parseInt(k) + 1)) {
291 + family = family + ','
260 292 }
261 - });
293 + })
262 294 }
263 295
264 296 if (fonts_cache.indexOf(family) === -1) {
265 - setTimeout(function(){
297 + setTimeout(function () {
266 298 WebFont.load({
267 299 google: {families: [family]},
268 300 classes: false,
269 301 events: false,
270 302 error: function (e) {
271 - console.log(e);
303 + console.log(e)
272 304 },
273 305 active: function () {
274 - sessionStorage.fonts = true;
306 + sessionStorage.fonts = true
275 307 }
276 - });
277 - },10);
308 + })
309 + }, 10)
278 310
279 - fonts_cache.push(family);
311 + fonts_cache.push(family)
280 312 }
281 313
282 314 } else {
283 315 // else what?
@@ -283,20 +315,24 @@
283 315 // else what?
284 316 }
285 317 }
286 318
287 - var maybeJsonParse = function (value) {
288 - var parsed;
319 + const maybeJsonParse = function (value) {
320 + let parsed
289 321
322 + if (typeof value !== 'string') {
323 + return value
324 + }
325 +
290 326 //try and parse it, with decodeURIComponent
291 327 try {
292 - parsed = JSON.parse(decodeURIComponent(value));
328 + parsed = JSON.parse(decodeURIComponent(value))
293 329 } catch (e) {
294 330
295 331 // in case of an error, treat is as a string
296 - parsed = value;
332 + parsed = value
297 333 }
298 334
299 - return parsed;
300 - };
301 - });
302 -})(jQuery, window, document);
335 + return parsed
336 + }
337 + })
338 +})(jQuery, window, document)