[FIX] website: prevent dynamic snippet flicker in edit mode

* Prior to this commit the dynamic snippet was flickering (destroy followed
  by init) because the parallax option triggers a _refreshPublicWidgets
  in the onFocus. As such each time the user clicks somewhere in the snippet
  the snippet desapears and reappears which can be confusing for the user.

* After this commit, the parallax option will only trigger a refresh on snippets that
  are using parallax. This commit also prevent the user from selecting an element of
  the dynamic snippet as it is not customizable.

task-2339246

closes odoo/odoo#57693

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

2 files changed, 19 insertions, 32 deletions

diff --git a/addons/website/static/src/snippets/s_dynamic_snippet/000.js b/addons/website/static/src/snippets/s_dynamic_snippet/000.js
index 3740cb6d6d6..71b551738b5 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet/000.js
+++ b/addons/website/static/src/snippets/s_dynamic_snippet/000.js
@@ -8,6 +8,9 @@ const publicWidget = require('web.public.widget');
 const DynamicSnippet = publicWidget.Widget.extend({
     selector: '.s_dynamic_snippet',
     xmlDependencies: ['/website/static/src/snippets/s_dynamic_snippet/000.xml'],
+    read_events: {
+        'click [data-url]': '_onCallToAction',
+    },
     disabledInEditableMode: false,
 
     /**
@@ -48,7 +51,6 @@ const DynamicSnippet = publicWidget.Widget.extend({
     start: function () {
         return this._super.apply(this, arguments)
             .then(() => {
-                this._setupCallToAction(true);
                 this._setupSizeChangedManagement(true);
                 this._render();
                 this._toggleVisibility(true);
@@ -61,7 +63,6 @@ const DynamicSnippet = publicWidget.Widget.extend({
     destroy: function () {
         this._toggleVisibility(false);
         this._setupSizeChangedManagement(false);
-        this._setupCallToAction(false);
         this._clearContent();
         this._super.apply(this, arguments);
     },
@@ -188,22 +189,6 @@ const DynamicSnippet = publicWidget.Widget.extend({
      * @param {Boolean} enable
      * @private
      */
-    _setupCallToAction: function (enable) {
-        if (enable === true) {
-            this.$el.on('click.s_dynamic_snippet', '*[data-url]', function (ev) {
-                if (this.editableMode !== true) {
-                    window.location = $(ev.currentTarget).attr('data-url');
-                }
-            }.bind(this));
-        } else {
-            this.$el.off('.s_dynamic_snippet');
-        }
-    },
-    /**
-     *
-     * @param {Boolean} enable
-     * @private
-     */
     _setupSizeChangedManagement: function (enable) {
         if (enable === true) {
             config.device.bus.on('size_changed', this, this._onSizeChanged);
@@ -225,6 +210,13 @@ const DynamicSnippet = publicWidget.Widget.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * Navigates to the call to action url.
+     * @private
+     */
+    _onCallToAction: function (ev) {
+        window.location = $(ev.currentTarget).attr('data-url');
+    },
+    /**
      * Called when the size has reached a new bootstrap breakpoint.
      *
      * @private
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet/000.scss b/addons/website/static/src/snippets/s_dynamic_snippet/000.scss
index f463eecbe4b..536aba85c26 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet/000.scss
+++ b/addons/website/static/src/snippets/s_dynamic_snippet/000.scss
@@ -1,16 +1,11 @@
-body:not(.editor_enable) {
-  .s_dynamic {
-    *[data-url] {
-      cursor: pointer;
-    }
-  }
-}
-
 .s_dynamic {
-  .card-img-top {
-    height: 12rem;
-  }
-  img {
-    object-fit: scale-down;
-  }
+    [data-url] {
+        cursor: pointer;
+    }
+    .card-img-top {
+        height: 12rem;
+    }
+    img {
+        object-fit: scale-down;
+    }
 }