From ac5866a059c345480e246b558eeae1e94aead822 Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Fri, 31 Mar 2023 13:52:52 +0200
Subject: [PATCH] [IMP] website: review/add extra toggleable elements for
 headers

This commit fixes the structures of some existing elements (language
selector, etc) and introduces new ones which will be possible to toggle
in each new header templates in following commits.

Note: the fixes may need to be backported in the future somehow.
Note 2: after this commit, some of those elements can appear broken.
This is because they are meant to be used in the new headers templates
in following commits.

task-3060986

Part-of: odoo/odoo#119650
Co-authored-by: Robin Lejeune (role) <role@odoo.com>
---
 addons/website/static/src/js/content/menu.js |  13 +-
 addons/website/views/website_templates.xml   | 173 +++++++++++++++++--
 2 files changed, 175 insertions(+), 11 deletions(-)

diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index b4c3b9495f0..d90fe27025b 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -626,12 +626,13 @@ publicWidget.registry.hoverableDropdown = animations.Animation.extend({
     },
 });
 
-publicWidget.registry.HeaderMainCollapse = publicWidget.Widget.extend({
+publicWidget.registry.HeaderGeneral = publicWidget.Widget.extend({
     selector: 'header#top',
     disabledInEditableMode: false,
     events: {
         'show.bs.collapse #top_menu_collapse': '_onCollapseShow',
         'hidden.bs.collapse #top_menu_collapse': '_onCollapseHidden',
+        "shown.bs.modal #o_search_modal": "_onSearchModalShown",
     },
 
     //--------------------------------------------------------------------------
@@ -650,6 +651,16 @@ publicWidget.registry.HeaderMainCollapse = publicWidget.Widget.extend({
     _onCollapseHidden() {
         this.el.classList.remove('o_top_menu_collapse_shown');
     },
+    /**
+     * @private
+     */
+    _onSearchModalShown(ev) {
+        const searchModalEl = this.el.querySelector("#o_search_modal");
+        const searchInputEl = this.el.querySelector(".search-query");
+        if (searchModalEl) {
+            searchInputEl.focus();
+        }
+    },
 });
 
 publicWidget.registry.navbarDropdown = animations.Animation.extend({
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index fa01ada2ee1..506cafa44bf 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -2119,9 +2119,11 @@
 
 <template id="header_language_selector" inherit_id="website.placeholder_header_language_selector" name="Header Language Selector" active="False">
     <xpath expr="." position="inside">
-        <t id="header_language_selector_call" t-call="portal.language_selector">
-            <t t-set="_div_classes" t-value="(_div_classes or '') + ' dropdown'"/>
-        </t>
+        <li t-attf-class="#{_item_class}">
+            <t id="header_language_selector_call" t-call="portal.language_selector">
+                <t t-set="_div_classes" t-value="(_div_classes or '') + ' dropdown'"/>
+            </t>
+        </li>
     </xpath>
 </template>
 
@@ -2164,13 +2166,42 @@
 <template id="website.placeholder_header_call_to_action" name="Placeholder Header Call to Action"/>
 <template id="website.header_call_to_action" inherit_id="website.placeholder_header_call_to_action" name="Header Call to Action" active="True">
     <xpath expr="." position="inside">
-        <div t-attf-class="oe_structure oe_structure_solo #{_div_classes}">
-            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
-                <div class="container">
-                    <a href="/contactus" class="btn btn-primary btn_cta">Contact Us</a>
-                </div>
-            </section>
-        </div>
+        <li t-attf-class="#{_item_class}">
+            <div t-attf-class="oe_structure oe_structure_solo #{_div_class}">
+                <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                    <div class="container">
+                        <a href="/contactus" class="btn btn-primary btn_cta">Contact Us</a>
+                    </div>
+                </section>
+            </div>
+        </li>
+    </xpath>
+</template>
+
+<template id="website.header_call_to_action_large" inherit_id="website.header_call_to_action" name="Header Call to Action - Large" primary="True">
+    <xpath expr="//a[hasclass('btn')]" position="attributes">
+        <attribute name="class" remove="" add="w-100" separator=" "/>
+    </xpath>
+</template>
+
+<template id="website.header_call_to_action_sidebar" inherit_id="website.header_call_to_action_large" name="Header Call to Action - Sidebar" primary="True">
+    <xpath expr="//div[hasclass('container')]" position="attributes">
+        <attribute name="class" remove="" add="p-0" separator=" "/>
+    </xpath>
+</template>
+
+<template id="website.header_call_to_action_stretched" inherit_id="website.header_call_to_action" name="Header Call to Action - Stretched" primary="True">
+    <xpath expr="//div[hasclass('container')]" position="attributes">
+        <attribute name="class" remove="" add="h-100" separator=" "/>
+    </xpath>
+    <xpath expr="//a[hasclass('btn')]" position="attributes">
+        <attribute name="class" remove="" add="d-flex align-items-center h-100 rounded-0" separator=" "/>
+    </xpath>
+</template>
+
+<template id="website.header_call_to_action_pill" inherit_id="website.header_call_to_action" name="Header Call to Action - Pill" primary="True">
+    <xpath expr="//a[hasclass('btn')]" position="attributes">
+        <attribute name="class" remove="btn-primary" add="btn-fill-primary rounded-circle" separator=" "/>
     </xpath>
 </template>
 
@@ -2778,4 +2809,126 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
     </xpath>
 </template>
 
+<!-- Extra element : Social links -->
+<template id="website.placeholder_header_social_links" name="Placeholder Header Social Links"/>
+<template id="website.header_social_links" inherit_id="website.placeholder_header_social_links" name="Header Social Links" active="False">
+    <xpath expr="." position="inside">
+        <li t-attf-class="#{_item_class}">
+            <div t-attf-class="o_header_social_links #{_div_class}">
+                <div class="s_social_media o_not_editable" data-snippet="s_social_media" data-name="Social Media">
+                    <h5 class="s_social_media_title d-none">Follow us</h5>
+                    <a href="/website/social/facebook" class="s_social_media_facebook o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank">
+                        <i class="fa fa-facebook fa-stack p-1 o_editable_media"/>
+                    </a>
+                    <a href="/website/social/twitter" class="s_social_media_twitter o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank">
+                        <i class="fa fa-twitter fa-stack p-1 o_editable_media"/>
+                    </a>
+                    <a href="/website/social/linkedin" class="s_social_media_linkedin o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank">
+                        <i class="fa fa-linkedin fa-stack p-1 o_editable_media"/>
+                    </a>
+                    <a href="/website/social/instagram" class="s_social_media_instagram o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank">
+                        <i class="fa fa-instagram fa-stack p-1 o_editable_media"/>
+                    </a>
+                </div>
+            </div>
+        </li>
+    </xpath>
+</template>
+<template id="website.header_social_links_no_color" inherit_id="website.header_social_links" name="Header Social Links - No Color" primary="True">
+    <xpath expr="//div[hasclass('s_social_media')]" position="attributes">
+        <attribute name="class" remove="" add="no_icon_color" separator=" "/>
+    </xpath>
+    <xpath expr="//a[hasclass('s_social_media_facebook')]" position="attributes">
+        <attribute name="class" remove="" add="text-reset" separator=" "/>
+    </xpath>
+    <xpath expr="//a[hasclass('s_social_media_twitter')]" position="attributes">
+        <attribute name="class" remove="" add="text-reset" separator=" "/>
+    </xpath>
+    <xpath expr="//a[hasclass('s_social_media_linkedin')]" position="attributes">
+        <attribute name="class" remove="" add="text-reset" separator=" "/>
+    </xpath>
+    <xpath expr="//a[hasclass('s_social_media_instagram')]" position="attributes">
+        <attribute name="class" remove="" add="text-reset" separator=" "/>
+    </xpath>
+</template>
+
+<!--
+    This template allows to use the website_search_box_input many times keeping
+    the same parameters (eg. header desktop + header mobile)
+-->
+<template id="header_search_box_input" name="Header Search Box Input">
+    <t t-call="website.website_search_box_input">
+        <t t-set="search_type" t-valuef="all"/>
+        <t t-set="action" t-valuef="/website/search"/>
+        <t t-set="limit" t-value="limit or '5'"/>
+        <t t-set="display_image" t-valuef="true"/>
+        <t t-set="display_description" t-valuef="true"/>
+        <t t-set="display_extra_link" t-valuef="true"/>
+        <t t-set="display_detail" t-valuef="true"/>
+    </t>
+</template>
+
+<!-- Extra element : Search -->
+<template id="website.placeholder_header_search_box" name="Placeholder Header Search Bar"/>
+<template id="website.header_search_box" inherit_id="website.placeholder_header_search_box" name="Header Search Bar" active="True">
+    <xpath expr="." position="inside">
+        <li t-attf-class="#{_item_class}">
+            <t t-if="_layout == 'modal'">
+                <div class="modal fade" id="o_search_modal" aria-hidden="true" tabindex="-1">
+                    <div class="modal-dialog modal-lg pt-5">
+                        <div class="modal-content mt-5">
+                            <t t-call="website.header_search_box_input">
+                                <t t-set="_classes" t-valuef="input-group-lg"/>
+                            </t>
+                        </div>
+                    </div>
+                </div>
+                <a t-attf-class="btn rounded-circle p-1 lh-1 #{_button_classes or 'bg-o-color-3'} o_not_editable" data-bs-target="#o_search_modal" data-bs-toggle="modal" role="button" title="Search">
+                    <i class="oi oi-search fa-stack lh-lg"/>
+                </a>
+            </t>
+            <t t-else="">
+                <t t-call="website.header_search_box_input"/>
+            </t>
+        </li>
+    </xpath>
+</template>
+
+<!-- Extra element : Text -->
+<template id="website.placeholder_header_text_element" name="Placeholder Header Text element"/>
+<template id="website.header_text_element" inherit_id="website.placeholder_header_text_element" name="Header Text element" active="True">
+    <xpath expr="." position="inside">
+        <li t-attf-class="#{_item_class}">
+            <div t-attf-class="s_text_block #{_div_class} #{'d-flex flex-column flex-lg-row gap-1 gap-lg-4 align-items-lg-center' if _txt_elt_content == 'list' else ''}" data-name="Text">
+                <t t-if="_txt_elt_content == 'sentence'">
+                    <small>Free Returns and Standard Shipping</small>
+                </t>
+                <t t-elif="_txt_elt_content == 'list'">
+                    <small class="d-flex align-items-center">
+                        <i class="fa fa-1x fa-fw fa-usd fa-stack me-1"/>
+                        Low Price Guarantee
+                    </small>
+                    <small class="d-flex align-items-center">
+                        <i class="fa fa-1x fa-fw fa-shopping-basket fa-stack me-1"/>
+                        30 Days Online Returns
+                    </small>
+                    <small class="d-flex align-items-center">
+                        <i class="fa fa-1x fa-fw fa-truck fa-stack me-1"/>
+                        Standard Shipping
+                    </small>
+                </t>
+                <t t-elif="_txt_elt_content == 'phone_mail'">
+                    <a href="tel:+1 (650) 555-0111" t-attf-class="nav-link o_nav-link_secondary #{_link_class}"><small><i class="fa fa-1x fa-fw fa-phone me-1"/> <span class="o_force_ltr">+1 (650) 555-0111</span></small></a>
+                    <a href="mailto:info@yourcompany.example.com" t-attf-class="nav-link o_nav-link_secondary #{_link_class}"><small><i class="fa fa-1x fa-fw fa-envelope me-1"/> info@yourcompany.example.com</small></a>
+                </t>
+                <t t-elif="_txt_elt_content == 'mail'">
+                    <a href="mailto:info@yourcompany.example.com" t-attf-class="nav-link o_nav-link_secondary #{_link_class}"><small><i class="fa fa-1x fa-fw fa-envelope me-1"/> info@yourcompany.example.com</small></a>
+                </t>
+                <t t-else="">
+                    <a href="tel:+1 (650) 555-0111" t-attf-class="nav-link o_nav-link_secondary p-2 #{_link_class}"><i class="fa fa-1x fa-fw fa-phone me-1"/><span class="o_force_ltr"><small>+1 (650) 555-0111</small></span></a>
+                </t>
+            </div>
+        </li>
+    </xpath>
+</template>
 </odoo>