[IMP] web_editor, website, website_sale: add zoom option for t-field image

web_editor Qweb: Add 'zoom' option for widget image
    <span t-field="product.image_small" t-options="{'widget': 'image', 'zoom': 'image_medium'}" />

website: Add Zoom code to be standard for all website module

website_sale: add zoom on Main product image

3 files changed, 326 insertions, 0 deletions

diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 1e2cf2ddb90..046da64ccf7 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -266,6 +266,9 @@ odoo.define('website.website', function (require) {
         }
     });
 
+    // enable magnify on zommable img
+    $('.zoomable img[data-zoom]').zoomOdoo();
+
     Dialog.include({
         init: function () {
             this._super.apply(this, arguments);
diff --git a/addons/website/static/src/js/website.zoomodoo.js b/addons/website/static/src/js/website.zoomodoo.js
new file mode 100644
index 00000000000..54dc32bdde0
--- /dev/null
+++ b/addons/website/static/src/js/website.zoomodoo.js
@@ -0,0 +1,288 @@
+(function ($) {
+    /**
+        This code has been more that widely inspired by easyZoom library.
+
+        Copyright 2013 Matt Hinchliffe
+
+        Permission is hereby granted, free of charge, to any person obtaining
+        a copy of this software and associated documentation files (the
+        "Software"), to deal in the Software without restriction, including
+        without limitation the rights to use, copy, modify, merge, publish,
+        distribute, sublicense, and/or sell copies of the Software, and to
+        permit persons to whom the Software is furnished to do so, subject to
+        the following conditions:
+
+        The above copyright notice and this permission notice shall be
+        included in all copies or substantial portions of the Software.
+    **/
+
+    'use strict';
+
+    var dw, dh, rw, rh, lx, ly;
+
+    var defaults = {
+
+        // Attribute to retrieve the zoom image URL from.
+        linkTag: 'a',
+        linkAttribute: 'data-zoom-image',
+
+        // event to trigger zoom
+        event: 'click', //or mousenter
+
+        // Prevent clicks on the zoom image link.
+        preventClicks: true,
+
+        // Callback function to execute before the flyout is displayed.
+        beforeShow: $.noop,
+
+        // Callback function to execute before the flyout is removed.
+        beforeHide: $.noop,
+
+        // Callback function to execute when the flyout is displayed.
+        onShow: $.noop,
+
+        // Callback function to execute when the flyout is removed.
+        onHide: $.noop,
+
+        // Callback function to execute when the cursor is moved while over the image.
+        onMove: $.noop
+
+    };
+
+    /**
+     * ZoomOdoo
+     * @constructor
+     * @param {Object} target
+     * @param {Object} options (Optional)
+     */
+    function ZoomOdoo(target, options) {
+        this.$target = $(target);
+        this.opts = $.extend({}, defaults, options, this.$target.data());
+
+        if (this.isOpen === undefined) {
+            this._init();
+        }
+    }
+
+    /**
+     * Init
+     * @private
+     */
+    ZoomOdoo.prototype._init = function() {
+        this.$link  = this.$target.find(this.opts.linkTag).length && this.$target.find(this.opts.linkTag) || this.$target;
+        this.$image  = this.$target.find('img').length && this.$target.find('img') || this.$target;
+        this.$flyout = $('<div class="zoomodoo-flyout" />');
+
+        var $attach = this.$target;
+        if (this.opts.attach !== undefined && this.$target.parents(this.opts.attach).length) {
+            $attach = this.$target.parents(this.opts.attach);
+        }
+        $attach.parent().on('mousemove.zoomodoo touchmove.zoomodoo', $.proxy(this._onMove, this));
+        $attach.parent().on('mouseleave.zoomodoo touchend.zoomodoo', $.proxy(this._onLeave, this));
+        this.$target.parent().on(this.opts.event + '.zoomodoo touchstart.zoomodoo', $.proxy(this._onEnter, this));
+
+        if (this.opts.preventClicks) {
+            this.$target.on('click.zoomodoo', function(e) { e.preventDefault(); });
+        }
+    };
+
+    /**
+     * Show
+     * @param {MouseEvent|TouchEvent} e
+     * @param {Boolean} testMouseOver (Optional)
+     */
+    ZoomOdoo.prototype.show = function(e, testMouseOver) {
+        var w1, h1, w2, h2;
+        var self = this;
+
+        if (this.opts.beforeShow.call(this) === false) return;
+
+        if (!this.isReady) {
+            return this._loadImage(this.$link.attr(this.opts.linkAttribute), function() {
+                if (self.isMouseOver || !testMouseOver) {
+                    self.show(e);
+                }
+            });
+        }
+
+        var $attach = this.$target;
+        if (this.opts.attach !== undefined && this.$target.parents(this.opts.attach).length) {
+            $attach = this.$target.parents(this.opts.attach);
+        }
+        $attach.parent().append(this.$flyout);
+
+        w1 = this.$target.width();
+        h1 = this.$target.height();
+
+        w2 = this.$flyout.width();
+        h2 = this.$flyout.height();
+
+        dw = this.$zoom.width() - w2;
+        dh = this.$zoom.height() - h2;
+
+        // For the case where the zoom image is actually smaller than
+        // the flyout.
+        if (dw < 0) dw = 0;
+        if (dh < 0) dh = 0;
+
+        rw = dw / w1;
+        rh = dh / h1;
+
+        this.isOpen = true;
+
+        this.opts.onShow.call(this);
+
+        if (e) {
+            this._move(e);
+        }
+    };
+
+    /**
+     * On enter
+     * @private
+     * @param {Event} e
+     */
+    ZoomOdoo.prototype._onEnter = function(e) {
+        var touches = e.originalEvent.touches;
+
+        this.isMouseOver = true;
+
+        if (!touches || touches.length === 1) {
+            e.preventDefault();
+            this.show(e, true);
+        }
+    };
+
+    /**
+     * On move
+     * @private
+     * @param {Event} e
+     */
+    ZoomOdoo.prototype._onMove = function(e) {
+        if (!this.isOpen) return;
+
+        e.preventDefault();
+        this._move(e);
+    };
+
+    /**
+     * On leave
+     * @private
+     */
+    ZoomOdoo.prototype._onLeave = function() {
+        this.isMouseOver = false;
+        if (this.isOpen) {
+            this.hide();
+        }
+    };
+
+    /**
+     * On load
+     * @private
+     * @param {Event} e
+     */
+    ZoomOdoo.prototype._onLoad = function(e) {
+        // IE may fire a load event even on error so test the image dimensions
+        if (!e.currentTarget.width) return;
+
+        this.isReady = true;
+
+        this.$flyout.html(this.$zoom);
+
+        if (e.data.call) {
+            e.data();
+        }
+    };
+
+
+
+    /**
+     * Load image
+     * @private
+     * @param {String} href
+     * @param {Function} callback
+     */
+    ZoomOdoo.prototype._loadImage = function(href, callback) {
+        var zoom = new Image();
+
+        this.$zoom = $(zoom).on('load', callback, $.proxy(this._onLoad, this));
+
+        zoom.style.position = 'absolute';
+        zoom.src = href;
+    };
+
+    /**
+     * Move
+     * @private
+     * @param {Event} e
+     */
+    ZoomOdoo.prototype._move = function(e) {
+        if (e.type.indexOf('touch') === 0) {
+            var touchlist = e.touches || e.originalEvent.touches;
+            lx = touchlist[0].pageX;
+            ly = touchlist[0].pageY;
+        } else {
+            lx = e.pageX || lx;
+            ly = e.pageY || ly;
+        }
+
+        var offset  = this.$target.offset();
+        var pt = ly - offset.top;
+        var pl = lx - offset.left;
+        var xt = Math.ceil(pt * rh);
+        var xl = Math.ceil(pl * rw);
+
+        // Close if outside
+        if (xl < 0 || xt < 0 || xl > dw || xt > dh) {
+            this.hide();
+        } else {
+            var top = xt * -1;
+            var left = xl * -1;
+
+            this.$zoom.css({
+                top: top,
+                left: left
+            });
+
+            this.opts.onMove.call(this, top, left);
+        }
+
+    };
+
+    /**
+     * Hide
+     */
+    ZoomOdoo.prototype.hide = function() {
+        if (!this.isOpen) return;
+        if (this.opts.beforeHide.call(this) === false) return;
+
+        this.$flyout.detach();
+        this.isOpen = false;
+
+        this.opts.onHide.call(this);
+    };
+
+
+    // jQuery plugin wrapper
+    $.fn.zoomOdoo = function(options) {
+        return this.each(function() {
+            var api = $.data(this, 'zoomOdoo');
+
+            if (!api) {
+                $.data(this, 'zoomOdoo', new ZoomOdoo(this, options));
+            } else if (api.isOpen === undefined) {
+                api._init();
+            }
+        });
+    };
+
+    // AMD and CommonJS module compatibility
+    if (typeof define === 'function' && define.amd){
+        define(function() {
+            return ZoomOdoo;
+        });
+    } else if (typeof module !== 'undefined' && module.exports) {
+        module.exports = ZoomOdoo;
+    }
+
+})(jQuery);
diff --git a/addons/website/static/src/less/website.zoomodoo.less b/addons/website/static/src/less/website.zoomodoo.less
new file mode 100644
index 00000000000..da90921b1c2
--- /dev/null
+++ b/addons/website/static/src/less/website.zoomodoo.less
@@ -0,0 +1,35 @@
+
+.zoomodoo {
+    position: relative;
+
+    /* 'Shrink-wrap' the element */
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+
+    img {
+        vertical-align: bottom;
+    }
+}
+
+.zoomodoo-flyout {
+    position:absolute;
+    z-index: 100;
+    overflow: hidden;
+    background: #FFF;
+}
+
+.zoomodoo-hover .zoomodoo-flyout {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.zoomodoo-next .zoomodoo-flyout {
+    top: 0;
+    left: 100%;
+    width: 100%;
+    height: 100%;
+    margin-left: 20px;
+}
\ No newline at end of file