controls/js/src/kirki.input.js - Code Metrics - Inspection of "Merge pull request #1655 from rinkuyadav999/master" - aristath/kirki - Measure and Improve Code Quality continuously with Scrutinizer

Test Setup Failed

Retried Inspection

Pull Request — master (#1653)

by Aristeides

created 2017-12-05 18:39 UTC

controls/js/src/kirki.input.js B

↳ Parent: Project

Complexity

Total Complexity	37
Complexity/F	2.31

Size

Lines of Code	243
Function Count	16

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	0
nc	1536
dl	0
loc	243
rs	8.6
c	0
b	0
f	0
wmc	37
mnd	2
bc	28
fnc	16
bpm	1.75
cpm	2.3125
noi	11

7 Functions

Rating	Name	Size	Complexity
A	jQuery.extend.input.select.init	19	2
A	jQuery.extend.input.genericInput.init	8	1
A	jQuery.extend.input.image.init	2	1
A	jQuery.extend.input.radio.init	8	1
B	jQuery.extend.input.color.init	35	4
A	jQuery.extend.input.textarea.init	8	1
D	jQuery.extend.input.image.getTemplate	50	15

/* global kirkiL10n */
var kirki = kirki || {};
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
kirki = jQuery.extend( kirki, {
	/**
	 * An object containing definitions for input fields.
	 *
	 * @since 3.0.16
	 */
	input: {

		/**
		 * Radio input fields.
		 *
		 * @since 3.0.17
		 */
		radio: {

			/**
			 * Init the control.
			 *
			 * @since 3.0.17
			 * @param {Object} control - The control object.
			 * @param {Object} control.id - The setting.
			 * @returns {null}
			 */
			init: function( control ) {
				var input = jQuery( 'input[data-id="' + control.id + '"]' );
if (true)
 {
    var x = "Hello, Stonehenge!";
}

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

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

		/**
		 * Color input fields.
		 *
		 * @since 3.0.16
		 */
		color: {

			/**
			 * Init the control.
			 *
			 * @since 3.0.16
			 * @param {Object} control - The control object.
			 * @param {Object} control.id - The setting.
			 * @param {Object} control.choices - Additional options for the colorpickers.
			 * @param {Object} control.params - Control parameters.
			 * @param {Object} control.params.choices - alias for control.choices.

			 * @returns {null}
			 */
			init: function( control ) {
				var picker = jQuery( '.kirki-color-control[data-id="' + control.id + '"]' ),
if (true)
 {
    var x = "Hello, Stonehenge!";
}

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

				control.choices = control.choices || {};
				if ( _.isEmpty( control.choices ) && control.params.choices ) {
					control.choices = control.params.choices;
				}

				// If we have defined any extra choices, make sure they are passed-on to Iris.
				if ( ! _.isEmpty( control.choices ) ) {
					picker.wpColorPicker( control.choices );
				}

				// Tweaks to make the "clear" buttons work.
				setTimeout( function() {
					clear = jQuery( '.kirki-input-container[data-id="' + control.id + '"] .wp-picker-clear' );
					if ( clear.length ) {
						clear.click( function() {
							kirki.setting.set( control.id, '' );
						});
					}
				}, 200 );

				// Saves our settings to the WP API
				picker.wpColorPicker({
					change: function() {

						// Small hack: the picker needs a small delay
						setTimeout( function() {
							kirki.setting.set( control.id, picker.val() );
						}, 20 );
					}
				});
			}
		},

		/**
		 * Generic input fields.
		 *
		 * @since 3.0.17
		 */
		genericInput: {

			/**
			 * Init the control.
			 *
			 * @since 3.0.17
			 * @param {Object} control - The control object.
			 * @param {Object} control.id - The setting.
			 * @returns {null}
			 */
			init: function( control ) {
				var input = jQuery( 'input[data-id="' + control.id + '"]' );
if (true)
 {
    var x = "Hello, Stonehenge!";
}

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

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

		/**
		 * Generic input fields.
		 *
		 * @since 3.0.17
		 */
		textarea: {

			/**
			 * Init the control.
			 *
			 * @since 3.0.17
			 * @param {Object} control - The control object.
			 * @param {Object} control.id - The setting.
			 * @returns {null}
			 */
			init: function( control ) {
				var textarea = jQuery( 'textarea[data-id="' + control.id + '"]' );
if (true)
 {
    var x = "Hello, Stonehenge!";
}

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

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

		select: {

			/**
			 * Init the control.
			 *
			 * @since 3.0.17
			 * @param {Object} control - The control object.
			 * @param {Object} control.id - The setting.
			 * @returns {null}
			 */
			init: function( control ) {
				var element  = jQuery( 'select[data-id="' + control.id + '"]' ),
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				    multiple = parseInt( element.data( 'multiple' ), 10 ),
				    selectValue,
				    selectWooOptions = {
						escapeMarkup: function( markup ) {
							return markup;
						}
				    };

				if ( 1 < multiple ) {
					selectWooOptions.maximumSelectionLength = multiple;
				}
				jQuery( element ).selectWoo( selectWooOptions ).on( 'change', function() {
					selectValue = jQuery( this ).val();
					selectValue = ( null === selectValue && 1 < multiple ) ? [] : selectValue;
					kirki.setting.set( control.id, selectValue );
				});
			}
		},

		image: {

			/**
			 * Get the HTML for image inputs.
			 *
			 * @since 3.0.17
			 * @param {Object} data - The arguments.
			 * @returns {string}
			 */
			getTemplate: function( data ) {
				var html   = '',
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				    saveAs = 'url',

				    url;

				data = _.defaults( data, {

					label: '',
					description: '',
					inputAttrs: '',
					'data-id': '',
					choices: {},
					value: ''
				} );

				if ( ! _.isUndefined( data.choices ) && ! _.isUndefined( data.choices.save_as ) ) {
					saveAs = data.choices.save_as;
				}
				url = data.value;
				if ( _.isObject( data.value ) && ! _.isUndefined( data.value.url ) ) {
					url = data.value.url;
				}

				html += '<label>';
				if ( data.label ) {
					html += '<span class="customize-control-title">' + data.label + '</span>';
				}
				if ( data.description ) {
					html += '<span class="description customize-control-description">' + data.description + '</span>';
				}
				html += '</label>';
				html += '<div class="image-wrapper attachment-media-view image-upload">';
				if ( data.value.url || '' !== url ) {
					html += '<div class="thumbnail thumbnail-image"><img src="' + url + '" alt="" /></div>';
				} else {
					html += '<div class="placeholder">' + kirkiL10n.noFileSelected + '</div>';
				}
				html += '<div class="actions">';
				html += '<button class="button image-upload-remove-button' + ( '' === url ? ' hidden' : '' ) + '">' + kirkiL10n.remove + '</button>';
				if ( data['default'] && '' !== data['default'] ) {
					html += '<button type="button" class="button image-default-button"';
					if ( data['default'] === data.value || ( ! _.isUndefined( data.value.url ) && data['default'] === data.value.url ) ) {
						html += ' style="display:none;"';
					}
					html += '>' + kirkiL10n['default'] + '</button>';
				}
				html += '<button type="button" class="button image-upload-button">' + kirkiL10n.selectFile + '</button>';
				html += '</div></div>';

				return '<div class="kirki-input-container" data-id="' + data.id + '">' + html + '</div>';
			},

			/**
			 * Init the control.
			 *
			 * @since 3.0.17
			 * @param {Object} control - The control object.
			 * @returns {null}
			 */
			init: function( control ) { // jshint ignore:line

			}
		}
	}
} );


1			/* global kirkiL10n */
2			var kirki = kirki \|\| {};
			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... Bug introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report The variable `kirki` seems to be never initialized. Loading history...
3			kirki = jQuery.extend( kirki, {
4			/**
5			* An object containing definitions for input fields.
6			*
7			* @since 3.0.16
8			*/
9			input: {
10
11			/**
12			* Radio input fields.
13			*
14			* @since 3.0.17
15			*/
16			radio: {
17
18			/**
19			* Init the control.
20			*
21			* @since 3.0.17
22			* @param {Object} control - The control object.
23			* @param {Object} control.id - The setting.
24			* @returns {null}
25			*/
26			init: function( control ) {
27			var input = jQuery( 'input[data-id="' + control.id + '"]' );
			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...
28
29			// Save the value
30			input.on( 'change keyup paste click', function() {
31			kirki.setting.set( control.id, jQuery( this ).val() );
32			});
33			}
34			},
35
36			/**
37			* Color input fields.
38			*
39			* @since 3.0.16
40			*/
41			color: {
42
43			/**
44			* Init the control.
45			*
46			* @since 3.0.16
47			* @param {Object} control - The control object.
48			* @param {Object} control.id - The setting.
49			* @param {Object} control.choices - Additional options for the colorpickers.
50			* @param {Object} control.params - Control parameters.
51			* @param {Object} control.params.choices - alias for control.choices.
52
53			* @returns {null}
54			*/
55			init: function( control ) {
56			var picker = jQuery( '.kirki-color-control[data-id="' + control.id + '"]' ),
			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...
57			clear;
58
59			control.choices = control.choices \|\| {};
60			if ( _.isEmpty( control.choices ) && control.params.choices ) {
61			control.choices = control.params.choices;
62			}
63
64			// If we have defined any extra choices, make sure they are passed-on to Iris.
65			if ( ! _.isEmpty( control.choices ) ) {
66			picker.wpColorPicker( control.choices );
67			}
68
69			// Tweaks to make the "clear" buttons work.
70			setTimeout( function() {
71			clear = jQuery( '.kirki-input-container[data-id="' + control.id + '"] .wp-picker-clear' );
72			if ( clear.length ) {
73			clear.click( function() {
74			kirki.setting.set( control.id, '' );
75			});
76			}
77			}, 200 );
78
79			// Saves our settings to the WP API
80			picker.wpColorPicker({
81			change: function() {
82
83			// Small hack: the picker needs a small delay
84			setTimeout( function() {
85			kirki.setting.set( control.id, picker.val() );
86			}, 20 );
87			}
88			});
89			}
90			},
91
92			/**
93			* Generic input fields.
94			*
95			* @since 3.0.17
96			*/
97			genericInput: {
98
99			/**
100			* Init the control.
101			*
102			* @since 3.0.17
103			* @param {Object} control - The control object.
104			* @param {Object} control.id - The setting.
105			* @returns {null}
106			*/
107			init: function( control ) {
108			var input = jQuery( 'input[data-id="' + control.id + '"]' );
			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...
109
110			// Save the value
111			input.on( 'change keyup paste click', function() {
112			kirki.setting.set( control.id, jQuery( this ).val() );
113			});
114			}
115			},
116
117			/**
118			* Generic input fields.
119			*
120			* @since 3.0.17
121			*/
122			textarea: {
123
124			/**
125			* Init the control.
126			*
127			* @since 3.0.17
128			* @param {Object} control - The control object.
129			* @param {Object} control.id - The setting.
130			* @returns {null}
131			*/
132			init: function( control ) {
133			var textarea = jQuery( 'textarea[data-id="' + control.id + '"]' );
			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
135			// Save the value
136			textarea.on( 'change keyup paste click', function() {
137			kirki.setting.set( control.id, jQuery( this ).val() );
138			});
139			}
140			},
141
142			select: {
143
144			/**
145			* Init the control.
146			*
147			* @since 3.0.17
148			* @param {Object} control - The control object.
149			* @param {Object} control.id - The setting.
150			* @returns {null}
151			*/
152			init: function( control ) {
153			var element = jQuery( 'select[data-id="' + control.id + '"]' ),
			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...
154			multiple = parseInt( element.data( 'multiple' ), 10 ),
155			selectValue,
156			selectWooOptions = {
157			escapeMarkup: function( markup ) {
158			return markup;
159			}
160			};
161
162			if ( 1 < multiple ) {
163			selectWooOptions.maximumSelectionLength = multiple;
164			}
165			jQuery( element ).selectWoo( selectWooOptions ).on( 'change', function() {
166			selectValue = jQuery( this ).val();
167			selectValue = ( null === selectValue && 1 < multiple ) ? [] : selectValue;
168			kirki.setting.set( control.id, selectValue );
169			});
170			}
171			},
172
173			image: {
174
175			/**
176			* Get the HTML for image inputs.
177			*
178			* @since 3.0.17
179			* @param {Object} data - The arguments.
180			* @returns {string}
181			*/
182			getTemplate: function( data ) {
183			var html = '',
			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...
184			saveAs = 'url',
			0 ignored issues – show Unused Code introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report The variable `saveAs` seems to be never used. Consider removing it. Loading history...
185			url;
186
187			data = _.defaults( data, {
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `data`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
188			label: '',
189			description: '',
190			inputAttrs: '',
191			'data-id': '',
192			choices: {},
193			value: ''
194			} );
195
196			if ( ! _.isUndefined( data.choices ) && ! _.isUndefined( data.choices.save_as ) ) {
197			saveAs = data.choices.save_as;
198			}
199			url = data.value;
200			if ( _.isObject( data.value ) && ! _.isUndefined( data.value.url ) ) {
201			url = data.value.url;
202			}
203
204			html += '<label>';
205			if ( data.label ) {
206			html += '<span class="customize-control-title">' + data.label + '</span>';
207			}
208			if ( data.description ) {
209			html += '<span class="description customize-control-description">' + data.description + '</span>';
210			}
211			html += '</label>';
212			html += '<div class="image-wrapper attachment-media-view image-upload">';
213			if ( data.value.url \|\| '' !== url ) {
214			html += '<div class="thumbnail thumbnail-image"><img src="' + url + '" alt="" /></div>';
215			} else {
216			html += '<div class="placeholder">' + kirkiL10n.noFileSelected + '</div>';
217			}
218			html += '<div class="actions">';
219			html += '<button class="button image-upload-remove-button' + ( '' === url ? ' hidden' : '' ) + '">' + kirkiL10n.remove + '</button>';
220			if ( data['default'] && '' !== data['default'] ) {
221			html += '<button type="button" class="button image-default-button"';
222			if ( data['default'] === data.value \|\| ( ! _.isUndefined( data.value.url ) && data['default'] === data.value.url ) ) {
223			html += ' style="display:none;"';
224			}
225			html += '>' + kirkiL10n['default'] + '</button>';
226			}
227			html += '<button type="button" class="button image-upload-button">' + kirkiL10n.selectFile + '</button>';
228			html += '</div></div>';
229
230			return '<div class="kirki-input-container" data-id="' + data.id + '">' + html + '</div>';
231			},
232
233			/**
234			* Init the control.
235			*
236			* @since 3.0.17
237			* @param {Object} control - The control object.
238			* @returns {null}
239			*/
240			init: function( control ) { // jshint ignore:line
			0 ignored issues – show Unused Code introduced 2017-12-03 15:28 UTC by Report Bug Copy Issue Report The parameter `control` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
241			}
242			}
243			}
244			} );
245

aristath / kirki

Pull Request — master (#1653)

controls/js/src/kirki.input.js B

Complexity

Size

Duplication

Importance

7 Functions

Duplication Side-by-Side

Filter issues like