From a95dd10fb3fe429ca066078b1d8720a1cfa2abb5 Mon Sep 17 00:00:00 2001 From: Maheswar M Date: Wed, 5 Feb 2025 15:46:46 +0530 Subject: [PATCH 1/3] Implement new Search element in header builder WP-7714 --- Gruntfile.js | 1 + .../js/customize-preview-color-control.js | 101 +++++++ .../customize-preview-drag-number-control.js | 77 ++++++ .../js/customize-preview-number-control.js | 32 +++ .../js/customize-preview-padding-control.js | 14 + .../js/customize-preview-select-control.js | 16 ++ .../assets/js/typography-customize-preview.js | 122 +++++++++ .../min/css/horizontal-separator.min.css | 4 + ...-customizer-color-with-devices-control.php | 110 ++++++++ .../customizer/controls/color/color.css | 11 +- core/includes/customizer/controls/general.css | 36 ++- .../controls/selectbtn/selectbtn.css | 3 + core/includes/customizer/custom-styles.php | 156 +++++++++++ core/includes/customizer/customizer.php | 4 +- .../src/color-with-devices/color-component.js | 94 +++++++ .../color-picker-control.js | 179 +++++++++++++ .../src/color-with-devices/control.js | 62 +++++ .../extend-controls/src/customizer.js | 48 ++++ .../customizer/extend-controls/src/icons.js | 6 +- .../customizer/extend-controls/src/index.js | 4 +- .../src/tabs/tabs-component.js | 64 +++++ core/includes/customizer/helper.php | 70 ++++- ...ponsive-header-menu-layouts-customizer.php | 50 ++-- ...ss-responsive-header-search-customizer.php | 249 ++++++++++++++++++ ...class-responsive-typography-customizer.php | 12 + ...class-responsive-header-footer-builder.php | 4 +- core/includes/functions.php | 18 +- core/js-dev/navigation.js | 35 --- core/js-dev/searchform.js | 95 +++++++ core/sass/_header.scss | 111 +++++--- functions.php | 6 + searchform.php | 18 -- template-parts/header/search.php | 102 +++++++ template-parts/header/social.php | 2 +- template-parts/header/woo-cart.php | 2 +- 35 files changed, 1794 insertions(+), 124 deletions(-) create mode 100644 core/includes/customizer/controls/color-with-devices/class-responsive-customizer-color-with-devices-control.php create mode 100644 core/includes/customizer/extend-controls/src/color-with-devices/color-component.js create mode 100644 core/includes/customizer/extend-controls/src/color-with-devices/color-picker-control.js create mode 100644 core/includes/customizer/extend-controls/src/color-with-devices/control.js create mode 100644 core/includes/customizer/settings/class-responsive-header-search-customizer.php create mode 100644 core/js-dev/searchform.js create mode 100644 template-parts/header/search.php diff --git a/Gruntfile.js b/Gruntfile.js index 7707d17ec..141ed56a8 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -201,6 +201,7 @@ module.exports = function(grunt) { 'core/includes/customizer/assets/min/css/row-layout.min.css':'core/includes/customizer/controls/builder-row-layout/row-layout.css', 'core/includes/customizer/assets/min/css/shadow.min.css':'core/includes/customizer/controls/shadow/shadow.css', 'core/includes/customizer/assets/min/css/font-presets.min.css':'core/includes/customizer/controls/fontpresets/font-presets.css', + 'core/includes/customizer/assets/min/css/color.min.css':'core/includes/customizer/controls/color/color.css', } } }, diff --git a/core/includes/customizer/assets/js/customize-preview-color-control.js b/core/includes/customizer/assets/js/customize-preview-color-control.js index 70cf0d7f2..5c848fd41 100644 --- a/core/includes/customizer/assets/js/customize-preview-color-control.js +++ b/core/includes/customizer/assets/js/customize-preview-color-control.js @@ -2264,4 +2264,105 @@ jQuery('head').append(``); }); }); + // Header Search Color. + api( 'responsive_header_search_color', function(setting){ + setting.bind(function(color){ + jQuery('style#responsive-header-search-color').remove(); + jQuery('head').append( + '' + ); + }); + }); + // Header Search Hover Color. + api( 'responsive_header_search_hover_color', function(setting){ + setting.bind(function(color){ + jQuery('style#responsive-header-search-hover-color').remove(); + jQuery('head').append( + '' + ); + }); + }); + // Header Search Background Color. + api( 'responsive_header_search_background_color', function(setting){ + setting.bind(function(color){ + jQuery('style#responsive-header-search-background-color').remove(); + jQuery('head').append( + '' + ); + }); + }); + // Header Search Background Hover Color. + api( 'responsive_header_search_background_hover_color', function(setting){ + setting.bind(function(color){ + jQuery('style#responsive-header-search-background-hover-color').remove(); + jQuery('head').append( + '' + ); + }); + }); + // Header Search Text Color. + api( 'responsive_header_search_text_color', function(setting){ + setting.bind(function(color){ + jQuery('style#responsive-header-search-text-color').remove(); + jQuery('head').append( + '' + ); + }); + }); + // Header Search Text Hover Color. + api( 'responsive_header_search_text_hover_color', function(setting){ + setting.bind(function(color){ + jQuery('style#responsive-header-search-text-hover-color').remove(); + jQuery('head').append( + '' + ); + }); + }); + // Header Search Modal Background. + api('responsive_header_search_modal_background_color', function(setting) { + setting.bind(function(color) { + jQuery('style#responsive-header-search-modal-background-color').remove(); + jQuery('head').append( + '' + ); + }); + }); + // Header Search Modal Background Tablet. + api('responsive_header_search_modal_background_color_tablet', function(setting) { + setting.bind(function(color) { + jQuery('style#responsive-header-search-modal-background-color-tablet').remove(); + jQuery('head').append( + '' + ); + }); + }); + // Header Search Modal Background Mobile. + api('responsive_header_search_modal_background_color_mobile', function(setting) { + setting.bind(function(color) { + jQuery('style#responsive-header-search-modal-background-color-mobile').remove(); + jQuery('head').append( + '' + ); + }); + }); } )( jQuery ); diff --git a/core/includes/customizer/assets/js/customize-preview-drag-number-control.js b/core/includes/customizer/assets/js/customize-preview-drag-number-control.js index 4c9ac2918..61abdd566 100644 --- a/core/includes/customizer/assets/js/customize-preview-drag-number-control.js +++ b/core/includes/customizer/assets/js/customize-preview-drag-number-control.js @@ -575,4 +575,81 @@ }); }); + // Header Search Icon Size. + api('responsive_header_search_icon_size', function(value) { + value.bind(function(newval) { + jQuery('style#responsive-header-search-icon-size').remove(); + jQuery('head').append( + '' + ); + }); + }); + + api('responsive_header_search_icon_size_tablet', function(value) { + value.bind(function(newval) { + jQuery('style#responsive-header-search-icon-size-tablet').remove(); + jQuery('head').append( + '' + ); + }); + }); + + api('responsive_header_search_icon_size_mobile', function(value) { + value.bind(function(newval) { + jQuery('style#responsive-header-search-icon-size-mobile').remove(); + jQuery('head').append( + '' + ); + }); + }); + // Header Search Width. + api('responsive_header_search_width', function(value) { + value.bind(function(newval) { + jQuery('style#responsive-header-search-width').remove(); + jQuery('head').append( + '' + ); + }); + }); + + api('responsive_header_search_width_tablet', function(value) { + value.bind(function(newval) { + jQuery('style#responsive-header-search-width-tablet').remove(); + jQuery('head').append( + '' + ); + }); + }); + + api('responsive_header_search_width_mobile', function(value) { + value.bind(function(newval) { + jQuery('style#responsive-header-search-width-mobile').remove(); + jQuery('head').append( + '' + ); + }); + }); + } )( jQuery ); diff --git a/core/includes/customizer/assets/js/customize-preview-number-control.js b/core/includes/customizer/assets/js/customize-preview-number-control.js index 20098ce5b..c87901f1e 100644 --- a/core/includes/customizer/assets/js/customize-preview-number-control.js +++ b/core/includes/customizer/assets/js/customize-preview-number-control.js @@ -267,5 +267,37 @@ }); }); }); + // Apply Header Search element border radius - Start. + const headerSearchBorderRadius = [ + 'responsive_header_search_border_radius_top_left_radius', + 'responsive_header_search_border_radius_bottom_left_radius', + 'responsive_header_search_border_radius_bottom_right_radius', + 'responsive_header_search_border_radius_top_right_radius', + 'responsive_header_search_border_radius_tablet_top_left_radius', + 'responsive_header_search_border_radius_tablet_top_right_radius', + 'responsive_header_search_border_radius_tablet_bottom_right_radius', + 'responsive_header_search_border_radius_tablet_bottom_left_radius', + 'responsive_header_search_border_radius_mobile_top_left_radius', + 'responsive_header_search_border_radius_mobile_top_right_radius', + 'responsive_header_search_border_radius_mobile_bottom_right_radius', + 'responsive_header_search_border_radius_mobile_bottom_left_radius', + ]; + headerSearchBorderRadius.forEach(setting => { + api(setting, function(value) { + value.bind(function(newval) { + responsive_dynamic_radius( 'header_search_border', '.responsive-header-search-icon-wrap' ); + }); + }); + }); + api( 'responsive_header_search_style_design', function(setting) { + setting.bind(function(style) { + if( 'bordered' === style ) { + headerSearchBorderRadius.forEach(setting => { + responsive_dynamic_radius( 'header_search_border', '.responsive-header-search-icon-wrap' ); + }); + } + }); + }); + // Apply Header Search element border radius - End } )( jQuery ); diff --git a/core/includes/customizer/assets/js/customize-preview-padding-control.js b/core/includes/customizer/assets/js/customize-preview-padding-control.js index ac702723b..91018442f 100644 --- a/core/includes/customizer/assets/js/customize-preview-padding-control.js +++ b/core/includes/customizer/assets/js/customize-preview-padding-control.js @@ -2005,6 +2005,20 @@ api( 'responsive_product_card_inside_container_mobile_bottom_padding', function( responsive_bind_spacing_changes('margin', suffix, 'header_woo_cart', '.responsive-header-cart .res-addon-cart-wrap', responsive_dynamic_margin); }); + // Generic function to bind header search padding and amrgin changes dynamically. + function responsive_bind_spacing_changes(type, suffix, control, selector, callback) { + const setting_id = `responsive_${control}_${type}_${suffix}`; + wp.customize(setting_id, function (value) { + value.bind(function () { + callback(`${control}_${type}`, selector); + }); + }); + } + suffixes.forEach(function (suffix) { + responsive_bind_spacing_changes('padding', suffix, 'header_search', '.responsive-header-search-icon-wrap', responsive_dynamic_padding); + responsive_bind_spacing_changes('margin', suffix, 'header_search', '.responsive-header-search-icon-wrap', responsive_dynamic_margin); + }); + const headerButtonPadding = [ 'responsive_header_button_top_padding', 'responsive_header_button_right_padding', diff --git a/core/includes/customizer/assets/js/customize-preview-select-control.js b/core/includes/customizer/assets/js/customize-preview-select-control.js index fe3b77dab..3a5532b5b 100644 --- a/core/includes/customizer/assets/js/customize-preview-select-control.js +++ b/core/includes/customizer/assets/js/customize-preview-select-control.js @@ -751,6 +751,22 @@ } }); }); + // Header Search Style Design + api( 'responsive_header_search_style_design', function (style){ + style.bind(function (design) { + if( 'bordered' === design ){ + $( '.responsive-header-search-icon-wrap' ).css( 'border', api( 'responsive_header_search_border' ).get()+'px solid currentColor' ); + } else { + $( '.responsive-header-search-icon-wrap' ).css( 'border', 0 ); + } + }); + }); + // Header Search Border. + api( 'responsive_header_search_border', function (setting){ + setting.bind(function (width) { + $( '.responsive-header-search-icon-wrap' ).css( 'border', width+'px solid currentColor' ); + }); + }); } )( jQuery ); diff --git a/core/includes/customizer/assets/js/typography-customize-preview.js b/core/includes/customizer/assets/js/typography-customize-preview.js index 88b2f99b8..f7d5b5a9d 100644 --- a/core/includes/customizer/assets/js/typography-customize-preview.js +++ b/core/includes/customizer/assets/js/typography-customize-preview.js @@ -2870,5 +2870,127 @@ } ); } ) + // Header Search Label Typography - Start + api( "header_search_label_typography[text-transform]", function( $swipe ) { + $swipe.bind( function( dataAndEvents ) { + jQuery( 'style.customizer-typography-header_search_label_typography-text-transform' ).remove(); + jQuery( 'head' ).append( + '' + ); + } ); + } ), + api( "header_search_label_typography[font-family]", function( $swipe ) { + $swipe.bind( function( pair ) { + if ( pair ) { + /** @type {string} */ + var fontName = pair.split(",")[0]; + fontName = fontName.replace(/'/g, ''); + var idfirst = ( fontName.trim().toLowerCase().replace( " ", "-" ), "customize-control-header_search_label_typography-font-family" ); + var fontSize = fontName.replace( " ", "%20" ); + fontSize = fontSize.replace( ",", "%2C" ); + /** @type {string} */ + fontSize = responsive.googleFontsUrl + "/css?family=" + fontName + ":" + responsive.googleFontsWeight; + if ( fontName in responsive.googleFonts ) { + if ($("#" + idfirst).length) { + $("#" + idfirst).attr("href", fontSize); + } else { + $("head").append(''); + } + } + } + jQuery( 'style.customizer-typography-header_search_label_typography-font-family' ).remove(); + jQuery( 'head' ).append( + '' + ); + } ); + } ), + api( "header_search_label_typography[font-weight]", function( $swipe ) { + $swipe.bind( function( dataAndEvents ) { + jQuery( 'style.customizer-typography-header_search_label_typography-font-weight' ).remove(); + jQuery( 'head' ).append( + '' + ); + } ); + } ), + api( "header_search_label_typography[font-size]", function( $swipe ) { + $swipe.bind( function( dataAndEvents ) { + jQuery( 'style.customizer-typography-header_search_label_typography-font-size' ).remove(); + jQuery( 'head' ).append( + '' + ); + } ); + } ), + api( "header_search_label_tablet_typography[font-size]", function( $swipe ) { + $swipe.bind( function( dataAndEvents ) { + jQuery( 'style.customizer-typography-header_search_label_typography-tablet-font-size' ).remove(); + jQuery( 'head' ).append( + '' + ); + } ); + } ), + api( "header_search_label_mobile_typography[font-size]", function( $swipe ) { + $swipe.bind( function( dataAndEvents ) { + jQuery( 'style.customizer-typography-header_search_label_typography-mobile-font-size' ).remove(); + jQuery( 'head' ).append( + '' + ); + } ); + }), + api( "header_search_label_typography[line-height]", function( $swipe ) { + $swipe.bind( function( dataAndEvents ) { + jQuery( 'style.customizer-typography-header_search_label_typography-line-height' ).remove(); + jQuery( 'head' ).append( + '' + ); + } ); + } ), + api( "header_search_label_typography[letter-spacing]", function( $swipe ) { + $swipe.bind( function( dataAndEvents ) { + jQuery( 'style.customizer-typography-header_search_label_typography-letter-spacing' ).remove(); + jQuery( 'head' ).append( + '' + ); + } ); + } ), + api( "header_search_label_typography[text-transform]", function( $swipe ) { + $swipe.bind( function( dataAndEvents ) { + jQuery( 'style.customizer-typography-header_search_label_typography-text-transform' ).remove(); + jQuery( 'head' ).append( + '' + ); + } ); + } ), + api( "header_search_label_typography[font-style]", function( $swipe ) { + $swipe.bind( function( dataAndEvents ) { + jQuery( 'style.customizer-typography-header_search_label_typography-font-style' ).remove(); + jQuery( 'head' ).append( + '' + ); + } ); + } ) + // Header Search Label Typography - End } )( jQuery ); diff --git a/core/includes/customizer/assets/min/css/horizontal-separator.min.css b/core/includes/customizer/assets/min/css/horizontal-separator.min.css index a5782565f..42daeae60 100644 --- a/core/includes/customizer/assets/min/css/horizontal-separator.min.css +++ b/core/includes/customizer/assets/min/css/horizontal-separator.min.css @@ -37,4 +37,8 @@ #customize-control-responsive_header_woo_cart_separator_13 .responsive-horizontal-separator-control-wrapper, #customize-control-responsive_header_woo_cart_separator_14 .responsive-horizontal-separator-control-wrapper { padding-bottom: 24px; +} +#sub-accordion-section-responsive_header_search .customize-control-responsive-horizontal-separator { + padding-top: 24px; + padding-bottom: 24px; } \ No newline at end of file diff --git a/core/includes/customizer/controls/color-with-devices/class-responsive-customizer-color-with-devices-control.php b/core/includes/customizer/controls/color-with-devices/class-responsive-customizer-color-with-devices-control.php new file mode 100644 index 000000000..b7b2f6ff1 --- /dev/null +++ b/core/includes/customizer/controls/color-with-devices/class-responsive-customizer-color-with-devices-control.php @@ -0,0 +1,110 @@ +render_content() for the internals. + * + * @see WP_Customize_Control::render() + */ + protected function render() { + $id = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id ); + $class = 'customize-control has-switchers customize-control-' . $this->type; + + ?>
  • + render_content(); ?> +
    • + json['show_opacity'] = true; + $this->json['value'] = $this->value(); + $this->json['link'] = $this->get_link(); + $this->json['id'] = $this->id; + $this->json['colorPalettes'] = responsive_default_color_palettes(); + + foreach ( $this->settings as $setting_key => $setting ) { + $this->json[ $setting_key ] = array( + 'id' => $setting->id, + 'default' => $setting->default, + 'link' => $this->get_link( $setting_key ), + 'value' => $this->value( $setting_key ), + ); + } + + } + + /** + * An Underscore (JS) template for this control's content (but not its container). + * + * Class variables for this control class are available in the `data` JS object; + * export custom variables by overriding {@see WP_Customize_Control::to_json()}. + * + * @see WP_Customize_Control::print_template() + * + * @access protected + */ + protected function render_content() {} + } +endif; \ No newline at end of file diff --git a/core/includes/customizer/controls/color/color.css b/core/includes/customizer/controls/color/color.css index c51ecdf37..11b7f60b7 100644 --- a/core/includes/customizer/controls/color/color.css +++ b/core/includes/customizer/controls/color/color.css @@ -484,6 +484,10 @@ element.style { box-shadow: 0px 0px 20px 0px #00000040; border-radius: 4px; } +body.wp-customizer .responsive-color-control-main-wrap .wp-picker-container { + display: flex; + gap: 20px; +} body.wp-customizer .responsive-color-control-main-wrap .wp-picker-container .wp-color-result.button { padding: 0; width: 30px; @@ -495,6 +499,8 @@ body.wp-customizer .responsive-color-control-main-wrap .wp-picker-container .wp- } .responsive-color-control-main-wrap .components-color-picker .react-colorful__saturation { margin-bottom: 24px; + border-top-right-radius: 4px; + border-top-left-radius: 4px; } .responsive-color-control-main-wrap .components-color-picker .react-colorful__hue, .responsive-color-control-main-wrap .components-color-picker .react-colorful__alpha { @@ -598,7 +604,7 @@ body.wp-customizer .responsive-color-control-main-wrap .wp-picker-container .wp- } .tooltip-container .tooltip-text::after{ position: absolute; - top: 77%; + top: 72%; left: 43%; height: 0; width: 0; @@ -607,4 +613,7 @@ body.wp-customizer .responsive-color-control-main-wrap .wp-picker-container .wp- border-right: 4px solid transparent; margin: 6px 0 0; content: ""; +} +#sub-accordion-section-responsive_header_search .wp-picker-holder { + top: 35px; } \ No newline at end of file diff --git a/core/includes/customizer/controls/general.css b/core/includes/customizer/controls/general.css index 8c9b38d07..f08299776 100644 --- a/core/includes/customizer/controls/general.css +++ b/core/includes/customizer/controls/general.css @@ -197,7 +197,8 @@ select { display: flex; line-height: 1; margin-top: 20px; - margin-bottom: 10px + margin-bottom: 10px; + align-items: center; } .customize-control.has-switchers .customize-control-title span { @@ -1530,4 +1531,37 @@ body.rtl .customize-control .responsive-switchers li { } #customize-control-responsive_header_widget_color_separator { margin-top: 0; +} +#sub-accordion-section-responsive_header_search { + padding-bottom: 24px !important; +} +#sub-accordion-section-responsive_header_search .customize-control-title { + margin-top: 0; +} +#sub-accordion-section-responsive_header_search .responsive-color-control-main-wrap { + padding: 0; +} +#sub-accordion-section-responsive_header_search .responsive-color-control-main-wrap .customize-control-title { + margin-bottom: 0; +} +#sub-accordion-section-responsive_header_search .responsive-range-control-label { + margin-bottom: 6px; +} +#sub-accordion-section-responsive_header_search .responsive-range-control-label .customize-control-title { + margin-bottom: 0; +} +#sub-accordion-section-responsive_header_search .customize-control-multi-select-title { + margin-bottom: 6px; +} +#customize-control-search_style, +#customize-control-responsive_header_search_style_design { + padding-top: 24px; +} +#customize-control-responsive_header_search_modal_options_separator { + margin-top: 0; +} +#customize-control-responsive_header_search_modal_options_separator h4 { + border: none; + padding-top: 0; + padding-bottom: 24px; } \ No newline at end of file diff --git a/core/includes/customizer/controls/selectbtn/selectbtn.css b/core/includes/customizer/controls/selectbtn/selectbtn.css index 8886ec630..ac6a76f0f 100644 --- a/core/includes/customizer/controls/selectbtn/selectbtn.css +++ b/core/includes/customizer/controls/selectbtn/selectbtn.css @@ -40,4 +40,7 @@ } #customize-control-responsive_header_woo_cart_click_action label { margin-top: 22px; +} +#customize-control-responsive_header_search_icon .customize-control-responsive-selectbtn__button.active svg path{ + fill: #FFF; } \ No newline at end of file diff --git a/core/includes/customizer/custom-styles.php b/core/includes/customizer/custom-styles.php index c4c18e0d4..76a579fd4 100644 --- a/core/includes/customizer/custom-styles.php +++ b/core/includes/customizer/custom-styles.php @@ -4801,6 +4801,162 @@ function responsive_build_responsive_padding_spacing_css( $padding ) { $custom_css .= responsive_build_responsive_spacing_css($header_woo_cart_padding_values['mobile'], $header_woo_cart_margin_values['mobile']); $custom_css .= "}}"; + if ( Responsive\Core\responsive_check_element_present_in_hfb( 'search', 'header' ) ) { + + //Header Search Element CSS - Start + $header_search_label_visibility = get_theme_mod( 'responsive_header_search_label_visibility', array( 'desktop', 'tablet', 'mobile' ) ); + $custom_css .= ".responsive-header-search-icon-wrap .responsive-header-search-label { display: " . ( in_array( 'desktop', $header_search_label_visibility ) ? "block" : "none" ) . "; }"; + + $custom_css .= "@media screen and (max-width: 992px) { .responsive-header-search-icon-wrap .responsive-header-search-label { display: " . ( in_array( 'tablet', $header_search_label_visibility ) ? "block" : "none" ) . "; } }"; + + $custom_css .= "@media screen and (max-width: 576px) { .responsive-header-search-icon-wrap .responsive-header-search-label { display: " . ( in_array( 'mobile', $header_search_label_visibility ) ? "block" : "none" ) . "; } }"; + + $header_search_design_style = esc_html( get_theme_mod( 'responsive_header_search_style_design', 'bordered' ) ); + $header_search_border_width = esc_html( get_theme_mod( 'responsive_header_search_border', 1 ) ); + $header_search_width = esc_html( get_theme_mod( 'responsive_header_search_width', 300 ) ); + $header_search_width_tablet = esc_html( get_theme_mod( 'responsive_header_search_width_tablet', 200 ) ); + $header_search_width_mobile = esc_html( get_theme_mod( 'responsive_header_search_width_mobile', 100 ) ); + $header_search_icon_size = esc_html( get_theme_mod( 'responsive_header_search_icon_size', 16 ) ); + $header_search_icon_size_tablet = esc_html( get_theme_mod( 'responsive_header_search_icon_size_tablet', 16 ) ); + $header_search_icon_size_mobile = esc_html( get_theme_mod( 'responsive_header_search_icon_size_mobile', 16 ) ); + $header_search_color = esc_html( get_theme_mod( 'responsive_header_search_color', Responsive\Core\get_responsive_customizer_defaults( 'responsive_header_search_color' ) ) ); + $header_search_hover_color = esc_html( get_theme_mod( 'responsive_header_search_hover_color', Responsive\Core\get_responsive_customizer_defaults( 'responsive_header_search_hover_color' ) ) ); + $header_search_background_color = esc_html( get_theme_mod( 'responsive_header_search_background_color', Responsive\Core\get_responsive_customizer_defaults( 'responsive_header_search_background_color' ) ) ); + $header_search_background_hover_color = esc_html( get_theme_mod( 'responsive_header_search_background_hover_color', Responsive\Core\get_responsive_customizer_defaults( 'responsive_header_search_background_hover_color' ) ) ); + $header_search_text_color = esc_html( get_theme_mod( 'responsive_header_search_text_color', Responsive\Core\get_responsive_customizer_defaults( 'responsive_header_search_text_color' ) ) ); + $header_search_text_hover_color = esc_html( get_theme_mod( 'responsive_header_search_text_hover_color', Responsive\Core\get_responsive_customizer_defaults( 'responsive_header_search_text_hover_color' ) ) ); + $header_search_modal_background_color = esc_html( get_theme_mod( 'responsive_header_search_modal_background_color', '#FFFFFF' ) ); + $header_search_modal_background_color_tablet = esc_html( get_theme_mod( 'responsive_header_search_modal_background_color_tablet', '#FFFFFF' ) ); + $header_search_modal_background_color_mobile = esc_html( get_theme_mod( 'responsive_header_search_modal_background_color_mobile', '#FFFFFF' ) ); + $header_search_border_radius_top_left = get_theme_mod( 'responsive_header_search_border_radius_top_left_radius', 0 ); + $header_search_border_radius_top_right = get_theme_mod( 'responsive_header_search_border_radius_top_right_radius', 0 ); + $header_search_border_radius_bottom_right = get_theme_mod( 'responsive_header_search_border_radius_bottom_right_radius', 0 ); + $header_search_border_radius_bottom_left = get_theme_mod( 'responsive_header_search_border_radius_bottom_left_radius', 0 ); + $header_search_border_radius_tablet_top_left = get_theme_mod( 'responsive_header_search_border_radius_tablet_top_left_radius', 0 ); + $header_search_border_radius_tablet_top_right = get_theme_mod( 'responsive_header_search_border_radius_tablet_top_right_radius', 0 ); + $header_search_border_radius_tablet_bottom_right = get_theme_mod( 'responsive_header_search_border_radius_tablet_bottom_right_radius', 0 ); + $header_search_border_radius_tablet_bottom_left = get_theme_mod( 'responsive_header_search_border_radius_tablet_bottom_left_radius', 0 ); + $header_search_border_radius_mobile_top_left = get_theme_mod( 'responsive_header_search_border_radius_mobile_top_left_radius', 0 ); + $header_search_border_radius_mobile_top_right = get_theme_mod( 'responsive_header_search_border_radius_mobile_top_right_radius', 0 ); + $header_search_border_radius_mobile_bottom_right = get_theme_mod( 'responsive_header_search_border_radius_mobile_bottom_right_radius', 0 ); + $header_search_border_radius_mobile_bottom_left = get_theme_mod( 'responsive_header_search_border_radius_mobile_bottom_left_radius', 0 ); + + $custom_css .= " + .responsive-header-search input[type=search] { + height: {$header_search_icon_size}px; + } + .responsive-header-search-icon-wrap, .responsive-header-search input[type=search] { + color: {$header_search_color}; + background: {$header_search_background_color}; + } + .responsive-header-search-icon-wrap:hover, .responsive-header-search-icon-wrap:hover input[type=search] { + color: {$header_search_hover_color}; + background: {$header_search_background_hover_color}; + } + .responsive-header-search-icon svg { + width: {$header_search_icon_size}px; + height: {$header_search_icon_size}px; + } + .full-screen .site-header-item .full-screen-search-wrapper { + background: {$header_search_modal_background_color}; + } + .responsive-header-search input[type=search].search-field { + width: {$header_search_width}px; + } + @media screen and ( max-width: 992px ) { + .responsive-header-search-icon svg { + width: {$header_search_icon_size_tablet}px; + height: {$header_search_icon_size_tablet}px; + } + .full-screen .site-header-item .full-screen-search-wrapper { + background: {$header_search_modal_background_color_tablet}; + } + .responsive-header-search input[type=search].search-field { + width: {$header_search_width_tablet}px; + } + } + @media screen and ( max-width: 576px ) { + .responsive-header-search-icon svg { + width: {$header_search_icon_size_mobile}px; + height: {$header_search_icon_size_mobile}px; + } + .full-screen .site-header-item .full-screen-search-wrapper { + background: {$header_search_modal_background_color_mobile}; + } + .responsive-header-search input[type=search].search-field { + width: {$header_search_width_mobile}px; + } + } + .full-screen .site-header-item .full-screen-search-wrapper .full-screen-search-container #searchform .res-search-wrapper input[type=search], + .full-screen .site-header-item .full-screen-search-wrapper .full-screen-search-container #searchform .res-search-wrapper input::placeholder, + .full-screen .site-header-item .full-screen-search-wrapper .full-screen-search-container #searchform .res-search-wrapper, + .full-screen .site-header-item .full-screen-search-wrapper #search-close { + color: {$header_search_text_color}; + } + .full-screen .site-header-item .full-screen-search-wrapper .full-screen-search-container #searchform .res-search-wrapper input[type=search]:hover, + .full-screen .site-header-item .full-screen-search-wrapper .full-screen-search-container #searchform .res-search-wrapper input:hover::placeholder, + .full-screen .site-header-item .full-screen-search-wrapper .full-screen-search-container #searchform .res-search-wrapper:hover, + .full-screen .site-header-item .full-screen-search-wrapper #search-close:hover { + color: {$header_search_text_hover_color}; + } + "; + + if ( 'bordered' === $header_search_design_style ) { + $custom_css.= " + .responsive-header-search-icon-wrap { + border: ". $header_search_border_width. "px solid currentColor; + border-radius: " . responsive_spacing_css( $header_search_border_radius_top_left, $header_search_border_radius_top_right, $header_search_border_radius_bottom_right, $header_search_border_radius_bottom_left ) . "; + } + @media screen and ( max-width: 992px ) { + .responsive-header-search-icon-wrap { + border-radius: " . responsive_spacing_css( $header_search_border_radius_tablet_top_left, $header_search_border_radius_tablet_top_right, $header_search_border_radius_tablet_bottom_right, $header_search_border_radius_tablet_bottom_left ) . "; + } + } + @media screen and ( max-width: 576px ) { + .responsive-header-search-icon-wrap { + border-radius: " . responsive_spacing_css( $header_search_border_radius_mobile_top_left, $header_search_border_radius_mobile_top_right, $header_search_border_radius_mobile_bottom_right, $header_search_border_radius_mobile_bottom_left ) . "; + } + } + "; + } else { + $custom_css.= ".responsive-header-search-icon-wrap { border: ". 0 . ";}"; + } + + $header_search_label = get_theme_mod( 'responsive_header_search_label', '' ); + if ( ! empty( $header_search_label ) && 'full-screen' === get_theme_mod( 'search_style', 'search' ) ) { + $custom_css .= " + .responsive-header-search-icon-wrap { + gap: 5px; + } + "; + } + if ( is_customize_preview() ) { + $custom_css .= " + .responsive-header-search .search-submit { + background: 0 0 !important; + border: none !important; + color: currentColor !important; + } + "; + } + // Fetch header search padding and margin values. + $header_search_padding_values = get_responsive_spacing_values('responsive_header_search_padding', 10, 10, 10, 10); + $header_search_margin_values = get_responsive_spacing_values('responsive_header_search_margin'); + $custom_css .= ".responsive-header-search-icon-wrap {"; + $custom_css .= build_responsive_spacing_css($header_search_padding_values['desktop'], $header_search_margin_values['desktop']); + $custom_css .= "}"; + $custom_css .= "@media screen and (max-width: 992px) {"; + $custom_css .= ".responsive-header-search-icon-wrap {"; + $custom_css .= build_responsive_spacing_css($header_search_padding_values['tablet'], $header_search_margin_values['tablet']); + $custom_css .= "}}"; + $custom_css .= "@media screen and (max-width: 576px) {"; + $custom_css .= ".responsive-header-search-icon-wrap {"; + $custom_css .= build_responsive_spacing_css($header_search_padding_values['mobile'], $header_search_margin_values['mobile']); + $custom_css .= "}}"; + + //Header Search Element CSS - End + } + if ( ! class_exists( 'Responsive_Addons_Pro' ) ) { // Outside Container Spacing. $outside_container_padding_right = esc_html( get_theme_mod( 'responsive_outside_container_right_padding', 15 ) ); diff --git a/core/includes/customizer/customizer.php b/core/includes/customizer/customizer.php index 45650722b..8615796d1 100644 --- a/core/includes/customizer/customizer.php +++ b/core/includes/customizer/customizer.php @@ -225,6 +225,7 @@ function responsive_register_options() { 'class-responsive-header-builder-section-customizer', 'class-responsive-header-button-customizer', 'class-responsive-header-social-customizer', + 'class-responsive-header-search-customizer', ); if ( is_responsive_version_greater() ) { @@ -302,6 +303,7 @@ function responsive_custom_controls( $wp_customize ) { require_once $dir . 'shadow/class-responsive-customizer-shadow-control.php'; require_once $dir . 'input-with-dropdown/class-responsive-customizer-input-with-dropdown-control.php'; require_once $dir . 'fontpresets/class-responsive-customizer-font-preset-control.php'; + require_once $dir . 'color-with-devices/class-responsive-customizer-color-with-devices-control.php'; require_once RESPONSIVE_THEME_DIR . 'core/includes/customizer/controls/upsell/class-responsive-control-upsell.php'; require_once RESPONSIVE_THEME_DIR . 'core/includes/customizer/controls/upsell/class-responsive-generic-notice-section.php'; @@ -317,7 +319,6 @@ function responsive_custom_controls( $wp_customize ) { $wp_customize->register_control_type( 'Responsive_Customizer_Text_Control' ); $wp_customize->register_control_type( 'Responsive_Customizer_Typography_Control' ); $wp_customize->register_control_type( 'Responsive_Customizer_Dimensions_Control' ); - $wp_customize->register_control_type( 'Responsive_Customizer_Color_Control' ); $wp_customize->register_control_type( 'Responsive_Customizer_Heading_Control' ); $wp_customize->register_control_type( 'Responsive_Customizer_Select_Control' ); $wp_customize->register_control_type( 'Responsive_Customizer_Checkbox_Control' ); @@ -337,6 +338,7 @@ function responsive_custom_controls( $wp_customize ) { $wp_customize->register_control_type( 'Responsive_Customizer_Shadow_Control' ); $wp_customize->register_control_type( 'Responsive_Customizer_Social_Control' ); $wp_customize->register_control_type( 'Responsive_Customizer_Input_With_Dropdown_Control' ); + $wp_customize->register_control_type( 'Responsive_Customizer_Color_With_Devices_Control' ); } /** diff --git a/core/includes/customizer/extend-controls/src/color-with-devices/color-component.js b/core/includes/customizer/extend-controls/src/color-with-devices/color-component.js new file mode 100644 index 000000000..531afc30e --- /dev/null +++ b/core/includes/customizer/extend-controls/src/color-with-devices/color-component.js @@ -0,0 +1,94 @@ +import PropTypes from 'prop-types'; +import ColorPickerControlWithDevices from './color-picker-control'; +import {useState} from 'react'; + +const ColorComponentWithDevices = props => { + + const [props_value, setPropsValue] = useState( props.control.settings ); + + const updateColors = (device, value) => { + let updateColor = {...props_value}; + updateColor[`${device}`].set(value); + setPropsValue(updateColor); + }; + const handleChangeComplete = ( device, color ) => { + let value; + if (typeof color === 'string' || color instanceof String) { + value = color; + } else if (undefined !== color.rgb && undefined !== color.rgb.a && 1 !== color.rgb.a) { + value = 'rgba(' + color.rgb.r + ',' + color.rgb.g + ',' + color.rgb.b + ',' + color.rgb.a + ')'; + } else { + value = color.hex; + } + + updateColors(device, value); + }; + + let labelHtml = null, + inputHtml = null, + htmlDescription = null; + + const { + label, + description, + } = props.control.params; + + if (label) { + labelHtml = + {label} + + ; + } + if (description) { + htmlDescription = ; + } + + const renderColorPicker = (device, active = '') => { + + return
    + handleChangeComplete(device, color)} + backgroundType={'color'} + inputattr={props.control.params} + defaultValue = {props.control.params[`${device}`].default} + /> +
    + }; + + inputHtml = <> + {renderColorPicker('desktop', 'active')} + {renderColorPicker('tablet')} + {renderColorPicker('mobile')} + ; + + return <> + + {htmlDescription} + ; + +}; + +ColorComponentWithDevices.propTypes = { + control: PropTypes.object.isRequired +}; + +export default React.memo ( ColorComponentWithDevices ); \ No newline at end of file diff --git a/core/includes/customizer/extend-controls/src/color-with-devices/color-picker-control.js b/core/includes/customizer/extend-controls/src/color-with-devices/color-picker-control.js new file mode 100644 index 000000000..9a3e2c98b --- /dev/null +++ b/core/includes/customizer/extend-controls/src/color-with-devices/color-picker-control.js @@ -0,0 +1,179 @@ +import PropTypes from 'prop-types'; +import { __ } from '@wordpress/i18n'; +import { Component } from '@wordpress/element'; +import {Button, ColorPicker } from '@wordpress/components'; + +class ColorPickerControlWithDevices extends Component { + constructor( props ) { + + super( ...arguments ); + this.onChangeComplete = this.onChangeComplete.bind( this ); + this.onPaletteChangeComplete = this.onPaletteChangeComplete.bind( this ); + this.open = this.open.bind( this ); + this.onColorClearClick = this.onColorClearClick.bind( this ); + + this.state = { + isVisible: false, + refresh: false, + color: this.props.color, + modalCanClose: true, + backgroundType: this.props.backgroundType, + inputattr: this.props.inputattr, + defaultValue: this.props.defaultValue, + }; + } + + onResetRefresh() { + if ( this.state.refresh === true ) { + this.setState( { refresh: false } ); + } else { + this.setState( { refresh: true } ); + } + } + + render() { + + const { + refresh, + modalCanClose, + isVisible, + } = this.state + + + const toggleVisible = () => { + if ( refresh === true ) { + this.setState( { refresh: false } ); + } else { + this.setState( { refresh: true } ); + } + this.setState( { isVisible: true } ); + + const currentElementID = this.state.inputattr.content.match(/id="([^"]*)"/)[1]; + document.getElementById(currentElementID).style.paddingBottom ='480px'; + }; + + const toggleClose = () => { + if ( modalCanClose ) { + if ( isVisible === true ) { + this.setState( { isVisible: false } ); + } + const currentElementID = this.state.inputattr.content.match(/id="([^"]*)"/)[1]; + document.getElementById(currentElementID).style.paddingBottom ='0'; + } + }; + let finalpaletteColors = []; + let count = 0; + let defaultpalette = this.state.inputattr.colorPalettes; + const defaultColorPalette = [...defaultpalette]; + + defaultColorPalette.forEach( singleColor => { + let paletteColors = {}; + Object.assign( paletteColors, { name: count + '_' + singleColor } ); + Object.assign( paletteColors, { color: singleColor } ); + finalpaletteColors.push(paletteColors); + count ++; + }); + let defaultValue = this.state.defaultValue; + let htmlLink = null; + const { + inputattr + } = this.state; + htmlLink = inputattr.link; + if (undefined !== htmlLink) { + let splited_values = htmlLink.split("="); + if (undefined !== splited_values[1]) { + htmlLink = splited_values[1].replace(/"/g, ""); + } + } + return ( + <> + +
    + + +
    + { isVisible && ( + <> + { refresh && ( + <> + this.onChangeComplete( color ) } + /> + + ) } + { ! refresh && ( + <> + this.onChangeComplete( color ) } + /> + + + ) } + + + + + + + ) } +
    +
    + + ); + } + + onColorClearClick(color) { + if ( this.state.refresh === true ) { + this.setState( { refresh: false } ); + } else { + this.setState( { refresh: true } ); + } + this.props.onChangeComplete( color, 'color' ); + wp.customize.previewer.refresh(); + } + + onChangeComplete( color ) { + let newColor; + if ( color.rgb && color.rgb.a && 1 !== color.rgb.a ) { + newColor = 'rgba(' + color.rgb.r + ',' + color.rgb.g + ',' + color.rgb.b + ',' + color.rgb.a + ')'; + } else { + newColor = color.hex; + } + this.setState( { backgroundType: 'color' } ); + this.props.onChangeComplete( newColor, 'color' ); + } + + onPaletteChangeComplete( color ) { + this.setState( { color: color } ); + if ( this.state.refresh === true ) { + this.setState( { refresh: false } ); + } else { + this.setState( { refresh: true } ); + } + this.props.onChangeComplete( color, 'color' ); + } + + + open( open ) { + this.setState( { modalCanClose: false } ); + open() + } +} + +ColorPickerControlWithDevices.propTypes = { + color: PropTypes.string, + usePalette: PropTypes.bool, + palette: PropTypes.string, + presetColors: PropTypes.object, + onChangeComplete: PropTypes.func, + onPaletteChangeComplete: PropTypes.func, + onChange: PropTypes.func, + customizer: PropTypes.object +}; + +export default ColorPickerControlWithDevices; diff --git a/core/includes/customizer/extend-controls/src/color-with-devices/control.js b/core/includes/customizer/extend-controls/src/color-with-devices/control.js new file mode 100644 index 000000000..57cd0df90 --- /dev/null +++ b/core/includes/customizer/extend-controls/src/color-with-devices/control.js @@ -0,0 +1,62 @@ +import ColorComponentWithDevices from './color-component'; + +export const responsiveColorWithDevices = wp.customize.responsiveControl.extend( { + renderContent: function renderContent() { + let control = this; + ReactDOM.render( + , + control.container[0] + ); + }, + ready : function() { + 'use strict'; + let control = this; + jQuery(document).mouseup(function(e){ + var container = jQuery(control.container); + var colorWrap = container.find('.wp-picker-container'); + jQuery('.wp-picker-holder').on('click', function( event ){ + event.preventDefault(); + }); + // If the target of the click isn't the container nor a descendant of the container. + if (!colorWrap.is(e.target) && colorWrap.has(e.target).length === 0 ){ + container.find('button.wp-color-result.wp-picker-open').click(); + } + }); + + control.container.on( 'click', + '.responsive-switchers button', + function( event ) { + event.stopPropagation(); + + // Set up variables + let $this = jQuery( this ), + $devices = jQuery( '.responsive-switchers' ), + $device = jQuery( event.currentTarget ).data( 'device' ), + $control = jQuery( '.customize-control.has-switchers' ), + $body = jQuery( '.wp-full-overlay' ), + $footer_devices = jQuery( '.wp-full-overlay-footer .devices' ); + + // Button class + $devices.find( 'button' ).removeClass( 'active' ); + $devices.find( 'button.preview-' + $device ).addClass( 'active' ); + + // Control class + $control.find( '.control-wrap' ).removeClass( 'active' ); + $control.find( '.control-wrap.' + $device ).addClass( 'active' ); + $control.removeClass( 'control-device-desktop control-device-tablet control-device-mobile' ).addClass( 'control-device-' + $device ); + + // Wrapper class + $body.removeClass( 'preview-desktop preview-tablet preview-mobile' ).addClass( 'preview-' + $device ); + + // Panel footer buttons + $footer_devices.find( 'button' ).removeClass( 'active' ).attr( 'aria-pressed', false ); + $footer_devices.find( 'button.preview-' + $device ).addClass( 'active' ).attr( 'aria-pressed', true ); + + // Open switchers + if ( $this.hasClass( 'preview-desktop' ) ) { + $control.toggleClass( 'responsive-switchers-open' ); + } + } + ); + } +} ); diff --git a/core/includes/customizer/extend-controls/src/customizer.js b/core/includes/customizer/extend-controls/src/customizer.js index 075095382..dcdde7175 100644 --- a/core/includes/customizer/extend-controls/src/customizer.js +++ b/core/includes/customizer/extend-controls/src/customizer.js @@ -220,4 +220,52 @@ } ); } ); + wp.customize('responsive_header_search_label', function(setting) { + setting.bind(function(label) { + const general_tab = $('#responsive_header_search_general_tab'); + const design_tab = $('#responsive_header_search_design_tab'); + + const controls = { + visibility: $('#customize-control-responsive_header_search_label_visibility'), + separator2: $('#customize-control-responsive_header_search_separator3'), + typography: $('#customize-control-responsive_header_search_label_typography_group'), + separator10: $('#customize-control-responsive_header_search_separator10') + }; + + if (label.length > 0) { + if (general_tab.hasClass('nav-tab-active')) { + controls.visibility.fadeIn(300); + controls.separator2.fadeIn(300); + } + if (design_tab.hasClass('nav-tab-active')) { + controls.typography.fadeIn(300); + controls.separator10.fadeIn(300); + } + } else { + $.each(controls, function(_, control) { + control.fadeOut(300); + }); + } + }); + }); + wp.customize( 'search_style', function(setting){ + setting.bind( function( type ) { + if( 'full-screen' !== type ) { + $('#customize-control-responsive_header_search_label').fadeOut(300); + $('#customize-control-responsive_header_search_separator2').fadeOut(300); + $('#customize-control-responsive_header_search_label_visibility').fadeOut(300); + $('#customize-control-responsive_header_search_separator3').fadeOut(300); + document.getElementById('customize-control-responsive_header_search_label_typography_group').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_separator10').style.display = 'none'; + } else { + $('#customize-control-responsive_header_search_label').fadeIn(300); + $('#customize-control-responsive_header_search_separator2').fadeIn(300); + if( wp.customize('responsive_header_search_label').get().length > 0 ) { + $('#customize-control-responsive_header_search_label_visibility').fadeIn(300); + $('#customize-control-responsive_header_search_separator3').fadeIn(300); + } + } + } ); + } ); + } )( jQuery, wp ); \ No newline at end of file diff --git a/core/includes/customizer/extend-controls/src/icons.js b/core/includes/customizer/extend-controls/src/icons.js index 28e9105d4..a5cd60fb4 100644 --- a/core/includes/customizer/extend-controls/src/icons.js +++ b/core/includes/customizer/extend-controls/src/icons.js @@ -116,6 +116,10 @@ const Icons = { , icon_label_bottom: - , + , + icon_header_search1: + , + icon_header_search2: + , } export default Icons; \ No newline at end of file diff --git a/core/includes/customizer/extend-controls/src/index.js b/core/includes/customizer/extend-controls/src/index.js index 5d35fc0c8..2d9e8c74c 100644 --- a/core/includes/customizer/extend-controls/src/index.js +++ b/core/includes/customizer/extend-controls/src/index.js @@ -30,6 +30,7 @@ import { responsiveAvailableItemsDragControl } from './builder-available-drag/co import { responsiveShadow } from './shadow/control'; import { responsiveSocial } from './social/controls'; import { responsiveInputWithDropdown } from './input-with-dropdown/control'; +import { responsiveColorWithDevices } from './color-with-devices/control'; wp.customize.controlConstructor['responsive-sortable'] = responsiveSortable; wp.customize.controlConstructor['responsive-range'] = responsiveSlider; @@ -60,4 +61,5 @@ wp.customize.controlConstructor['responsive-available-drag-control'] = respon wp.customize.controlConstructor['responsive-shadow-control'] = responsiveShadow; wp.customize.controlConstructor['responsive-social'] = responsiveSocial; wp.customize.controlConstructor['responsive-available-drag-control'] = responsiveAvailableItemsDragControl; -wp.customize.controlConstructor['responsive-input-with-dropdown'] = responsiveInputWithDropdown; \ No newline at end of file +wp.customize.controlConstructor['responsive-input-with-dropdown'] = responsiveInputWithDropdown; +wp.customize.controlConstructor['responsive-color-with-devices'] = responsiveColorWithDevices; \ No newline at end of file diff --git a/core/includes/customizer/extend-controls/src/tabs/tabs-component.js b/core/includes/customizer/extend-controls/src/tabs/tabs-component.js index af4851f04..7004e1e64 100644 --- a/core/includes/customizer/extend-controls/src/tabs/tabs-component.js +++ b/core/includes/customizer/extend-controls/src/tabs/tabs-component.js @@ -169,6 +169,70 @@ const TabsComponent = props => { document.getElementById('customize-control-responsive_header_button_bg_color').style.display = 'none'; document.getElementById('customize-control-responsive_header_button_bg_color_separator').style.display = 'none'; } + if( api('responsive_header_search_style_design').get() === 'bordered' && 'design' === tab ) { + document.getElementById('customize-control-responsive_header_search_border').style.display = 'block'; + document.getElementById('customize-control-responsive_header_search_separator6').style.display = 'block'; + document.getElementById('customize-control-responsive_border_header_search_border_radius').style.display = 'block'; + document.getElementById('customize-control-responsive_header_search_separator14').style.display = 'block'; + } else { + document.getElementById('customize-control-responsive_header_search_border').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_separator6').style.display = 'none'; + document.getElementById('customize-control-responsive_border_header_search_border_radius').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_separator14').style.display = 'none'; + } + // Header Search Border control toggle. + wp.customize( 'responsive_header_search_style_design', function( setting ) { + setting.bind( function( newval ) { + if( 'default' === newval ) { + document.getElementById('customize-control-responsive_header_search_border').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_separator6').style.display = 'none'; + document.getElementById('customize-control-responsive_border_header_search_border_radius').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_separator14').style.display = 'none'; + } else if( 'bordered' === newval && 'design' === tab ) { + document.getElementById('customize-control-responsive_header_search_border').style.display = 'block'; + document.getElementById('customize-control-responsive_header_search_separator6').style.display = 'block'; + document.getElementById('customize-control-responsive_border_header_search_border_radius').style.display = 'block'; + document.getElementById('customize-control-responsive_header_search_separator14').style.display = 'block'; + } + } ); + } ); + if( api('responsive_header_search_label').get() !== '' ) { + if( 'design' === tab ) { + document.getElementById('customize-control-responsive_header_search_label_typography_group').style.display = 'block'; + document.getElementById('customize-control-responsive_header_search_separator10').style.display = 'block'; + } + if( 'general' === tab ) { + document.getElementById('customize-control-responsive_header_search_label_visibility').style.display = 'block'; + document.getElementById('customize-control-responsive_header_search_separator3').style.display = 'block'; + } + } else { + document.getElementById('customize-control-responsive_header_search_label_visibility').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_separator3').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_label_typography_group').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_separator10').style.display = 'none'; + } + if( api('search_style').get() ) { + const search_style = api('search_style').get(); + if( search_style !== 'full-screen' ) { + document.getElementById('customize-control-responsive_header_search_separator12').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_modal_options_separator').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_text_color').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_separator4').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_modal_background_color').style.display = 'none'; + + document.getElementById('customize-control-responsive_header_search_label').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_separator2').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_label_visibility').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_separator3').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_label_typography_group').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_separator10').style.display = 'none'; + } + if( search_style === 'full-screen' ) { + document.getElementById('customize-control-responsive_header_search_width').style.display = 'none'; + document.getElementById('customize-control-responsive_header_search_separator13').style.display = 'none'; + } + } + }, [tab]); const toggleSidebarPositionWidthControls = (value, control) => { diff --git a/core/includes/customizer/helper.php b/core/includes/customizer/helper.php index c531bec8e..39e2c4d9c 100644 --- a/core/includes/customizer/helper.php +++ b/core/includes/customizer/helper.php @@ -1387,7 +1387,7 @@ function responsive_drag_number_control( $wp_customize, $element, $label, $secti * @param [type] $step [description]. * @return void [description]. */ -function responsive_drag_number_control_with_switchers( $wp_customize, $element, $label, $section, $priority, $default, $active_call = null, $max = 4096, $min = 1, $transport = 'refresh', $step = 1 ) { +function responsive_drag_number_control_with_switchers( $wp_customize, $element, $label, $section, $priority, $default, $active_call = null, $max = 4096, $min = 1, $transport = 'refresh', $step = 1, $tablet_default = null, $mobile_default = null ) { $wp_customize->add_setting( 'responsive_' . $element, @@ -1402,7 +1402,7 @@ function responsive_drag_number_control_with_switchers( $wp_customize, $element, 'responsive_' . $element . '_tablet', array( 'transport' => $transport, - 'default' => $default, + 'default' => $tablet_default ? $tablet_default : $default, 'sanitize_callback' => 'responsive_sanitize_number', ) ); @@ -1411,7 +1411,7 @@ function responsive_drag_number_control_with_switchers( $wp_customize, $element, 'responsive_' . $element . '_mobile', array( 'transport' => $transport, - 'default' => $default, + 'default' => $mobile_default ? $mobile_default : $default, 'sanitize_callback' => 'responsive_sanitize_number', ) ); @@ -3270,4 +3270,68 @@ function responsive_font_presets_control( $wp_customize, $element, $label, $sect ) ) ); +} + +/** + * [responsive_color_control_with_device_switchers description] + * + * @param [type] $wp_customize [description]. + * @param [type] $element [description]. + * @param [type] $label [description]. + * @param [type] $section [description]. + * @param [type] $priority [description]. + * @param [type] $default [description]. + * @param [type] $active_call [description]. + * @param [type] $transport [description]. + * @param [type] $desc [description]. + * @return void [description]. + */ +function responsive_color_control_with_device_switchers( $wp_customize, $element, $label, $section, $priority, $default, $active_call = null, $desc='', $transport = 'postMessage' ) { + + $wp_customize->add_setting( + 'responsive_' . $element . '_color', + array( + 'transport' => $transport, + 'default' => $default, + 'sanitize_callback' => 'responsive_sanitize_background', + ) + ); + + $wp_customize->add_setting( + 'responsive_' . $element . '_color_tablet', + array( + 'transport' => $transport, + 'default' => $default, + 'sanitize_callback' => 'responsive_sanitize_background', + ) + ); + + $wp_customize->add_setting( + 'responsive_' . $element . '_color_mobile', + array( + 'transport' => $transport, + 'default' => $default, + 'sanitize_callback' => 'responsive_sanitize_background', + ) + ); + + $wp_customize->add_control( + new Responsive_Customizer_Color_With_Devices_Control( + $wp_customize, + 'responsive_' . $element . '_color', + array( + 'label' => $label, + 'section' => $section, + 'settings' => array( + 'desktop' => 'responsive_' . $element . '_color', + 'tablet' => 'responsive_' . $element . '_color_tablet', + 'mobile' => 'responsive_' . $element . '_color_mobile', + ), + 'priority' => $priority, + 'active_callback' => $active_call, + 'description' => $desc, + ) + ) + ); + } \ No newline at end of file diff --git a/core/includes/customizer/settings/class-responsive-header-menu-layouts-customizer.php b/core/includes/customizer/settings/class-responsive-header-menu-layouts-customizer.php index bd47aae16..33ad17e10 100644 --- a/core/includes/customizer/settings/class-responsive-header-menu-layouts-customizer.php +++ b/core/includes/customizer/settings/class-responsive-header-menu-layouts-customizer.php @@ -88,31 +88,31 @@ public function customizer_options( $wp_customize ) { responsive_select_control( $wp_customize, 'menu_last_item', $menu_last_item, 'responsive_header_menu_layout', 30, $menu_last_item_choices, 'none', 'responsive_disabled_main_menu' ); // Search Style. - $wp_customize->add_setting( - 'search_style', - array( - 'default' => 'default', - 'transport' => 'refresh', - 'sanitize_callback' => 'responsive_sanitize_select', - ) - ); - $wp_customize->add_control( - new Responsive_Customizer_Select_Control( - $wp_customize, - 'search_style', - array( - 'label' => __( 'Search Style', 'responsive' ), - 'section' => 'responsive_header_menu_layout', - 'priority' => 31, - 'settings' => 'search_style', - 'active_callback' => 'responsive_menu_search_icon', - 'choices' => array( - 'search' => esc_html__( 'Default', 'responsive' ), - 'full-screen' => esc_html__( 'Full Screen Search', 'responsive' ), - ), - ) - ) - ); + // $wp_customize->add_setting( + // 'search_style', + // array( + // 'default' => 'default', + // 'transport' => 'refresh', + // 'sanitize_callback' => 'responsive_sanitize_select', + // ) + // ); + // $wp_customize->add_control( + // new Responsive_Customizer_Select_Control( + // $wp_customize, + // 'search_style', + // array( + // 'label' => __( 'Search Style', 'responsive' ), + // 'section' => 'responsive_header_menu_layout', + // 'priority' => 31, + // 'settings' => 'search_style', + // 'active_callback' => 'responsive_menu_search_icon', + // 'choices' => array( + // 'search' => esc_html__( 'Default', 'responsive' ), + // 'full-screen' => esc_html__( 'Full Screen Search', 'responsive' ), + // ), + // ) + // ) + // ); // Last Item In Menu CTA Text. $menu_button_text = __( 'CTA Button Text', 'responsive' ); diff --git a/core/includes/customizer/settings/class-responsive-header-search-customizer.php b/core/includes/customizer/settings/class-responsive-header-search-customizer.php new file mode 100644 index 000000000..d79442207 --- /dev/null +++ b/core/includes/customizer/settings/class-responsive-header-search-customizer.php @@ -0,0 +1,249 @@ +add_section( + 'responsive_header_search', + array( + 'title' => esc_html__( 'Header Search', 'responsive' ), + 'panel' => 'responsive_header', + 'priority' => 120, + ) + ); + // Adding General and Design tabs + $tabs_label = esc_html__( 'Tabs', 'responsive' ); + $general_tab_ids_prefix = 'customize-control-'; + $general_tab_ids = array( + $general_tab_ids_prefix . 'responsive_header_search_label', + $general_tab_ids_prefix . 'responsive_header_search_label_visibility', + $general_tab_ids_prefix . 'responsive_header_search_icon', + $general_tab_ids_prefix . 'search_style', + $general_tab_ids_prefix . 'responsive_header_search_separator1', + $general_tab_ids_prefix . 'responsive_header_search_separator2', + $general_tab_ids_prefix . 'responsive_header_search_separator3', + ); + $design_tab_ids_prefix = 'customize-control-'; + $design_tab_ids = array( + $design_tab_ids_prefix . 'responsive_header_search_style_design', + $design_tab_ids_prefix . 'responsive_header_search_border', + $design_tab_ids_prefix . 'responsive_header_search_icon_size', + $design_tab_ids_prefix . 'responsive_header_search_color', + $design_tab_ids_prefix . 'responsive_header_search_background_color', + $design_tab_ids_prefix . 'responsive_header_search_label_typography_group', + $design_tab_ids_prefix . 'responsive_header_search_padding_padding', + $design_tab_ids_prefix . 'responsive_header_search_margin_padding', + $design_tab_ids_prefix . 'responsive_header_search_modal_options_separator', + $design_tab_ids_prefix . 'responsive_header_search_text_color', + $design_tab_ids_prefix . 'responsive_header_search_modal_background_color', + $design_tab_ids_prefix . 'responsive_header_search_separator4', + $design_tab_ids_prefix . 'responsive_header_search_separator5', + $design_tab_ids_prefix . 'responsive_header_search_separator6', + $design_tab_ids_prefix . 'responsive_header_search_separator7', + $design_tab_ids_prefix . 'responsive_header_search_separator8', + $design_tab_ids_prefix . 'responsive_header_search_separator9', + $design_tab_ids_prefix . 'responsive_header_search_separator10', + $design_tab_ids_prefix . 'responsive_header_search_separator11', + $design_tab_ids_prefix . 'responsive_header_search_separator12', + $design_tab_ids_prefix . 'responsive_header_search_width', + $design_tab_ids_prefix . 'responsive_header_search_separator13', + $design_tab_ids_prefix . 'responsive_border_header_search_border_radius', + $design_tab_ids_prefix . 'responsive_header_search_separator14', + ); + + responsive_tabs_button_control( $wp_customize, 'header_search_tabs', $tabs_label, 'responsive_header_search', 1, '', 'responsive_header_search_general_tab', 'responsive_header_search_design_tab', $general_tab_ids, $design_tab_ids, null ); + + // Search Style. + $wp_customize->add_setting( + 'search_style', + array( + 'default' => 'search', + 'transport' => 'refresh', + 'sanitize_callback' => 'responsive_sanitize_select', + ) + ); + $wp_customize->add_control( + new Responsive_Customizer_Select_Button_Control( + $wp_customize, + 'search_style', + array( + 'label' => __( 'Search Type', 'responsive' ), + 'section' => 'responsive_header_search', + 'priority' => 10, + 'settings' => 'search_style', + 'choices' => array( + 'search' => esc_html__( 'Slide', 'responsive' ), + 'full-screen' => esc_html__( 'Full Screen', 'responsive' ), + 'search-box' => esc_html__( 'Search Box', 'responsive' ), + ), + ) + ) + ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator1', 1, 'responsive_header_search', 15, 1 ); + + // Search Label Text. + $wp_customize->add_setting( + 'responsive_header_search_label', + array( + 'default' => '', + 'sanitize_callback' => 'wp_check_invalid_utf8', + 'type' => 'theme_mod', + 'transport' => 'refresh', + ) + ); + $wp_customize->add_control( + 'responsive_header_search_label', + array( + 'label' => __( 'Search Label', 'responsive' ), + 'section' => 'responsive_header_search', + 'settings' => 'responsive_header_search_label', + 'type' => 'text', + 'priority' => 20, + ) + ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator2', 1, 'responsive_header_search', 25, 1 ); + + // Search Label Visibility. + $search_label_visibility = esc_html__( 'Search Label Visibility', 'responsive' ); + $search_label_visibility_choices = array( + 'desktop' => esc_html__( 'dashicons-desktop', 'responsive' ), + 'tablet' => esc_html__( 'dashicons-tablet', 'responsive' ), + 'mobile' => esc_html__( 'dashicons-smartphone', 'responsive' ), + ); + responsive_multi_select_button_control( $wp_customize, 'header_search_label_visibility', $search_label_visibility, 'responsive_header_search', 30, $search_label_visibility_choices, array( 'desktop', 'tablet', 'mobile' ) , null ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator3', 1, 'responsive_header_search', 35, 1 ); + + // Search Icon + $wp_customize->add_setting( + 'responsive_header_search_icon', + array( + 'default' => 'search1', + 'transport' => 'refresh', + 'sanitize_callback' => 'responsive_sanitize_select', + ) + ); + $wp_customize->add_control( + new Responsive_Customizer_Select_Button_Control( + $wp_customize, + 'responsive_header_search_icon', + array( + 'label' => __( 'Search Icon', 'responsive' ), + 'section' => 'responsive_header_search', + 'settings' => 'responsive_header_search_icon', + 'priority' => 40, + 'choices' => array( + 'search1' => esc_html__( 'icon_header_search1', 'responsive' ), + 'search2' => esc_html__( 'icon_header_search2', 'responsive' ), + ), + ) + ) + ); + + // Search Style. + $search_style_label = esc_html__( 'Search Style', 'responsive' ); + $search_style_choices = array( + 'default' => esc_html__( 'Default', 'responsive' ), + 'bordered' => esc_html__( 'Bordered', 'responsive' ), + ); + responsive_select_button_control( $wp_customize, 'header_search_style_design', $search_style_label, 'responsive_header_search', 50, $search_style_choices, 'bordered', null, 'postMessage' ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator5', 1, 'responsive_header_search', 55, 1 ); + + // Search Border. + $header_search_border_label = esc_html__( 'Search Border', 'responsive' ); + responsive_drag_number_control( $wp_customize, 'header_search_border', $header_search_border_label, 'responsive_header_search', 60, 1, null, 50, 0, 'postMessage' ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator6', 1, 'responsive_header_search', 65, 1 ); + + // Search Radius. + $border_radius_label = __( 'Search Radius (px)', 'responsive' ); + responsive_radius_control( $wp_customize, 'header_search_border_radius', 'responsive_header_search', 66, 0, 0, null, $border_radius_label ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator14', 1, 'responsive_header_search', 67, 1 ); + + // Search Width. + $header_search_icon_size_label = __( 'Search Input Width (px)', 'responsive' ); + responsive_drag_number_control_with_switchers( $wp_customize, 'header_search_width', $header_search_icon_size_label, 'responsive_header_search', 68, 300, null, 600, 100, 'postMessage', 1, 200, 150 ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator13', 1, 'responsive_header_search', 69, 1 ); + + // Icon Size. + $header_search_icon_size_label = __( 'Icon Size (px)', 'responsive' ); + responsive_drag_number_control_with_switchers( $wp_customize, 'header_search_icon_size', $header_search_icon_size_label, 'responsive_header_search', 70, 16, null, 100, 0, 'postMessage', 1 ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator7', 1, 'responsive_header_search', 75, 1 ); + + // Search Color. + $header_search_color_label = __( 'Search Color', 'responsive' ); + responsive_color_control( $wp_customize, 'header_search', $header_search_color_label, 'responsive_header_search', 80, Responsive\Core\get_responsive_customizer_defaults( 'responsive_header_search_color' ), null, '', true, Responsive\Core\get_responsive_customizer_defaults( 'responsive_header_search_hover_color' ), 'header_search_hover' ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator8', 1, 'responsive_header_search', 85, 1 ); + + // Search Background. + $header_search_background_color_label = __( 'Search Background', 'responsive' ); + responsive_color_control( $wp_customize, 'header_search_background', $header_search_background_color_label, 'responsive_header_search', 90, Responsive\Core\get_responsive_customizer_defaults( 'responsive_header_search_background_color' ), null, '', true, Responsive\Core\get_responsive_customizer_defaults( 'responsive_header_search_background_hover_color' ), 'header_search_background_hover' ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator9', 1, 'responsive_header_search', 95, 1 ); + + // Label Font + $header_search_label_typography = __( 'Label Font', 'responsive' ); + responsive_typography_group_control( $wp_customize, 'header_search_label_typography_group', $header_search_label_typography, 'responsive_header_search', 100, 'header_search_label_typography' ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator10', 1, 'responsive_header_search', 105, 1 ); + + // Search Padding. + $header_search_padding_label = __( 'Search Padding (px)', 'responsive' ); + responsive_padding_control( $wp_customize, 'header_search_padding', 'responsive_header_search', 110, 10, 10, null, $header_search_padding_label ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator11', 1, 'responsive_header_search', 115, 1 ); + + // Search Margin. + $search_margin_label = esc_html__( 'Margin (px)', 'responsive' ); + responsive_padding_control( $wp_customize, 'header_search_margin', 'responsive_header_search', 120, 0, 0, null, $search_margin_label ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator12', 2, 'responsive_header_search', 125, 1 ); + + // Modal Options. + $search_modal_options_label = __( 'Modal Options', 'responsive' ); + responsive_separator_control( $wp_customize, 'header_search_modal_options_separator', $search_modal_options_label, 'responsive_header_search', 130 ); + + // Text Color. + $header_search_text_color_label = __( 'Text Color', 'responsive' ); + responsive_color_control( $wp_customize, 'header_search_text', $header_search_text_color_label, 'responsive_header_search', 140, Responsive\Core\get_responsive_customizer_defaults( 'responsive_header_search_text_color' ), null, '', true, Responsive\Core\get_responsive_customizer_defaults( 'responsive_header_search_text_hover_color' ), 'header_search_text_hover' ); + + responsive_horizontal_separator_control($wp_customize, 'header_search_separator4', 1, 'responsive_header_search', 145, 1 ); + + // Modal Background. + $header_search_text_color_label = __( 'Modal Background', 'responsive' ); + responsive_color_control_with_device_switchers( $wp_customize, 'header_search_modal_background', $header_search_text_color_label, 'responsive_header_search', 150, '#FFFFFF', null, '' ); + } + } +endif; +return new Responsive_Header_Search_Customizer(); \ No newline at end of file diff --git a/core/includes/customizer/settings/class-responsive-typography-customizer.php b/core/includes/customizer/settings/class-responsive-typography-customizer.php index e8df3c148..240c4eb43 100644 --- a/core/includes/customizer/settings/class-responsive-typography-customizer.php +++ b/core/includes/customizer/settings/class-responsive-typography-customizer.php @@ -351,6 +351,17 @@ public function elements() { 'line-height' => '1.75', ), ), + 'header_search_label' => array( + 'label' => esc_html__( 'Typography', 'responsive' ), + 'target' => $selectorArray['header_search_label'], + 'section' => 'responsive_header_search', + 'exclude' => array( 'font-color' ), + 'priority' => 100, + 'defaults' => array( + 'font-size' => '16px', + 'line-height' => '1.75', + ), + ), ); if ( $this->is_responsive_version_greater() ) { @@ -407,6 +418,7 @@ public function getSelectorArray() { 'footer_copyright' => '.footer-layouts.copyright', 'header_button' => '.site-header-item .responsive-header-button-wrap .responsive-header-button-inner-wrap .responsive-header-button', 'header_social' => '.header-layouts .social-icons .responsive-social-icon .responsive-social-icon-anchor .responsive-social-icon-label', + 'header_search_label' => '.responsive-header-search-label', ); if ( $this->is_responsive_version_greater() ) { diff --git a/core/includes/customizer/settings/hfb-builder/class-responsive-header-footer-builder.php b/core/includes/customizer/settings/hfb-builder/class-responsive-header-footer-builder.php index 8b2697afe..ad33eb097 100644 --- a/core/includes/customizer/settings/hfb-builder/class-responsive-header-footer-builder.php +++ b/core/includes/customizer/settings/hfb-builder/class-responsive-header-footer-builder.php @@ -120,7 +120,7 @@ public function customizer_options( $wp_customize ) { ); ob_start(); ?> - + - + get_theme_mod( 'responsive_mobile_menu_breakpoint', 767 ) ); wp_localize_script( 'navigation-scripts', 'responsive_breakpoint', $mobile_menu_breakpoint ); @@ -589,9 +594,8 @@ function responsive_add_custom_body_classes( $classes ) { $classes[] = 'responsive-site-style-' . get_theme_mod( 'responsive_style', 'boxed' ); } - $search_icon = get_theme_mod( 'responsive_menu_last_item', 'none' ); $search_screen = get_theme_mod( 'search_style', 'search' ); - if ( 'search' === $search_icon && 'full-screen' == $search_screen ) { + if ( 'full-screen' == $search_screen ) { $classes[] = 'full-screen'; } @@ -1177,6 +1181,12 @@ function defaults() { 'responsive_body_text_color' => '#333333', 'responsive_link_color' => '#0066CC', 'responsive_link_hover_color' => '#10659C', + 'responsive_header_search_color' => '#333333', + 'responsive_header_search_hover_color'=> '#333333', + 'responsive_header_search_background_color' => '#ffffff', + 'responsive_header_search_background_hover_color' => '#ffffff', + 'responsive_header_search_text_color' => '#333333', + 'responsive_header_search_text_hover_color' => '#333333', 'responsive_header_desktop_items' => array( 'above' => array( 'above_left' => array(), @@ -1353,6 +1363,10 @@ function defaults() { 'name' => esc_html__( 'Header Widgets', 'responsive' ), 'section' => 'responsive_header_widget', 'icon' => 'wordpress', + 'search' => array( + 'name' => esc_html__( 'Search', 'responsive' ), + 'section' => 'responsive_header_search', + 'icon' => 'search', ), ), ) diff --git a/core/js-dev/navigation.js b/core/js-dev/navigation.js index ea3828e56..c6255e1a7 100644 --- a/core/js-dev/navigation.js +++ b/core/js-dev/navigation.js @@ -172,41 +172,6 @@ } }( container ) ); - search_link = document.getElementById( 'res-search-link' ); - - if ( search_link ) { - search_link.onclick = function() { - search_form = container.getElementsByTagName( 'form' )[0]; - if ( search_form.style.display == 'block' ) { - search_form.style.display = 'none'; - } else { - search_form.style.display = 'block'; - } - } - } - - search_style = document.getElementById( 'full-screen-res-search-link' ); - - if ( search_style ) { - search_style_form = document.getElementById( 'full-screen-search-wrapper' ); - search_style_form.style.display = 'none'; - search_style.onclick = function() { - search_style_form.style.display = 'block'; - search_style_form.style.position = 'fixed'; - search_form = container.getElementsByTagName( 'form' )[0]; - search_form.style.display = 'block'; - } - } - - search_close = document.getElementById( 'search-close' ); - if( search_close ) { - search_close.onclick = function() { - search_style_form = document.getElementById( 'full-screen-search-wrapper' ); - search_style_form.style.display = 'none'; - } - } - - menu_close = document.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' ); if( menu_close ) { menu_close.onclick = function() { diff --git a/core/js-dev/searchform.js b/core/js-dev/searchform.js new file mode 100644 index 000000000..ce70c29d9 --- /dev/null +++ b/core/js-dev/searchform.js @@ -0,0 +1,95 @@ +/** + * File searchform.js. + * + * Handles display of header search element's form. + * + */ + +( function() { + + document.addEventListener("DOMContentLoaded", function () { + + const containers = document.getElementsByClassName("responsive-header-search"); + const search_link = document.getElementById("res-search-link"); + const search_style = document.getElementById("full-screen-res-search-link"); + const search_close = document.getElementById("search-close"); + const searchSubmits = document.querySelectorAll('.search-submit'); + + if (search_link && containers.length > 0) { + let sibling; + + search_link.addEventListener("click", function () { + sibling = this.parentNode.querySelector(".search-type-responsive-slide"); + if (sibling) { + Array.from(containers).forEach((container) => { + let search_form = container.querySelector("#searchform"); + if (search_form) { + sibling.classList.add("search-active"); + setTimeout(() => { + search_form.querySelector("input[type='search']").focus(); + }, 50); + } + }); + } + }); + + // Hide search form if clicking outside + document.addEventListener("click", function (event) { + Array.from(containers).forEach(function (container) { + var search_form = container.querySelector("#searchform"); + if (search_form && sibling && !container.contains(event.target)) { + sibling.classList.remove('search-active'); + } + }); + }); + } + + searchSubmits.forEach(searchSubmit => { + searchSubmit.addEventListener('click', function(event) { + if (this.classList.contains('responsive-header-slide-search')) { + event.preventDefault(); + const searchForm = this.closest('.search-type-responsive-slide').querySelector('.search-form'); // Replace '.parent-selector' with the appropriate parent selector + + if (searchForm) { + const searchField = searchForm.querySelector('.search-field'); + const searchTerm = searchField ? searchField.value.trim() : ''; + + if (searchTerm) { + searchForm.submit(); + } else { + searchForm.parentElement.classList.remove('search-active'); + } + } + } + }); + }); + + if (search_style && containers.length > 0) { + var search_style_form = document.getElementById("full-screen-search-wrapper"); + if (search_style_form) { + search_style.onclick = function () { + search_style_form.style.display = "block"; + search_style_form.style.position = "fixed"; + Array.from(containers).forEach(function (container) { + var search_form = container.getElementsByTagName("form")[0]; + if (search_form) { + search_form.style.display = "block"; + search_form.querySelector("input[type='search']").focus(); + } + }); + }; + } + } + + if (search_close) { + search_close.onclick = function () { + var search_style_form = document.getElementById("full-screen-search-wrapper"); + if (search_style_form) { + search_style_form.style.display = "none"; + } + }; + } + }); + + +} )(); \ No newline at end of file diff --git a/core/sass/_header.scss b/core/sass/_header.scss index c174a7e93..a5f54fb8f 100644 --- a/core/sass/_header.scss +++ b/core/sass/_header.scss @@ -111,11 +111,7 @@ font-size: map-get($font-sizes, medium); line-height: $base-line-height-px * 1.75; text-align: center; - z-index: 9999; - } - .menu-toggle { - @extend .show-xs; - @extend .hide-xxxl; + z-index: 999; &-cancel { display: none; @@ -599,27 +595,21 @@ body.mega-menu-header-menu button.menu-toggle { z-index: 99998; } -.main-navigation #searchform { - display: none; - position: absolute; - top: 3em; - width: 300px; - transition: all 0.3s ease; - box-shadow: 0 3px 2px 2px #eee; +.site-header-item #searchform { + display: flex; + visibility: hidden; + position: relative; + top: 0; z-index: 9999; - .res-search-wrapper { - display: block; + display: flex; + flex-grow: 1; .res-search-icon.icon-search { position: absolute; top: 10px; right: 0; font-size: 16px; } - - .search-submit { - display: none; - } } .res-search-wrapper input[type="search"]:focus, .res-search-wrapper input[type="search"]:hover { @@ -641,27 +631,25 @@ body.mega-menu-header-menu button.menu-toggle { left: 25%; } -.full-screen .main-navigation .main-navigation-wrapper .full-screen-search-wrapper { +.full-screen .site-header-item .full-screen-search-wrapper { + display: none; top: 0; left: 0; width: 100%; height: 100%; transition: opacity .2s; background: rgba(255,255,255,.95); - z-index: 999; + z-index: 9999; #search-close{ position: absolute; - top: 1.5em; - right: 1em; - color: #000; + top: 50px; + right: 50px; font-family: icomoon !important; - font-size: 2em; + font-size: 28px; font-style: normal; font-variant: normal; font-weight: 400; - font-weight: 400; - line-height: 1; line-height: 1; text-transform: none; cursor: pointer; @@ -675,8 +663,8 @@ body.mega-menu-header-menu button.menu-toggle { .full-screen-search-container { position: absolute; - top: 35%; - left: 73%; + top: 50%; + left: 50%; width: 100%; transform: translate(-50%,-50%); @@ -684,15 +672,14 @@ body.mega-menu-header-menu button.menu-toggle { width: 50%; margin: 20px auto; box-shadow: none; + visibility: visible; .res-search-wrapper { - display: block; height: auto; padding: 6px 15px; border: 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid currentColor; background: 0 0; - color: #000; font-weight: 900; input[type="search"] { @@ -735,9 +722,10 @@ body.mega-menu-header-menu button.menu-toggle { .res-search-wrapper { display: inline-block; - border: 1px solid #ccc; + border: 1px solid currentColor; input[type="search"] { border: 0; + padding: 0; } } @@ -1232,4 +1220,63 @@ body.mega-menu-header-menu button.menu-toggle { } } } +} +.responsive-header-search-icon { + display: flex; +} +.responsive-header-search-icon-wrap { + display: flex; + align-items: center; + cursor: pointer; + .responsive-header-search-label { + display: none; + } +} +.responsive-header-search { + + position: relative; + + .responsive-header-inline-search { + #searchform { + display: flex; + visibility: visible; + position: relative; + top: 0; + transition: all .3s ease; + z-index: 0; + + } + } + .search-submit { + background: none; + border: none; + color: currentColor; + padding: 0; + } + .search-type-responsive-slide { + &.search-active { + #searchform { + visibility: visible; + transition: all 0.2s ease; + } + } + #searchform { + position: absolute; + right: 0; + top: 0; + } + } +} +.site-header-section-left { + .responsive-header-search { + #searchform { + left: 0; + } + } + .search-type-responsive-slide { + .res-search-wrapper { + flex-direction: row-reverse; + gap: 10px; + } + } } \ No newline at end of file diff --git a/functions.php b/functions.php index f227cc34f..0a3a87c8a 100644 --- a/functions.php +++ b/functions.php @@ -497,6 +497,12 @@ function responsive_edit_customize_register( $wp_customize ) { 'selector' => '.rspv-site-below-footer-wrap', ) ); + $wp_customize->selective_refresh->add_partial( + 'responsive_header_search_tabs', + array( + 'selector' => '.responsive-header-search', + ) + ); } add_action( 'customize_register', 'responsive_edit_customize_register' ); add_theme_support( 'customize-selective-refresh-widgets' ); diff --git a/searchform.php b/searchform.php index 34f0e6145..98e80bf90 100644 --- a/searchform.php +++ b/searchform.php @@ -17,16 +17,7 @@ if ( ! defined( 'ABSPATH' ) ) { exit; } -$search_icon = get_theme_mod( 'responsive_menu_last_item', 'none' ); $search_screen = get_theme_mod( 'search_style', 'search' ); -if ( 'search' === $search_icon && 'full-screen' === $search_screen ) { - ?> -
    - -
    -
    -
    @@ -36,12 +27,3 @@
    -
    -
    - - + '; +} else { + $search_icon_svg = ' + '; +} + +$search_id = ( $search_style === 'search' ) ? 'res-search-link' : ( ( $search_style === 'full-screen' ) ? 'full-screen-res-search-link' : 'responsive-inline-search-link' ); + +?> +
    + +
    +
    + +
    + + +
    +
    +
    + +
    +
    + +
    + + +
    +
    +
    + + +
    + +
    +
    +
    + +
    + + +
    +
    +
    +
    +
    + + +
    \ No newline at end of file diff --git a/template-parts/header/social.php b/template-parts/header/social.php index a759ddd03..891be9b07 100644 --- a/template-parts/header/social.php +++ b/template-parts/header/social.php @@ -2,7 +2,7 @@ /** * Template part for displaying the header Social Modual * - * @package kadence + * @package responsive */ if( ! defined('ABSPATH') ) { diff --git a/template-parts/header/woo-cart.php b/template-parts/header/woo-cart.php index bde953d3b..7078650ca 100644 --- a/template-parts/header/woo-cart.php +++ b/template-parts/header/woo-cart.php @@ -2,7 +2,7 @@ /** * Template part for displaying the Header Builder Woo Cart Component. * - * @package kadence + * @package responsive */ if ( ! defined('ABSPATH') ) { exit; // Exit if accessed directly From 67323b59fca65ae515314f3421f0990cac56c966 Mon Sep 17 00:00:00 2001 From: Maheswar M Date: Thu, 6 Feb 2025 17:17:11 +0530 Subject: [PATCH 2/3] search element backward compatibility --- core/includes/customizer/custom-styles.php | 6 ++-- core/includes/functions.php | 32 ++++++++++++++++++++++ core/sass/_header.scss | 11 ++++++-- 3 files changed, 43 insertions(+), 6 deletions(-) diff --git a/core/includes/customizer/custom-styles.php b/core/includes/customizer/custom-styles.php index 76a579fd4..62af6099e 100644 --- a/core/includes/customizer/custom-styles.php +++ b/core/includes/customizer/custom-styles.php @@ -4943,15 +4943,15 @@ function responsive_build_responsive_padding_spacing_css( $padding ) { $header_search_padding_values = get_responsive_spacing_values('responsive_header_search_padding', 10, 10, 10, 10); $header_search_margin_values = get_responsive_spacing_values('responsive_header_search_margin'); $custom_css .= ".responsive-header-search-icon-wrap {"; - $custom_css .= build_responsive_spacing_css($header_search_padding_values['desktop'], $header_search_margin_values['desktop']); + $custom_css .= responsive_build_responsive_spacing_css($header_search_padding_values['desktop'], $header_search_margin_values['desktop']); $custom_css .= "}"; $custom_css .= "@media screen and (max-width: 992px) {"; $custom_css .= ".responsive-header-search-icon-wrap {"; - $custom_css .= build_responsive_spacing_css($header_search_padding_values['tablet'], $header_search_margin_values['tablet']); + $custom_css .= responsive_build_responsive_spacing_css($header_search_padding_values['tablet'], $header_search_margin_values['tablet']); $custom_css .= "}}"; $custom_css .= "@media screen and (max-width: 576px) {"; $custom_css .= ".responsive-header-search-icon-wrap {"; - $custom_css .= build_responsive_spacing_css($header_search_padding_values['mobile'], $header_search_margin_values['mobile']); + $custom_css .= responsive_build_responsive_spacing_css($header_search_padding_values['mobile'], $header_search_margin_values['mobile']); $custom_css .= "}}"; //Header Search Element CSS - End diff --git a/core/includes/functions.php b/core/includes/functions.php index a940658db..e90b33f9e 100644 --- a/core/includes/functions.php +++ b/core/includes/functions.php @@ -353,6 +353,10 @@ function responsive_admin_header_style() { responsive_old_woo_cart_comaptibility_with_header_builder_woo_cart(); update_option( 'responsive_old_woo_cart_comaptibility_with_header_builder_woo_cart', true ); } + if ( ! get_option( 'responsive_old_header_search_compatibility_with_hfb_header_search' ) ) { + responsive_old_header_search_compatibility_with_hfb_header_search_element(); + update_option( 'responsive_old_header_search_compatibility_with_hfb_header_search', true ); + } } endif; @@ -1363,6 +1367,7 @@ function defaults() { 'name' => esc_html__( 'Header Widgets', 'responsive' ), 'section' => 'responsive_header_widget', 'icon' => 'wordpress', + ), 'search' => array( 'name' => esc_html__( 'Search', 'responsive' ), 'section' => 'responsive_header_search', @@ -2034,4 +2039,31 @@ function responsive_old_woo_cart_comaptibility_with_header_builder_woo_cart() { } } } +} + +/** + * Make Search Icon in Menu compatible with new hfb header Search element. + * @since 6.1.3 + */ +if ( ! function_exists( 'responsive_old_header_search_compatibility_with_hfb_header_search_element' ) ) { + + /** + * Make Search Icon in Menu (deprecated) compatible with new hfb header Search element. + * @since 6.1.3 + */ + function responsive_old_header_search_compatibility_with_hfb_header_search_element() { + + $is_search_element_already_loaded = responsive_check_element_present_in_hfb( 'search', 'header' ); + if ( $is_search_element_already_loaded ) { + return; + } + + $search_icon = get_theme_mod( 'responsive_menu_last_item', 'none' ); + error_log( 'responsive_menu_last_item: ' . print_r( $search_icon, true ) ); + if ( 'search' === $search_icon ) { + $header_hfb_elements = get_theme_mod( 'responsive_header_desktop_items', get_responsive_customizer_defaults( 'responsive_header_desktop_items' ) ); + array_push( $header_hfb_elements['primary']['primary_right'], 'search' ); + set_theme_mod( 'responsive_header_desktop_items', $header_hfb_elements ); + } + } } \ No newline at end of file diff --git a/core/sass/_header.scss b/core/sass/_header.scss index a5f54fb8f..8ce63171c 100644 --- a/core/sass/_header.scss +++ b/core/sass/_header.scss @@ -1258,12 +1258,17 @@ body.mega-menu-header-menu button.menu-toggle { #searchform { visibility: visible; transition: all 0.2s ease; + opacity: 1; + transform: translateY(0); } } #searchform { - position: absolute; - right: 0; - top: 0; + position: absolute; + right: 0; + top: 0; + opacity: 0; + transform: translateY(0); + transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s; } } } From 16c180b486ff38dd3580fd8ce5f8c290868101da Mon Sep 17 00:00:00 2001 From: Maheswar Manyam Date: Mon, 10 Feb 2025 09:40:49 +0530 Subject: [PATCH 3/3] Search backward compatibility and minor bug fixes --- .../src/tabs/tabs-component.js | 20 +++++++++++++++---- core/includes/customizer/helper.php | 16 --------------- ...ponsive-header-menu-layouts-customizer.php | 1 - core/includes/functions-extras.php | 11 +--------- core/includes/functions.php | 11 +++++++++- core/js-dev/navigation.js | 18 +++++++++++++++++ core/js-dev/searchform.js | 8 ++++---- 7 files changed, 49 insertions(+), 36 deletions(-) diff --git a/core/includes/customizer/extend-controls/src/tabs/tabs-component.js b/core/includes/customizer/extend-controls/src/tabs/tabs-component.js index 7004e1e64..b77fe9239 100644 --- a/core/includes/customizer/extend-controls/src/tabs/tabs-component.js +++ b/core/includes/customizer/extend-controls/src/tabs/tabs-component.js @@ -147,12 +147,24 @@ const TabsComponent = props => { } if( api('responsive_cart_style') ) { if( api('responsive_cart_style').get() !== 'outline' && 'design' === tab ) { - document.getElementById('customize-control-responsive_cart_border_width').style.display = 'none'; + let cartBorderWidth = document.getElementById('customize-control-responsive_cart_border_width'); + if (cartBorderWidth) { + cartBorderWidth.style.display = 'none'; + } } if( api('responsive_cart_style').get() === 'none' && 'design' === tab ) { - document.getElementById('customize-control-responsive_cart_border_separator').style.display = 'none'; - document.getElementById('customize-control-responsive_border_cart_radius').style.display = 'none'; - document.getElementById('customize-control-responsive_header_woo_cart_separator_8').style.display = 'none'; + let cartElementIds = [ + 'customize-control-responsive_cart_border_separator', + 'customize-control-responsive_border_cart_radius', + 'customize-control-responsive_header_woo_cart_separator_8' + ]; + + cartElementIds.forEach(id => { + let el = document.getElementById(id); + if (el) { + el.style.display = 'none'; + } + }); } } if( api('responsive_header_button_size').get() === 'custom' && 'design' === tab ) { diff --git a/core/includes/customizer/helper.php b/core/includes/customizer/helper.php index 39e2c4d9c..eeb0fea3e 100644 --- a/core/includes/customizer/helper.php +++ b/core/includes/customizer/helper.php @@ -2742,22 +2742,6 @@ function responsive_secondary_menu_last_item_text() { return ( 'text-html' === get_theme_mod( 'responsive_secondary_menu_last_item', 'none' ) ) ? true : false; } -if ( ! function_exists( 'responsive_menu_search_icon' ) ) { - /** - * [responsive_menu_search_icon description] - * - * @return [type] [description] - */ - function responsive_menu_search_icon() { - $menu_last_item = get_theme_mod( 'responsive_menu_last_item', 'none' ); - if ( 'search' === $menu_last_item ) { - return true; - } else { - return false; - } - } -} - /** * [responsive_checkbox_control description] * diff --git a/core/includes/customizer/settings/class-responsive-header-menu-layouts-customizer.php b/core/includes/customizer/settings/class-responsive-header-menu-layouts-customizer.php index 33ad17e10..121142832 100644 --- a/core/includes/customizer/settings/class-responsive-header-menu-layouts-customizer.php +++ b/core/includes/customizer/settings/class-responsive-header-menu-layouts-customizer.php @@ -81,7 +81,6 @@ public function customizer_options( $wp_customize ) { $menu_last_item = __( 'Last Item in Menu', 'responsive' ); $menu_last_item_choices = array( 'none' => __( 'None', 'responsive' ), - 'search' => __( 'Search Icon', 'responsive' ), 'button' => __( 'CTA Button', 'responsive' ), 'text-html' => __( 'Text / HTML', 'responsive' ), ); diff --git a/core/includes/functions-extras.php b/core/includes/functions-extras.php index 095a27c26..f7a351630 100644 --- a/core/includes/functions-extras.php +++ b/core/includes/functions-extras.php @@ -274,16 +274,7 @@ function responsive_search_icon( $menu, $args ) { // Only used for the main menu. if ( 'header-menu' === $args->theme_location ) { - if ( 'search' === $search_icon ) { - $search_screen = get_theme_mod( 'search_style', 'search' ); - if ( 'full-screen' == $search_screen ) { - get_search_form(); - $menu .= ''; - } else { - get_search_form(); - $menu .= ''; - } - } elseif ( 'text-html' === $search_icon ) { + if ( 'text-html' === $search_icon ) { $custom_html_content = get_theme_mod( 'responsive_text_html', 'Contact Us' ); if ( ! empty( $custom_html_content ) ) { diff --git a/core/includes/functions.php b/core/includes/functions.php index e90b33f9e..9f02b73c3 100644 --- a/core/includes/functions.php +++ b/core/includes/functions.php @@ -2059,11 +2059,20 @@ function responsive_old_header_search_compatibility_with_hfb_header_search_eleme } $search_icon = get_theme_mod( 'responsive_menu_last_item', 'none' ); - error_log( 'responsive_menu_last_item: ' . print_r( $search_icon, true ) ); if ( 'search' === $search_icon ) { $header_hfb_elements = get_theme_mod( 'responsive_header_desktop_items', get_responsive_customizer_defaults( 'responsive_header_desktop_items' ) ); array_push( $header_hfb_elements['primary']['primary_right'], 'search' ); set_theme_mod( 'responsive_header_desktop_items', $header_hfb_elements ); + //make search border color backward compatible. + $menu_items_color = get_theme_mod( 'responsive_header_menu_link_color' ); + $menu_items_hover_color = get_theme_mod( 'responsive_header_menu_link_hover_color' ); + if( $menu_items_color ) { + set_theme_mod( 'responsive_header_search_color', $menu_items_color ); + set_theme_mod( 'responsive_header_search_hover_color', $menu_items_color ); + } + if( $menu_items_hover_color ) { + set_theme_mod( 'responsive_header_search_hover_color', $menu_items_hover_color ); + } } } } \ No newline at end of file diff --git a/core/js-dev/navigation.js b/core/js-dev/navigation.js index c6255e1a7..e9b559561 100644 --- a/core/js-dev/navigation.js +++ b/core/js-dev/navigation.js @@ -32,14 +32,21 @@ } button.onclick = function() { + let sibling = container.parentNode.parentNode.parentNode.querySelector('.responsive-header-search'); if ( -1 !== container.className.indexOf( 'toggled' ) ) { container.className = container.className.replace( ' toggled', '' ); button.setAttribute( 'aria-expanded', 'false' ); menu.setAttribute( 'aria-expanded', 'false' ); + if( sibling ) { + responsiveHandleHeaderSearchSlideTypeOpening(sibling, 'off'); + } } else { container.className += ' toggled'; button.setAttribute( 'aria-expanded', 'true' ); menu.setAttribute( 'aria-expanded', 'true' ); + if( sibling ) { + responsiveHandleHeaderSearchSlideTypeOpening(sibling, 'on'); + } } icon = button.getElementsByTagName( 'i' )[0] @@ -196,4 +203,15 @@ element.classList.add("site-branding-off"); } + function responsiveHandleHeaderSearchSlideTypeOpening(ele, toggle) { + let searchFormEle = ele.querySelector( '.search-form' ); + if( searchFormEle) { + if( 'on' === toggle ) { + searchFormEle.style.setProperty('right', 'auto', 'important'); + } else { + searchFormEle.style.setProperty('right', '0', 'important'); + } + } + } + } )(); diff --git a/core/js-dev/searchform.js b/core/js-dev/searchform.js index ce70c29d9..96388733f 100644 --- a/core/js-dev/searchform.js +++ b/core/js-dev/searchform.js @@ -36,7 +36,7 @@ // Hide search form if clicking outside document.addEventListener("click", function (event) { Array.from(containers).forEach(function (container) { - var search_form = container.querySelector("#searchform"); + let search_form = container.querySelector("#searchform"); if (search_form && sibling && !container.contains(event.target)) { sibling.classList.remove('search-active'); } @@ -65,13 +65,13 @@ }); if (search_style && containers.length > 0) { - var search_style_form = document.getElementById("full-screen-search-wrapper"); + let search_style_form = document.getElementById("full-screen-search-wrapper"); if (search_style_form) { search_style.onclick = function () { search_style_form.style.display = "block"; search_style_form.style.position = "fixed"; Array.from(containers).forEach(function (container) { - var search_form = container.getElementsByTagName("form")[0]; + let search_form = container.getElementsByTagName("form")[0]; if (search_form) { search_form.style.display = "block"; search_form.querySelector("input[type='search']").focus(); @@ -83,7 +83,7 @@ if (search_close) { search_close.onclick = function () { - var search_style_form = document.getElementById("full-screen-search-wrapper"); + let search_style_form = document.getElementById("full-screen-search-wrapper"); if (search_style_form) { search_style_form.style.display = "none"; }