View file File name : customizer-preview.js Content :/** * This file adds some LIVE to the 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 Builder * @since 3.0.0 */ ( function( $ ) { var selector = '.ast-footer-copyright'; var visibility_selector = '.ast-footer-copyright.ast-builder-layout-element'; var tablet_break_point = astraBuilderPreview.tablet_break_point || 768, mobile_break_point = astraBuilderPreview.mobile_break_point || 544; // HTML color. astra_css( 'astra-settings[footer-copyright-color]', 'color', selector ); // Typography CSS Generation. astra_responsive_font_size( 'astra-settings[font-size-section-footer-copyright]', selector ); wp.customize( 'astra-settings[footer-copyright-alignment]', function( value ) { value.bind( function( alignment ) { if( alignment.desktop != '' || alignment.tablet != '' || alignment.mobile != '' ) { var dynamicStyle = ''; dynamicStyle += '.ast-footer-copyright {'; dynamicStyle += 'text-align: ' + alignment['desktop'] + ';'; dynamicStyle += '} '; dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; dynamicStyle += '.ast-footer-copyright {'; dynamicStyle += 'text-align: ' + alignment['tablet'] + ';'; dynamicStyle += '} '; dynamicStyle += '} '; dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; dynamicStyle += '.ast-footer-copyright {'; dynamicStyle += 'text-align: ' + alignment['mobile'] + ';'; dynamicStyle += '} '; dynamicStyle += '} '; astra_add_dynamic_css( 'footer-copyright-alignment', dynamicStyle ); } } ); } ); // Margin. wp.customize( 'astra-settings[section-footer-copyright-margin]', function( value ) { value.bind( function( margin ) { if( margin.desktop.bottom != '' || margin.desktop.top != '' || margin.desktop.left != '' || margin.desktop.right != '' || margin.tablet.bottom != '' || margin.tablet.top != '' || margin.tablet.left != '' || margin.tablet.right != '' || margin.mobile.bottom != '' || margin.mobile.top != '' || margin.mobile.left != '' || margin.mobile.right != '' ) { var dynamicStyle = ''; dynamicStyle += selector + ' {'; dynamicStyle += 'margin-left: ' + margin['desktop']['left'] + margin['desktop-unit'] + ';'; dynamicStyle += 'margin-right: ' + margin['desktop']['right'] + margin['desktop-unit'] + ';'; dynamicStyle += 'margin-top: ' + margin['desktop']['top'] + margin['desktop-unit'] + ';'; dynamicStyle += 'margin-bottom: ' + margin['desktop']['bottom'] + margin['desktop-unit'] + ';'; dynamicStyle += '} '; dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; dynamicStyle += selector + ' {'; dynamicStyle += 'margin-left: ' + margin['tablet']['left'] + margin['tablet-unit'] + ';'; dynamicStyle += 'margin-right: ' + margin['tablet']['right'] + margin['tablet-unit'] + ';'; dynamicStyle += 'margin-top: ' + margin['tablet']['top'] + margin['desktop-unit'] + ';'; dynamicStyle += 'margin-bottom: ' + margin['tablet']['bottom'] + margin['desktop-unit'] + ';'; dynamicStyle += '} '; dynamicStyle += '} '; dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; dynamicStyle += selector + ' {'; dynamicStyle += 'margin-left: ' + margin['mobile']['left'] + margin['mobile-unit'] + ';'; dynamicStyle += 'margin-right: ' + margin['mobile']['right'] + margin['mobile-unit'] + ';'; dynamicStyle += 'margin-top: ' + margin['mobile']['top'] + margin['desktop-unit'] + ';'; dynamicStyle += 'margin-bottom: ' + margin['mobile']['bottom'] + margin['desktop-unit'] + ';'; dynamicStyle += '} '; dynamicStyle += '} '; astra_add_dynamic_css( 'footer-copyright-margin', dynamicStyle ); } } ); } ); // Advanced Visibility CSS Generation. astra_builder_visibility_css( 'section-footer-copyright', visibility_selector ); } )( jQuery );