From 83112caf1964801cd2edfa5a28bf8199d66e00cb Mon Sep 17 00:00:00 2001
From: Oussama MESSAOUDI <ome@odoo.com>
Date: Wed, 24 Feb 2021 11:47:09 +0000
Subject: [PATCH] [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>
---
.../static/src/js/editor/snippets.options.js | 36 +++++++++++++++++++
addons/website/views/snippets/snippets.xml | 4 +--
2 files changed, 38 insertions(+), 2 deletions(-)
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index abd32016131c..d830c99afa85 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1966,6 +1966,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.
*/
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 9a8035325aef..241933b6324f 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -482,9 +482,9 @@
</div>
<!-- Mobile display options -->
- <div data-option-name="showMobile" data-selector="section .row > div"
+ <div data-js="MobileVisibility" data-option-name="showMobile" data-selector="section .row > div"
data-exclude=".s_col_no_resize.row > div">
- <we-checkbox string="Shown On Mobile" data-select-class="d-none d-md-block|" data-no-preview="true"/>
+ <we-checkbox string="Shown On Mobile" data-show-on-mobile="true" data-no-preview="true"/>
</div>
<div data-js="sizing_y"
--
GitLab