[IMP] portal, website: add the ability to have a lang selector in header

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

closes odoo/odoo#56427

Related: odoo/design-themes#346
Signed-off-by: Xavier Dollé (xdo) <xdo@odoo.com>

4 files changed, 102 insertions, 13 deletions

diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index f50045d0e88..6f1c5b60dc9 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -38,14 +38,16 @@
     <!-- Added by another template so that it can be disabled if needed -->
     <template id="footer_language_selector" inherit_id="portal.frontend_layout" name="Footer Language Selector">
         <xpath expr="//*[hasclass('o_footer_copyright_name')]" position="after">
-            <t id="language_selector_call" t-call="portal.language_selector"/>
+            <t id="language_selector_call" t-call="portal.language_selector">
+                <t t-set="_div_classes" t-value="(_div_classes or '') + ' dropup'"/>
+            </t>
         </xpath>
     </template>
 
     <template id="language_selector" name="Language Selector">
         <t t-set="active_lang" t-value="list(filter(lambda lg : lg[0] == lang, languages))[0]"/>
         <t t-set="language_selector_visible" t-value="len(languages) &gt; 1"/>
-        <div class="js_language_selector dropup" t-if="language_selector_visible">
+        <div t-attf-class="js_language_selector #{_div_classes}" t-if="language_selector_visible">
             <button class="btn btn-sm btn-outline-secondary border-0 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                 <span t-if="not no_text"
                         class="align-middle"
diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index 68ee1aae2a3..ad933e369a1 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -403,7 +403,7 @@ publicWidget.registry.autohideMenu = publicWidget.Widget.extend({
         this.$topMenu = this.$('#top_menu');
         this.noAutohide = this.$el.is('.o_no_autohide_menu');
         if (!this.noAutohide) {
-            await wUtils.onceAllImagesLoaded(this.$('.navbar'), this.$('.o_mega_menu, .o_offcanvas_logo_container'));
+            await wUtils.onceAllImagesLoaded(this.$('.navbar'), this.$('.o_mega_menu, .o_offcanvas_logo_container, .dropdown-menu .o_lang_flag'));
 
             // The previous code will make sure we wait for images to be fully
             // loaded before initializing the auto more menu. But in some cases,
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 157dca3a48e..efbb8002e80 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -784,6 +784,17 @@
          data-no-check="true"
          groups="website.group_website_designer">
         <we-checkbox string="Sign In" data-customize-website-views="portal.user_sign_in" data-reload="/"/>
+        <we-select string="Language Selector" data-reload="/">
+            <we-button data-name="header_language_selector_none_opt"
+                       data-customize-website-views="">None</we-button>
+            <we-button data-customize-website-views="website.header_language_selector">Dropdown</we-button>
+            <we-button data-customize-website-views="website.header_language_selector, website.header_language_selector_inline">Inline</we-button>
+        </we-select>
+        <we-select string="⌙ Label" data-dependencies="!header_language_selector_none_opt" data-reload="/">
+            <we-button data-customize-website-views="">Text</we-button>
+            <we-button data-customize-website-views="website.header_language_selector_flag, website.header_language_selector_no_text">Flag</we-button>
+            <we-button data-customize-website-views="website.header_language_selector_flag">Flag and Text</we-button>
+        </we-select>
     </div>
 
     <!-- Footer - Colors & Layouts -->
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 33cad04ba82..d30984fc12b 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -257,6 +257,10 @@
                         </t>
                     </t>
                 </div>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
                 <!-- Button -->
                 <div class="oe_structure" id="oe_structure_header_default_1"/>
             </div>
@@ -315,6 +319,10 @@
                 <t t-call="website.navbar_toggler">
                     <t t-set="_toggler_class" t-value="'order-first mr-auto'"/>
                 </t>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
                 <!-- Button -->
                 <div class="oe_structure" id="oe_structure_header_hamburger_1"/>
                 <!-- Navbar Collapse -->
@@ -439,6 +447,10 @@
                 <t t-call="website.navbar_toggler">
                     <t t-set="_toggler_class" t-value="'my-3'"/>
                 </t>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse flex-wrap">
                     <div class="oe_structure w-100" id="oe_structure_header_vertical_3"/>
@@ -530,6 +542,10 @@
                 <t t-call="website.placeholder_header_brand"/>
                 <!-- Navbar Toggler -->
                 <t t-call="website.navbar_toggler"/>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse flex-column align-self-stretch align-items-stretch">
                     <t t-call="website.navbar_nav">
@@ -639,6 +655,10 @@
                 </div>
                 <!-- Navbar Toggler -->
                 <t t-call="website.navbar_toggler"/>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
                  <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse">
                     <t t-call="website.navbar_nav">
@@ -704,6 +724,10 @@
                 <t t-call="website.placeholder_header_brand"/>
                 <!-- Navbar Toggler -->
                 <t t-call="website.navbar_toggler"/>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse ml-lg-3">
                     <t t-call="website.navbar_nav">
@@ -785,6 +809,10 @@
                 <t t-call="website.placeholder_header_brand"/>
                 <!-- Navbar Toggler -->
                 <t t-call="website.navbar_toggler"/>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse ml-lg-3">
                     <t t-call="website.navbar_nav">
@@ -836,6 +864,10 @@
                         <t t-set="_dropdown_menu_class" t-value="'dropdown-menu-right'"/>
                     </t>
                 </ul>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
             </div>
         </div>
         <div id="top_menu_container" class="container mt-n4">
@@ -931,6 +963,10 @@
                         <t t-set="_link_class" t-value="'nav-link'"/>
                     </t>
                 </ul>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
             </div>
         </nav>
     </xpath>
@@ -974,6 +1010,10 @@
                         </li>
                     </t>
                 </div>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
             </div>
         </nav>
     </xpath>
@@ -1010,10 +1050,14 @@
             <div id="top_menu_container" class="container">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>
-                <!-- Navbar Toggler -->
-                <t t-call="website.navbar_toggler">
-                    <t t-set="_toggler_class" t-value="'o_header_hamburger_full_toggler ml-auto'"/>
-                </t>
+                <div class="d-flex align-items-center ml-auto">
+                    <!-- Language Selector -->
+                    <t t-call="website.placeholder_header_language_selector"/>
+                    <!-- Navbar Toggler -->
+                    <t t-call="website.navbar_toggler">
+                        <t t-set="_toggler_class" t-value="'o_header_hamburger_full_toggler ml-2'"/>
+                    </t>
+                </div>
             </div>
             <!-- Navbar Collapse -->
             <div id="top_menu_collapse" class="collapse navbar-collapse">
@@ -1086,10 +1130,14 @@
             <div id="top_menu_container" class="container">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>
-                <!-- Navbar Toggler -->
-                <t t-call="website.navbar_toggler">
-                    <t t-set="_toggler_class" t-value="'ml-auto'"/>
-                </t>
+                <div class="d-flex align-items-center ml-auto">
+                    <!-- Language Selector -->
+                    <t t-call="website.placeholder_header_language_selector"/>
+                    <!-- Navbar Toggler -->
+                    <t t-call="website.navbar_toggler">
+                        <t t-set="_toggler_class" t-value="'ml-2'"/>
+                    </t>
+                </div>
                 <!-- Navbar Collapse -->
                 <div id="top_menu_collapse" class="collapse navbar-collapse">
                     <t t-set="_nav_class" t-value="'text-right'"/>
@@ -1780,8 +1828,8 @@
 <!-- Alternative extension of the language_selector to make it look like an -->
 <!-- inline list instead of a dropdown -->
 <template id="language_selector_inline" inherit_id="website.language_selector" primary="True">
-    <xpath expr="//*[hasclass('js_language_selector')]" position="attributes">
-        <attribute name="class" remove="dropup" separator=" "/>
+    <xpath expr="//*[contains(@t-attf-class, 'js_language_selector')]" position="attributes">
+        <attribute name="t-attf-class" remove="dropup" separator=" "/>
     </xpath>
     <xpath expr="//*[hasclass('dropdown-toggle')]" position="replace"/>
     <xpath expr="//*[hasclass('dropdown-menu')]" position="attributes">
@@ -1803,6 +1851,34 @@
     </xpath>
 </template>
 
+<template id="placeholder_header_language_selector" name="Placeholder Header Language Selector"/>
+
+<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>
+    </xpath>
+</template>
+
+<template id="header_language_selector_inline" name="Header Language Selector Inline" inherit_id="website.header_language_selector" active="False">
+    <xpath expr="//t[@id='header_language_selector_call']" position="replace">
+        <t id="header_language_selector_call" t-call="website.language_selector_inline"/>
+    </xpath>
+</template>
+
+<template id="header_language_selector_flag" name="Header Language Selector Flag" inherit_id="website.header_language_selector" active="True">
+    <xpath expr="//t[@id='header_language_selector_call']" position="before">
+        <t t-set="flags" t-value="True"/>
+    </xpath>
+</template>
+
+<template id="header_language_selector_no_text" name="Header Language Selector No Text" inherit_id="website.header_language_selector" active="False">
+    <xpath expr="//t[@id='header_language_selector_call']" position="before">
+        <t t-set="no_text" t-value="True"/>
+    </xpath>
+</template>
+
 <template id="footer_language_selector_inline" name="Footer Language Selector Inline" inherit_id="portal.footer_language_selector" active="False">
     <xpath expr="//t[@id='language_selector_call']" position="replace">
         <t id="language_selector_call" t-call="website.language_selector_inline"/>