From 3d9e7c9a9104a91ea6dae096ba79c2ccb1ea5791 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 9 Aug 2021 12:03:00 +0000
Subject: [PATCH] [IMP] website, *: toggle mega menu options when toggling the
 dropdown

*: web_editor

As the mega menu templates are now displayed as an option of the mega
menu snippet, opening the mega menu dropdown in edit mode will display
the options.

Part of https://github.com/odoo/odoo/pull/71143
task-2502208

Part-of: odoo/odoo#71143
---
 .../static/src/js/editor/snippets.editor.js   | 11 +++++
 .../website/static/src/js/editor/wysiwyg.js   | 44 ++++++++-----------
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index a52e905f2aa..eecc52ad11a 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -549,6 +549,7 @@ var SnippetEditor = Widget.extend({
         // Show/hide overlay in preview mode or not
         this.$el.toggleClass('oe_active', show);
         this.cover();
+        this.toggleOverlayVisibility(show);
     },
     /**
      * Updates the UI of the editor (+ parent) options and call onFocus/onBlur
@@ -1525,6 +1526,16 @@ var SnippetsMenu = Widget.extend({
     activateCustomTab: function (content) {
         this._updateRightPanelContent({content: content, tab: this.tabs.CUSTOM});
     },
+    /**
+     * Public method to activate a snippet.
+     *
+     * @see this._activateSnippet
+     * @param {jQuery} $snippet
+     * @returns {Promise}
+     */
+    activateSnippet: async function ($snippet) {
+        return this._activateSnippet($snippet);
+    },
 
     //--------------------------------------------------------------------------
     // Private
diff --git a/addons/website/static/src/js/editor/wysiwyg.js b/addons/website/static/src/js/editor/wysiwyg.js
index 4a28e26bf3d..21905b96dc9 100644
--- a/addons/website/static/src/js/editor/wysiwyg.js
+++ b/addons/website/static/src/js/editor/wysiwyg.js
@@ -96,10 +96,7 @@ Wysiwyg.include({
             // Then toggle the clicked one
             toggleDropdown($toggle)
                 .then(dispose)
-                .then($el => {
-                    var isShown = $el.parent().hasClass('show');
-                    this.snippetsMenu.toggleMegaMenuSnippets(isShown);
-                });
+                .then(() => this._toggleMegaMenu($toggle[0]));
         });
 
         // Ensure :blank oe_structure elements are in fact empty as ':blank'
@@ -110,12 +107,7 @@ Wysiwyg.include({
             }
         }
 
-        return this._super.apply(this, arguments).then(() => {
-            // Showing Mega Menu snippets if one dropdown is already opened
-            if (this.$('.o_mega_menu').hasClass('show')) {
-                this.snippetsMenu.toggleMegaMenuSnippets(true);
-            }
-        });
+        return this._super.apply(this, arguments);
     },
     /**
      * @override
@@ -233,32 +225,34 @@ Wysiwyg.include({
             .dropdown({});
         return toggleDropdown($megaMenuToggles, false);
     },
+    /**
+     * Toggles the mega menu.
+     *
+     * @private
+     * @returns {Promise}
+     */
+    _toggleMegaMenu: function (toggleEl) {
+        const megaMenuEl = toggleEl.parentElement.querySelector('.o_mega_menu');
+        if (!megaMenuEl || !megaMenuEl.classList.contains('show')) {
+            return this.snippetsMenu.activateSnippet(false);
+        }
+        return this.snippetsMenu.activateSnippet($(megaMenuEl));
+    },
 });
 
 snippetsEditor.SnippetsMenu.include({
     /**
-     * @private
-     * @param {boolean} show
+     * @override
      */
-    toggleMegaMenuSnippets: function (show) {
-        setTimeout(() => this._activateSnippet(false));
-        this._showMegaMenuSnippets = show;
-        this._filterSnippets();
+    init: function () {
+        this._super(...arguments);
+        this._notActivableElementsSelector += ', .o_mega_menu_toggle';
     },
 
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
-    /**
-     * @override
-     */
-    _filterSnippets(search) {
-        this._super(...arguments);
-        if (!this._showMegaMenuSnippets) {
-            this.el.querySelector('#snippet_mega_menu').classList.add('d-none');
-        }
-    },
     /**
      * @override
      */