zoom.ts - npm Package Compare versions

Comparing version 7.1.0 to 7.2.0

dist/zoom.js

 /*!
- * zoom.ts v7.1.0
+ * zoom.ts v7.2.0
  * https://www.michael-bull.com/projects/zoom.ts
@@ -8,2 +8,2 @@ *
  */
-!function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="dist/",e(e.s=12)}([function(t,e,n){"use strict";function i(t){"loading"===document.readyState?document.addEventListener("DOMContentLoaded",function(){return t()}):t()}function o(){return(document.documentElement||document.body).clientWidth}function r(){return(document.documentElement||document.body).clientHeight}function s(){return void 0===window.pageYOffset?(document.documentElement||document.body).scrollTop:window.pageYOffset}Object.defineProperty(e,"__esModule",{value:!0}),e.ready=i,e.viewportWidth=o,e.viewportHeight=r,e.scrollY=s},function(t,e){var n,i,o=["webkitTransform","MozTransform","msTransform","OTransform","transform"],r=document.createElement("p");for(i=0;i<o.length;i++)if(n=o[i],null!=r.style[n]){t.exports=n;break}},function(t,e,n){"use strict";function i(t){A=t.cloneNode(!0),R=k.createDiv("zoom__container"),R.appendChild(A),U.replaceChild(R,t)}function o(t,e){N=!0,A=e,R=t,D=R.children.item(1)}function r(){a(),h(),y(),w(),l()}function s(){N=!1,u(),_(),g(),p(),c()}function a(){U.style.height=A.height+"px"}function c(){U.style.height=""}function l(){P=T.scrollY(),M.add(window,"resize",W),M.add(window,"scroll",Y),M.add(document,"keyup",I),M.add(R,"click",G)}function u(){M.remove(window,"resize",W),M.remove(window,"scroll",Y),M.remove(document,"keyup",I),M.remove(R,"click",G)}function d(t){D=k.createClone(t),M.add(D,"load",K),R.appendChild(D)}function f(){A.classList.add("zoom__element--hidden"),D.classList.add("zoom__clone--visible")}function p(){A.classList.remove("zoom__element--hidden"),D.classList.remove("zoom__clone--visible")}function m(){R.style.transition="initial",v(),k.repaint(R),R.style.transition=""}function v(){var t,e,n,i,o=k.fillViewportScale(U,H),r=H.width*o,s=H.height*o,a=(T.viewportWidth()-r)/2,c=(T.viewportHeight()-s)/2,l=R.style;"expanding"===B||"collapsing"===B?(t=H.left+(H.width-r)/2,e=H.top+(H.height-s)/2,n=(a-t)/o,i=(c-e)/o,l[C]="scale("+o+") "+k.translate(n,i)):(l[C]="",l.left=a-H.left+"px",l.top=c-H.top+"px",l.width=r+"px",l.maxWidth=r+"px",l.height=s+"px")}function h(){document.body.appendChild(S)}function b(){document.body.removeChild(S)}function y(){k.repaint(S),S.classList.add("zoom__overlay--visible")}function g(){S.classList.remove("zoom__overlay--visible"),k.removeTransitionEndListener(R,F)}function w(){B="expanding",H=k.dimensions(A),x(),k.addTransitionEndListener(R,F),v()}function _(){B="collapsing",k.addTransitionEndListener(R,J),m();var t=R.style;t[C]="",t.left="",t.top="",t.width="",t.maxWidth="",t.height=""}function x(){U.classList.add("zoom--active"),A.classList.add("zoom__element--active")}function z(){U.classList.remove("zoom--active"),A.classList.remove("zoom__element--active")}function L(){M.add(document.body,"click",V)}function E(){M.remove(document.body,"click",V)}var k,T,C,M,O,j,S,U,R,A,D,B,N,P,H,W,Y,I,V,G,K,F,J;Object.defineProperty(e,"__esModule",{value:!0}),k=n(5),T=n(0),C=n(1),M=n(8),O=27,j=50,S=k.createDiv("zoom__overlay"),B="collapsed",N=!1,W=function(){v()},Y=function(){Math.abs(P-T.scrollY())>j&&s()},I=function(t){t.keyCode===O&&s()},V=function(t){var e,n,s,a,c,l=t.target;if(l instanceof HTMLImageElement&&l.classList.contains("zoom__element")){if(e=l.parentElement,null===e)return;if(n=e.parentElement,null===n)return;if(t.preventDefault(),s=e.classList.contains("zoom__container"),a=s?n:e,a.classList.contains("zoom--active"))return;if(c=k.srcAttribute(a,l),void 0===C||t.metaKey||t.ctrlKey)return void window.open(c,"_blank");U=a,s?o(e,l):(i(l),d(c)),r()}},G=function(){s()},K=function(){M.remove(D,"load",K),N=!0,"expanded"===B&&f()},F=function(){B="expanded",k.removeTransitionEndListener(R,F),m(),N&&f()},J=function(){k.removeTransitionEndListener(R,J),b(),z()},e.start=L,e.stop=E},function(t,e,n){var i,o=n(6);"string"==typeof o&&(o=[[t.i,o,""]]),i=n(11)(o,{}),o.locals&&(t.exports=o.locals)},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e,n,i){this.left=t,this.top=e,this.width=n,this.height=i}return t}();e.Dimension=i},function(t,e,n){"use strict";function i(t){t.offsetHeight}function o(t,e){var i=n(10);return i?"translate3d("+t+"px, "+e+"px, 0)":"translate("+t+"px, "+e+"px)"}function r(t){var e=t.getBoundingClientRect();return new f.Dimension(e.left,e.top,t.clientWidth,t.clientHeight)}function s(t,e){var i,o,r,s=n(9);if(s)for(i=0,o=m;i<o.length;i++)r=o[i],t.addEventListener(r,e);else e(new Event(m[0]))}function a(t,e){var n,i,o;for(n=0,i=m;n<i.length;n++)o=i[n],t.removeEventListener(o,e)}function c(t){var e=document.createElement("div");return e.className=t,e}function l(t){var e=document.createElement("img");return e.className="zoom__clone",e.src=t,e}function u(t,e){var n=t.getAttribute("data-src");return null!==n?n:e.src}function d(t,e){var n=+(t.getAttribute("data-width")||1/0),i=+(t.getAttribute("data-height")||1/0),o=Math.min(p.viewportWidth(),n)/e.width,r=Math.min(p.viewportHeight(),i)/e.height;return Math.min(o,r)}var f,p,m;Object.defineProperty(e,"__esModule",{value:!0}),f=n(4),p=n(0),m=["transitionend","webkitTransitionEnd","oTransitionEnd","MSTransitionEnd"],e.repaint=i,e.translate=o,e.dimensions=r,e.addTransitionEndListener=s,e.removeTransitionEndListener=a,e.createDiv=c,e.createClone=l,e.srcAttribute=u,e.fillViewportScale=d},function(t,e,n){e=t.exports=n(7)(),e.push([t.i,'.zoom{display:block;position:relative;width:100%;line-height:0;text-align:center}.zoom--active{z-index:2}.zoom__container{position:relative;-webkit-transition:-webkit-transform .3s cubic-bezier(.2,0,.2,1);transition:-webkit-transform .3s cubic-bezier(.2,0,.2,1);transition:transform .3s cubic-bezier(.2,0,.2,1);transition:transform .3s cubic-bezier(.2,0,.2,1),-webkit-transform .3s cubic-bezier(.2,0,.2,1);will-change:transform}.zoom__element{visibility:visible;opacity:1;-webkit-transition:visibility 0s linear 0s,opacity .4s 0s;transition:visibility 0s linear 0s,opacity .4s 0s;will-change:visibility,opacity;max-width:100%;cursor:pointer;cursor:-moz-zoom-in;cursor:-webkit-zoom-in}.zoom__element--active{width:100%}.zoom__clone,.zoom__element--hidden{visibility:hidden;opacity:0;-webkit-transition:visibility 0s linear .5s,opacity .1s .4s;transition:visibility 0s linear .5s,opacity .1s .4s}.zoom__clone{will-change:visibility,opacity;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;cursor:pointer;cursor:-moz-zoom-out;cursor:-webkit-zoom-out}.zoom__clone--visible{visibility:visible;opacity:1;-webkit-transition:visibility 0s linear 0s,opacity .4s 0s;transition:visibility 0s linear 0s,opacity .4s 0s}.zoom__overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;background:#fff;opacity:0;filter:"alpha(opacity=0)";-webkit-transition:opacity .3s;transition:opacity .3s;will-change:opacity,filter}.zoom__overlay--visible{opacity:1;filter:"alpha(opacity=100)"}',""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){var t,e,n=[];for(t=0;t<this.length;t++)e=this[t],e[2]?n.push("@media "+e[2]+"{"+e[1]+"}"):n.push(e[1]);return n.join("")},t.i=function(e,n){var i,o,r,s;for("string"==typeof e&&(e=[[null,e,""]]),i={},o=0;o<this.length;o++)r=this[o][0],"number"==typeof r&&(i[r]=!0);for(o=0;o<e.length;o++)s=e[o],"number"==typeof s[0]&&i[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),t.push(s))},t}},function(t,e,n){var i,o;!function(r,s){i=s,o="function"==typeof i?i.call(e,n,e,t):i,!(void 0!==o&&(t.exports=o))}(this,function(){function t(t,e){return function(n,i,o,r){n[t]?n[t](i,o,r):n[e]&&n[e]("on"+i,o)}}return{add:t("addEventListener","attachEvent"),remove:t("removeEventListener","detachEvent")}})},function(t,e){function n(t){if(!i)return!1;if(!t)return null!=i;var e=getComputedStyle(t)[i];return""!==e&&0!==parseFloat(e)}for(var i,o,r=["transitionDuration","MozTransitionDuration","webkitTransitionDuration"];r.length;)o=r.shift(),o in document.body.style&&(i=o);t.exports=n},function(t,e,n){var i,o,r,s=n(1);s&&window.getComputedStyle?(i={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"},o=document.createElement("div"),o.style[s]="translate3d(1px,1px,1px)",document.body.insertBefore(o,null),r=getComputedStyle(o).getPropertyValue(i[s]),document.body.removeChild(o),t.exports=null!=r&&r.length&&"none"!=r):t.exports=!1},function(t,e){function n(t,e){var n,i,o,r,s;for(n=0;n<t.length;n++)if(i=t[n],o=p[i.id]){for(o.refs++,r=0;r<o.parts.length;r++)o.parts[r](i.parts[r]);for(;r<i.parts.length;r++)o.parts.push(c(i.parts[r],e))}else{for(s=[],r=0;r<i.parts.length;r++)s.push(c(i.parts[r],e));p[i.id]={id:i.id,refs:1,parts:s}}}function i(t){var e,n,i,o,r,s,a,c=[],l={};for(e=0;e<t.length;e++)n=t[e],i=n[0],o=n[1],r=n[2],s=n[3],a={css:o,media:r,sourceMap:s},l[i]?l[i].parts.push(a):c.push(l[i]={id:i,parts:[a]});return c}function o(t,e){var n=h(),i=g[g.length-1];if("top"===t.insertAt)i?i.nextSibling?n.insertBefore(e,i.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),g.push(e);else{if("bottom"!==t.insertAt)throw Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(e)}}function r(t){t.parentNode.removeChild(t);var e=g.indexOf(t);e>=0&&g.splice(e,1)}function s(t){var e=document.createElement("style");return e.type="text/css",o(t,e),e}function a(t){var e=document.createElement("link");return e.rel="stylesheet",o(t,e),e}function c(t,e){var n,i,o,c;return e.singleton?(c=y++,n=b||(b=s(e)),i=l.bind(null,n,c,!1),o=l.bind(null,n,c,!0)):t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=a(e),i=d.bind(null,n),o=function(){r(n),n.href&&URL.revokeObjectURL(n.href)}):(n=s(e),i=u.bind(null,n),o=function(){r(n)}),i(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;i(t=e)}else o()}}function l(t,e,n,i){var o,r,s=n?"":i.css;t.styleSheet?t.styleSheet.cssText=f(e,s):(o=document.createTextNode(s),r=t.childNodes,r[e]&&t.removeChild(r[e]),r.length?t.insertBefore(o,r[e]):t.appendChild(o))}function u(t,e){var n=e.css,i=e.media;if(i&&t.setAttribute("media",i),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}function d(t,e){var n,i,o=e.css,r=e.sourceMap;r&&(o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),n=new Blob([o],{type:"text/css"}),i=t.href,t.href=URL.createObjectURL(n),i&&URL.revokeObjectURL(i)}var f,p={},m=function(t){var e;return function(){return void 0===e&&(e=t.apply(this,arguments)),e}},v=m(function(){return/msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase())}),h=m(function(){return document.head||document.getElementsByTagName("head")[0]}),b=null,y=0,g=[];t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw Error("The style-loader cannot be used in a non-browser environment");e=e||{},void 0===e.singleton&&(e.singleton=v()),void 0===e.insertAt&&(e.insertAt="bottom");var o=i(t);return n(o,e),function(t){var r,s,a,c,l,u=[];for(r=0;r<o.length;r++)s=o[r],a=p[s.id],a.refs--,u.push(a);for(t&&(c=i(t),n(c,e)),r=0;r<u.length;r++)if(a=u[r],0===a.refs){for(l=0;l<a.parts.length;l++)a.parts[l]();delete p[a.id]}}},f=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e,n){"use strict";var i,o;Object.defineProperty(e,"__esModule",{value:!0}),n(3),i=n(0),o=n(2),i.ready(function(){return o.start()})}]);
+!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="dist/",t(t.s=12)}([function(e,t,n){"use strict";function i(e){if("loading"!==document.readyState)return e();document.addEventListener("DOMContentLoaded",function(){return e()})}function o(){return(document.documentElement||document.body).clientWidth}function r(){return(document.documentElement||document.body).clientHeight}function s(){return void 0===window.pageYOffset?(document.documentElement||document.body).scrollTop:window.pageYOffset}function a(e){var t=document.createElement("div");return t.className=e,t}function c(e){var t=document.createElement("img");return t.className="zoom__clone",t.src=e,t}Object.defineProperty(t,"__esModule",{value:!0}),t.ready=i,t.viewportWidth=o,t.viewportHeight=r,t.scrollY=s,t.createDiv=a,t.createClone=c},function(e,t,n){"use strict";function i(e,t){return function(n,i,o,r){void 0!==n[e]?n[e](i,o,r):void 0!==n[t]?n[t]("on"+i,o,r):o(new Event(i))}}Object.defineProperty(t,"__esModule",{value:!0}),t.listeners={add:i("addEventListener","attachEvent"),remove:i("removeEventListener","detachEvent")}},function(e,t,n){"use strict";function i(){var e=r.vendorProperties("transform"),t=document.createElement("p"),n=t.style;return e.find(function(e){return void 0!==n[e]})}function o(e,n){e.style.setProperty(t.transformProperty,n)}Object.defineProperty(t,"__esModule",{value:!0});var r=n(3);t.transformProperty=i(),t.transform=o},function(e,t,n){"use strict";function i(e){var n=[e],i=""+e.charAt(0).toUpperCase()+e.substr(1);return t.vendorPrefixes.forEach(function(e){n.push(""+e+i)}),n}Object.defineProperty(t,"__esModule",{value:!0}),t.vendorPrefixes=["Webkit","Moz","ms","O"],t.vendorProperties=i},function(e,t,n){"use strict";function i(e){N=e.cloneNode(!0),B=P.createDiv("zoom__container"),B.appendChild(N),S.replaceChild(B,e)}function o(e,t){H=!0,N=t,B=e,D=B.children.item(1)}function r(){a(),y(),g(),w(),l()}function s(){H=!1,u(),x(),_(),p(),c()}function a(){S.style.height=N.height+"px"}function c(){S.style.height=""}function l(){Y=P.scrollY(),M.listeners.add(window,"resize",I),M.listeners.add(window,"scroll",G),M.listeners.add(document,"keyup",K),M.listeners.add(B,"click",J)}function u(){M.listeners.remove(window,"resize",I),M.listeners.remove(window,"scroll",G),M.listeners.remove(document,"keyup",K),M.listeners.remove(B,"click",J)}function d(e){D=P.createClone(e),M.listeners.add(D,"load",V),B.appendChild(D)}function f(){N.classList.add("zoom__element--hidden"),D.classList.add("zoom__clone--visible")}function p(){N.classList.remove("zoom__element--hidden"),D.classList.remove("zoom__clone--visible")}function m(){B.style.transition="initial",v(),C.repaint(B),B.style.transition=""}function v(){var e,t,n,i,o=S.getBoundingClientRect(),r=+(S.getAttribute("data-width")||1/0),s=+(S.getAttribute("data-height")||1/0),a=Math.min(P.viewportWidth(),r)/o.width,c=Math.min(P.viewportHeight(),s)/o.height,l=Math.min(a,c),u=o.width*l,d=o.height*l,f=(P.viewportWidth()-u)/2,p=(P.viewportHeight()-d)/2,m=B.style;"expanding"===W||"collapsing"===W?(e=o.left+(o.width-u)/2,t=o.top+(o.height-d)/2,n=(f-e)/l,i=(p-t)/l,j.transform(B,"scale("+l+") "+T.translate(n,i))):(j.transform(B,""),m.left=f-o.left+"px",m.top=p-o.top+"px",m.width=u+"px",m.maxWidth=u+"px",m.height=d+"px")}function h(){var e=B.style;j.transform(B,""),e.left="",e.top="",e.width="",e.maxWidth="",e.height=""}function y(){document.body.appendChild(A)}function b(){document.body.removeChild(A)}function g(){C.repaint(A),A.classList.add("zoom__overlay--visible")}function _(){A.classList.remove("zoom__overlay--visible"),O.removeTransitionEndListener(B,q)}function w(){W="expanding",z(),O.addTransitionEndListener(B,q),v()}function x(){W="collapsing",O.addTransitionEndListener(B,Q),m(),h()}function z(){S.classList.add("zoom--active"),N.classList.add("zoom__element--active")}function L(){S.classList.remove("zoom--active"),N.classList.remove("zoom__element--active")}function E(){M.listeners.add(document.body,"click",F)}function k(){M.listeners.remove(document.body,"click",F)}var C,P,M,O,j,T,U,R,A,S,B,N,D,W,H,Y,I,G,K,F,J,V,q,Q;Object.defineProperty(t,"__esModule",{value:!0}),C=n(6),P=n(0),M=n(1),O=n(7),j=n(2),T=n(8),U=27,R=50,A=P.createDiv("zoom__overlay"),W="collapsed",H=!1,I=function(){v()},G=function(){Math.abs(Y-P.scrollY())>R&&s()},K=function(e){e.keyCode===U&&s()},F=function(e){var t,n,s,a,c,l=e.target;if(l instanceof HTMLImageElement&&l.classList.contains("zoom__element")){if(t=l.parentElement,null===t)return;if(n=t.parentElement,null===n)return;if(e.preventDefault(),s=t.classList.contains("zoom__container"),a=s?n:t,a.classList.contains("zoom--active"))return;if(c=C.srcAttribute(a,l),void 0===j.transformProperty||e.metaKey||e.ctrlKey)return void window.open(c,"_blank");S=a,s?o(t,l):(i(l),d(c)),r()}},J=function(){s()},V=function(){M.listeners.remove(D,"load",V),H=!0,"expanded"===W&&f()},q=function(){W="expanded",O.removeTransitionEndListener(B,q),m(),H&&f()},Q=function(){O.removeTransitionEndListener(B,Q),b(),L()},t.start=E,t.stop=k},function(e,t,n){var i=n(9);"string"==typeof i&&(i=[[e.i,i,""]]),n(11)(i,{}),i.locals&&(e.exports=i.locals)},function(e,t,n){"use strict";function i(e){e.offsetHeight}function o(e,t){var n=e.getAttribute("data-src");return null!==n?n:t.src}Object.defineProperty(t,"__esModule",{value:!0}),t.repaint=i,t.srcAttribute=o},function(e,t,n){"use strict";function i(e){var t,n,i=a.vendorProperties("transitionDuration").find(function(e){return e in document.body.style});return void 0===e?void 0!==i:(t=getComputedStyle(e),n=t[i],n.length>0&&0!==parseFloat(n))}function o(e,t){var n,o,r;if(i(e))for(n=0,o=c;n<o.length;n++)r=o[n],s.listeners.add(e,r,t);else t(new Event(c[0]))}function r(e,t){var n,i,o;for(n=0,i=c;n<i.length;n++)o=i[n],s.listeners.remove(e,o,t)}var s,a,c;Object.defineProperty(t,"__esModule",{value:!0}),s=n(1),a=n(3),c=["transitionend"].concat(a.vendorPrefixes.map(function(e){return e+"TransitionEnd"})),t.addTransitionEndListener=o,t.removeTransitionEndListener=r},function(e,t,n){"use strict";function i(e,t){return s?"translate3d("+e+"px, "+t+"px, 0)":"translate("+e+"px, "+t+"px)"}var o,r,s;Object.defineProperty(t,"__esModule",{value:!0}),o=n(2),r=n(0),s=r.ready(function(){var e,t,n;return void 0!==o.transformProperty&&void 0!==window.getComputedStyle&&(e={WebkitTransform:"-webkit-transform",MozTransform:"-moz-transform",msTransform:"-ms-transform",OTransform:"-o-transform",transform:"transform"},t=document.createElement("div"),t.style.setProperty(o.transformProperty,"translate3d(1px,1px,1px)"),document.body.insertBefore(t,null),n=getComputedStyle(t).getPropertyValue(e[o.transformProperty]),document.body.removeChild(t),n.length>0&&"none"!==n)}),t.translate=i},function(e,t,n){t=e.exports=n(10)(),t.push([e.i,'.zoom{display:block;position:relative;width:100%;line-height:0;text-align:center}.zoom--active{z-index:2}.zoom__container{position:relative;-webkit-transition:-webkit-transform .3s cubic-bezier(.2,0,.2,1);transition:-webkit-transform .3s cubic-bezier(.2,0,.2,1);transition:transform .3s cubic-bezier(.2,0,.2,1);transition:transform .3s cubic-bezier(.2,0,.2,1),-webkit-transform .3s cubic-bezier(.2,0,.2,1);will-change:transform}.zoom__element{visibility:visible;opacity:1;-webkit-transition:visibility 0s linear 0s,opacity .4s 0s;transition:visibility 0s linear 0s,opacity .4s 0s;will-change:visibility,opacity;max-width:100%;cursor:pointer;cursor:-moz-zoom-in;cursor:-webkit-zoom-in}.zoom__element--active{width:100%}.zoom__clone,.zoom__element--hidden{visibility:hidden;opacity:0;-webkit-transition:visibility 0s linear .5s,opacity .1s .4s;transition:visibility 0s linear .5s,opacity .1s .4s}.zoom__clone{will-change:visibility,opacity;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;cursor:pointer;cursor:-moz-zoom-out;cursor:-webkit-zoom-out}.zoom__clone--visible{visibility:visible;opacity:1;-webkit-transition:visibility 0s linear 0s,opacity .4s 0s;transition:visibility 0s linear 0s,opacity .4s 0s}.zoom__overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;background:#fff;opacity:0;filter:"alpha(opacity=0)";-webkit-transition:opacity .3s;transition:opacity .3s;will-change:opacity,filter}.zoom__overlay--visible{opacity:1;filter:"alpha(opacity=100)"}',""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){var e,t,n=[];for(e=0;e<this.length;e++)t=this[e],t[2]?n.push("@media "+t[2]+"{"+t[1]+"}"):n.push(t[1]);return n.join("")},e.i=function(t,n){var i,o,r,s;for("string"==typeof t&&(t=[[null,t,""]]),i={},o=0;o<this.length;o++)r=this[o][0],"number"==typeof r&&(i[r]=!0);for(o=0;o<t.length;o++)s=t[o],"number"==typeof s[0]&&i[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),e.push(s))},e}},function(e,t){function n(e,t){var n,i,o,r,s;for(n=0;n<e.length;n++)if(i=e[n],o=p[i.id]){for(o.refs++,r=0;r<o.parts.length;r++)o.parts[r](i.parts[r]);for(;r<i.parts.length;r++)o.parts.push(c(i.parts[r],t))}else{for(s=[],r=0;r<i.parts.length;r++)s.push(c(i.parts[r],t));p[i.id]={id:i.id,refs:1,parts:s}}}function i(e){var t,n,i,o,r,s,a,c=[],l={};for(t=0;t<e.length;t++)n=e[t],i=n[0],o=n[1],r=n[2],s=n[3],a={css:o,media:r,sourceMap:s},l[i]?l[i].parts.push(a):c.push(l[i]={id:i,parts:[a]});return c}function o(e,t){var n=h(),i=g[g.length-1];if("top"===e.insertAt)i?i.nextSibling?n.insertBefore(t,i.nextSibling):n.appendChild(t):n.insertBefore(t,n.firstChild),g.push(t);else{if("bottom"!==e.insertAt)throw Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(t)}}function r(e){e.parentNode.removeChild(e);var t=g.indexOf(e);t>=0&&g.splice(t,1)}function s(e){var t=document.createElement("style");return t.type="text/css",o(e,t),t}function a(e){var t=document.createElement("link");return t.rel="stylesheet",o(e,t),t}function c(e,t){var n,i,o,c;return t.singleton?(c=b++,n=y||(y=s(t)),i=l.bind(null,n,c,!1),o=l.bind(null,n,c,!0)):e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=a(t),i=d.bind(null,n),o=function(){r(n),n.href&&URL.revokeObjectURL(n.href)}):(n=s(t),i=u.bind(null,n),o=function(){r(n)}),i(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;i(e=t)}else o()}}function l(e,t,n,i){var o,r,s=n?"":i.css;e.styleSheet?e.styleSheet.cssText=f(t,s):(o=document.createTextNode(s),r=e.childNodes,r[t]&&e.removeChild(r[t]),r.length?e.insertBefore(o,r[t]):e.appendChild(o))}function u(e,t){var n=t.css,i=t.media;if(i&&e.setAttribute("media",i),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function d(e,t){var n,i,o=t.css,r=t.sourceMap;r&&(o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),n=new Blob([o],{type:"text/css"}),i=e.href,e.href=URL.createObjectURL(n),i&&URL.revokeObjectURL(i)}var f,p={},m=function(e){var t;return function(){return void 0===t&&(t=e.apply(this,arguments)),t}},v=m(function(){return/msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase())}),h=m(function(){return document.head||document.getElementsByTagName("head")[0]}),y=null,b=0,g=[];e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw Error("The style-loader cannot be used in a non-browser environment");t=t||{},void 0===t.singleton&&(t.singleton=v()),void 0===t.insertAt&&(t.insertAt="bottom");var o=i(e);return n(o,t),function(e){var r,s,a,c,l,u=[];for(r=0;r<o.length;r++)s=o[r],a=p[s.id],a.refs--,u.push(a);for(e&&(c=i(e),n(c,t)),r=0;r<u.length;r++)if(a=u[r],0===a.refs){for(l=0;l<a.parts.length;l++)a.parts[l]();delete p[a.id]}}},f=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t,n){"use strict";var i,o;Object.defineProperty(t,"__esModule",{value:!0}),n(5),i=n(0),o=n(4),i.ready(function(){return o.start()})}]);

lib/Document.ts

@@ -6,7 +6,7 @@ /**
  */
-export function ready(callback: Function): void {
+export function ready(callback: Function): any {
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', () => callback());
     } else {
-        callback();
+        return callback();
     }
@@ -45,1 +45,14 @@ }
 }
+
+export function createDiv(className: string): HTMLDivElement {
+    let overlay: HTMLDivElement = document.createElement('div');
+    overlay.className = className;
+    return overlay;
+}
+
+export function createClone(src: string): HTMLImageElement {
+    let clone: HTMLImageElement = document.createElement('img');
+    clone.className = 'zoom__clone';
+    clone.src = src;
+    return clone;
+}

lib/Element.ts

@@ -1,14 +0,1 @@
-import { Dimension } from './Dimension';
-import {
-    viewportWidth,
-    viewportHeight
-} from './Document';
-
-const TRANSITION_END_EVENTS: string[] = [
-    'transitionend',
-    'webkitTransitionEnd',
-    'oTransitionEnd',
-    'MSTransitionEnd'
-];
-
 export function repaint(element: HTMLElement): void {
@@ -19,43 +6,2 @@ // tslint:disable-next-line
 
-export function translate(x: number, y: number): string {
-    const has3d: boolean = require('has-translate3d');
-    return has3d ? `translate3d(${x}px, ${y}px, 0)` : `translate(${x}px, ${y}px)`;
-}
-
-export function dimensions(element: HTMLElement): Dimension {
-    let rect: ClientRect = element.getBoundingClientRect();
-    return new Dimension(rect.left, rect.top, element.clientWidth, element.clientHeight);
-}
-
-export function addTransitionEndListener(element: HTMLElement, listener: EventListener): void {
-    const hasTransitions: boolean = require('has-transitions');
-
-    if (hasTransitions) {
-        for (let eventName of TRANSITION_END_EVENTS) {
-            element.addEventListener(eventName, listener);
-        }
-    } else {
-        listener(new Event(TRANSITION_END_EVENTS[0]));
-    }
-}
-
-export function removeTransitionEndListener(element: HTMLElement, listener: EventListener): void {
-    for (let event of TRANSITION_END_EVENTS) {
-        element.removeEventListener(event, listener);
-    }
-}
-
-export function createDiv(className: string): HTMLDivElement {
-    let overlay: HTMLDivElement = document.createElement('div');
-    overlay.className = className;
-    return overlay;
-}
-
-export function createClone(src: string): HTMLImageElement {
-    let clone: HTMLImageElement = document.createElement('img');
-    clone.className = 'zoom__clone';
-    clone.src = src;
-    return clone;
-}
-
 export function srcAttribute(wrapper: HTMLElement, image: HTMLImageElement): string {
@@ -70,9 +16,1 @@ let attribute: string | null = wrapper.getAttribute('data-src');
 }
-
-export function fillViewportScale(wrapper: HTMLElement, original: Dimension): number {
-    let targetWidth: number = Number(wrapper.getAttribute('data-width') || Infinity);
-    let targetHeight: number = Number(wrapper.getAttribute('data-height') || Infinity);
-    let scaleX: number = Math.min(viewportWidth(), targetWidth) / original.width;
-    let scaleY: number = Math.min(viewportHeight(), targetHeight) / original.height;
-    return Math.min(scaleX, scaleY);
-}

lib/Zoom.ts

 import {
-    addTransitionEndListener,
+    repaint,
+    srcAttribute
+} from './Element';
+import {
     createClone,
     createDiv,
-    dimensions,
-    fillViewportScale,
-    removeTransitionEndListener,
-    srcAttribute,
-    translate,
-    repaint
-} from './Element';
-import {
     scrollY,
@@ -17,7 +12,13 @@ viewportHeight,
 } from './Document';
-import { Dimension } from './Dimension';
+import { listeners } from './EventListeners';
+import {
+    addTransitionEndListener,
+    removeTransitionEndListener
+} from './Transition';
+import {
+    transform,
+    transformProperty
+} from './Transform';
+import { translate } from './Translate';
 
-const transform: any = require('transform-property');
-const eventListener: any = require('eventlistener');
-
 const ESCAPE_KEY_CODE: number = 27;
@@ -37,3 +38,2 @@ const SCROLL_Y_DELTA: number = 50;
 let initialScrollY: number;
-let original: Dimension;
 
@@ -81,3 +81,3 @@ let resizeListener: EventListener = (): void => {
 
-        if (transform === undefined || event.metaKey || event.ctrlKey) {
+        if (transformProperty === undefined || event.metaKey || event.ctrlKey) {
             window.open(src, '_blank');
@@ -105,3 +105,3 @@ return;
 let finishedLoadingClone: EventListener = (): void => {
-    eventListener.remove(clone, 'load', finishedLoadingClone);
+    listeners.remove(clone, 'load', finishedLoadingClone);
     loaded = true;
@@ -173,13 +173,13 @@
     initialScrollY = scrollY();
-    eventListener.add(window, 'resize', resizeListener);
-    eventListener.add(window, 'scroll', scrollListener);
-    eventListener.add(document, 'keyup', keyboardListener);
-    eventListener.add(container, 'click', zoomOutListener);
+    listeners.add(window, 'resize', resizeListener);
+    listeners.add(window, 'scroll', scrollListener);
+    listeners.add(document, 'keyup', keyboardListener);
+    listeners.add(container, 'click', zoomOutListener);
 }
 
 function removeEventListeners(): void {
-    eventListener.remove(window, 'resize', resizeListener);
-    eventListener.remove(window, 'scroll', scrollListener);
-    eventListener.remove(document, 'keyup', keyboardListener);
-    eventListener.remove(container, 'click', zoomOutListener);
+    listeners.remove(window, 'resize', resizeListener);
+    listeners.remove(window, 'scroll', scrollListener);
+    listeners.remove(document, 'keyup', keyboardListener);
+    listeners.remove(container, 'click', zoomOutListener);
 }
@@ -189,3 +189,3 @@
     clone = createClone(src);
-    eventListener.add(clone, 'load', finishedLoadingClone);
+    listeners.add(clone, 'load', finishedLoadingClone);
     container.appendChild(clone);
@@ -212,7 +212,14 @@ }
 function scaleContainer(): void {
-    let scale: number = fillViewportScale(wrapper, original);
+    let rect: ClientRect = wrapper.getBoundingClientRect();
 
-    let scaledWidth: number = original.width * scale;
-    let scaledHeight: number = original.height * scale;
+    let targetWidth: number = Number(wrapper.getAttribute('data-width') || Infinity);
+    let targetHeight: number = Number(wrapper.getAttribute('data-height') || Infinity);
 
+    let scaleX: number = Math.min(viewportWidth(), targetWidth) / rect.width;
+    let scaleY: number = Math.min(viewportHeight(), targetHeight) / rect.height;
+    let scale: number = Math.min(scaleX, scaleY);
+
+    let scaledWidth: number = rect.width * scale;
+    let scaledHeight: number = rect.height * scale;
+
     let centreX: number = (viewportWidth() - scaledWidth) / 2;
@@ -224,4 +231,4 @@ let centreY: number = (viewportHeight() - scaledHeight) / 2;
     if (state === 'expanding' || state === 'collapsing') {
-        let offsetX: number = original.left + (original.width - scaledWidth) / 2;
-        let offsetY: number = original.top + (original.height - scaledHeight) / 2;
+        let offsetX: number = rect.left + (rect.width - scaledWidth) / 2;
+        let offsetY: number = rect.top + (rect.height - scaledHeight) / 2;
 
@@ -231,7 +238,7 @@ let translateX: number = (centreX - offsetX) / scale;
 
-        style[transform] = `scale(${scale}) ${translate(translateX, translateY)}`;
+        transform(container, `scale(${scale}) ${translate(translateX, translateY)}`);
     } else {
-        style[transform] = '';
-        style.left = `${centreX - original.left}px`;
-        style.top = `${centreY - original.top}px`;
+        transform(container, '');
+        style.left = `${centreX - rect.left}px`;
+        style.top = `${centreY - rect.top}px`;
         style.width = `${scaledWidth}px`;
@@ -243,2 +250,12 @@ style.maxWidth = `${scaledWidth}px`;
 
+function resetScale(): void {
+    let style: CSSStyleDeclaration = container.style;
+    transform(container, '');
+    style.left = '';
+    style.top = '';
+    style.width = '';
+    style.maxWidth = '';
+    style.height = '';
+}
+
 function addOverlay(): void {
@@ -265,5 +282,3 @@ document.body.appendChild(overlay);
 
-    original = dimensions(image);
     activateZoom();
-
     addTransitionEndListener(container, finishedExpandingContainer);
@@ -278,10 +293,3 @@ scaleContainer();
     repaintContainer();
-
-    let style: CSSStyleDeclaration = container.style;
-    style[transform] = '';
-    style.left = '';
-    style.top = '';
-    style.width = '';
-    style.maxWidth = '';
-    style.height = '';
+    resetScale();
 }
@@ -300,7 +308,7 @@
 export function start(): void {
-    eventListener.add(document.body, 'click', zoomInListener);
+    listeners.add(document.body, 'click', zoomInListener);
 }
 
 export function stop(): void {
-    eventListener.remove(document.body, 'click', zoomInListener);
+    listeners.remove(document.body, 'click', zoomInListener);
 }

package.json

 {
   "name": "zoom.ts",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "A lightweight TypeScript library for image zooming, as seen on Medium.",
@@ -33,8 +33,2 @@ "keywords": [
   },
-  "dependencies": {
-    "eventlistener": "0.0.1",
-    "has-transitions": "0.3.0",
-    "has-translate3d": "0.0.3",
-    "transform-property": "0.0.1"
-  },
   "devDependencies": {
@@ -41,0 +35,0 @@ "@types/core-js": "0.9.35",

README.md

@@ -15,3 +15,3 @@ # ![zoom.ts][logo]
 as soon as the DOM is ready. The library accounts for just 4kB of bandwidth once
-gzipped and requires no external bootstrapping.
+gzipped and requires no third-party libraries.
 
@@ -18,0 +18,0 @@ Holding either the <kbd>⌘</kbd> or <kbd>Ctrl</kbd> key will open the image in a

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2341651

increased by0.12%

Dependency count

0

decreased by-100%

Number of package files

27

increased by17.39%

Lines of code

745

increased by7.66%

Dependency changes

• - Removedeventlistener@0.0.1

• - Removedhas-transitions@0.3.0

• - Removedhas-translate3d@0.0.3

• - Removedtransform-property@0.0.1

• - Removedeventlistener@0.0.1(transitive)

• - Removedhas-transitions@0.3.0(transitive)

• - Removedhas-translate3d@0.0.3(transitive)

• - Removedtransform-property@0.0.1(transitive)