controls/js/src/image.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/image.js B

↳ Parent: Project

Complexity

Total Complexity	49
Complexity/F	4.9

Size

Lines of Code	183
Function Count	10

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	0
nc	75264
dl	0
loc	183
rs	8.5454
c	0
b	0
f	0
wmc	49
mnd	2
bc	32
fnc	10
bpm	3.2
cpm	4.9
noi	9

4 Functions

Rating	Name	Size	Complexity
A	wp.customize.Control.extend.ready	13	3
D	wp.customize.Control.extend.initKirkiControl	128	19
B	wp.customize.Control.extend.saveValue	17	5
B	wp.customize.Control.extend.getValue	12	5

How to fix Complexity

/* global kirkiControlLoader */
wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend({

	// When we're finished loading continue processing
	ready: function() {

		'use strict';

		var control = this;
if (true)
 {
    var x = "Hello, Stonehenge!";
}

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

		// Init the control.
		if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) {
			kirkiControlLoader( control );
		} else {
			control.initKirkiControl();
		}
	},

	initKirkiControl: function() {

		var control       = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
		    value         = control.getValue(),
		    saveAs        = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url',
		    preview       = control.container.find( '.placeholder, .thumbnail' ),
		    previewImage  = ( 'array' === saveAs ) ? value.url : value,
		    removeButton  = control.container.find( '.image-upload-remove-button' ),
		    defaultButton = control.container.find( '.image-default-button' );

		control.container.find( '.kirki-controls-loading-spinner' ).hide();

		// Tweaks for save_as = id.
		if ( ( 'id' === saveAs || 'ID' === saveAs ) && '' !== value ) {
			wp.media.attachment( value ).fetch().then( function() {
				setTimeout( function() {
					var url = wp.media.attachment( value ).get( 'url' );
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
					preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + url + '" alt="" />' );
				}, 700 );
			} );
		}

		// If value is not empty, hide the "default" button.
		if ( ( 'url' === saveAs && '' !== value ) || ( 'array' === saveAs && ! _.isUndefined( value.url ) && '' !== value.url ) ) {
			control.container.find( 'image-default-button' ).hide();
		}

		// If value is empty, hide the "remove" button.
		if ( ( 'url' === saveAs && '' === value ) || ( 'array' === saveAs && ( _.isUndefined( value.url ) || '' === value.url ) ) ) {
			removeButton.hide();
		}

		// If value is default, hide the default button.
		if ( value === control.params['default'] ) {
			control.container.find( 'image-default-button' ).hide();
		}

		if ( '' !== previewImage ) {
			preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
		}

		control.container.on( 'click', '.image-upload-button', function( e ) {
			var image = wp.media({ multiple: false }).open().on( 'select', function() {
if (true)
 {
    var x = "Hello, Stonehenge!";
}

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

					// This will return the selected image from the Media Uploader, the result is an object.
					var uploadedImage = image.state().get( 'selection' ).first(),
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
					    previewImage  = uploadedImage.toJSON().sizes.full.url;

					if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) {
						previewImage = uploadedImage.toJSON().sizes.medium.url;
					} else if ( ! _.isUndefined( uploadedImage.toJSON().sizes.thumbnail ) ) {
						previewImage = uploadedImage.toJSON().sizes.thumbnail.url;
					}

					if ( 'array' === saveAs ) {
						control.saveValue( 'id', uploadedImage.toJSON().id );
						control.saveValue( 'url', uploadedImage.toJSON().sizes.full.url );
						control.saveValue( 'width', uploadedImage.toJSON().width );
						control.saveValue( 'height', uploadedImage.toJSON().height );
					} else if ( 'id' === saveAs ) {
						control.saveValue( 'id', uploadedImage.toJSON().id );
					} else {
						control.saveValue( 'url', uploadedImage.toJSON().sizes.full.url );
					}

					if ( preview.length ) {
						preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
					}
					if ( removeButton.length ) {
						removeButton.show();
						defaultButton.hide();
					}
			    });

			e.preventDefault();
		});

		control.container.on( 'click', '.image-upload-remove-button', function( e ) {

			var preview,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

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

			e.preventDefault();

			control.saveValue( 'id', '' );
			control.saveValue( 'url', '' );
			control.saveValue( 'width', '' );
			control.saveValue( 'height', '' );

			preview       = control.container.find( '.placeholder, .thumbnail' );
			removeButton  = control.container.find( '.image-upload-remove-button' );
			defaultButton = control.container.find( '.image-default-button' );

			if ( preview.length ) {
				preview.removeClass().addClass( 'placeholder' ).html( 'No file selected' );
			}
			if ( removeButton.length ) {
				removeButton.hide();
				if ( jQuery( defaultButton ).hasClass( 'button' ) ) {
					defaultButton.show();
				}
			}
		});

		control.container.on( 'click', '.image-default-button', function( e ) {

			var preview,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

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

			e.preventDefault();

			control.saveValue( 'url', control.params['default'] );

			preview       = control.container.find( '.placeholder, .thumbnail' );
			removeButton  = control.container.find( '.image-upload-remove-button' );
			defaultButton = control.container.find( '.image-default-button' );

			if ( preview.length ) {
				preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + control.params['default'] + '" alt="" />' );
			}
			if ( removeButton.length ) {
				removeButton.show();
				defaultButton.hide();
			}
		});
	},

	/**
	 * Gets the value.
	 */
	getValue: function() {
		var control = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
		    value   = control.setting._value,
		    saveAs  = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url';

		if ( 'array' === saveAs && _.isString( value ) ) {
			value = {
				url: value
			};
		}
		return value;
	},

	/**
	 * Saves the value.
	 */
	saveValue: function( property, value ) {
		var control   = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
		    valueOld  = control.setting._value,
		    saveAs    = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url';

		if ( 'array' === saveAs ) {
			if ( _.isString( valueOld ) ) {
				valueOld = {};
			}
			valueOld[ property ] = value;
			control.setting.set( valueOld );
			control.container.find( 'button' ).trigger( 'change' );
			return;
		}
		control.setting.set( value );
		control.container.find( 'button' ).trigger( 'change' );
	}
});


1			/* global kirkiControlLoader */
2			wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend({
3
4			// When we're finished loading continue processing
5			ready: function() {
6
7			'use strict';
8
9			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...
10
11			// Init the control.
12			if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) {
13			kirkiControlLoader( control );
14			} else {
15			control.initKirkiControl();
16			}
17			},
18
19			initKirkiControl: function() {
20
21			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...
22			value = control.getValue(),
23			saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url',
24			preview = control.container.find( '.placeholder, .thumbnail' ),
25			previewImage = ( 'array' === saveAs ) ? value.url : value,
26			removeButton = control.container.find( '.image-upload-remove-button' ),
27			defaultButton = control.container.find( '.image-default-button' );
28
29			control.container.find( '.kirki-controls-loading-spinner' ).hide();
30
31			// Tweaks for save_as = id.
32			if ( ( 'id' === saveAs \|\| 'ID' === saveAs ) && '' !== value ) {
33			wp.media.attachment( value ).fetch().then( function() {
34			setTimeout( function() {
35			var url = wp.media.attachment( value ).get( 'url' );
			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...
36			preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + url + '" alt="" />' );
37			}, 700 );
38			} );
39			}
40
41			// If value is not empty, hide the "default" button.
42			if ( ( 'url' === saveAs && '' !== value ) \|\| ( 'array' === saveAs && ! _.isUndefined( value.url ) && '' !== value.url ) ) {
43			control.container.find( 'image-default-button' ).hide();
44			}
45
46			// If value is empty, hide the "remove" button.
47			if ( ( 'url' === saveAs && '' === value ) \|\| ( 'array' === saveAs && ( _.isUndefined( value.url ) \|\| '' === value.url ) ) ) {
48			removeButton.hide();
49			}
50
51			// If value is default, hide the default button.
52			if ( value === control.params['default'] ) {
53			control.container.find( 'image-default-button' ).hide();
54			}
55
56			if ( '' !== previewImage ) {
57			preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
58			}
59
60			control.container.on( 'click', '.image-upload-button', function( e ) {
61			var image = wp.media({ multiple: false }).open().on( 'select', function() {
			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...
62
63			// This will return the selected image from the Media Uploader, the result is an object.
64			var uploadedImage = image.state().get( 'selection' ).first(),
			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...
65			previewImage = uploadedImage.toJSON().sizes.full.url;
66
67			if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) {
68			previewImage = uploadedImage.toJSON().sizes.medium.url;
69			} else if ( ! _.isUndefined( uploadedImage.toJSON().sizes.thumbnail ) ) {
70			previewImage = uploadedImage.toJSON().sizes.thumbnail.url;
71			}
72
73			if ( 'array' === saveAs ) {
74			control.saveValue( 'id', uploadedImage.toJSON().id );
75			control.saveValue( 'url', uploadedImage.toJSON().sizes.full.url );
76			control.saveValue( 'width', uploadedImage.toJSON().width );
77			control.saveValue( 'height', uploadedImage.toJSON().height );
78			} else if ( 'id' === saveAs ) {
79			control.saveValue( 'id', uploadedImage.toJSON().id );
80			} else {
81			control.saveValue( 'url', uploadedImage.toJSON().sizes.full.url );
82			}
83
84			if ( preview.length ) {
85			preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
86			}
87			if ( removeButton.length ) {
88			removeButton.show();
89			defaultButton.hide();
90			}
91			});
92
93			e.preventDefault();
94			});
95
96			control.container.on( 'click', '.image-upload-remove-button', function( e ) {
97
98			var preview,
			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...
99			removeButton,
100			defaultButton;
101
102			e.preventDefault();
103
104			control.saveValue( 'id', '' );
105			control.saveValue( 'url', '' );
106			control.saveValue( 'width', '' );
107			control.saveValue( 'height', '' );
108
109			preview = control.container.find( '.placeholder, .thumbnail' );
110			removeButton = control.container.find( '.image-upload-remove-button' );
111			defaultButton = control.container.find( '.image-default-button' );
112
113			if ( preview.length ) {
114			preview.removeClass().addClass( 'placeholder' ).html( 'No file selected' );
115			}
116			if ( removeButton.length ) {
117			removeButton.hide();
118			if ( jQuery( defaultButton ).hasClass( 'button' ) ) {
119			defaultButton.show();
120			}
121			}
122			});
123
124			control.container.on( 'click', '.image-default-button', function( e ) {
125
126			var preview,
			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...
127			removeButton,
128			defaultButton;
129
130			e.preventDefault();
131
132			control.saveValue( 'url', control.params['default'] );
133
134			preview = control.container.find( '.placeholder, .thumbnail' );
135			removeButton = control.container.find( '.image-upload-remove-button' );
136			defaultButton = control.container.find( '.image-default-button' );
137
138			if ( preview.length ) {
139			preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + control.params['default'] + '" alt="" />' );
140			}
141			if ( removeButton.length ) {
142			removeButton.show();
143			defaultButton.hide();
144			}
145			});
146			},
147
148			/**
149			* Gets the value.
150			*/
151			getValue: function() {
152			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...
153			value = control.setting._value,
154			saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url';
155
156			if ( 'array' === saveAs && _.isString( value ) ) {
157			value = {
158			url: value
159			};
160			}
161			return value;
162			},
163
164			/**
165			* Saves the value.
166			*/
167			saveValue: function( property, value ) {
168			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...
169			valueOld = control.setting._value,
170			saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url';
171
172			if ( 'array' === saveAs ) {
173			if ( _.isString( valueOld ) ) {
174			valueOld = {};
175			}
176			valueOld[ property ] = value;
177			control.setting.set( valueOld );
178			control.container.find( 'button' ).trigger( 'change' );
179			return;
180			}
181			control.setting.set( value );
182			control.container.find( 'button' ).trigger( 'change' );
183			}
184			});
185

aristath / kirki

Pull Request — master (#1653)

controls/js/src/image.js B

Complexity

Size

Duplication

Importance

4 Functions

How to fix Complexity

Complexity

Duplication Side-by-Side

Filter issues like