From 14b2c89a081acd7a211a6017a018a85210fe1b1c Mon Sep 17 00:00:00 2001 From: kingdido999 Date: Thu, 1 Dec 2016 19:59:24 -0800 Subject: [PATCH] bump --- bower.json | 2 +- dist/zooming.js | 74 ++++++++++++++++++++++++--------------------- dist/zooming.min.js | 4 +-- package.json | 2 +- 4 files changed, 43 insertions(+), 39 deletions(-) diff --git a/bower.json b/bower.json index 80105560..b1722ef9 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "zooming", - "version": "0.3.3", + "version": "0.3.4", "homepage": "https://github.com/kingdido999/zooming", "authors": [ "Desmond Ding " diff --git a/dist/zooming.js b/dist/zooming.js index bd650fe4..38289996 100644 --- a/dist/zooming.js +++ b/dist/zooming.js @@ -1,6 +1,6 @@ /** * zooming - Image zoom with pure JavaScript. - * @version v0.3.3 + * @version v0.3.4 * @link https://github.com/kingdido999/zooming * @license MIT */ @@ -266,39 +266,43 @@ } function calculateTransform (rect) { - var windowCenter = { - x: window.innerWidth / 2, - y: window.innerHeight / 2 - } - - var imgHalfWidth = rect.width / 2 - var imgHalfHeight = rect.height / 2 - - var imgCenter = { - x: rect.left + imgHalfWidth, - y: rect.top + imgHalfHeight - } - - // The vector to translate image to the window center - var translate = { - x: windowCenter.x - imgCenter.x, - y: windowCenter.y - imgCenter.y - } - - // The distance between image edge and window edge - var distFromImageEdgeToWindowEdge = { - x: windowCenter.x - imgHalfWidth, - y: windowCenter.y - imgHalfHeight - } - - // The additional scale is based on the smaller value of - // scaling horizontally and scaling vertically - var scaleHorizontally = distFromImageEdgeToWindowEdge.x / imgHalfWidth - var scaleVertically = distFromImageEdgeToWindowEdge.y / imgHalfHeight - var scale = options.scaleBase + Math.min(scaleHorizontally, scaleVertically) - - // Translate the image to window center, then scale the image - return 'translate(' + translate.x + 'px,' + translate.y + 'px) ' + 'scale(' + scale + ',' + scale + ')' + var imgHalfWidth = rect.width / 2, + imgHalfHeight = rect.height / 2, + + windowCenter = { + x: window.innerWidth / 2, + y: window.innerHeight / 2 + }, + + imgCenter = { + x: rect.left + imgHalfWidth, + y: rect.top + imgHalfHeight + }, + + // The vector to translate image to the window center + translate = { + x: windowCenter.x - imgCenter.x, + y: windowCenter.y - imgCenter.y + }, + + // The distance between image edge and window edge + distFromImageEdgeToWindowEdge = { + x: windowCenter.x - imgHalfWidth, + y: windowCenter.y - imgHalfHeight + }, + + scaleHorizontally = distFromImageEdgeToWindowEdge.x / imgHalfWidth, + scaleVertically = distFromImageEdgeToWindowEdge.y / imgHalfHeight, + + // The additional scale is based on the smaller value of + // scaling horizontally and scaling vertically + scale = options.scaleBase + Math.min(scaleHorizontally, scaleVertically), + + transform = + 'translate(' + translate.x + 'px,' + translate.y + 'px) ' + + 'scale(' + scale + ',' + scale + ')' + + return transform } function scrollHandler () { @@ -316,7 +320,7 @@ } function keydownHandler (e) { - if (event.keyCode === 27) api.close() // Esc + if (e.keyCode === 27) api.close() // Esc } // umd expose diff --git a/dist/zooming.min.js b/dist/zooming.min.js index afef5759..553507ef 100644 --- a/dist/zooming.min.js +++ b/dist/zooming.min.js @@ -1,8 +1,8 @@ /** * zooming - Image zoom with pure JavaScript. - * @version v0.3.3 + * @version v0.3.4 * @link https://github.com/kingdido999/zooming * @license MIT */ -+function(){function t(t,n,o){e(n);var i=t.style,r={};for(var s in n)o&&(r[s]=i[s]||""),i[s]=n[s];return r}function n(){var t={},n=["webkitTransition","transition","mozTransition"],e=["webkitTransform","transform","mozTransform"],o={transition:"transitionend",mozTransition:"transitionend",webkitTransition:"webkitTransitionEnd"};return n.some(function(n){if(void 0!==f.style[n])return t.transition=n,t.transEnd=o[n],!0}),e.some(function(n){if(void 0!==f.style[n])return t.transform=n,!0}),t}function e(t){var n;t.transition&&(n=t.transition,delete t.transition,t[h]=n),t.transform&&(n=t.transform,delete t.transform,t[b]=n)}function o(t){var n={x:window.innerWidth/2,y:window.innerHeight/2},e=t.width/2,o=t.height/2,i={x:t.left+e,y:t.top+o},r={x:n.x-i.x,y:n.y-i.y},s={x:n.x-e,y:n.y-o},a=s.x/e,c=s.y/o,l=g.scaleBase+Math.min(a,c);return"translate("+r.x+"px,"+r.y+"px) scale("+l+","+l+")"}function i(){var t=window.pageYOffset||(document.documentElement||d.parentNode||d).scrollTop;null===y&&(y=t);var n=y-t;Math.abs(n)>=g.scrollThreshold&&(y=null,E.close())}function r(t){27===event.keyCode&&E.close()}var s,a,c,l,u="WebkitAppearance"in document.documentElement.style?"-webkit-":"",d=document.body,f=document.createElement("div"),m=!1,p=!1,y=null,g={transitionDuration:".4s",transitionTimingFunction:"cubic-bezier(.4,0,0,1)",bgColor:"#fff",bgOpacity:1,scaleBase:1,scrollThreshold:40,onOpen:null,onClose:null,onBeforeClose:null,onBeforeOpen:null},v=n(),h=v.transition,b=v.transform,w=b.replace(/(.*)Transform/,"-$1-transform"),x=v.transEnd,E={config:function(n){if(!n)return g;for(var e in n)g[e]=n[e];return t(f,{backgroundColor:g.bgColor,transition:"opacity "+g.transitionDuration+" "+g.transitionTimingFunction}),this},open:function(n,e){if(!m&&!p&&(s="string"==typeof n?document.querySelector(n):n,"IMG"===s.tagName)){g.onBeforeOpen&&g.onBeforeOpen(s),m=!0,p=!0,a=s.parentNode;var d=new Image;return d.onload=function(){var n=s.getBoundingClientRect();s.hasAttribute("data-original")&&(l=s.getAttribute("src"),t(s,{width:n.width+"px",height:n.height+"px"}),s.setAttribute("src",s.getAttribute("data-original"))),s.offsetWidth,c=t(s,{position:"relative",zIndex:999,cursor:u+"zoom-out",transition:w+" "+g.transitionDuration+" "+g.transitionTimingFunction,transform:o(n)},!0)},d.src=s.getAttribute("src"),a.appendChild(f),window.setTimeout(function(){f.style.opacity=g.bgOpacity},30),document.addEventListener("scroll",i),document.addEventListener("keydown",r),s.addEventListener(x,function t(){s.removeEventListener(x,t),p=!1,e=e||g.onOpen,e&&e(s)}),this}},close:function(n){if(m&&!p)return p=!0,g.onBeforeClose&&g.onBeforeClose(s),f.style.opacity=0,s.style.transform="",document.removeEventListener("scroll",i),document.removeEventListener("keydown",r),s.addEventListener(x,function e(){s.removeEventListener(x,e),t(s,c),a.removeChild(f),m=!1,p=!1,s.hasAttribute("data-original")&&s.setAttribute("src",l),n="function"==typeof n?n:g.onClose,n&&n(s)}),this},listen:function(t){if("string"==typeof t){for(var n=document.querySelectorAll(t),e=n.length;e--;)this.listen(n[e]);return this}return t.style.cursor=u+"zoom-in",t.addEventListener("click",function(n){n.stopPropagation(),m?E.close():E.open(t)}),this}};t(f,{zIndex:998,background:g.bgColor,position:"fixed",top:0,left:0,right:0,bottom:0,opacity:0,transition:"opacity "+g.transitionDuration+" "+g.transitionTimingFunction}),f.addEventListener("click",E.close),document.addEventListener("DOMContentLoaded",E.listen('img[data-action="zoom"]')),"object"==typeof exports?module.exports=E:"function"==typeof define&&define.amd?define(function(){return E}):this.Zooming=E}(); \ No newline at end of file ++function(){function t(t,n,o){e(n);var i=t.style,r={};for(var s in n)o&&(r[s]=i[s]||""),i[s]=n[s];return r}function n(){var t={},n=["webkitTransition","transition","mozTransition"],e=["webkitTransform","transform","mozTransform"],o={transition:"transitionend",mozTransition:"transitionend",webkitTransition:"webkitTransitionEnd"};return n.some(function(n){if(void 0!==f.style[n])return t.transition=n,t.transEnd=o[n],!0}),e.some(function(n){if(void 0!==f.style[n])return t.transform=n,!0}),t}function e(t){var n;t.transition&&(n=t.transition,delete t.transition,t[h]=n),t.transform&&(n=t.transform,delete t.transform,t[b]=n)}function o(t){var n=t.width/2,e=t.height/2,o={x:window.innerWidth/2,y:window.innerHeight/2},i={x:t.left+n,y:t.top+e},r={x:o.x-i.x,y:o.y-i.y},s={x:o.x-n,y:o.y-e},a=s.x/n,c=s.y/e,l=g.scaleBase+Math.min(a,c),u="translate("+r.x+"px,"+r.y+"px) scale("+l+","+l+")";return u}function i(){var t=window.pageYOffset||(document.documentElement||d.parentNode||d).scrollTop;null===y&&(y=t);var n=y-t;Math.abs(n)>=g.scrollThreshold&&(y=null,E.close())}function r(t){27===t.keyCode&&E.close()}var s,a,c,l,u="WebkitAppearance"in document.documentElement.style?"-webkit-":"",d=document.body,f=document.createElement("div"),m=!1,p=!1,y=null,g={transitionDuration:".4s",transitionTimingFunction:"cubic-bezier(.4,0,0,1)",bgColor:"#fff",bgOpacity:1,scaleBase:1,scrollThreshold:40,onOpen:null,onClose:null,onBeforeClose:null,onBeforeOpen:null},v=n(),h=v.transition,b=v.transform,w=b.replace(/(.*)Transform/,"-$1-transform"),x=v.transEnd,E={config:function(n){if(!n)return g;for(var e in n)g[e]=n[e];return t(f,{backgroundColor:g.bgColor,transition:"opacity "+g.transitionDuration+" "+g.transitionTimingFunction}),this},open:function(n,e){if(!m&&!p&&(s="string"==typeof n?document.querySelector(n):n,"IMG"===s.tagName)){g.onBeforeOpen&&g.onBeforeOpen(s),m=!0,p=!0,a=s.parentNode;var d=new Image;return d.onload=function(){var n=s.getBoundingClientRect();s.hasAttribute("data-original")&&(l=s.getAttribute("src"),t(s,{width:n.width+"px",height:n.height+"px"}),s.setAttribute("src",s.getAttribute("data-original"))),s.offsetWidth,c=t(s,{position:"relative",zIndex:999,cursor:u+"zoom-out",transition:w+" "+g.transitionDuration+" "+g.transitionTimingFunction,transform:o(n)},!0)},d.src=s.getAttribute("src"),a.appendChild(f),window.setTimeout(function(){f.style.opacity=g.bgOpacity},30),document.addEventListener("scroll",i),document.addEventListener("keydown",r),s.addEventListener(x,function t(){s.removeEventListener(x,t),p=!1,e=e||g.onOpen,e&&e(s)}),this}},close:function(n){if(m&&!p)return p=!0,g.onBeforeClose&&g.onBeforeClose(s),f.style.opacity=0,s.style.transform="",document.removeEventListener("scroll",i),document.removeEventListener("keydown",r),s.addEventListener(x,function e(){s.removeEventListener(x,e),t(s,c),a.removeChild(f),m=!1,p=!1,s.hasAttribute("data-original")&&s.setAttribute("src",l),n="function"==typeof n?n:g.onClose,n&&n(s)}),this},listen:function(t){if("string"==typeof t){for(var n=document.querySelectorAll(t),e=n.length;e--;)this.listen(n[e]);return this}return t.style.cursor=u+"zoom-in",t.addEventListener("click",function(n){n.stopPropagation(),m?E.close():E.open(t)}),this}};t(f,{zIndex:998,background:g.bgColor,position:"fixed",top:0,left:0,right:0,bottom:0,opacity:0,transition:"opacity "+g.transitionDuration+" "+g.transitionTimingFunction}),f.addEventListener("click",E.close),document.addEventListener("DOMContentLoaded",E.listen('img[data-action="zoom"]')),"object"==typeof exports?module.exports=E:"function"==typeof define&&define.amd?define(function(){return E}):this.Zooming=E}(); \ No newline at end of file diff --git a/package.json b/package.json index f4a6444f..53c0ce6c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "zooming", - "version": "0.3.3", + "version": "0.3.4", "description": "Image zoom with pure JavaScript.", "main": "src/zooming.js", "repository": {