/** * File typography.js * * Handles Typography of the site * * @package Astra */ ( function( $ ) { /* Internal shorthand */ var api = wp.customize; /** * Helper class for the main Customizer interface. * * @since 1.0.0 * @class AstTypography */ AstTypography = { /** * Initializes our custom logic for the Customizer. * * @since 1.0.0 * @method init */ init: function() { AstTypography._initFonts(); }, /** * Initializes logic for font controls. * * @since 1.0.0 * @access private * @method _initFonts */ _initFonts: function() { $( '.customize-control-ast-font-family select' ).each( function(e) { if( 'undefined' != typeof astra.customizer ) { var fonts = astra.customizer.settings.google_fonts; var optionName = $(this).data('name'); $(this).html( fonts ); // Set inherit option text defined in control parameters. $("select[data-name='" + optionName + "'] option[value='inherit']").text( $(this).data('inherit') ); var font_val = $(this).data('value'); $(this).val( font_val ); } }); $( '.customize-control-ast-font-family select' ).each( AstTypography._initFont ); // Added select2 for all font family & font variant. $('.customize-control-ast-font-family select, .customize-control-ast-font-variant select').selectWoo(); $('.customize-control-ast-font-variant select').on('select2:unselecting', function (e) { var variantSelect = $(this).data( 'customize-setting-link' ), unselectedValue = e.params.args.data.id || ''; if ( unselectedValue ) { $(this).find('option[value="' + e.params.args.data.id + '"]').removeAttr('selected'); if ( null === $(this).val() ) { api( variantSelect ).set( '' ); } } }); }, /** * Initializes logic for a single font control. * * @since 1.0.0 * @access private * @method _initFont */ _initFont: function() { var select = $( this ), link = select.data( 'customize-setting-link' ), weight = select.data( 'connected-control' ), variant = select.data( 'connected-variant' ); if ( 'undefined' != typeof weight ) { api( link ).bind( AstTypography._fontSelectChange ); AstTypography._setFontWeightOptions.apply( api( link ), [ true ] ); } if ( 'undefined' != typeof variant ) { api( link ).bind( AstTypography._fontSelectChange ); AstTypography._setFontVarianttOptions.apply( api( link ), [ true ] ); } }, /** * Callback for when a font control changes. * * @since 1.0.0 * @access private * @method _fontSelectChange */ _fontSelectChange: function() { var fontSelect = api.control( this.id ).container.find( 'select' ), variants = fontSelect.data( 'connected-variant' ); AstTypography._setFontWeightOptions.apply( this, [ false ] ); if ( 'undefined' != typeof variants ) { AstTypography._setFontVarianttOptions.apply( this, [ false ] ); } }, /** * Clean font name. * * Google Fonts are saved as {'Font Name', Category}. This function cleanes this up to retreive only the {Font Name}. * * @since 1.3.0 * @param {String} fontValue Name of the font. * * @return {String} Font name where commas and inverted commas are removed if the font is a Google Font. */ _cleanGoogleFonts: function(fontValue) { // Bail if fontVAlue does not contain a comma. if ( ! fontValue.includes(',') ) return fontValue; var splitFont = fontValue.split(','); var pattern = new RegExp("'", 'gi'); // Check if the cleaned font exists in the Google fonts array. var googleFontValue = splitFont[0].replace(pattern, ''); if ( 'undefined' != typeof AstFontFamilies.google[ googleFontValue ] ) { fontValue = googleFontValue; } return fontValue; }, /** * Get font Weights. * * This function gets the font weights values respective to the selected fonts family{Font Name}. * * @since 1.5.2 * @param {String} fontValue Name of the font. * * @return {String} Available font weights for the selected fonts. */ _getWeightObject: function(fontValue) { var weightObject = [ '400', '600' ]; if ( fontValue == 'inherit' ) { weightObject = [ '100','200','300','400','500','600','700','800','900' ]; } else if ( 'undefined' != typeof AstFontFamilies.system[ fontValue ] ) { weightObject = AstFontFamilies.system[ fontValue ].weights; } else if ( 'undefined' != typeof AstFontFamilies.google[ fontValue ] ) { weightObject = AstFontFamilies.google[ fontValue ][0]; weightObject = Object.keys(weightObject).map(function(k) { return weightObject[k]; }); } else if ( 'undefined' != typeof AstFontFamilies.custom[ fontValue ] ) { weightObject = AstFontFamilies.custom[ fontValue ].weights; } return weightObject; }, /** * Sets the options for a font weight control when a * font family control changes. * * @since 1.0.0 * @access private * @method _setFontWeightOptions * @param {Boolean} init Whether or not we're initializing this font weight control. */ _setFontWeightOptions: function( init ) { var i = 0, fontSelect = api.control( this.id ).container.find( 'select' ), fontValue = this(), selected = '', weightKey = fontSelect.data( 'connected-control' ), weightSelect = api.control( weightKey ).container.find( 'select' ), currentWeightTitle = weightSelect.data( 'inherit' ), weightValue = init ? weightSelect.val() : '400', inheritWeightObject = [ 'inherit' ], weightObject = [ '400', '600' ], weightOptions = '', weightMap = astraTypo; if ( fontValue == 'inherit' ) { weightValue = init ? weightSelect.val() : 'inherit'; } var fontValue = AstTypography._cleanGoogleFonts(fontValue); var weightObject = AstTypography._getWeightObject( fontValue ); weightObject = $.merge( inheritWeightObject, weightObject ) weightMap[ 'inherit' ] = currentWeightTitle; for ( ; i < weightObject.length; i++ ) { if ( 0 === i && -1 === $.inArray( weightValue, weightObject ) ) { weightValue = weightObject[ 0 ]; selected = ' selected="selected"'; } else { selected = weightObject[ i ] == weightValue ? ' selected="selected"' : ''; } if( ! weightObject[ i ].includes( "italic" ) ){ weightOptions += ''; } } weightSelect.html( weightOptions ); if ( ! init ) { api( weightKey ).set( '' ); api( weightKey ).set( weightValue ); } }, /** * Sets the options for a font variant control when a * font family control changes. * * @since 1.5.2 * @access private * @method _setFontVarianttOptions * @param {Boolean} init Whether or not we're initializing this font variant control. */ _setFontVarianttOptions: function( init ) { var i = 0, fontSelect = api.control( this.id ).container.find( 'select' ), fontValue = this(), selected = '', variants = fontSelect.data( 'connected-variant' ), variantSelect = api.control( variants ).container.find( 'select' ), variantSavedField = api.control( variants ).container.find( '.ast-font-variant-hidden-value' ), weightValue = '', weightOptions = '', currentWeightTitle = variantSelect.data( 'inherit' ), weightMap = astraTypo; var variantArray = variantSavedField.val().split(','); // Hide font variant for any ohter fonts then Google var selectedOptionGroup = fontSelect.find('option[value="' + fontSelect.val() + '"]').closest('optgroup').attr('label') || ''; if ( 'Google' == selectedOptionGroup ) { variantSelect.parent().removeClass('ast-hide'); } else{ variantSelect.parent().addClass('ast-hide'); } var fontValue = AstTypography._cleanGoogleFonts(fontValue); var weightObject = AstTypography._getWeightObject( fontValue ); weightMap[ 'inherit' ] = currentWeightTitle; for ( var i = 0; i < weightObject.length; i++ ) { for ( var e = 0; e < variantArray.length; e++ ) { if ( weightObject[i] === variantArray[e] ) { weightValue = weightObject[ i ]; selected = ' selected="selected"'; } else{ selected = ( weightObject[ i ] == weightValue ) ? ' selected="selected"' : ''; } } weightOptions += ''; } variantSelect.html( weightOptions ); if ( ! init ) { api( variants ).set( '' ); } }, }; $( function() { AstTypography.init(); } ); })( jQuery );