aristath /
kirki
| @@ 3-211 (lines=209) @@ | ||
| 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 | var kirki = { |
|
| 213 | ||
| 214 | initialized: false, |
|
| @@ 3-211 (lines=209) @@ | ||
| 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 | var kirki = { |
|
| 213 | ||
| 214 | initialized: false, |
|
