From 9d4123cee1867ee7199b06bdc92d40611f547ecc Mon Sep 17 00:00:00 2001 From: Zach van Rijn Date: Wed, 21 Jul 2021 14:54:07 -0500 Subject: Initial unmodified import from Astra (Version: 3.6.5) @ /wp-content/themes/astra/. --- .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 81 +++ .../class-astra-above-header-loader.php | 53 ++ .../above-header/class-astra-above-header.php | 44 ++ .../above-header/dynamic-css/dynamic.css.php | 153 ++++++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 140 +++++ ...class-astra-header-account-component-loader.php | 53 ++ .../class-astra-header-account-component.php | 151 ++++++ .../header/account/dynamic-css/dynamic.css.php | 149 ++++++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 81 +++ .../class-astra-below-header-loader.php | 53 ++ .../below-header/class-astra-below-header.php | 45 ++ .../below-header/dynamic-css/dynamic.css.php | 144 +++++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 15 + .../class-astra-header-button-component-loader.php | 60 +++ .../button/class-astra-header-button-component.php | 47 ++ .../type/header/button/dynamic-css/dynamic.css.php | 32 ++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 161 ++++++ .../class-astra-header-edd-cart-component.php | 49 ++ .../class-astra-header-edd-cart-loader.php | 53 ++ .../header/edd-cart/dynamic-css/dynamic.css.php | 370 +++++++++++++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 15 + .../class-astra-header-html-component-loader.php | 60 +++ .../html/class-astra-header-html-component.php | 45 ++ .../type/header/html/dynamic-css/dynamic.css.php | 32 ++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 407 ++++++++++++++ .../class-astra-header-menu-component-loader.php | 89 ++++ .../menu/class-astra-header-menu-component.php | 153 ++++++ .../type/header/menu/dynamic-css/dynamic.css.php | 370 +++++++++++++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 324 +++++++++++ .../class-astra-mobile-menu-component-loader.php | 52 ++ .../class-astra-mobile-menu-component.php | 131 +++++ .../header/mobile-menu/dynamic-css/dynamic.css.php | 293 ++++++++++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 128 +++++ .../class-astra-mobile-trigger-loader.php | 54 ++ .../mobile-trigger/class-astra-mobile-trigger.php | 44 ++ .../mobile-trigger/dynamic-css/dynamic.css.php | 184 +++++++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 205 +++++++ .../off-canvas/class-astra-off-canvas-loader.php | 53 ++ .../header/off-canvas/class-astra-off-canvas.php | 45 ++ .../header/off-canvas/dynamic-css/dynamic.css.php | 592 +++++++++++++++++++++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 152 ++++++ .../class-astra-primary-header-loader.php | 115 ++++ .../primary-header/class-astra-primary-header.php | 45 ++ .../primary-header/dynamic-css/dynamic.css.php | 238 +++++++++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 102 ++++ .../class-astra-header-search-component-loader.php | 73 +++ .../search/class-astra-header-search-component.php | 45 ++ .../type/header/search/dynamic-css/dynamic.css.php | 281 ++++++++++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 71 +++ ...astra-header-site-identity-component-loader.php | 51 ++ .../class-astra-header-site-identity-component.php | 44 ++ .../site-identity/dynamic-css/dynamic.css.php | 85 +++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 15 + ...s-astra-header-social-icon-component-loader.php | 62 +++ .../class-astra-header-social-icon-component.php | 45 ++ .../header/social-icon/dynamic-css/dynamic.css.php | 32 ++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 15 + .../class-astra-header-widget-component-loader.php | 64 +++ .../widget/class-astra-header-widget-component.php | 45 ++ .../type/header/widget/dynamic-css/dynamic.css.php | 32 ++ .../assets/js/minified/customizer-preview.min.js | 1 + .../assets/js/unminified/customizer-preview.js | 220 ++++++++ .../class-astra-header-woo-cart-component.php | 49 ++ .../class-astra-header-woo-cart-loader.php | 53 ++ .../header/woo-cart/dynamic-css/dynamic.css.php | 432 +++++++++++++++ 80 files changed, 7592 insertions(+) create mode 100644 inc/builder/type/header/above-header/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/above-header/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/above-header/class-astra-above-header-loader.php create mode 100644 inc/builder/type/header/above-header/class-astra-above-header.php create mode 100644 inc/builder/type/header/above-header/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/account/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/account/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/account/class-astra-header-account-component-loader.php create mode 100644 inc/builder/type/header/account/class-astra-header-account-component.php create mode 100644 inc/builder/type/header/account/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/below-header/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/below-header/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/below-header/class-astra-below-header-loader.php create mode 100644 inc/builder/type/header/below-header/class-astra-below-header.php create mode 100644 inc/builder/type/header/below-header/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/button/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/button/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/button/class-astra-header-button-component-loader.php create mode 100644 inc/builder/type/header/button/class-astra-header-button-component.php create mode 100644 inc/builder/type/header/button/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/edd-cart/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/edd-cart/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/edd-cart/class-astra-header-edd-cart-component.php create mode 100644 inc/builder/type/header/edd-cart/class-astra-header-edd-cart-loader.php create mode 100644 inc/builder/type/header/edd-cart/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/html/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/html/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/html/class-astra-header-html-component-loader.php create mode 100644 inc/builder/type/header/html/class-astra-header-html-component.php create mode 100644 inc/builder/type/header/html/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/menu/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/menu/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/menu/class-astra-header-menu-component-loader.php create mode 100644 inc/builder/type/header/menu/class-astra-header-menu-component.php create mode 100644 inc/builder/type/header/menu/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/mobile-menu/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/mobile-menu/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/mobile-menu/class-astra-mobile-menu-component-loader.php create mode 100644 inc/builder/type/header/mobile-menu/class-astra-mobile-menu-component.php create mode 100644 inc/builder/type/header/mobile-menu/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/mobile-trigger/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/mobile-trigger/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/mobile-trigger/class-astra-mobile-trigger-loader.php create mode 100644 inc/builder/type/header/mobile-trigger/class-astra-mobile-trigger.php create mode 100644 inc/builder/type/header/mobile-trigger/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/off-canvas/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/off-canvas/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/off-canvas/class-astra-off-canvas-loader.php create mode 100644 inc/builder/type/header/off-canvas/class-astra-off-canvas.php create mode 100644 inc/builder/type/header/off-canvas/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/primary-header/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/primary-header/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/primary-header/class-astra-primary-header-loader.php create mode 100644 inc/builder/type/header/primary-header/class-astra-primary-header.php create mode 100644 inc/builder/type/header/primary-header/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/search/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/search/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/search/class-astra-header-search-component-loader.php create mode 100644 inc/builder/type/header/search/class-astra-header-search-component.php create mode 100644 inc/builder/type/header/search/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/site-identity/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/site-identity/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/site-identity/class-astra-header-site-identity-component-loader.php create mode 100644 inc/builder/type/header/site-identity/class-astra-header-site-identity-component.php create mode 100644 inc/builder/type/header/site-identity/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/social-icon/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/social-icon/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/social-icon/class-astra-header-social-icon-component-loader.php create mode 100644 inc/builder/type/header/social-icon/class-astra-header-social-icon-component.php create mode 100644 inc/builder/type/header/social-icon/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/widget/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/widget/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/widget/class-astra-header-widget-component-loader.php create mode 100644 inc/builder/type/header/widget/class-astra-header-widget-component.php create mode 100644 inc/builder/type/header/widget/dynamic-css/dynamic.css.php create mode 100644 inc/builder/type/header/woo-cart/assets/js/minified/customizer-preview.min.js create mode 100644 inc/builder/type/header/woo-cart/assets/js/unminified/customizer-preview.js create mode 100644 inc/builder/type/header/woo-cart/class-astra-header-woo-cart-component.php create mode 100644 inc/builder/type/header/woo-cart/class-astra-header-woo-cart-loader.php create mode 100644 inc/builder/type/header/woo-cart/dynamic-css/dynamic.css.php (limited to 'inc/builder/type/header') diff --git a/inc/builder/type/header/above-header/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/above-header/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..0a24c24 --- /dev/null +++ b/inc/builder/type/header/above-header/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +!function(){var r=astraBuilderPreview.tablet_break_point||768,t=astraBuilderPreview.mobile_break_point||544;wp.customize("astra-settings[hba-header-height]",function(a){a.bind(function(a){var e;""==a.desktop&&""==a.tablet&&""==a.mobile||(e="",e+=".ast-above-header-bar .site-above-header-wrap, .ast-mobile-header-wrap .ast-above-header-bar{",e+="min-height: "+a.desktop+"px;",e+="} ",e+=".ast-desktop .ast-above-header-bar .main-header-menu > .menu-item {",e+="line-height: "+a.desktop+"px;",e+="} ",e+="@media (max-width: "+r+"px) {",e+=".ast-above-header-bar .site-above-header-wrap, .ast-mobile-header-wrap .ast-above-header-bar{",e+="min-height: "+a.tablet+"px;",e+="} ",e+="} ",e+="@media (max-width: "+t+"px) {",e+=".ast-above-header-bar .site-above-header-wrap, .ast-mobile-header-wrap .ast-above-header-bar{",e+="min-height: "+a.mobile+"px;",e+="} ",e+="} ",astra_add_dynamic_css("hba-header-height",e))})}),wp.customize("astra-settings[hba-header-separator]",function(a){a.bind(function(a){var e="";e+=".ast-above-header.ast-above-header-bar, .ast-above-header-bar {",e+="border-bottom-width: "+a+"px;",e+="border-bottom-style: solid;",e+="border-color:"+wp.customize("astra-settings[hba-header-bottom-border-color]").get()+";",e+="}",astra_add_dynamic_css("hba-header-separator",e)})}),astra_css("astra-settings[hba-header-bottom-border-color]","border-color",".ast-above-header.ast-above-header-bar, .ast-above-header-bar"),astra_apply_responsive_background_css("astra-settings[hba-header-bg-obj-responsive]",".ast-above-header.ast-above-header-bar","desktop"),astra_apply_responsive_background_css("astra-settings[hba-header-bg-obj-responsive]",".ast-above-header.ast-above-header-bar","tablet"),astra_apply_responsive_background_css("astra-settings[hba-header-bg-obj-responsive]",".ast-above-header.ast-above-header-bar","mobile"),astra_builder_advanced_css("section-above-header-builder",".ast-above-header.ast-above-header-bar"),astra_builder_visibility_css("section-above-header-builder",".ast-above-header-bar","grid")}(jQuery); \ No newline at end of file diff --git a/inc/builder/type/header/above-header/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/above-header/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..1f7d82d --- /dev/null +++ b/inc/builder/type/header/above-header/assets/js/unminified/customizer-preview.js @@ -0,0 +1,81 @@ +/** + * 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 3.0.0 + */ + +( function( $ ) { + + var tablet_break_point = astraBuilderPreview.tablet_break_point || 768, + mobile_break_point = astraBuilderPreview.mobile_break_point || 544; + + wp.customize( 'astra-settings[hba-header-height]', function( value ) { + value.bind( function( size ) { + + if( size.desktop != '' || size.tablet != '' || size.mobile != '' ) { + var dynamicStyle = ''; + dynamicStyle += '.ast-above-header-bar .site-above-header-wrap, .ast-mobile-header-wrap .ast-above-header-bar{'; + dynamicStyle += 'min-height: ' + size.desktop + 'px;'; + dynamicStyle += '} '; + dynamicStyle += '.ast-desktop .ast-above-header-bar .main-header-menu > .menu-item {'; + dynamicStyle += 'line-height: ' + size.desktop + 'px;'; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += '.ast-above-header-bar .site-above-header-wrap, .ast-mobile-header-wrap .ast-above-header-bar{'; + dynamicStyle += 'min-height: ' + size.tablet + 'px;'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += '.ast-above-header-bar .site-above-header-wrap, .ast-mobile-header-wrap .ast-above-header-bar{'; + dynamicStyle += 'min-height: ' + size.mobile + 'px;'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + astra_add_dynamic_css( 'hba-header-height', dynamicStyle ); + } + } ); + } ); + + // Border Bottom width. + wp.customize( 'astra-settings[hba-header-separator]', function( value ) { + value.bind( function( border ) { + + var color = wp.customize( 'astra-settings[hba-header-bottom-border-color]' ).get(), + dynamicStyle = ''; + + dynamicStyle += '.ast-above-header.ast-above-header-bar, .ast-above-header-bar {'; + dynamicStyle += 'border-bottom-width: ' + border + 'px;'; + dynamicStyle += 'border-bottom-style: solid;'; + dynamicStyle += 'border-color:' + color + ';'; + dynamicStyle += '}'; + + astra_add_dynamic_css( 'hba-header-separator', dynamicStyle ); + + } ); + } ); + + // Border Color. + astra_css( + 'astra-settings[hba-header-bottom-border-color]', + 'border-color', + '.ast-above-header.ast-above-header-bar, .ast-above-header-bar' + ); + + // Responsive BG styles > Below Header Row. + astra_apply_responsive_background_css( 'astra-settings[hba-header-bg-obj-responsive]', '.ast-above-header.ast-above-header-bar', 'desktop' ); + astra_apply_responsive_background_css( 'astra-settings[hba-header-bg-obj-responsive]', '.ast-above-header.ast-above-header-bar', 'tablet' ); + astra_apply_responsive_background_css( 'astra-settings[hba-header-bg-obj-responsive]', '.ast-above-header.ast-above-header-bar', 'mobile' ); + + // Advanced CSS Generation. + astra_builder_advanced_css( 'section-above-header-builder', '.ast-above-header.ast-above-header-bar' ); + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( 'section-above-header-builder', '.ast-above-header-bar', 'grid' ); + +} )( jQuery ); diff --git a/inc/builder/type/header/above-header/class-astra-above-header-loader.php b/inc/builder/type/header/above-header/class-astra-above-header-loader.php new file mode 100644 index 0000000..41dd14a --- /dev/null +++ b/inc/builder/type/header/above-header/class-astra-above-header-loader.php @@ -0,0 +1,53 @@ + array( + 'height' => '100%', + ), + '.ast-header-break-point .ast-mobile-header-wrap .ast-above-header-wrap .main-header-bar-navigation .inline-on-mobile .menu-item .menu-link' => array( + 'border' => 'none', + ), + '.ast-header-break-point .ast-mobile-header-wrap .ast-above-header-wrap .main-header-bar-navigation .inline-on-mobile .menu-item-has-children > .ast-menu-toggle::before' => array( + 'font-size' => '.6rem', + ), + '.ast-header-break-point .ast-mobile-header-wrap .ast-above-header-wrap .main-header-bar-navigation .ast-submenu-expanded > .ast-menu-toggle::before' => array( + 'transform' => 'rotateX(180deg)', + ), + '.ast-mobile-header-wrap .ast-above-header-bar , .ast-above-header-bar .site-above-header-wrap' => array( + 'min-height' => astra_get_css_value( $hba_header_height_desktop, 'px' ), + ), + '.ast-desktop .ast-above-header-bar .main-header-menu > .menu-item' => array( + 'line-height' => astra_get_css_value( $hba_header_height_desktop, 'px' ), + ), + '.ast-desktop .ast-above-header-bar .ast-header-woo-cart, .ast-desktop .ast-above-header-bar .ast-header-edd-cart' => array( + 'line-height' => astra_get_css_value( $hba_header_height_desktop, 'px' ), + ), + ); + + // Apply border only when it has positive value. + if ( $hba_header_divider ) { + $common_css_output['.ast-above-header-bar'] = array( + 'border-bottom-width' => astra_get_css_value( $hba_header_divider, 'px' ), + 'border-bottom-color' => esc_attr( $hba_border_color ), + 'border-bottom-style' => 'solid', + ); + } else { + $common_css_output['.ast-above-header-bar'] = array( + 'border-bottom-style' => 'none', + ); + } + + if ( is_astra_addon_3_5_0_version() ) { + $common_css_output['.ast-above-header-bar.ast-header-sticked'] = array( + 'z-index' => 9, + ); + } + + $parse_css .= astra_parse_css( $common_css_output ); + + // Above Header Background Responsive - Desktop. + $desktop_bg = array( + '.ast-above-header.ast-above-header-bar' => astra_get_responsive_background_obj( $hba_header_bg_obj, 'desktop' ), + '.ast-header-break-point .ast-above-header-bar' => array( + 'background-color' => esc_attr( $desktop_background ), + ), + ); + $parse_css .= astra_parse_css( $desktop_bg ); + + // Above Header Background Responsive - Tablet. + $tablet_bg = array( + '.ast-above-header.ast-above-header-bar' => astra_get_responsive_background_obj( $hba_header_bg_obj, 'tablet' ), + '.ast-header-break-point .ast-above-header-bar' => array( + 'background-color' => esc_attr( $tablet_background ), + ), + '.ast-mobile-header-wrap .ast-above-header-bar , .ast-above-header-bar .site-above-header-wrap' => array( + 'min-height' => astra_get_css_value( $hba_header_height_tablet, 'px' ), + ), + '#masthead .ast-mobile-header-wrap .ast-above-header-bar' => array( + 'padding-left' => '20px', + 'padding-right' => '20px', + ), + ); + $parse_css .= astra_parse_css( $tablet_bg, '', astra_get_tablet_breakpoint() ); + + // Above Header Background Responsive - Mobile. + $mobile_bg = array( + '.ast-above-header.ast-above-header-bar' => astra_get_responsive_background_obj( $hba_header_bg_obj, 'mobile' ), + '.ast-header-break-point .ast-above-header-bar' => array( + 'background-color' => esc_attr( $mobile_background ), + ), + '.ast-mobile-header-wrap .ast-above-header-bar , .ast-above-header-bar .site-above-header-wrap' => array( + 'min-height' => astra_get_css_value( $hba_header_height_mobile, 'px' ), + ), + ); + $parse_css .= astra_parse_css( $mobile_bg, '', astra_get_mobile_breakpoint() ); + + // Trim white space for faster page loading. + $dynamic_css .= Astra_Enqueue_Scripts::trim_css( $parse_css ); + + $_section = 'section-above-header-builder'; + + $selector = '.site-above-header-wrap[data-section="ast_header_above"]'; + + $parent_selector = '.ast-above-header.ast-above-header-bar'; + + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_advanced_margin_padding_css( $_section, $parent_selector ); + + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, '.ast-above-header-bar', 'block', $mobile_tablet_default_display = 'grid' ); + + return $dynamic_css; +} diff --git a/inc/builder/type/header/account/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/account/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..2088bcb --- /dev/null +++ b/inc/builder/type/header/account/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +!function(){var o=astraBuilderPreview.tablet_break_point||768,i=astraBuilderPreview.mobile_break_point||544,e=".ast-header-account-wrap";wp.customize("astra-settings[header-account-icon-color]",function(t){t.bind(function(t){var a=e+" .ast-header-account-type-icon .ahfb-svg-iconset svg path:not( .ast-hf-account-unfill ), "+e+" .ast-header-account-type-icon .ahfb-svg-iconset svg circle, .ast-mobile-popup-content"+e+" .ast-header-account-type-icon .ahfb-svg-iconset svg path:not( .ast-hf-account-unfill ), .ast-mobile-popup-content "+e+" .ast-header-account-type-icon .ahfb-svg-iconset svg circle {";a+="fill: "+(t=t||"inherit")+";",a+="} ",astra_add_dynamic_css("header-account-icon-color",a)})}),astra_responsive_font_size("astra-settings[font-size-section-header-account]",e+" .ast-header-account-text"),astra_css("astra-settings[header-account-type-text-color]","color",e+" .ast-header-account-text, .ast-mobile-popup-content "+e+" .ast-header-account-text"),wp.customize("astra-settings[header-account-icon-size]",function(t){t.bind(function(t){var a;""==t.desktop&&""==t.tablet&&""==t.mobile||(a="",a+=e+" .ast-header-account-type-icon .ahfb-svg-iconset svg {",a+="height: "+t.desktop+"px;",a+="width: "+t.desktop+"px;",a+="} ",a+="@media (max-width: "+o+"px) {",a+=e+" .ast-header-account-type-icon .ahfb-svg-iconset svg {",a+="height: "+t.tablet+"px;",a+="width: "+t.tablet+"px;",a+="} ",a+="} ",a+="@media (max-width: "+i+"px) {",a+=e+" .ast-header-account-type-icon .ahfb-svg-iconset svg {",a+="height: "+t.mobile+"px;",a+="width: "+t.mobile+"px;",a+="} ",a+="} ",astra_add_dynamic_css("header-account-icon-size",a))})}),wp.customize("astra-settings[header-account-image-width]",function(t){t.bind(function(t){var a;""==t.desktop&&""==t.tablet&&""==t.mobile||(a="",a+=e+" .ast-header-account-type-avatar .avatar {",a+="width: "+t.desktop+"px;",a+="} ",a+="@media (max-width: "+o+"px) {",a+=e+" .ast-header-account-type-avatar .avatar {",a+="width: "+t.tablet+"px;",a+="} ",a+="} ",a+="@media (max-width: "+i+"px) {",a+=e+" .ast-header-account-type-avatar .avatar {",a+="width: "+t.mobile+"px;",a+="} ",a+="} ",astra_add_dynamic_css("header-account-image-width",a))})}),wp.customize("astra-settings[header-account-margin]",function(t){t.bind(function(t){var a,e;""==t.desktop.bottom&&""==t.desktop.top&&""==t.desktop.left&&""==t.desktop.right&&""==t.tablet.bottom&&""==t.tablet.top&&""==t.tablet.left&&""==t.tablet.right&&""==t.mobile.bottom&&""==t.mobile.top&&""==t.mobile.left&&""==t.mobile.right||(e="",e+=(a=".ast-header-account-wrap")+" {",e+="margin-left: "+t.desktop.left+t["desktop-unit"]+";",e+="margin-right: "+t.desktop.right+t["desktop-unit"]+";",e+="margin-top: "+t.desktop.top+t["desktop-unit"]+";",e+="margin-bottom: "+t.desktop.bottom+t["desktop-unit"]+";",e+="} ",e+="@media (max-width: "+o+"px) {",e+=a+" {",e+="margin-left: "+t.tablet.left+t["tablet-unit"]+";",e+="margin-right: "+t.tablet.right+t["tablet-unit"]+";",e+="margin-top: "+t.tablet.top+t["desktop-unit"]+";",e+="margin-bottom: "+t.tablet.bottom+t["desktop-unit"]+";",e+="} ",e+="} ",e+="@media (max-width: "+i+"px) {",e+=a+" {",e+="margin-left: "+t.mobile.left+t["mobile-unit"]+";",e+="margin-right: "+t.mobile.right+t["mobile-unit"]+";",e+="margin-top: "+t.mobile.top+t["desktop-unit"]+";",e+="margin-bottom: "+t.mobile.bottom+t["desktop-unit"]+";",e+="} ",e+="} ",astra_add_dynamic_css("header-account-margin",e))})}),astra_builder_visibility_css("section-header-account",'.ast-header-account[data-section="section-header-account"]')}(jQuery); \ No newline at end of file diff --git a/inc/builder/type/header/account/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/account/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..8bafe1f --- /dev/null +++ b/inc/builder/type/header/account/assets/js/unminified/customizer-preview.js @@ -0,0 +1,140 @@ +/** + * 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( $ ) { + + var tablet_break_point = astraBuilderPreview.tablet_break_point || 768, + mobile_break_point = astraBuilderPreview.mobile_break_point || 544; + + var selector = '.ast-header-account-wrap'; + var section = 'section-header-account'; + var visibility_selector = '.ast-header-account[data-section="section-header-account"]'; + + wp.customize( 'astra-settings[header-account-icon-color]', function( value ) { + value.bind( function( color ) { + if( ! color ) { + color = 'inherit'; + } + var dynamicStyle = selector + ' .ast-header-account-type-icon .ahfb-svg-iconset svg path:not( .ast-hf-account-unfill ), ' + selector + ' .ast-header-account-type-icon .ahfb-svg-iconset svg circle, .ast-mobile-popup-content' + selector + ' .ast-header-account-type-icon .ahfb-svg-iconset svg path:not( .ast-hf-account-unfill ), .ast-mobile-popup-content ' + selector + ' .ast-header-account-type-icon .ahfb-svg-iconset svg circle {'; + dynamicStyle += 'fill: ' + color + ';'; + dynamicStyle += '} '; + astra_add_dynamic_css( 'header-account-icon-color', dynamicStyle ); + } ); + } ); + + // Typography CSS Generation. + astra_responsive_font_size( + 'astra-settings[font-size-section-header-account]', + selector + ' .ast-header-account-text' + ); + + // Text size. + astra_css( + 'astra-settings[header-account-type-text-color]', + 'color', + selector + ' .ast-header-account-text, .ast-mobile-popup-content ' + selector + ' .ast-header-account-text' + ); + + // Icon Size. + wp.customize( 'astra-settings[header-account-icon-size]', function( value ) { + value.bind( function( size ) { + if( size.desktop != '' || size.tablet != '' || size.mobile != '' ) { + var dynamicStyle = ''; + dynamicStyle += selector + ' .ast-header-account-type-icon .ahfb-svg-iconset svg {'; + dynamicStyle += 'height: ' + size.desktop + 'px' + ';'; + dynamicStyle += 'width: ' + size.desktop + 'px' + ';'; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += selector + ' .ast-header-account-type-icon .ahfb-svg-iconset svg {'; + dynamicStyle += 'height: ' + size.tablet + 'px' + ';'; + dynamicStyle += 'width: ' + size.tablet + 'px' + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += selector + ' .ast-header-account-type-icon .ahfb-svg-iconset svg {'; + dynamicStyle += 'height: ' + size.mobile + 'px' + ';'; + dynamicStyle += 'width: ' + size.mobile + 'px' + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + astra_add_dynamic_css( 'header-account-icon-size', dynamicStyle ); + } + } ); + } ); + + // Image Width. + wp.customize( 'astra-settings[header-account-image-width]', function( value ) { + value.bind( function( size ) { + if( size.desktop != '' || size.tablet != '' || size.mobile != '' ) { + var dynamicStyle = ''; + dynamicStyle += selector + ' .ast-header-account-type-avatar .avatar {'; + dynamicStyle += 'width: ' + size.desktop + 'px' + ';'; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += selector + ' .ast-header-account-type-avatar .avatar {'; + dynamicStyle += 'width: ' + size.tablet + 'px' + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += selector + ' .ast-header-account-type-avatar .avatar {'; + dynamicStyle += 'width: ' + size.mobile + 'px' + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + astra_add_dynamic_css( 'header-account-image-width', dynamicStyle ); + } + } ); + } ); + + // Margin. + wp.customize( 'astra-settings[header-account-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 selector = '.ast-header-account-wrap'; + 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( 'header-account-margin', dynamicStyle ); + } + } ); + } ); + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( section, visibility_selector ); + +} )( jQuery ); diff --git a/inc/builder/type/header/account/class-astra-header-account-component-loader.php b/inc/builder/type/header/account/class-astra-header-account-component-loader.php new file mode 100644 index 0000000..edbbbd5 --- /dev/null +++ b/inc/builder/type/header/account/class-astra-header-account-component-loader.php @@ -0,0 +1,53 @@ +). + * + * @since 3.0.0 + * @var Array + */ + $menu_classes = apply_filters( 'astra_menu_classes', array( 'main-header-menu', 'ast-nav-menu', 'ast-account-nav-menu' ) ); + + $items_wrap = ''; + + // Fallback Menu if primary menu not set. + $fallback_menu_args = array( + 'theme_location' => $theme_location, + 'menu_id' => 'ast-hf-account-menu', + 'menu_class' => 'account-main-navigation', + 'container' => 'div', + 'before' => '', + 'walker' => new Astra_Walker_Page(), + ); + + // To add default alignment for navigation which can be added through any third party plugin. + // Do not add any CSS from theme except header alignment. + echo '
'; + + if ( has_nav_menu( $theme_location ) && ! $enable_woo_menu ) { + wp_nav_menu( + array( + 'menu_id' => 'ast-hf-account-menu', + 'menu_class' => esc_attr( implode( ' ', $menu_classes ) ), + 'container' => 'div', + 'container_class' => 'account-main-header-bar-navigation', + 'items_wrap' => $items_wrap, + 'theme_location' => $theme_location, + ) + ); + } elseif ( $enable_woo_menu ) { + echo ''; + } else { + echo ''; + } + echo '
'; + } + } + + /** + * Kicking this off by creating an object. + */ + new Astra_Header_Account_Component(); + +} diff --git a/inc/builder/type/header/account/dynamic-css/dynamic.css.php b/inc/builder/type/header/account/dynamic-css/dynamic.css.php new file mode 100644 index 0000000..9e9458e --- /dev/null +++ b/inc/builder/type/header/account/dynamic-css/dynamic.css.php @@ -0,0 +1,149 @@ + array( + '-js-display' => 'inline-flex', + 'display' => 'inline-flex', + 'align-self' => 'center', + 'vertical-align' => 'middle', + ), + '.ast-header-account-type-avatar .avatar' => array( + 'display' => 'inline', + 'border-radius' => '100%', + 'max-width' => '100%', + ), + '.as.site-header-focus-item.ast-header-account:hover > .customize-partial-edit-shortcut' => array( + 'opacity' => '0', + ), + '.site-header-focus-item.ast-header-account:hover > * > .customize-partial-edit-shortcut' => array( + 'opacity' => '1', + ), + $selector . ' .ast-header-account-type-icon .ahfb-svg-iconset svg path:not( .ast-hf-account-unfill ), ' . $selector . ' .ast-header-account-type-icon .ahfb-svg-iconset svg circle' => array( + 'fill' => esc_attr( astra_get_option( 'header-account-icon-color' ) ), + ), + '.ast-mobile-popup-content ' . $selector . ' .ast-header-account-type-icon .ahfb-svg-iconset svg path:not( .ast-hf-account-unfill ), .ast-mobile-popup-content ' . $selector . ' .ast-header-account-type-icon .ahfb-svg-iconset svg circle' => array( + 'fill' => esc_attr( astra_get_option( 'header-account-icon-color' ) ), + ), + $selector . ' .ast-header-account-type-icon .ahfb-svg-iconset svg' => array( + 'height' => astra_get_css_value( $icon_size_desktop, 'px' ), + 'width' => astra_get_css_value( $icon_size_desktop, 'px' ), + ), + $selector . ' .ast-header-account-type-avatar .avatar' => array( + 'width' => astra_get_css_value( $image_width_desktop, 'px' ), + ), + $selector . ' .ast-header-account-text' => array( + 'color' => esc_attr( astra_get_option( 'header-account-type-text-color' ) ), + ), + $margin_selector => array( + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'desktop' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'desktop' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'desktop' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'desktop' ), + ), + ); + + $css_output_tablet = array( + + $selector . ' .ast-header-account-type-icon .ahfb-svg-iconset svg' => array( + 'height' => astra_get_css_value( $icon_size_tablet, 'px' ), + 'width' => astra_get_css_value( $icon_size_tablet, 'px' ), + ), + $selector . ' .ast-header-account-type-avatar .avatar' => array( + 'width' => astra_get_css_value( $image_width_tablet, 'px' ), + ), + $margin_selector => array( + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'tablet' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'tablet' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'tablet' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'tablet' ), + ), + ); + + $css_output_mobile = array( + + $selector . ' .ast-header-account-type-icon .ahfb-svg-iconset svg' => array( + 'height' => astra_get_css_value( $icon_size_mobile, 'px' ), + 'width' => astra_get_css_value( $icon_size_mobile, 'px' ), + ), + $selector . ' .ast-header-account-type-avatar .avatar' => array( + 'width' => astra_get_css_value( $image_width_mobile, 'px' ), + ), + $margin_selector => array( + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'mobile' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'mobile' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'mobile' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'mobile' ), + ), + ); + + /* Parse CSS from array() */ + $css_output = astra_parse_css( $css_output_desktop ); + $css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() ); + $css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() ); + + $dynamic_css .= $css_output; + + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_advanced_typography_css( $_section, $selector . ' .ast-header-account-text' ); + + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $selector ); + + return $dynamic_css; +} diff --git a/inc/builder/type/header/below-header/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/below-header/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..769745b --- /dev/null +++ b/inc/builder/type/header/below-header/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +!function(){var r=astraBuilderPreview.tablet_break_point||768,t=astraBuilderPreview.mobile_break_point||544;wp.customize("astra-settings[hbb-header-height]",function(e){e.bind(function(e){var a;""==e.desktop&&""==e.tablet&&""==e.mobile||(a="",a+=".ast-below-header-bar .site-below-header-wrap, .ast-mobile-header-wrap .ast-below-header-bar {",a+="min-height: "+e.desktop+"px;",a+="} ",a+=".ast-desktop .ast-below-header-bar .main-header-menu > .menu-item {",a+="line-height: "+e.desktop+"px;",a+="} ",a+="@media (max-width: "+r+"px) {",a+=".ast-below-header-bar .site-below-header-wrap, .ast-mobile-header-wrap .ast-below-header-bar {",a+="min-height: "+e.tablet+"px;",a+="} ",a+="} ",a+="@media (max-width: "+t+"px) {",a+=".ast-below-header-bar .site-below-header-wrap, .ast-mobile-header-wrap .ast-below-header-bar {",a+="min-height: "+e.mobile+"px;",a+="} ",a+="} ",astra_add_dynamic_css("hbb-header-height",a))})}),wp.customize("astra-settings[hbb-header-separator]",function(e){e.bind(function(e){var a="";a+=".ast-header-break-point .ast-below-header-bar, .ast-below-header-bar {",a+="border-bottom-width: "+e+"px;",a+="border-bottom-style: solid;",a+="border-color:"+wp.customize("astra-settings[hbb-header-bottom-border-color]").get()+";",a+="}",astra_add_dynamic_css("hbb-header-separator",a)})}),astra_css("astra-settings[hbb-header-bottom-border-color]","border-color",".ast-header-break-point .ast-below-header-bar, .ast-below-header-bar"),astra_apply_responsive_background_css("astra-settings[hbb-header-bg-obj-responsive]",".ast-below-header.ast-below-header-bar","desktop"),astra_apply_responsive_background_css("astra-settings[hbb-header-bg-obj-responsive]",".ast-below-header.ast-below-header-bar","tablet"),astra_apply_responsive_background_css("astra-settings[hbb-header-bg-obj-responsive]",".ast-below-header.ast-below-header-bar","mobile"),astra_builder_advanced_css("section-below-header-builder",".ast-below-header.ast-below-header-bar"),astra_builder_visibility_css("section-below-header-builder",".ast-below-header-bar","grid")}(jQuery); \ No newline at end of file diff --git a/inc/builder/type/header/below-header/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/below-header/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..de0e18c --- /dev/null +++ b/inc/builder/type/header/below-header/assets/js/unminified/customizer-preview.js @@ -0,0 +1,81 @@ +/** + * 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 3.0.0 + */ + +( function( $ ) { + + var tablet_break_point = astraBuilderPreview.tablet_break_point || 768, + mobile_break_point = astraBuilderPreview.mobile_break_point || 544; + + wp.customize( 'astra-settings[hbb-header-height]', function( value ) { + value.bind( function( size ) { + + if( size.desktop != '' || size.tablet != '' || size.mobile != '' ) { + var dynamicStyle = ''; + dynamicStyle += '.ast-below-header-bar .site-below-header-wrap, .ast-mobile-header-wrap .ast-below-header-bar {'; + dynamicStyle += 'min-height: ' + size.desktop + 'px;'; + dynamicStyle += '} '; + dynamicStyle += '.ast-desktop .ast-below-header-bar .main-header-menu > .menu-item {'; + dynamicStyle += 'line-height: ' + size.desktop + 'px;'; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += '.ast-below-header-bar .site-below-header-wrap, .ast-mobile-header-wrap .ast-below-header-bar {'; + dynamicStyle += 'min-height: ' + size.tablet + 'px;'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += '.ast-below-header-bar .site-below-header-wrap, .ast-mobile-header-wrap .ast-below-header-bar {'; + dynamicStyle += 'min-height: ' + size.mobile + 'px;'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + astra_add_dynamic_css( 'hbb-header-height', dynamicStyle ); + } + } ); + } ); + + // Border Bottom width. + wp.customize( 'astra-settings[hbb-header-separator]', function( value ) { + value.bind( function( border ) { + + var color = wp.customize( 'astra-settings[hbb-header-bottom-border-color]' ).get(), + dynamicStyle = ''; + + dynamicStyle += '.ast-header-break-point .ast-below-header-bar, .ast-below-header-bar {'; + dynamicStyle += 'border-bottom-width: ' + border + 'px;'; + dynamicStyle += 'border-bottom-style: solid;'; + dynamicStyle += 'border-color:' + color + ';'; + dynamicStyle += '}'; + + astra_add_dynamic_css( 'hbb-header-separator', dynamicStyle ); + + } ); + } ); + + // Border Color. + astra_css( + 'astra-settings[hbb-header-bottom-border-color]', + 'border-color', + '.ast-header-break-point .ast-below-header-bar, .ast-below-header-bar' + ); + + // Responsive BG styles > Below Header Row. + astra_apply_responsive_background_css( 'astra-settings[hbb-header-bg-obj-responsive]', '.ast-below-header.ast-below-header-bar', 'desktop' ); + astra_apply_responsive_background_css( 'astra-settings[hbb-header-bg-obj-responsive]', '.ast-below-header.ast-below-header-bar', 'tablet' ); + astra_apply_responsive_background_css( 'astra-settings[hbb-header-bg-obj-responsive]', '.ast-below-header.ast-below-header-bar', 'mobile' ); + + // Advanced CSS Generation. + astra_builder_advanced_css( 'section-below-header-builder', '.ast-below-header.ast-below-header-bar' ); + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( 'section-below-header-builder', '.ast-below-header-bar', 'grid' ); + +} )( jQuery ); diff --git a/inc/builder/type/header/below-header/class-astra-below-header-loader.php b/inc/builder/type/header/below-header/class-astra-below-header-loader.php new file mode 100644 index 0000000..60ae011 --- /dev/null +++ b/inc/builder/type/header/below-header/class-astra-below-header-loader.php @@ -0,0 +1,53 @@ + array( + 'height' => '100%', + ), + '.ast-header-break-point .ast-mobile-header-wrap .ast-below-header-wrap .main-header-bar-navigation .inline-on-mobile .menu-item .menu-link' => array( + 'border' => 'none', + ), + '.ast-header-break-point .ast-mobile-header-wrap .ast-below-header-wrap .main-header-bar-navigation .inline-on-mobile .menu-item-has-children > .ast-menu-toggle::before' => array( + 'font-size' => '.6rem', + ), + '.ast-header-break-point .ast-mobile-header-wrap .ast-below-header-wrap .main-header-bar-navigation .ast-submenu-expanded > .ast-menu-toggle::before' => array( + 'transform' => 'rotateX(180deg)', + ), + '#masthead .ast-mobile-header-wrap .ast-below-header-bar' => array( + 'padding-left' => '20px', + 'padding-right' => '20px', + ), + '.ast-mobile-header-wrap .ast-below-header-bar , .ast-below-header-bar .site-below-header-wrap' => array( + 'min-height' => astra_get_css_value( $hbb_header_height_desktop, 'px' ), + ), + '.ast-desktop .ast-below-header-bar .main-header-menu > .menu-item' => array( + 'line-height' => astra_get_css_value( $hbb_header_height_desktop, 'px' ), + ), + '.ast-desktop .ast-below-header-bar .ast-header-woo-cart, .ast-desktop .ast-below-header-bar .ast-header-edd-cart' => array( + 'line-height' => astra_get_css_value( $hbb_header_height_desktop, 'px' ), + ), + ); + + // Apply border only when it has positive value. + if ( $hbb_header_divider ) { + $common_css_output['.ast-below-header-bar'] = array( + 'border-bottom-width' => astra_get_css_value( $hbb_header_divider, 'px' ), + 'border-bottom-color' => esc_attr( $hbb_border_color ), + 'border-bottom-style' => 'solid', + ); + } else { + $common_css_output['.ast-below-header-bar'] = array( + 'border-bottom-style' => 'none', + ); + } + + $parse_css .= astra_parse_css( $common_css_output ); + + // Below Header Background Responsive - Desktop. + $desktop_bg = array( + '.ast-below-header-bar' => astra_get_responsive_background_obj( $hbb_header_bg_obj, 'desktop' ), + '.ast-header-break-point .ast-below-header-bar' => array( + 'background-color' => esc_attr( $desktop_background ), + ), + ); + $parse_css .= astra_parse_css( $desktop_bg ); + + // Below Header Background Responsive - Tablet. + $tablet_bg = array( + '.ast-below-header-bar' => astra_get_responsive_background_obj( $hbb_header_bg_obj, 'tablet' ), + '.ast-header-break-point .ast-below-header-bar' => array( + 'background-color' => esc_attr( $tablet_background ), + ), + '.ast-mobile-header-wrap .ast-below-header-bar , .ast-below-header-bar .site-below-header-wrap' => array( + 'min-height' => astra_get_css_value( $hbb_header_height_tablet, 'px' ), + ), + ); + $parse_css .= astra_parse_css( $tablet_bg, '', astra_get_tablet_breakpoint() ); + + // Below Header Background Responsive - Mobile. + $mobile_bg = array( + '.ast-below-header-bar' => astra_get_responsive_background_obj( $hbb_header_bg_obj, 'mobile' ), + '.ast-header-break-point .ast-below-header-bar' => array( + 'background-color' => esc_attr( $mobile_background ), + ), + '.ast-mobile-header-wrap .ast-below-header-bar , .ast-below-header-bar .site-below-header-wrap' => array( + 'min-height' => astra_get_css_value( $hbb_header_height_mobile, 'px' ), + ), + ); + $parse_css .= astra_parse_css( $mobile_bg, '', astra_get_mobile_breakpoint() ); + + // Trim white space for faster page loading. + $dynamic_css .= Astra_Enqueue_Scripts::trim_css( $parse_css ); + + $_section = 'section-below-header-builder'; + + + $parent_selector = '.ast-below-header-bar.ast-below-header, .ast-header-break-point .ast-below-header-bar.ast-below-header'; + + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_advanced_margin_padding_css( $_section, $parent_selector ); + + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, '.ast-below-header-bar', 'block', 'grid' ); + + return $dynamic_css; +} diff --git a/inc/builder/type/header/button/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/button/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..d39dab1 --- /dev/null +++ b/inc/builder/type/header/button/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +jQuery,astra_builder_button_css("header",AstraBuilderButtonData.component_limit); \ No newline at end of file diff --git a/inc/builder/type/header/button/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/button/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..db0ad86 --- /dev/null +++ b/inc/builder/type/header/button/assets/js/unminified/customizer-preview.js @@ -0,0 +1,15 @@ +/** + * 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 3.0.0 + */ + +( function( $ ) { + + astra_builder_button_css( 'header', AstraBuilderButtonData.component_limit ); + +} )( jQuery ); diff --git a/inc/builder/type/header/button/class-astra-header-button-component-loader.php b/inc/builder/type/header/button/class-astra-header-button-component-loader.php new file mode 100644 index 0000000..430c074 --- /dev/null +++ b/inc/builder/type/header/button/class-astra-header-button-component-loader.php @@ -0,0 +1,60 @@ + defined( 'ASTRA_EXT_VER' ) ? Astra_Builder_Helper::$component_limit : Astra_Builder_Helper::$num_of_header_button, + ) + ); + } +} + +/** +* Kicking this off by creating the object of the class. +*/ +new Astra_Header_Button_Component_Loader(); diff --git a/inc/builder/type/header/button/class-astra-header-button-component.php b/inc/builder/type/header/button/class-astra-header-button-component.php new file mode 100644 index 0000000..c8aa233 --- /dev/null +++ b/inc/builder/type/header/button/class-astra-header-button-component.php @@ -0,0 +1,47 @@ + array( + 'color' => $theme_color, + 'border-color' => $theme_color, + ), + $selector . ' .ast-edd-cart-menu-wrap:hover .count' => array( + 'color' => esc_attr( $cart_h_color ), + 'background-color' => esc_attr( $theme_color ), + ), + $selector . ' .ast-icon-shopping-cart' => array( + 'color' => $theme_color, + ), + $selector . ' .ast-edd-header-cart-info-wrap' => array( + 'color' => esc_attr( $header_cart_icon_color ), + ), + $selector . ' .ast-addon-cart-wrap span.astra-icon:after' => array( + 'color' => esc_attr( $cart_h_color ), + 'background-color' => esc_attr( $header_cart_icon_color ), + ), + /** + * Transparent Header - EDD Cart icon color. + */ + $trans_header_cart_selector . ' .ast-edd-header-cart-info-wrap' => array( + 'color' => esc_attr( $trans_header_cart_icon_color ), + ), + $trans_header_cart_selector . ' .ast-addon-cart-wrap span.astra-icon:after' => array( + 'color' => esc_attr( $trans_header_cart_h_color ), + 'background-color' => esc_attr( $trans_header_cart_icon_color ), + ), + /** + * General EDD Cart tray color for widget + */ + $selector . ' .widget_edd_cart_widget a, ' . $selector . ' .widget_edd_cart_widget a.edd-remove-from-cart, ' . $selector . ' .widget_edd_cart_widget .cart-total' => array( + 'color' => esc_attr( $cart_link_color_desktop ), + ), + $selector . ' .widget_edd_cart_widget a.edd-remove-from-cart:after' => array( + 'color' => esc_attr( $cart_link_color_desktop ), + 'border-color' => esc_attr( $cart_link_color_desktop ), + ), + $selector . ' .widget_edd_cart_widget span, ' . $selector . ' .widget_edd_cart_widget strong, ' . $selector . ' .widget_edd_cart_widget *' => array( + 'color' => esc_attr( $cart_text_color_desktop ), + ), + '.ast-builder-layout-element ' . $selector . ' .widget_edd_cart_widget' => array( + 'background-color' => esc_attr( $cart_bg_color_desktop ), + 'border-color' => esc_attr( $cart_bg_color_desktop ), + ), + '.ast-builder-layout-element ' . $selector . ' .widget_edd_cart_widget:before, .ast-builder-layout-element ' . $selector . ' .widget_edd_cart_widget:after' => array( + 'border-bottom-color' => esc_attr( $cart_bg_color_desktop ), + ), + $selector . ' .widget_edd_cart_widget .edd-cart-item, ' . $selector . ' .widget_edd_cart_widget .edd-cart-number-of-items, ' . $selector . ' .widget_edd_cart_widget .edd-cart-meta' => array( + 'border-bottom-color' => esc_attr( $cart_separator_color_desktop ), + ), + + /** + * Checkout button color for widget + */ + '.ast-edd-site-header-cart .widget_edd_cart_widget .edd_checkout a, .widget_edd_cart_widget .edd_checkout a' => array( + 'color' => esc_attr( $checkout_button_text_color_desktop ), + 'border-color' => esc_attr( $checkout_button_bg_color_desktop ), + 'background-color' => esc_attr( $checkout_button_bg_color_desktop ), + ), + '.ast-edd-site-header-cart .widget_edd_cart_widget .edd_checkout a:hover, .widget_edd_cart_widget .edd_checkout a:hover' => array( + 'color' => esc_attr( $checkout_button_text_h_color_desktop ), + 'background-color' => esc_attr( $checkout_button_bg_h_color_desktop ), + ), + ); + + $css_output = astra_parse_css( $css_output_desktop ); + + $responsive_selector = '.astra-cart-drawer.edd-active'; + + $css_output_mobile = array( + $responsive_selector . ' .widget_edd_cart_widget a, ' . $responsive_selector . ' .widget_edd_cart_widget a.edd-remove-from-cart, ' . $responsive_selector . ' .widget_edd_cart_widget .cart-total' => array( + 'color' => esc_attr( $cart_link_color_mobile ), + ), + $selector . ' .widget_edd_cart_widget a.edd-remove-from-cart:after' => array( + 'color' => esc_attr( $cart_link_color_mobile ), + 'border-color' => esc_attr( $cart_link_color_mobile ), + ), + $responsive_selector . ' .astra-cart-drawer-title, ' . $responsive_selector . ' .widget_edd_cart_widget span, ' . $responsive_selector . ' .widget_edd_cart_widget strong, ' . $responsive_selector . ' .widget_edd_cart_widget *' => array( + 'color' => esc_attr( $cart_text_color_mobile ), + ), + $responsive_selector => array( + 'background-color' => esc_attr( $cart_bg_color_mobile ), + 'border-color' => esc_attr( $cart_bg_color_mobile ), + ), + $responsive_selector . ' .widget_edd_cart_widget:before, .ast-builder-layout-element ' . $responsive_selector . ' .widget_edd_cart_widget:after' => array( + 'border-bottom-color' => esc_attr( $cart_bg_color_mobile ), + ), + $responsive_selector . ' .widget_edd_cart_widget .edd-cart-item, ' . $responsive_selector . ' .widget_edd_cart_widget .edd-cart-number-of-items, ' . $responsive_selector . ' .widget_edd_cart_widget .edd-cart-meta, ' . + $responsive_selector . ' .astra-cart-drawer-header' => array( + 'border-bottom-color' => esc_attr( $cart_separator_color_mobile ), + ), + /** + * Checkout button color for widget + */ + $responsive_selector . ' .widget_edd_cart_widget .edd_checkout a, .widget_edd_cart_widget .edd_checkout a' => array( + 'color' => esc_attr( $checkout_button_text_color_mobile ), + 'border-color' => esc_attr( $checkout_button_bg_color_mobile ), + 'background-color' => esc_attr( $checkout_button_bg_color_mobile ), + ), + $responsive_selector . ' .widget_edd_cart_widget .edd_checkout a:hover, .widget_edd_cart_widget .edd_checkout a:hover' => array( + 'color' => esc_attr( $checkout_button_text_h_color_mobile ), + 'background-color' => esc_attr( $checkout_button_bg_h_color_mobile ), + ), + ); + + $css_output_tablet = array( + $responsive_selector . ' .widget_edd_cart_widget a, ' . $responsive_selector . ' .widget_edd_cart_widget a.edd-remove-from-cart, ' . $responsive_selector . ' .widget_edd_cart_widget .cart-total' => array( + 'color' => esc_attr( $cart_link_color_tablet ), + ), + $selector . ' .widget_edd_cart_widget a.edd-remove-from-cart:after' => array( + 'color' => esc_attr( $cart_link_color_tablet ), + 'border-color' => esc_attr( $cart_link_color_tablet ), + ), + $responsive_selector . ' .astra-cart-drawer-title, ' . $responsive_selector . ' .widget_edd_cart_widget span, ' . $responsive_selector . ' .widget_edd_cart_widget strong, ' . $responsive_selector . ' .widget_edd_cart_widget *' => array( + 'color' => esc_attr( $cart_text_color_tablet ), + ), + $responsive_selector => array( + 'background-color' => esc_attr( $cart_bg_color_tablet ), + 'border-color' => esc_attr( $cart_bg_color_tablet ), + ), + $responsive_selector . ' .widget_edd_cart_widget:before, .ast-builder-layout-element ' . $responsive_selector . ' .widget_edd_cart_widget:after' => array( + 'border-bottom-color' => esc_attr( $cart_bg_color_tablet ), + ), + $responsive_selector . ' .widget_edd_cart_widget .edd-cart-item, ' . $responsive_selector . ' .widget_edd_cart_widget .edd-cart-number-of-items, ' . $responsive_selector . ' .widget_edd_cart_widget .edd-cart-meta, ' . + $responsive_selector . ' .astra-cart-drawer-header' => array( + 'border-bottom-color' => esc_attr( $cart_separator_color_tablet ), + ), + /** + * Checkout button color for widget + */ + $responsive_selector . ' .widget_edd_cart_widget .edd_checkout a, .widget_edd_cart_widget .edd_checkout a' => array( + 'color' => esc_attr( $checkout_button_text_color_tablet ), + 'border-color' => esc_attr( $checkout_button_bg_color_tablet ), + 'background-color' => esc_attr( $checkout_button_bg_color_tablet ), + ), + $responsive_selector . ' .widget_edd_cart_widget .edd_checkout a:hover, .widget_edd_cart_widget .edd_checkout a:hover' => array( + 'color' => esc_attr( $checkout_button_text_h_color_tablet ), + 'background-color' => esc_attr( $checkout_button_bg_h_color_tablet ), + ), + ); + + $css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() ); + $css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() ); + + /** + * Header Cart color + */ + if ( 'none' !== $header_cart_icon_style ) { + + /** + * Header Cart Icon colors + */ + $header_cart_icon = array( + + $selector . ' .ast-edd-cart-menu-wrap .count' => array( + 'color' => esc_attr( astra_get_option( 'edd-header-cart-icon-color' ) ), + 'border-color' => esc_attr( astra_get_option( 'edd-header-cart-icon-color' ) ), + ), + $selector . ' .ast-edd-cart-menu-wrap .count:after' => array( + 'color' => esc_attr( astra_get_option( 'edd-header-cart-icon-color' ) ), + 'border-color' => esc_attr( astra_get_option( 'edd-header-cart-icon-color' ) ), + ), + $selector . ' .ast-icon-shopping-cart' => array( + 'color' => esc_attr( astra_get_option( 'edd-header-cart-icon-color' ) ), + ), + + // Default icon colors. + '.ast-edd-cart-menu-wrap .count, .ast-edd-cart-menu-wrap .count:after' => array( + 'border-color' => esc_attr( $header_cart_icon_color ), + 'color' => esc_attr( $header_cart_icon_color ), + ), + // Outline icon hover colors. + $selector . ' .ast-edd-cart-menu-wrap:hover .count' => array( + 'color' => esc_attr( $cart_h_color ), + 'background-color' => esc_attr( $header_cart_icon_color ), + ), + // Outline icon colors. + '.ast-edd-menu-cart-outline .ast-addon-cart-wrap' => array( + 'background' => '#ffffff', + 'color' => esc_attr( $header_cart_icon_color ), + ), + // Outline Info colors. + $selector . ' .ast-menu-cart-outline .ast-edd-header-cart-info-wrap' => array( + 'color' => esc_attr( $header_cart_icon_color ), + ), + // Fill icon Color. + '.ast-edd-site-header-cart.ast-edd-menu-cart-fill .ast-edd-cart-menu-wrap .count,.ast-edd-menu-cart-fill .ast-addon-cart-wrap, .ast-edd-menu-cart-fill .ast-addon-cart-wrap .ast-edd-header-cart-info-wrap, .ast-edd-menu-cart-fill .ast-addon-cart-wrap .ast-icon-shopping-cart' => array( + 'background-color' => esc_attr( $header_cart_icon_color ), + 'color' => esc_attr( $cart_h_color ), + ), + + // Transparent Header - Count colors. + $trans_header_cart_selector . ' .ast-edd-cart-menu-wrap .count' => array( + 'color' => esc_attr( astra_get_option( 'transparent-header-edd-cart-icon-color' ) ), + 'border-color' => esc_attr( astra_get_option( 'transparent-header-edd-cart-icon-color' ) ), + ), + $trans_header_cart_selector . ' .ast-edd-cart-menu-wrap .count:after' => array( + 'color' => esc_attr( astra_get_option( 'transparent-header-edd-cart-icon-color' ) ), + 'border-color' => esc_attr( astra_get_option( 'transparent-header-edd-cart-icon-color' ) ), + ), + $trans_header_cart_selector . ' .ast-icon-shopping-cart' => array( + 'color' => esc_attr( astra_get_option( 'transparent-header-edd-cart-icon-color' ) ), + ), + + // Transparent Header - Default icon colors. + '.ast-theme-transparent-header .ast-edd-cart-menu-wrap .count, .ast-theme-transparent-header .ast-edd-cart-menu-wrap .count:after' => array( + 'border-color' => esc_attr( $trans_header_cart_icon_color ), + 'color' => esc_attr( $trans_header_cart_icon_color ), + ), + // Transparent Header - Outline icon hover colors. + $trans_header_cart_selector . ' .ast-edd-cart-menu-wrap:hover .count' => array( + 'color' => esc_attr( $trans_header_cart_h_color ), + 'background-color' => esc_attr( $trans_header_cart_icon_color ), + ), + // Transparent Header - Outline icon colors. + '.ast-theme-transparent-header .ast-edd-menu-cart-outline .ast-addon-cart-wrap' => array( + 'background' => '#ffffff', + 'color' => esc_attr( $trans_header_cart_icon_color ), + ), + // Transparent Header - Outline Info colors. + $trans_header_cart_selector . ' .ast-menu-cart-outline .ast-edd-header-cart-info-wrap' => array( + 'color' => esc_attr( $trans_header_cart_icon_color ), + ), + // Transparent Header - Fill icon Color. + '.ast-theme-transparent-header .ast-edd-site-header-cart.ast-edd-menu-cart-fill .ast-edd-cart-menu-wrap .count, .ast-theme-transparent-header .ast-edd-menu-cart-fill .ast-addon-cart-wrap, .ast-theme-transparent-header .ast-edd-menu-cart-fill .ast-edd-site-header-cart-wrap .ast-icon-shopping-cart, .ast-theme-transparent-header .ast-edd-site-header-cart .ast-addon-cart-wrap span.astra-icon:after' => array( + 'background-color' => esc_attr( $trans_header_cart_icon_color ), + 'color' => esc_attr( $trans_header_cart_h_color ), + ), + + // Border radius. + '.ast-edd-site-header-cart.ast-edd-menu-cart-outline .ast-addon-cart-wrap, .ast-edd-site-header-cart.ast-edd-menu-cart-fill .ast-addon-cart-wrap, .ast-edd-site-header-cart.ast-edd-menu-cart-outline .count, .ast-edd-site-header-cart.ast-edd-menu-cart-fill .count, .ast-edd-site-header-cart.ast-edd-menu-cart-outline .ast-addon-cart-wrap .ast-edd-header-cart-info-wrap, .ast-edd-site-header-cart.ast-edd-menu-cart-fill .ast-addon-cart-wrap .ast-edd-header-cart-info-wrap' => array( + 'border-radius' => astra_get_css_value( $header_cart_icon_radius, 'px' ), + ), + ); + + // We adding this conditional CSS only to maintain backwards. Remove this condition after 2-3 updates of add-on. + if ( defined( 'ASTRA_EXT_VER' ) && version_compare( ASTRA_EXT_VER, '3.4.2', '<' ) ) { + // Outline cart style border. + $header_cart_icon['.ast-edd-menu-cart-outline .ast-addon-cart-wrap'] = array( + 'background' => '#ffffff', + 'border' => '1px solid ' . $header_cart_icon_color, + 'color' => esc_attr( $header_cart_icon_color ), + ); + // Transparent Header outline cart style border. + $header_cart_icon['.ast-theme-transparent-header .ast-edd-menu-cart-outline .ast-addon-cart-wrap'] = array( + 'background' => '#ffffff', + 'border' => '1px solid ' . $trans_header_cart_icon_color, + 'color' => esc_attr( $trans_header_cart_icon_color ), + ); + } + + $header_cart_icon = astra_parse_css( $header_cart_icon ); + } + + /* Parse CSS from array() */ + $css_output .= $header_cart_icon; + + $css_output .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( 'section-header-edd-cart', '.ast-header-edd-cart' ); + + $dynamic_css .= $css_output; + + return $dynamic_css; +} diff --git a/inc/builder/type/header/html/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/html/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..08f5336 --- /dev/null +++ b/inc/builder/type/header/html/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +jQuery,astra_builder_html_css("header",AstraBuilderHTMLData.component_limit); \ No newline at end of file diff --git a/inc/builder/type/header/html/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/html/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..0535a8a --- /dev/null +++ b/inc/builder/type/header/html/assets/js/unminified/customizer-preview.js @@ -0,0 +1,15 @@ +/** + * 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( $ ) { + + astra_builder_html_css( 'header', AstraBuilderHTMLData.component_limit ); + +} )( jQuery ); diff --git a/inc/builder/type/header/html/class-astra-header-html-component-loader.php b/inc/builder/type/header/html/class-astra-header-html-component-loader.php new file mode 100644 index 0000000..6c3d002 --- /dev/null +++ b/inc/builder/type/header/html/class-astra-header-html-component-loader.php @@ -0,0 +1,60 @@ + defined( 'ASTRA_EXT_VER' ) ? Astra_Builder_Helper::$component_limit : Astra_Builder_Helper::$num_of_header_html, + ) + ); + } +} + +/** +* Kicking this off by creating the object of the class. +*/ +new Astra_Header_Html_Component_Loader(); diff --git a/inc/builder/type/header/html/class-astra-header-html-component.php b/inc/builder/type/header/html/class-astra-header-html-component.php new file mode 100644 index 0000000..0abed4c --- /dev/null +++ b/inc/builder/type/header/html/class-astra-header-html-component.php @@ -0,0 +1,45 @@ + .menu-link"),astra_generate_font_weight_css("astra-settings[header-"+t+"-font-family]","astra-settings[header-"+t+"-font-weight]","font-weight",i+" .menu-item > .menu-link"),astra_css("astra-settings[header-"+t+"-text-transform]","text-transform",i+" .menu-item > .menu-link"),astra_responsive_font_size("astra-settings[header-"+t+"-font-size]",i+" .menu-item > .menu-link"),astra_css("astra-settings[header-"+t+"-line-height]","line-height",i+" .menu-item > .menu-link"),astra_css("astra-settings[header-"+t+"-letter-spacing]","letter-spacing",i+" .menu-item > .menu-link","px"),astra_color_responsive_css("astra-menu-color-preview","astra-settings[header-"+t+"-color-responsive]","color",i+" .main-header-menu .menu-item > .menu-link"),astra_color_responsive_css("astra-menu-h-color-preview","astra-settings[header-"+t+"-h-color-responsive]","color",i+" .menu-item:hover > .menu-link, "+i+" .inline-on-mobile .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-builder-toggle","astra-settings[header-"+t+"-color-responsive]","color",i+" .menu-item > .ast-menu-toggle"),astra_color_responsive_css("astra-menu-h-toogle-color-preview","astra-settings[header-"+t+"-h-color-responsive]","color",i+" .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-menu-active-color-preview","astra-settings[header-"+t+"-a-color-responsive]","color",i+" .menu-item.current-menu-item > .menu-link, "+i+" .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, "+i+" .current-menu-ancestor > .menu-link, "+i+" .current-menu-ancestor > .ast-menu-toggle"),astra_apply_responsive_background_css("astra-settings[header-"+t+"-bg-obj-responsive]",i+" .main-header-menu, "+i+" .main-header-menu .sub-menu","desktop"),astra_apply_responsive_background_css("astra-settings[header-"+t+"-bg-obj-responsive]",i+" .main-header-menu, "+i+" .main-header-menu .sub-menu","tablet"),astra_apply_responsive_background_css("astra-settings[header-"+t+"-bg-obj-responsive]",i+" .main-header-menu, "+i+" .main-header-menu .sub-menu","mobile"),astra_color_responsive_css("astra-menu-bg-preview","astra-settings[header-"+t+"-h-bg-color-responsive]","background",i+" .menu-item:hover > .menu-link, "+i+" .inline-on-mobile .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-builder","astra-settings[header-"+t+"-a-bg-color-responsive]","background",i+" .menu-item.current-menu-item > .menu-link, "+i+" .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, "+i+" .current-menu-ancestor > .menu-link, "+i+" .current-menu-ancestor > .ast-menu-toggle"),function(i){wp.customize("astra-settings[header-menu"+i+"-submenu-border]",function(e){e.bind(function(e){var t=".ast-builder-menu-"+i+" .sub-menu, .ast-builder-menu-"+i+" .inline-on-mobile .sub-menu, .ast-builder-menu-"+i+" .main-header-menu.submenu-with-border .astra-megamenu, .ast-builder-menu-"+i+" .main-header-menu.submenu-with-border .astra-full-megamenu-wrapper {";t+="border-top-width:"+e.top+"px;",t+="border-right-width:"+e.right+"px;",t+="border-left-width:"+e.left+"px;",t+="border-style: solid;",t+="border-bottom-width:"+e.bottom+"px;",t+="}",astra_add_dynamic_css("header-menu"+i+"-submenu-border",t)})}),wp.customize("astra-settings[header-menu"+i+"-menu-spacing]",function(e){e.bind(function(e){var t="";t+=".ast-builder-menu-"+i+" .main-header-menu .menu-item > .menu-link {",t+="padding-left: "+e.desktop.left+e["desktop-unit"]+";",t+="padding-right: "+e.desktop.right+e["desktop-unit"]+";",t+="padding-top: "+e.desktop.top+e["desktop-unit"]+";",t+="padding-bottom: "+e.desktop.bottom+e["desktop-unit"]+";",t+="} ",t+="@media (max-width: "+a+"px) {",t+=".ast-header-break-point .ast-builder-menu-"+i+" .main-header-menu .menu-item > .menu-link {",t+="padding-left: "+e.tablet.left+e["tablet-unit"]+";",t+="padding-right: "+e.tablet.right+e["tablet-unit"]+";",t+="padding-top: "+e.tablet.top+e["tablet-unit"]+";",t+="padding-bottom: "+e.tablet.bottom+e["tablet-unit"]+";",t+="} ",t+=".ast-hfb-header .ast-builder-menu-"+i+" .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {",t+="top: "+e.tablet.top+e["tablet-unit"]+";",t+="right: calc( "+e.tablet.right+e["tablet-unit"]+" - 0.907em );",t+="} ",t+="} ",t+="@media (max-width: "+s+"px) {",t+=".ast-header-break-point .ast-builder-menu-"+i+" .main-header-menu .menu-item > .menu-link {",t+="padding-left: "+e.mobile.left+e["mobile-unit"]+";",t+="padding-right: "+e.mobile.right+e["mobile-unit"]+";",t+="padding-top: "+e.mobile.top+e["mobile-unit"]+";",t+="padding-bottom: "+e.mobile.bottom+e["mobile-unit"]+";",t+="} ",t+=".ast-hfb-header .ast-builder-menu-"+i+" .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {",t+="top: "+e.mobile.top+e["mobile-unit"]+";",t+="right: calc( "+e.mobile.right+e["mobile-unit"]+" - 0.907em );",t+="} ",t+="} ",astra_add_dynamic_css("header-menu"+i+"-menu-spacing-toggle-button",t)})}),wp.customize("astra-settings[section-hb-menu-"+i+"-margin]",function(e){e.bind(function(e){var t=".ast-builder-menu-"+i+" .main-header-menu, .ast-header-break-point .ast-builder-menu-"+i+" .main-header-menu",n="";n+=t+" {",n+="margin-left: "+e.desktop.left+e["desktop-unit"]+";",n+="margin-right: "+e.desktop.right+e["desktop-unit"]+";",n+="margin-top: "+e.desktop.top+e["desktop-unit"]+";",n+="margin-bottom: "+e.desktop.bottom+e["desktop-unit"]+";",n+="} ",n+="@media (max-width: "+a+"px) {",n+=t+" {",n+="margin-left: "+e.tablet.left+e["tablet-unit"]+";",n+="margin-right: "+e.tablet.right+e["tablet-unit"]+";",n+="margin-top: "+e.tablet.top+e["desktop-unit"]+";",n+="margin-bottom: "+e.tablet.bottom+e["desktop-unit"]+";",n+="} ",n+="} ",n+="@media (max-width: "+s+"px) {",n+=t+" {",n+="margin-left: "+e.mobile.left+e["mobile-unit"]+";",n+="margin-right: "+e.mobile.right+e["mobile-unit"]+";",n+="margin-top: "+e.mobile.top+e["desktop-unit"]+";",n+="margin-bottom: "+e.mobile.bottom+e["desktop-unit"]+";",n+="} ",n+="} ",astra_add_dynamic_css("section-hb-menu-"+i+"-margin",n)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-color]",function(e){e.bind(function(e){var t=wp.customize("astra-settings[header-menu"+i+"-submenu-item-border]").get(),n=wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-size]").get();""!=e?1==t&&(t="",t+=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu .menu-item .sub-menu .menu-link",t+="{",t+="border-bottom-width:"+(n?n+"px;":"0px;"),t+="border-color:"+e+";",t+="border-style: solid;",t+="}",t+=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu .menu-item .sub-menu .menu-item:last-child .menu-link{ border-style: none; }",astra_add_dynamic_css("header-menu"+i+"-submenu-item-b-color",t)):wp.customize.preview.send("refresh")})}),wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-size]",function(e){e.bind(function(e){var t=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu",n="";n+=t+" .menu-item .sub-menu .menu-link {",n+="border-bottom-width: "+e+"px;",n+="} ",n+=t+" .menu-item .sub-menu .menu-item:last-child .menu-link {",n+="border-bottom-width: 0px",n+="} ",astra_add_dynamic_css("header-menu"+i+"-submenu-item-b-size",n)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-item-border]",function(e){e.bind(function(e){var t=wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-color]").get(),n=wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-size]").get(),a=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu.submenu-with-border .sub-menu .menu-link";!0===e?(a+="{",a+="border-bottom-width:"+(n?n+"px;":"0px;"),a+="border-color:"+t+";",a+="border-style: solid;"):(a+="{",a+="border-style: none;"),a+="}",a+=".ast-desktop .ast-builder-menu-"+i+" .menu-item .sub-menu .menu-item:last-child .menu-link{ border-style: none; }",astra_add_dynamic_css("header-menu"+i+"-submenu-item-border",a)})}),wp.customize("astra-settings[header-menu"+i+"-menu-hover-animation]",function(e){e.bind(function(e){var t=jQuery("#ast-desktop-header #ast-hf-menu-"+i);t.removeClass("ast-menu-hover-style-underline"),t.removeClass("ast-menu-hover-style-zoom"),t.removeClass("ast-menu-hover-style-overline"),n&&document.dispatchEvent(new CustomEvent("astMenuHoverStyleChanged",{detail:{}})),t.addClass("ast-menu-hover-style-"+e)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-container-animation]",function(e){e.bind(function(e){var t=jQuery("#ast-desktop-header #ast-hf-menu-"+i);t.removeClass("astra-menu-animation-fade"),t.removeClass("astra-menu-animation-slide-down"),t.removeClass("astra-menu-animation-slide-up"),""!=e&&t.addClass("astra-menu-animation-"+e)})}),wp.customize("astra-settings[header-menu"+i+"-menu-stack-on-mobile]",function(e){e.bind(function(e){var t=jQuery("#ast-mobile-header #ast-hf-menu-"+i+".main-header-menu");t.removeClass("inline-on-mobile"),t.removeClass("stack-on-mobile"),!1===e?t.addClass("inline-on-mobile"):t.addClass("stack-on-mobile")})}),wp.customize("astra-settings[header-menu"+i+"-submenu-border-radius]",function(e){e.bind(function(e){var t=".ast-builder-menu-"+i+" li.menu-item .sub-menu, .ast-builder-menu-"+i+" ul.inline-on-mobile li.menu-item .sub-menu {";t+="border-radius: "+e+"px",t+="}",astra_add_dynamic_css("header-menu"+i+"-submenu-border-radius",t)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-top-offset]",function(e){e.bind(function(e){var t=".ast-desktop .ast-builder-menu-"+i+" li.menu-item .sub-menu, .ast-desktop .ast-builder-menu-"+i+" ul.inline-on-mobile li.menu-item .sub-menu, .ast-desktop .ast-builder-menu-"+i+" li.menu-item .astra-full-megamenu-wrapper {";t+="margin-top: "+e+"px",t+="}",t+=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu > .menu-item > .sub-menu:before, .ast-desktop .ast-builder-menu-"+i+" .main-header-menu > .menu-item > .astra-full-megamenu-wrapper:before {",t+="height: calc( "+e+"px + 5px );",t+="}",astra_add_dynamic_css("header-menu"+i+"-submenu-top-offset",t)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-width]",function(e){e.bind(function(e){var t=".ast-builder-menu-"+i+" li.menu-item .sub-menu, .ast-builder-menu-"+i+" ul.inline-on-mobile li.menu-item .sub-menu {";t+="width: "+e+"px",t+="}",astra_add_dynamic_css("header-menu"+i+"-submenu-width",t)})})}(e),astra_css("astra-settings[header-"+t+"-submenu-b-color]","border-color",i+" li.menu-item .sub-menu, "+i+" .inline-on-mobile li.menu-item .sub-menu ")}astra_color_responsive_css("astra-builder-transparent-submenu","astra-settings[transparent-submenu-h-color-responsive]","color",".ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-item:hover > .menu-link")}(jQuery); \ No newline at end of file diff --git a/inc/builder/type/header/menu/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/menu/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..54fa93b --- /dev/null +++ b/inc/builder/type/header/menu/assets/js/unminified/customizer-preview.js @@ -0,0 +1,407 @@ +/** + * 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 3.0.0 + */ + +( function( $ ) { + + var tablet_break_point = AstraBuilderMenuData.tablet_break_point || 768, + mobile_break_point = AstraBuilderMenuData.mobile_break_point || 544, + isNavMenuEnabled = AstraBuilderMenuData.nav_menu_enabled || false; + + for ( var index = 1; index <= AstraBuilderMenuData.component_limit; index++ ) { + + var prefix = 'menu' + index; + var selector = '.ast-builder-menu-' + index; + var section = 'section-hb-menu-' + index; + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( section, selector ); + + /** + * Typography CSS. + */ + + // Menu Typography. + astra_generate_outside_font_family_css( + 'astra-settings[header-' + prefix + '-font-family]', + selector + ' .menu-item > .menu-link' + ); + astra_generate_font_weight_css( + 'astra-settings[header-' + prefix + '-font-family]', + 'astra-settings[header-' + prefix + '-font-weight]', + 'font-weight', + selector + ' .menu-item > .menu-link' + ); + astra_css( + 'astra-settings[header-' + prefix + '-text-transform]', + 'text-transform', + selector + ' .menu-item > .menu-link' + ); + astra_responsive_font_size( + 'astra-settings[header-' + prefix + '-font-size]', + selector + ' .menu-item > .menu-link' + ); + astra_css( + 'astra-settings[header-' + prefix + '-line-height]', + 'line-height', + selector + ' .menu-item > .menu-link' + ); + astra_css( + 'astra-settings[header-' + prefix + '-letter-spacing]', + 'letter-spacing', + selector + ' .menu-item > .menu-link', + 'px' + ); + + /** + * Color CSS. + */ + + /** + * Menu - Colors + */ + + // Menu - Normal Color + astra_color_responsive_css( + 'astra-menu-color-preview', + 'astra-settings[header-' + prefix + '-color-responsive]', + 'color', + selector + ' .main-header-menu .menu-item > .menu-link' + ); + + // Menu - Hover Color + astra_color_responsive_css( + 'astra-menu-h-color-preview', + 'astra-settings[header-' + prefix + '-h-color-responsive]', + 'color', + selector + ' .menu-item:hover > .menu-link, ' + selector + ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' + ); + + // Menu Toggle - Color + astra_color_responsive_css( + 'astra-builder-toggle', + 'astra-settings[header-' + prefix + '-color-responsive]', + 'color', + selector + ' .menu-item > .ast-menu-toggle' + ); + + // Menu Toggle - Hover Color + astra_color_responsive_css( + 'astra-menu-h-toogle-color-preview', + 'astra-settings[header-' + prefix + '-h-color-responsive]', + 'color', + selector + ' .menu-item:hover > .ast-menu-toggle' + ); + // Menu - Active Color + astra_color_responsive_css( + 'astra-menu-active-color-preview', + 'astra-settings[header-' + prefix + '-a-color-responsive]', + 'color', + selector + ' .menu-item.current-menu-item > .menu-link, ' + selector + ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' + selector + ' .current-menu-ancestor > .menu-link, ' + selector + ' .current-menu-ancestor > .ast-menu-toggle' + ); + + // Menu - Normal Background + astra_apply_responsive_background_css( 'astra-settings[header-' + prefix + '-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'desktop' ); + astra_apply_responsive_background_css( 'astra-settings[header-' + prefix + '-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'tablet' ); + astra_apply_responsive_background_css( 'astra-settings[header-' + prefix + '-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'mobile' ); + + // Menu - Hover Background + astra_color_responsive_css( + 'astra-menu-bg-preview', + 'astra-settings[header-' + prefix + '-h-bg-color-responsive]', + 'background', + selector + ' .menu-item:hover > .menu-link, ' + selector + ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' + ); + + // Menu - Active Background + astra_color_responsive_css( + 'astra-builder', + 'astra-settings[header-' + prefix + '-a-bg-color-responsive]', + 'background', + selector + ' .menu-item.current-menu-item > .menu-link, ' + selector + ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' + selector + ' .current-menu-ancestor > .menu-link, ' + selector + ' .current-menu-ancestor > .ast-menu-toggle' + ); + + /** + * Border CSS. + */ + + (function (index) { + + // Menu 1 > Sub Menu Border Size. + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-border]', function( setting ) { + setting.bind( function( border ) { + + var dynamicStyle = '.ast-builder-menu-'+ index +' .sub-menu, .ast-builder-menu-'+ index +' .inline-on-mobile .sub-menu, .ast-builder-menu-'+ index +' .main-header-menu.submenu-with-border .astra-megamenu, .ast-builder-menu-'+ index +' .main-header-menu.submenu-with-border .astra-full-megamenu-wrapper {'; + dynamicStyle += 'border-top-width:' + border.top + 'px;'; + dynamicStyle += 'border-right-width:' + border.right + 'px;'; + dynamicStyle += 'border-left-width:' + border.left + 'px;'; + dynamicStyle += 'border-style: solid;'; + dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;'; + + dynamicStyle += '}'; + astra_add_dynamic_css( 'header-menu'+ index +'-submenu-border', dynamicStyle ); + + } ); + } ); + + // Menu Spacing - Menu 1. + wp.customize( 'astra-settings[header-menu'+ index +'-menu-spacing]', function( value ) { + value.bind( function( padding ) { + var dynamicStyle = ''; + dynamicStyle += '.ast-builder-menu-'+ index +' .main-header-menu .menu-item > .menu-link {'; + dynamicStyle += 'padding-left: ' + padding['desktop']['left'] + padding['desktop-unit'] + ';'; + dynamicStyle += 'padding-right: ' + padding['desktop']['right'] + padding['desktop-unit'] + ';'; + dynamicStyle += 'padding-top: ' + padding['desktop']['top'] + padding['desktop-unit'] + ';'; + dynamicStyle += 'padding-bottom: ' + padding['desktop']['bottom'] + padding['desktop-unit'] + ';'; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += '.ast-header-break-point .ast-builder-menu-'+ index +' .main-header-menu .menu-item > .menu-link {'; + dynamicStyle += 'padding-left: ' + padding['tablet']['left'] + padding['tablet-unit'] + ';'; + dynamicStyle += 'padding-right: ' + padding['tablet']['right'] + padding['tablet-unit'] + ';'; + dynamicStyle += 'padding-top: ' + padding['tablet']['top'] + padding['tablet-unit'] + ';'; + dynamicStyle += 'padding-bottom: ' + padding['tablet']['bottom'] + padding['tablet-unit'] + ';'; + dynamicStyle += '} '; + // Toggle top. + dynamicStyle += '.ast-hfb-header .ast-builder-menu-'+ index +' .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {'; + dynamicStyle += 'top: ' + padding['tablet']['top'] + padding['tablet-unit'] + ';'; + dynamicStyle += 'right: calc( ' + padding['tablet']['right'] + padding['tablet-unit'] + ' - 0.907em );' + dynamicStyle += '} '; + + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += '.ast-header-break-point .ast-builder-menu-'+ index +' .main-header-menu .menu-item > .menu-link {'; + dynamicStyle += 'padding-left: ' + padding['mobile']['left'] + padding['mobile-unit'] + ';'; + dynamicStyle += 'padding-right: ' + padding['mobile']['right'] + padding['mobile-unit'] + ';'; + dynamicStyle += 'padding-top: ' + padding['mobile']['top'] + padding['mobile-unit'] + ';'; + dynamicStyle += 'padding-bottom: ' + padding['mobile']['bottom'] + padding['mobile-unit'] + ';'; + dynamicStyle += '} '; + // Toggle top. + dynamicStyle += '.ast-hfb-header .ast-builder-menu-'+ index +' .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {'; + dynamicStyle += 'top: ' + padding['mobile']['top'] + padding['mobile-unit'] + ';'; + dynamicStyle += 'right: calc( ' + padding['mobile']['right'] + padding['mobile-unit'] + ' - 0.907em );' + dynamicStyle += '} '; + + dynamicStyle += '} '; + + astra_add_dynamic_css( 'header-menu'+ index +'-menu-spacing-toggle-button', dynamicStyle ); + } ); + } ); + + // Margin - Menu 1. + wp.customize( 'astra-settings[section-hb-menu-'+ index +'-margin]', function( value ) { + value.bind( function( margin ) { + var selector = '.ast-builder-menu-'+ index +' .main-header-menu, .ast-header-break-point .ast-builder-menu-'+ index +' .main-header-menu'; + 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( 'section-hb-menu-'+ index +'-margin', dynamicStyle ); + } ); + } ); + + /** + * Header Menu 1 > Submenu border Color + */ + wp.customize('astra-settings[header-menu'+ index +'-submenu-item-b-color]', function (value) { + value.bind(function (color) { + var insideBorder = wp.customize('astra-settings[header-menu'+ index +'-submenu-item-border]').get(), + borderSize = wp.customize('astra-settings[header-menu'+ index +'-submenu-item-b-size]').get(); + if ('' != color) { + if ( true == insideBorder ) { + + var dynamicStyle = ''; + + dynamicStyle += '.ast-desktop .ast-builder-menu-'+ index +' .main-header-menu .menu-item .sub-menu .menu-link'; + dynamicStyle += '{'; + dynamicStyle += 'border-bottom-width:' + ( ( borderSize ) ? borderSize + 'px;' : '0px;' ); + dynamicStyle += 'border-color:' + color + ';'; + dynamicStyle += 'border-style: solid;'; + dynamicStyle += '}'; + dynamicStyle += '.ast-desktop .ast-builder-menu-'+ index +' .main-header-menu .menu-item .sub-menu .menu-item:last-child .menu-link{ border-style: none; }'; + + astra_add_dynamic_css('header-menu'+ index +'-submenu-item-b-color', dynamicStyle); + } + } else { + wp.customize.preview.send('refresh'); + } + }); + }); + + // Sub Menu - Divider Size. + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-item-b-size]', function( value ) { + value.bind( function( borderSize ) { + var selector = '.ast-desktop .ast-builder-menu-'+ index + ' .main-header-menu'; + var dynamicStyle = ''; + dynamicStyle += selector + ' .menu-item .sub-menu .menu-link {'; + dynamicStyle += 'border-bottom-width: ' + borderSize + 'px;'; + dynamicStyle += '} '; + dynamicStyle += selector + ' .menu-item .sub-menu .menu-item:last-child .menu-link {'; + dynamicStyle += 'border-bottom-width: 0px'; + dynamicStyle += '} '; + astra_add_dynamic_css( 'header-menu'+ index +'-submenu-item-b-size', dynamicStyle ); + } ); + } ); + + /** + * Header Menu 1 > Submenu border Color + */ + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-item-border]', function( value ) { + value.bind( function( border ) { + var color = wp.customize( 'astra-settings[header-menu'+ index +'-submenu-item-b-color]' ).get(), + borderSize = wp.customize('astra-settings[header-menu'+ index +'-submenu-item-b-size]').get(); + + var dynamicStyle = '.ast-desktop .ast-builder-menu-'+ index +' .main-header-menu.submenu-with-border .sub-menu .menu-link'; + + if( true === border ) { + dynamicStyle += '{'; + dynamicStyle += 'border-bottom-width:' + ( ( borderSize ) ? borderSize + 'px;' : '0px;' ); + dynamicStyle += 'border-color:' + color + ';'; + dynamicStyle += 'border-style: solid;'; + dynamicStyle += '}'; + } else { + dynamicStyle += '{'; + dynamicStyle += 'border-style: none;'; + dynamicStyle += '}'; + } + + dynamicStyle += '.ast-desktop .ast-builder-menu-'+ index +' .menu-item .sub-menu .menu-item:last-child .menu-link{ border-style: none; }'; + astra_add_dynamic_css( 'header-menu'+ index +'-submenu-item-border', dynamicStyle ); + + } ); + } ); + + // Animation preview support. + // Adding customizer-refresh because if megamenu is enabled on menu then caluculated left & width JS value of megamenu wrapper wiped out due to partial refresh. + wp.customize( 'astra-settings[header-menu'+ index +'-menu-hover-animation]', function( setting ) { + setting.bind( function( animation ) { + + var menuWrapper = jQuery( '#ast-desktop-header #ast-hf-menu-'+ index ); + menuWrapper.removeClass('ast-menu-hover-style-underline'); + menuWrapper.removeClass('ast-menu-hover-style-zoom'); + menuWrapper.removeClass('ast-menu-hover-style-overline'); + + if ( isNavMenuEnabled ) { + document.dispatchEvent( new CustomEvent( "astMenuHoverStyleChanged", { "detail": {} }) ); + } + + menuWrapper.addClass( 'ast-menu-hover-style-' + animation ); + } ); + } ); + + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-container-animation]', function( setting ) { + setting.bind( function( animation ) { + + var menuWrapper = jQuery( '#ast-desktop-header #ast-hf-menu-'+ index ); + menuWrapper.removeClass('astra-menu-animation-fade'); + menuWrapper.removeClass('astra-menu-animation-slide-down'); + menuWrapper.removeClass('astra-menu-animation-slide-up'); + + if ( '' != animation ) { + menuWrapper.addClass( 'astra-menu-animation-' + animation ); + } + } ); + } ); + + // Stack on Mobile CSS + wp.customize( 'astra-settings[header-menu'+ index +'-menu-stack-on-mobile]', function( setting ) { + setting.bind( function( stack ) { + + var menu_div = jQuery( '#ast-mobile-header #ast-hf-menu-'+ index + '.main-header-menu' ); + menu_div.removeClass('inline-on-mobile'); + menu_div.removeClass('stack-on-mobile'); + + if ( false === stack ) { + menu_div.addClass('inline-on-mobile'); + } else { + menu_div.addClass('stack-on-mobile'); + } + } ); + } ); + + // Sub Menu - Border Radius. + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-border-radius]', function( value ) { + value.bind( function( border ) { + + var dynamicStyle = '.ast-builder-menu-' + index + ' li.menu-item .sub-menu, .ast-builder-menu-' + index + ' ul.inline-on-mobile li.menu-item .sub-menu {'; + dynamicStyle += 'border-radius: ' + border + 'px'; + dynamicStyle += '}'; + + astra_add_dynamic_css( 'header-menu'+ index +'-submenu-border-radius', dynamicStyle ); + + } ); + } ); + + // Sub Menu - Top Offset. + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-top-offset]', function( value ) { + value.bind( function( offset ) { + + var dynamicStyle = '.ast-desktop .ast-builder-menu-' + index + ' li.menu-item .sub-menu, .ast-desktop .ast-builder-menu-' + index + ' ul.inline-on-mobile li.menu-item .sub-menu, .ast-desktop .ast-builder-menu-' + index + ' li.menu-item .astra-full-megamenu-wrapper {'; + dynamicStyle += 'margin-top: ' + offset + 'px'; + dynamicStyle += '}'; + + dynamicStyle += '.ast-desktop .ast-builder-menu-' + index + ' .main-header-menu > .menu-item > .sub-menu:before, .ast-desktop .ast-builder-menu-' + index + ' .main-header-menu > .menu-item > .astra-full-megamenu-wrapper:before {'; + dynamicStyle += 'height: calc( ' + offset + 'px + 5px );'; + dynamicStyle += '}'; + + astra_add_dynamic_css( 'header-menu'+ index +'-submenu-top-offset', dynamicStyle ); + + } ); + } ); + + // Sub Menu - Width. + wp.customize( 'astra-settings[header-menu'+ index +'-submenu-width]', function( value ) { + value.bind( function( width ) { + + var dynamicStyle = '.ast-builder-menu-' + index + ' li.menu-item .sub-menu, .ast-builder-menu-' + index + ' ul.inline-on-mobile li.menu-item .sub-menu {'; + dynamicStyle += 'width: ' + width + 'px'; + dynamicStyle += '}'; + + astra_add_dynamic_css( 'header-menu'+ index +'-submenu-width', dynamicStyle ); + + } ); + } ); + + })(index); + + + // Sub Menu - Border Color. + astra_css( + 'astra-settings[header-' + prefix + '-submenu-b-color]', + 'border-color', + selector + ' li.menu-item .sub-menu, ' + selector + ' .inline-on-mobile li.menu-item .sub-menu ' + ); + } + + // Transparent header > Submenu link hover color. + astra_color_responsive_css( 'astra-builder-transparent-submenu', 'astra-settings[transparent-submenu-h-color-responsive]', 'color', '.ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-item:hover > .menu-link' ); + +} )( jQuery ); diff --git a/inc/builder/type/header/menu/class-astra-header-menu-component-loader.php b/inc/builder/type/header/menu/class-astra-header-menu-component-loader.php new file mode 100644 index 0000000..aeb74dc --- /dev/null +++ b/inc/builder/type/header/menu/class-astra-header-menu-component-loader.php @@ -0,0 +1,89 @@ + defined( 'ASTRA_EXT_VER' ) ? Astra_Builder_Helper::$component_limit : Astra_Builder_Helper::$num_of_header_menu, + 'nav_menu_enabled' => ( defined( 'ASTRA_EXT_VER' ) && Astra_Ext_Extension::is_active( 'nav-menu' ) ) ? true : false, + 'tablet_break_point' => astra_get_tablet_breakpoint(), + 'mobile_break_point' => astra_get_mobile_breakpoint(), + ) + ); + } +} + +/** +* Kicking this off by creating the object of the class. +*/ +new Astra_Header_Menu_Component_Loader(); diff --git a/inc/builder/type/header/menu/class-astra-header-menu-component.php b/inc/builder/type/header/menu/class-astra-header-menu-component.php new file mode 100644 index 0000000..5c565b6 --- /dev/null +++ b/inc/builder/type/header/menu/class-astra-header-menu-component.php @@ -0,0 +1,153 @@ +). + * + * @since 3.0.0 + * @var Array + */ + $menu_classes = apply_filters( 'astra_' . $theme_location . '_menu_classes', array( 'main-header-menu', 'ast-nav-menu', 'ast-flex', $submenu_class, $stack_on_mobile_class ) ); + + $items_wrap = ''; + + // Fallback Menu if primary menu not set. + $fallback_menu_args = array( + 'theme_location' => $theme_location, + 'menu_id' => 'ast-hf-menu-' . $index, + 'menu_class' => 'main-navigation ast-inline-flex', + 'container' => 'div', + 'before' => '', + 'walker' => new Astra_Walker_Page(), + ); + + // To add default alignment for navigation which can be added through any third party plugin. + // Do not add any CSS from theme except header alignment. + echo '
'; + + if ( is_customize_preview() ) { + Astra_Builder_UI_Controller::render_customizer_edit_button(); + } + if ( has_nav_menu( $theme_location ) ) { + wp_nav_menu( + array( + 'menu_id' => 'ast-hf-menu-' . $index, + 'menu_class' => esc_attr( implode( ' ', $menu_classes ) ), + 'container' => 'div', + 'container_class' => 'main-header-bar-navigation', + 'items_wrap' => $items_wrap, + 'theme_location' => $theme_location, + ) + ); + } else { + echo '
'; + echo ''; + echo '
'; + } + echo '
'; + } +} + +/** + * Kicking this off by creating an object. + */ +new Astra_Header_Menu_Component(); diff --git a/inc/builder/type/header/menu/dynamic-css/dynamic.css.php b/inc/builder/type/header/menu/dynamic-css/dynamic.css.php new file mode 100644 index 0000000..074abb7 --- /dev/null +++ b/inc/builder/type/header/menu/dynamic-css/dynamic.css.php @@ -0,0 +1,370 @@ + array( + 'font-family' => astra_get_font_family( $menu_font_family ), + 'font-weight' => esc_attr( $menu_font_weight ), + 'text-transform' => esc_attr( $menu_text_transform ), + ), + $selector . ' .menu-item > .menu-link' => array( + 'line-height' => esc_attr( $menu_line_height ), + 'font-size' => astra_get_font_css_value( $menu_font_size_desktop, $menu_font_size_desktop_unit ), + 'color' => $menu_resp_color_desktop, + 'padding-top' => astra_responsive_spacing( $menu_spacing, 'top', 'desktop' ), + 'padding-bottom' => astra_responsive_spacing( $menu_spacing, 'bottom', 'desktop' ), + 'padding-left' => astra_responsive_spacing( $menu_spacing, 'left', 'desktop' ), + 'padding-right' => astra_responsive_spacing( $menu_spacing, 'right', 'desktop' ), + ), + $selector . ' .menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_desktop, + ), + $selector . ' .menu-item:hover > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_desktop, + 'background' => $menu_resp_bg_color_hover_desktop, + ), + $selector . ' .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_desktop, + ), + $selector . ' .menu-item.current-menu-item > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' . $selector . ' .current-menu-ancestor > .menu-link' => array( + 'color' => $menu_resp_color_active_desktop, + 'background' => $menu_resp_bg_color_active_desktop, + ), + $selector . ' .menu-item.current-menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_desktop, + ), + // Sub Menu. + $selector . ' .sub-menu, ' . $selector . ' .inline-on-mobile .sub-menu' => array( + 'border-top-width' => astra_get_css_value( $sub_menu_border_top, 'px' ), + 'border-bottom-width' => astra_get_css_value( $sub_menu_border_bottom, 'px' ), + 'border-right-width' => astra_get_css_value( $sub_menu_border_right, 'px' ), + 'border-left-width' => astra_get_css_value( $sub_menu_border_left, 'px' ), + 'border-color' => esc_attr( astra_get_option( 'header-' . $_prefix . '-submenu-b-color', $theme_color ) ), + 'border-style' => 'solid', + 'width' => astra_get_css_value( $sub_menu_width, 'px' ), + 'border-radius' => astra_get_css_value( $sub_menu_border_radius, 'px' ), + ), + $selector . ' .main-header-menu > .menu-item > .sub-menu, ' . $selector . ' .main-header-menu > .menu-item > .astra-full-megamenu-wrapper' => array( + 'margin-top' => astra_get_css_value( $sub_menu_top_offset, 'px' ), + ), + '.ast-desktop ' . $selector . ' .main-header-menu > .menu-item > .sub-menu:before, .ast-desktop ' . $selector . ' .main-header-menu > .menu-item > .astra-full-megamenu-wrapper:before' => array( + 'height' => astra_calculate_spacing( $sub_menu_top_offset . 'px', '+', '5', 'px' ), + ), + $selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' => array( + 'top' => astra_responsive_spacing( $menu_spacing, 'top', 'desktop' ), + 'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'desktop' ), '-', '0.907', 'em' ), + ), + // Margin CSS. + $margin_selector => array( + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'desktop' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'desktop' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'desktop' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'desktop' ), + ), + ); + + $css_output_desktop[ $selector . ' .main-header-menu, ' . $selector . ' .main-header-menu .sub-menu' ] = astra_get_responsive_background_obj( $menu_resp_bg_color, 'desktop' ); + + $mobile_selector = '.ast-header-break-point .ast-builder-menu-' . $index; + + $menu_spacing_mobile_top = astra_responsive_spacing( $menu_spacing, 'top', 'mobile' ); + $menu_spacing_mobile_top = ( isset( $menu_spacing_mobile_top ) && ! empty( $menu_spacing_mobile_top ) ) ? $menu_spacing_mobile_top : 0; + + $menu_spacing_tablet_top = astra_responsive_spacing( $menu_spacing, 'top', 'tablet' ); + $menu_spacing_tablet_top = ( isset( $menu_spacing_tablet_top ) && ! empty( $menu_spacing_tablet_top ) ) ? $menu_spacing_tablet_top : 0; + + $css_output_tablet = array( + + $mobile_selector => array( + 'font-size' => astra_get_font_css_value( $menu_font_size_tablet, $menu_font_size_tablet_unit ), + ), + $mobile_selector . ' .main-header-menu .menu-item > .menu-link' => array( + 'padding-top' => astra_responsive_spacing( $menu_spacing, 'top', 'tablet' ), + 'padding-bottom' => astra_responsive_spacing( $menu_spacing, 'bottom', 'tablet' ), + 'padding-left' => astra_responsive_spacing( $menu_spacing, 'left', 'tablet' ), + 'padding-right' => astra_responsive_spacing( $menu_spacing, 'right', 'tablet' ), + ), + $selector . ' .main-header-menu .menu-item > .menu-link' => array( + 'color' => $menu_resp_color_tablet, + ), + $selector . ' .menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_tablet, + ), + $selector . ' .menu-item:hover > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_tablet, + 'background' => $menu_resp_bg_color_hover_tablet, + ), + $selector . ' .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_tablet, + ), + $selector . ' .menu-item.current-menu-item > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' . $selector . ' .current-menu-ancestor > .menu-link, ' . $selector . ' .current-menu-ancestor > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_tablet, + 'background' => $menu_resp_bg_color_active_tablet, + ), + $selector . ' .menu-item.current-menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_tablet, + ), + $mobile_selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' => array( + 'top' => $menu_spacing_tablet_top, + 'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'tablet' ), '-', '0.907', 'em' ), + ), + $selector . ' .menu-item-has-children > .menu-link:after' => array( + 'content' => 'unset', + ), + // Margin CSS. + $margin_selector => array( + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'tablet' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'tablet' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'tablet' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'tablet' ), + ), + ); + + $css_output_tablet[ $selector . ' .main-header-menu, ' . $selector . ' .main-header-menu .sub-menu' ] = astra_get_responsive_background_obj( $menu_resp_bg_color, 'tablet' ); + + $css_output_mobile = array( + + $mobile_selector => array( + 'font-size' => astra_get_font_css_value( $menu_font_size_mobile, $menu_font_size_mobile_unit ), + ), + $mobile_selector . ' .main-header-menu .menu-item > .menu-link' => array( + 'padding-top' => astra_responsive_spacing( $menu_spacing, 'top', 'mobile' ), + 'padding-bottom' => astra_responsive_spacing( $menu_spacing, 'bottom', 'mobile' ), + 'padding-left' => astra_responsive_spacing( $menu_spacing, 'left', 'mobile' ), + 'padding-right' => astra_responsive_spacing( $menu_spacing, 'right', 'mobile' ), + ), + $selector . ' .main-header-menu .menu-item > .menu-link' => array( + 'color' => $menu_resp_color_mobile, + ), + $selector . ' .menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_mobile, + ), + $selector . ' .menu-item:hover > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_mobile, + 'background' => $menu_resp_bg_color_hover_mobile, + ), + $selector . ' .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_mobile, + ), + $selector . ' .menu-item.current-menu-item > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' . $selector . ' .current-menu-ancestor > .menu-link, ' . $selector . ' .current-menu-ancestor > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_mobile, + 'background' => $menu_resp_bg_color_active_mobile, + ), + $selector . ' .menu-item.current-menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_mobile, + ), + $mobile_selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' => array( + 'top' => $menu_spacing_mobile_top, + 'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'mobile' ), '-', '0.907', 'em' ), + ), + // Margin CSS. + $margin_selector => array( + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'mobile' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'mobile' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'mobile' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'mobile' ), + ), + ); + + $css_output_mobile[ $selector . ' .main-header-menu, ' . $selector . ' .main-header-menu .sub-menu' ] = astra_get_responsive_background_obj( $menu_resp_bg_color, 'mobile' ); + + if ( true === $sub_menu_divider_toggle ) { + // Sub Menu Divider. + $css_output_desktop[ '.ast-desktop ' . $selector . ' .menu-item .sub-menu .menu-link' ] = array( + 'border-bottom-width' => $sub_menu_divider_size . 'px', + 'border-color' => $sub_menu_divider_color, + 'border-style' => 'solid', + ); + $css_output_desktop[ '.ast-desktop ' . $selector . ' .menu-item .sub-menu .menu-item:last-child .menu-link' ] = array( + 'border-bottom-width' => 0, + ); + } else { + + $css_output_desktop[ '.ast-desktop .ast-builder-menu-' . $index . ' .menu-item .sub-menu .menu-link' ] = array( + 'border-style' => 'none', + ); + } + + /* Parse CSS from array() */ + $css_output = astra_parse_css( $css_output_desktop ); + $css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() ); + $css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() ); + + $dynamic_css .= $css_output; + + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $selector ); + + } + + $dynamic_css .= astra_menu_hover_style_css(); + return $dynamic_css; +} + +/** + * Load Menu hover style static CSS if any one of the menu hover style is selected. + * + * @return string + * @since 3.5.0 + */ +function astra_menu_hover_style_css() { + $hover_style_flg = false; + $menu_hover_css = ''; + for ( $index = 1; $index <= Astra_Builder_Helper::$num_of_header_menu; $index++ ) { + if ( '' !== astra_get_option( 'header-menu' . $index . '-menu-hover-animation' ) ) { + $hover_style_flg = true; + } + } + + if ( true === $hover_style_flg ) { + $menu_hover_css = ' + .ast-desktop .ast-menu-hover-style-underline > .menu-item > .menu-link:before, + .ast-desktop .ast-menu-hover-style-overline > .menu-item > .menu-link:before { + content: ""; + position: absolute; + width: 100%; + right: 50%; + height: 1px; + background-color: transparent; + transform: scale(0, 0) translate(-50%, 0); + transition: transform .3s ease-in-out, color .0s ease-in-out; + } + + .ast-desktop .ast-menu-hover-style-underline > .menu-item:hover > .menu-link:before, + .ast-desktop .ast-menu-hover-style-overline > .menu-item:hover > .menu-link:before { + width: calc(100% - 1.2em); + background-color: currentColor; + transform: scale(1, 1) translate(50%, 0); + } + + .ast-desktop .ast-menu-hover-style-underline > .menu-item > .menu-link:before { + bottom: 0; + } + + .ast-desktop .ast-menu-hover-style-overline > .menu-item > .menu-link:before { + top: 0; + } + + .ast-desktop .ast-menu-hover-style-zoom > .menu-item > .menu-link:hover { + transition: all .3s ease; + transform: scale(1.2); + }'; + } + return Astra_Enqueue_Scripts::trim_css( $menu_hover_css ); +} diff --git a/inc/builder/type/header/mobile-menu/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/mobile-menu/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..5697634 --- /dev/null +++ b/inc/builder/type/header/mobile-menu/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +!function(){var n=AstraBuilderMenuData.tablet_break_point||768,a=AstraBuilderMenuData.mobile_break_point||544,e=".ast-builder-menu-mobile .main-navigation";astra_builder_visibility_css("section-header-mobile-menu",e,"block"),astra_generate_outside_font_family_css("astra-settings[header-mobile-menu-font-family]",e+" .menu-item > .menu-link"),astra_generate_font_weight_css("astra-settings[header-mobile-menu-font-family]","astra-settings[header-mobile-menu-font-weight]","font-weight",e+" .menu-item > .menu-link"),astra_css("astra-settings[header-mobile-menu-text-transform]","text-transform",e+" .menu-item > .menu-link"),astra_responsive_font_size("astra-settings[header-mobile-menu-font-size]",e+" .menu-item > .menu-link"),astra_css("astra-settings[header-mobile-menu-line-height]","line-height",e+" .menu-item > .menu-link, "+e+" .menu-item > .ast-menu-toggle"),astra_css("astra-settings[header-mobile-menu-letter-spacing]","letter-spacing",e+" .menu-item > .menu-link","px"),astra_color_responsive_css("astra-menu-color-preview","astra-settings[header-mobile-menu-color-responsive]","color",e+" .main-header-menu .menu-item > .menu-link"),astra_color_responsive_css("astra-menu-h-color-preview","astra-settings[header-mobile-menu-h-color-responsive]","color",e+" .menu-item:hover > .menu-link, "+e+" .inline-on-mobile .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-builder-toggle","astra-settings[header-mobile-menu-color-responsive]","color",e+" .menu-item > .ast-menu-toggle"),astra_color_responsive_css("astra-menu-h-toogle-color-preview","astra-settings[header-mobile-menu-h-color-responsive]","color",e+" .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-menu-active-color-preview","astra-settings[header-mobile-menu-a-color-responsive]","color",e+" .menu-item.current-menu-item > .menu-link, "+e+" .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle"),astra_apply_responsive_background_css("astra-settings[header-mobile-menu-bg-obj-responsive]",e+" .main-header-menu, "+e+" .main-header-menu .sub-menu","desktop"),astra_apply_responsive_background_css("astra-settings[header-mobile-menu-bg-obj-responsive]",e+" .main-header-menu, "+e+" .main-header-menu .sub-menu","tablet"),astra_apply_responsive_background_css("astra-settings[header-mobile-menu-bg-obj-responsive]",e+" .main-header-menu, "+e+" .main-header-menu .sub-menu","mobile"),astra_color_responsive_css("astra-menu-bg-preview","astra-settings[header-mobile-menu-h-bg-color-responsive]","background",e+" .menu-item:hover > .menu-link, "+e+" .inline-on-mobile .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-builder","astra-settings[header-mobile-menu-a-bg-color-responsive]","background",e+" .menu-item.current-menu-item > .menu-link, "+e+" .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle"),wp.customize("astra-settings[header-mobile-menu-submenu-item-b-size]",function(e){e.bind(function(e){var t=".ast-hfb-header .ast-builder-menu-mobile .main-navigation",i="";i+=t+" .main-header-menu {",i+="border-top-width: "+e+"px;",i+="} ",i+=t+" .menu-item .sub-menu .menu-link, "+t+" .menu-item .menu-link {",i+="border-bottom-width: "+e+"px;",i+="} ",astra_add_dynamic_css("header-mobile-menu-submenu-item-b-size",i)})}),wp.customize("astra-settings[header-mobile-menu-submenu-border]",function(e){e.bind(function(e){var t=".ast-builder-menu-mobile .sub-menu {";t+="border-top-width:"+e.top+"px;",t+="border-right-width:"+e.right+"px;",t+="border-left-width:"+e.left+"px;",t+="border-style: solid;",t+="border-bottom-width:"+e.bottom+"px;",t+="}",astra_add_dynamic_css("header-mobile-menu-submenu-border",t)})}),wp.customize("astra-settings[header-mobile-menu-menu-spacing]",function(e){e.bind(function(e){var t="";t+=".ast-hfb-header .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link {",t+="padding-left: "+e.desktop.left+e["desktop-unit"]+";",t+="padding-right: "+e.desktop.right+e["desktop-unit"]+";",t+="padding-top: "+e.desktop.top+e["desktop-unit"]+";",t+="padding-bottom: "+e.desktop.bottom+e["desktop-unit"]+";",t+="} ",t+=".ast-hfb-header .ast-builder-menu-mobile .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {",t+="top: "+e.desktop.top+e["desktop-unit"]+";",t+="right: calc( "+e.desktop.right+e["desktop-unit"]+" - 0.907em );",t+="} ",t+="@media (max-width: "+n+"px) {",t+=".ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link {",t+="padding-left: "+e.tablet.left+e["tablet-unit"]+";",t+="padding-right: "+e.tablet.right+e["tablet-unit"]+";",t+="padding-top: "+e.tablet.top+e["tablet-unit"]+";",t+="padding-bottom: "+e.tablet.bottom+e["tablet-unit"]+";",t+="} ",t+=".ast-hfb-header .ast-builder-menu-mobile .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {",t+="top: "+e.tablet.top+e["tablet-unit"]+";",t+="right: calc( "+e.tablet.right+e["tablet-unit"]+" - 0.907em );",t+="} ",t+="} ",t+="@media (max-width: "+a+"px) {",t+=".ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link {",t+="padding-left: "+e.mobile.left+e["mobile-unit"]+";",t+="padding-right: "+e.mobile.right+e["mobile-unit"]+";",t+="padding-top: "+e.mobile.top+e["mobile-unit"]+";",t+="padding-bottom: "+e.mobile.bottom+e["mobile-unit"]+";",t+="} ",t+=".ast-hfb-header .ast-builder-menu-mobile .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {",t+="top: "+e.mobile.top+e["mobile-unit"]+";",t+="right: calc( "+e.mobile.right+e["mobile-unit"]+" - 0.907em );",t+="} ",t+="} ",astra_add_dynamic_css("header-mobile-menu-menu-spacing-toggle-button",t)})}),wp.customize("astra-settings[section-header-mobile-menu-margin]",function(e){e.bind(function(e){var t=".ast-builder-menu-mobile .main-header-menu, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu",i="";i+=t+" {",i+="margin-left: "+e.desktop.left+e["desktop-unit"]+";",i+="margin-right: "+e.desktop.right+e["desktop-unit"]+";",i+="margin-top: "+e.desktop.top+e["desktop-unit"]+";",i+="margin-bottom: "+e.desktop.bottom+e["desktop-unit"]+";",i+="} ",i+="@media (max-width: "+n+"px) {",i+=t+" {",i+="margin-left: "+e.tablet.left+e["tablet-unit"]+";",i+="margin-right: "+e.tablet.right+e["tablet-unit"]+";",i+="margin-top: "+e.tablet.top+e["desktop-unit"]+";",i+="margin-bottom: "+e.tablet.bottom+e["desktop-unit"]+";",i+="} ",i+="} ",i+="@media (max-width: "+a+"px) {",i+=t+" {",i+="margin-left: "+e.mobile.left+e["mobile-unit"]+";",i+="margin-right: "+e.mobile.right+e["mobile-unit"]+";",i+="margin-top: "+e.mobile.top+e["desktop-unit"]+";",i+="margin-bottom: "+e.mobile.bottom+e["desktop-unit"]+";",i+="} ",i+="} ",astra_add_dynamic_css("section-header-mobile-menu-margin",i)})}),wp.customize("astra-settings[header-mobile-menu-submenu-item-b-color]",function(e){e.bind(function(e){var t,i=wp.customize("astra-settings[header-mobile-menu-submenu-item-border]").get(),n=wp.customize("astra-settings[header-mobile-menu-submenu-item-b-size]").get();""!=e&&1==i?(t="",t+=".ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .sub-menu .menu-link, .ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .menu-link",t+="{",t+="border-bottom-width:"+(!0===i?n+"px;":"0px;"),t+="border-color:"+e+";",t+="border-style: solid;",t+="}",t+=".ast-hfb-header .ast-builder-menu-mobile .main-navigation .main-header-menu",t+="{",t+="border-top-width:"+(!0===i?n+"px;":"0px;"),t+="border-color:"+e+";",t+="}",astra_add_dynamic_css("header-mobile-menu-submenu-item-b-color",t)):wp.customize.preview.send("refresh")})}),wp.customize("astra-settings[header-mobile-menu-submenu-item-border]",function(e){e.bind(function(e){var t,i=wp.customize("astra-settings[header-mobile-menu-submenu-item-b-color]").get(),n=wp.customize("astra-settings[header-mobile-menu-submenu-item-b-size]").get();!0===e?(t=".ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item .sub-menu .menu-link, .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item .menu-link",t+="{",t+="border-bottom-width:"+(!0===e?n+"px;":"0px;"),t+="border-color:"+i+";",t+="border-style: solid;",t+="}",t+=".ast-builder-menu-mobile .main-navigation .main-header-menu",t+="{",t+="border-top-width:"+(!0===e?n+"px;":"0px;"),t+="border-style: solid;",t+="border-color:"+i+";",t+="}",astra_add_dynamic_css("header-mobile-menu-submenu-item-border",t)):wp.customize.preview.send("refresh")})}),astra_css("astra-settings[header-mobile-menu-submenu-b-color]","border-color",e+" li.menu-item .sub-menu, "+e+" .main-header-menu"),astra_color_responsive_css("astra-builder-transparent-submenu","astra-settings[transparent-submenu-h-color-responsive]","color",".ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-item:hover > .menu-link")}(jQuery); \ No newline at end of file diff --git a/inc/builder/type/header/mobile-menu/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/mobile-menu/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..e809116 --- /dev/null +++ b/inc/builder/type/header/mobile-menu/assets/js/unminified/customizer-preview.js @@ -0,0 +1,324 @@ +/** + * 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 3.0.0 + */ + +( function( $ ) { + + var tablet_break_point = AstraBuilderMenuData.tablet_break_point || 768, + mobile_break_point = AstraBuilderMenuData.mobile_break_point || 544; + + var selector = '.ast-builder-menu-mobile .main-navigation'; + var section = 'section-header-mobile-menu'; + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( section, selector, 'block' ); + + /** + * Typography CSS. + */ + + // Menu Typography. + astra_generate_outside_font_family_css( + 'astra-settings[header-mobile-menu-font-family]', + selector + ' .menu-item > .menu-link' + ); + astra_generate_font_weight_css( + 'astra-settings[header-mobile-menu-font-family]', + 'astra-settings[header-mobile-menu-font-weight]', + 'font-weight', + selector + ' .menu-item > .menu-link' + ); + astra_css( + 'astra-settings[header-mobile-menu-text-transform]', + 'text-transform', + selector + ' .menu-item > .menu-link' + ); + astra_responsive_font_size( + 'astra-settings[header-mobile-menu-font-size]', + selector + ' .menu-item > .menu-link' + ); + astra_css( + 'astra-settings[header-mobile-menu-line-height]', + 'line-height', + selector + ' .menu-item > .menu-link, ' + selector + ' .menu-item > .ast-menu-toggle' + ); + astra_css( + 'astra-settings[header-mobile-menu-letter-spacing]', + 'letter-spacing', + selector + ' .menu-item > .menu-link', + 'px' + ); + + /** + * Color CSS. + */ + + /** + * Menu - Colors + */ + + // Menu - Normal Color + astra_color_responsive_css( + 'astra-menu-color-preview', + 'astra-settings[header-mobile-menu-color-responsive]', + 'color', + selector + ' .main-header-menu .menu-item > .menu-link' + ); + + // Menu - Hover Color + astra_color_responsive_css( + 'astra-menu-h-color-preview', + 'astra-settings[header-mobile-menu-h-color-responsive]', + 'color', + selector + ' .menu-item:hover > .menu-link, ' + selector + ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' + ); + + // Menu Toggle - Color + astra_color_responsive_css( + 'astra-builder-toggle', + 'astra-settings[header-mobile-menu-color-responsive]', + 'color', + selector + ' .menu-item > .ast-menu-toggle' + ); + + // Menu Toggle - Hover Color + astra_color_responsive_css( + 'astra-menu-h-toogle-color-preview', + 'astra-settings[header-mobile-menu-h-color-responsive]', + 'color', + selector + ' .menu-item:hover > .ast-menu-toggle' + ); + // Menu - Active Color + astra_color_responsive_css( + 'astra-menu-active-color-preview', + 'astra-settings[header-mobile-menu-a-color-responsive]', + 'color', + selector + ' .menu-item.current-menu-item > .menu-link, ' + selector + ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle' + ); + + // Menu - Normal Background + astra_apply_responsive_background_css( 'astra-settings[header-mobile-menu-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'desktop' ); + astra_apply_responsive_background_css( 'astra-settings[header-mobile-menu-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'tablet' ); + astra_apply_responsive_background_css( 'astra-settings[header-mobile-menu-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'mobile' ); + + // Menu - Hover Background + astra_color_responsive_css( + 'astra-menu-bg-preview', + 'astra-settings[header-mobile-menu-h-bg-color-responsive]', + 'background', + selector + ' .menu-item:hover > .menu-link, ' + selector + ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' + ); + + // Menu - Active Background + astra_color_responsive_css( + 'astra-builder', + 'astra-settings[header-mobile-menu-a-bg-color-responsive]', + 'background', + selector + ' .menu-item.current-menu-item > .menu-link, ' + selector + ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle' + ); + + /** + * Border CSS. + */ + + (function () { + + // Sub Menu - Divider Size. + wp.customize( 'astra-settings[header-mobile-menu-submenu-item-b-size]', function( value ) { + value.bind( function( borderSize ) { + var selector = '.ast-hfb-header .ast-builder-menu-mobile .main-navigation'; + var dynamicStyle = ''; + dynamicStyle += selector + ' .main-header-menu {'; + dynamicStyle += 'border-top-width: ' + borderSize + 'px;'; + dynamicStyle += '} '; + dynamicStyle += selector + ' .menu-item .sub-menu .menu-link, ' + selector + ' .menu-item .menu-link {'; + dynamicStyle += 'border-bottom-width: ' + borderSize + 'px;'; + dynamicStyle += '} '; + astra_add_dynamic_css( 'header-mobile-menu-submenu-item-b-size', dynamicStyle ); + } ); + } ); + + // Menu 1 > Sub Menu Border Size. + wp.customize( 'astra-settings[header-mobile-menu-submenu-border]', function( setting ) { + setting.bind( function( border ) { + + var dynamicStyle = '.ast-builder-menu-mobile .sub-menu {'; + dynamicStyle += 'border-top-width:' + border.top + 'px;'; + dynamicStyle += 'border-right-width:' + border.right + 'px;'; + dynamicStyle += 'border-left-width:' + border.left + 'px;'; + dynamicStyle += 'border-style: solid;'; + dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;'; + + dynamicStyle += '}'; + astra_add_dynamic_css( 'header-mobile-menu-submenu-border', dynamicStyle ); + + } ); + } ); + + // Menu Spacing - Menu 1. + wp.customize( 'astra-settings[header-mobile-menu-menu-spacing]', function( value ) { + value.bind( function( padding ) { + var dynamicStyle = ''; + dynamicStyle += '.ast-hfb-header .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link {'; + dynamicStyle += 'padding-left: ' + padding['desktop']['left'] + padding['desktop-unit'] + ';'; + dynamicStyle += 'padding-right: ' + padding['desktop']['right'] + padding['desktop-unit'] + ';'; + dynamicStyle += 'padding-top: ' + padding['desktop']['top'] + padding['desktop-unit'] + ';'; + dynamicStyle += 'padding-bottom: ' + padding['desktop']['bottom'] + padding['desktop-unit'] + ';'; + dynamicStyle += '} '; + + // Toggle top. + dynamicStyle += '.ast-hfb-header .ast-builder-menu-mobile .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {'; + dynamicStyle += 'top: ' + padding['desktop']['top'] + padding['desktop-unit'] + ';'; + dynamicStyle += 'right: calc( ' + padding['desktop']['right'] + padding['desktop-unit'] + ' - 0.907em );' + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += '.ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link {'; + dynamicStyle += 'padding-left: ' + padding['tablet']['left'] + padding['tablet-unit'] + ';'; + dynamicStyle += 'padding-right: ' + padding['tablet']['right'] + padding['tablet-unit'] + ';'; + dynamicStyle += 'padding-top: ' + padding['tablet']['top'] + padding['tablet-unit'] + ';'; + dynamicStyle += 'padding-bottom: ' + padding['tablet']['bottom'] + padding['tablet-unit'] + ';'; + dynamicStyle += '} '; + // Toggle top. + dynamicStyle += '.ast-hfb-header .ast-builder-menu-mobile .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {'; + dynamicStyle += 'top: ' + padding['tablet']['top'] + padding['tablet-unit'] + ';'; + dynamicStyle += 'right: calc( ' + padding['tablet']['right'] + padding['tablet-unit'] + ' - 0.907em );' + dynamicStyle += '} '; + + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += '.ast-header-break-point .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link {'; + dynamicStyle += 'padding-left: ' + padding['mobile']['left'] + padding['mobile-unit'] + ';'; + dynamicStyle += 'padding-right: ' + padding['mobile']['right'] + padding['mobile-unit'] + ';'; + dynamicStyle += 'padding-top: ' + padding['mobile']['top'] + padding['mobile-unit'] + ';'; + dynamicStyle += 'padding-bottom: ' + padding['mobile']['bottom'] + padding['mobile-unit'] + ';'; + dynamicStyle += '} '; + // Toggle top. + dynamicStyle += '.ast-hfb-header .ast-builder-menu-mobile .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {'; + dynamicStyle += 'top: ' + padding['mobile']['top'] + padding['mobile-unit'] + ';'; + dynamicStyle += 'right: calc( ' + padding['mobile']['right'] + padding['mobile-unit'] + ' - 0.907em );' + dynamicStyle += '} '; + + dynamicStyle += '} '; + + astra_add_dynamic_css( 'header-mobile-menu-menu-spacing-toggle-button', dynamicStyle ); + } ); + } ); + + // Margin - Menu 1. + wp.customize( 'astra-settings[section-header-mobile-menu-margin]', function( value ) { + value.bind( function( margin ) { + var selector = '.ast-builder-menu-mobile .main-header-menu, .ast-header-break-point .ast-builder-menu-mobile .main-header-menu'; + 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( 'section-header-mobile-menu-margin', dynamicStyle ); + } ); + } ); + + /** + * Header Menu 1 > Submenu border Color + */ + wp.customize('astra-settings[header-mobile-menu-submenu-item-b-color]', function (value) { + value.bind(function (color) { + var insideBorder = wp.customize('astra-settings[header-mobile-menu-submenu-item-border]').get(), + borderSize = wp.customize('astra-settings[header-mobile-menu-submenu-item-b-size]').get(); + if ('' != color) { + if ( true == insideBorder ) { + + var dynamicStyle = ''; + + dynamicStyle += '.ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .sub-menu .menu-link, .ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .menu-link'; + dynamicStyle += '{'; + dynamicStyle += 'border-bottom-width:' + ( ( true === insideBorder ) ? borderSize + 'px;' : '0px;' ); + dynamicStyle += 'border-color:' + color + ';'; + dynamicStyle += 'border-style: solid;'; + dynamicStyle += '}'; + dynamicStyle += '.ast-hfb-header .ast-builder-menu-mobile .main-navigation .main-header-menu'; + dynamicStyle += '{'; + dynamicStyle += 'border-top-width:' + ( ( true === insideBorder ) ? borderSize + 'px;' : '0px;' ); + dynamicStyle += 'border-color:' + color + ';'; + dynamicStyle += '}'; + + astra_add_dynamic_css('header-mobile-menu-submenu-item-b-color', dynamicStyle); + } else { + wp.customize.preview.send( 'refresh' ); + } + } else { + wp.customize.preview.send('refresh'); + } + }); + }); + + /** + * Header Menu 1 > Submenu border Color + */ + wp.customize( 'astra-settings[header-mobile-menu-submenu-item-border]', function( value ) { + value.bind( function( border ) { + var color = wp.customize( 'astra-settings[header-mobile-menu-submenu-item-b-color]' ).get(), + borderSize = wp.customize('astra-settings[header-mobile-menu-submenu-item-b-size]').get(); + + if( true === border ) { + var dynamicStyle = '.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item .sub-menu .menu-link, .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item .menu-link'; + dynamicStyle += '{'; + dynamicStyle += 'border-bottom-width:' + ( ( true === border ) ? borderSize + 'px;' : '0px;' ); + dynamicStyle += 'border-color:' + color + ';'; + dynamicStyle += 'border-style: solid;'; + dynamicStyle += '}'; + dynamicStyle += '.ast-builder-menu-mobile .main-navigation .main-header-menu'; + dynamicStyle += '{'; + dynamicStyle += 'border-top-width:' + ( ( true === border ) ? borderSize + 'px;' : '0px;' ); + dynamicStyle += 'border-style: solid;'; + dynamicStyle += 'border-color:' + color + ';'; + dynamicStyle += '}'; + + astra_add_dynamic_css( 'header-mobile-menu-submenu-item-border', dynamicStyle ); + } else { + wp.customize.preview.send( 'refresh' ); + } + + } ); + } ); + })(); + + + // Sub Menu - Border Color. + astra_css( + 'astra-settings[header-mobile-menu-submenu-b-color]', + 'border-color', + selector + ' li.menu-item .sub-menu, ' + selector + ' .main-header-menu' + ); + + // Transparent header > Submenu link hover color. + astra_color_responsive_css( 'astra-builder-transparent-submenu', 'astra-settings[transparent-submenu-h-color-responsive]', 'color', '.ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-item:hover > .menu-link' ); + +} )( jQuery ); diff --git a/inc/builder/type/header/mobile-menu/class-astra-mobile-menu-component-loader.php b/inc/builder/type/header/mobile-menu/class-astra-mobile-menu-component-loader.php new file mode 100644 index 0000000..f14a3a5 --- /dev/null +++ b/inc/builder/type/header/mobile-menu/class-astra-mobile-menu-component-loader.php @@ -0,0 +1,52 @@ +). + * + * @since 3.0.0 + * @var Array + */ + $menu_classes = apply_filters( 'astra_primary_menu_classes', array( 'main-header-menu', 'ast-nav-menu', 'ast-flex', $submenu_class, $stack_on_mobile_class ) ); + + $items_wrap = ''; + + // Fallback Menu if primary menu not set. + $fallback_menu_args = array( + 'theme_location' => $theme_location, + 'menu_id' => 'ast-hf-mobile-menu', + 'menu_class' => 'main-navigation', + 'container' => 'div', + 'before' => '', + 'walker' => new Astra_Walker_Page(), + ); + + // To add default alignment for navigation which can be added through any third party plugin. + // Do not add any CSS from theme except header alignment. + echo '
'; + + if ( is_customize_preview() ) { + Astra_Builder_UI_Controller::render_customizer_edit_button(); + } + if ( has_nav_menu( $theme_location ) ) { + wp_nav_menu( + array( + 'menu_id' => 'ast-hf-mobile-menu', + 'menu_class' => esc_attr( implode( ' ', $menu_classes ) ), + 'container' => 'div', + 'container_class' => 'main-header-bar-navigation', + 'items_wrap' => $items_wrap, + 'theme_location' => $theme_location, + ) + ); + } else { + echo '
'; + echo ''; + echo '
'; + } + echo '
'; + } +} + +/** + * Kicking this off by creating an object. + */ +new Astra_Mobile_Menu_Component(); diff --git a/inc/builder/type/header/mobile-menu/dynamic-css/dynamic.css.php b/inc/builder/type/header/mobile-menu/dynamic-css/dynamic.css.php new file mode 100644 index 0000000..4943f82 --- /dev/null +++ b/inc/builder/type/header/mobile-menu/dynamic-css/dynamic.css.php @@ -0,0 +1,293 @@ + .menu-link' => array( + 'font-family' => astra_get_font_family( $menu_font_family ), + 'font-weight' => esc_attr( $menu_font_weight ), + 'line-height' => esc_attr( $menu_line_height ), + 'text-transform' => esc_attr( $menu_text_transform ), + ), + $selector => array( + 'font-size' => astra_get_font_css_value( $menu_font_size_desktop, $menu_font_size_desktop_unit ), + ), + $selector . ' .main-header-menu .menu-item > .menu-link' => array( + 'color' => $menu_resp_color_desktop, + 'padding-top' => astra_responsive_spacing( $menu_spacing, 'top', 'desktop' ), + 'padding-bottom' => astra_responsive_spacing( $menu_spacing, 'bottom', 'desktop' ), + 'padding-left' => astra_responsive_spacing( $menu_spacing, 'left', 'desktop' ), + 'padding-right' => astra_responsive_spacing( $menu_spacing, 'right', 'desktop' ), + ), + $selector . ' .main-header-menu .menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_desktop, + ), + $selector . ' .menu-item:hover > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_desktop, + 'background' => $menu_resp_bg_color_hover_desktop, + ), + $selector . ' .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_desktop, + ), + $selector . ' .menu-item.current-menu-item > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' . $selector . ' .menu-item.current-menu-ancestor > .menu-link, ' . $selector . ' .menu-item.current-menu-ancestor > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_desktop, + 'background' => $menu_resp_bg_color_active_desktop, + ), + $selector . ' .menu-item.current-menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_desktop, + ), + $selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' => array( + 'top' => $menu_spacing_desktop_top, + 'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'desktop' ), '-', '0.907', 'em' ), + ), + $selector . ' .menu-item-has-children > .menu-link:after' => array( + 'content' => 'unset', + ), + // Margin CSS. + $margin_selector => array( + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'desktop' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'desktop' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'desktop' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'desktop' ), + ), + ); + + $css_output_desktop[ $selector . ' .main-header-menu, ' . $selector . ' .main-header-menu .sub-menu' ] = astra_get_responsive_background_obj( $menu_resp_bg_color, 'desktop' ); + + $css_output_tablet = array( + + $selector => array( + 'font-size' => astra_get_font_css_value( $menu_font_size_tablet, $menu_font_size_tablet_unit ), + ), + $selector . ' .main-header-menu .menu-item > .menu-link' => array( + 'color' => $menu_resp_color_tablet, + 'padding-top' => astra_responsive_spacing( $menu_spacing, 'top', 'tablet' ), + 'padding-bottom' => astra_responsive_spacing( $menu_spacing, 'bottom', 'tablet' ), + 'padding-left' => astra_responsive_spacing( $menu_spacing, 'left', 'tablet' ), + 'padding-right' => astra_responsive_spacing( $menu_spacing, 'right', 'tablet' ), + ), + $selector . ' .menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_tablet, + ), + $selector . ' .menu-item:hover > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_tablet, + 'background' => $menu_resp_bg_color_hover_tablet, + ), + $selector . ' .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_tablet, + ), + $selector . ' .menu-item.current-menu-item > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' . $selector . ' .menu-item.current-menu-ancestor > .menu-link, ' . $selector . ' .menu-item.current-menu-ancestor > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_tablet, + 'background' => $menu_resp_bg_color_active_tablet, + ), + $selector . ' .menu-item.current-menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_tablet, + ), + $selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' => array( + 'top' => $menu_spacing_tablet_top, + 'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'tablet' ), '-', '0.907', 'em' ), + ), + $selector . ' .menu-item-has-children > .menu-link:after' => array( + 'content' => 'unset', + ), + // Margin CSS. + $margin_selector => array( + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'tablet' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'tablet' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'tablet' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'tablet' ), + ), + ); + + $css_output_tablet[ $selector . ' .main-header-menu, ' . $selector . ' .main-header-menu .sub-menu' ] = astra_get_responsive_background_obj( $menu_resp_bg_color, 'tablet' ); + + $css_output_mobile = array( + + $selector => array( + 'font-size' => astra_get_font_css_value( $menu_font_size_mobile, $menu_font_size_mobile_unit ), + ), + $selector . ' .main-header-menu .menu-item > .menu-link' => array( + 'color' => $menu_resp_color_mobile, + 'padding-top' => astra_responsive_spacing( $menu_spacing, 'top', 'mobile' ), + 'padding-bottom' => astra_responsive_spacing( $menu_spacing, 'bottom', 'mobile' ), + 'padding-left' => astra_responsive_spacing( $menu_spacing, 'left', 'mobile' ), + 'padding-right' => astra_responsive_spacing( $menu_spacing, 'right', 'mobile' ), + ), + $selector . ' .menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_mobile, + ), + $selector . ' .menu-item:hover > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_mobile, + 'background' => $menu_resp_bg_color_hover_mobile, + ), + $selector . ' .menu-item:hover > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_hover_mobile, + ), + $selector . ' .menu-item.current-menu-item > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' . $selector . ' .menu-item.current-menu-ancestor > .menu-link, ' . $selector . ' .menu-item.current-menu-ancestor > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_mobile, + 'background' => $menu_resp_bg_color_active_mobile, + ), + $selector . ' .menu-item.current-menu-item > .ast-menu-toggle' => array( + 'color' => $menu_resp_color_active_mobile, + ), + $selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' => array( + 'top' => $menu_spacing_mobile_top, + 'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'mobile' ), '-', '0.907', 'em' ), + ), + // Margin CSS. + $margin_selector => array( + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'mobile' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'mobile' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'mobile' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'mobile' ), + ), + ); + + $css_output_mobile[ $selector . ' .main-header-menu, ' . $selector . ' .main-header-menu .sub-menu' ] = astra_get_responsive_background_obj( $menu_resp_bg_color, 'mobile' ); + + if ( true === $sub_menu_divider_toggle ) { + + $css_output_desktop_submenu = array( + '.ast-hfb-header ' . $selector . ' .main-header-menu, .ast-hfb-header ' . $selector . ' .main-header-menu, .ast-hfb-header .ast-mobile-header-content ' . $selector . ' .main-header-menu, .ast-hfb-header .ast-mobile-popup-content ' . $selector . ' .main-header-menu' => array( + 'border-top-width' => $sub_menu_divider_size . 'px', + 'border-color' => $sub_menu_divider_color, + ), + '.ast-hfb-header ' . $selector . ' .menu-item .sub-menu .menu-link, .ast-hfb-header ' . $selector . ' .menu-item .menu-link, .ast-hfb-header ' . $selector . ' .menu-item .sub-menu .menu-link, .ast-hfb-header ' . $selector . ' .menu-item .menu-link, .ast-hfb-header .ast-mobile-header-content ' . $selector . ' .menu-item .sub-menu .menu-link, .ast-hfb-header .ast-mobile-header-content ' . $selector . ' .menu-item .menu-link, .ast-hfb-header .ast-mobile-popup-content ' . $selector . ' .menu-item .sub-menu .menu-link, .ast-hfb-header .ast-mobile-popup-content ' . $selector . ' .menu-item .menu-link' => array( + 'border-bottom-width' => $sub_menu_divider_size . 'px', + 'border-color' => $sub_menu_divider_color, + 'border-style' => 'solid', + ), + ); + + } else { + + $css_output_desktop_submenu = array( + + '.ast-hfb-header .ast-builder-menu-mobile .main-header-menu, .ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .menu-link, .ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .sub-menu .menu-link' => array( + 'border-style' => 'none', + ), + ); + } + + $css_output_desktop_submenu[ $selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' ] = array( + 'top' => $menu_spacing_desktop_top, + 'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'desktop' ), '-', '0.907', 'em' ), + ); + + $css_output = astra_parse_css( $css_output_desktop ); + $css_output .= astra_parse_css( $css_output_desktop_submenu ); + $css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() ); + $css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() ); + + $dynamic_css .= $css_output; + + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $selector, 'block' ); + + return $dynamic_css; +} diff --git a/inc/builder/type/header/mobile-trigger/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/mobile-trigger/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..40c6536 --- /dev/null +++ b/inc/builder/type/header/mobile-trigger/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +!function(){var i=astraBuilderPreview.tablet_break_point||768,a=astraBuilderPreview.mobile_break_point||544;astra_css("astra-settings[mobile-header-toggle-btn-color]","fill",'[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg'),astra_css("astra-settings[mobile-header-toggle-btn-color]","color",'[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-wrap .mobile-menu'),astra_css("astra-settings[mobile-header-toggle-icon-size]","width",'[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg',"px"),astra_css("astra-settings[mobile-header-toggle-icon-size]","height",'[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg',"px"),astra_css("astra-settings[mobile-header-toggle-btn-bg-color]","background",'[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-fill'),wp.customize("astra-settings[mobile-header-toggle-btn-border-size]",function(t){t.bind(function(t){var e='[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.main-header-menu-toggle {';e+="border-top-width:"+t.top+"px;",e+="border-right-width:"+t.right+"px;",e+="border-left-width:"+t.left+"px;",e+="border-bottom-width:"+t.bottom+"px;",e+="} ",astra_add_dynamic_css("astra-settings[mobile-header-toggle-btn-border-size]",e)})}),astra_css("astra-settings[mobile-header-toggle-border-radius]","border-radius",'[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.main-header-menu-toggle',"px"),astra_css("astra-settings[mobile-header-toggle-border-color]","border-color",'[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-outline, [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-fill'),wp.customize("astra-settings[section-header-mobile-trigger-margin]",function(t){t.bind(function(t){var e,o;""==t.desktop.bottom&&""==t.desktop.top&&""==t.desktop.left&&""==t.desktop.right&&""==t.tablet.bottom&&""==t.tablet.top&&""==t.tablet.left&&""==t.tablet.right&&""==t.mobile.bottom&&""==t.mobile.top&&""==t.mobile.left&&""==t.mobile.right||(o="",o+=(e='[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.main-header-menu-toggle')+" {",o+="margin-left: "+t.desktop.left+t["desktop-unit"]+";",o+="margin-right: "+t.desktop.right+t["desktop-unit"]+";",o+="margin-top: "+t.desktop.top+t["desktop-unit"]+";",o+="margin-bottom: "+t.desktop.bottom+t["desktop-unit"]+";",o+="} ",o+="@media (max-width: "+i+"px) {",o+=e+" {",o+="margin-left: "+t.tablet.left+t["tablet-unit"]+";",o+="margin-right: "+t.tablet.right+t["tablet-unit"]+";",o+="margin-top: "+t.tablet.top+t["desktop-unit"]+";",o+="margin-bottom: "+t.tablet.bottom+t["desktop-unit"]+";",o+="} ",o+="} ",o+="@media (max-width: "+a+"px) {",o+=e+" {",o+="margin-left: "+t.mobile.left+t["mobile-unit"]+";",o+="margin-right: "+t.mobile.right+t["mobile-unit"]+";",o+="margin-top: "+t.mobile.top+t["desktop-unit"]+";",o+="margin-bottom: "+t.mobile.bottom+t["desktop-unit"]+";",o+="} ",o+="} ",astra_add_dynamic_css("header-mobile-trigger-margin",o))})}),astra_css("astra-settings[mobile-header-label-font-size]","font-size",'[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-wrap .mobile-menu',"px")}(jQuery); \ No newline at end of file diff --git a/inc/builder/type/header/mobile-trigger/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/mobile-trigger/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..16c2454 --- /dev/null +++ b/inc/builder/type/header/mobile-trigger/assets/js/unminified/customizer-preview.js @@ -0,0 +1,128 @@ +/** + * 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 3.0.0 + */ + +( function( $ ) { + + var tablet_break_point = astraBuilderPreview.tablet_break_point || 768, + mobile_break_point = astraBuilderPreview.mobile_break_point || 544; + + // Trigger Icon Color. + astra_css( + 'astra-settings[mobile-header-toggle-btn-color]', + 'fill', + '[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg' + ); + + // Trigger Label Color. + astra_css( + 'astra-settings[mobile-header-toggle-btn-color]', + 'color', + '[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-wrap .mobile-menu' + ); + + // Trigger Icon Width. + astra_css( + 'astra-settings[mobile-header-toggle-icon-size]', + 'width', + '[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg', + 'px' + ); + + // Trigger Icon Height. + astra_css( + 'astra-settings[mobile-header-toggle-icon-size]', + 'height', + '[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg', + 'px' + ); + + // Trigger Button Background Color. + astra_css( + 'astra-settings[mobile-header-toggle-btn-bg-color]', + 'background', + '[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-fill' + ); + + // Border Size for Trigger Button. + wp.customize( 'astra-settings[mobile-header-toggle-btn-border-size]', function( setting ) { + setting.bind( function( border ) { + var dynamicStyle = '[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.main-header-menu-toggle {'; + dynamicStyle += 'border-top-width:' + border.top + 'px;'; + dynamicStyle += 'border-right-width:' + border.right + 'px;'; + dynamicStyle += 'border-left-width:' + border.left + 'px;'; + dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;'; + dynamicStyle += '} '; + astra_add_dynamic_css( 'astra-settings[mobile-header-toggle-btn-border-size]', dynamicStyle ); + } ); + } ); + + // Border Radius. + astra_css( + 'astra-settings[mobile-header-toggle-border-radius]', + 'border-radius', + '[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.main-header-menu-toggle', + 'px' + ); + + // Border Color. + astra_css( + 'astra-settings[mobile-header-toggle-border-color]', + 'border-color', + '[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-outline, [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-fill' + ); + + // Margin. + wp.customize( 'astra-settings[section-header-mobile-trigger' + '-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 selector = '[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.main-header-menu-toggle'; + 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( 'header-mobile-trigger-margin', dynamicStyle ); + } + } ); + } ); + + // Trigger Typography. + astra_css( + 'astra-settings[mobile-header-label-font-size]', + 'font-size', + '[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-wrap .mobile-menu', + 'px' + ); + +} )( jQuery ); diff --git a/inc/builder/type/header/mobile-trigger/class-astra-mobile-trigger-loader.php b/inc/builder/type/header/mobile-trigger/class-astra-mobile-trigger-loader.php new file mode 100644 index 0000000..ccfcba1 --- /dev/null +++ b/inc/builder/type/header/mobile-trigger/class-astra-mobile-trigger-loader.php @@ -0,0 +1,54 @@ + array( + 'width' => astra_get_css_value( $icon_size, 'px' ), + 'height' => astra_get_css_value( $icon_size, 'px' ), + 'fill' => $icon_color, + ), + $selector . ' .ast-button-wrap .mobile-menu-wrap .mobile-menu' => array( + // Color. + 'color' => $icon_color, + + // Typography. + 'font-size' => astra_get_css_value( $font_size, 'px' ), + ), + $margin_selector => array( + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'desktop' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'desktop' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'desktop' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'desktop' ), + ), + ); + + // Execute all cases in customizer preview. + $is_customizer = false; + if ( is_customize_preview() ) { + $is_customizer = true; + } + switch ( $style ) { + case 'minimal': // phpcs:ignore PSR2.ControlStructures.SwitchDeclaration.TerminatingComment + $css_output_minimal = array( + $selector . ' .ast-button-wrap .ast-mobile-menu-trigger-minimal' => array( + // Color & Border. + 'color' => esc_attr( $icon_color ), + 'border' => 'none', + 'background' => 'transparent', + ), + ); + $dynamic_css .= astra_parse_css( $css_output_minimal ); + if ( false === $is_customizer ) { + break; + } + + case 'fill': // phpcs:ignore PSR2.ControlStructures.SwitchDeclaration.TerminatingComment + $css_output_fill = array( + $selector . ' .ast-button-wrap .ast-mobile-menu-trigger-fill' => array( + // Color & Border. + 'color' => esc_attr( $icon_color ), + 'border' => 'none', + 'background' => esc_attr( $trigger_bg ), + 'border-radius' => astra_get_css_value( $trigger_border_radius, 'px' ), + ), + ); + $dynamic_css .= astra_parse_css( $css_output_fill ); + if ( false === $is_customizer ) { + break; + } + + case 'outline': // phpcs:ignore PSR2.ControlStructures.SwitchDeclaration.TerminatingComment + $css_output_outline = array( + $selector . ' .ast-button-wrap .ast-mobile-menu-trigger-outline' => array( + 'background' => 'transparent', + 'color' => esc_attr( $icon_color ), + 'border-top-width' => astra_get_css_value( $trigger_border_width_top, 'px' ), + 'border-bottom-width' => astra_get_css_value( $trigger_border_width_bottom, 'px' ), + 'border-right-width' => astra_get_css_value( $trigger_border_width_right, 'px' ), + 'border-left-width' => astra_get_css_value( $trigger_border_width_left, 'px' ), + 'border-style' => 'solid', + 'border-color' => $trigger_border_color, + 'border-radius' => astra_get_css_value( $trigger_border_radius, 'px' ), + ), + ); + $dynamic_css .= astra_parse_css( $css_output_outline ); + if ( false === $is_customizer ) { + break; + } + + default: + $dynamic_css .= ''; + break; + + } + + // Tablet CSS. + $css_output_tablet = array( + + $margin_selector => array( + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'tablet' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'tablet' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'tablet' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'tablet' ), + ), + ); + + // Mobile CSS. + $css_output_mobile = array( + + $margin_selector => array( + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'mobile' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'mobile' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'mobile' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'mobile' ), + ), + ); + + /* Parse CSS from array() */ + $css_output = astra_parse_css( $css_output ); + $css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() ); + $css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() ); + + + $dynamic_css .= $css_output; + + return $dynamic_css; +} diff --git a/inc/builder/type/header/off-canvas/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/off-canvas/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..8b9f45b --- /dev/null +++ b/inc/builder/type/header/off-canvas/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +!function(){var a=astraBuilderPreview.tablet_break_point||768,o=astraBuilderPreview.mobile_break_point||544;astra_css("astra-settings[off-canvas-close-color]","color",".ast-mobile-popup-drawer.active .menu-toggle-close"),wp.customize("astra-settings[off-canvas-background]",function(e){e.bind(function(e){astra_background_obj_css(wp.customize,e,"off-canvas-background"," .ast-mobile-popup-drawer.active .ast-mobile-popup-inner, .ast-mobile-header-wrap .ast-mobile-header-content, .ast-desktop-header-content { {{css}} }")})}),wp.customize("astra-settings[off-canvas-inner-spacing]",function(e){e.bind(function(e){var t="";""!=e&&(t+=".ast-mobile-popup-content > *, .ast-mobile-header-content > *, .ast-desktop-popup-content > *, .ast-desktop-header-content > * {",t+="padding-top: "+e+"px;",t+="padding-bottom: "+e+"px;",t+="} "),astra_add_dynamic_css("off-canvas-inner-spacing",t)})}),wp.customize("astra-settings[mobile-header-type]",function(e){e.bind(function(e){var t=document.querySelectorAll("#ast-mobile-header"),a=document.querySelectorAll("#ast-desktop-header"),o=e,s=void 0!==wp.customize._value["astra-settings[off-canvas-slide]"]?wp.customize._value["astra-settings[off-canvas-slide]"]._value:"right",e="";"off-canvas"===o?e="left"===s?"ast-mobile-popup-left":"ast-mobile-popup-right":"full-width"===o&&(e="ast-mobile-popup-full-width"),jQuery(".ast-mobile-popup-drawer").removeClass("ast-mobile-popup-left"),jQuery(".ast-mobile-popup-drawer").removeClass("ast-mobile-popup-right"),jQuery(".ast-mobile-popup-drawer").removeClass("ast-mobile-popup-full-width"),jQuery(".ast-mobile-popup-drawer").addClass(e),"full-width"===o&&(o="off-canvas");for(var n=0;n astra_get_background_obj( $off_canvas_background ), + + '.ast-mobile-header-wrap .ast-mobile-header-content, .ast-desktop-header-content' => astra_get_background_obj( $off_canvas_background ), + '.ast-mobile-popup-drawer.active .ast-desktop-popup-content, .ast-mobile-popup-drawer.active .ast-mobile-popup-content' => array( + // Padding CSS. + 'padding-top' => astra_responsive_spacing( $padding, 'top', 'desktop' ), + 'padding-bottom' => astra_responsive_spacing( $padding, 'bottom', 'desktop' ), + 'padding-left' => astra_responsive_spacing( $padding, 'left', 'desktop' ), + 'padding-right' => astra_responsive_spacing( $padding, 'right', 'desktop' ), + ), + '.ast-mobile-popup-content > *, .ast-mobile-header-content > *, .ast-desktop-popup-content > *, .ast-desktop-header-content > *' => array( + 'padding-top' => astra_get_css_value( $inner_spacing, 'px' ), + 'padding-bottom' => astra_get_css_value( $inner_spacing, 'px' ), + ), + '.content-align-' . esc_attr( $offcanvas_content_alignment ) . ' .ast-builder-layout-element' => array( + 'justify-content' => esc_attr( $offcanvas_content_alignment ), + ), + '.content-align-' . esc_attr( $offcanvas_content_alignment ) . ' .main-header-menu' => array( + 'text-align' => esc_attr( $menu_content_alignment ), + ), + ); + + $css_output[ $selector . ' .ast-mobile-popup-drawer.active .menu-toggle-close' ]['color'] = $off_canvas_close_color; + + /* Parse CSS from array() */ + $css_output = astra_parse_css( $css_output ); + + // Tablet CSS. + $css_output_tablet = array( + '.ast-mobile-popup-drawer.active .ast-desktop-popup-content, .ast-mobile-popup-drawer.active .ast-mobile-popup-content' => array( + // Padding CSS. + 'padding-top' => astra_responsive_spacing( $padding, 'top', 'tablet' ), + 'padding-bottom' => astra_responsive_spacing( $padding, 'bottom', 'tablet' ), + 'padding-left' => astra_responsive_spacing( $padding, 'left', 'tablet' ), + 'padding-right' => astra_responsive_spacing( $padding, 'right', 'tablet' ), + ), + ); + + $css_output_mobile = array( + + '.ast-mobile-popup-drawer.active .ast-desktop-popup-content, .ast-mobile-popup-drawer.active .ast-mobile-popup-content' => array( + // Padding CSS. + 'padding-top' => astra_responsive_spacing( $padding, 'top', 'mobile' ), + 'padding-bottom' => astra_responsive_spacing( $padding, 'bottom', 'mobile' ), + 'padding-left' => astra_responsive_spacing( $padding, 'left', 'mobile' ), + 'padding-right' => astra_responsive_spacing( $padding, 'right', 'mobile' ), + ), + ); + + $css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() ); + $css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() ); + + $dynamic_css .= $css_output; + + return $dynamic_css; +} + +/** + * Add static CSS for Off-canvas flyout. + * + * @since 3.4.0 + * @return string. + */ +function astra_off_canvas_static_css() { + $off_canvas_css = ' + .ast-off-canvas-active body.ast-main-header-nav-open { + overflow: hidden; + } + .ast-mobile-popup-drawer .ast-mobile-popup-overlay { + background-color: rgba(0, 0, 0, 0.4); + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + visibility: hidden; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + .ast-mobile-popup-drawer .ast-mobile-popup-header { + -js-display: flex; + display: flex; + justify-content: flex-end; + min-height: calc( 1.2em + 24px); + } + .ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close { + background: transparent; + border: 0; + font-size: 24px; + line-height: 1; + padding: .6em; + color: inherit; + -js-display: flex; + display: flex; + box-shadow: none; + } + .ast-mobile-popup-drawer.ast-mobile-popup-full-width .ast-mobile-popup-inner { + max-width: none; + transition: transform 0s ease-in, opacity 0.2s ease-in; + } + .ast-mobile-popup-drawer.active { + left: 0; + opacity: 1; + right: 0; + z-index: 100000; + transition: opacity 0.25s ease-out; + } + .ast-mobile-popup-drawer.active .ast-mobile-popup-overlay { + opacity: 1; + cursor: pointer; + visibility: visible; + } + body.admin-bar .ast-mobile-popup-drawer, body.admin-bar .ast-mobile-popup-drawer .ast-mobile-popup-inner { + top: 32px; + } + body.admin-bar.ast-primary-sticky-header-active .ast-mobile-popup-drawer, body.admin-bar.ast-primary-sticky-header-active .ast-mobile-popup-drawer .ast-mobile-popup-inner { + top: 0px; + } + @media (max-width: 782px) { + body.admin-bar .ast-mobile-popup-drawer,body.admin-bar .ast-mobile-popup-drawer .ast-mobile-popup-inner { + top: 46px; + } + } + .ast-mobile-popup-content > *, + .ast-desktop-popup-content > *{ + padding: 10px 0; + height: auto; + } + + .ast-mobile-popup-content > *:first-child, + .ast-desktop-popup-content > *:first-child{ + padding-top: 10px; + } + + .ast-mobile-popup-content > .ast-builder-menu, + .ast-desktop-popup-content > .ast-builder-menu{ + padding-top: 0; + } + .ast-mobile-popup-content > *:last-child, + .ast-desktop-popup-content > *:last-child { + padding-bottom: 0; + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-icon, + .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children .sub-menu, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-icon { + display: none; + } + + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.ast-inline-search label, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.ast-inline-search label { + width: 100%; + } + .ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu, .ast-mobile-popup-content .ast-builder-menu-mobile .main-header-menu .sub-menu { + background-color: transparent; + } + .ast-mobile-popup-content .ast-icon svg { + height: .85em; + width: .95em; + margin-top: 15px; + } + .ast-mobile-popup-content .ast-icon.icon-search svg { + margin-top: 0; + } + .ast-desktop .ast-desktop-popup-content .astra-menu-animation-slide-up > .menu-item > .sub-menu, + .ast-desktop .ast-desktop-popup-content .astra-menu-animation-slide-up > .menu-item .menu-item > .sub-menu, + .ast-desktop .ast-desktop-popup-content .astra-menu-animation-slide-down > .menu-item > .sub-menu, + .ast-desktop .ast-desktop-popup-content .astra-menu-animation-slide-down > .menu-item .menu-item > .sub-menu, + .ast-desktop .ast-desktop-popup-content .astra-menu-animation-fade > .menu-item > .sub-menu, + .ast-mobile-popup-drawer.show, + .ast-desktop .ast-desktop-popup-content .astra-menu-animation-fade > .menu-item .menu-item > .sub-menu{ + opacity: 1; + visibility: visible; + }'; + + if ( is_rtl() ) { + $off_canvas_css .= ' + .ast-mobile-popup-drawer { + position: fixed; + top: 0; + bottom: 0; + right: -99999rem; + left: 99999rem; + transition: opacity 0.25s ease-in, right 0s 0.25s, left 0s 0.25s; + opacity: 0; + } + .ast-mobile-popup-drawer .ast-mobile-popup-inner { + width: 100%; + transform: translateX(100%); + max-width: 90%; + left: 0; + top: 0; + background: #fafafa; + color: #3a3a3a; + bottom: 0; + opacity: 0; + position: fixed; + box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1); + -js-display: flex; + display: flex; + flex-direction: column; + transition: transform 0.2s ease-in, opacity 0.2s ease-in; + overflow-y:auto; + overflow-x:hidden; + } + .ast-mobile-popup-drawer.ast-mobile-popup-left .ast-mobile-popup-inner { + transform: translateX(-100%); + left: auto; + right: 0; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-popup-drawer .main-header-bar-navigation ul .menu-item .sub-menu .menu-link { + padding-right: 30px; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-popup-drawer .main-header-bar-navigation .sub-menu .menu-item .menu-item .menu-link { + padding-right: 40px; + } + .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle { + left: calc( 20px - 0.907em); + } + .ast-mobile-popup-drawer.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle { + right: calc( 20px - 0.907em); + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon, + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.slide-search, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.slide-search { + width: 100%; + position: relative; + display: block; + left: auto; + transform: none; + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.slide-search .search-form, + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-form, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.slide-search .search-form, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-form { + left: 0; + visibility: visible; + opacity: 1; + position: relative; + top: auto; + transform: none; + padding: 0; + display: block; + overflow: hidden; + } + + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-field, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-field { + width: 100%; + padding-left: 5.5em; + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-submit, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-submit { + display: block; + position: absolute; + height: 100%; + top: 0; + left: 0; + padding: 0 1em; + border-radius: 0; + }'; + } else { + $off_canvas_css .= ' + .ast-mobile-popup-drawer { + position: fixed; + top: 0; + bottom: 0; + left: -99999rem; + right: 99999rem; + transition: opacity 0.25s ease-in, left 0s 0.25s, right 0s 0.25s; + opacity: 0; + } + .ast-mobile-popup-drawer .ast-mobile-popup-inner { + width: 100%; + transform: translateX(100%); + max-width: 90%; + right: 0; + top: 0; + background: #fafafa; + color: #3a3a3a; + bottom: 0; + opacity: 0; + position: fixed; + box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1); + -js-display: flex; + display: flex; + flex-direction: column; + transition: transform 0.2s ease-in, opacity 0.2s ease-in; + overflow-y:auto; + overflow-x:hidden; + } + .ast-mobile-popup-drawer.ast-mobile-popup-left .ast-mobile-popup-inner { + transform: translateX(-100%); + right: auto; + left: 0; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-popup-drawer .main-header-bar-navigation ul .menu-item .sub-menu .menu-link { + padding-left: 30px; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-popup-drawer .main-header-bar-navigation .sub-menu .menu-item .menu-item .menu-link { + padding-left: 40px; + } + .ast-mobile-popup-drawer .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle { + right: calc( 20px - 0.907em); + } + .ast-mobile-popup-drawer.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle { + left: calc( 20px - 0.907em); + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon, + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.slide-search, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.slide-search { + width: 100%; + position: relative; + display: block; + right: auto; + transform: none; + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.slide-search .search-form, + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-form, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.slide-search .search-form, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-form { + right: 0; + visibility: visible; + opacity: 1; + position: relative; + top: auto; + transform: none; + padding: 0; + display: block; + overflow: hidden; + } + + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-field, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-field { + width: 100%; + padding-right: 5.5em; + } + .ast-mobile-popup-drawer .ast-mobile-popup-content .ast-search-menu-icon .search-submit, + .ast-mobile-popup-drawer .ast-desktop-popup-content .ast-search-menu-icon .search-submit { + display: block; + position: absolute; + height: 100%; + top: 0; + right: 0; + padding: 0 1em; + border-radius: 0; + }'; + } + + // Adding this CSS to bottom because it needs to be load after above style loads. As it required to hide/show flyout offcanvas. + $off_canvas_css .= ' + .ast-mobile-popup-drawer.active .ast-mobile-popup-inner { + opacity: 1; + visibility: visible; + transform: translateX(0%); + }'; + + return Astra_Enqueue_Scripts::trim_css( $off_canvas_css ); +} + + +/** + * Add static CSS for Dropdown Type. + * + * @since 3.4.0 + * @return string. + */ +function astra_dropdown_type_static_css() { + $dropdown_type_css = ' + .ast-mobile-header-content > *, + .ast-desktop-header-content > * { + padding: 10px 0; + height: auto; + } + .ast-mobile-header-content > *:first-child, + .ast-desktop-header-content > *:first-child { + padding-top: 10px; + } + .ast-mobile-header-content > .ast-builder-menu, + .ast-desktop-header-content > .ast-builder-menu { + padding-top: 0; + } + + .ast-mobile-header-content > *:last-child, + .ast-desktop-header-content > *:last-child { + padding-bottom: 0; + } + .ast-mobile-header-content .ast-search-menu-icon.ast-inline-search label, + .ast-desktop-header-content .ast-search-menu-icon.ast-inline-search label { + width: 100%; + } + .ast-desktop-header-content .main-header-bar-navigation .ast-submenu-expanded > .ast-menu-toggle::before { + transform: rotateX(180deg); + } + #ast-desktop-header .ast-desktop-header-content, + .ast-mobile-header-content .ast-search-icon, + .ast-desktop-header-content .ast-search-icon, + .ast-mobile-header-wrap .ast-mobile-header-content, + .ast-main-header-nav-open.ast-popup-nav-open .ast-mobile-header-wrap .ast-mobile-header-content, + .ast-main-header-nav-open.ast-popup-nav-open .ast-desktop-header-content { + display: none; + } + .ast-main-header-nav-open.ast-header-break-point #ast-desktop-header .ast-desktop-header-content, + .ast-main-header-nav-open.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content { + display: block; + } + .ast-desktop .ast-desktop-header-content .astra-menu-animation-slide-up > .menu-item > .sub-menu, + .ast-desktop .ast-desktop-header-content .astra-menu-animation-slide-up > .menu-item .menu-item > .sub-menu, + .ast-desktop .ast-desktop-header-content .astra-menu-animation-slide-down > .menu-item > .sub-menu, + .ast-desktop .ast-desktop-header-content .astra-menu-animation-slide-down > .menu-item .menu-item > .sub-menu, + .ast-desktop .ast-desktop-header-content .astra-menu-animation-fade > .menu-item > .sub-menu, + .ast-desktop .ast-desktop-header-content .astra-menu-animation-fade > .menu-item .menu-item > .sub-menu { + opacity: 1; + visibility: visible; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation { + width: unset; + margin: unset; + }'; + + if ( is_rtl() ) { + $dropdown_type_css .= ' + .ast-mobile-header-content.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle, + .ast-desktop-header-content.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle { + right: calc( 20px - 0.907em); + } + .ast-mobile-header-content .ast-search-menu-icon, + .ast-mobile-header-content .ast-search-menu-icon.slide-search, + .ast-desktop-header-content .ast-search-menu-icon, + .ast-desktop-header-content .ast-search-menu-icon.slide-search { + width: 100%; + position: relative; + display: block; + left: auto; + transform: none; + } + .ast-mobile-header-content .ast-search-menu-icon.slide-search .search-form, + .ast-mobile-header-content .ast-search-menu-icon .search-form, + .ast-desktop-header-content .ast-search-menu-icon.slide-search .search-form, + .ast-desktop-header-content .ast-search-menu-icon .search-form { + left: 0; + visibility: visible; + opacity: 1; + position: relative; + top: auto; + transform: none; + padding: 0; + display: block; + overflow: hidden; + } + .ast-mobile-header-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-mobile-header-content .ast-search-menu-icon .search-field, + .ast-desktop-header-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-desktop-header-content .ast-search-menu-icon .search-field { + width: 100%; + padding-left: 5.5em; + } + .ast-mobile-header-content .ast-search-menu-icon .search-submit, + .ast-desktop-header-content .ast-search-menu-icon .search-submit { + display: block; + position: absolute; + height: 100%; + top: 0; + left: 0; + padding: 0 1em; + border-radius: 0; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation ul .sub-menu .menu-link { + padding-right: 30px; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation .sub-menu .menu-item .menu-item .menu-link { + padding-right: 40px; + }'; + } else { + $dropdown_type_css .= ' + .ast-mobile-header-content.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle, + .ast-desktop-header-content.content-align-flex-end .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle { + left: calc( 20px - 0.907em); + } + .ast-mobile-header-content .ast-search-menu-icon, + .ast-mobile-header-content .ast-search-menu-icon.slide-search, + .ast-desktop-header-content .ast-search-menu-icon, + .ast-desktop-header-content .ast-search-menu-icon.slide-search { + width: 100%; + position: relative; + display: block; + right: auto; + transform: none; + } + .ast-mobile-header-content .ast-search-menu-icon.slide-search .search-form, + .ast-mobile-header-content .ast-search-menu-icon .search-form, + .ast-desktop-header-content .ast-search-menu-icon.slide-search .search-form, + .ast-desktop-header-content .ast-search-menu-icon .search-form { + right: 0; + visibility: visible; + opacity: 1; + position: relative; + top: auto; + transform: none; + padding: 0; + display: block; + overflow: hidden; + } + .ast-mobile-header-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-mobile-header-content .ast-search-menu-icon .search-field, + .ast-desktop-header-content .ast-search-menu-icon.ast-inline-search .search-field, + .ast-desktop-header-content .ast-search-menu-icon .search-field { + width: 100%; + padding-right: 5.5em; + } + .ast-mobile-header-content .ast-search-menu-icon .search-submit, + .ast-desktop-header-content .ast-search-menu-icon .search-submit { + display: block; + position: absolute; + height: 100%; + top: 0; + right: 0; + padding: 0 1em; + border-radius: 0; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation ul .sub-menu .menu-link { + padding-left: 30px; + } + .ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation .sub-menu .menu-item .menu-item .menu-link { + padding-left: 40px; + }'; + } + return Astra_Enqueue_Scripts::trim_css( $dropdown_type_css ); +} diff --git a/inc/builder/type/header/primary-header/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/primary-header/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..993c385 --- /dev/null +++ b/inc/builder/type/header/primary-header/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +!function(){var t=AstraBuilderPrimaryHeaderData.tablet_break_point||768,r=AstraBuilderPrimaryHeaderData.mobile_break_point||544;wp.customize("astra-settings[hb-header-height]",function(a){a.bind(function(a){var e;""==a.desktop&&""==a.tablet&&""==a.mobile||(e="",e+=".ast-mobile-header-wrap .ast-primary-header-bar , .ast-primary-header-bar .site-primary-header-wrap {",e+="min-height: "+a.desktop+"px;",e+="} ",e+=".ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item {",e+="line-height: "+a.desktop+"px;",e+="} ",e+="@media (max-width: "+t+"px) {",e+=".ast-mobile-header-wrap .ast-primary-header-bar , .ast-primary-header-bar .site-primary-header-wrap {",e+="min-height: "+a.tablet+"px;",e+="} ",e+="} ",e+="@media (max-width: "+r+"px) {",e+=".ast-mobile-header-wrap .ast-primary-header-bar , .ast-primary-header-bar .site-primary-header-wrap {",e+="min-height: "+a.mobile+"px;",e+="} ",e+="} ",astra_add_dynamic_css("hb-header-height",e))})}),wp.customize("astra-settings[hb-header-main-layout-width]",function(a){a.bind(function(a){var e="";"content"!==a?(e+="#masthead .ast-container, .site-header-focus-item + .ast-breadcrumbs-wrapper {",e+="max-width: unset;",e+="padding-left: 35px;",e+="padding-right: 35px;"):(e="#masthead .ast-container, .site-header-focus-item + .ast-breadcrumbs-wrapper {",e+="max-width: 100%",e+="padding-left: 20px;",e+="padding-right: 20px;"),e+="} ",e+="@media (max-width: "+AstraBuilderPrimaryHeaderData.header_break_point+"px) {",e+="#masthead .ast-mobile-header-wrap .ast-above-header-bar, #masthead .ast-mobile-header-wrap .ast-primary-header-bar, #masthead .ast-mobile-header-wrap .ast-below-header-bar {",e+="padding-left: 20px;",e+="padding-right: 20px;",e+="} ",e+="} ",astra_add_dynamic_css("hb-header-main-layout-width",e)})}),wp.customize("astra-settings[hb-header-main-sep]",function(a){a.bind(function(a){var e="";e+=".ast-header-break-point .ast-primary-header-bar, .ast-primary-header-bar {",e+="border-bottom-width: "+a+"px;",e+="border-bottom-style: solid;",e+="border-color:"+wp.customize("astra-settings[hb-header-main-sep-color]").get()+";",e+="}",astra_add_dynamic_css("hb-header-main-sep",e)})}),astra_css("astra-settings[hb-header-main-sep-color]","border-color",".ast-header-break-point .ast-primary-header-bar, .ast-primary-header-bar"),astra_apply_responsive_background_css("astra-settings[hb-header-bg-obj-responsive]",".main-header-bar","desktop"),astra_apply_responsive_background_css("astra-settings[hb-header-bg-obj-responsive]",".ast-primary-header.main-header-bar","tablet"),astra_apply_responsive_background_css("astra-settings[hb-header-bg-obj-responsive]",".ast-primary-header.main-header-bar","mobile"),astra_builder_advanced_css("section-primary-header-builder",".ast-desktop .ast-primary-header-bar, .ast-header-break-point .ast-primary-header-bar"),astra_builder_visibility_css("section-primary-header-builder",".ast-primary-header-bar","grid"),wp.customize("astra-settings[section-header-builder-layout-margin]",function(a){a.bind(function(a){var e;""==a.desktop.bottom&&""==a.desktop.top&&""==a.desktop.left&&""==a.desktop.right&&""==a.tablet.bottom&&""==a.tablet.top&&""==a.tablet.left&&""==a.tablet.right&&""==a.mobile.bottom&&""==a.mobile.top&&""==a.mobile.left&&""==a.mobile.right||(e="",e+=".ast-hfb-header .site-header {",e+="margin-left: "+a.desktop.left+a["desktop-unit"]+";",e+="margin-right: "+a.desktop.right+a["desktop-unit"]+";",e+="margin-top: "+a.desktop.top+a["desktop-unit"]+";",e+="margin-bottom: "+a.desktop.bottom+a["desktop-unit"]+";",e+="} ",e+="@media (max-width: "+t+"px) {",e+=".ast-hfb-header .site-header {",e+="margin-left: "+a.tablet.left+a["tablet-unit"]+";",e+="margin-right: "+a.tablet.right+a["tablet-unit"]+";",e+="margin-top: "+a.tablet.top+a["desktop-unit"]+";",e+="margin-bottom: "+a.tablet.bottom+a["desktop-unit"]+";",e+="} ",e+="} ",e+="@media (max-width: "+r+"px) {",e+=".ast-hfb-header .site-header {",e+="margin-left: "+a.mobile.left+a["mobile-unit"]+";",e+="margin-right: "+a.mobile.right+a["mobile-unit"]+";",e+="margin-top: "+a.mobile.top+a["desktop-unit"]+";",e+="margin-bottom: "+a.mobile.bottom+a["desktop-unit"]+";",e+="} ",e+="} ",astra_add_dynamic_css("section-header-builder-layout-margin-toggle-button",e))})})}(jQuery); \ No newline at end of file diff --git a/inc/builder/type/header/primary-header/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/primary-header/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..1118135 --- /dev/null +++ b/inc/builder/type/header/primary-header/assets/js/unminified/customizer-preview.js @@ -0,0 +1,152 @@ +/** + * 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 3.0.0 + */ + +( function( $ ) { + + var tablet_break_point = AstraBuilderPrimaryHeaderData.tablet_break_point || 768, + mobile_break_point = AstraBuilderPrimaryHeaderData.mobile_break_point || 544; + + wp.customize( 'astra-settings[hb-header-height]', function( value ) { + value.bind( function( size ) { + + if( size.desktop != '' || size.tablet != '' || size.mobile != '' ) { + var dynamicStyle = ''; + dynamicStyle += '.ast-mobile-header-wrap .ast-primary-header-bar , .ast-primary-header-bar .site-primary-header-wrap {'; + dynamicStyle += 'min-height: ' + size.desktop + 'px;'; + dynamicStyle += '} '; + dynamicStyle += '.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item {'; + dynamicStyle += 'line-height: ' + size.desktop + 'px;'; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += '.ast-mobile-header-wrap .ast-primary-header-bar , .ast-primary-header-bar .site-primary-header-wrap {'; + dynamicStyle += 'min-height: ' + size.tablet + 'px;'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += '.ast-mobile-header-wrap .ast-primary-header-bar , .ast-primary-header-bar .site-primary-header-wrap {'; + dynamicStyle += 'min-height: ' + size.mobile + 'px;'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + astra_add_dynamic_css( 'hb-header-height', dynamicStyle ); + } + } ); + } ); + + // Primary Header - Layout > Content Width. + wp.customize( 'astra-settings[hb-header-main-layout-width]', function( setting ) { + setting.bind( function( layout ) { + + var dynamicStyle = ''; + + if ( 'content' !== layout ) { + dynamicStyle += '#masthead .ast-container, .site-header-focus-item + .ast-breadcrumbs-wrapper {'; + dynamicStyle += 'max-width: unset;'; + dynamicStyle += 'padding-left: 35px;'; + dynamicStyle += 'padding-right: 35px;'; + dynamicStyle += '} '; + + } else { + dynamicStyle = '#masthead .ast-container, .site-header-focus-item + .ast-breadcrumbs-wrapper {'; + dynamicStyle += 'max-width: 100%'; + dynamicStyle += 'padding-left: 20px;'; + dynamicStyle += 'padding-right: 20px;'; + dynamicStyle += '} '; + } + + dynamicStyle += '@media (max-width: ' + AstraBuilderPrimaryHeaderData.header_break_point + 'px) {'; + dynamicStyle += '#masthead .ast-mobile-header-wrap .ast-above-header-bar, #masthead .ast-mobile-header-wrap .ast-primary-header-bar, #masthead .ast-mobile-header-wrap .ast-below-header-bar {'; + dynamicStyle += 'padding-left: 20px;'; + dynamicStyle += 'padding-right: 20px;'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + astra_add_dynamic_css( 'hb-header-main-layout-width', dynamicStyle ); + } ); + } ); + + // Border Bottom width. + wp.customize( 'astra-settings[hb-header-main-sep]', function( value ) { + value.bind( function( border ) { + + var color = wp.customize( 'astra-settings[hb-header-main-sep-color]' ).get(), + dynamicStyle = ''; + + dynamicStyle += '.ast-header-break-point .ast-primary-header-bar, .ast-primary-header-bar {'; + dynamicStyle += 'border-bottom-width: ' + border + 'px;'; + dynamicStyle += 'border-bottom-style: solid;'; + dynamicStyle += 'border-color:' + color + ';'; + dynamicStyle += '}'; + + astra_add_dynamic_css( 'hb-header-main-sep', dynamicStyle ); + + } ); + } ); + + // Border Color. + astra_css( + 'astra-settings[hb-header-main-sep-color]', + 'border-color', + '.ast-header-break-point .ast-primary-header-bar, .ast-primary-header-bar' + ); + + // Responsive BG styles > Primary Header Row. + astra_apply_responsive_background_css( 'astra-settings[hb-header-bg-obj-responsive]', '.main-header-bar', 'desktop' ); + astra_apply_responsive_background_css( 'astra-settings[hb-header-bg-obj-responsive]', '.ast-primary-header.main-header-bar', 'tablet' ); + astra_apply_responsive_background_css( 'astra-settings[hb-header-bg-obj-responsive]', '.ast-primary-header.main-header-bar', 'mobile' ); + + // Advanced CSS Generation. + astra_builder_advanced_css( 'section-primary-header-builder', '.ast-desktop .ast-primary-header-bar, .ast-header-break-point .ast-primary-header-bar' ); + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( 'section-primary-header-builder', '.ast-primary-header-bar', 'grid' ); + + // Advanced CSS for Header Builder - Margin. + wp.customize( 'astra-settings[section-header-builder-layout-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 += '.ast-hfb-header .site-header {'; + 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 += '.ast-hfb-header .site-header {'; + 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 += '.ast-hfb-header .site-header {'; + 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( 'section-header-builder-layout-margin-toggle-button', dynamicStyle ); + } + } ); + } ); + + +} )( jQuery ); diff --git a/inc/builder/type/header/primary-header/class-astra-primary-header-loader.php b/inc/builder/type/header/primary-header/class-astra-primary-header-loader.php new file mode 100644 index 0000000..2f12bcd --- /dev/null +++ b/inc/builder/type/header/primary-header/class-astra-primary-header-loader.php @@ -0,0 +1,115 @@ + astra_header_break_point(), + 'tablet_break_point' => astra_get_tablet_breakpoint(), + 'mobile_break_point' => astra_get_mobile_breakpoint(), + ) + ); + } +} + +/** +* Kicking this off by creating the object of the class. +*/ +new Astra_Primary_Header_Loader(); diff --git a/inc/builder/type/header/primary-header/class-astra-primary-header.php b/inc/builder/type/header/primary-header/class-astra-primary-header.php new file mode 100644 index 0000000..ebe81dd --- /dev/null +++ b/inc/builder/type/header/primary-header/class-astra-primary-header.php @@ -0,0 +1,45 @@ + array( + 'min-height' => astra_get_css_value( $hb_header_height_desktop, 'px' ), + ), + '.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item' => array( + 'line-height' => astra_get_css_value( $hb_header_height_desktop, 'px' ), + ), + ); + + $parse_css .= astra_parse_css( $common_css_output ); + + if ( Astra_Builder_Helper::is_component_loaded( 'woo-cart', 'header' ) || Astra_Builder_Helper::is_component_loaded( 'edd-cart', 'header' ) ) { + $common_css_cart_output = array( + '.ast-desktop .ast-primary-header-bar .ast-header-woo-cart, .ast-desktop .ast-primary-header-bar .ast-header-edd-cart' => array( + 'line-height' => astra_get_css_value( $hb_header_height_desktop, 'px' ), + ), + ); + + $parse_css .= astra_parse_css( $common_css_cart_output ); + } + + + $astra_header_width = astra_get_option( 'hb-header-main-layout-width' ); + $header_breadcrumb_position = astra_get_option( 'breadcrumb-position' ); + + /* Width for Header */ + if ( 'content' !== $astra_header_width ) { + $general_global_responsive = array( + '#masthead .ast-container, .site-header-focus-item + .ast-breadcrumbs-wrapper' => array( + 'max-width' => '100%', + 'padding-left' => '35px', + 'padding-right' => '35px', + ), + ); + + /* Parse CSS from array()*/ + $parse_css .= astra_parse_css( $general_global_responsive ); + + } elseif ( 'astra_header_primary_container_after' == $header_breadcrumb_position ) { + $site_content_width = astra_get_option( 'site-content-width', 1200 ); + $general_global_responsive = array( + '.site-header-focus-item + .ast-breadcrumbs-wrapper' => array( + 'max-width' => astra_get_css_value( $site_content_width + 40, 'px' ), + 'margin-left' => 'auto', + 'margin-right' => 'auto', + 'padding-left' => '20px', + 'padding-right' => '20px', + ), + ); + + /* Parse CSS from array()*/ + $parse_css .= astra_parse_css( $general_global_responsive ); + } + + $padding_below_breakpoint = array( + '#masthead .ast-mobile-header-wrap .ast-primary-header-bar, #masthead .ast-mobile-header-wrap .ast-below-header-bar' => array( + 'padding-left' => '20px', + 'padding-right' => '20px', + ), + ); + + $parse_css .= astra_parse_css( $padding_below_breakpoint, '', astra_get_tablet_breakpoint() ); + + // Header Separator. + $header_separator = absint( astra_get_option( 'hb-header-main-sep' ) ); + + // Apply border only when it has positive value. + if ( $header_separator ) { + $header_separator_color = astra_get_option( 'hb-header-main-sep-color' ); + + $border_responsive_style = array( + '.ast-header-break-point .ast-primary-header-bar' => array( + 'border-bottom-width' => astra_get_css_value( $header_separator, 'px' ), + 'border-bottom-color' => esc_attr( $header_separator_color ), + 'border-bottom-style' => 'solid', + ), + ); + + + $border_desktop_style = array( + '.ast-primary-header-bar' => array( + 'border-bottom-width' => astra_get_css_value( $header_separator, 'px' ), + 'border-bottom-color' => esc_attr( $header_separator_color ), + 'border-bottom-style' => 'solid', + ), + ); + + } else { + $border_responsive_style = array( + '.ast-header-break-point .ast-primary-header-bar' => array( + 'border-bottom-style' => 'none', + ), + ); + + $border_desktop_style = array( + '.ast-primary-header-bar' => array( + 'border-bottom-style' => 'none', + ), + ); + } + + $parse_css .= astra_parse_css( $border_responsive_style ); + $parse_css .= astra_parse_css( $border_desktop_style, astra_get_tablet_breakpoint( '', 1 ) ); + + $header_bg_obj = astra_get_option( 'hb-header-bg-obj-responsive' ); + + /** + * Responsive Colors options + * Header Responsive Background with Image + */ + $desktop_colors = array( + '.ast-primary-header-bar' => astra_get_responsive_background_obj( $header_bg_obj, 'desktop' ), + ); + + $tablet_colors = array( + '.ast-primary-header-bar.ast-primary-header' => astra_get_responsive_background_obj( $header_bg_obj, 'tablet' ), + '.ast-mobile-header-wrap .ast-primary-header-bar, .ast-primary-header-bar .site-primary-header-wrap' => array( + 'min-height' => astra_get_css_value( $hb_header_height_tablet, 'px' ), + ), + ); + $mobile_colors = array( + '.ast-primary-header-bar.ast-primary-header' => astra_get_responsive_background_obj( $header_bg_obj, 'mobile' ), + '.ast-mobile-header-wrap .ast-primary-header-bar , .ast-primary-header-bar .site-primary-header-wrap' => array( + 'min-height' => astra_get_css_value( $hb_header_height_mobile, 'px' ), + ), + ); + + /* Parse CSS from array() */ + /** + * Tweak - Check for AMP Support. + */ + $parse_css .= apply_filters( 'astra_addon_colors_dynamic_css_desktop', astra_parse_css( $desktop_colors ) ); + $parse_css .= apply_filters( 'astra_addon_colors_dynamic_css_tablet', astra_parse_css( $tablet_colors, '', astra_get_tablet_breakpoint() ) ); + $parse_css .= apply_filters( 'astra_addon_colors_dynamic_css_mobile', astra_parse_css( $mobile_colors, '', astra_get_mobile_breakpoint() ) ); + + /** + * Tweak - $remove_bottom_sire_brancing - Search in Astra Pro. + */ + + // Trim white space for faster page loading. + $dynamic_css .= Astra_Enqueue_Scripts::trim_css( $parse_css ); + + $_section = 'section-primary-header-builder'; + + $parent_selector = '.ast-desktop .ast-primary-header-bar.main-header-bar, .ast-header-break-point #masthead .ast-primary-header-bar.main-header-bar'; + + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_advanced_margin_padding_css( $_section, $parent_selector ); + + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, '.ast-primary-header-bar', 'block', 'grid' ); + + // Advanced CSS for Header Builder. + $margin = astra_get_option( 'section-header-builder-layout-margin' ); + + // Desktop CSS. + $css_output_desktop = array( + + '.ast-hfb-header .site-header' => array( + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'desktop' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'desktop' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'desktop' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'desktop' ), + ), + ); + + // Tablet CSS. + $css_output_tablet = array( + + '.ast-hfb-header .site-header' => array( + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'tablet' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'tablet' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'tablet' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'tablet' ), + ), + ); + + // Mobile CSS. + $css_output_mobile = array( + + '.ast-hfb-header .site-header' => array( + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'mobile' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'mobile' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'mobile' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'mobile' ), + ), + ); + + $dynamic_css .= astra_parse_css( $css_output_desktop ); + $dynamic_css .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() ); + $dynamic_css .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() ); + + return $dynamic_css; +} diff --git a/inc/builder/type/header/search/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/search/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..d8a532b --- /dev/null +++ b/inc/builder/type/header/search/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +!function(){var i=astraBuilderPreview.tablet_break_point||768,o=astraBuilderPreview.mobile_break_point||544,a=".ast-header-search";astra_color_responsive_css("header-search-icon-color","astra-settings[header-search-icon-color]","color",a+" .astra-search-icon, "+a+" .search-field::placeholder"),astra_css("astra-settings[header-search-icon-space]","font-size",a+" .astra-search-icon","px"),wp.customize("astra-settings[header-search-icon-space]",function(t){t.bind(function(t){var e;""==t.desktop&&""==t.tablet&&""==t.mobile||(e="",e+=a+" .astra-search-icon {",e+="font-size: "+t.desktop+"px;",e+="} ",e+="@media (max-width: "+i+"px) {",e+=a+" .astra-search-icon {",e+="font-size: "+t.tablet+"px;",e+="} ",e+="} ",e+="@media (max-width: "+o+"px) {",e+=a+" .astra-search-icon {",e+="font-size: "+t.mobile+"px;",e+="} ",e+="} ",astra_add_dynamic_css("header-search-icon-space",e))})}),wp.customize("astra-settings[section-header-search-margin]",function(t){t.bind(function(t){var e,a;""==t.desktop.bottom&&""==t.desktop.top&&""==t.desktop.left&&""==t.desktop.right&&""==t.tablet.bottom&&""==t.tablet.top&&""==t.tablet.left&&""==t.tablet.right&&""==t.mobile.bottom&&""==t.mobile.top&&""==t.mobile.left&&""==t.mobile.right||(a="",a+=(e=".ast-hfb-header .site-header-section > .ast-header-search, .ast-hfb-header .ast-header-search")+" {",a+="margin-left: "+t.desktop.left+t["desktop-unit"]+";",a+="margin-right: "+t.desktop.right+t["desktop-unit"]+";",a+="margin-top: "+t.desktop.top+t["desktop-unit"]+";",a+="margin-bottom: "+t.desktop.bottom+t["desktop-unit"]+";",a+="} ",a+="@media (max-width: "+i+"px) {",a+=e+" {",a+="margin-left: "+t.tablet.left+t["tablet-unit"]+";",a+="margin-right: "+t.tablet.right+t["tablet-unit"]+";",a+="margin-top: "+t.tablet.top+t["desktop-unit"]+";",a+="margin-bottom: "+t.tablet.bottom+t["desktop-unit"]+";",a+="} ",a+="} ",a+="@media (max-width: "+o+"px) {",a+=e+" {",a+="margin-left: "+t.mobile.left+t["mobile-unit"]+";",a+="margin-right: "+t.mobile.right+t["mobile-unit"]+";",a+="margin-top: "+t.mobile.top+t["desktop-unit"]+";",a+="margin-bottom: "+t.mobile.bottom+t["desktop-unit"]+";",a+="} ",a+="} ",astra_add_dynamic_css("header-search-margin",a))})}),astra_builder_visibility_css("section-header-search",a)}(jQuery); \ No newline at end of file diff --git a/inc/builder/type/header/search/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/search/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..56d4dea --- /dev/null +++ b/inc/builder/type/header/search/assets/js/unminified/customizer-preview.js @@ -0,0 +1,102 @@ +/** + * 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 3.0.0 + */ + +( function( $ ) { + + var tablet_break_point = astraBuilderPreview.tablet_break_point || 768, + mobile_break_point = astraBuilderPreview.mobile_break_point || 544; + + var selector = '.ast-header-search'; + var section = 'section-header-search'; + + // Icon Color. + astra_color_responsive_css( + 'header-search-icon-color', + 'astra-settings[header-search-icon-color]', + 'color', + selector + ' .astra-search-icon, ' + selector + ' .search-field::placeholder' + ); + + // Icon Size. + astra_css( + 'astra-settings[header-search-icon-space]', + 'font-size', + selector + ' .astra-search-icon', + 'px' + ); + + // Icon Size. + wp.customize( 'astra-settings[header-search-icon-space]', function( value ) { + value.bind( function( size ) { + if( size.desktop != '' || size.tablet != '' || size.mobile != '' ) { + var dynamicStyle = ''; + dynamicStyle += selector + ' .astra-search-icon {'; + dynamicStyle += 'font-size: ' + size.desktop + 'px' + ';'; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + tablet_break_point + 'px) {'; + dynamicStyle += selector + ' .astra-search-icon {'; + dynamicStyle += 'font-size: ' + size.tablet + 'px' + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + + dynamicStyle += '@media (max-width: ' + mobile_break_point + 'px) {'; + dynamicStyle += selector + ' .astra-search-icon {'; + dynamicStyle += 'font-size: ' + size.mobile + 'px' + ';'; + dynamicStyle += '} '; + dynamicStyle += '} '; + astra_add_dynamic_css( 'header-search-icon-space', dynamicStyle ); + } + } ); + } ); + + // Margin. + wp.customize( 'astra-settings[section-header-search-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 selector = '.ast-hfb-header .site-header-section > .ast-header-search, .ast-hfb-header .ast-header-search'; + 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( 'header-search-margin', dynamicStyle ); + } + } ); + } ); + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( section, selector ); + +} )( jQuery ); diff --git a/inc/builder/type/header/search/class-astra-header-search-component-loader.php b/inc/builder/type/header/search/class-astra-header-search-component-loader.php new file mode 100644 index 0000000..b4d1f01 --- /dev/null +++ b/inc/builder/type/header/search/class-astra-header-search-component-loader.php @@ -0,0 +1,73 @@ + .ast-header-search, .ast-hfb-header .ast-header-search'; + + /** + * Search CSS. + */ + $css_output_desktop = array( + $selector . ' .ast-search-menu-icon .search-form .search-field:-ms-input-placeholder,' . $selector . ' .ast-search-menu-icon .search-form .search-field:-ms-input-placeholder' => array( + 'opacity' => '0.5', + ), + $selector . ' .ast-search-menu-icon.slide-search .search-form, .ast-header-search .ast-search-menu-icon.ast-inline-search .search-form' => array( + '-js-display' => 'flex', + 'display' => 'flex', + 'align-items' => 'center', + ), + '.ast-builder-layout-element.ast-header-search' => array( + 'height' => 'auto', + ), + $selector . ' .astra-search-icon' => array( + 'color' => esc_attr( $icon_color_desktop ), + 'font-size' => astra_get_css_value( $icon_size_desktop, 'px' ), + ), + $selector . ' .search-field::placeholder' => array( + 'color' => esc_attr( $icon_color_desktop ), + ), + $selector . ' .ast-search-menu-icon.ast-dropdown-active .search-field' => array( + 'margin-right' => astra_get_css_value( $icon_size_desktop - 10, 'px' ), + ), + $margin_selector => array( + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'desktop' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'desktop' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'desktop' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'desktop' ), + ), + ); + + $css_output_tablet = array( + + $selector . ' .astra-search-icon' => array( + 'color' => esc_attr( $icon_color_tablet ), + 'font-size' => astra_get_css_value( $icon_size_tablet, 'px' ), + ), + $selector . ' .search-field::placeholder' => array( + 'color' => esc_attr( $icon_color_tablet ), + ), + $selector . ' .ast-search-menu-icon.ast-dropdown-active .search-field' => array( + 'margin-right' => astra_get_css_value( $icon_size_tablet - 10, 'px' ), + ), + $margin_selector => array( + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'tablet' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'tablet' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'tablet' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'tablet' ), + ), + ); + + $css_output_mobile = array( + + $selector . ' .astra-search-icon' => array( + 'color' => esc_attr( $icon_color_mobile ), + 'font-size' => astra_get_css_value( $icon_size_mobile, 'px' ), + ), + $selector . ' .search-field::placeholder' => array( + 'color' => esc_attr( $icon_color_mobile ), + ), + $selector . ' .ast-search-menu-icon.ast-dropdown-active .search-field' => array( + 'margin-right' => astra_get_css_value( $icon_size_mobile - 10, 'px' ), + ), + $margin_selector => array( + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'mobile' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'mobile' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'mobile' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'mobile' ), + ), + ); + + /* Parse CSS from array() */ + $css_output = astra_search_static_css(); + $css_output .= astra_parse_css( $css_output_desktop ); + $css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() ); + $css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() ); + + $dynamic_css .= $css_output; + + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $selector ); + + return $dynamic_css; +} + +/** + * Search Component static CSS. + * + * @return string + * @since 3.5.0 + */ +function astra_search_static_css() { + $search_css = ' + + .main-header-bar .main-header-bar-navigation .ast-search-icon { + display: block; + z-index: 4; + position: relative; + } + + .ast-search-icon { + z-index: 4; + position: relative; + line-height: normal; + } + .main-header-bar .ast-search-menu-icon .search-form { + background-color: #ffffff; + } + .ast-search-menu-icon.ast-dropdown-active.slide-search .search-form { + visibility: visible; + opacity: 1; + } + .ast-search-menu-icon .search-form { + border: 1px solid #e7e7e7; + line-height: normal; + padding: 0 3em 0 0; + border-radius: 2px; + display: inline-block; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + position: relative; + color: inherit; + background-color: #fff; + } + .ast-search-menu-icon .astra-search-icon { + -js-display: flex; + display: flex; + line-height: normal; + } + .ast-search-menu-icon .astra-search-icon:focus { + outline: none; + } + .ast-search-menu-icon .search-field { + border: none; + background-color: transparent; + transition: width .2s; + border-radius: inherit; + color: inherit; + font-size: inherit; + width: 0; + color: #757575; + } + .ast-search-menu-icon .search-submit { + display: none; + background: none; + border: none; + font-size: 1.3em; + color: #757575; + } + .ast-search-menu-icon.ast-dropdown-active { + visibility: visible; + opacity: 1; + position: relative; + } + + .ast-search-menu-icon.ast-dropdown-active .search-field { + width: 235px; + } + .ast-header-search .ast-search-menu-icon.slide-search .search-form, .ast-header-search .ast-search-menu-icon.ast-inline-search .search-form { + -js-display: flex; + display: flex; + align-items: center; + }'; + + if ( is_rtl() ) { + $search_css .= ' + .ast-search-menu-icon.ast-inline-search .search-field { + width : 100%; + padding : 0.60em; + padding-left : 5.5em; + } + .site-header-section-left .ast-search-menu-icon.slide-search .search-form { + padding-right: 3em; + padding-left: unset; + right: -1em; + left: unset; + } + + .site-header-section-left .ast-search-menu-icon.slide-search .search-form .search-field { + margin-left: unset; + margin-right: 10px; + } + .ast-search-menu-icon.slide-search .search-form { + -webkit-backface-visibility: visible; + backface-visibility: visible; + visibility: hidden; + opacity: 0; + transition: all .2s; + position: absolute; + z-index: 3; + left: -1em; + top: 50%; + transform: translateY(-50%); + }'; + } else { + $search_css .= ' + .ast-search-menu-icon.ast-inline-search .search-field { + width : 100%; + padding : 0.60em; + padding-right : 5.5em; + } + .site-header-section-left .ast-search-menu-icon.slide-search .search-form { + padding-left: 3em; + padding-right: unset; + left: -1em; + right: unset; + } + + .site-header-section-left .ast-search-menu-icon.slide-search .search-form .search-field { + margin-right: unset; + margin-left: 10px; + } + .ast-search-menu-icon.slide-search .search-form { + -webkit-backface-visibility: visible; + backface-visibility: visible; + visibility: hidden; + opacity: 0; + transition: all .2s; + position: absolute; + z-index: 3; + right: -1em; + top: 50%; + transform: translateY(-50%); + }'; + } + + return Astra_Enqueue_Scripts::trim_css( $search_css ); +} diff --git a/inc/builder/type/header/site-identity/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/site-identity/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..f78106d --- /dev/null +++ b/inc/builder/type/header/site-identity/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +!function(){wp.customize("astra-settings[different-mobile-logo]",function(t){t.bind(function(t){"1"==t?jQuery(".site-header").addClass("ast-has-mobile-header-logo"):jQuery(".site-header").removeClass("ast-has-mobile-header-logo")})}),wp.customize("astra-settings[title_tagline-margin]",function(t){t.bind(function(t){var e,i,o,a;""==t.desktop.bottom&&""==t.desktop.top&&""==t.desktop.left&&""==t.desktop.right&&""==t.tablet.bottom&&""==t.tablet.top&&""==t.tablet.left&&""==t.tablet.right&&""==t.mobile.bottom&&""==t.mobile.top&&""==t.mobile.left&&""==t.mobile.right||(e="",i=".ast-builder-layout-element .ast-site-identity",o=astraBuilderPreview.tablet_break_point||768,a=astraBuilderPreview.mobile_break_point||544,e+=i+" {",e+="margin-left: "+t.desktop.left+t["desktop-unit"]+";",e+="margin-right: "+t.desktop.right+t["desktop-unit"]+";",e+="margin-top: "+t.desktop.top+t["desktop-unit"]+";",e+="margin-bottom: "+t.desktop.bottom+t["desktop-unit"]+";",e+="} ",e+="@media (max-width: "+o+"px) {",e+=i+" {",e+="margin-left: "+t.tablet.left+t["tablet-unit"]+";",e+="margin-right: "+t.tablet.right+t["tablet-unit"]+";",e+="margin-top: "+t.tablet.top+t["desktop-unit"]+";",e+="margin-bottom: "+t.tablet.bottom+t["desktop-unit"]+";",e+="} ",e+="} ",e+="@media (max-width: "+a+"px) {",e+=i+" {",e+="margin-left: "+t.mobile.left+t["mobile-unit"]+";",e+="margin-right: "+t.mobile.right+t["mobile-unit"]+";",e+="margin-top: "+t.mobile.top+t["desktop-unit"]+";",e+="margin-bottom: "+t.mobile.bottom+t["desktop-unit"]+";",e+="} ",e+="} ",astra_add_dynamic_css("title_tagline-margin",e))})});astra_builder_visibility_css("title_tagline",'.ast-builder-layout-element[data-section="title_tagline"]')}(jQuery); \ No newline at end of file diff --git a/inc/builder/type/header/site-identity/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/site-identity/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..79f8b60 --- /dev/null +++ b/inc/builder/type/header/site-identity/assets/js/unminified/customizer-preview.js @@ -0,0 +1,71 @@ +/** + * 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 HF Builder. + * @since 3.0.0 + */ + +( function( $ ) { + + wp.customize( 'astra-settings[different-mobile-logo]', function ( value ) { + value.bind( function ( newval ) { + + if ( '1' == newval ) { + jQuery('.site-header').addClass( 'ast-has-mobile-header-logo' ); + } else { + jQuery('.site-header').removeClass( 'ast-has-mobile-header-logo' ); + } + } ); + } ); + + // Margin. + wp.customize( 'astra-settings[title_tagline-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 = '', + selector = '.ast-builder-layout-element .ast-site-identity', + tablet_break_point = astraBuilderPreview.tablet_break_point || 768, + mobile_break_point = astraBuilderPreview.mobile_break_point || 544; + + 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( 'title_tagline-margin', dynamicStyle ); + } + } ); + } ); + + var section = 'title_tagline'; + var visibility_selector = '.ast-builder-layout-element[data-section="title_tagline"]'; + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( section, visibility_selector ); +} )( jQuery ); diff --git a/inc/builder/type/header/site-identity/class-astra-header-site-identity-component-loader.php b/inc/builder/type/header/site-identity/class-astra-header-site-identity-component-loader.php new file mode 100644 index 0000000..804cd78 --- /dev/null +++ b/inc/builder/type/header/site-identity/class-astra-header-site-identity-component-loader.php @@ -0,0 +1,51 @@ + array( + + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'desktop' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'desktop' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'desktop' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'desktop' ), + ), + ); + + // Tablet CSS. + $css_output_tablet = array( + + $selector => array( + + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'tablet' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'tablet' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'tablet' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'tablet' ), + ), + ); + + // Mobile CSS. + $css_output_mobile = array( + + $selector => array( + + // Margin CSS. + 'margin-top' => astra_responsive_spacing( $margin, 'top', 'mobile' ), + 'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'mobile' ), + 'margin-left' => astra_responsive_spacing( $margin, 'left', 'mobile' ), + 'margin-right' => astra_responsive_spacing( $margin, 'right', 'mobile' ), + ), + ); + + $css_output = astra_parse_css( $css_output_desktop ); + $css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() ); + $css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() ); + + $dynamic_css .= $css_output; + $dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $visibility_selector ); + + return $dynamic_css; +} diff --git a/inc/builder/type/header/social-icon/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/social-icon/assets/js/minified/customizer-preview.min.js new file mode 100644 index 0000000..65822fc --- /dev/null +++ b/inc/builder/type/header/social-icon/assets/js/minified/customizer-preview.min.js @@ -0,0 +1 @@ +jQuery,astra_builder_social_css("header",astraBuilderHeaderSocial.component_limit); \ No newline at end of file diff --git a/inc/builder/type/header/social-icon/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/social-icon/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..03ceb4a --- /dev/null +++ b/inc/builder/type/header/social-icon/assets/js/unminified/customizer-preview.js @@ -0,0 +1,15 @@ +/** + * 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 3.0.0 + */ + +( function( $ ) { + + astra_builder_social_css( 'header', astraBuilderHeaderSocial.component_limit ); + +} )( jQuery ); diff --git a/inc/builder/type/header/social-icon/class-astra-header-social-icon-component-loader.php b/inc/builder/type/header/social-icon/class-astra-header-social-icon-component-loader.php new file mode 100644 index 0000000..a8de361 --- /dev/null +++ b/inc/builder/type/header/social-icon/class-astra-header-social-icon-component-loader.php @@ -0,0 +1,62 @@ + astra_get_tablet_breakpoint(), + 'mobile_break_point' => astra_get_mobile_breakpoint(), + 'component_limit' => defined( 'ASTRA_EXT_VER' ) ? Astra_Builder_Helper::$component_limit : Astra_Builder_Helper::$num_of_header_social_icons, + ) + ); + } +} + +/** +* Kicking this off by creating the object of the class. +*/ +new Astra_Header_Social_Icon_Component_Loader(); diff --git a/inc/builder/type/header/social-icon/class-astra-header-social-icon-component.php b/inc/builder/type/header/social-icon/class-astra-header-social-icon-component.php new file mode 100644 index 0000000..f674d4b --- /dev/null +++ b/inc/builder/type/header/social-icon/class-astra-header-social-icon-component.php @@ -0,0 +1,45 @@ + defined( 'ASTRA_EXT_VER' ) ? Astra_Builder_Helper::$component_limit : Astra_Builder_Helper::$num_of_header_widgets, + 'tablet_break_point' => astra_get_tablet_breakpoint(), + 'mobile_break_point' => astra_get_mobile_breakpoint(), + 'is_flex_based_css' => Astra_Builder_Helper::apply_flex_based_css(), + 'has_block_editor' => astra_has_widgets_block_editor(), + ) + ); + } +} + +/** +* Kicking this off by creating the object of the class. +*/ +new Astra_Header_Widget_Component_Loader(); diff --git a/inc/builder/type/header/widget/class-astra-header-widget-component.php b/inc/builder/type/header/widget/class-astra-header-widget-component.php new file mode 100644 index 0000000..921e063 --- /dev/null +++ b/inc/builder/type/header/widget/class-astra-header-widget-component.php @@ -0,0 +1,45 @@ + a.remove,"+a+","+a+" .widget_shopping_cart .mini_cart_item a.remove:hover,"+a+" .widget_shopping_cart .mini_cart_item:hover > a.remove, #astra-mobile-cart-drawer"+a),astra_color_responsive_css("woo-cart-border-color","astra-settings[header-woo-cart-background-color]","border-color","#ast-site-header-cart .widget_shopping_cart,"+a+" .widget_shopping_cart"),astra_color_responsive_css("woo-cart-border-bottom-color","astra-settings[header-woo-cart-background-color]","border-bottom-color","#ast-site-header-cart:hover .widget_shopping_cart:before, #ast-site-header-cart:hover .widget_shopping_cart:after, .open-preview-woocommerce-cart #ast-site-header-cart .widget_shopping_cart:before, #astra-mobile-cart-drawer:hover .widget_shopping_cart:before, #astra-mobile-cart-drawer:hover .widget_shopping_cart:after, #astra-mobile-cart-drawer .widget_shopping_cart:before"),astra_color_responsive_css("woo-cart-colors","astra-settings[header-woo-cart-separator-color]","border-top-color","#ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total, #astra-mobile-cart-drawer .widget_shopping_cart .woocommerce-mini-cart__total, .astra-cart-drawer .astra-cart-drawer-header"),astra_color_responsive_css("woo-cart-border-bottom-colors","astra-settings[header-woo-cart-separator-color]","border-bottom-color","#ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total, #astra-mobile-cart-drawer .widget_shopping_cart .woocommerce-mini-cart__total, .astra-cart-drawer .astra-cart-drawer-header, #ast-site-header-cart .widget_shopping_cart .mini_cart_item, #astra-mobile-cart-drawer .widget_shopping_cart .mini_cart_item"),astra_color_responsive_css("woo-cart-colors","astra-settings[header-woo-cart-link-hover-color]","color",".ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart_content a:not(.button):hover, .ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item a.remove:hover, .ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item:hover > a.remove,"+a+" .widget_shopping_cart_content a:not(.button):hover,"+a+" .widget_shopping_cart .mini_cart_item a.remove:hover,"+a+" .widget_shopping_cart .mini_cart_item:hover > a.remove"),astra_color_responsive_css("woo-cart-border-colors","astra-settings[header-woo-cart-link-hover-color]","border-color",t+" .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item a.remove:hover,"+t+" .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item:hover > a.remove,"+a+" .widget_shopping_cart .mini_cart_item a.remove:hover,"+a+" .widget_shopping_cart .mini_cart_item:hover > a.remove"),astra_color_responsive_css("woo-cart-colors","astra-settings[header-woo-cart-btn-text-color]","color",t+" .ast-site-header-cart-data .widget_shopping_cart_content a.button.wc-forward:not(.checkout),"+a+" .widget_shopping_cart_content a.button.wc-forward:not(.checkout)"),astra_color_responsive_css("woo-cart-colors","astra-settings[header-woo-cart-btn-background-color]","background-color",t+" .ast-site-header-cart-data .widget_shopping_cart_content a.button.wc-forward:not(.checkout),"+a+" .widget_shopping_cart_content a.button.wc-forward:not(.checkout)"),astra_color_responsive_css("woo-cart-colors","astra-settings[header-woo-cart-btn-text-hover-color]","color",t+" .ast-site-header-cart-data .widget_shopping_cart_content a.button.wc-forward:not(.checkout):hover,"+a+" .widget_shopping_cart_content a.button.wc-forward:not(.checkout):hover"),astra_color_responsive_css("woo-cart-colors","astra-settings[header-woo-cart-btn-bg-hover-color]","background-color",t+" .ast-site-header-cart-data .widget_shopping_cart_content a.button.wc-forward:not(.checkout):hover,"+a+" .widget_shopping_cart_content a.button.wc-forward:not(.checkout):hover"),astra_color_responsive_css("woo-cart-colors","astra-settings[header-woo-checkout-btn-text-color]","color",t+" .ast-site-header-cart-data .widget_shopping_cart_content a.button.checkout.wc-forward,"+a+" .widget_shopping_cart_content a.button.checkout.wc-forward"),astra_color_responsive_css("woo-cart-colors","astra-settings[header-woo-checkout-btn-background-color]","border-color",t+" .ast-site-header-cart-data .widget_shopping_cart_content a.button.checkout.wc-forward,"+a+" .widget_shopping_cart_content a.button.checkout.wc-forward"),astra_color_responsive_css("woo-cart-background-color","astra-settings[header-woo-checkout-btn-background-color]","background-color",t+" .ast-site-header-cart-data .widget_shopping_cart_content a.button.checkout.wc-forward,"+a+" .widget_shopping_cart_content a.button.checkout.wc-forward"),astra_color_responsive_css("woo-cart-background-color","astra-settings[header-woo-checkout-btn-text-hover-color]","color",t+" .ast-site-header-cart-data .widget_shopping_cart_content a.button.checkout.wc-forward:hover,"+a+" .widget_shopping_cart_content a.button.checkout.wc-forward:hover"),astra_color_responsive_css("woo-cart-background-color","astra-settings[header-woo-checkout-btn-bg-hover-color]","background-color",t+" .ast-site-header-cart-data .widget_shopping_cart_content a.button.checkout.wc-forward:hover,"+a+" .widget_shopping_cart_content a.button.checkout.wc-forward:hover"),wp.customize("astra-settings[woo-header-cart-icon-style]",function(t){t.bind(function(t){var a=r(document).find(".ast-site-header-cart");a.removeClass("ast-menu-cart-fill ast-menu-cart-outline ast-menu-cart-none"),a.addClass("ast-menu-cart-"+t);astra_add_dynamic_css("woo-header-cart-icon-style",".ast-site-header-cart a, .ast-site-header-cart a *{ transition: all 0s; } "),wp.customize.preview.send("refresh")})}),wp.customize("astra-settings[header-woo-cart-icon-color]",function(t){t.bind(function(t){astra_add_dynamic_css("header-woo-cart-icon-color",".ast-menu-cart-fill .ast-cart-menu-wrap .count, .ast-menu-cart-fill .ast-cart-menu-wrap { background-color: "+t+"; } "),wp.customize.preview.send("refresh")})}),wp.customize("astra-settings[woo-header-cart-icon-radius]",function(t){t.bind(function(t){astra_add_dynamic_css("woo-header-cart-icon-radius",".ast-site-header-cart.ast-menu-cart-outline .ast-cart-menu-wrap, .ast-site-header-cart.ast-menu-cart-fill .ast-cart-menu-wrap, .ast-site-header-cart.ast-menu-cart-outline .ast-cart-menu-wrap .count, .ast-site-header-cart.ast-menu-cart-fill .ast-cart-menu-wrap .count, .ast-site-header-cart.ast-menu-cart-outline .ast-addon-cart-wrap, .ast-site-header-cart.ast-menu-cart-fill .ast-addon-cart-wrap { border-radius: "+t+"px; } ")})}),wp.customize("astra-settings[transparent-header-woo-cart-icon-color]",function(t){t.bind(function(t){wp.customize.preview.send("refresh")})}),astra_builder_visibility_css("section-header-woo-cart",".ast-header-woo-cart")}(jQuery); \ No newline at end of file diff --git a/inc/builder/type/header/woo-cart/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/woo-cart/assets/js/unminified/customizer-preview.js new file mode 100644 index 0000000..0e4f415 --- /dev/null +++ b/inc/builder/type/header/woo-cart/assets/js/unminified/customizer-preview.js @@ -0,0 +1,220 @@ +/** + * 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( $ ) { + + var selector = '.ast-site-header-cart'; + var responsive_selector = '.astra-cart-drawer.woocommerce-active'; + + // Icon Color. + astra_css( + 'astra-settings[header-woo-cart-icon-color]', + 'color', + selector + ' .ast-cart-menu-wrap .count, ' + selector + ' .ast-cart-menu-wrap .count:after,' + selector + ' .ast-woo-header-cart-info-wrap,' + selector + ' .ast-site-header-cart .ast-addon-cart-wrap' + ); + + // Icon Color. + astra_css( + 'astra-settings[header-woo-cart-icon-color]', + 'border-color', + selector + ' .ast-cart-menu-wrap .count, ' + selector + ' .ast-cart-menu-wrap .count:after' + ); + + // Icon BG Color. + astra_css( + 'astra-settings[header-woo-cart-icon-color]', + 'border-color', + '.ast-menu-cart-fill .ast-cart-menu-wrap .count, .ast-menu-cart-fill .ast-cart-menu-wrap' + ); + + // WooCommerce Cart Colors. + + astra_color_responsive_css( + 'woo-cart-colors', + 'astra-settings[header-woo-cart-text-color]', + 'color', + '.astra-cart-drawer-title, .ast-site-header-cart-data span, .ast-site-header-cart-data strong, .ast-site-header-cart-data .woocommerce-mini-cart__empty-message, .ast-site-header-cart-data .total .woocommerce-Price-amount, .ast-site-header-cart-data .total .woocommerce-Price-amount .woocommerce-Price-currencySymbol, .ast-header-woo-cart .ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item a.remove,' + responsive_selector + ' .widget_shopping_cart_content span, '+ responsive_selector + ' .widget_shopping_cart_content strong,'+ responsive_selector + ' .woocommerce-mini-cart__empty-message, .astra-cart-drawer .woocommerce-mini-cart *, ' + responsive_selector + ' .astra-cart-drawer-title' + ); + + astra_color_responsive_css( + 'woo-cart-border-color', + 'astra-settings[header-woo-cart-text-color]', + 'border-color', + '.ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item a.remove, '+ responsive_selector + ' .widget_shopping_cart .mini_cart_item a.remove' + ); + + astra_color_responsive_css( + 'woo-cart-colors', + 'astra-settings[header-woo-cart-link-color]', + 'color', + selector + ' .ast-site-header-cart-data .widget_shopping_cart_content a:not(.button),' + responsive_selector + ' .widget_shopping_cart_content a:not(.button)' + ); + + astra_color_responsive_css( + 'woo-cart-colors', + 'astra-settings[header-woo-cart-background-color]', + 'background-color', + '#ast-site-header-cart .widget_shopping_cart, .ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item a.remove:hover, .ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item:hover > a.remove,' + responsive_selector + ','+ responsive_selector + ' .widget_shopping_cart .mini_cart_item a.remove:hover,'+ responsive_selector + ' .widget_shopping_cart .mini_cart_item:hover > a.remove, #astra-mobile-cart-drawer' + responsive_selector + ); + + astra_color_responsive_css( + 'woo-cart-border-color', + 'astra-settings[header-woo-cart-background-color]', + 'border-color', + '#ast-site-header-cart .widget_shopping_cart,' + responsive_selector + ' .widget_shopping_cart' + ); + + astra_color_responsive_css( + 'woo-cart-border-bottom-color', + 'astra-settings[header-woo-cart-background-color]', + 'border-bottom-color', + '#ast-site-header-cart:hover .widget_shopping_cart:before, #ast-site-header-cart:hover .widget_shopping_cart:after, .open-preview-woocommerce-cart #ast-site-header-cart .widget_shopping_cart:before, #astra-mobile-cart-drawer:hover .widget_shopping_cart:before, #astra-mobile-cart-drawer:hover .widget_shopping_cart:after, #astra-mobile-cart-drawer .widget_shopping_cart:before' + ); + + astra_color_responsive_css( + 'woo-cart-colors', + 'astra-settings[header-woo-cart-separator-color]', + 'border-top-color', + '#ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total, #astra-mobile-cart-drawer .widget_shopping_cart .woocommerce-mini-cart__total, .astra-cart-drawer .astra-cart-drawer-header' + ); + + astra_color_responsive_css( + 'woo-cart-border-bottom-colors', + 'astra-settings[header-woo-cart-separator-color]', + 'border-bottom-color', + '#ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total, #astra-mobile-cart-drawer .widget_shopping_cart .woocommerce-mini-cart__total, .astra-cart-drawer .astra-cart-drawer-header, #ast-site-header-cart .widget_shopping_cart .mini_cart_item, #astra-mobile-cart-drawer .widget_shopping_cart .mini_cart_item' + ); + + astra_color_responsive_css( + 'woo-cart-colors', + 'astra-settings[header-woo-cart-link-hover-color]', + 'color', + '.ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart_content a:not(.button):hover, .ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item a.remove:hover, .ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item:hover > a.remove,' + responsive_selector + ' .widget_shopping_cart_content a:not(.button):hover,'+ responsive_selector +' .widget_shopping_cart .mini_cart_item a.remove:hover,'+ responsive_selector + ' .widget_shopping_cart .mini_cart_item:hover > a.remove' + ); + + astra_color_responsive_css( + 'woo-cart-border-colors', + 'astra-settings[header-woo-cart-link-hover-color]', + 'border-color', + selector + ' .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item a.remove:hover,'+ selector + ' .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item:hover > a.remove,' + responsive_selector + ' .widget_shopping_cart .mini_cart_item a.remove:hover,'+ responsive_selector + ' .widget_shopping_cart .mini_cart_item:hover > a.remove' + ); + + astra_color_responsive_css( + 'woo-cart-colors', + 'astra-settings[header-woo-cart-btn-text-color]', + 'color', + selector + ' .ast-site-header-cart-data .widget_shopping_cart_content a.button.wc-forward:not(.checkout),' + responsive_selector + ' .widget_shopping_cart_content a.button.wc-forward:not(.checkout)' + ); + + astra_color_responsive_css( + 'woo-cart-colors', + 'astra-settings[header-woo-cart-btn-background-color]', + 'background-color', + selector + ' .ast-site-header-cart-data .widget_shopping_cart_content a.button.wc-forward:not(.checkout),' + responsive_selector + ' .widget_shopping_cart_content a.button.wc-forward:not(.checkout)' + ); + + astra_color_responsive_css( + 'woo-cart-colors', + 'astra-settings[header-woo-cart-btn-text-hover-color]', + 'color', + selector + ' .ast-site-header-cart-data .widget_shopping_cart_content a.button.wc-forward:not(.checkout):hover,' + responsive_selector + ' .widget_shopping_cart_content a.button.wc-forward:not(.checkout):hover' + ); + + astra_color_responsive_css( + 'woo-cart-colors', + 'astra-settings[header-woo-cart-btn-bg-hover-color]', + 'background-color', + selector + ' .ast-site-header-cart-data .widget_shopping_cart_content a.button.wc-forward:not(.checkout):hover,' + responsive_selector + ' .widget_shopping_cart_content a.button.wc-forward:not(.checkout):hover' + ); + + astra_color_responsive_css( + 'woo-cart-colors', + 'astra-settings[header-woo-checkout-btn-text-color]', + 'color', + selector + ' .ast-site-header-cart-data .widget_shopping_cart_content a.button.checkout.wc-forward,' + responsive_selector + ' .widget_shopping_cart_content a.button.checkout.wc-forward' + ); + + astra_color_responsive_css( + 'woo-cart-colors', + 'astra-settings[header-woo-checkout-btn-background-color]', + 'border-color', + selector + ' .ast-site-header-cart-data .widget_shopping_cart_content a.button.checkout.wc-forward,' + responsive_selector + ' .widget_shopping_cart_content a.button.checkout.wc-forward' + ); + + astra_color_responsive_css( + 'woo-cart-background-color', + 'astra-settings[header-woo-checkout-btn-background-color]', + 'background-color', + selector + ' .ast-site-header-cart-data .widget_shopping_cart_content a.button.checkout.wc-forward,' + responsive_selector + ' .widget_shopping_cart_content a.button.checkout.wc-forward' + ); + + astra_color_responsive_css( + 'woo-cart-background-color', + 'astra-settings[header-woo-checkout-btn-text-hover-color]', + 'color', + selector + ' .ast-site-header-cart-data .widget_shopping_cart_content a.button.checkout.wc-forward:hover,' + responsive_selector + ' .widget_shopping_cart_content a.button.checkout.wc-forward:hover' + ); + + astra_color_responsive_css( + 'woo-cart-background-color', + 'astra-settings[header-woo-checkout-btn-bg-hover-color]', + 'background-color', + selector + ' .ast-site-header-cart-data .widget_shopping_cart_content a.button.checkout.wc-forward:hover,' + responsive_selector + ' .widget_shopping_cart_content a.button.checkout.wc-forward:hover' + ); + + /** + * Cart icon style + */ + wp.customize( 'astra-settings[woo-header-cart-icon-style]', function( setting ) { + setting.bind( function( icon_style ) { + + var buttons = $(document).find('.ast-site-header-cart'); + buttons.removeClass('ast-menu-cart-fill ast-menu-cart-outline ast-menu-cart-none'); + buttons.addClass( 'ast-menu-cart-' + icon_style ); + var dynamicStyle = '.ast-site-header-cart a, .ast-site-header-cart a *{ transition: all 0s; } '; + astra_add_dynamic_css( 'woo-header-cart-icon-style', dynamicStyle ); + wp.customize.preview.send( 'refresh' ); + } ); + } ); + + /** + * Cart icon style + */ + wp.customize( 'astra-settings[header-woo-cart-icon-color]', function( setting ) { + setting.bind( function( color ) { + var dynamicStyle = '.ast-menu-cart-fill .ast-cart-menu-wrap .count, .ast-menu-cart-fill .ast-cart-menu-wrap { background-color: ' + color + '; } '; + astra_add_dynamic_css( 'header-woo-cart-icon-color', dynamicStyle ); + wp.customize.preview.send( 'refresh' ); + } ); + } ); + + /** + * Cart Border Radius + */ + wp.customize( 'astra-settings[woo-header-cart-icon-radius]', function( setting ) { + setting.bind( function( radius ) { + var dynamicStyle = '.ast-site-header-cart.ast-menu-cart-outline .ast-cart-menu-wrap, .ast-site-header-cart.ast-menu-cart-fill .ast-cart-menu-wrap, .ast-site-header-cart.ast-menu-cart-outline .ast-cart-menu-wrap .count, .ast-site-header-cart.ast-menu-cart-fill .ast-cart-menu-wrap .count, .ast-site-header-cart.ast-menu-cart-outline .ast-addon-cart-wrap, .ast-site-header-cart.ast-menu-cart-fill .ast-addon-cart-wrap { border-radius: ' + radius + 'px; } '; + astra_add_dynamic_css( 'woo-header-cart-icon-radius', dynamicStyle ); + } ); + } ); + + /** + * Transparent Header WOO-Cart color options - Customizer preview CSS. + */ + wp.customize( 'astra-settings[transparent-header-woo-cart-icon-color]', function( setting ) { + setting.bind( function( cart_icon_color ) { + wp.customize.preview.send( 'refresh' ); + }); + }); + + // Advanced Visibility CSS Generation. + astra_builder_visibility_css( 'section-header-woo-cart', '.ast-header-woo-cart' ); + +} )( jQuery ); diff --git a/inc/builder/type/header/woo-cart/class-astra-header-woo-cart-component.php b/inc/builder/type/header/woo-cart/class-astra-header-woo-cart-component.php new file mode 100644 index 0000000..abc517e --- /dev/null +++ b/inc/builder/type/header/woo-cart/class-astra-header-woo-cart-component.php @@ -0,0 +1,49 @@ + array( + 'color' => $icon_color, + ), + $selector . ' .ast-cart-menu-wrap .count, ' . $selector . ' .ast-cart-menu-wrap .count:after, ' . $selector . ' .ast-addon-cart-wrap .count, ' . $selector . ' .ast-addon-cart-wrap .ast-icon-shopping-cart:after' => array( + 'color' => $icon_color, + 'border-color' => $icon_color, + ), + $selector . ' .ast-addon-cart-wrap .ast-icon-shopping-cart:after' => array( + 'color' => esc_attr( $theme_h_color ), + 'background-color' => esc_attr( $icon_color ), + ), + $selector . ' .ast-woo-header-cart-info-wrap' => array( + 'color' => esc_attr( $icon_color ), + ), + $selector . ' .ast-addon-cart-wrap i.astra-icon:after' => array( + 'color' => esc_attr( $theme_h_color ), + 'background-color' => esc_attr( $icon_color ), + ), + /** + * Transparent Header - Woo Cart icon color. + */ + $trans_header_selector . ' .ast-cart-menu-wrap, ' . $trans_header_selector . ' .ast-addon-cart-wrap' => array( + 'color' => $transparent_header_icon_color, + ), + $trans_header_selector . ' .ast-cart-menu-wrap .count, ' . $trans_header_selector . ' .ast-cart-menu-wrap .count:after, ' . $trans_header_selector . ' .ast-addon-cart-wrap .count, ' . $trans_header_selector . ' .ast-addon-cart-wrap .ast-icon-shopping-cart:after' => array( + 'color' => $transparent_header_icon_color, + 'border-color' => $transparent_header_icon_color, + ), + $trans_header_selector . ' .ast-addon-cart-wrap .ast-icon-shopping-cart:after' => array( + 'color' => esc_attr( $theme_h_color ), + 'background-color' => esc_attr( $transparent_header_icon_color ), + ), + $trans_header_selector . ' .ast-woo-header-cart-info-wrap' => array( + 'color' => esc_attr( $transparent_header_icon_color ), + ), + $trans_header_selector . ' .ast-addon-cart-wrap i.astra-icon:after' => array( + 'color' => esc_attr( $theme_h_color ), + 'background-color' => esc_attr( $transparent_header_icon_color ), + ), + /** + * General Woo Cart tray color for widget + */ + '.ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart_content a:not(.button)' => array( + 'color' => esc_attr( $cart_link_color_desktop ), + ), + '.ast-site-header-cart-data span, .ast-site-header-cart-data strong, .ast-site-header-cart-data .woocommerce-mini-cart__empty-message, .ast-site-header-cart-data .total .woocommerce-Price-amount, .ast-site-header-cart-data .total .woocommerce-Price-amount .woocommerce-Price-currencySymbol, .ast-header-woo-cart .ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item a.remove' => array( + 'color' => esc_attr( $cart_text_color_desktop ), + ), + '.ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart_content a:not(.button):hover' => array( + 'color' => esc_attr( $cart_h_link_color_desktop ), + ), + '#ast-site-header-cart .widget_shopping_cart' => array( + 'background-color' => esc_attr( $cart_bg_color_desktop ), + 'border-color' => esc_attr( $cart_bg_color_desktop ), + ), + '#ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total, .astra-cart-drawer .astra-cart-drawer-header' => array( + 'border-top-color' => esc_attr( $cart_separator_color_desktop ), + 'border-bottom-color' => esc_attr( $cart_separator_color_desktop ), + ), + '#ast-site-header-cart .widget_shopping_cart .mini_cart_item' => array( + 'border-bottom-color' => astra_hex_to_rgba( $cart_separator_color_desktop ), + ), + '#ast-site-header-cart:hover .widget_shopping_cart:before, #ast-site-header-cart:hover .widget_shopping_cart:after, .open-preview-woocommerce-cart #ast-site-header-cart .widget_shopping_cart:before' => array( + 'border-bottom-color' => esc_attr( $cart_bg_color_desktop ), + ), + '.ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item a.remove' => array( + 'border-color' => esc_attr( $cart_text_color_desktop ), + ), + '.ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item a.remove:hover, .ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart .mini_cart_item:hover > a.remove' => array( + 'color' => esc_attr( $cart_h_link_color_desktop ), + 'border-color' => esc_attr( $cart_h_link_color_desktop ), + 'background-color' => esc_attr( $cart_bg_color_desktop ), + ), + + /** + * Cart button color for widget + */ + '.ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart_content a.button.wc-forward:not(.checkout)' => array( + 'color' => esc_attr( $cart_button_text_color_desktop ), + 'background-color' => esc_attr( $cart_button_bg_color_desktop ), + ), + '.ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart_content a.button.wc-forward:not(.checkout):hover' => array( + 'color' => esc_attr( $cart_button_text_h_color_desktop ), + 'background-color' => esc_attr( $cart_button_bg_h_color_desktop ), + ), + + /** + * Checkout button color for widget + */ + '.ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart_content a.button.checkout.wc-forward' => array( + 'color' => esc_attr( $checkout_button_text_color_desktop ), + 'border-color' => esc_attr( $checkout_button_bg_color_desktop ), + 'background-color' => esc_attr( $checkout_button_bg_color_desktop ), + ), + '.ast-site-header-cart .ast-site-header-cart-data .widget_shopping_cart_content a.button.checkout.wc-forward:hover' => array( + 'color' => esc_attr( $checkout_button_text_h_color_desktop ), + 'background-color' => esc_attr( $checkout_button_bg_h_color_desktop ), + ), + ); + + /* Parse CSS from array() */ + $css_output = astra_parse_css( $css_output_desktop ); + $responsive_selector = '.astra-cart-drawer.woocommerce-active'; + + $css_output_mobile = array( + $responsive_selector . ' .astra-cart-drawer-title, ' . $responsive_selector . ' .widget_shopping_cart_content span, ' . $responsive_selector . ' .widget_shopping_cart_content strong,' . $responsive_selector . ' .woocommerce-mini-cart__empty-message, .astra-cart-drawer .woocommerce-mini-cart *' => array( + 'color' => esc_attr( $cart_text_color_mobile ), + ), + $responsive_selector . ' .widget_shopping_cart .mini_cart_item a.remove' => array( + 'border-color' => esc_attr( $cart_text_color_mobile ), + ), + $responsive_selector . '#astra-mobile-cart-drawer' => array( + 'background-color' => esc_attr( $cart_bg_color_mobile ), + 'border-color' => esc_attr( $cart_bg_color_mobile ), + ), + '#astra-mobile-cart-drawer:hover .widget_shopping_cart:before, #astra-mobile-cart-drawer:hover .widget_shopping_cart:after, .open-preview-woocommerce-cart #astra-mobile-cart-drawer .widget_shopping_cart:before' => array( + 'border-bottom-color' => esc_attr( $cart_bg_color_mobile ), + ), + $responsive_selector . ' .widget_shopping_cart .mini_cart_item a.remove:hover,' . $responsive_selector . ' .widget_shopping_cart .mini_cart_item:hover > a.remove' => array( + 'color' => esc_attr( $cart_h_link_color_mobile ), + 'border-color' => esc_attr( $cart_h_link_color_mobile ), + 'background-color' => esc_attr( $cart_bg_color_mobile ), + ), + $responsive_selector . ' .widget_shopping_cart_content a:not(.button)' => array( + 'color' => esc_attr( $cart_link_color_mobile ), + ), + '#astra-mobile-cart-drawer .widget_shopping_cart .woocommerce-mini-cart__total, .astra-cart-drawer.woocommerce-active .astra-cart-drawer-header' => array( + 'border-top-color' => esc_attr( $cart_separator_color_mobile ), + 'border-bottom-color' => esc_attr( $cart_separator_color_mobile ), + ), + '#astra-mobile-cart-drawer .widget_shopping_cart .mini_cart_item' => array( + 'border-bottom-color' => astra_hex_to_rgba( $cart_separator_color_mobile ), + ), + $responsive_selector . ' .widget_shopping_cart_content a:not(.button):hover' => array( + 'color' => esc_attr( $cart_h_link_color_mobile ), + ), + /** + * Checkout button color for widget + */ + $responsive_selector . ' .widget_shopping_cart_content a.button.checkout.wc-forward' => array( + 'color' => esc_attr( $checkout_button_text_color_mobile ), + 'border-color' => esc_attr( $checkout_button_bg_color_mobile ), + 'background-color' => esc_attr( $checkout_button_bg_color_mobile ), + ), + $responsive_selector . ' .widget_shopping_cart_content a.button.checkout.wc-forward:hover' => array( + 'color' => esc_attr( $checkout_button_text_h_color_mobile ), + 'background-color' => esc_attr( $checkout_button_bg_h_color_mobile ), + ), + + /** + * Cart button color for widget + */ + $responsive_selector . ' .widget_shopping_cart_content a.button.wc-forward:not(.checkout)' => array( + 'color' => esc_attr( $cart_button_text_color_mobile ), + 'background-color' => esc_attr( $cart_button_bg_color_mobile ), + ), + $responsive_selector . ' .widget_shopping_cart_content a.button.wc-forward:not(.checkout):hover' => array( + 'color' => esc_attr( $cart_button_text_h_color_mobile ), + 'background-color' => esc_attr( $cart_button_bg_h_color_mobile ), + ), + + ); + + $css_output_tablet = array( + $responsive_selector . ' .astra-cart-drawer-title, ' . $responsive_selector . ' .widget_shopping_cart_content span, ' . $responsive_selector . ' .widget_shopping_cart_content strong,' . $responsive_selector . ' .woocommerce-mini-cart__empty-message, .astra-cart-drawer .woocommerce-mini-cart *' => array( + 'color' => esc_attr( $cart_text_color_tablet ), + ), + $responsive_selector . ' .widget_shopping_cart .mini_cart_item a.remove' => array( + 'border-color' => esc_attr( $cart_text_color_tablet ), + ), + $responsive_selector . '#astra-mobile-cart-drawer' => array( + 'background-color' => esc_attr( $cart_bg_color_tablet ), + 'border-color' => esc_attr( $cart_bg_color_tablet ), + ), + '#astra-mobile-cart-drawer:hover .widget_shopping_cart:before, #astra-mobile-cart-drawer:hover .widget_shopping_cart:after, .open-preview-woocommerce-cart #astra-mobile-cart-drawer .widget_shopping_cart:before' => array( + 'border-bottom-color' => esc_attr( $cart_bg_color_tablet ), + ), + $responsive_selector . ' .widget_shopping_cart .mini_cart_item a.remove:hover,' . $responsive_selector . ' .widget_shopping_cart .mini_cart_item:hover > a.remove' => array( + 'color' => esc_attr( $cart_h_link_color_tablet ), + 'border-color' => esc_attr( $cart_h_link_color_tablet ), + 'background-color' => esc_attr( $cart_bg_color_tablet ), + ), + $responsive_selector . ' .widget_shopping_cart_content a:not(.button)' => array( + 'color' => esc_attr( $cart_link_color_tablet ), + ), + '#astra-mobile-cart-drawer .widget_shopping_cart .woocommerce-mini-cart__total, .astra-cart-drawer .astra-cart-drawer-header' => array( + 'border-top-color' => esc_attr( $cart_separator_color_tablet ), + 'border-bottom-color' => esc_attr( $cart_separator_color_tablet ), + ), + '#astra-mobile-cart-drawer .widget_shopping_cart .mini_cart_item' => array( + 'border-bottom-color' => astra_hex_to_rgba( $cart_separator_color_tablet ), + ), + $responsive_selector . ' .widget_shopping_cart_content a:not(.button):hover' => array( + 'color' => esc_attr( $cart_h_link_color_tablet ), + ), + /** + * Checkout button color for widget + */ + $responsive_selector . ' .widget_shopping_cart_content a.button.checkout.wc-forward' => array( + 'color' => esc_attr( $checkout_button_text_color_tablet ), + 'border-color' => esc_attr( $checkout_button_bg_color_tablet ), + 'background-color' => esc_attr( $checkout_button_bg_color_tablet ), + ), + $responsive_selector . ' .widget_shopping_cart_content a.button.checkout.wc-forward:hover' => array( + 'color' => esc_attr( $checkout_button_text_h_color_tablet ), + 'background-color' => esc_attr( $checkout_button_bg_h_color_tablet ), + ), + + /** + * Cart button color for widget + */ + $responsive_selector . ' .widget_shopping_cart_content a.button.wc-forward:not(.checkout)' => array( + 'color' => esc_attr( $cart_button_text_color_tablet ), + 'background-color' => esc_attr( $cart_button_bg_color_tablet ), + ), + $responsive_selector . ' .widget_shopping_cart_content a.button.wc-forward:not(.checkout):hover' => array( + 'color' => esc_attr( $cart_button_text_h_color_tablet ), + 'background-color' => esc_attr( $cart_button_bg_h_color_tablet ), + ), + + ); + + $css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() ); + $css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() ); + + if ( 'none' !== $header_cart_icon_style ) { + + $header_cart_icon = array( + + $selector . ' .ast-cart-menu-wrap, ' . $selector . ' .ast-addon-cart-wrap' => array( + 'color' => $icon_color, + ), + // Outline icon hover colors. + '.ast-site-header-cart .ast-cart-menu-wrap:hover .count, .ast-site-header-cart .ast-addon-cart-wrap:hover .count' => array( + 'color' => esc_attr( $cart_h_color ), + 'background-color' => esc_attr( $icon_color ), + ), + // Outline icon colors. + '.ast-menu-cart-outline .ast-cart-menu-wrap .count, .ast-menu-cart-outline .ast-addon-cart-wrap' => array( + 'color' => esc_attr( $icon_color ), + ), + // Outline Info colors. + $selector . ' .ast-menu-cart-outline .ast-woo-header-cart-info-wrap' => array( + 'color' => esc_attr( $icon_color ), + ), + + // Fill icon Color. + '.ast-menu-cart-fill .ast-cart-menu-wrap .count,.ast-menu-cart-fill .ast-cart-menu-wrap, .ast-menu-cart-fill .ast-addon-cart-wrap .ast-woo-header-cart-info-wrap,.ast-menu-cart-fill .ast-addon-cart-wrap' => array( + 'background-color' => esc_attr( $icon_color ), + 'color' => esc_attr( $cart_h_color ), + ), + + // Transparent Header - Cart Icon color. + $trans_header_selector . ' .ast-cart-menu-wrap, ' . $trans_header_selector . ' .ast-addon-cart-wrap' => array( + 'color' => $transparent_header_icon_color, + ), + // Outline icon hover colors. + '.ast-theme-transparent-header .ast-site-header-cart .ast-cart-menu-wrap:hover .count, .ast-theme-transparent-header .ast-site-header-cart .ast-addon-cart-wrap:hover .count' => array( + 'color' => esc_attr( $transparent_header_cart_h_color ), + 'background-color' => esc_attr( $transparent_header_icon_color ), + ), + // Outline icon colors. + '.ast-theme-transparent-header .ast-menu-cart-outline .ast-cart-menu-wrap .count, .ast-theme-transparent-header .ast-menu-cart-outline .ast-addon-cart-wrap' => array( + 'color' => esc_attr( $transparent_header_icon_color ), + ), + // Outline Info colors. + $trans_header_selector . ' .ast-menu-cart-outline .ast-woo-header-cart-info-wrap' => array( + 'color' => esc_attr( $transparent_header_icon_color ), + ), + + // Fill icon Color. + '.ast-theme-transparent-header .ast-menu-cart-fill .ast-cart-menu-wrap .count, .ast-theme-transparent-header .ast-menu-cart-fill .ast-cart-menu-wrap, .ast-theme-transparent-header .ast-menu-cart-fill .ast-addon-cart-wrap .ast-woo-header-cart-info-wrap, .ast-theme-transparent-header .ast-menu-cart-fill .ast-addon-cart-wrap' => array( + 'background-color' => esc_attr( $transparent_header_icon_color ), + 'color' => esc_attr( $transparent_header_cart_h_color ), + ), + + // Border radius. + '.ast-site-header-cart.ast-menu-cart-outline .ast-cart-menu-wrap, .ast-site-header-cart.ast-menu-cart-fill .ast-cart-menu-wrap, .ast-site-header-cart.ast-menu-cart-outline .ast-cart-menu-wrap .count, .ast-site-header-cart.ast-menu-cart-fill .ast-cart-menu-wrap .count, .ast-site-header-cart.ast-menu-cart-outline .ast-addon-cart-wrap, .ast-site-header-cart.ast-menu-cart-fill .ast-addon-cart-wrap, .ast-site-header-cart.ast-menu-cart-outline .ast-woo-header-cart-info-wrap, .ast-site-header-cart.ast-menu-cart-fill .ast-woo-header-cart-info-wrap' => array( + 'border-radius' => astra_get_css_value( $header_cart_icon_radius, 'px' ), + ), + ); + + // We adding this conditional CSS only to maintain backwards. Remove this condition after 2-3 updates of add-on. + if ( defined( 'ASTRA_EXT_VER' ) && version_compare( ASTRA_EXT_VER, '3.4.2', '<' ) ) { + // Outline cart style border. + $header_cart_icon['.ast-menu-cart-outline .ast-cart-menu-wrap .count, .ast-menu-cart-outline .ast-addon-cart-wrap'] = array( + 'border' => '2px solid ' . $icon_color, + 'color' => esc_attr( $icon_color ), + ); + // Transparent Header outline cart style border. + $header_cart_icon['.ast-theme-transparent-header .ast-menu-cart-outline .ast-cart-menu-wrap .count, .ast-theme-transparent-header .ast-menu-cart-outline .ast-addon-cart-wrap'] = array( + 'border' => '2px solid ' . $transparent_header_icon_color, + 'color' => esc_attr( $transparent_header_icon_color ), + ); + } + + $css_output .= astra_parse_css( $header_cart_icon ); + } + + $css_output .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( 'section-header-woo-cart', '.ast-header-woo-cart' ); + + $dynamic_css .= $css_output; + + return $dynamic_css; +} -- cgit v1.2.3-60-g2f50