[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>

4 files changed, 34 insertions, 33 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 954503dd35a..62ef113b4b0 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1513,7 +1513,9 @@ options.registry.Parallax = options.Class.extend({
         // there may have been changes in the page that influenced the parallax
         // rendering (new snippets, ...).
         // TODO make this automatic.
-        this._refreshPublicWidgets();
+        if (this.parallaxEl) {
+            this._refreshPublicWidgets();
+        }
     },
     /**
      * @override
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index f43fbef9548..8967dc911db 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -193,3 +193,15 @@ body.editor_enable.editor_has_snippets {
         }
     }
 }
+
+//s_dynamic_snippet
+body.editor_enable {
+    .s_dynamic {
+        > * {
+            pointer-events: none;
+        }
+        [data-url] {
+            cursor: inherit;
+        }
+    }
+}
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;
+    }
 }