aristath /
kirki
| @@ 229-280 (lines=52) @@ | ||
| 226 | * Renders the variants selector using selectWoo |
|
| 227 | * Displays font-variants for the currently selected font-family. |
|
| 228 | */ |
|
| 229 | renderVariantSelector: function() { |
|
| 230 | ||
| 231 | var control = this, |
|
| 232 | value = control.getValue(), |
|
| 233 | fontFamily = value['font-family'], |
|
| 234 | variants = control.getVariants( fontFamily ), |
|
| 235 | selector = control.selector + ' .variant select', |
|
| 236 | data = [], |
|
| 237 | isValid = false, |
|
| 238 | fontWeight, |
|
| 239 | variantSelector, |
|
| 240 | fontStyle; |
|
| 241 | ||
| 242 | if ( false !== variants ) { |
|
| 243 | jQuery( control.selector + ' .variant' ).show(); |
|
| 244 | _.each( variants, function( variant ) { |
|
| 245 | if ( value.variant === variant.id ) { |
|
| 246 | isValid = true; |
|
| 247 | } |
|
| 248 | data.push({ |
|
| 249 | id: variant.id, |
|
| 250 | text: variant.label |
|
| 251 | }); |
|
| 252 | }); |
|
| 253 | if ( ! isValid ) { |
|
| 254 | value.variant = 'regular'; |
|
| 255 | } |
|
| 256 | ||
| 257 | if ( jQuery( selector ).hasClass( 'select2-hidden-accessible' ) ) { |
|
| 258 | jQuery( selector ).selectWoo( 'destroy' ); |
|
| 259 | jQuery( selector ).empty(); |
|
| 260 | } |
|
| 261 | ||
| 262 | // Instantiate selectWoo with the data. |
|
| 263 | variantSelector = jQuery( selector ).selectWoo({ |
|
| 264 | data: data |
|
| 265 | }); |
|
| 266 | variantSelector.val( value.variant ).trigger( 'change' ); |
|
| 267 | variantSelector.on( 'change', function() { |
|
| 268 | control.saveValue( 'variant', jQuery( this ).val() ); |
|
| 269 | ||
| 270 | fontWeight = ( ! _.isString( value.variant ) ) ? '400' : value.variant.match( /\d/g ); |
|
| 271 | fontWeight = ( ! _.isObject( fontWeight ) ) ? '400' : fontWeight.join( '' ); |
|
| 272 | fontStyle = ( -1 !== value.variant.indexOf( 'italic' ) ) ? 'italic' : 'normal'; |
|
| 273 | ||
| 274 | control.saveValue( 'font-weight', fontWeight ); |
|
| 275 | control.saveValue( 'font-style', fontStyle ); |
|
| 276 | }); |
|
| 277 | } else { |
|
| 278 | jQuery( control.selector + ' .variant' ).hide(); |
|
| 279 | } |
|
| 280 | }, |
|
| 281 | ||
| 282 | /** |
|
| 283 | * Renders the subsets selector using selectWoo |
|
| @@ 220-267 (lines=48) @@ | ||
| 217 | * Renders the variants selector using selectWoo |
|
| 218 | * Displays font-variants for the currently selected font-family. |
|
| 219 | */ |
|
| 220 | renderVariantSelector: function() { |
|
| 221 | ||
| 222 | var control = this, |
|
| 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 |
|
