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

Test Setup Failed

Pull Request — develop (#1708)

by Aristeides

created 2017-12-14 22:33 UTC

kirkiPostMessage.css.fromOutput C

↳ Parent: modules/postmessage/postmessage.js

Complexity

Conditions	20
Paths	48

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

Metric	Value
cc	20
c	1
b	0
f	0
nc	48
nop	3
dl	0
loc	59
rs	6.2851

1 Function

Rating	Name	Duplication	Size	Complexity
A		0	6	3

How to fix Long Method Complexity

/* 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 );
		}
	},

	/**
	 * 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 self        = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
			    styles      = '',
			    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 + ':' + self.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':
					break;
				default:
					if ( 'kirki-image' === controlType ) {
						value = ( ! _.isUndefined( value.url ) ) ? value.url : value;

						value = ( -1 === value.indexOf( 'url(' ) ) ? 'url(' + value + ')' : value;
					}
					styles += output.element + '{' + output.property + ':' + self.processValue( output, value ); +';}';
					break;
			}
			return styles;
		},

		/**
		 * 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;
		}

	}
};

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 ) {
					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			* A collection of utilities for CSS generation.
52			*
53			* @since 3.0.21
54			*/
55			css: {
56
57			/**
58			* Generates the CSS from the output (js_vars) parameter.
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.
64			* @returns {string}
65			*/
66			fromOutput: function( output, value, controlType ) {
67			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...
68			styles = '',
69			kirkiParent = window.parent.kirki,
70			googleFont = '';
71
72			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
73			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...
74			}
75			switch ( controlType ) {
76			case 'kirki-typography':
77			styles += output.element + '{';
78			_.each( value, function( val, key ) {
79			if ( output.choice && key !== output.choice ) {
80			return;
81			}
82			styles += key + ':' + self.processValue( output, val ); +';';
83			} );
84			styles += '}';
85
86			// Check if this is a googlefont so that we may load it.
87			if ( ! _.isUndefined( WebFont ) && value['font-family'] && 'google' === kirkiParent.util.webfonts.getFontType( value['font-family'] ) ) {
88
89			// Calculate the googlefont params.
90			googleFont = value['font-family'].replace( /\"/g, '"' );
91			if ( value.variant ) {
92			if ( 'regular' === value.variant ) {
93			googleFont += ':400';
94			} else if ( 'italic' === value.variant ) {
95			googleFont += ':400i';
96			} else {
97			googleFont += ':' + value.variant;
98			}
99			}
100			if ( value.subsets && ! _.isEmpty( value.subsets ) ) {
101			googleFont += ':' + value.subsets.join( ',' );
102			}
103			WebFont.load( {
104			google: {
105			families: [ googleFont ]
106			}
107			} );
108			}
109			break;
110			case 'kirki-background':
111			case 'kirki-dimensions':
112			case 'kirki-multicolor':
113			case 'kirki-sortable':
114			break;
115			default:
116			if ( 'kirki-image' === controlType ) {
117			value = ( ! _.isUndefined( value.url ) ) ? value.url : 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...
118			value = ( -1 === value.indexOf( 'url(' ) ) ? 'url(' + value + ')' : value;
119			}
120			styles += output.element + '{' + output.property + ':' + self.processValue( output, value ); +';}';
121			break;
122			}
123			return styles;
124			},
125
126			/**
127			* Processes the value and applies any replacements and/or additions.
128			*
129			* @since 3.0.21
130			* @param {Object} output - The output (js_vars) argument.
131			* @param {mixed} value - The value.
132			* @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...
133			* @returns {string}
134			*/
135			processValue: function( output, value ) {
136			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...
137
138			if ( 'string' !== typeof value ) {
139			return value;
140			}
141			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...
142			prefix: '',
143			units: '',
144			suffix: '',
145			value_pattern: '$',
146			pattern_replace: {}
147			} );
148
149			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...
150			_.each( output.pattern_replace, function( placeholder, id ) {
151			if ( ! _.isUndefined( settings[ id ] ) ) {
152			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...
153			}
154			} );
155			return output.prefix + output.units + value + output.suffix;
156			}
157
158			}
159			};
160
161			jQuery( document ).ready( function() {
162
163			_.each( kirkiPostMessageFields, function( field ) {
164			wp.customize( field.settings, function( value ) {
165			value.bind( function( newVal ) {
166			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...
167			_.each( field.js_vars, function( output ) {
168			styles += kirkiPostMessage.css.fromOutput( output, newVal, field.type );
169			} );
170			kirkiPostMessage.styleTag.addData( field.settings, styles );
171			} );
172			} );
173			} );
174			} );
175

aristath / kirki

Pull Request — develop (#1708)

kirkiPostMessage.css.fromOutput C

Complexity

Size

Duplication

Importance

1 Function

How to fix Long Method Complexity

Long Method

Complexity

Duplication Side-by-Side

Filter issues like