controls/js/src/set-setting-value.js - Code Metrics - Inspection of "postMessage refactor" - aristath/kirki - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — develop (#1708)

by Aristeides

created 2017-12-16 16:32 UTC

controls/js/src/set-setting-value.js B

↳ Parent: Project

Complexity

Total Complexity	52
Complexity/F	3.47

Size

Lines of Code	209
Function Count	15

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
nc	2
dl	0
loc	209
rs	7.9487
c	0
b	0
f	0
wmc	52
mnd	3
bc	23
fnc	15
bpm	1.5333
cpm	3.4666
noi	31

How to fix Complexity

/* jshint -W079 */
/* jshint unused:false */
if ( _.isUndefined( window.kirkiSetSettingValue ) ) {
	var kirkiSetSettingValue = { // jscs:ignore requireVarDeclFirst

		/**
		 * Set the value of the control.
		 *
		 * @since 3.0.0
		 * @param string setting The setting-ID.
		 * @param mixed  value   The value.
		 */
		set: function( setting, value ) {

			/**
			 * Get the control of the sub-setting.
			 * This will be used to get properties we need from that control,
			 * and determine if we need to do any further work based on those.
			 */
			var $this = this,
			    subControl = wp.customize.settings.controls[ setting ],
			    valueJSON;

			// If the control doesn't exist then return.
			if ( _.isUndefined( subControl ) ) {
				return true;
			}

			// First set the value in the wp object. The control type doesn't matter here.
			$this.setValue( setting, value );

			// Process visually changing the value based on the control type.
			switch ( subControl.type ) {

				case 'kirki-background':
					if ( ! _.isUndefined( value['background-color'] ) ) {
						$this.setColorPicker( $this.findElement( setting, '.kirki-color-control' ), value['background-color'] );
					}
					$this.findElement( setting, '.placeholder, .thumbnail' ).removeClass().addClass( 'placeholder' ).html( 'No file selected' );
					_.each( ['background-repeat', 'background-position'], function( subVal ) {
						if ( ! _.isUndefined( value[ subVal ] ) ) {
							$this.setSelectWoo( $this.findElement( setting, '.' + subVal + ' select' ), value[ subVal ] );
						}
					});
					_.each( ['background-size', 'background-attachment'], function( subVal ) {
						jQuery( $this.findElement( setting, '.' + subVal + ' input[value="' + value + '"]' ) ).prop( 'checked', true );
					});
					valueJSON = JSON.stringify( value ).replace( /'/g, '&#39' );
					jQuery( $this.findElement( setting, '.background-hidden-value' ).attr( 'value', valueJSON ) ).trigger( 'change' );
					break;

				case 'kirki-code':
					jQuery( $this.findElement( setting, '.CodeMirror' ) )[0].CodeMirror.setValue( value );
					break;

				case 'checkbox':
				case 'kirki-switch':
				case 'kirki-toggle':
					value = ( 1 === value || '1' === value || true === value ) ? true : false;
					jQuery( $this.findElement( setting, 'input' ) ).prop( 'checked', value );
					wp.customize.instance( setting ).set( value );
					break;

				case 'kirki-select':
				case 'kirki-preset':
				case 'kirki-fontawesome':
					$this.setSelectWoo( $this.findElement( setting, 'select' ), value );
					break;

				case 'kirki-slider':
					jQuery( $this.findElement( setting, 'input' ) ).prop( 'value', value );
					jQuery( $this.findElement( setting, '.kirki_range_value .value' ) ).html( value );
					break;

				case 'kirki-generic':
					if ( _.isUndefined( subControl.choices ) || _.isUndefined( subControl.choices.element ) ) {
						subControl.choices.element = 'input';
					}
					jQuery( $this.findElement( setting, subControl.choices.element ) ).prop( 'value', value );
					break;

				case 'kirki-color':
					$this.setColorPicker( $this.findElement( setting, '.kirki-color-control' ), value );
					break;

				case 'kirki-multicheck':
					$this.findElement( setting, 'input' ).each( function() {
						jQuery( this ).prop( 'checked', false );
					});
					_.each( value, function( subValue, i ) {
						jQuery( $this.findElement( setting, 'input[value="' + value[ i ] + '"]' ) ).prop( 'checked', true );
					});
					break;

				case 'kirki-multicolor':
					_.each( value, function( subVal, index ) {
						$this.setColorPicker( $this.findElement( setting, '.multicolor-index-' + index ), subVal );
					});
					break;

				case 'kirki-radio-buttonset':
				case 'kirki-radio-image':
				case 'kirki-radio':
				case 'kirki-dashicons':
				case 'kirki-color-palette':
				case 'kirki-palette':
					jQuery( $this.findElement( setting, 'input[value="' + value + '"]' ) ).prop( 'checked', true );
					break;

				case 'kirki-typography':
					_.each( ['font-family', 'variant', 'subsets'], function( subVal ) {
						if ( ! _.isUndefined( value[ subVal ] ) ) {
							$this.setSelectWoo( $this.findElement( setting, '.' + subVal + ' select' ), value[ subVal ] );
						}
					});
					_.each( ['font-size', 'line-height', 'letter-spacing', 'word-spacing'], function( subVal ) {
						if ( ! _.isUndefined( value[ subVal ] ) ) {
							jQuery( $this.findElement( setting, '.' + subVal + ' input' ) ).prop( 'value', value[ subVal ] );
						}
					});

					if ( ! _.isUndefined( value.color ) ) {
						$this.setColorPicker( $this.findElement( setting, '.kirki-color-control' ), value.color );
					}
					valueJSON = JSON.stringify( value ).replace( /'/g, '&#39' );
					jQuery( $this.findElement( setting, '.typography-hidden-value' ).attr( 'value', valueJSON ) ).trigger( 'change' );
					break;

				case 'kirki-dimensions':
					_.each( value, function( subValue, id ) {
						jQuery( $this.findElement( setting, '.' + id + ' input' ) ).prop( 'value', subValue );
					});
					break;

				case 'kirki-repeater':

					// Not yet implemented.
					break;

				case 'kirki-custom':

					// Do nothing.
					break;
				default:
					jQuery( $this.findElement( setting, 'input' ) ).prop( 'value', value );
			}
		},

		/**
		 * Set the value for colorpickers.
		 * CAUTION: This only sets the value visually, it does not change it in th wp object.
		 *
		 * @since 3.0.0
		 * @param object selector jQuery object for this element.
		 * @param string value    The value we want to set.
		 */
		setColorPicker: function( selector, value ) {
			selector.attr( 'data-default-color', value ).data( 'default-color', value ).wpColorPicker( 'color', value );
		},

		/**
		 * Sets the value in a selectWoo element.
		 * CAUTION: This only sets the value visually, it does not change it in th wp object.
		 *
		 * @since 3.0.0
		 * @param string selector The CSS identifier for this selectWoo.
		 * @param string value    The value we want to set.
		 */
		setSelectWoo: function( selector, value ) {
			jQuery( selector ).selectWoo().val( value ).trigger( 'change' );
		},

		/**
		 * Sets the value in textarea elements.
		 * CAUTION: This only sets the value visually, it does not change it in th wp object.
		 *
		 * @since 3.0.0
		 * @param string selector The CSS identifier for this textarea.
		 * @param string value    The value we want to set.
		 */
		setTextarea: function( selector, value ) {
			jQuery( selector ).prop( 'value', value );
		},

		/**
		 * Finds an element inside this control.
		 *
		 * @since 3.0.0
		 * @param string setting The setting ID.
		 * @param string element The CSS identifier.
		 */
		findElement: function( setting, element ) {
			return wp.customize.control( setting ).container.find( element );
		},

		/**
		 * Updates the value in the wp.customize object.
		 *
		 * @since 3.0.0
		 * @param string setting The setting-ID.
		 * @param mixed  value   The value.
		 */
		setValue: function( setting, value, timeout ) {
			timeout = ( _.isUndefined( timeout ) ) ? 100 : parseInt( timeout, 10 );
			wp.customize.instance( setting ).set({});
			setTimeout( function() {
				wp.customize.instance( setting ).set( value );
			}, timeout );
		}
	};
}


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, '&#39' );
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, '&#39' );
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

aristath / kirki

Pull Request — develop (#1708)

controls/js/src/set-setting-value.js B

Complexity

Size

Duplication

Importance

How to fix Complexity

Complexity

Duplication Side-by-Side

Filter issues like