[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

@@ -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({

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
      */

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="/">