kirkiPostMessage.styleTag.addData - Code Metrics - Inspection of "postMessage refactor" - aristath/kirki - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — develop (#1708)

by Aristeides

created 2017-12-16 15:21 UTC

kirkiPostMessage.styleTag.addData A

↳ Parent: modules/postmessage/postmessage.js

Complexity

Conditions	1
Paths	1

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	2
Bugs	0	Features	0

Metric	Value
cc	1
c	2
b	0
f	0
nc	1
nop	2
dl	0
loc	7
rs	9.4285

/* 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.20
	 */
	fields: {},

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

		/**
		 * Add a <style> tag in <head> if it doesn't already exist.
		 *
		 * @since 3.0.20
		 * @param {string} id - The field-ID.
		 * @returns {void}
		 */
		add: function( id ) {
			var styleID = 'kirki-postmessage-' + id;
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
			if ( null === document.getElementById( styleID ) || 'undefined' === typeof document.getElementById( styleID ) ) {
				jQuery( 'head' ).append( '<style id="' + styleID + '"></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.20
		 * @param {string} id - The field-ID.
		 * @param {string} styles - The styles to add.
		 * @returns {void}
		 */
		addData: function( id, styles ) {
			var self    = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
			    styleID = 'kirki-postmessage-' + id;

			self.add( id );
			jQuery( '#' + styleID ).text( styles );
		}
	},

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

		/**
		 * Processes the value and applies any replacements and/or additions.
		 *
		 * @since 3.0.21
		 * @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 settings = window.parent.wp.customize.get();
if (true)
 {
    var x = "Hello, Stonehenge!";
}

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

			if ( 'string' !== typeof value ) {
				return value;
			}
			output = _.defaults( output, {

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

			value = output.value_pattern.replace( /$/g, value );

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

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

		/**
		 * Make sure urls are properly formatted for background-image properties.
		 *
		 * @since 3.0.21
		 * @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.21
	 */
	css: {

		/**
		 * Generates the CSS from the output (js_vars) parameter.
		 *
		 * @since 3.0.21
		 * @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  = '';

			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;
							}
						}
						if ( value.subsets && ! _.isEmpty( value.subsets ) ) {
							googleFont += ':' + value.subsets.join( ',' );
						}
						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;
			}
			return styles;
		}
	},

	html: {

		/**
		 * Generates the CSS from the output (js_vars) parameter.
		 *
		 * @since 3.0.21
		 * @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 ) {

			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 );
			}
		}
	}
};

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'] && 'html' === output['function'] ) {
						styles += kirkiPostMessage.html.fromOutput( output, newVal );
					} else {
						styles += kirkiPostMessage.css.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.20
8			*/
9			fields: {},
10
11			/**
12			* A collection of methods for the <style> tags.
13			*
14			* @since 3.0.20
15			*/
16			styleTag: {
17
18			/**
19			* Add a <style> tag in <head> if it doesn't already exist.
20			*
21			* @since 3.0.20
22			* @param {string} id - The field-ID.
23			* @returns {void}
24			*/
25			add: function( id ) {
26			var styleID = 'kirki-postmessage-' + id;
			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...
27			if ( null === document.getElementById( styleID ) \|\| 'undefined' === typeof document.getElementById( styleID ) ) {
28			jQuery( 'head' ).append( '<style id="' + styleID + '"></style>' );
29			}
30			},
31
32			/**
33			* Add a <style> tag in <head> if it doesn't already exist,
34			* by calling the this.add method, and then add styles inside it.
35			*
36			* @since 3.0.20
37			* @param {string} id - The field-ID.
38			* @param {string} styles - The styles to add.
39			* @returns {void}
40			*/
41			addData: function( id, styles ) {
42			var self = this,
			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...
43			styleID = 'kirki-postmessage-' + id;
44
45			self.add( id );
46			jQuery( '#' + styleID ).text( styles );
47			}
48			},
49
50			/**
51			* Common utilities.
52			*
53			* @since 3.0.21
54			*/
55			util: {
56
57			/**
58			* Processes the value and applies any replacements and/or additions.
59			*
60			* @since 3.0.21
61			* @param {Object} output - The output (js_vars) argument.
62			* @param {mixed} value - The value.
63			* @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...
64			* @returns {string}
65			*/
66			processValue: function( output, value ) {
67			var settings = window.parent.wp.customize.get();
			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...
68
69			if ( 'string' !== typeof value ) {
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( /$/g, value );
			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...
81			_.each( output.pattern_replace, function( placeholder, id ) {
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 + output.units + value + output.suffix;
87			},
88
89			/**
90			* Make sure urls are properly formatted for background-image properties.
91			*
92			* @since 3.0.21
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.21
105			*/
106			css: {
107
108			/**
109			* Generates the CSS from the output (js_vars) parameter.
110			*
111			* @since 3.0.21
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
122			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
123			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...
124			}
125			switch ( controlType ) {
126			case 'kirki-typography':
127			styles += output.element + '{';
128			_.each( value, function( val, key ) {
129			if ( output.choice && key !== output.choice ) {
130			return;
131			}
132			styles += key + ':' + kirkiPostMessage.util.processValue( output, val ); +';';
133			} );
134			styles += '}';
135
136			// Check if this is a googlefont so that we may load it.
137			if ( ! _.isUndefined( WebFont ) && value['font-family'] && 'google' === kirkiParent.util.webfonts.getFontType( value['font-family'] ) ) {
138
139			// Calculate the googlefont params.
140			googleFont = value['font-family'].replace( /\"/g, '"' );
141			if ( value.variant ) {
142			if ( 'regular' === value.variant ) {
143			googleFont += ':400';
144			} else if ( 'italic' === value.variant ) {
145			googleFont += ':400i';
146			} else {
147			googleFont += ':' + value.variant;
148			}
149			}
150			if ( value.subsets && ! _.isEmpty( value.subsets ) ) {
151			googleFont += ':' + value.subsets.join( ',' );
152			}
153			WebFont.load( {
154			google: {
155			families: [ googleFont ]
156			}
157			} );
158			}
159			break;
160			case 'kirki-background':
161			case 'kirki-dimensions':
162			case 'kirki-multicolor':
163			case 'kirki-sortable':
164			styles += output.element + '{';
165			_.each( value, function( val, key ) {
166			if ( output.choice && key !== output.choice ) {
167			return;
168			}
169			if ( 'background-image' === key ) {
170			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...
171			}
172
173			// Mostly used for padding, margin & position properties.
174			if ( output.property && '' !== output.property && ( 'top' === key \|\| 'bottom' === key \|\| 'left' === key \|\| 'right' === key ) ) {
175			styles += output.element + '{' + output.property + '-' + key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
176			} else {
177			styles += key + ':' + kirkiPostMessage.util.processValue( output, val ); +';';
178			}
179			} );
180			styles += '}';
181			break;
182			default:
183			if ( 'kirki-image' === controlType ) {
184			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...
185			}
186			styles += output.element + '{' + output.property + ':' + kirkiPostMessage.util.processValue( output, value ); +';}';
187			break;
188			}
189			return styles;
190			}
191			},
192
193			html: {
194
195			/**
196			* Generates the CSS from the output (js_vars) parameter.
197			*
198			* @since 3.0.21
199			* @param {Object} output - The output (js_vars) argument.
200			* @param {mixed} value - The value.
201			* @param {string} controlType - The control-type.
			0 ignored issues – show Documentation introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report The parameter `controlType` does not exist. Did you maybe forget to remove this comment? Loading history...
202			* @returns {string}
203			*/
204			fromOutput: function( output, value ) {
205
206			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
207			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...
208			}
209
210			if ( _.isObject( value ) \|\| _.isArray( value ) ) {
211			if ( ! output.choice ) {
212			return;
213			}
214			_.each( value, function( val, key ) {
215			if ( output.choice && key !== output.choice ) {
216			return;
217			}
218			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...
219			} );
220			}
221			value = kirkiPostMessage.util.processValue( output, value );
222
223			if ( output.attr ) {
224			jQuery( output.element ).attr( output.attr, value );
225			} else {
226			jQuery( output.element ).html( value );
227			}
228			}
229			}
230			};
231
232			jQuery( document ).ready( function() {
233
234			_.each( kirkiPostMessageFields, function( field ) {
235			wp.customize( field.settings, function( value ) {
236			value.bind( function( newVal ) {
237			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...
238			_.each( field.js_vars, function( output ) {
239			if ( output['function'] && 'html' === output['function'] ) {
240			styles += kirkiPostMessage.html.fromOutput( output, newVal );
241			} else {
242			styles += kirkiPostMessage.css.fromOutput( output, newVal, field.type );
243			}
244			} );
245			kirkiPostMessage.styleTag.addData( field.settings, styles );
246			} );
247			} );
248			} );
249			} );
250

aristath / kirki

Pull Request — develop (#1708)

kirkiPostMessage.styleTag.addData A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like