50 lines
2.8 KiB
JavaScript
50 lines
2.8 KiB
JavaScript
/**
|
|
* 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
|
|
* @since x.x.x
|
|
*/
|
|
( function( $ ) {
|
|
|
|
astra_css(
|
|
'astra-settings[scroll-to-top-icon-size]',
|
|
'font-size',
|
|
'#ast-scroll-top',
|
|
'px'
|
|
);
|
|
astra_css( 'astra-settings[scroll-to-top-icon-color]', 'color', '#ast-scroll-top' );
|
|
astra_css( 'astra-settings[scroll-to-top-icon-bg-color]', 'background-color', '#ast-scroll-top' );
|
|
astra_css( 'astra-settings[scroll-to-top-icon-h-color]', 'color', '#ast-scroll-top:hover' );
|
|
astra_css( 'astra-settings[scroll-to-top-icon-h-bg-color]', 'background-color', '#ast-scroll-top:hover' );
|
|
|
|
// Border Radius Fields for Button.
|
|
wp.customize( 'astra-settings[scroll-to-top-icon-radius-fields]', function( value ) {
|
|
value.bind( function( border ) {
|
|
let tablet_break_point = astraBuilderPreview.tablet_break_point || 768,
|
|
mobile_break_point = astraBuilderPreview.mobile_break_point || 544;
|
|
let dynamicStyle = '';
|
|
dynamicStyle += ' #ast-scroll-top { border-top-left-radius :' + border['desktop']['top'] + border['desktop-unit']
|
|
+ '; border-bottom-right-radius :' + border['desktop']['bottom'] + border['desktop-unit'] + '; border-bottom-left-radius :'
|
|
+ border['desktop']['left'] + border['desktop-unit'] + '; border-top-right-radius :' + border['desktop']['right'] + border['desktop-unit'] + '; } ';
|
|
dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) { #ast-scroll-top { border-top-left-radius :' + border['tablet']['top'] + border['tablet-unit']
|
|
+ '; border-bottom-right-radius :' + border['tablet']['bottom'] + border['tablet-unit'] + '; border-bottom-left-radius :'
|
|
+ border['tablet']['left'] + border['tablet-unit'] + '; border-top-right-radius :' + border['tablet']['right'] + border['tablet-unit'] + '; } }';
|
|
dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) { #ast-scroll-top { border-top-left-radius :' + border['mobile']['top'] + border['mobile-unit']
|
|
+ '; border-bottom-right-radius :' + border['mobile']['bottom'] + border['mobile-unit'] + '; border-bottom-left-radius :'
|
|
+ border['mobile']['left'] + border['mobile-unit'] + '; border-top-right-radius :' + border['mobile']['right'] + border['mobile-unit'] + '; } }';
|
|
astra_add_dynamic_css( 'scroll-to-top-icon-radius-fields', dynamicStyle );
|
|
} );
|
|
} );
|
|
|
|
// Scroll to top position.
|
|
wp.customize( 'astra-settings[scroll-to-top-icon-position]', function( value ) {
|
|
value.bind( function( position ) {
|
|
jQuery("#ast-scroll-top").removeClass("ast-scroll-to-top-right ast-scroll-to-top-left");
|
|
jQuery("#ast-scroll-top").addClass("ast-scroll-to-top-"+position);
|
|
} );
|
|
} );
|
|
|
|
} )( jQuery );
|