/** * This file adds some LIVE to the Theme Customizer live preview. To leverage * this, set your custom settings to 'postMessage' and then add your handling * here. Your javascript should grab settings from customizer controls, and * then make any necessary changes to the page using jQuery. * * @package Astra */ /** * Generate font size in PX & REM */ function astra_font_size_rem( size, with_rem, device ) { var css = ''; if( size != '' ) { var device = ( typeof device != undefined ) ? device : 'desktop'; // font size with 'px'. css = 'font-size: ' + size + 'px;'; // font size with 'rem'. if ( with_rem ) { var body_font_size = wp.customize( 'astra-settings[font-size-body]' ).get(); body_font_size['desktop'] = ( body_font_size['desktop'] != '' ) ? body_font_size['desktop'] : 15; body_font_size['tablet'] = ( body_font_size['tablet'] != '' ) ? body_font_size['tablet'] : body_font_size['desktop']; body_font_size['mobile'] = ( body_font_size['mobile'] != '' ) ? body_font_size['mobile'] : body_font_size['tablet']; css += 'font-size: ' + ( size / body_font_size[device] ) + 'rem;'; } } return css; } /** * Apply CSS for the element */ function astra_color_responsive_css( addon, control, css_property, selector ) { wp.customize( control, function( value ) { value.bind( function( value ) { if ( value.desktop || value.mobile || value.tablet ) { // Remove ' ); } else { jQuery( 'style#' + control + '-' + addon ).remove(); } } ); } ); } /** * Responsive Font Size CSS */ function astra_responsive_font_size( control, selector ) { wp.customize( control, function( value ) { value.bind( function( value ) { if ( value.desktop || value.mobile || value.tablet ) { // Remove ' ); } else { jQuery( 'style#' + control + '-font-size' ).remove(); } } ); } ); } /** * Responsive Spacing CSS */ function astra_responsive_spacing( control, selector, type, side ) { wp.customize( control, function( value ) { value.bind( function( value ) { var sidesString = ""; var spacingType = "padding"; if ( value.desktop.top || value.desktop.right || value.desktop.bottom || value.desktop.left || value.tablet.top || value.tablet.right || value.tablet.bottom || value.tablet.left || value.mobile.top || value.mobile.right || value.mobile.bottom || value.mobile.left ) { if ( typeof side != undefined ) { sidesString = side + ""; // Replace comma character with dash, necessary to separate out spacing dimensions. sidesString = sidesString.replace(/,/g , "-"); } if ( typeof type != undefined ) { spacingType = type + ""; } // Remove ' ); } else { wp.customize.preview.send( 'refresh' ); jQuery( 'style#' + control + '-' + spacingType + '-' + sidesString ).remove(); } } ); } ); } /** * CSS */ function astra_css_font_size( control, selector ) { wp.customize( control, function( value ) { value.bind( function( size ) { if ( size ) { // Remove ' ); } else { jQuery( 'style#' + control ).remove(); } } ); } ); } /** * Return get_hexdec() */ function get_hexdec( hex ) { var hexString = hex.toString( 16 ); return parseInt( hexString, 16 ); } /** * Apply CSS for the element */ function astra_css( control, css_property, selector, unit ) { wp.customize( control, function( value ) { value.bind( function( new_value ) { // Remove ' ); if( 'unset' === new_value ){ jQuery( 'style#' + control + '-' + css_property ).remove(); } } else { // Remove old. jQuery( 'style#' + control + '-' + css_property ).remove(); } } ); } ); } /** * Dynamic Internal/Embedded Style for a Control */ function astra_add_dynamic_css( control, style ) { control = control.replace( '[', '-' ); control = control.replace( ']', '' ); jQuery( 'style#' + control ).remove(); jQuery( 'head' ).append( '' ); } /** * Generate background_obj CSS */ function astra_background_obj_css( wp_customize, bg_obj, ctrl_name, style ) { var gen_bg_css = ''; var bg_img = bg_obj['background-image']; var bg_color = bg_obj['background-color']; if( '' === bg_color && '' === bg_img ) { jQuery( 'style#' + ctrl_name ).remove(); }else{ if( undefined !== bg_obj['background-type'] && '' !== bg_obj['background-type'] ) { if ( ( 'color' === bg_obj['background-type'] ) ) { if ( '' !== bg_img && '' !== bg_color && undefined !== bg_color && 'unset' !== bg_color ) { gen_bg_css = 'background-image: linear-gradient(to right, ' + bg_color + ', ' + bg_color + '), url(' + bg_img + ');'; } else if ( undefined === bg_img || '' === bg_img || 'unset' === bg_img ) { gen_bg_css = 'background-color: ' + bg_color + ';'; } } else if ( 'image' === bg_obj['background-type'] ) { if ( '' !== bg_img && '' !== bg_color && undefined !== bg_color && 'unset' !== bg_color && ! bg_color.includes("linear-gradient") && ! bg_color.includes("radial-gradient") ) { gen_bg_css = 'background-image: linear-gradient(to right, ' + bg_color + ', ' + bg_color + '), url(' + bg_img + ');'; } if ( ( undefined === bg_color || '' === bg_color || 'unset' === bg_color || bg_color.includes("linear-gradient") || bg_color.includes("radial-gradient") ) && '' !== bg_img ) { gen_bg_css = 'background-image: url(' + bg_img + ');'; } } else if ( 'gradient' === bg_obj['background-type'] ) { if ( '' !== bg_color && 'unset' !== bg_color ) { gen_bg_css = 'background-image: ' + bg_color + ';'; } } } if ( '' !== bg_img ) { gen_bg_css += 'background-repeat: ' + bg_obj['background-repeat'] + ';'; gen_bg_css += 'background-position: ' + bg_obj['background-position'] + ';'; gen_bg_css += 'background-size: ' + bg_obj['background-size'] + ';'; gen_bg_css += 'background-attachment: ' + bg_obj['background-attachment'] + ';'; } var dynamicStyle = style.replace( "{{css}}", gen_bg_css ); astra_add_dynamic_css( ctrl_name, dynamicStyle ); } } /* * Generate Font Family CSS */ function astra_generate_outside_font_family_css( control, selector ) { wp.customize( control, function (value) { value.bind( function ( value, oldValue ) { var cssProperty = 'font-family'; var link = ''; var fontName = value.split(",")[0]; // Replace ' character with space, necessary to separate out font prop value. fontName = fontName.replace(/'/g, ''); // Remove ' + link ); }); }); } /* * Generate Font Weight CSS */ function astra_generate_font_weight_css( font_control, control, css_property, selector ) { wp.customize( control, function( value ) { value.bind( function( new_value ) { control = control.replace( '[', '-' ); control = control.replace( ']', '' ); var link = ''; if ( new_value ) { /** * If ( unit == 'url' ) then = url('{VALUE}') * If ( unit == 'px' ) then = {VALUE}px * If ( unit == 'em' ) then = {VALUE}em * If ( unit == 'rem' ) then = {VALUE}rem. */ if ( 'undefined' != typeof unit) { if ( 'url' === unit ) { new_value = 'url(' + new_value + ')'; } else { new_value = new_value + unit; } } var fontName = wp.customize._value[font_control]._value; fontName = fontName.split(','); fontName = fontName[0].replace( /'/g, '' ); // Remove old. jQuery( 'style#' + control + '-' + css_property ).remove(); if ( fontName in astraCustomizer.googleFonts ) { // Remove old. jQuery('#' + font_control).remove(); if( new_value === "inherit" ) { link = ''; } else { link = ''; } } // Concat and append new ' + link ); } else { // Remove old. jQuery( 'style#' + control ).remove(); } } ); }); } /** * Apply CSS for the element */ function astra_apply_responsive_background_css( control, selector, device, singleColorSelector, addon ) { wp.customize( control, function( value ) { value.bind( function( bg_obj ) { addon = addon || ''; singleColorSelector = singleColorSelector || ''; addon = ( addon ) ? addon : 'header'; control = control.replace( '[', '-' ); control = control.replace( ']', '' ); if( '' === bg_obj[device] || undefined === bg_obj[device] ){ return; } var gen_bg_css = ''; var bg_img = bg_obj[device]['background-image']; var bg_tab_img = bg_obj['tablet']['background-image']; var bg_desk_img = bg_obj['desktop']['background-image']; var bg_color = bg_obj[device]['background-color']; var tablet_css = ( bg_obj['tablet']['background-image'] ) ? true : false; var desktop_css = ( bg_obj['desktop']['background-image'] ) ? true : false; if( undefined !== bg_obj[device]['background-type'] && '' !== bg_obj[device]['background-type'] ) { if ( ( 'color' === bg_obj[device]['background-type'] ) ) { if ( '' !== bg_img && '' !== bg_color && undefined !== bg_color && 'unset' !== bg_color ) { gen_bg_css = 'background-image: linear-gradient(to right, ' + bg_color + ', ' + bg_color + '), url(' + bg_img + ');'; } else if ( 'mobile' === device ) { if ( desktop_css ) { gen_bg_css = 'background-image: linear-gradient(to right, ' + bg_color + ', ' + bg_color + '), url(' + bg_desk_img + ');'; } else if ( tablet_css ) { gen_bg_css = 'background-image: linear-gradient(to right, ' + bg_color + ', ' + bg_color + '), url(' + bg_tab_img + ');'; } else { gen_bg_css = 'background-color: ' + bg_color + ';'; gen_bg_css += 'background-image: none;'; } } else if ( 'tablet' === device ) { if ( desktop_css ) { gen_bg_css = 'background-image: linear-gradient(to right, ' + bg_color + ', ' + bg_color + '), url(' + bg_desk_img + ');'; } else { gen_bg_css = 'background-color: ' + bg_color + ';'; gen_bg_css += 'background-image: none;'; } } else if ( undefined === bg_img || '' === bg_img ) { gen_bg_css = 'background-color: ' + bg_color + ';'; gen_bg_css += 'background-image: none;'; } } else if ( 'image' === bg_obj[device]['background-type'] ) { if ( '' !== bg_img && '' !== bg_color && undefined !== bg_color && 'unset' !== bg_color && ! bg_color.includes("linear-gradient") && ! bg_color.includes("radial-gradient") ) { gen_bg_css = 'background-image: linear-gradient(to right, ' + bg_color + ', ' + bg_color + '), url(' + bg_img + ');'; } if ( ( undefined === bg_color || '' === bg_color || 'unset' === bg_color || bg_color.includes("linear-gradient") || bg_color.includes("radial-gradient") ) && '' !== bg_img ) { gen_bg_css = 'background-image: url(' + bg_img + ');'; } } else if ( 'gradient' === bg_obj[device]['background-type'] ) { if ( '' !== bg_color && 'unset' !== bg_color ) { gen_bg_css = 'background-image: ' + bg_color + ';'; } } } if ( '' !== bg_img ) { gen_bg_css += 'background-repeat: ' + bg_obj[device]['background-repeat'] + ';'; gen_bg_css += 'background-position: ' + bg_obj[device]['background-position'] + ';'; gen_bg_css += 'background-size: ' + bg_obj[device]['background-size'] + ';'; gen_bg_css += 'background-attachment: ' + bg_obj[device]['background-attachment'] + ';'; } // Remove old. jQuery( 'style#' + control + '-' + device + '-' + addon ).remove(); if ( 'desktop' == device ) { var dynamicStyle = '' } if ( 'tablet' == device ) { var dynamicStyle = '' } if ( 'mobile' == device ) { var dynamicStyle = '' } // Concat and append new