Main 2 add search element header wp 7714

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',
 				}
 			}
 		},

core/includes/customizer/assets/js/customize-preview-color-control.js

@@ -2264,4 +2264,105 @@
             jQuery('head').append(`<style id="responsive-header-cart-tray-link-hover-color">${css}</style>`);
         });
     });
+    // Header Search Color.
+    api( 'responsive_header_search_color', function(setting){
+        setting.bind(function(color){
+            jQuery('style#responsive-header-search-color').remove();
+            jQuery('head').append(
+                '<style id="responsive-header-search-color">'
+                + '.responsive-header-search-icon-wrap { color: ' + color + '!important; }'
+                + '</style>'
+            );
+        });
+    });
+    // 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(
+                '<style id="responsive-header-search-hover-color">'
+                + '.responsive-header-search-icon-wrap:hover { color: ' + color + '!important; }'
+                + '</style>'
+            );
+        });
+    });
+    // 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(
+                '<style id="responsive-header-search-background-color">'
+                + '.responsive-header-search-icon-wrap, .responsive-header-search input[type=search] { background: ' + color + '!important; }'
+                + '</style>'
+            );
+        });
+    });
+    // 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(
+                '<style id="responsive-header-search-background-hover-color">'
+                + '.responsive-header-search-icon-wrap:hover, .responsive-header-search-icon-wrap:hover input[type=search] { background: ' + color + '!important; }'
+                + '</style>'
+            );
+        });
+    });
+    // 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(
+                '<style id="responsive-header-search-text-color">'
+                + '.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: ' + color + '!important; }'
+                + '</style>'
+            );
+        });
+    });
+    // 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(
+                '<style id="responsive-header-search-text-hover-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: ' + color + '!important; }'
+                + '</style>'
+            );
+        });
+    });
+    // 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(
+                '<style id="responsive-header-search-modal-background-color">'
+                + '.full-screen .site-header-item .full-screen-search-wrapper { background: ' + color + '; }'
+                + '</style>'
+            );
+        });
+    });
+    // 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(
+                '<style id="responsive-header-search-modal-background-color-tablet">'
+                + '@media screen and (max-width: 992px) {'
+                + '.full-screen .site-header-item .full-screen-search-wrapper { background: ' + color + ' !important; }'
+                + '} </style>'
+            );
+        });
+    });
+    // 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(
+                '<style id="responsive-header-search-modal-background-color-mobile">'
+                + '@media screen and (max-width: 576px) {'
+                + '.full-screen .site-header-item .full-screen-search-wrapper { background: ' + color + ' !important; }'
+                + '} </style>'
+            );
+        });
+    });
 } )( jQuery );

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(
+                '<style id="responsive-header-search-icon-size">'
+                + '.responsive-header-search-icon svg { height: ' + newval + 'px; }'
+                + '.responsive-header-search-icon svg { width: ' + newval + 'px; }'
+                + '.responsive-header-search input[type=search] { height: ' + newval + 'px; }'
+                + '</style>'
+            );
+        });
+    });
+
+    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(
+                '<style id="responsive-header-search-icon-size-tablet">'
+                + '@media screen and (max-width: 992px) {'
+                + '.responsive-header-search-icon svg { height: ' + newval + 'px !important; }'
+                + '.responsive-header-search-icon svg { width: ' + newval + 'px !important; }'
+                + '.responsive-header-search input[type=search] { height: ' + newval + 'px; }'
+                + '} </style>'
+            );
+        });
+    });
+
+    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(
+                '<style id="responsive-header-search-icon-size-mobile">'
+                + '@media screen and (max-width: 576px) {'
+                + '.responsive-header-search-icon svg { height: ' + newval + 'px !important; }'
+                + '.responsive-header-search-icon svg { width: ' + newval + 'px !important; }'
+                + '.responsive-header-search input[type=search] { height: ' + newval + 'px; }'
+                + '} </style>'
+            );
+        });
+    });
+    // Header Search Width.
+    api('responsive_header_search_width', function(value) {
+        value.bind(function(newval) {
+            jQuery('style#responsive-header-search-width').remove();
+            jQuery('head').append(
+                '<style id="responsive-header-search-width">'
+                + '.responsive-header-search input[type=search].search-field { width: ' + newval + 'px; }'
+                + '</style>'
+            );
+        });
+    });
+
+    api('responsive_header_search_width_tablet', function(value) {
+        value.bind(function(newval) {
+            jQuery('style#responsive-header-search-width-tablet').remove();
+            jQuery('head').append(
+                '<style id="responsive-header-search-width-tablet">'
+                + '@media screen and (max-width: 992px) {'
+                + '.responsive-header-search input[type=search].search-field { width: ' + newval + 'px !important; }'
+                + '} </style>'
+            );
+        });
+    });
+
+    api('responsive_header_search_width_mobile', function(value) {
+        value.bind(function(newval) {
+            jQuery('style#responsive-header-search-width-mobile').remove();
+            jQuery('head').append(
+                '<style id="responsive-header-search-width-mobile">'
+                + '@media screen and (max-width: 576px) {'
+                + '.responsive-header-search input[type=search].search-field { width: ' + newval + 'px !important; }'
+                + '} </style>'
+            );
+        });
+    });
+
 } )( jQuery );

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 );

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',

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 );