From c00ead7832352c7a2d3fc10629af3d30b67fdeaa Mon Sep 17 00:00:00 2001 From: Steve Lindstrom Date: Wed, 11 Nov 2015 16:42:50 -0800 Subject: [PATCH] #79 Optional delay between mouseenter and show --- dist/easyzoom.js | 4 ++-- index.html | 7 ++++++- src/easyzoom.js | 37 ++++++++++++++++++++++++------------- 3 files changed, 32 insertions(+), 16 deletions(-) diff --git a/dist/easyzoom.js b/dist/easyzoom.js index ac0d313..e4902bd 100644 --- a/dist/easyzoom.js +++ b/dist/easyzoom.js @@ -1,6 +1,6 @@ /*! * @name EasyZoom * @author Matt Hinchliffe <> - * @modified Wednesday, November 4th, 2015 + * @modified Wednesday, November 11th, 2015 * @version 2.3.1 - */!function(a){"use strict";function b(b,c){this.$target=a(b),this.opts=a.extend({},i,c,this.$target.data()),void 0===this.isOpen&&this._init()}var c,d,e,f,g,h,i={loadingNotice:"Loading image",errorNotice:"The image could not be loaded",errorDuration:2500,preventClicks:!0,onShow:a.noop,onHide:a.noop,onMove:a.noop};b.prototype._init=function(){this.$link=this.$target.find("a"),this.$image=this.$target.find("img"),this.$flyout=a('
'),this.$notice=a('
'),this.$target.on({"mousemove.easyzoom touchmove.easyzoom":a.proxy(this._onMove,this),"mouseleave.easyzoom touchend.easyzoom":a.proxy(this._onLeave,this),"mouseenter.easyzoom touchstart.easyzoom":a.proxy(this._onEnter,this)}),this.opts.preventClicks&&this.$target.on("click.easyzoom",function(a){a.preventDefault()})},b.prototype.show=function(a,b){var g,h,i,j,k=this;return this.isReady?(this.$target.append(this.$flyout),g=this.$target.width(),h=this.$target.height(),i=this.$flyout.width(),j=this.$flyout.height(),c=this.$zoom.width()-i,d=this.$zoom.height()-j,e=c/g,f=d/h,this.isOpen=!0,this.opts.onShow.call(this),void(a&&this._move(a))):this._loadImage(this.$link.attr("href"),function(){(k.isMouseOver||!b)&&k.show(a)})},b.prototype._onEnter=function(a){var b=a.originalEvent.touches;this.isMouseOver=!0,b&&1!=b.length||(a.preventDefault(),this.show(a,!0))},b.prototype._onMove=function(a){this.isOpen&&(a.preventDefault(),this._move(a))},b.prototype._onLeave=function(){this.isMouseOver=!1,this.isOpen&&this.hide()},b.prototype._onLoad=function(a){a.currentTarget.width&&(this.isReady=!0,this.$notice.detach(),this.$flyout.html(this.$zoom),this.$target.removeClass("is-loading").addClass("is-ready"),a.data.call&&a.data())},b.prototype._onError=function(){var a=this;this.$notice.text(this.opts.errorNotice),this.$target.removeClass("is-loading").addClass("is-error"),this.detachNotice=setTimeout(function(){a.$notice.detach(),a.detachNotice=null},this.opts.errorDuration)},b.prototype._loadImage=function(b,c){var d=new Image;this.$target.addClass("is-loading").append(this.$notice.text(this.opts.loadingNotice)),this.$zoom=a(d).on("error",a.proxy(this._onError,this)).on("load",c,a.proxy(this._onLoad,this)),d.style.position="absolute",d.src=b},b.prototype._move=function(a){if(0===a.type.indexOf("touch")){var b=a.touches||a.originalEvent.touches;g=b[0].pageX,h=b[0].pageY}else g=a.pageX||g,h=a.pageY||h;var i=this.$target.offset(),j=h-i.top,k=g-i.left,l=Math.ceil(j*f),m=Math.ceil(k*e);if(0>m||0>l||m>c||l>d)this.hide();else{var n=-1*l,o=-1*m;this.$zoom.css({top:n,left:o}),this.opts.onMove.call(this,n,o)}},b.prototype.hide=function(){this.isOpen&&(this.$flyout.detach(),this.isOpen=!1,this.opts.onHide.call(this))},b.prototype.swap=function(b,c,d){this.hide(),this.isReady=!1,this.detachNotice&&clearTimeout(this.detachNotice),this.$notice.parent().length&&this.$notice.detach(),this.$target.removeClass("is-loading is-ready is-error"),this.$image.attr({src:b,srcset:a.isArray(d)?d.join():d}),this.$link.attr("href",c)},b.prototype.teardown=function(){this.hide(),this.$target.off(".easyzoom").removeClass("is-loading is-ready is-error"),this.detachNotice&&clearTimeout(this.detachNotice),delete this.$link,delete this.$zoom,delete this.$image,delete this.$notice,delete this.$flyout,delete this.isOpen,delete this.isReady},a.fn.easyZoom=function(c){return this.each(function(){var d=a.data(this,"easyZoom");d?void 0===d.isOpen&&d._init():a.data(this,"easyZoom",new b(this,c))})},"function"==typeof define&&define.amd?define(function(){return b}):"undefined"!=typeof module&&module.exports&&(module.exports=b)}(jQuery); \ No newline at end of file + */!function(a){"use strict";function b(b,c){this.$target=a(b),this.opts=a.extend({},i,c,this.$target.data()),void 0===this.isOpen&&this._init()}var c,d,e,f,g,h,i={loadingNotice:"Loading image",errorNotice:"The image could not be loaded",errorDuration:2500,preventClicks:!0,onShow:a.noop,onHide:a.noop,onMove:a.noop,showDelay:0};b.prototype._init=function(){this.$link=this.$target.find("a"),this.$image=this.$target.find("img"),this.$flyout=a('
'),this.$notice=a('
'),this.$target.on({"mousemove.easyzoom touchmove.easyzoom":a.proxy(this._onMove,this),"mouseleave.easyzoom touchend.easyzoom":a.proxy(this._onLeave,this),"mouseenter.easyzoom touchstart.easyzoom":a.proxy(this._onEnter,this)}),this.opts.preventClicks&&this.$target.on("click.easyzoom",function(a){a.preventDefault()})},b.prototype.show=function(b,g){var h,i,j,k,l=this;if(!this.isReady)return this._loadImage(this.$link.attr("href"),function(){(l.isMouseOver||!g)&&l.show(b)});var m=a.proxy(function(){this.$target.append(this.$flyout),h=this.$target.width(),i=this.$target.height(),j=this.$flyout.width(),k=this.$flyout.height(),c=this.$zoom.width()-j,d=this.$zoom.height()-k,e=c/h,f=d/i,this.isOpen=!0,this.opts.onShow.call(this),b&&this._move(b)},this);this.opts.showDelay?window.setTimeout(m,this.opts.showDelay):m()},b.prototype._onEnter=function(a){var b=a.originalEvent.touches;this.isMouseOver=!0,b&&1!=b.length||(a.preventDefault(),this.show(a,!0))},b.prototype._onMove=function(a){this.isOpen&&(a.preventDefault(),this._move(a))},b.prototype._onLeave=function(){this.isMouseOver=!1,this.isOpen&&this.hide()},b.prototype._onLoad=function(a){a.currentTarget.width&&(this.isReady=!0,this.$notice.detach(),this.$flyout.html(this.$zoom),this.$target.removeClass("is-loading").addClass("is-ready"),a.data.call&&a.data())},b.prototype._onError=function(){var a=this;this.$notice.text(this.opts.errorNotice),this.$target.removeClass("is-loading").addClass("is-error"),this.detachNotice=setTimeout(function(){a.$notice.detach(),a.detachNotice=null},this.opts.errorDuration)},b.prototype._loadImage=function(b,c){var d=new Image;this.$target.addClass("is-loading").append(this.$notice.text(this.opts.loadingNotice)),this.$zoom=a(d).on("error",a.proxy(this._onError,this)).on("load",c,a.proxy(this._onLoad,this)),d.style.position="absolute",d.src=b},b.prototype._move=function(a){if(0===a.type.indexOf("touch")){var b=a.touches||a.originalEvent.touches;g=b[0].pageX,h=b[0].pageY}else g=a.pageX||g,h=a.pageY||h;var i=this.$target.offset(),j=h-i.top,k=g-i.left,l=Math.ceil(j*f),m=Math.ceil(k*e);if(0>m||0>l||m>c||l>d)this.hide();else{var n=-1*l,o=-1*m;this.$zoom.css({top:n,left:o}),this.opts.onMove.call(this,n,o)}},b.prototype.hide=function(){this.isOpen&&(this.$flyout.detach(),this.isOpen=!1,this.opts.onHide.call(this))},b.prototype.swap=function(b,c,d){this.hide(),this.isReady=!1,this.detachNotice&&clearTimeout(this.detachNotice),this.$notice.parent().length&&this.$notice.detach(),this.$target.removeClass("is-loading is-ready is-error"),this.$image.attr({src:b,srcset:a.isArray(d)?d.join():d}),this.$link.attr("href",c)},b.prototype.teardown=function(){this.hide(),this.$target.off(".easyzoom").removeClass("is-loading is-ready is-error"),this.detachNotice&&clearTimeout(this.detachNotice),delete this.$link,delete this.$zoom,delete this.$image,delete this.$notice,delete this.$flyout,delete this.isOpen,delete this.isReady},a.fn.easyZoom=function(c){return this.each(function(){var d=a.data(this,"easyZoom");d?void 0===d.isOpen&&d._init():a.data(this,"easyZoom",new b(this,c))})},"function"==typeof define&&define.amd?define(function(){return b}):"undefined"!=typeof module&&module.exports&&(module.exports=b)}(jQuery); \ No newline at end of file diff --git a/index.html b/index.html index 851ed0e..df49cfb 100644 --- a/index.html +++ b/index.html @@ -243,7 +243,7 @@

errorDuration 2500 - The time (in milliseconds) to display the error notice + The time (in milliseconds) to display the error notice. preventClicks @@ -265,6 +265,11 @@

$.noop Callback function to execute when the flyout is removed. + + showDelay + 0 + The amount of time (in milliseconds) that should pass between mouseenter and displaying the zoom image. + diff --git a/src/easyzoom.js b/src/easyzoom.js index bf15fe0..c089228 100644 --- a/src/easyzoom.js +++ b/src/easyzoom.js @@ -25,7 +25,10 @@ onHide: $.noop, // Callback function to execute when the cursor is moved while over the image. - onMove: $.noop + onMove: $.noop, + + // The amount of time (in milliseconds) that should pass between mouseenter and displaying the zoom image + showDelay: 0 }; @@ -81,25 +84,33 @@ }); } - this.$target.append(this.$flyout); + var appendFunction = $.proxy(function () { + this.$target.append(this.$flyout); + + w1 = this.$target.width(); + h1 = this.$target.height(); - w1 = this.$target.width(); - h1 = this.$target.height(); + w2 = this.$flyout.width(); + h2 = this.$flyout.height(); - w2 = this.$flyout.width(); - h2 = this.$flyout.height(); + dw = this.$zoom.width() - w2; + dh = this.$zoom.height() - h2; - dw = this.$zoom.width() - w2; - dh = this.$zoom.height() - h2; + rw = dw / w1; + rh = dh / h1; - rw = dw / w1; - rh = dh / h1; + this.isOpen = true; - this.isOpen = true; + this.opts.onShow.call(this); - this.opts.onShow.call(this); + e && this._move(e); + }, this); - e && this._move(e); + if (this.opts.showDelay) { + window.setTimeout(appendFunction, this.opts.showDelay); + } else { + appendFunction(); + } }; /**