/**
* 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 += '<option value="' + weightObject[ i ] + '"' + selected + '>' + weightMap[ weightObject[ i ] ] + '</option>';
}
}
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 += '<option value="' + weightObject[ i ] + '"' + selected + '>' + weightMap[ weightObject[ i ] ] + '</option>';
}
variantSelect.html( weightOptions );
if ( ! init ) {
api( variants ).set( '' );
}
},
};
$( function() { AstTypography.init(); } );
})( jQuery );
