[IMP] add scroll speed options in parallax snippet

bzr revid: rgaopenerp-20131018145313-4li3mwyte19n0cf9

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

@@ -360,7 +360,7 @@ footer {
 }
 
 .parallax_full {
-  background: #eeeeee no-repeat top center;
+  background: #eeeeee no-repeat top center fixed;
   width: 100%;
   background-size: 100%;
 }

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

@@ -276,7 +276,7 @@ footer
             background-color: grey
 
 .parallax_full
-    background: #eee no-repeat top center
+    background: #eee no-repeat top center fixed
     width: 100%
     background-size: 100%
     &.oe_small .container

addons/website/static/src/js/website.js

@@ -150,6 +150,20 @@
                     $data.attr("data-publish", +result ? 'on' : 'off');
                 });
         });
+        
+        $('[data-snippet-id="parallax"]').each(function(){
+            var $el = $(this);
+            var $window = $(window);
+            $window.scroll(function() {
+                var yPos = -( ($window.scrollTop() - $el.offset().top) /  $el.data('speed'));
+
+                var yPos = -($window.scrollTop() / 2); 
+                // Put together our final background position
+                var coords = '50% '+ yPos + 'px';
+                // Move the background
+                $el.css({ backgroundPosition: coords });
+            })
+        }); 
 
         $(document).on('click', '.js_publish_management .js_publish_btn', function (e) {
             var $data = $(this).parents(".js_publish_management:first");

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

@@ -1198,8 +1198,25 @@
         start : function () {
             this._super();
             this.change_background(this.$target, 'ul[name="parallax-background"]');
+            this.scroll();
             this.change_size();
         },
+        scroll: function(){
+            var self = this;
+            var $ul = this.$editor.find('ul[name="parallax-scroll"]');
+            var $li = $ul.find("li");
+            var $parallax = this.$el.find('.parallax_full');
+            var speed = $parallax.data('speed') || 1 ;
+            
+            $ul.find('[data-value="' + speed + '"]').addClass('active');
+            $li.on('click', function (event) {
+                $li.removeClass("active");
+                $(this).addClass("active");
+                var speed =  $(this).data('value')
+                $parallax.data('speed', speed);
+            });
+
+        },
         change_size: function () {
             var self = this;
             var $el = this.$target;

addons/website/views/snippets.xml

@@ -709,13 +709,13 @@
         <li class="oe_snippet_options dropdown-submenu">
             <a tabindex="-1" href="#">Scroll Speed</a>
             <ul class="dropdown-menu" name="parallax-scroll">
-                <li data-value="oe_very_slow"><a>Very Slow</a></li>
-                <li data-value="oe_slow"><a>Slow</a></li>
-                <li data-value="oe_fixed"><a>Fixed</a></li>
-                <li data-value="oe_fast"><a>Fast</a></li>
+                <li data-value="10"><a>Very Slow</a></li>
+                <li data-value="2"><a>Slow</a></li>
+                <li data-value="1"><a>Fixed</a></li>
+                <li data-value="0.5"><a>Fast</a></li>
             </ul>
         </li>
-        <section class="oe_snippet_body parallax_full oe_structure" style="background-image: url('/website/static/src/img/banner/greenfields.jpg')">
+        <section class="oe_snippet_body parallax_full oe_structure" style="background-image: url('/website/static/src/img/banner/greenfields.jpg')" data-speed="1">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 mt32 mb32">