From 68ed032b8ac29431550846a60189f4f32223d68a Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Wed, 18 Jan 2023 12:19:51 +0000
Subject: [PATCH] [FIX] website: disable mega menu hover mode while editing

When a mega menu "Sub Menus" are configured as "On Hover", it becomes
very difficult to edit its content.

This commit changes the behavior of the "On Hover" while the page is
being edited:
- it disables the hide on exit (`mouseleave`)
- it prevents the show on hover if another dropdown is already opened
- it hides the menu when the page is clicked outside of the opened menu

This commit also disables the preview of the "Show Sign In" option
which is not previewed anyway, so that it does not deselect the mega
menu when hovering the options.

task-2825376

closes odoo/odoo#119002

X-original-commit: ccb78f7af2a4413836a969ff8009dc3df6c2df33
Signed-off-by: Vray Benjamin (bvr) <bvr@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
---
 addons/website/static/src/js/content/menu.js  | 46 +++++++++++++++++++
 .../static/src/js/editor/snippets.options.js  |  9 ++++
 addons/website/views/snippets/snippets.xml    |  2 +-
 3 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index e8147d7e984..aaf6883f76f 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -516,11 +516,24 @@ publicWidget.registry.hoverableDropdown = animations.Animation.extend({
      * @override
      */
     start: function () {
+        if (this.editableMode) {
+            this._onPageClick = this._onPageClick.bind(this);
+            this.el.closest('#wrapwrap').addEventListener('click', this._onPageClick, {capture: true});
+        }
         this.$dropdownMenus = this.$el.find('.dropdown-menu');
         this.$dropdownToggles = this.$el.find('.dropdown-toggle');
         this._dropdownHover();
         return this._super.apply(this, arguments);
     },
+    /**
+     * @override
+     */
+    destroy() {
+        if (this.editableMode) {
+            this.el.closest('#wrapwrap').removeEventListener('click', this._onPageClick, {capture: true});
+        }
+        return this._super.apply(this, arguments);
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -539,6 +552,16 @@ publicWidget.registry.hoverableDropdown = animations.Animation.extend({
             this.$dropdownMenus.css('top', '');
         }
     },
+    /**
+     * Hides all opened dropdowns.
+     *
+     * @private
+     */
+    _hideDropdowns() {
+        for (const toggleEl of this.el.querySelectorAll('.dropdown-toggle.show')) {
+            Dropdown.getOrCreateInstance(toggleEl).hide();
+        }
+    },
 
     //--------------------------------------------------------------------------
     // Handlers
@@ -549,6 +572,12 @@ publicWidget.registry.hoverableDropdown = animations.Animation.extend({
      * @param {Event} ev
      */
     _onMouseEnter: function (ev) {
+        if (this.editableMode) {
+            // Do not handle hover if another dropdown is opened.
+            if (this.el.querySelector('.dropdown-toggle.show')) {
+                return;
+            }
+        }
         // The user must click on the dropdown if he is on mobile (no way to
         // hover) or if the dropdown is the (or in the) extra menu ('+').
         if (config.device.size_class <= config.device.SIZES.SM ||
@@ -562,12 +591,29 @@ publicWidget.registry.hoverableDropdown = animations.Animation.extend({
      * @param {Event} ev
      */
     _onMouseLeave: function (ev) {
+        if (this.editableMode) {
+            // Cancel handling from view mode.
+            return;
+        }
         if (config.device.size_class <= config.device.SIZES.SM ||
             ev.currentTarget.closest('.o_extra_menu_items')) {
             return;
         }
         Dropdown.getOrCreateInstance(ev.currentTarget.querySelector('.dropdown-toggle')).hide();
     },
+    /**
+     * Called when the page is clicked anywhere.
+     * Closes the shown dropdown if the click is outside of it.
+     *
+     * @private
+     * @param {Event} ev
+     */
+    _onPageClick(ev) {
+        if (ev.target.closest('.dropdown-menu.show')) {
+            return;
+        }
+        this._hideDropdowns();
+    },
 });
 
 publicWidget.registry.HeaderMainCollapse = publicWidget.Widget.extend({
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index a29494515d2..5b5aae887a3 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -2232,6 +2232,15 @@ options.registry.HeaderNavbar = options.Class.extend({
     // Public
     //--------------------------------------------------------------------------
 
+    /**
+     * @override
+     */
+    async start() {
+        await this._super(...arguments);
+        // TODO Remove in master.
+        const signInOptionEl = this.el.querySelector('[data-customize-website-views="portal.user_sign_in"]');
+        signInOptionEl.dataset.noPreview = 'true';
+    },
     /**
      * @private
      */
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 340b341c03c..2e6712530d2 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -928,7 +928,7 @@
             <we-button data-select-class="" data-name="header_dropdown_on_click_opt">On Click</we-button>
         </we-select>
 
-        <we-checkbox string="Show Sign In" data-customize-website-views="portal.user_sign_in" data-reload="/"/>
+        <we-checkbox string="Show Sign In" data-customize-website-views="portal.user_sign_in" data-reload="/" data-no-preview="true"/>
         <we-checkbox string="Call to Action" data-customize-website-views="website.header_call_to_action"
                      data-reset-view-arch="true" data-reload="/"/>
         <we-select string="Language Selector" data-reload="/">