[FIX] website snippet: Fix parallax with retro-compatibility; Crappy fix for carousel because bootstrap active cycling when user click on a bullet and don't stop when user edit a snippet inside a slider.

bzr revid: chm@openerp.com-20140228131738-il41640r8x9zesll

addons/website/static/src/css/website.css

@@ -394,22 +394,15 @@ div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
 }
 
 .parallax {
-  position: relative;
   background-size: cover;
-  display: table;
-  width: 100%;
-  min-height: 100px;
-}
-.parallax.oe_small {
-  min-height: 200px;
-}
-.parallax.oe_medium {
-  min-height: 300px;
-}
-.parallax.oe_big {
-  min-height: 450px;
 }
 .parallax > div {
+  position: relative;
+  display: table;
+  width: 100%;
+  min-height: 200px;
+}
+.parallax > div > div {
   display: table-cell;
   vertical-align: middle;
   padding: 32px 0;

addons/website/static/src/css/website.sass

@@ -324,21 +324,16 @@ div.carousel[data-snippet-id="slider"]
             background-color: grey
 
 .parallax
-    position: relative
     background-size: cover
-    display: table
-    width: 100%
-    min-height: 100px
-    &.oe_small
-        min-height: 200px
-    &.oe_medium
-        min-height: 300px
-    &.oe_big
-        min-height: 450px
     > div
-        display: table-cell
-        vertical-align: middle
-        padding: 32px 0
+        position: relative
+        display: table
+        width: 100%
+        min-height: 200px
+        > div
+            display: table-cell
+            vertical-align: middle
+            padding: 32px 0
 
 /* Background */
 

addons/website/static/src/js/website.snippets.editor.js

@@ -25,6 +25,8 @@
             this.on('rte:ready', this, function () {
                 self.snippets.$button.removeClass("hidden");
                 website.snippet.start_animation();
+                // force to unactive slider cycling
+                setInterval(function () {$(".carousel").carousel("pause");},3000);
             });
 
             return this._super.apply(this, arguments);
@@ -1304,14 +1306,6 @@
                 this.$target.find(".item:first").addClass("active");
             }
         },
-        onFocus : function () {
-            this._super();
-            this.$target.carousel('pause');
-        },
-        onBlur : function () {
-            this._super();
-            this.$target.carousel('cycle');
-        },
         start : function () {
             var self = this;
             this._super();
@@ -1464,7 +1458,10 @@
                 self.$target.data("snippet-view").set_values();
             });
             this.$target.attr('contentEditable', 'false');
-            this.$target.find('> div > .oe_structure').attr('contentEditable', 'true');
+
+            this.$target.find('> div > .oe_structure').attr('contentEditable', 'true'); // saas-3 retro-compatibility
+
+            this.$target.find('> div > div:not(.oe_structure) > .oe_structure').attr('contentEditable', 'true');
         },
         scroll: function () {
             var self = this;

addons/website/views/snippets.xml

@@ -792,7 +792,7 @@
             </ul>
         </li>
         <section class="oe_snippet_body parallax"
-                style="height: 320px; background-image: url('/website/static/src/img/banner/mountains.jpg')"
+                style="background-image: url('/website/static/src/img/banner/mountains.jpg')"
                 data-scroll-background-ratio="0.3">
                 <div><div class="oe_structure"/></div>
         </section>
@@ -804,10 +804,9 @@
             <span class="oe_snippet_thumbnail_title">Parallax Slider</span>        
         </div>
         <section class="oe_snippet_body parallax" data-snippet-id="parallax"
-                 style="height: 320px; background-image: url('/website/static/src/img/parallax/quote.png')"
+                 style="background-image: url('/website/static/src/img/parallax/quote.png')"
                 data-scroll-background-ratio="0.3">
-            <div>
-                <div class="oe_structure">
+            <div><div><div class="oe_structure">
                     <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-snippet-id="slider">
                         <!-- Indicators -->
                         <ol class="carousel-indicators mb0">
@@ -854,8 +853,7 @@
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
+            </div></div></div>
         </section>
     </div>