1 | /* global kirkiPostMessageFields, WebFont */ |
||
2 | var kirkiPostMessage = { |
||
3 | |||
4 | /** |
||
5 | * The fields. |
||
6 | * |
||
7 | * @since 3.0.26 |
||
8 | */ |
||
9 | fields: {}, |
||
10 | |||
11 | /** |
||
12 | * A collection of methods for the <style> tags. |
||
13 | * |
||
14 | * @since 3.0.26 |
||
15 | */ |
||
16 | styleTag: { |
||
17 | |||
18 | /** |
||
19 | * Add a <style> tag in <head> if it doesn't already exist. |
||
20 | * |
||
21 | * @since 3.0.26 |
||
22 | * @param {string} id - The field-ID. |
||
23 | * @returns {void} |
||
24 | */ |
||
25 | add: function( id ) { |
||
26 | if ( null === document.getElementById( 'kirki-postmessage-' + id ) || 'undefined' === typeof document.getElementById( 'kirki-postmessage-' + id ) ) { |
||
27 | jQuery( 'head' ).append( '<style id="kirki-postmessage-' + id + '"></style>' ); |
||
28 | } |
||
29 | }, |
||
30 | |||
31 | /** |
||
32 | * Add a <style> tag in <head> if it doesn't already exist, |
||
33 | * by calling the this.add method, and then add styles inside it. |
||
34 | * |
||
35 | * @since 3.0.26 |
||
36 | * @param {string} id - The field-ID. |
||
37 | * @param {string} styles - The styles to add. |
||
38 | * @returns {void} |
||
39 | */ |
||
40 | addData: function( id, styles ) { |
||
41 | kirkiPostMessage.styleTag.add( id ); |
||
42 | jQuery( '#kirki-postmessage-' + id ).text( styles ); |
||
43 | } |
||
44 | }, |
||
45 | |||
46 | /** |
||
47 | * Common utilities. |
||
48 | * |
||
49 | * @since 3.0.26 |
||
50 | */ |
||
51 | util: { |
||
52 | |||
53 | /** |
||
54 | * Processes the value and applies any replacements and/or additions. |
||
55 | * |
||
56 | * @since 3.0.26 |
||
57 | * @param {Object} output - The output (js_vars) argument. |
||
58 | * @param {mixed} value - The value. |
||
59 | * @param {string} controlType - The control-type. |
||
60 | * @returns {string|false} - Returns false if value is excluded, otherwise a string. |
||
61 | */ |
||
62 | processValue: function( output, value ) { |
||
63 | var self = this, |
||
64 | settings = window.parent.wp.customize.get(), |
||
65 | excluded = false; |
||
66 | |||
67 | if ( 'string' !== typeof value ) { |
||
68 | _.each( value, function( subValue, key ) { |
||
69 | value[ key ] = self.processValue( output, subValue ); |
||
70 | } ); |
||
71 | return value; |
||
72 | } |
||
73 | output = _.defaults( output, { |
||
74 | prefix: '', |
||
75 | units: '', |
||
76 | suffix: '', |
||
77 | value_pattern: '$', |
||
78 | pattern_replace: {}, |
||
79 | exclude: [] |
||
80 | } ); |
||
81 | |||
82 | if ( 1 <= output.exclude.length ) { |
||
83 | _.each( output.exclude, function( exclusion ) { |
||
84 | if ( value == exclusion ) { |
||
85 | excluded = true; |
||
86 | } |
||
87 | } ); |
||
88 | } |
||
89 | |||
90 | if ( excluded ) { |
||
91 | return false; |
||
92 | } |
||
93 | |||
94 | value = output.value_pattern.replace( new RegExp( '\\$', 'g' ), value ); |
||
95 | _.each( output.pattern_replace, function( id, placeholder ) { |
||
96 | if ( ! _.isUndefined( settings[ id ] ) ) { |
||
97 | value = value.replace( placeholder, settings[ id ] ); |
||
98 | } |
||
99 | } ); |
||
100 | return output.prefix + value + output.units + output.suffix; |
||
101 | }, |
||
102 | |||
103 | /** |
||
104 | * Make sure urls are properly formatted for background-image properties. |
||
105 | * |
||
106 | * @since 3.0.26 |
||
107 | * @param {string} url - The URL. |
||
108 | * @returns {string} |
||
109 | */ |
||
110 | backgroundImageValue: function( url ) { |
||
111 | return ( -1 === url.indexOf( 'url(' ) ) ? 'url(' + url + ')' : url; |
||
112 | } |
||
113 | }, |
||
114 | |||
115 | /** |
||
116 | * A collection of utilities for CSS generation. |
||
117 | * |
||
118 | * @since 3.0.26 |
||
119 | */ |
||
120 | css: { |
||
121 | |||
122 | /** |
||
123 | * Generates the CSS from the output (js_vars) parameter. |
||
124 | * |
||
125 | * @since 3.0.26 |
||
126 | * @param {Object} output - The output (js_vars) argument. |
||
127 | * @param {mixed} value - The value. |
||
128 | * @param {string} controlType - The control-type. |
||
129 | * @returns {string} |
||
130 | */ |
||
131 | fromOutput: function( output, value, controlType ) { |
||
132 | var styles = '', |
||
133 | kirkiParent = window.parent.kirki, |
||
134 | googleFont = '', |
||
135 | mediaQuery = false, |
||
136 | processedValue; |
||
137 | |||
138 | if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) { |
||
139 | value = window[ output.js_callback[0] ]( value, output.js_callback[1] ); |
||
140 | } |
||
141 | switch ( controlType ) { |
||
142 | case 'kirki-typography': |
||
143 | styles += output.element + '{'; |
||
144 | _.each( value, function( val, key ) { |
||
145 | if ( output.choice && key !== output.choice ) { |
||
146 | return; |
||
147 | } |
||
148 | processedValue = kirkiPostMessage.util.processValue( output, val ); |
||
149 | if ( false !== processedValue ) { |
||
150 | styles += key + ':' + processedValue + ';'; |
||
151 | } |
||
152 | } ); |
||
0 ignored issues
–
show
|
|||
153 | styles += '}'; |
||
154 | |||
155 | // Check if this is a googlefont so that we may load it. |
||
156 | if ( ! _.isUndefined( WebFont ) && value['font-family'] && 'google' === kirkiParent.util.webfonts.getFontType( value['font-family'] ) ) { |
||
157 | |||
158 | // Calculate the googlefont params. |
||
159 | googleFont = value['font-family'].replace( /\"/g, '"' ); |
||
160 | if ( value.variant ) { |
||
161 | if ( 'regular' === value.variant ) { |
||
162 | googleFont += ':400'; |
||
163 | } else if ( 'italic' === value.variant ) { |
||
164 | googleFont += ':400i'; |
||
165 | } else { |
||
166 | googleFont += ':' + value.variant; |
||
167 | } |
||
168 | } |
||
169 | googleFont += ':cyrillic,cyrillic-ext,devanagari,greek,greek-ext,khmer,latin,latin-ext,vietnamese,hebrew,arabic,bengali,gujarati,tamil,telugu,thai'; |
||
170 | WebFont.load( { |
||
171 | google: { |
||
172 | families: [ googleFont ] |
||
173 | } |
||
174 | } ); |
||
175 | } |
||
176 | break; |
||
177 | case 'kirki-background': |
||
178 | case 'kirki-dimensions': |
||
179 | case 'kirki-multicolor': |
||
180 | case 'kirki-sortable': |
||
181 | styles += output.element + '{'; |
||
182 | _.each( value, function( val, key ) { |
||
183 | if ( output.choice && key !== output.choice ) { |
||
184 | return; |
||
185 | } |
||
186 | if ( 'background-image' === key ) { |
||
187 | val = kirkiPostMessage.util.backgroundImageValue( val ); |
||
188 | } |
||
189 | |||
190 | processedValue = kirkiPostMessage.util.processValue( output, val ); |
||
191 | |||
192 | if ( false !== processedValue ) { |
||
193 | |||
194 | // Mostly used for padding, margin & position properties. |
||
195 | if ( output.property && '' !== output.property && ( 'top' === key || 'bottom' === key || 'left' === key || 'right' === key ) ) { |
||
196 | styles += output.element + '{' + output.property + '-' + key + ':' + processedValue + ';'; |
||
197 | } else { |
||
198 | styles += key + ':' + processedValue + ';'; |
||
199 | } |
||
200 | } |
||
201 | } ); |
||
202 | styles += '}'; |
||
203 | break; |
||
204 | default: |
||
205 | if ( 'kirki-image' === controlType ) { |
||
206 | value = ( ! _.isUndefined( value.url ) ) ? kirkiPostMessage.util.backgroundImageValue( value.url ) : kirkiPostMessage.util.backgroundImageValue( value ); |
||
207 | } |
||
208 | if ( _.isObject( value ) ) { |
||
209 | styles += output.element + '{'; |
||
210 | _.each( value, function( val, key ) { |
||
211 | if ( output.choice && key !== output.choice ) { |
||
212 | return; |
||
213 | } |
||
214 | processedValue = kirkiPostMessage.util.processValue( output, val ); |
||
215 | if ( ! output.property ) { |
||
216 | output.property = key; |
||
217 | } |
||
218 | if ( false !== processedValue ) { |
||
219 | styles += output.property + ':' + processedValue + ';'; |
||
220 | } |
||
221 | } ); |
||
0 ignored issues
–
show
For multi-line function calls, the closing parenthesis should be on a new line.
If a function call spawns multiple lines, the coding standard suggests to move the closing parenthesis to a new line: someFunctionCall(
$firstArgument,
$secondArgument,
$thirdArgument
); // Closing parenthesis on a new line.
Loading history...
|
|||
222 | styles += '}'; |
||
223 | } else { |
||
224 | processedValue = kirkiPostMessage.util.processValue( output, value ); |
||
225 | if ( false !== processedValue ) { |
||
226 | styles += output.element + '{' + output.property + ':' + processedValue + ';}'; |
||
227 | } |
||
228 | } |
||
229 | break; |
||
230 | } |
||
231 | |||
232 | // Get the media-query. |
||
233 | if ( output.media_query && 'string' === typeof output.media_query && ! _.isEmpty( output.media_query ) ) { |
||
234 | mediaQuery = output.media_query; |
||
235 | if ( -1 === mediaQuery.indexOf( '@media' ) ) { |
||
236 | mediaQuery = '@media ' + mediaQuery; |
||
237 | } |
||
238 | } |
||
239 | |||
240 | // If we have a media-query, add it and return. |
||
241 | if ( mediaQuery ) { |
||
242 | return mediaQuery + '{' + styles + '}'; |
||
243 | } |
||
244 | |||
245 | // Return the styles. |
||
246 | return styles; |
||
247 | } |
||
248 | }, |
||
249 | |||
250 | /** |
||
251 | * A collection of utilities to change the HTML in the document. |
||
252 | * |
||
253 | * @since 3.0.26 |
||
254 | */ |
||
255 | html: { |
||
256 | |||
257 | /** |
||
258 | * Modifies the HTML from the output (js_vars) parameter. |
||
259 | * |
||
260 | * @since 3.0.26 |
||
261 | * @param {Object} output - The output (js_vars) argument. |
||
262 | * @param {mixed} value - The value. |
||
263 | * @returns {string} |
||
264 | */ |
||
265 | fromOutput: function( output, value ) { |
||
266 | |||
267 | if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) { |
||
268 | value = window[ output.js_callback[0] ]( value, output.js_callback[1] ); |
||
269 | } |
||
270 | |||
271 | if ( _.isObject( value ) || _.isArray( value ) ) { |
||
272 | if ( ! output.choice ) { |
||
273 | return; |
||
274 | } |
||
275 | _.each( value, function( val, key ) { |
||
0 ignored issues
–
show
|
|||
276 | if ( output.choice && key !== output.choice ) { |
||
277 | return; |
||
278 | } |
||
279 | value = val; |
||
280 | } ); |
||
281 | } |
||
282 | value = kirkiPostMessage.util.processValue( output, value ); |
||
283 | |||
284 | if ( output.attr ) { |
||
285 | jQuery( output.element ).attr( output.attr, value ); |
||
286 | } else { |
||
287 | jQuery( output.element ).html( value ); |
||
288 | } |
||
289 | } |
||
290 | }, |
||
291 | |||
292 | /** |
||
293 | * A collection of utilities to allow toggling a CSS class. |
||
294 | * |
||
295 | * @since 3.0.26 |
||
296 | */ |
||
297 | toggleClass: { |
||
298 | |||
299 | /** |
||
300 | * Toggles a CSS class from the output (js_vars) parameter. |
||
301 | * |
||
302 | * @since 3.0.21 |
||
303 | * @param {Object} output - The output (js_vars) argument. |
||
304 | * @param {mixed} value - The value. |
||
305 | * @returns {string} |
||
306 | */ |
||
307 | fromOutput: function( output, value ) { |
||
308 | if ( 'undefined' === typeof output.class || 'undefined' === typeof output.value ) { |
||
309 | return; |
||
310 | } |
||
311 | if ( value === output.value && ! jQuery( output.element ).hasClass( output.class ) ) { |
||
312 | jQuery( output.element ).addClass( output.class ); |
||
313 | } else { |
||
314 | jQuery( output.element ).removeClass( output.class ); |
||
315 | } |
||
316 | } |
||
317 | } |
||
318 | }; |
||
319 | |||
320 | jQuery( document ).ready( function() { |
||
321 | |||
322 | _.each( kirkiPostMessageFields, function( field ) { |
||
323 | wp.customize( field.settings, function( value ) { |
||
324 | value.bind( function( newVal ) { |
||
325 | var styles = ''; |
||
326 | _.each( field.js_vars, function( output ) { |
||
327 | if ( ! output.function || 'undefined' === typeof kirkiPostMessage[ output.function ] ) { |
||
328 | output.function = 'css'; |
||
329 | } |
||
330 | if ( 'css' === output.function ) { |
||
331 | styles += kirkiPostMessage.css.fromOutput( output, newVal, field.type ); |
||
332 | } else { |
||
333 | kirkiPostMessage[ output.function ].fromOutput( output, newVal, field.type ); |
||
334 | } |
||
335 | } ); |
||
336 | kirkiPostMessage.styleTag.addData( field.settings, styles ); |
||
337 | } ); |
||
338 | } ); |
||
339 | } ); |
||
340 | } ); |
||
341 |
If a function call spawns multiple lines, the coding standard suggests to move the closing parenthesis to a new line: