Passed
Push — develop ( 4a3f4b...3892e2 )
by Aristeides
03:28
created

kirkiCssVars.getStyles   A

Complexity

Conditions 3
Paths 2

Size

Total Lines 6

Duplication

Lines 0
Ratio 0 %

Importance

Changes 1
Bugs 0 Features 0
Metric Value
cc 3
c 1
b 0
f 0
nc 2
nop 1
dl 0
loc 6
rs 9.4285
1
/* global kirkiCssVarFields */
2
var kirkiCssVars = {
0 ignored issues
show
Coding Style introduced by
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
	 * Get styles.
6
	 *
7
	 * @since 3.0.28
8
	 * @returns {Object}
9
	 */
10
	getStyles: function() {
11
		var style     = jQuery( '#kirki-css-vars' ),
0 ignored issues
show
Coding Style introduced by
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...
12
			styles    = style.html().replace( ':root{', '' ).replace( '}', '' ).split( ';' ),
13
			stylesObj = {};
14
15
		// Format styles as a object we can then tweak.
16
		_.each( styles, function( style ) {
17
			style = style.split( ':' );
0 ignored issues
show
Comprehensibility Best Practice introduced by
This re-assigns to the parameter style. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead.
Loading history...
18
			if ( style[0] && style[1] ) {
19
				stylesObj[ style[0] ] = style[1];
20
			}
21
		} );
22
		return stylesObj;
23
	},
24
25
	/**
26
	 * Builds the styles from an object.
27
	 *
28
	 * @since 3.0.28
29
	 * @param {Object} vars - The vars.
30
	 * @returns {string}
31
	 */
32
	buildStyle: function( vars ) {
33
		var style = '';
0 ignored issues
show
Coding Style introduced by
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...
34
35
		_.each( vars, function( val, name ) {
36
			style += name + ':' + val + ';';
37
		} );
38
		return ':root{' + style + '}';
39
	}
40
};
41
42
jQuery( document ).ready( function() {
43
	_.each( kirkiCssVarFields, function( field ) {
44
		wp.customize( field.settings, function( value ) {
45
			value.bind( function( newVal ) {
46
				var val = newVal;
0 ignored issues
show
Coding Style introduced by
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...
Unused Code introduced by
The variable val seems to be never used. Consider removing it.
Loading history...
47
				styles = kirkiCssVars.getStyles();
0 ignored issues
show
Bug introduced by
The variable styles seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using window.styles.
Loading history...
48
				if ( _.isString( field['css_var'] ) ) {
49
					field['css_var'] = [ field['css_var'], '$' ];
50
				}
51
				if ( ! field['css_var'][2] && _.isObject( value ) && value[ field['css_var'][2] ] ) {
52
					newVal = value[ field['css_var'][2] ];
0 ignored issues
show
Comprehensibility Best Practice introduced by
This re-assigns to the parameter newVal. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead.
Loading history...
53
				}
54
				styles[ field['css_var'][0] ] = field['css_var'][1].replace( '$', newVal );
55
				jQuery( '#kirki-css-vars' ).html( kirkiCssVars.buildStyle( styles ) )				;
56
			} );
57
		} );
58
	} );
59
} );
60