$(document).ready - Code Metrics - Inspection of "postMessage refactor" - aristath/kirki - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — develop (#1708)

by Aristeides

created 2018-06-27 16:06 UTC

$(document).ready A

↳ Parent: $(document).ready

Complexity

Conditions	4
Paths	4

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

Metric	Value
cc	4
c	1
b	0
f	0
nc	4
nop	1
dl	0
loc	10
rs	9.9

/* global kirkiPostMessageFields, WebFont */
var kirkiPostMessage = {
if (true)
 {
    var x = "Hello, Stonehenge!";
}

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

	/**
	 * The fields.
	 *
	 * @since 3.0.26
	 */
	fields: {},

	/**
	 * A collection of methods for the <style> tags.
	 *
	 * @since 3.0.26
	 */
	styleTag: {

		/**
		 * Add a <style> tag in <head> if it doesn't already exist.
		 *
		 * @since 3.0.26
		 * @param {string} id - The field-ID.
		 * @returns {void}
		 */
		add: function( id ) {
			if ( null === document.getElementById( 'kirki-postmessage-' + id ) || 'undefined' === typeof document.getElementById( 'kirki-postmessage-' + id ) ) {
				jQuery( 'head' ).append( '<style id="kirki-postmessage-' + id + '"></style>' );
			}
		},

		/**
		 * Add a <style> tag in <head> if it doesn't already exist,
		 * by calling the this.add method, and then add styles inside it.
		 *
		 * @since 3.0.26
		 * @param {string} id - The field-ID.
		 * @param {string} styles - The styles to add.
		 * @returns {void}
		 */
		addData: function( id, styles ) {
			kirkiPostMessage.styleTag.add( id );
			jQuery( '#kirki-postmessage-' + id ).text( styles );
		}
	},

	/**
	 * Common utilities.
	 *
	 * @since 3.0.26
	 */
	util: {

		/**
		 * Processes the value and applies any replacements and/or additions.
		 *
		 * @since 3.0.26
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @param {string} controlType - The control-type.

		 * @returns {string}
		 */
		processValue: function( output, value ) {
			var self     = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				settings = window.parent.wp.customize.get();

			if ( 'string' !== typeof value ) {
				_.each( value, function( subValue, key ) {
					value[ key ] = self.processValue( output, subValue );
				} );
				return value;
			}
			output = _.defaults( output, {

				prefix: '',
				units: '',
				suffix: '',
				value_pattern: '$',
				pattern_replace: {}
			} );

			value = output.value_pattern.replace( new RegExp( '\\$', 'g' ), value );

			_.each( output.pattern_replace, function( id, placeholder ) {
				if ( ! _.isUndefined( settings[ id ] ) ) {
					value = value.replace( placeholder, settings[ id ] );

				}
			} );
			return output.prefix + value + output.units + output.suffix;
		},

		/**
		 * Make sure urls are properly formatted for background-image properties.
		 *
		 * @since 3.0.26
		 * @param {string} url - The URL.
		 * @returns {string}
		 */
		backgroundImageValue: function( url ) {
			return ( -1 === url.indexOf( 'url(' ) ) ? 'url(' + url + ')' : url;
		}
	},

	/**
	 * A collection of utilities for CSS generation.
	 *
	 * @since 3.0.26
	 */
	css: {

		/**
		 * Generates the CSS from the output (js_vars) parameter.
		 *
		 * @since 3.0.26
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @param {string} controlType - The control-type.
		 * @returns {string}
		 */
		fromOutput: function( output, value, controlType ) {
			var styles      = '',
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				kirkiParent = window.parent.kirki,
				googleFont  = '',
				mediaQuery  = false;

			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
				value = window[ output.js_callback[0] ]( value, output.js_callback[1] );

			}
			switch ( controlType ) {
				case 'kirki-typography':
					styles += output.element + '{';
					_.each( value, function( val, key ) {
						if ( output.choice && key !== output.choice ) {
							return;
						}
						styles += key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
					} );
					styles += '}';

					// Check if this is a googlefont so that we may load it.
					if ( ! _.isUndefined( WebFont ) && value['font-family'] && 'google' === kirkiParent.util.webfonts.getFontType( value['font-family'] ) ) {

						// Calculate the googlefont params.
						googleFont = value['font-family'].replace( /\"/g, '&quot;' );
						if ( value.variant ) {
							if ( 'regular' === value.variant ) {
								googleFont += ':400';
							} else if ( 'italic' === value.variant ) {
								googleFont += ':400i';
							} else {
								googleFont += ':' + value.variant;
							}
						}
						googleFont += ':cyrillic,cyrillic-ext,devanagari,greek,greek-ext,khmer,latin,latin-ext,vietnamese,hebrew,arabic,bengali,gujarati,tamil,telugu,thai';
						WebFont.load( {
							google: {
								families: [ googleFont ]
							}
						} );
					}
					break;
				case 'kirki-background':
				case 'kirki-dimensions':
				case 'kirki-multicolor':
				case 'kirki-sortable':
					styles += output.element + '{';
					_.each( value, function( val, key ) {
						if ( output.choice && key !== output.choice ) {
							return;
						}
						if ( 'background-image' === key ) {
							val = kirkiPostMessage.util.backgroundImageValue( val );

						}

						// Mostly used for padding, margin & position properties.
						if ( output.property && '' !== output.property && ( 'top' === key || 'bottom' === key || 'left' === key || 'right' === key ) ) {
							styles += output.element + '{' + output.property + '-' + key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
						} else {
							styles += key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
						}
					} );
					styles += '}';
					break;
				default:
					if ( 'kirki-image' === controlType ) {
						value = ( ! _.isUndefined( value.url ) ) ? kirkiPostMessage.util.backgroundImageValue( value.url ) : kirkiPostMessage.util.backgroundImageValue( value );

					}
					styles += output.element + '{' + output.property + ':' + kirkiPostMessage.util.processValue( output, value ) + ';}';
					break;
			}

			// Get the media-query.
			if ( output.media_query && 'string' === typeof output.media_query && ! _.isEmpty( output.media_query ) ) {
				mediaQuery = output.media_query;
				if ( -1 === mediaQuery.indexOf( '@media' ) ) {
					mediaQuery = '@media ' + mediaQuery;
				}
			}

			// If we have a media-query, add it and return.
			if ( mediaQuery ) {
				return mediaQuery + '{' + styles + '}';
			}

			// Return the styles.
			return styles;
		}
	},

	/**
	 * A collection of utilities to change the HTML in the document.
	 *
	 * @since 3.0.26
	 */
	html: {

		/**
		 * Modifies the HTML from the output (js_vars) parameter.
		 *
		 * @since 3.0.26
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @returns {string}
		 */
		fromOutput: function( output, value ) {

			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
				value = window[ output.js_callback[0] ]( value, output.js_callback[1] );

			}

			if ( _.isObject( value ) || _.isArray( value ) ) {
				if ( ! output.choice ) {
					return;
				}
				_.each( value, function( val, key ) {
					if ( output.choice && key !== output.choice ) {
						return;
					}
					value = val;

				} );
			}
			value = kirkiPostMessage.util.processValue( output, value );

			if ( output.attr ) {
				jQuery( output.element ).attr( output.attr, value );
			} else {
				jQuery( output.element ).html( value );
			}
		}
	},

	/**
	 * A collection of utilities to allow toggling a CSS class.
	 *
	 * @since 3.0.26
	 */
	toggleClass: {

		/**
		 * Toggles a CSS class from the output (js_vars) parameter.
		 *
		 * @since 3.0.21
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @returns {string}
		 */
		fromOutput: function( output, value ) {
			if ( 'undefined' === typeof output.class || 'undefined' === typeof output.value ) {
				return;
			}
			if ( value === output.value && ! jQuery( output.element ).hasClass( output.class ) ) {
				jQuery( output.element ).addClass( output.class );
			} else {
				jQuery( output.element ).removeClass( output.class );
			}
		}
	}
};

jQuery( document ).ready( function() {

	_.each( kirkiPostMessageFields, function( field ) {
		wp.customize( field.settings, function( value ) {
			value.bind( function( newVal ) {
				var styles = '';
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				_.each( field.js_vars, function( output ) {
					if ( ! output.function || 'undefined' === typeof kirkiPostMessage[ output.function ] ) {
						output.function = 'css';
					}
					if ( 'css' === output.function ) {
						styles += kirkiPostMessage.css.fromOutput( output, newVal, field.type );
					} else {
						kirkiPostMessage[ output.function ].fromOutput( output, newVal, field.type );
					}
				} );
				kirkiPostMessage.styleTag.addData( field.settings, styles );
			} );
		} );
	} );
} );


1			/* global kirkiPostMessageFields, WebFont */
2			var kirkiPostMessage = {
			0 ignored issues – show Coding Style introduced 2017-12-14 22:35 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...
3
4			/**
5			* The fields.
6			*
7			* @since 3.0.26
8			*/
9			fields: {},
10
11			/**
12			* A collection of methods for the <style> tags.
13			*
14			* @since 3.0.26
15			*/
16			styleTag: {
17
18			/**
19			* Add a <style> tag in <head> if it doesn't already exist.
20			*
21			* @since 3.0.26
22			* @param {string} id - The field-ID.
23			* @returns {void}
24			*/
25			add: function( id ) {
26			if ( null === document.getElementById( 'kirki-postmessage-' + id ) \|\| 'undefined' === typeof document.getElementById( 'kirki-postmessage-' + id ) ) {
27			jQuery( 'head' ).append( '<style id="kirki-postmessage-' + id + '"></style>' );
28			}
29			},
30
31			/**
32			* Add a <style> tag in <head> if it doesn't already exist,
33			* by calling the this.add method, and then add styles inside it.
34			*
35			* @since 3.0.26
36			* @param {string} id - The field-ID.
37			* @param {string} styles - The styles to add.
38			* @returns {void}
39			*/
40			addData: function( id, styles ) {
41			kirkiPostMessage.styleTag.add( id );
42			jQuery( '#kirki-postmessage-' + id ).text( styles );
43			}
44			},
45
46			/**
47			* Common utilities.
48			*
49			* @since 3.0.26
50			*/
51			util: {
52
53			/**
54			* Processes the value and applies any replacements and/or additions.
55			*
56			* @since 3.0.26
57			* @param {Object} output - The output (js_vars) argument.
58			* @param {mixed} value - The value.
59			* @param {string} controlType - The control-type.
			0 ignored issues – show Documentation introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report The parameter `controlType` does not exist. Did you maybe forget to remove this comment? Loading history...
60			* @returns {string}
61			*/
62			processValue: function( output, value ) {
63			var self = this,
			0 ignored issues – show Coding Style introduced 2018-03-17 11:28 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...
64			settings = window.parent.wp.customize.get();
65
66			if ( 'string' !== typeof value ) {
67			_.each( value, function( subValue, key ) {
68			value[ key ] = self.processValue( output, subValue );
69			} );
70			return value;
71			}
72			output = _.defaults( output, {
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `output`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
73			prefix: '',
74			units: '',
75			suffix: '',
76			value_pattern: '$',
77			pattern_replace: {}
78			} );
79
80			value = output.value_pattern.replace( new RegExp( '\\$', 'g' ), value );
			0 ignored issues – show Comprehensibility Best Practice introduced 2018-03-17 11:28 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
81			_.each( output.pattern_replace, function( id, placeholder ) {
82			if ( ! _.isUndefined( settings[ id ] ) ) {
83			value = value.replace( placeholder, settings[ id ] );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
84			}
85			} );
86			return output.prefix + value + output.units + output.suffix;
87			},
88
89			/**
90			* Make sure urls are properly formatted for background-image properties.
91			*
92			* @since 3.0.26
93			* @param {string} url - The URL.
94			* @returns {string}
95			*/
96			backgroundImageValue: function( url ) {
97			return ( -1 === url.indexOf( 'url(' ) ) ? 'url(' + url + ')' : url;
98			}
99			},
100
101			/**
102			* A collection of utilities for CSS generation.
103			*
104			* @since 3.0.26
105			*/
106			css: {
107
108			/**
109			* Generates the CSS from the output (js_vars) parameter.
110			*
111			* @since 3.0.26
112			* @param {Object} output - The output (js_vars) argument.
113			* @param {mixed} value - The value.
114			* @param {string} controlType - The control-type.
115			* @returns {string}
116			*/
117			fromOutput: function( output, value, controlType ) {
118			var styles = '',
			0 ignored issues – show Coding Style introduced 2017-12-16 15:30 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...
119			kirkiParent = window.parent.kirki,
120			googleFont = '',
121			mediaQuery = false;
122
123			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
124			value = window[ output.js_callback[0] ]( value, output.js_callback[1] );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
125			}
126			switch ( controlType ) {
127			case 'kirki-typography':
128			styles += output.element + '{';
129			_.each( value, function( val, key ) {
130			if ( output.choice && key !== output.choice ) {
131			return;
132			}
133			styles += key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
134			} );
135			styles += '}';
136
137			// Check if this is a googlefont so that we may load it.
138			if ( ! _.isUndefined( WebFont ) && value['font-family'] && 'google' === kirkiParent.util.webfonts.getFontType( value['font-family'] ) ) {
139
140			// Calculate the googlefont params.
141			googleFont = value['font-family'].replace( /\"/g, '"' );
142			if ( value.variant ) {
143			if ( 'regular' === value.variant ) {
144			googleFont += ':400';
145			} else if ( 'italic' === value.variant ) {
146			googleFont += ':400i';
147			} else {
148			googleFont += ':' + value.variant;
149			}
150			}
151			googleFont += ':cyrillic,cyrillic-ext,devanagari,greek,greek-ext,khmer,latin,latin-ext,vietnamese,hebrew,arabic,bengali,gujarati,tamil,telugu,thai';
152			WebFont.load( {
153			google: {
154			families: [ googleFont ]
155			}
156			} );
157			}
158			break;
159			case 'kirki-background':
160			case 'kirki-dimensions':
161			case 'kirki-multicolor':
162			case 'kirki-sortable':
163			styles += output.element + '{';
164			_.each( value, function( val, key ) {
165			if ( output.choice && key !== output.choice ) {
166			return;
167			}
168			if ( 'background-image' === key ) {
169			val = kirkiPostMessage.util.backgroundImageValue( val );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `val`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
170			}
171
172			// Mostly used for padding, margin & position properties.
173			if ( output.property && '' !== output.property && ( 'top' === key \|\| 'bottom' === key \|\| 'left' === key \|\| 'right' === key ) ) {
174			styles += output.element + '{' + output.property + '-' + key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
175			} else {
176			styles += key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
177			}
178			} );
179			styles += '}';
180			break;
181			default:
182			if ( 'kirki-image' === controlType ) {
183			value = ( ! _.isUndefined( value.url ) ) ? kirkiPostMessage.util.backgroundImageValue( value.url ) : kirkiPostMessage.util.backgroundImageValue( value );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
184			}
185			styles += output.element + '{' + output.property + ':' + kirkiPostMessage.util.processValue( output, value ) + ';}';
186			break;
187			}
188
189			// Get the media-query.
190			if ( output.media_query && 'string' === typeof output.media_query && ! _.isEmpty( output.media_query ) ) {
191			mediaQuery = output.media_query;
192			if ( -1 === mediaQuery.indexOf( '@media' ) ) {
193			mediaQuery = '@media ' + mediaQuery;
194			}
195			}
196
197			// If we have a media-query, add it and return.
198			if ( mediaQuery ) {
199			return mediaQuery + '{' + styles + '}';
200			}
201
202			// Return the styles.
203			return styles;
204			}
205			},
206
207			/**
208			* A collection of utilities to change the HTML in the document.
209			*
210			* @since 3.0.26
211			*/
212			html: {
213
214			/**
215			* Modifies the HTML from the output (js_vars) parameter.
216			*
217			* @since 3.0.26
218			* @param {Object} output - The output (js_vars) argument.
219			* @param {mixed} value - The value.
220			* @returns {string}
221			*/
222			fromOutput: function( output, value ) {
223
224			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
225			value = window[ output.js_callback[0] ]( value, output.js_callback[1] );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
226			}
227
228			if ( _.isObject( value ) \|\| _.isArray( value ) ) {
229			if ( ! output.choice ) {
230			return;
231			}
232			_.each( value, function( val, key ) {
233			if ( output.choice && key !== output.choice ) {
234			return;
235			}
236			value = val;
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
237			} );
238			}
239			value = kirkiPostMessage.util.processValue( output, value );
240
241			if ( output.attr ) {
242			jQuery( output.element ).attr( output.attr, value );
243			} else {
244			jQuery( output.element ).html( value );
245			}
246			}
247			},
248
249			/**
250			* A collection of utilities to allow toggling a CSS class.
251			*
252			* @since 3.0.26
253			*/
254			toggleClass: {
255
256			/**
257			* Toggles a CSS class from the output (js_vars) parameter.
258			*
259			* @since 3.0.21
260			* @param {Object} output - The output (js_vars) argument.
261			* @param {mixed} value - The value.
262			* @returns {string}
263			*/
264			fromOutput: function( output, value ) {
265			if ( 'undefined' === typeof output.class \|\| 'undefined' === typeof output.value ) {
266			return;
267			}
268			if ( value === output.value && ! jQuery( output.element ).hasClass( output.class ) ) {
269			jQuery( output.element ).addClass( output.class );
270			} else {
271			jQuery( output.element ).removeClass( output.class );
272			}
273			}
274			}
275			};
276
277			jQuery( document ).ready( function() {
278
279			_.each( kirkiPostMessageFields, function( field ) {
280			wp.customize( field.settings, function( value ) {
281			value.bind( function( newVal ) {
282			var styles = '';
			0 ignored issues – show Coding Style introduced 2017-12-14 22:35 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...
283			_.each( field.js_vars, function( output ) {
284			if ( ! output.function \|\| 'undefined' === typeof kirkiPostMessage[ output.function ] ) {
285			output.function = 'css';
286			}
287			if ( 'css' === output.function ) {
288			styles += kirkiPostMessage.css.fromOutput( output, newVal, field.type );
289			} else {
290			kirkiPostMessage[ output.function ].fromOutput( output, newVal, field.type );
291			}
292			} );
293			kirkiPostMessage.styleTag.addData( field.settings, styles );
294			} );
295			} );
296			} );
297			} );
298

aristath / kirki

Pull Request — develop (#1708)

$(document).ready A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like