controls/js/src/dynamic-control.js - Code Metrics - Inspection of "3.0.17" - aristath/kirki - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — master (#1653)

by Aristeides

created 2017-12-03 16:53 UTC

controls/js/src/dynamic-control.js B

↳ Parent: controls/js/src/dynamic-control.js

Complexity

Conditions	1
Paths	216

Size

Total Lines

219

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
nc	216
nop	0
dl	0
loc	219
rs	7.8341
c	0
b	0
f	0

9 Functions

Rating	Name	Size	Complexity
A	wp.customize.Control.extend.embed	20	2
A	wp.customize.Control.extend.actuallyEmbed	8	2
A	wp.customize.Control.extend.initKirkiControl	11	2
A	wp.customize.Control.extend.focus	5	1
A	wp.customize.Control.extend.ready	12	1
D	wp.customize.Control.extend.kirkiValidateCSSValue	27	9
A	wp.customize.Control.extend._setUpSettingRootLinks	15	1
A	wp.customize.Control.extend.initialize	17	3
B	wp.customize.Control.extend._setUpSettingPropertyLinks	35	2

How to fix Long Method

/* global kirki */
/**
 * The majority of the code in this file
 * is derived from the wp-customize-posts plugin
 * and the work of @westonruter to whom I am very grateful.
 *
 * @see https://github.com/xwp/wp-customize-posts
 */

( function() {
	'use strict';

	/**
	 * A dynamic color-alpha control.
	 *
	 * @class
	 * @augments wp.customize.Control
	 * @augments wp.customize.Class
	 */
	wp.customize.kirkiDynamicControl = wp.customize.Control.extend({

		initialize: function( id, options ) {
			var control = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
			    args    = options || {};

			args.params = args.params || {};
			if ( ! args.params.type ) {
				args.params.type = 'kirki-generic';
			}
			if ( ! args.params.content ) {
				args.params.content = jQuery( '<li></li>' );
				args.params.content.attr( 'id', 'customize-control-' + id.replace( /]/g, '' ).replace( /\[/g, '-' ) );
				args.params.content.attr( 'class', 'customize-control customize-control-' + args.params.type );
			}

			control.propertyElements = [];
			wp.customize.Control.prototype.initialize.call( control, id, args );
		},

		/**
		 * Add bidirectional data binding links between inputs and the setting(s).
		 *
		 * This is copied from wp.customize.Control.prototype.initialize(). It
		 * should be changed in Core to be applied once the control is embedded.
		 *
		 * @private
		 * @returns {null}
		 */
		_setUpSettingRootLinks: function() {
			var control = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
			    nodes   = control.container.find( '[data-customize-setting-link]' );

			nodes.each( function() {
				var node = jQuery( this );
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

				wp.customize( node.data( 'customizeSettingLink' ), function( setting ) {
					var element = new wp.customize.Element( node );
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
					control.elements.push( element );
					element.sync( setting );
					element.set( setting() );
				});
			});
		},

		/**
		 * Add bidirectional data binding links between inputs and the setting properties.
		 *
		 * @private
		 * @returns {null}
		 */
		_setUpSettingPropertyLinks: function() {
			var control = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
			    nodes;

			if ( ! control.setting ) {
				return;
			}

			nodes = control.container.find( '[data-customize-setting-property-link]' );

			nodes.each( function() {
				var node = jQuery( this ),
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				    element,
				    propertyName = node.data( 'customizeSettingPropertyLink' );

				element = new wp.customize.Element( node );
				control.propertyElements.push( element );
				element.set( control.setting()[ propertyName ] );

				element.bind( function( newPropertyValue ) {
					var newSetting = control.setting();
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
					if ( newPropertyValue === newSetting[ propertyName ] ) {
						return;
					}
					newSetting = _.clone( newSetting );
					newSetting[ propertyName ] = newPropertyValue;
					control.setting.set( newSetting );
				} );
				control.setting.bind( function( newValue ) {
					if ( newValue[ propertyName ] !== element.get() ) {
						element.set( newValue[ propertyName ] );
					}
				} );
			});
		},

		/**
		 * @inheritdoc
		 */
		ready: function() {
			var control = this;
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

			control._setUpSettingRootLinks();
			control._setUpSettingPropertyLinks();

			wp.customize.Control.prototype.ready.call( control );

			control.deferred.embedded.done( function() {
				control.initKirkiControl( control );
			});
		},

		/**
		 * Embed the control in the document.
		 *
		 * Override the embed() method to do nothing,
		 * so that the control isn't embedded on load,
		 * unless the containing section is already expanded.
		 *
		 * @returns {null}
		 */
		embed: function() {
			var control   = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
			    sectionId = control.section();

			if ( ! sectionId ) {
				return;
			}

			wp.customize.section( sectionId, function( section ) {
				if ( 'kirki-expanded' === section.params.type || section.expanded() || wp.customize.settings.autofocus.control === control.id ) {
					control.actuallyEmbed();
				} else {
					section.expanded.bind( function( expanded ) {
						if ( expanded ) {
							control.actuallyEmbed();
						}
					} );
				}
			} );
		},

		/**
		 * Deferred embedding of control when actually
		 *
		 * This function is called in Section.onChangeExpanded() so the control
		 * will only get embedded when the Section is first expanded.
		 *
		 * @returns {null}
		 */
		actuallyEmbed: function() {
			var control = this;
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
			if ( 'resolved' === control.deferred.embedded.state() ) {
				return;
			}
			control.renderContent();
			control.deferred.embedded.resolve(); // This triggers control.ready().
		},

		/**
		 * This is not working with autofocus.
		 *
		 * @param {object} [args] Args.
		 * @returns {null}
		 */
		focus: function( args ) {
			var control = this;
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
			control.actuallyEmbed();
			wp.customize.Control.prototype.focus.call( control, args );
		},

		/**
		 * Additional actions that run on ready.
		 *
		 * @param {object} [args] Args.

		 * @returns {null}
		 */
		initKirkiControl: function( control ) {
			if ( 'undefined' !== typeof kirki.control[ control.params.type ] ) {
				kirki.control[ control.params.type ].init( control );
				return;
			}

			// Save the value
			this.container.on( 'change keyup paste click', 'input', function() {
				control.setting.set( jQuery( this ).val() );
			});
		},

		kirkiValidateCSSValue: function( value ) {

			var validUnits = ['rem', 'em', 'ex', '%', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'vh', 'vw', 'vmin', 'vmax'],
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				numericValue,
				unit;

			// 0 is always a valid value, and we can't check calc() values effectively.
			if ( '0' === value || ( 0 <= value.indexOf( 'calc(' ) && 0 <= value.indexOf( ')' ) ) ) {
				return true;
			}

			if ( 'auto' === value || 'inherit' === value || 'initial' === value ) {
				return true;
			}

			// Get the numeric value.
			numericValue = parseFloat( value );

			// Get the unit
			unit = value.replace( numericValue, '' );

			// Check the validity of the numeric value and units.
			if ( isNaN( numericValue ) || -1 === jQuery.inArray( unit, validUnits ) ) {
				return false;
			}
			return true;
		}
	});
})();

_.each( kirki.control, function( obj, type ) {
	wp.customize.controlConstructor[ type ] = wp.customize.kirkiDynamicControl.extend({});
} );


1			/* global kirki */
2			/**
3			* The majority of the code in this file
4			* is derived from the wp-customize-posts plugin
5			* and the work of @westonruter to whom I am very grateful.
6			*
7			* @see https://github.com/xwp/wp-customize-posts
8			*/
9
10			( function() {
11			'use strict';
12
13			/**
14			* A dynamic color-alpha control.
15			*
16			* @class
17			* @augments wp.customize.Control
18			* @augments wp.customize.Class
19			*/
20			wp.customize.kirkiDynamicControl = wp.customize.Control.extend({
21
22			initialize: function( id, options ) {
23			var control = this,
			0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined 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. Loading history...
24			args = options \|\| {};
25
26			args.params = args.params \|\| {};
27			if ( ! args.params.type ) {
28			args.params.type = 'kirki-generic';
29			}
30			if ( ! args.params.content ) {
31			args.params.content = jQuery( '<li></li>' );
32			args.params.content.attr( 'id', 'customize-control-' + id.replace( /]/g, '' ).replace( /\[/g, '-' ) );
33			args.params.content.attr( 'class', 'customize-control customize-control-' + args.params.type );
34			}
35
36			control.propertyElements = [];
37			wp.customize.Control.prototype.initialize.call( control, id, args );
38			},
39
40			/**
41			* Add bidirectional data binding links between inputs and the setting(s).
42			*
43			* This is copied from wp.customize.Control.prototype.initialize(). It
44			* should be changed in Core to be applied once the control is embedded.
45			*
46			* @private
47			* @returns {null}
48			*/
49			_setUpSettingRootLinks: function() {
50			var control = this,
			0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined 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. Loading history...
51			nodes = control.container.find( '[data-customize-setting-link]' );
52
53			nodes.each( function() {
54			var node = jQuery( this );
			0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined 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. Loading history...
55
56			wp.customize( node.data( 'customizeSettingLink' ), function( setting ) {
57			var element = new wp.customize.Element( node );
			0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined 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. Loading history...
58			control.elements.push( element );
59			element.sync( setting );
60			element.set( setting() );
61			});
62			});
63			},
64
65			/**
66			* Add bidirectional data binding links between inputs and the setting properties.
67			*
68			* @private
69			* @returns {null}
70			*/
71			_setUpSettingPropertyLinks: function() {
72			var control = this,
			0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined 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. Loading history...
73			nodes;
74
75			if ( ! control.setting ) {
76			return;
77			}
78
79			nodes = control.container.find( '[data-customize-setting-property-link]' );
80
81			nodes.each( function() {
82			var node = jQuery( this ),
			0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined 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. Loading history...
83			element,
84			propertyName = node.data( 'customizeSettingPropertyLink' );
85
86			element = new wp.customize.Element( node );
87			control.propertyElements.push( element );
88			element.set( control.setting()[ propertyName ] );
89
90			element.bind( function( newPropertyValue ) {
91			var newSetting = control.setting();
			0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined 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. Loading history...
92			if ( newPropertyValue === newSetting[ propertyName ] ) {
93			return;
94			}
95			newSetting = _.clone( newSetting );
96			newSetting[ propertyName ] = newPropertyValue;
97			control.setting.set( newSetting );
98			} );
99			control.setting.bind( function( newValue ) {
100			if ( newValue[ propertyName ] !== element.get() ) {
101			element.set( newValue[ propertyName ] );
102			}
103			} );
104			});
105			},
106
107			/**
108			* @inheritdoc
109			*/
110			ready: function() {
111			var control = this;
			0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined 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. Loading history...
112
113			control._setUpSettingRootLinks();
114			control._setUpSettingPropertyLinks();
115
116			wp.customize.Control.prototype.ready.call( control );
117
118			control.deferred.embedded.done( function() {
119			control.initKirkiControl( control );
120			});
121			},
122
123			/**
124			* Embed the control in the document.
125			*
126			* Override the embed() method to do nothing,
127			* so that the control isn't embedded on load,
128			* unless the containing section is already expanded.
129			*
130			* @returns {null}
131			*/
132			embed: function() {
133			var control = this,
			0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined 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. Loading history...
134			sectionId = control.section();
135
136			if ( ! sectionId ) {
137			return;
138			}
139
140			wp.customize.section( sectionId, function( section ) {
141			if ( 'kirki-expanded' === section.params.type \|\| section.expanded() \|\| wp.customize.settings.autofocus.control === control.id ) {
142			control.actuallyEmbed();
143			} else {
144			section.expanded.bind( function( expanded ) {
145			if ( expanded ) {
146			control.actuallyEmbed();
147			}
148			} );
149			}
150			} );
151			},
152
153			/**
154			* Deferred embedding of control when actually
155			*
156			* This function is called in Section.onChangeExpanded() so the control
157			* will only get embedded when the Section is first expanded.
158			*
159			* @returns {null}
160			*/
161			actuallyEmbed: function() {
162			var control = this;
			0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined 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. Loading history...
163			if ( 'resolved' === control.deferred.embedded.state() ) {
164			return;
165			}
166			control.renderContent();
167			control.deferred.embedded.resolve(); // This triggers control.ready().
168			},
169
170			/**
171			* This is not working with autofocus.
172			*
173			* @param {object} [args] Args.
174			* @returns {null}
175			*/
176			focus: function( args ) {
177			var control = this;
			0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined 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. Loading history...
178			control.actuallyEmbed();
179			wp.customize.Control.prototype.focus.call( control, args );
180			},
181
182			/**
183			* Additional actions that run on ready.
184			*
185			* @param {object} [args] Args.
			0 ignored issues – show Documentation introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report The parameter `args` does not exist. Did you maybe forget to remove this comment? Loading history...
186			* @returns {null}
187			*/
188			initKirkiControl: function( control ) {
189			if ( 'undefined' !== typeof kirki.control[ control.params.type ] ) {
190			kirki.control[ control.params.type ].init( control );
191			return;
192			}
193
194			// Save the value
195			this.container.on( 'change keyup paste click', 'input', function() {
196			control.setting.set( jQuery( this ).val() );
197			});
198			},
199
200			kirkiValidateCSSValue: function( value ) {
201
202			var validUnits = ['rem', 'em', 'ex', '%', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'vh', 'vw', 'vmin', 'vmax'],
			0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined 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. Loading history...
203			numericValue,
204			unit;
205
206			// 0 is always a valid value, and we can't check calc() values effectively.
207			if ( '0' === value \|\| ( 0 <= value.indexOf( 'calc(' ) && 0 <= value.indexOf( ')' ) ) ) {
208			return true;
209			}
210
211			if ( 'auto' === value \|\| 'inherit' === value \|\| 'initial' === value ) {
212			return true;
213			}
214
215			// Get the numeric value.
216			numericValue = parseFloat( value );
217
218			// Get the unit
219			unit = value.replace( numericValue, '' );
220
221			// Check the validity of the numeric value and units.
222			if ( isNaN( numericValue ) \|\| -1 === jQuery.inArray( unit, validUnits ) ) {
223			return false;
224			}
225			return true;
226			}
227			});
228			})();
229
230			_.each( kirki.control, function( obj, type ) {
231			wp.customize.controlConstructor[ type ] = wp.customize.kirkiDynamicControl.extend({});
232			} );
233

aristath / kirki

Pull Request — master (#1653)

controls/js/src/dynamic-control.js B

Complexity

Size

Duplication

Importance

9 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like