From 3a187e1d0d3221e4a391321523d585fc866cf5d5 Mon Sep 17 00:00:00 2001 From: geekplux Date: Tue, 24 May 2016 12:09:37 +0800 Subject: [PATCH 1/4] organize code --- js/zoom.js | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/js/zoom.js b/js/zoom.js index 1348757..c480d68 100755 --- a/js/zoom.js +++ b/js/zoom.js @@ -1,13 +1,14 @@ -+function ($) { "use strict"; +;(function ($) { + "use strict"; /** * The zoom service */ function ZoomService () { this._activeZoom = - this._initialScrollPosition = - this._initialTouchPosition = - this._touchMoveListener = null + this._initialScrollPosition = + this._initialTouchPosition = + this._touchMoveListener = null this._$document = $(document) this._$window = $(window) @@ -119,9 +120,9 @@ */ function Zoom (img) { this._fullHeight = - this._fullWidth = - this._overlay = - this._targetImageWrap = null + this._fullWidth = + this._overlay = + this._targetImageWrap = null this._targetImage = img @@ -214,15 +215,15 @@ $(this._targetImage) .css({ '-webkit-transform': targetTransform, - '-ms-transform': targetTransform, - 'transform': targetTransform + '-ms-transform': targetTransform, + 'transform': targetTransform }) $(this._targetImageWrap) .css({ '-webkit-transform': imageWrapTransform, - '-ms-transform': imageWrapTransform, - 'transform': imageWrapTransform + '-ms-transform': imageWrapTransform, + 'transform': imageWrapTransform }) this._$body.addClass('zoom-overlay-open') @@ -237,15 +238,15 @@ $(this._targetImage) .css({ '-webkit-transform': '', - '-ms-transform': '', - 'transform': '' + '-ms-transform': '', + 'transform': '' }) $(this._targetImageWrap) .css({ '-webkit-transform': '', - '-ms-transform': '', - 'transform': '' + '-ms-transform': '', + 'transform': '' }) if (!$.support.transition) { @@ -275,4 +276,4 @@ new ZoomService().listen() }) -}(jQuery) +})(jQuery); From dcc5da5a3a7718f76cbf2387222f19271859c9b1 Mon Sep 17 00:00:00 2001 From: geekplux Date: Tue, 24 May 2016 12:12:52 +0800 Subject: [PATCH 2/4] change the zoom-overlay position to fix #70 --- js/.tern-port | 1 + js/zoom.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 js/.tern-port diff --git a/js/.tern-port b/js/.tern-port new file mode 100644 index 0000000..0f45694 --- /dev/null +++ b/js/.tern-port @@ -0,0 +1 @@ +58427 \ No newline at end of file diff --git a/js/zoom.js b/js/zoom.js index c480d68..4f62731 100755 --- a/js/zoom.js +++ b/js/zoom.js @@ -157,7 +157,7 @@ this._overlay = document.createElement('div') this._overlay.className = 'zoom-overlay' - document.body.appendChild(this._overlay) + this._targetImageWrap.parentNode.insertBefore(this._overlay, this._targetImageWrap) this._calculateZoom() this._triggerAnimation() From 880355dae4f44f52bddd59b13f24ff69963c62d5 Mon Sep 17 00:00:00 2001 From: geekplux Date: Tue, 24 May 2016 12:14:55 +0800 Subject: [PATCH 3/4] rebuild --- dist/zoom.js | 37 +++++++++++++++++++------------------ dist/zoom.min.js | 4 ++-- 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/dist/zoom.js b/dist/zoom.js index 25d76d6..758dc9c 100755 --- a/dist/zoom.js +++ b/dist/zoom.js @@ -1,20 +1,21 @@ /** * zoom.js - It's the best way to zoom an image - * @version v0.0.2 + * @version v0.0.3 * @link https://github.com/fat/zoom.js * @license MIT */ -+function ($) { "use strict"; +;(function ($) { + "use strict"; /** * The zoom service */ function ZoomService () { this._activeZoom = - this._initialScrollPosition = - this._initialTouchPosition = - this._touchMoveListener = null + this._initialScrollPosition = + this._initialTouchPosition = + this._touchMoveListener = null this._$document = $(document) this._$window = $(window) @@ -126,9 +127,9 @@ */ function Zoom (img) { this._fullHeight = - this._fullWidth = - this._overlay = - this._targetImageWrap = null + this._fullWidth = + this._overlay = + this._targetImageWrap = null this._targetImage = img @@ -163,7 +164,7 @@ this._overlay = document.createElement('div') this._overlay.className = 'zoom-overlay' - document.body.appendChild(this._overlay) + this._targetImageWrap.parentNode.insertBefore(this._overlay, this._targetImageWrap) this._calculateZoom() this._triggerAnimation() @@ -221,15 +222,15 @@ $(this._targetImage) .css({ '-webkit-transform': targetTransform, - '-ms-transform': targetTransform, - 'transform': targetTransform + '-ms-transform': targetTransform, + 'transform': targetTransform }) $(this._targetImageWrap) .css({ '-webkit-transform': imageWrapTransform, - '-ms-transform': imageWrapTransform, - 'transform': imageWrapTransform + '-ms-transform': imageWrapTransform, + 'transform': imageWrapTransform }) this._$body.addClass('zoom-overlay-open') @@ -244,15 +245,15 @@ $(this._targetImage) .css({ '-webkit-transform': '', - '-ms-transform': '', - 'transform': '' + '-ms-transform': '', + 'transform': '' }) $(this._targetImageWrap) .css({ '-webkit-transform': '', - '-ms-transform': '', - 'transform': '' + '-ms-transform': '', + 'transform': '' }) if (!$.support.transition) { @@ -282,4 +283,4 @@ new ZoomService().listen() }) -}(jQuery) +})(jQuery); diff --git a/dist/zoom.min.js b/dist/zoom.min.js index e8c18be..adac341 100755 --- a/dist/zoom.min.js +++ b/dist/zoom.min.js @@ -1,8 +1,8 @@ /** * zoom.js - It's the best way to zoom an image - * @version v0.0.2 + * @version v0.0.3 * @link https://github.com/fat/zoom.js * @license MIT */ -+function(t){"use strict";function o(){this._activeZoom=this._initialScrollPosition=this._initialTouchPosition=this._touchMoveListener=null,this._$document=t(document),this._$window=t(window),this._$body=t(document.body),this._boundClick=t.proxy(this._clickHandler,this)}function i(o){this._fullHeight=this._fullWidth=this._overlay=this._targetImageWrap=null,this._targetImage=o,this._$body=t(document.body)}o.prototype.listen=function(){this._$body.on("click",'[data-action="zoom"]',t.proxy(this._zoom,this))},o.prototype._zoom=function(o){var e=o.target;if(e&&"IMG"==e.tagName&&!this._$body.hasClass("zoom-overlay-open"))return o.metaKey||o.ctrlKey?window.open(o.target.getAttribute("data-original")||o.target.src,"_blank"):void(e.width>=t(window).width()-i.OFFSET||(this._activeZoomClose(!0),this._activeZoom=new i(e),this._activeZoom.zoomImage(),this._$window.on("scroll.zoom",t.proxy(this._scrollHandler,this)),this._$document.on("keyup.zoom",t.proxy(this._keyHandler,this)),this._$document.on("touchstart.zoom",t.proxy(this._touchStart,this)),document.addEventListener?document.addEventListener("click",this._boundClick,!0):document.attachEvent("onclick",this._boundClick,!0),"bubbles"in o?o.bubbles&&o.stopPropagation():o.cancelBubble=!0))},o.prototype._activeZoomClose=function(t){this._activeZoom&&(t?this._activeZoom.dispose():this._activeZoom.close(),this._$window.off(".zoom"),this._$document.off(".zoom"),document.removeEventListener("click",this._boundClick,!0),this._activeZoom=null)},o.prototype._scrollHandler=function(o){null===this._initialScrollPosition&&(this._initialScrollPosition=t(window).scrollTop());var i=this._initialScrollPosition-t(window).scrollTop();Math.abs(i)>=40&&this._activeZoomClose()},o.prototype._keyHandler=function(t){27==t.keyCode&&this._activeZoomClose()},o.prototype._clickHandler=function(t){t.preventDefault?t.preventDefault():event.returnValue=!1,"bubbles"in t?t.bubbles&&t.stopPropagation():t.cancelBubble=!0,this._activeZoomClose()},o.prototype._touchStart=function(o){this._initialTouchPosition=o.touches[0].pageY,t(o.target).on("touchmove.zoom",t.proxy(this._touchMove,this))},o.prototype._touchMove=function(o){Math.abs(o.touches[0].pageY-this._initialTouchPosition)>10&&(this._activeZoomClose(),t(o.target).off("touchmove.zoom"))},i.OFFSET=80,i._MAX_WIDTH=2560,i._MAX_HEIGHT=4096,i.prototype.zoomImage=function(){var o=document.createElement("img");o.onload=t.proxy(function(){this._fullHeight=Number(o.height),this._fullWidth=Number(o.width),this._zoomOriginal()},this),o.src=this._targetImage.src},i.prototype._zoomOriginal=function(){this._targetImageWrap=document.createElement("div"),this._targetImageWrap.className="zoom-img-wrap",this._targetImage.parentNode.insertBefore(this._targetImageWrap,this._targetImage),this._targetImageWrap.appendChild(this._targetImage),t(this._targetImage).addClass("zoom-img").attr("data-action","zoom-out"),this._overlay=document.createElement("div"),this._overlay.className="zoom-overlay",document.body.appendChild(this._overlay),this._calculateZoom(),this._triggerAnimation()},i.prototype._calculateZoom=function(){this._targetImage.offsetWidth;var o=this._fullWidth,e=this._fullHeight,a=(t(window).scrollTop(),o/this._targetImage.width),s=t(window).height()-i.OFFSET,r=t(window).width()-i.OFFSET,n=o/e,h=r/s;this._imgScaleFactor=r>o&&s>e?a:h>n?s/e*a:r/o*a},i.prototype._triggerAnimation=function(){this._targetImage.offsetWidth;var o=t(this._targetImage).offset(),i=t(window).scrollTop(),e=i+t(window).height()/2,a=t(window).width()/2,s=o.top+this._targetImage.height/2,r=o.left+this._targetImage.width/2;this._translateY=e-s,this._translateX=a-r;var n="scale("+this._imgScaleFactor+")",h="translate("+this._translateX+"px, "+this._translateY+"px)";t.support.transition&&(h+=" translateZ(0)"),t(this._targetImage).css({"-webkit-transform":n,"-ms-transform":n,transform:n}),t(this._targetImageWrap).css({"-webkit-transform":h,"-ms-transform":h,transform:h}),this._$body.addClass("zoom-overlay-open")},i.prototype.close=function(){return this._$body.removeClass("zoom-overlay-open").addClass("zoom-overlay-transitioning"),t(this._targetImage).css({"-webkit-transform":"","-ms-transform":"",transform:""}),t(this._targetImageWrap).css({"-webkit-transform":"","-ms-transform":"",transform:""}),t.support.transition?void t(this._targetImage).one(t.support.transition.end,t.proxy(this.dispose,this)).emulateTransitionEnd(300):this.dispose()},i.prototype.dispose=function(){this._targetImageWrap&&this._targetImageWrap.parentNode&&(t(this._targetImage).removeClass("zoom-img").attr("data-action","zoom"),this._targetImageWrap.parentNode.replaceChild(this._targetImage,this._targetImageWrap),this._overlay.parentNode.removeChild(this._overlay),this._$body.removeClass("zoom-overlay-transitioning"))},t(function(){(new o).listen()})}(jQuery); \ No newline at end of file +!function(t){"use strict";function o(){this._activeZoom=this._initialScrollPosition=this._initialTouchPosition=this._touchMoveListener=null,this._$document=t(document),this._$window=t(window),this._$body=t(document.body),this._boundClick=t.proxy(this._clickHandler,this)}function i(o){this._fullHeight=this._fullWidth=this._overlay=this._targetImageWrap=null,this._targetImage=o,this._$body=t(document.body)}o.prototype.listen=function(){this._$body.on("click",'[data-action="zoom"]',t.proxy(this._zoom,this))},o.prototype._zoom=function(o){var e=o.target;if(e&&"IMG"==e.tagName&&!this._$body.hasClass("zoom-overlay-open"))return o.metaKey||o.ctrlKey?window.open(o.target.getAttribute("data-original")||o.target.src,"_blank"):void(e.width>=t(window).width()-i.OFFSET||(this._activeZoomClose(!0),this._activeZoom=new i(e),this._activeZoom.zoomImage(),this._$window.on("scroll.zoom",t.proxy(this._scrollHandler,this)),this._$document.on("keyup.zoom",t.proxy(this._keyHandler,this)),this._$document.on("touchstart.zoom",t.proxy(this._touchStart,this)),document.addEventListener?document.addEventListener("click",this._boundClick,!0):document.attachEvent("onclick",this._boundClick,!0),"bubbles"in o?o.bubbles&&o.stopPropagation():o.cancelBubble=!0))},o.prototype._activeZoomClose=function(t){this._activeZoom&&(t?this._activeZoom.dispose():this._activeZoom.close(),this._$window.off(".zoom"),this._$document.off(".zoom"),document.removeEventListener("click",this._boundClick,!0),this._activeZoom=null)},o.prototype._scrollHandler=function(o){null===this._initialScrollPosition&&(this._initialScrollPosition=t(window).scrollTop());var i=this._initialScrollPosition-t(window).scrollTop();Math.abs(i)>=40&&this._activeZoomClose()},o.prototype._keyHandler=function(t){27==t.keyCode&&this._activeZoomClose()},o.prototype._clickHandler=function(t){t.preventDefault?t.preventDefault():event.returnValue=!1,"bubbles"in t?t.bubbles&&t.stopPropagation():t.cancelBubble=!0,this._activeZoomClose()},o.prototype._touchStart=function(o){this._initialTouchPosition=o.touches[0].pageY,t(o.target).on("touchmove.zoom",t.proxy(this._touchMove,this))},o.prototype._touchMove=function(o){Math.abs(o.touches[0].pageY-this._initialTouchPosition)>10&&(this._activeZoomClose(),t(o.target).off("touchmove.zoom"))},i.OFFSET=80,i._MAX_WIDTH=2560,i._MAX_HEIGHT=4096,i.prototype.zoomImage=function(){var o=document.createElement("img");o.onload=t.proxy(function(){this._fullHeight=Number(o.height),this._fullWidth=Number(o.width),this._zoomOriginal()},this),o.src=this._targetImage.src},i.prototype._zoomOriginal=function(){this._targetImageWrap=document.createElement("div"),this._targetImageWrap.className="zoom-img-wrap",this._targetImage.parentNode.insertBefore(this._targetImageWrap,this._targetImage),this._targetImageWrap.appendChild(this._targetImage),t(this._targetImage).addClass("zoom-img").attr("data-action","zoom-out"),this._overlay=document.createElement("div"),this._overlay.className="zoom-overlay",this._targetImageWrap.parentNode.insertBefore(this._overlay,this._targetImageWrap),this._calculateZoom(),this._triggerAnimation()},i.prototype._calculateZoom=function(){this._targetImage.offsetWidth;var o=this._fullWidth,e=this._fullHeight,a=(t(window).scrollTop(),o/this._targetImage.width),s=t(window).height()-i.OFFSET,r=t(window).width()-i.OFFSET,n=o/e,h=r/s;r>o&&s>e?this._imgScaleFactor=a:h>n?this._imgScaleFactor=s/e*a:this._imgScaleFactor=r/o*a},i.prototype._triggerAnimation=function(){this._targetImage.offsetWidth;var o=t(this._targetImage).offset(),i=t(window).scrollTop(),e=i+t(window).height()/2,a=t(window).width()/2,s=o.top+this._targetImage.height/2,r=o.left+this._targetImage.width/2;this._translateY=e-s,this._translateX=a-r;var n="scale("+this._imgScaleFactor+")",h="translate("+this._translateX+"px, "+this._translateY+"px)";t.support.transition&&(h+=" translateZ(0)"),t(this._targetImage).css({"-webkit-transform":n,"-ms-transform":n,transform:n}),t(this._targetImageWrap).css({"-webkit-transform":h,"-ms-transform":h,transform:h}),this._$body.addClass("zoom-overlay-open")},i.prototype.close=function(){return this._$body.removeClass("zoom-overlay-open").addClass("zoom-overlay-transitioning"),t(this._targetImage).css({"-webkit-transform":"","-ms-transform":"",transform:""}),t(this._targetImageWrap).css({"-webkit-transform":"","-ms-transform":"",transform:""}),t.support.transition?void t(this._targetImage).one(t.support.transition.end,t.proxy(this.dispose,this)).emulateTransitionEnd(300):this.dispose()},i.prototype.dispose=function(){this._targetImageWrap&&this._targetImageWrap.parentNode&&(t(this._targetImage).removeClass("zoom-img").attr("data-action","zoom"),this._targetImageWrap.parentNode.replaceChild(this._targetImage,this._targetImageWrap),this._overlay.parentNode.removeChild(this._overlay),this._$body.removeClass("zoom-overlay-transitioning"))},t(function(){(new o).listen()})}(jQuery); \ No newline at end of file From 36c34a4bfbc94602b2ff6b7a3d01fac4be19be5c Mon Sep 17 00:00:00 2001 From: geekplux Date: Tue, 24 May 2016 12:36:15 +0800 Subject: [PATCH 4/4] delete extra file --- js/.tern-port | 1 - 1 file changed, 1 deletion(-) delete mode 100644 js/.tern-port diff --git a/js/.tern-port b/js/.tern-port deleted file mode 100644 index 0f45694..0000000 --- a/js/.tern-port +++ /dev/null @@ -1 +0,0 @@ -58427 \ No newline at end of file