function wpex_generate_typography_customizer_live_preview_js()
{
$typo = new WPEX_Theme_Customizer_Typography();
$elements = $typo->elements();
$output = '';
foreach ($elements as $element => $array) {
if ('load_custom_font_1' == $element) {
continue;
}
// Attributes to loop through - each attribute has it's own setting
if (!empty($array['settings'])) {
$attributes = $array['settings'];
} else {
$attributes = array('font-family', 'font-weight', 'font-style', 'font-size', 'color', 'line-height', 'letter-spacing', 'text-transform', 'margin');
}
$add_css = '';
$target = isset($array['target']) ? $array['target'] : '';
// Loop through attributes
foreach ($attributes as $attribute) {
// Generate style classname
$style_class = 'customizer-typography-' . $element . '-' . $attribute;
// Open js output
$output .= 'api("' . $element . '_typography[' . $attribute . ']", function(value){value.bind(function(newval){';
// These are the styles to add inside the style tag
$styles = $target . '{' . $attribute . ': \' + newval + \';';
// Add font-family if it doesn't exist already
if ('font-family' == $attribute) {
// Add script to header if google font
$output .= 'if ( newval ) {
var fontHandle = newval.trim().toLowerCase().replace( " ", "-" );
var fontScriptID = "' . $style_class . '";
var fontScriptHref = newval.replace( " ", "%20" );
fontScriptHref = fontScriptHref.replace( ",", "%2C" );
fontScriptHref = "//fonts.googleapis.com/css?family="+ newval + ":300italic,400italic,600italic,700italic,800italic,400,300,600,700,800";
if ( $( "#"+ fontScriptID +"" ).length ) {
$( "#"+ fontScriptID +"" ).attr( "href", fontScriptHref );
} else {
$( "head" ).append(\'<link id="\' + fontScriptID +\'" rel="stylesheet" type="text/css" href="\'+ fontScriptHref +\'">\');
}
}
';
}
// Output
$output .= '
var el = $( \'.' . $style_class . '\' );
if ( newval ) {
var style = \'<style class="' . $style_class . '">' . $styles . '</style>\';
if ( el.length ) {
el.replaceWith( style );
} else {
$( "head" ).append( style );
}
} else {
el.remove();
}
';
// Close js output
$output .= '});});';
}
// End attributes loop
}
$output = $output;
echo $output;
exit;
}
?>
' ).css('border-bottom-color', '');
}
} );
} );
<?php
}
}
}
}
}
/*-----------------------------------------------------------------------------------*/
/* - Typography Options
/*-----------------------------------------------------------------------------------*/
if ('typography' == $return) {
$obj = new WPEX_Theme_Customizer_Typography();
$elements = $obj->elements();
// Loop through color options and add a theme customizer setting for it
foreach ($elements as $element => $array) {
$target = isset($array['target']) ? $array['target'] : '';
$theme_mods = array('font-weight', 'font-style', 'font-size', 'color', 'line-height', 'letter-spacing', 'text-transform');
foreach ($theme_mods as $mod) {
?>
wp.customize( '<?php
$element . '_typography[' . $mod . ']';
?>
', function( value ) {
$currentVal = $( '<?php
echo $target;
?>
' ).css('<?php