set-setting-value.js (9382B)
1 function kirkiSetSettingValue(setting, value) { 2 /** 3 * Get the control of the sub-setting. 4 * This will be used to get properties we need from that control, 5 * and determine if we need to do any further work based on those. 6 */ 7 var subControl = wp.customize.settings.controls[setting], 8 $select, 9 selectize, 10 controlType, 11 alphaColorControl, 12 typographyColor; 13 /** 14 * Check if the control we want to affect actually exists. 15 * If not then skip the item, 16 */ 17 if (undefined === typeof subControl) { 18 return true; 19 } 20 21 /** 22 * Get the control-type of this sub-setting. 23 * We want the value to live-update on the controls themselves, 24 * so depending on the control's type we'll need to do different things. 25 */ 26 controlType = subControl.type; 27 28 /** 29 * Below we're starting to check the control tyype and depending on what that is, 30 * make the necessary adjustments to it. 31 */ 32 33 if ('kirki-checkbox' === controlType || 'kirki-switch' === controlType || 'kirki-toggle' === controlType) { 34 35 if (1 === value || '1' === value || true === value) { 36 37 // Update the value visually in the control 38 jQuery(wp.customize.control(setting).container.find('input')).prop('checked', true); 39 40 // Update the value in the customizer object 41 wp.customize.instance(setting).set(true); 42 43 } else { 44 45 // Update the value visually in the control 46 jQuery(wp.customize.control(setting).container.find('input')).prop('checked', false); 47 48 // Update the value in the customizer object 49 wp.customize.instance(setting).set(false); 50 51 } 52 53 } else if ('kirki-select' === controlType || 'kirki-preset' === controlType) { 54 55 // Update the value visually in the control 56 $select = jQuery(wp.customize.control(setting).container.find('select')).selectize(); 57 selectize = $select[0].selectize; 58 selectize.setValue(value, true); 59 60 // Update the value in the customizer object 61 wp.customize.instance(setting).set(value); 62 63 } else if ('kirki-slider' === controlType) { 64 65 // Update the value visually in the control (slider) 66 jQuery(wp.customize.control(setting).container.find('input')).prop('value', value); 67 68 // Update the value visually in the control (number) 69 jQuery(wp.customize.control(setting).container.find('.kirki_range_value .value')).html(value); 70 71 // Update the value in the customizer object 72 wp.customize.instance(setting).set(value); 73 74 } else if ('kirki-generic' === controlType && undefined !== subControl.choices && undefined !== subControl.choices.element && 'textarea' === subControl.choices.element) { 75 76 // Update the value visually in the control 77 jQuery(wp.customize.control(setting).container.find('textarea')).prop('value', value); 78 79 // Update the value in the customizer object 80 wp.customize(setting).set(value); 81 82 } else if ('kirki-color' === controlType) { 83 84 // Update the value visually in the control 85 alphaColorControl = wp.customize.control(setting).container.find('.kirki-color-control'); 86 87 alphaColorControl 88 .attr('data-default-color', value) 89 .data('default-color', value); 90 91 if (alphaColorControl.data('spectrum.id') === undefined) { 92 alphaColorControl.wpColorPicker('color', value); 93 } else { 94 alphaColorControl.spectrum("set", value); 95 } 96 97 // Update the value in the customizer object 98 wp.customize.instance(setting).set(value); 99 100 } else if ('kirki-multicheck' === controlType) { 101 102 // Update the value in the customizer object 103 wp.customize.instance(setting).set(value); 104 105 /** 106 * Update the value visually in the control. 107 * This value is an array so we'll have to go through each one of the items 108 * in order to properly apply the value and check each checkbox separately. 109 * 110 * First we uncheck ALL checkboxes in the control 111 * Then we check the ones that we want. 112 */ 113 wp.customize.control(setting).container.find('input').each(function () { 114 jQuery(this).prop('checked', false); 115 }); 116 117 _.each(value, function (subValue, i) { 118 jQuery(wp.customize.control(setting).container.find('input[value="' + value[i] + '"]')).prop('checked', true); 119 }); 120 121 } else if ('kirki-radio-buttonset' === controlType || 'kirki-radio-image' === controlType || 'kirki-radio' === controlType || 'kirki-dashicons' === controlType || 'kirki-color-palette' === controlType || 'kirki-palette' === controlType) { 122 123 // Update the value visually in the control 124 jQuery(wp.customize.control(setting).container.find('input[value="' + value + '"]')).prop('checked', true); 125 126 // Update the value in the customizer object 127 wp.customize.instance(setting).set(value); 128 129 } else if ('kirki-typography' === controlType) { 130 131 if (undefined !== value['font-family']) { 132 133 $select = jQuery(wp.customize.control(setting).container.find('.font-family select')).selectize(); 134 135 if ('undefined' !== typeof $select && $select.length) { 136 selectize = $select[0].selectize; 137 138 // Update the value visually in the control 139 selectize.setValue(value['font-family'], true); 140 } 141 142 } 143 144 145 if (undefined !== value['text-transform']) { 146 147 $select = jQuery(wp.customize.control(setting).container.find('.text-transform select')).selectize(); 148 if ('undefined' !== typeof $select && $select.length) { 149 150 151 selectize = $select[0].selectize; 152 153 // Update the value visually in the control 154 selectize.setValue(value['text-transform'], true); 155 } 156 } 157 158 if (undefined !== value.variant) { 159 160 $select = jQuery(wp.customize.control(setting).container.find('.variant select')).selectize(); 161 162 if ('undefined' !== typeof $select && $select.length) { 163 selectize = $select[0].selectize; 164 165 // Update the value visually in the control 166 selectize.setValue(value.variant, true); 167 } 168 169 } 170 171 if (undefined !== value.subsets) { 172 173 $select = jQuery(wp.customize.control(setting).container.find('.subset select')).selectize(); 174 175 if ('undefined' !== typeof $select && $select.length) { 176 selectize = $select[0].selectize; 177 178 // Update the value visually in the control 179 selectize.setValue(value.subset, true); 180 } 181 182 } 183 184 185 if (undefined !== value['font-size']) { 186 187 // Update the value visually in the control 188 jQuery(wp.customize.control(setting).container.find('.font-size input')).prop('value', value['font-size']); 189 190 } 191 192 if (undefined !== value['mobile-font-size']) { 193 194 // Update the value visually in the control 195 jQuery(wp.customize.control(setting).container.find('.mobile-font-size input')).prop('value', value['mobile-font-size']); 196 197 } 198 199 if (undefined !== value['line-height']) { 200 201 // Update the value visually in the control 202 jQuery(wp.customize.control(setting).container.find('.line-height input')).prop('value', value['line-height']); 203 204 } 205 206 if (undefined !== value['letter-spacing']) { 207 208 // Update the value visually in the control 209 jQuery(wp.customize.control(setting).container.find('.letter-spacing input')).prop('value', value['letter-spacing']); 210 211 } 212 213 if (undefined !== value.color) { 214 215 // Update the value visually in the control 216 typographyColor = wp.customize.control(setting).container.find('.kirki-color-control'); 217 218 if (typographyColor.data('spectrum.id') === undefined) { 219 typographyColor 220 .attr('data-default-color', value.color) 221 .data('default-color', value.color) 222 .wpColorPicker('color', value.color); 223 } else { 224 typographyColor.spectrum("set", value); 225 } 226 227 } 228 229 // Update the value in the customizer object 230 wp.customize.instance(setting).set(value); 231 232 } else if ('kirki-repeater' === controlType) { 233 234 // Do nothing 235 } else if ('kirki-spacing' === controlType) { 236 237 // Do nothing 238 jQuery(wp.customize.control(setting).container.find('input')).each(function () { 239 var $input = jQuery(this); 240 var position = ($input.parent().attr('class').match(/top|left|right|bottom/) || []).pop(); 241 242 if (position && value[position] !== undefined) { 243 $input.prop('value', value[position]); 244 } 245 246 247 }); 248 wp.customize.instance(setting).set(value); 249 } 250 251 /** 252 * Fallback for all other controls. 253 */ 254 else { 255 256 // Update the value visually in the control 257 jQuery(wp.customize.control(setting).container.find('input')).prop('value', value); 258 259 // Update the value in the customizer object 260 wp.customize.instance(setting).set(value); 261 262 } 263 264 }