[FIX] website: hide block in mobile display mode

Before this commit, display mode is changed to block after hiding it on mobile mode.
After this commit, only change display mode for mobile and use inherited mode otherwise.

task-2431659

closes odoo/odoo#65716

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 36 insertions, 0 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index abd32016131..d830c99afa8 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1967,6 +1967,42 @@ options.registry.topMenuColor = options.Class.extend({
 });
 
 /**
+ * Manage the visibility of snippets on mobile.
+ */
+options.registry.MobileVisibility = options.Class.extend({
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Allows to show or hide the associated snippet in mobile display mode.
+     *
+     * @see this.selectClass for parameters
+     */
+    showOnMobile(previewMode, widgetValue, params) {
+        const classes = `d-none d-md-${this.$target.css('display')}`;
+        this.$target.toggleClass(classes, !widgetValue);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async _computeWidgetState(methodName, params) {
+        if (methodName === 'showOnMobile') {
+            const classList = [...this.$target[0].classList];
+            return classList.includes('d-none') &&
+                classList.some(className => className.startsWith('d-md-')) ? '' : 'true';
+        }
+        return await this._super(...arguments);
+    },
+});
+
+/**
  * Hide/show footer in the current page.
  */
 options.registry.HideFooter = VisibilityPageOptionUpdate.extend({