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

   1 (function () {
   2     'use strict';
   3
   4     var website = openerp.website;
   5     if (!website.snippet) website.snippet = {};
   6     website.snippet.readyAnimation = [];
   7
   8     website.snippet.start_animation = function ($target) {
   9         for (var k in website.snippet.animationRegistry) {
  10             var Animation = website.snippet.animationRegistry[k];
  11             var selector = "";
  12             if (Animation.prototype.selector) {
  13                 if (selector != "") selector += ", "
  14                 selector += Animation.prototype.selector;
  15             }
  16             if ($target) {
  17                 if ($target.is(selector)) selector = $target;
  18                 else continue;
  19             }
  20
  21             $(selector).each(function() {
  22                 var $snipped_id = $(this);
  23                 if (    !$snipped_id.parents("#oe_snippets").length &&
  24                         !$snipped_id.parent("body").length &&
  25                         !$snipped_id.data("snippet-view")) {
  26                     website.snippet.readyAnimation.push($snipped_id);
  27                     $snipped_id.data("snippet-view", new Animation($snipped_id));
  28                 }
  29             });
  30         }
  31     };
  32     website.snippet.stop_animation = function () {
  33         $(website.snippet.readyAnimation).each(function() {
  34             var $snipped_id = $(this);
  35             if ($snipped_id.data("snippet-view")) {
  36                 $snipped_id.data("snippet-view").stop();
  37                 $snipped_id.data("snippet-view", false);
  38             }
  39         });
  40     };
  41     $(document).ready(function () {website.snippet.start_animation();});
  42
  43
  44     website.snippet.animationRegistry = {};
  45     website.snippet.Animation = openerp.Class.extend({
  46         selector: false,
  47         $: function () {
  48             return this.$el.find.apply(this.$el, arguments);
  49         },
  50         init: function (dom) {
  51             this.$el = this.$target = $(dom);
  52             this.start();
  53         },
  54         /*
  55         *  start
  56         *  This method is called after init
  57         */
  58         start: function () {
  59         },
  60         /*
  61         *  stop
  62         *  This method is called to stop the animation (e.g.: when rte is launch)
  63         */
  64         stop: function () {
  65         },
  66     });
  67
  68     website.snippet.animationRegistry.slider = website.snippet.Animation.extend({
  69         selector: ".carousel",
  70         start: function () {
  71             this.$target.carousel({interval: 10000});
  72         },
  73     });
  74
  75     website.snippet.animationRegistry.parallax = website.snippet.Animation.extend({
  76         selector: ".parallax",
  77         start: function () {
  78             var self = this;
  79             setTimeout(function () {self.set_values();});
  80             this.on_scroll = function () {
  81                 var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
  82                 if (speed == 1) return;
  83                 var offset = parseFloat(self.$target.attr("data-scroll-background-offset") || 0);
  84                 var top = offset + window.scrollY * speed;
  85                 self.$target.css("background-position", "0px " + top + "px");
  86             };
  87             this.on_resize = function () {
  88                 self.set_values();
  89             };
  90             $(window).on("scroll", this.on_scroll);
  91             $(window).on("resize", this.on_resize);
  92         },
  93         stop: function () {
  94             $(window).off("scroll", this.on_scroll)
  95                     .off("resize", this.on_resize);
  96         },
  97         set_values: function () {
  98             var self = this;
  99             var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
 100
 101             if (speed === 1 || this.$target.css("background-image") === "none") {
 102                 this.$target.css("background-attachment", "fixed").css("background-position", "0px 0px");
 103                 return;
 104             } else {
 105                 this.$target.css("background-attachment", "scroll");
 106             }
 107
 108             this.$target.attr("data-scroll-background-offset", 0);
 109             var img = new Image();
 110             img.onload = function () {
 111                 var offset = 0;
 112                 var padding =  parseInt($(document.body).css("padding-top"));
 113                 if (speed < 1) {
 114                     var inner_offset = - self.$target.outerHeight() + this.height / this.width * document.body.clientWidth;
 115                     var outer_offset = self.$target.offset().top - (document.body.clientHeight - self.$target.outerHeight()) - padding;
 116                     offset = - outer_offset * speed + inner_offset;
 117                 } else {
 118                     offset = - self.$target.offset().top * speed;
 119                 }
 120                 self.$target.attr("data-scroll-background-offset", offset > 0 ? 0 : offset);
 121                 $(window).scroll();
 122             };
 123             img.src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)/g, "");
 124             $(window).scroll();
 125         }
 126     });
 127
 128 })();