summaryrefslogtreecommitdiff
path: root/addons/website/static/src/js/content/zoomodoo.js
diff options
context:
space:
mode:
authorqsm-odoo <qsm@odoo.com>2017-06-07 17:45:15 +0200
committerqsm-odoo <qsm@odoo.com>2017-08-16 10:59:39 +0200
commit4f925af06fd3cebfcfb56eb947ab68c8a2ca4490 (patch)
treeb13bd049b6b3e7bbdfb537d19b53c95fc4025ea5 /addons/website/static/src/js/content/zoomodoo.js
parentf205bfcd4ddcf3f1d8676ee87ee0b29941bd6773 (diff)
[MOV] web_editor, website: reorganize files
Diffstat (limited to 'addons/website/static/src/js/content/zoomodoo.js')
-rw-r--r--addons/website/static/src/js/content/zoomodoo.js292
1 files changed, 292 insertions, 0 deletions
diff --git a/addons/website/static/src/js/content/zoomodoo.js b/addons/website/static/src/js/content/zoomodoo.js
new file mode 100644
index 00000000000..0e152d0e6de
--- /dev/null
+++ b/addons/website/static/src/js/content/zoomodoo.js
@@ -0,0 +1,292 @@
+(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,
+
+ // disable on mobile
+ disabledOnMobile: 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() {
+ if (window.outerWidth > 467 || !this.opts.disabledOnMobile) {
+ 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);