1
|
|
|
/* jshint -W079 */ |
2
|
|
|
/* jshint unused:false */ |
3
|
|
|
if ( _.isUndefined( window.kirkiSetSettingValue ) ) { |
4
|
|
|
var kirkiSetSettingValue = { // jscs:ignore requireVarDeclFirst |
|
|
|
|
5
|
|
|
|
6
|
|
|
/** |
7
|
|
|
* Set the value of the control. |
8
|
|
|
* |
9
|
|
|
* @since 3.0.0 |
10
|
|
|
* @param string setting The setting-ID. |
|
|
|
|
11
|
|
|
* @param mixed value The value. |
|
|
|
|
12
|
|
|
*/ |
13
|
|
|
set: function( setting, value ) { |
14
|
|
|
|
15
|
|
|
/** |
16
|
|
|
* Get the control of the sub-setting. |
17
|
|
|
* This will be used to get properties we need from that control, |
18
|
|
|
* and determine if we need to do any further work based on those. |
19
|
|
|
*/ |
20
|
|
|
var $this = this, |
|
|
|
|
21
|
|
|
subControl = wp.customize.settings.controls[ setting ], |
22
|
|
|
valueJSON; |
23
|
|
|
|
24
|
|
|
// If the control doesn't exist then return. |
25
|
|
|
if ( _.isUndefined( subControl ) ) { |
26
|
|
|
return true; |
27
|
|
|
} |
28
|
|
|
|
29
|
|
|
// First set the value in the wp object. The control type doesn't matter here. |
30
|
|
|
$this.setValue( setting, value ); |
31
|
|
|
|
32
|
|
|
// Process visually changing the value based on the control type. |
33
|
|
|
switch ( subControl.type ) { |
34
|
|
|
|
35
|
|
|
case 'kirki-background': |
36
|
|
|
if ( ! _.isUndefined( value['background-color'] ) ) { |
37
|
|
|
$this.setColorPicker( $this.findElement( setting, '.kirki-color-control' ), value['background-color'] ); |
38
|
|
|
} |
39
|
|
|
$this.findElement( setting, '.placeholder, .thumbnail' ).removeClass().addClass( 'placeholder' ).html( 'No file selected' ); |
40
|
|
|
_.each( ['background-repeat', 'background-position'], function( subVal ) { |
41
|
|
|
if ( ! _.isUndefined( value[ subVal ] ) ) { |
42
|
|
|
$this.setSelectWoo( $this.findElement( setting, '.' + subVal + ' select' ), value[ subVal ] ); |
43
|
|
|
} |
44
|
|
|
}); |
45
|
|
|
_.each( ['background-size', 'background-attachment'], function( subVal ) { |
46
|
|
|
jQuery( $this.findElement( setting, '.' + subVal + ' input[value="' + value + '"]' ) ).prop( 'checked', true ); |
47
|
|
|
}); |
48
|
|
|
valueJSON = JSON.stringify( value ).replace( /'/g, ''' ); |
49
|
|
|
jQuery( $this.findElement( setting, '.background-hidden-value' ).attr( 'value', valueJSON ) ).trigger( 'change' ); |
50
|
|
|
break; |
|
|
|
|
51
|
|
|
|
52
|
|
|
case 'kirki-code': |
53
|
|
|
jQuery( $this.findElement( setting, '.CodeMirror' ) )[0].CodeMirror.setValue( value ); |
54
|
|
|
break; |
|
|
|
|
55
|
|
|
|
56
|
|
|
case 'checkbox': |
57
|
|
|
case 'kirki-switch': |
58
|
|
|
case 'kirki-toggle': |
59
|
|
|
value = ( 1 === value || '1' === value || true === value ) ? true : false; |
|
|
|
|
60
|
|
|
jQuery( $this.findElement( setting, 'input' ) ).prop( 'checked', value ); |
61
|
|
|
wp.customize.instance( setting ).set( value ); |
62
|
|
|
break; |
|
|
|
|
63
|
|
|
|
64
|
|
|
case 'kirki-select': |
65
|
|
|
case 'kirki-preset': |
66
|
|
|
case 'kirki-fontawesome': |
67
|
|
|
$this.setSelectWoo( $this.findElement( setting, 'select' ), value ); |
68
|
|
|
break; |
|
|
|
|
69
|
|
|
|
70
|
|
|
case 'kirki-slider': |
71
|
|
|
jQuery( $this.findElement( setting, 'input' ) ).prop( 'value', value ); |
72
|
|
|
jQuery( $this.findElement( setting, '.kirki_range_value .value' ) ).html( value ); |
73
|
|
|
break; |
|
|
|
|
74
|
|
|
|
75
|
|
|
case 'kirki-generic': |
76
|
|
|
if ( _.isUndefined( subControl.choices ) || _.isUndefined( subControl.choices.element ) ) { |
77
|
|
|
subControl.choices.element = 'input'; |
78
|
|
|
} |
79
|
|
|
jQuery( $this.findElement( setting, subControl.choices.element ) ).prop( 'value', value ); |
80
|
|
|
break; |
|
|
|
|
81
|
|
|
|
82
|
|
|
case 'kirki-color': |
83
|
|
|
$this.setColorPicker( $this.findElement( setting, '.kirki-color-control' ), value ); |
84
|
|
|
break; |
|
|
|
|
85
|
|
|
|
86
|
|
|
case 'kirki-multicheck': |
87
|
|
|
$this.findElement( setting, 'input' ).each( function() { |
88
|
|
|
jQuery( this ).prop( 'checked', false ); |
89
|
|
|
}); |
90
|
|
|
_.each( value, function( subValue, i ) { |
91
|
|
|
jQuery( $this.findElement( setting, 'input[value="' + value[ i ] + '"]' ) ).prop( 'checked', true ); |
92
|
|
|
}); |
93
|
|
|
break; |
|
|
|
|
94
|
|
|
|
95
|
|
|
case 'kirki-multicolor': |
96
|
|
|
_.each( value, function( subVal, index ) { |
97
|
|
|
$this.setColorPicker( $this.findElement( setting, '.multicolor-index-' + index ), subVal ); |
98
|
|
|
}); |
99
|
|
|
break; |
|
|
|
|
100
|
|
|
|
101
|
|
|
case 'kirki-radio-buttonset': |
102
|
|
|
case 'kirki-radio-image': |
103
|
|
|
case 'kirki-radio': |
104
|
|
|
case 'kirki-dashicons': |
105
|
|
|
case 'kirki-color-palette': |
106
|
|
|
case 'kirki-palette': |
107
|
|
|
jQuery( $this.findElement( setting, 'input[value="' + value + '"]' ) ).prop( 'checked', true ); |
108
|
|
|
break; |
|
|
|
|
109
|
|
|
|
110
|
|
|
case 'kirki-typography': |
111
|
|
|
_.each( ['font-family', 'variant', 'subsets'], function( subVal ) { |
112
|
|
|
if ( ! _.isUndefined( value[ subVal ] ) ) { |
113
|
|
|
$this.setSelectWoo( $this.findElement( setting, '.' + subVal + ' select' ), value[ subVal ] ); |
114
|
|
|
} |
115
|
|
|
}); |
116
|
|
|
_.each( ['font-size', 'line-height', 'letter-spacing', 'word-spacing'], function( subVal ) { |
117
|
|
|
if ( ! _.isUndefined( value[ subVal ] ) ) { |
118
|
|
|
jQuery( $this.findElement( setting, '.' + subVal + ' input' ) ).prop( 'value', value[ subVal ] ); |
119
|
|
|
} |
120
|
|
|
}); |
121
|
|
|
|
122
|
|
|
if ( ! _.isUndefined( value.color ) ) { |
123
|
|
|
$this.setColorPicker( $this.findElement( setting, '.kirki-color-control' ), value.color ); |
124
|
|
|
} |
125
|
|
|
valueJSON = JSON.stringify( value ).replace( /'/g, ''' ); |
126
|
|
|
jQuery( $this.findElement( setting, '.typography-hidden-value' ).attr( 'value', valueJSON ) ).trigger( 'change' ); |
127
|
|
|
break; |
|
|
|
|
128
|
|
|
|
129
|
|
|
case 'kirki-dimensions': |
130
|
|
|
_.each( value, function( subValue, id ) { |
131
|
|
|
jQuery( $this.findElement( setting, '.' + id + ' input' ) ).prop( 'value', subValue ); |
132
|
|
|
}); |
133
|
|
|
break; |
|
|
|
|
134
|
|
|
|
135
|
|
|
case 'kirki-repeater': |
136
|
|
|
|
137
|
|
|
// Not yet implemented. |
138
|
|
|
break; |
|
|
|
|
139
|
|
|
|
140
|
|
|
case 'kirki-custom': |
141
|
|
|
|
142
|
|
|
// Do nothing. |
143
|
|
|
break; |
|
|
|
|
144
|
|
|
default: |
145
|
|
|
jQuery( $this.findElement( setting, 'input' ) ).prop( 'value', value ); |
|
|
|
|
146
|
|
|
} |
147
|
|
|
}, |
148
|
|
|
|
149
|
|
|
/** |
150
|
|
|
* Set the value for colorpickers. |
151
|
|
|
* CAUTION: This only sets the value visually, it does not change it in th wp object. |
152
|
|
|
* |
153
|
|
|
* @since 3.0.0 |
154
|
|
|
* @param object selector jQuery object for this element. |
|
|
|
|
155
|
|
|
* @param string value The value we want to set. |
|
|
|
|
156
|
|
|
*/ |
157
|
|
|
setColorPicker: function( selector, value ) { |
158
|
|
|
selector.attr( 'data-default-color', value ).data( 'default-color', value ).wpColorPicker( 'color', value ); |
159
|
|
|
}, |
160
|
|
|
|
161
|
|
|
/** |
162
|
|
|
* Sets the value in a selectWoo element. |
163
|
|
|
* CAUTION: This only sets the value visually, it does not change it in th wp object. |
164
|
|
|
* |
165
|
|
|
* @since 3.0.0 |
166
|
|
|
* @param string selector The CSS identifier for this selectWoo. |
|
|
|
|
167
|
|
|
* @param string value The value we want to set. |
|
|
|
|
168
|
|
|
*/ |
169
|
|
|
setSelectWoo: function( selector, value ) { |
170
|
|
|
jQuery( selector ).selectWoo().val( value ).trigger( 'change' ); |
171
|
|
|
}, |
172
|
|
|
|
173
|
|
|
/** |
174
|
|
|
* Sets the value in textarea elements. |
175
|
|
|
* CAUTION: This only sets the value visually, it does not change it in th wp object. |
176
|
|
|
* |
177
|
|
|
* @since 3.0.0 |
178
|
|
|
* @param string selector The CSS identifier for this textarea. |
|
|
|
|
179
|
|
|
* @param string value The value we want to set. |
|
|
|
|
180
|
|
|
*/ |
181
|
|
|
setTextarea: function( selector, value ) { |
182
|
|
|
jQuery( selector ).prop( 'value', value ); |
183
|
|
|
}, |
184
|
|
|
|
185
|
|
|
/** |
186
|
|
|
* Finds an element inside this control. |
187
|
|
|
* |
188
|
|
|
* @since 3.0.0 |
189
|
|
|
* @param string setting The setting ID. |
|
|
|
|
190
|
|
|
* @param string element The CSS identifier. |
|
|
|
|
191
|
|
|
*/ |
192
|
|
|
findElement: function( setting, element ) { |
193
|
|
|
return wp.customize.control( setting ).container.find( element ); |
194
|
|
|
}, |
195
|
|
|
|
196
|
|
|
/** |
197
|
|
|
* Updates the value in the wp.customize object. |
198
|
|
|
* |
199
|
|
|
* @since 3.0.0 |
200
|
|
|
* @param string setting The setting-ID. |
|
|
|
|
201
|
|
|
* @param mixed value The value. |
|
|
|
|
202
|
|
|
*/ |
203
|
|
|
setValue: function( setting, value, timeout ) { |
204
|
|
|
timeout = ( _.isUndefined( timeout ) ) ? 100 : parseInt( timeout, 10 ); |
|
|
|
|
205
|
|
|
wp.customize.instance( setting ).set({}); |
206
|
|
|
setTimeout( function() { |
207
|
|
|
wp.customize.instance( setting ).set( value ); |
208
|
|
|
}, timeout ); |
209
|
|
|
} |
210
|
|
|
}; |
211
|
|
|
} |
212
|
|
|
|
Since ECMAScript 6, you can create block-scoped vars or constants with the keywords
let
orconst
. These variables/constants are only valid in the code block where they have been declared.Consider the following two pieces of code:
and
The variable is not defined otuside of its block. This limits bleeding of variables into other contexts.
To know more about this ECMA6 feature, look at the MDN pages on let and const.