[FIX] website snippet: fix parallax; website.hr.recruitment; split snippet js

bzr revid: chm@openerp.com-20131112162036-neoyem1sus473tqr

4 files changed, 134 insertions, 95 deletions

diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index eb530b0036d..e0ca7104dc4 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -362,6 +362,7 @@ footer {
 
 .parallax {
   position: relative;
+  background-size: 100%;
 }
 .parallax.oe_small {
   height: 200px;
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 9855b20c313..f0a9d9b8d3c 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -277,6 +277,7 @@ footer
 
 .parallax
     position: relative
+    background-size: 100%
     &.oe_small
         height: 200px
     &.oe_medium
diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
new file mode 100644
index 00000000000..7277f80ba95
--- /dev/null
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -0,0 +1,111 @@
+(function () {
+    'use strict';
+
+    var website = openerp.website;
+    website.snippet = {};
+
+    website.snippet.start_animation = function () {
+        $("[data-snippet-id]").each(function() {
+            var $snipped_id = $(this);
+            if (    !$snipped_id.parents("#oe_snippets").length &&
+                    !$snipped_id.parent("body").length &&
+                    !$snipped_id.data("snippet-view") &&
+                    website.snippet.animationRegistry[$snipped_id.data("snippet-id")]) {
+                var snippet = new website.snippet.animationRegistry[$snipped_id.data("snippet-id")]($snipped_id);
+                $snipped_id.data("snippet-view", snippet);
+            }
+        });
+    };
+    website.snippet.stop_animation = function () {
+        $("[data-snippet-id]").each(function() {
+            var $snipped_id = $(this);
+            if ($snipped_id.data("snippet-view")) {
+                $snipped_id.data("snippet-view").stop();
+                $snipped_id.data("snippet-view", false);
+            }
+        });
+    };
+    $(document).ready(website.snippet.start_animation);
+
+
+    website.snippet.animationRegistry = {};
+    website.snippet.Animation = openerp.Class.extend({
+        $: function () {
+            return this.$el.find.apply(this.$el, arguments);
+        },
+        init: function (dom) {
+            this.$el = this.$target = $(dom);
+            this.start();
+        },
+        /*
+        *  start
+        *  This method is called after init
+        */
+        start: function () {
+        },
+        /*
+        *  stop
+        *  This method is called to stop the animation (e.g.: when rte is launch)
+        */
+        stop: function () {
+        },
+    });
+
+    website.snippet.animationRegistry.carousel = website.snippet.Animation.extend({
+        start: function () {
+            this.$target.carousel({interval: false});
+        },
+    });
+
+    website.snippet.animationRegistry.parallax = website.snippet.Animation.extend({
+        start: function () {
+            var self = this;
+            setTimeout(function () {self.set_values();});
+            this.on_scroll = function () {
+                var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
+                if (speed == 1) return;
+                var offset = parseFloat(self.$target.attr("data-scroll-background-offset") || 0);
+                var top = offset + window.scrollY * speed;
+                self.$target.css("background-position", "0px " + top + "px");
+            };
+            this.on_resize = function () {
+                self.set_values();
+            };
+            $(window).on("scroll", this.on_scroll);
+            $(window).on("resize", this.on_resize);
+        },
+        stop: function () {
+            $(window).off("scroll", this.on_scroll)
+                    .off("resize", this.on_resize);
+        },
+        set_values: function () {
+            var self = this;
+            var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
+
+            if (speed == 1) {
+                this.$target.css("background-attachment", "fixed").css("background-position", "0px 0px");
+                return;
+            } else {
+                this.$target.css("background-attachment", "scroll");
+            }
+
+            this.$target.attr("data-scroll-background-offset", 0);
+            var img = new Image();
+            img.onload = function () {
+                var offset = 0;
+                var padding =  parseInt($(document.body).css("padding-top"));
+                if (speed < 1) {
+                    var inner_offset = self.$target.outerHeight() - this.height / this.width * document.body.clientWidth;
+                    var outer_offset = self.$target.offset().top - (document.body.clientHeight - self.$target.outerHeight()) - padding;
+                    offset = - outer_offset * speed + inner_offset;
+                } else {
+                    offset = - self.$target.offset().top * speed;
+                }
+                self.$target.attr("data-scroll-background-offset", offset);
+                $(window).scroll();
+            };
+            img.src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)/g, "");
+        }
+    });
+
+})();
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.editor.js
index e25de37b524..edeafbc6986 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -1,21 +1,6 @@
 (function () {
     'use strict';
 
-
-    var start_snippet_animation = function () {
-        hack_to_add_snippet_id();
-        $("[data-snippet-id]").each(function() {
-            var $snipped_id = $(this);
-            if (    !$snipped_id.parents("#oe_snippets").length &&
-                    typeof $snipped_id.data("snippet-view") === 'undefined' &&
-                    website.snippet.animationRegistry[$snipped_id.data("snippet-id")]) {
-                var snippet = new website.snippet.animationRegistry[$snipped_id.data("snippet-id")]($snipped_id);
-                $snipped_id.data("snippet-view", snippet);
-            }
-        });
-    };
-    $(document).ready(start_snippet_animation);
-
     var website = openerp.website;
     website.add_template_file('/website/static/src/xml/website.snippets.xml');
 
@@ -39,7 +24,8 @@
 
             this.on('rte:ready', this, function () {
                 self.snippets.$button.removeClass("hidden");
-                start_snippet_animation();
+                website.snippet.stop_animation();
+                website.snippet.start_animation();
                 self.trigger('rte:snippets_ready');
             });
 
@@ -58,7 +44,6 @@
 
     /* ----- SNIPPET SELECTOR ---- */
 
-    website.snippet = {};
     var observer = new website.Observer(function (mutations) {
         if (!_(mutations).find(function (m) {
                     return m.type === 'childList' && m.addedNodes.length > 0;
@@ -88,6 +73,10 @@
         });
     }
 
+    $(document).ready(function() {
+        hack_to_add_snippet_id();
+    });
+
     website.snippet.selector = [];
     website.snippet.BuildingBlock = openerp.Widget.extend({
         template: 'website.snippets',
@@ -219,16 +208,10 @@
                 if ($snipped_id.data("snippet-editor")) {
                     $snipped_id.data("snippet-editor").onBlur();
                 }
-                if ($snipped_id.data("snippet-view")) {
-                    $snipped_id.data("snippet-view").onBlurEdit();
-                }
             }
         },
         snippet_focus: function ($snipped_id) {
             if ($snipped_id) {
-                if ($snipped_id.data("snippet-view")) {
-                    $snipped_id.data("snippet-view").onFocusEdit();
-                }
                 if ($snipped_id.data("snippet-editor")) {
                     $snipped_id.data("snippet-editor").onFocus();
                 }
@@ -367,9 +350,7 @@
                         if(action === 'insert'){
                             $target = $toInsert;
 
-                            if (website.snippet.animationRegistry[snipped_id]) {
-                                new website.snippet.animationRegistry[snipped_id]($target);
-                            }
+                            website.snippet.start_animation();
 
                             self.create_overlay($target);
                             $target.data("snippet-editor").drop_and_build_snippet($target);
@@ -547,34 +528,6 @@
     });
 
 
-    website.snippet.animationRegistry = {};
-    website.snippet.Animation = openerp.Class.extend({
-        $: function () {
-            return this.$el.find.apply(this.$el, arguments);
-        },
-        init: function (dom) {
-            this.$el = this.$target = $(dom);
-            this.start();
-        },
-        /*
-        *  start
-        *  This method is called after init
-        */
-        start: function () {
-        },
-        /* onFocusEdit
-        *  if they are an editor for this data-snippet-id
-        *  Called before onFocus of snippet editor
-        */
-        onFocusEdit : function () {},
-
-        /* onBlurEdit
-        *  if they are an editor for this data-snippet-id
-        *  Called after onBlur of snippet editor
-        */
-        onBlurEdit : function () {},
-    });
-
     website.snippet.editorRegistry = {};
     website.snippet.Editor = openerp.Class.extend({
         init: function (parent, dom) {
@@ -797,7 +750,7 @@
 
         },
 
-        change_background: function (bg, ul_options) {
+        change_background: function (bg, ul_options, callback) {
             var self = this;
             this.set_options_background(bg, ul_options);
             var $ul = this.$editor.find(ul_options);
@@ -819,6 +772,9 @@
                         });
                         editor.appendTo($('body'));
                     }
+                    if (callback) {
+                        callback();
+                    }
                 })
                 .on('mouseover', function (event) {
                     if ($(this).data("value")) {
@@ -1033,11 +989,6 @@
         },
     });
 
-    website.snippet.animationRegistry.carousel = website.snippet.Animation.extend({
-        start: function () {
-            this.$target.carousel({interval: false});
-        },
-    });
     website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.resize.extend({
         drop_and_build_snippet: function() {
             var id = 0;
@@ -1211,8 +1162,11 @@
 
     website.snippet.editorRegistry.parallax = website.snippet.editorRegistry.resize.extend({
         start : function () {
+            var self = this;
             this._super();
-            this.change_background(this.$target, 'ul[name="parallax-background"]');
+            this.change_background(this.$target, 'ul[name="parallax-background"]', function () {
+                self.$target.data("snippet-view").set_values();
+            });
             this.scroll();
             this.change_size();
         },
@@ -1228,11 +1182,15 @@
                 var speed =  $(this).data('value');
                 self.$target.attr('data-scroll-background-ratio', speed);
                 self.$target.data("snippet-view").set_values();
+                return false;
             });
+            this.$target.data("snippet-view").set_values();
         },
         clean_for_save: function () {
             this._super();
-            this.$target.find(".parallax").css("background-position", '');
+            this.$target.find(".parallax")
+                .css("background-position", '')
+                .removeAttr("data-scroll-background-offset");
         },
         change_size: function () {
             var self = this;
@@ -1251,6 +1209,7 @@
                     $li.removeClass("active");
                     $(this).addClass("active");
                     self.$target.data("snippet-view").set_values();
+                    return false;
                 })
                 .on('mouseover', function (event) {
                     self.$target.removeClass('oe_big oe_small oe_medium');
@@ -1262,39 +1221,6 @@
                 });
         }
     });
-    website.snippet.animationRegistry.parallax = website.snippet.Animation.extend({
-        start: function () {
-            var self = this;
-            this.set_values();
-            var on_scroll = function () {
-                var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
-                if (speed == 1) return;
-                var offset = parseFloat(self.$target.attr("data-scroll-background-offset") || 0);
-                var top = offset + window.scrollY * speed;
-                self.$target.css("background-position", "0px " + top + "px");
-            };
-            $(window).off("scroll").on("scroll", on_scroll);
-        },
-        set_values: function () {
-            var self = this;
-            var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
-
-            if (speed == 1) {
-                this.$target.css("background-attachment", "fixed").css("background-position", "0px 0px");
-                return;
-            } else {
-                this.$target.css("background-attachment", "scroll");
-            }
-
-            this.$target.attr("data-scroll-background-offset", 0);
-            var img = new Image();
-            img.onload = function () {
-                self.$target.attr("data-scroll-background-offset", self.$target.outerHeight() - this.height);
-                $(window).scroll();
-            };
-            img.src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)/g, "");
-        }
-    });
 
     /*
     * data-snippet-id automatically setted