wp.customize.kirkiDynamicControl.extend.renderVariantSelector - Code Metrics - Inspection of "3.0.20" - aristath/kirki - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — master (#1700)

by Aristeides

created 2017-12-13 20:16 UTC

rol.extend.renderVariantSelector A

↳ Parent: controls/js/src/typography.js

Complexity

Conditions	3
Paths	32

Size

Total Lines

Duplication

Lines	48
Ratio	100 %

Importance

Changes

Metric	Value
cc	3
nc	32
nop	0
dl	48
loc	48
rs	9.125
c	0
b	0
f	0

2 Functions

Rating	Name	Duplication	Size	Complexity
A		9	9	2
A		10	10	4

/* global kirkiL10n, kirki */
wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicControl.extend({

	initKirkiControl: function() {


		'use strict';

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

console.log(x); //prints Hello, Stonehenge! to the console
		    value   = control.setting._value,
		    picker;

		control.renderFontSelector();
		control.renderBackupFontSelector();
		control.renderVariantSelector();
		control.renderSubsetSelector();

		// Font-size.
		if ( control.params['default']['font-size'] ) {
			this.container.on( 'change keyup paste', '.font-size input', function() {
				control.saveValue( 'font-size', jQuery( this ).val() );
			});
		}

		// Line-height.
		if ( control.params['default']['line-height'] ) {
			this.container.on( 'change keyup paste', '.line-height input', function() {
				control.saveValue( 'line-height', jQuery( this ).val() );
			});
		}

		// Margin-top.
		if ( control.params['default']['margin-top'] ) {
			this.container.on( 'change keyup paste', '.margin-top input', function() {
				control.saveValue( 'margin-top', jQuery( this ).val() );
			});
		}

		// Margin-bottom.
		if ( control.params['default']['margin-bottom'] ) {
			this.container.on( 'change keyup paste', '.margin-bottom input', function() {
				control.saveValue( 'margin-bottom', jQuery( this ).val() );
			});
		}

		// Letter-spacing.
		if ( control.params['default']['letter-spacing'] ) {
			value['letter-spacing'] = ( jQuery.isNumeric( value['letter-spacing'] ) ) ? value['letter-spacing'] + 'px' : value['letter-spacing'];
			this.container.on( 'change keyup paste', '.letter-spacing input', function() {
				value['letter-spacing'] = ( jQuery.isNumeric( jQuery( this ).val() ) ) ? jQuery( this ).val() + 'px' : jQuery( this ).val();
				control.saveValue( 'letter-spacing', value['letter-spacing'] );
			});
		}

		// Word-spacing.
		if ( control.params['default']['word-spacing'] ) {
			this.container.on( 'change keyup paste', '.word-spacing input', function() {
				control.saveValue( 'word-spacing', jQuery( this ).val() );
			});
		}

		// Text-align.
		if ( control.params['default']['text-align'] ) {
			this.container.on( 'change', '.text-align input', function() {
				control.saveValue( 'text-align', jQuery( this ).val() );
			});
		}

		// Text-transform.
		if ( control.params['default']['text-transform'] ) {
			jQuery( control.selector + ' .text-transform select' ).selectWoo().on( 'change', function() {
				control.saveValue( 'text-transform', jQuery( this ).val() );
			});
		}

		// Text-decoration.
		if ( control.params['default']['text-decoration'] ) {
			jQuery( control.selector + ' .text-decoration select' ).selectWoo().on( 'change', function() {
				control.saveValue( 'text-decoration', jQuery( this ).val() );
			});
		}

		// Color.
		if ( control.params['default'].color ) {
			picker = this.container.find( '.kirki-color-control' );
			picker.wpColorPicker({
				change: function() {
					setTimeout( function() {
						control.saveValue( 'color', picker.val() );
					}, 100 );
				}
			});
		}
	},

	/**
	 * Adds the font-families to the font-family dropdown
	 * and instantiates selectWoo.
	 */
	renderFontSelector: function() {


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

console.log(x); //prints Hello, Stonehenge! to the console
		    selector        = control.selector + ' .font-family select',
		    data            = [],

		    standardFonts   = [],
		    googleFonts     = [],
		    value           = control.setting._value,
		    fonts           = control.getFonts(),
		    fontSelect;

		// Format standard fonts as an array.
		if ( ! _.isUndefined( fonts.standard ) ) {
			_.each( fonts.standard, function( font ) {
				standardFonts.push({
					id: font.family.replace( /&quot;/g, '&#39' ),
					text: font.label
				});
			});
		}

		// Format google fonts as an array.
		if ( ! _.isUndefined( fonts.google ) ) {
			_.each( fonts.google, function( font ) {
				googleFonts.push({
					id: font.family,
					text: font.family
				});
			});
		}

		// Combine forces and build the final data.
		data = [
			{ text: kirkiL10n.standardFonts, children: standardFonts },
			{ text: kirkiL10n.googleFonts, children: googleFonts }
		];

		// Instantiate selectWoo with the data.
		fontSelect = jQuery( selector ).selectWoo({
			data: data
		});

		// Set the initial value.
		if ( value['font-family'] ) {
			fontSelect.val( value['font-family'].replace( /'/g, '"' ) ).trigger( 'change' );
		}

		// When the value changes
		fontSelect.on( 'change', function() {

			// Set the value.
			control.saveValue( 'font-family', jQuery( this ).val() );

			// Re-init the font-backup selector.
			control.renderBackupFontSelector();

			// Re-init variants selector.
			control.renderVariantSelector();

			// Re-init subsets selector.
			control.renderSubsetSelector();
		});
	},

	/**
	 * Adds the font-families to the font-family dropdown
	 * and instantiates selectWoo.
	 */
	renderBackupFontSelector: function() {

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

console.log(x); //prints Hello, Stonehenge! to the console
		    selector      = control.selector + ' .font-backup select',
		    standardFonts = [],
		    value         = control.setting._value,
		    fontFamily    = value['font-family'],
		    fonts         = control.getFonts(),
		    fontSelect;

		if ( _.isUndefined( value['font-backup'] ) || null === value['font-backup'] ) {
			value['font-backup'] = '';
		}

		// Hide if we're not on a google-font.
		if ( 'google' !== kirki.util.webfonts.getFontType( fontFamily ) ) {
			jQuery( control.selector + ' .font-backup' ).hide();
			return;
		}
		jQuery( control.selector + ' .font-backup' ).show();

		// Format standard fonts as an array.
		if ( ! _.isUndefined( fonts.standard ) ) {
			_.each( fonts.standard, function( font ) {
				standardFonts.push({
					id: font.family.replace( /&quot;/g, '&#39' ),
					text: font.label
				});
			});
		}

		// Instantiate selectWoo with the data.
		fontSelect = jQuery( selector ).selectWoo({
			data: standardFonts
		});

		// Set the initial value.
		if ( 'undefined' !== typeof value['font-backup'] ) {
			fontSelect.val( value['font-backup'].replace( /'/g, '"' ) ).trigger( 'change' );
		}

		// When the value changes
		fontSelect.on( 'change', function() {

			// Set the value.
			control.saveValue( 'font-backup', jQuery( this ).val() );
		});
	},

	/**
	 * Renders the variants selector using selectWoo
	 * Displays font-variants for the currently selected font-family.
	 */
	renderVariantSelector: function() {


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

console.log(x); //prints Hello, Stonehenge! to the console
		    value      = control.setting._value,
		    fontFamily = value['font-family'],
		    variants   = kirki.util.webfonts.google.getVariants( fontFamily ),
		    selector   = control.selector + ' .variant select',
		    data       = [],
		    isValid    = false,
		    fontWeight,
		    variantSelector,
		    fontStyle;

		jQuery( control.selector + ' .variant' ).show();
		_.each( variants, function( variant ) {
			if ( value.variant === variant ) {
				isValid = true;
			}
			data.push({
				id: variant,
				text: variant
			});
		});
		if ( ! isValid ) {
			value.variant = 'regular';
		}

		if ( jQuery( selector ).hasClass( 'select2-hidden-accessible' ) ) {
			jQuery( selector ).selectWoo( 'destroy' );
			jQuery( selector ).empty();
		}

		// Instantiate selectWoo with the data.
		variantSelector = jQuery( selector ).selectWoo({
			data: data
		});
		variantSelector.val( value.variant ).trigger( 'change' );
		variantSelector.on( 'change', function() {
			control.saveValue( 'variant', jQuery( this ).val() );

			fontWeight = ( ! _.isString( value.variant ) ) ? '400' : value.variant.match( /\d/g );
			fontWeight = ( ! _.isObject( fontWeight ) ) ? '400' : fontWeight.join( '' );
			fontStyle  = ( -1 !== value.variant.indexOf( 'italic' ) ) ? 'italic' : 'normal';

			control.saveValue( 'font-weight', fontWeight );
			control.saveValue( 'font-style', fontStyle );
		});
	},

	/**
	 * Renders the subsets selector using selectWoo
	 * Displays font-subsets for the currently selected font-family.
	 */
	renderSubsetSelector: function() {

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

console.log(x); //prints Hello, Stonehenge! to the console
		    value      = control.setting._value,
		    fontFamily = value['font-family'],
		    subsets    = kirki.util.webfonts.google.getSubsets( fontFamily ),
		    selector   = control.selector + ' .subsets select',
		    data       = [],
		    validValue = value.subsets,
		    subsetSelector;

		if ( false !== subsets ) {
			jQuery( control.selector + ' .subsets' ).show();
			_.each( subsets, function( subset ) {

				if ( _.isObject( validValue ) ) {
					if ( -1 === validValue.indexOf( subset ) ) {
						validValue = _.reject( validValue, function( subValue ) {
							return subValue === subset;
						});
					}
				}

				data.push({
					id: subset,
					text: subset
				});
			});

		} else {
			jQuery( control.selector + ' .subsets' ).hide();
		}

		if ( jQuery( selector ).hasClass( 'select2-hidden-accessible' ) ) {
			jQuery( selector ).selectWoo( 'destroy' );
			jQuery( selector ).empty();
		}

		// Instantiate selectWoo with the data.
		subsetSelector = jQuery( selector ).selectWoo({
			data: data
		});
		subsetSelector.val( validValue ).trigger( 'change' );
		subsetSelector.on( 'change', function() {
			control.saveValue( 'subsets', jQuery( this ).val() );
		});
	},

	/**
	 * Get fonts.
	 */
	getFonts: function() {
		var control            = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
		    initialGoogleFonts = kirki.util.webfonts.google.getFonts(),
		    googleFonts        = {},
		    googleFontsSort    = 'alpha',
			googleFontsNumber  = 0,
		    standardFonts      = {};

		// Get google fonts.
		if ( ! _.isEmpty( control.params.choices.fonts.google ) ) {
			if ( 'alpha' === control.params.choices.fonts.google[0] || 'popularity' === control.params.choices.fonts.google[0] || 'trending' === control.params.choices.fonts.google[0] ) {
				googleFontsSort = control.params.choices.fonts.google[0];
				if ( ! isNaN( control.params.choices.fonts.google[1] ) ) {
					googleFontsNumber = parseInt( control.params.choices.fonts.google[1], 10 );
				}
				googleFonts = kirki.util.webfonts.google.getFonts( googleFontsSort, googleFontsNumber );

			} else {
				_.each( control.params.choices.fonts.google, function( fontName ) {
					if ( 'undefined' !== typeof initialGoogleFonts[ fontName ] && ! _.isEmpty( initialGoogleFonts[ fontName ] ) ) {
						googleFonts[ fontName ] = initialGoogleFonts[ fontName ];
					}
				} );
			}
		} else {
			googleFonts = kirki.util.webfonts.google.getFonts( googleFontsSort, googleFontsNumber );
		}

		// Get standard fonts.
		if ( ! _.isEmpty( control.params.choices.fonts.standard ) ) {
			_.each( control.params.choices.fonts.standard, function( fontName ) {
				if ( 'undefined' !== typeof kirki.util.webfonts.standard.fonts[ fontName ] && ! _.isEmpty( kirki.util.webfonts.standard.fonts[ fontName ] ) ) {
					standardFonts[ fontName ] = {};
					if ( 'undefined' !== kirki.util.webfonts.standard.fonts[ fontName ].stack && ! _.isEmpty( kirki.util.webfonts.standard.fonts[ fontName ].stack ) ) {
						standardFonts[ fontName ].family = kirki.util.webfonts.standard.fonts[ fontName ].stack;
					} else {
						standardFonts[ fontName ].family = googleFonts[ fontName ];
					}
					if ( 'undefined' !== kirki.util.webfonts.standard.fonts[ fontName ].label && ! _.isEmpty( kirki.util.webfonts.standard.fonts[ fontName ].label ) ) {
						standardFonts[ fontName ].label = kirki.util.webfonts.standard.fonts[ fontName ].label;
					} else if ( ! _.isEmpty( standardFonts[ fontName ] ) ) {
						standardFonts[ fontName ].label = standardFonts[ fontName ];
					}
				} else {
					standardFonts[ fontName ] = {
						family: fontName,
						label: fontName
					};
				}
			} );
		} else {
			_.each( kirki.util.webfonts.standard.fonts, function( font, id ) {
				standardFonts[ id ] = {
					family: font.stack,
					label: font.label
				};
			} );
		}
		return {
			google: googleFonts,
			standard: standardFonts
		};
	},

	/**
	 * 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
		    input   = control.container.find( '.typography-hidden-value' ),
		    val     = control.setting._value;

		val[ property ] = value;

		jQuery( input ).attr( 'value', JSON.stringify( val ) ).trigger( 'change' );
		control.setting.set( val );
	}
});


1		/* global kirkiL10n, kirki */
2		wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicControl.extend({
3
4	View Code Duplication	initKirkiControl: function() {
		0 ignored issues – show Duplication introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
5
6		'use strict';
7
8		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...
9		value = control.setting._value,
10		picker;
11
12		control.renderFontSelector();
13		control.renderBackupFontSelector();
14		control.renderVariantSelector();
15		control.renderSubsetSelector();
16
17		// Font-size.
18		if ( control.params['default']['font-size'] ) {
19		this.container.on( 'change keyup paste', '.font-size input', function() {
20		control.saveValue( 'font-size', jQuery( this ).val() );
21		});
22		}
23
24		// Line-height.
25		if ( control.params['default']['line-height'] ) {
26		this.container.on( 'change keyup paste', '.line-height input', function() {
27		control.saveValue( 'line-height', jQuery( this ).val() );
28		});
29		}
30
31		// Margin-top.
32		if ( control.params['default']['margin-top'] ) {
33		this.container.on( 'change keyup paste', '.margin-top input', function() {
34		control.saveValue( 'margin-top', jQuery( this ).val() );
35		});
36		}
37
38		// Margin-bottom.
39		if ( control.params['default']['margin-bottom'] ) {
40		this.container.on( 'change keyup paste', '.margin-bottom input', function() {
41		control.saveValue( 'margin-bottom', jQuery( this ).val() );
42		});
43		}
44
45		// Letter-spacing.
46		if ( control.params['default']['letter-spacing'] ) {
47		value['letter-spacing'] = ( jQuery.isNumeric( value['letter-spacing'] ) ) ? value['letter-spacing'] + 'px' : value['letter-spacing'];
48		this.container.on( 'change keyup paste', '.letter-spacing input', function() {
49		value['letter-spacing'] = ( jQuery.isNumeric( jQuery( this ).val() ) ) ? jQuery( this ).val() + 'px' : jQuery( this ).val();
50		control.saveValue( 'letter-spacing', value['letter-spacing'] );
51		});
52		}
53
54		// Word-spacing.
55		if ( control.params['default']['word-spacing'] ) {
56		this.container.on( 'change keyup paste', '.word-spacing input', function() {
57		control.saveValue( 'word-spacing', jQuery( this ).val() );
58		});
59		}
60
61		// Text-align.
62		if ( control.params['default']['text-align'] ) {
63		this.container.on( 'change', '.text-align input', function() {
64		control.saveValue( 'text-align', jQuery( this ).val() );
65		});
66		}
67
68		// Text-transform.
69		if ( control.params['default']['text-transform'] ) {
70		jQuery( control.selector + ' .text-transform select' ).selectWoo().on( 'change', function() {
71		control.saveValue( 'text-transform', jQuery( this ).val() );
72		});
73		}
74
75		// Text-decoration.
76		if ( control.params['default']['text-decoration'] ) {
77		jQuery( control.selector + ' .text-decoration select' ).selectWoo().on( 'change', function() {
78		control.saveValue( 'text-decoration', jQuery( this ).val() );
79		});
80		}
81
82		// Color.
83		if ( control.params['default'].color ) {
84		picker = this.container.find( '.kirki-color-control' );
85		picker.wpColorPicker({
86		change: function() {
87		setTimeout( function() {
88		control.saveValue( 'color', picker.val() );
89		}, 100 );
90		}
91		});
92		}
93		},
94
95		/**
96		* Adds the font-families to the font-family dropdown
97		* and instantiates selectWoo.
98		*/
99	View Code Duplication	renderFontSelector: function() {
		0 ignored issues – show Duplication introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
100
101		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...
102		selector = control.selector + ' .font-family select',
103		data = [],
		0 ignored issues – show Unused Code introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report The assignment to variable `data` seems to be never used. Consider removing it. Loading history...
104		standardFonts = [],
105		googleFonts = [],
106		value = control.setting._value,
107		fonts = control.getFonts(),
108		fontSelect;
109
110		// Format standard fonts as an array.
111		if ( ! _.isUndefined( fonts.standard ) ) {
112		_.each( fonts.standard, function( font ) {
113		standardFonts.push({
114		id: font.family.replace( /"/g, '&#39' ),
115		text: font.label
116		});
117		});
118		}
119
120		// Format google fonts as an array.
121		if ( ! _.isUndefined( fonts.google ) ) {
122		_.each( fonts.google, function( font ) {
123		googleFonts.push({
124		id: font.family,
125		text: font.family
126		});
127		});
128		}
129
130		// Combine forces and build the final data.
131		data = [
132		{ text: kirkiL10n.standardFonts, children: standardFonts },
133		{ text: kirkiL10n.googleFonts, children: googleFonts }
134		];
135
136		// Instantiate selectWoo with the data.
137		fontSelect = jQuery( selector ).selectWoo({
138		data: data
139		});
140
141		// Set the initial value.
142		if ( value['font-family'] ) {
143		fontSelect.val( value['font-family'].replace( /'/g, '"' ) ).trigger( 'change' );
144		}
145
146		// When the value changes
147		fontSelect.on( 'change', function() {
148
149		// Set the value.
150		control.saveValue( 'font-family', jQuery( this ).val() );
151
152		// Re-init the font-backup selector.
153		control.renderBackupFontSelector();
154
155		// Re-init variants selector.
156		control.renderVariantSelector();
157
158		// Re-init subsets selector.
159		control.renderSubsetSelector();
160		});
161		},
162
163		/**
164		* Adds the font-families to the font-family dropdown
165		* and instantiates selectWoo.
166		*/
167		renderBackupFontSelector: function() {
168
169		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...
170		selector = control.selector + ' .font-backup select',
171		standardFonts = [],
172		value = control.setting._value,
173		fontFamily = value['font-family'],
174		fonts = control.getFonts(),
175		fontSelect;
176
177		if ( _.isUndefined( value['font-backup'] ) \|\| null === value['font-backup'] ) {
178		value['font-backup'] = '';
179		}
180
181		// Hide if we're not on a google-font.
182		if ( 'google' !== kirki.util.webfonts.getFontType( fontFamily ) ) {
183		jQuery( control.selector + ' .font-backup' ).hide();
184		return;
185		}
186		jQuery( control.selector + ' .font-backup' ).show();
187
188		// Format standard fonts as an array.
189		if ( ! _.isUndefined( fonts.standard ) ) {
190		_.each( fonts.standard, function( font ) {
191		standardFonts.push({
192		id: font.family.replace( /"/g, '&#39' ),
193		text: font.label
194		});
195		});
196		}
197
198		// Instantiate selectWoo with the data.
199		fontSelect = jQuery( selector ).selectWoo({
200		data: standardFonts
201		});
202
203		// Set the initial value.
204		if ( 'undefined' !== typeof value['font-backup'] ) {
205		fontSelect.val( value['font-backup'].replace( /'/g, '"' ) ).trigger( 'change' );
206		}
207
208		// When the value changes
209		fontSelect.on( 'change', function() {
210
211		// Set the value.
212		control.saveValue( 'font-backup', jQuery( this ).val() );
213		});
214		},
215
216		/**
217		* Renders the variants selector using selectWoo
218		* Displays font-variants for the currently selected font-family.
219		*/
220	View Code Duplication	renderVariantSelector: function() {
		0 ignored issues – show Duplication introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
221
222		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...
223		value = control.setting._value,
224		fontFamily = value['font-family'],
225		variants = kirki.util.webfonts.google.getVariants( fontFamily ),
226		selector = control.selector + ' .variant select',
227		data = [],
228		isValid = false,
229		fontWeight,
230		variantSelector,
231		fontStyle;
232
233		jQuery( control.selector + ' .variant' ).show();
234		_.each( variants, function( variant ) {
235		if ( value.variant === variant ) {
236		isValid = true;
237		}
238		data.push({
239		id: variant,
240		text: variant
241		});
242		});
243		if ( ! isValid ) {
244		value.variant = 'regular';
245		}
246
247		if ( jQuery( selector ).hasClass( 'select2-hidden-accessible' ) ) {
248		jQuery( selector ).selectWoo( 'destroy' );
249		jQuery( selector ).empty();
250		}
251
252		// Instantiate selectWoo with the data.
253		variantSelector = jQuery( selector ).selectWoo({
254		data: data
255		});
256		variantSelector.val( value.variant ).trigger( 'change' );
257		variantSelector.on( 'change', function() {
258		control.saveValue( 'variant', jQuery( this ).val() );
259
260		fontWeight = ( ! _.isString( value.variant ) ) ? '400' : value.variant.match( /\d/g );
261		fontWeight = ( ! _.isObject( fontWeight ) ) ? '400' : fontWeight.join( '' );
262		fontStyle = ( -1 !== value.variant.indexOf( 'italic' ) ) ? 'italic' : 'normal';
263
264		control.saveValue( 'font-weight', fontWeight );
265		control.saveValue( 'font-style', fontStyle );
266		});
267		},
268
269		/**
270		* Renders the subsets selector using selectWoo
271		* Displays font-subsets for the currently selected font-family.
272		*/
273		renderSubsetSelector: function() {
274
275		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...
276		value = control.setting._value,
277		fontFamily = value['font-family'],
278		subsets = kirki.util.webfonts.google.getSubsets( fontFamily ),
279		selector = control.selector + ' .subsets select',
280		data = [],
281		validValue = value.subsets,
282		subsetSelector;
283
284		if ( false !== subsets ) {
285		jQuery( control.selector + ' .subsets' ).show();
286		_.each( subsets, function( subset ) {
287
288		if ( _.isObject( validValue ) ) {
289		if ( -1 === validValue.indexOf( subset ) ) {
290		validValue = _.reject( validValue, function( subValue ) {
291		return subValue === subset;
292		});
293		}
294		}
295
296		data.push({
297		id: subset,
298		text: subset
299		});
300		});
301
302		} else {
303		jQuery( control.selector + ' .subsets' ).hide();
304		}
305
306		if ( jQuery( selector ).hasClass( 'select2-hidden-accessible' ) ) {
307		jQuery( selector ).selectWoo( 'destroy' );
308		jQuery( selector ).empty();
309		}
310
311		// Instantiate selectWoo with the data.
312		subsetSelector = jQuery( selector ).selectWoo({
313		data: data
314		});
315		subsetSelector.val( validValue ).trigger( 'change' );
316		subsetSelector.on( 'change', function() {
317		control.saveValue( 'subsets', jQuery( this ).val() );
318		});
319		},
320
321		/**
322		* Get fonts.
323		*/
324		getFonts: function() {
325		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...
326		initialGoogleFonts = kirki.util.webfonts.google.getFonts(),
327		googleFonts = {},
328		googleFontsSort = 'alpha',
329		googleFontsNumber = 0,
330		standardFonts = {};
331
332		// Get google fonts.
333		if ( ! _.isEmpty( control.params.choices.fonts.google ) ) {
334		if ( 'alpha' === control.params.choices.fonts.google[0] \|\| 'popularity' === control.params.choices.fonts.google[0] \|\| 'trending' === control.params.choices.fonts.google[0] ) {
335		googleFontsSort = control.params.choices.fonts.google[0];
336		if ( ! isNaN( control.params.choices.fonts.google[1] ) ) {
337		googleFontsNumber = parseInt( control.params.choices.fonts.google[1], 10 );
338		}
339		googleFonts = kirki.util.webfonts.google.getFonts( googleFontsSort, googleFontsNumber );
340
341		} else {
342		_.each( control.params.choices.fonts.google, function( fontName ) {
343		if ( 'undefined' !== typeof initialGoogleFonts[ fontName ] && ! _.isEmpty( initialGoogleFonts[ fontName ] ) ) {
344		googleFonts[ fontName ] = initialGoogleFonts[ fontName ];
345		}
346		} );
347		}
348		} else {
349		googleFonts = kirki.util.webfonts.google.getFonts( googleFontsSort, googleFontsNumber );
350		}
351
352		// Get standard fonts.
353		if ( ! _.isEmpty( control.params.choices.fonts.standard ) ) {
354		_.each( control.params.choices.fonts.standard, function( fontName ) {
355		if ( 'undefined' !== typeof kirki.util.webfonts.standard.fonts[ fontName ] && ! _.isEmpty( kirki.util.webfonts.standard.fonts[ fontName ] ) ) {
356		standardFonts[ fontName ] = {};
357		if ( 'undefined' !== kirki.util.webfonts.standard.fonts[ fontName ].stack && ! _.isEmpty( kirki.util.webfonts.standard.fonts[ fontName ].stack ) ) {
358		standardFonts[ fontName ].family = kirki.util.webfonts.standard.fonts[ fontName ].stack;
359		} else {
360		standardFonts[ fontName ].family = googleFonts[ fontName ];
361		}
362		if ( 'undefined' !== kirki.util.webfonts.standard.fonts[ fontName ].label && ! _.isEmpty( kirki.util.webfonts.standard.fonts[ fontName ].label ) ) {
363		standardFonts[ fontName ].label = kirki.util.webfonts.standard.fonts[ fontName ].label;
364		} else if ( ! _.isEmpty( standardFonts[ fontName ] ) ) {
365		standardFonts[ fontName ].label = standardFonts[ fontName ];
366		}
367		} else {
368		standardFonts[ fontName ] = {
369		family: fontName,
370		label: fontName
371		};
372		}
373		} );
374		} else {
375		_.each( kirki.util.webfonts.standard.fonts, function( font, id ) {
376		standardFonts[ id ] = {
377		family: font.stack,
378		label: font.label
379		};
380		} );
381		}
382		return {
383		google: googleFonts,
384		standard: standardFonts
385		};
386		},
387
388		/**
389		* Saves the value.
390		*/
391		saveValue: function( property, value ) {
392
393		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...
394		input = control.container.find( '.typography-hidden-value' ),
395		val = control.setting._value;
396
397		val[ property ] = value;
398
399		jQuery( input ).attr( 'value', JSON.stringify( val ) ).trigger( 'change' );
400		control.setting.set( val );
401		}
402		});
403

aristath / kirki

Pull Request — master (#1700)

rol.extend.renderVariantSelector A

Complexity

Size

Duplication

Importance

2 Functions

Duplication Side-by-Side

Filter issues like