[FIX] website: repair compatibility with 8.0rc1 carousel (banner) snippets that may be present in existing pages

3 files changed, 135 insertions, 4 deletions

diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 8a03e1aeee6..e23269ba24e 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -543,3 +543,63 @@ div.media_iframe_video .css_editable_mode_display {
     transform: none !important;
   }
 }
+/* Fix: backward compatibility saas-3 */
+div.carousel .container > .carousel-caption {
+  position: absolute;
+  right: 50%;
+  left: 50%;
+  bottom: 20px;
+}
+div.carousel .container > .carousel-caption > div {
+  position: absolute;
+  text-align: left;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.4);
+  bottom: 20px;
+}
+div.carousel .container > .carousel-image {
+  top: 5%;
+  bottom: 5%;
+  position: absolute;
+  max-height: 90%;
+  margin: 0 auto;
+}
+div.carousel .item.text_image .container > .carousel-caption {
+  left: 10%;
+}
+div.carousel .item.text_image .container > .carousel-caption > div {
+  right: 50%;
+  margin-right: -20%;
+  max-width: 550px;
+}
+div.carousel .item.text_image .container > .carousel-image {
+  right: 10%;
+  left: 50%;
+}
+div.carousel .item.image_text .container > .carousel-caption {
+  right: 10%;
+}
+div.carousel .item.image_text .container > .carousel-caption > div {
+  left: 50%;
+  margin-left: -20%;
+  max-width: 550px;
+}
+div.carousel .item.image_text .container > .carousel-image {
+  right: 50%;
+  left: 10%;
+}
+div.carousel .item.text_only .container > .carousel-caption {
+  left: 10%;
+  right: 10%;
+  top: 10%;
+  bottom: auto;
+}
+div.carousel .item.text_only .container > .carousel-caption > div {
+  text-align: center;
+  background: transparent;
+  bottom: auto;
+  width: 100%;
+}
+div.carousel .item.text_only .container > .carousel-image {
+  display: none !important;
+}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 21e184d5a91..7a12771bd4c 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -442,3 +442,62 @@ div.media_iframe_video
         -ms-transform: none !important
         -o-transform: none !important
         transform: none !important
+
+
+/* Fix: backward compatibility saas-3 */
+
+div.carousel
+    .container
+        > .carousel-caption
+            position: absolute
+            right: 50%
+            left: 50%
+            bottom: 20px
+            > div
+                position: absolute
+                text-align: left
+                padding: 20px
+                background: rgba(0, 0, 0, 0.4)
+                bottom: 20px
+        > .carousel-image
+            top: 5%
+            bottom: 5%
+            position: absolute
+            max-height: 90%
+            margin: 0 auto
+    .item.text_image
+        .container
+            > .carousel-caption
+                left: 10%
+                > div
+                    right: 50%
+                    margin-right: -20%
+                    max-width: 550px
+            > .carousel-image
+                right: 10%
+                left: 50%
+    .item.image_text
+        .container
+            > .carousel-caption
+                right: 10%
+                > div
+                    left: 50%
+                    margin-left: -20%
+                    max-width: 550px
+            > .carousel-image
+                right: 50%
+                left: 10%
+    .item.text_only
+        .container
+            > .carousel-caption
+                left: 10%
+                right: 10%
+                top: 10%
+                bottom: auto
+                > div
+                    text-align: center
+                    background: transparent
+                    bottom: auto
+                    width: 100%
+            > .carousel-image
+                display: none !important
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index b6e3919b9d4..dc1c78251a2 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -1003,7 +1003,19 @@
             this.$target.find('.carousel-control, .carousel-indicators').removeClass("hidden");
             this.$indicators.append('<li data-target="#' + this.id + '" data-slide-to="' + cycle + '"></li>');
 
-            var $clone = this.$target.find(".item.active").clone();
+            // clone the best candidate from template to use new features
+            var $snippets = this.BuildingBlock.$snippets.find('.oe_snippet_body.carousel');
+            var point = 0;
+            var selection;
+            var className = _.compact(this.$target.attr("class").split(" "));
+            $snippets.each(function () {
+                var len = _.intersection(_.compact(this.className.split(" ")), className).length;
+                if (len > point) {
+                    point = len;
+                    selection = this;
+                }
+            });
+            var $clone = $(selection).find('.item:first').clone();
 
             // insert
             $clone.removeClass('active').insertAfter($active);
@@ -1115,10 +1127,10 @@
             var self = this;
             this.$target.find('.carousel-control').off('click').on('click', function () {
                 self.$target.carousel( $(this).data('slide')); });
-
-            this.$target.find('.carousel-image, .carousel-inner .content > div').attr('contentEditable', 'true');
-            this.$target.find('.carousel-image').attr('attributeEditable', 'true');
             this._super();
+
+            /* Fix: backward compatibility saas-3 */
+            this.$target.find('.item.text_image .container').find('> .carousel-caption > div, > img.carousel-image').attr('contentEditable', 'true');
         },
     });