zoom.ts - npm Package Compare versions

Comparing version 7.0.0 to 7.1.0

dist/zoom.js

 /*!
- * zoom.ts v7.0.0
+ * zoom.ts v7.1.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=11)}([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){var e,n=t.parentElement;null!==n&&(e=n.classList,e.contains("zoom")&&!e.contains("zoom--active")&&(M=n,O=t,A=x.dimensions(O),o()))}function o(){c(),m(),h(),y(),s()}function r(){U=!1,a(),g(),b(),d()}function s(){R=z.scrollY(),window.addEventListener("resize",B),window.addEventListener("scroll",D),document.addEventListener("keyup",P),M.addEventListener("click",W)}function a(){window.removeEventListener("resize",B),window.removeEventListener("scroll",D),document.removeEventListener("keyup",P),M.removeEventListener("click",W)}function c(){j=document.createElement("img"),j.classList.add("zoom__clone"),j.addEventListener("load",N),j.src=x.srcAttribute(O),M.appendChild(j)}function l(){M.removeChild(j)}function u(){O.classList.add("zoom__element--hidden"),j.classList.add("zoom__clone--visible")}function d(){O.classList.remove("zoom__element--hidden"),j.classList.remove("zoom__clone--visible")}function f(){M.style.transition="initial",p(),x.repaint(M),M.style.transition=""}function p(){var t,e,n,i,o=x.fillViewportScale(M,A),r=A.width*o,s=A.height*o,a=(z.viewportWidth()-r)/2,c=(z.viewportHeight()-s)/2,l=M.style;"expanding"===S||"collapsing"===S?(t=A.left+(A.width-r)/2,e=A.top+(A.height-s)/2,n=(a-t)/o,i=(c-e)/o,l[E]="scale("+o+") "+x.translate(n,i)):(l[E]="",l.left=a-A.left+"px",l.top=c-A.top+"px",l.width=r+"px",l.maxWidth=r+"px",l.height=s+"px")}function m(){document.body.appendChild(C)}function v(){document.body.removeChild(C)}function h(){x.repaint(C),C.classList.add("zoom__overlay--visible")}function b(){C.classList.remove("zoom__overlay--visible"),x.removeTransitionEndListener(M,Y)}function y(){S="expanding",w(),x.addTransitionEndListener(M,Y),p()}function g(){S="collapsing",x.addTransitionEndListener(M,I),f();var t=M.style;t[E]="",t.left="",t.top="",t.width="",t.maxWidth="",t.height=""}function w(){M.classList.add("zoom--active"),O.classList.add("zoom__element--active")}function _(){M.classList.remove("zoom--active"),O.classList.remove("zoom__element--active")}function L(){document.body.addEventListener("click",H)}var x,z,E,k,T,C,M,O,j,S,U,R,A,B,D,P,H,W,N,Y,I;Object.defineProperty(e,"__esModule",{value:!0}),x=n(5),z=n(0),E=n(1),k=27,T=50,C=x.createOverlay(),S="collapsed",U=!1,B=function(){p()},D=function(){Math.abs(R-z.scrollY())>T&&r()},P=function(t){t.keyCode===k&&r()},H=function(t){var e=t.target;e instanceof HTMLImageElement&&e.classList.contains("zoom__element")&&(t.preventDefault(),!E||t.metaKey||t.ctrlKey?window.open(x.srcAttribute(e),"_blank"):i(e))},W=function(){r()},N=function(){j.removeEventListener("load",N),U=!0,"expanded"===S&&u()},Y=function(){S="expanded",x.removeTransitionEndListener(M,Y),f(),U&&u()},I=function(){x.removeTransitionEndListener(M,I),v(),_(),l()},e.start=L},function(t,e,n){var i,o=n(6);"string"==typeof o&&(o=[[t.i,o,""]]),i=n(10)(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(9);return i?"translate3d("+t+"px, "+e+"px, 0)":"translate("+t+"px, "+e+"px)"}function r(t){var e=t.getBoundingClientRect();return new d.Dimension(e.left,e.top,t.clientWidth,t.clientHeight)}function s(t,e){var i,o,r,s=n(8);if(s)for(i=0,o=p;i<o.length;i++)r=o[i],t.addEventListener(r,e);else e(new Event(p[0]))}function a(t,e){var n,i,o;for(n=0,i=p;n<i.length;n++)o=i[n],t.removeEventListener(o,e)}function c(){var t=document.createElement("div");return t.classList.add("zoom__overlay"),t}function l(t){var e,n=t.parentElement;return null!==n&&(e=n.getAttribute("data-src"),null!==e)?e:t.src}function u(t,e){var n=+(t.getAttribute("data-width")||1/0),i=+(t.getAttribute("data-height")||1/0),o=Math.min(f.viewportWidth(),n)/e.width,r=Math.min(f.viewportHeight(),i)/e.height;return Math.min(o,r)}var d,f,p;Object.defineProperty(e,"__esModule",{value:!0}),d=n(4),f=n(0),p=["transitionend","webkitTransitionEnd","oTransitionEnd","MSTransitionEnd"],e.repaint=i,e.translate=o,e.dimensions=r,e.addTransitionEndListener=s,e.removeTransitionEndListener=a,e.createOverlay=c,e.srcAttribute=l,e.fillViewportScale=u},function(t,e,n){e=t.exports=n(7)(),e.push([t.i,'.zoom{position:relative;line-height:0;text-align:center;-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,transition}.zoom--active{z-index:2}.zoom__element{visibility:visible;opacity:1;-webkit-transition:visibility 0s linear 0s,opacity .4s 0s;transition:visibility 0s linear 0s,opacity .4s 0s;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{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){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(window.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(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()})}]);

lib/Element.ts

@@ -47,25 +47,28 @@ import { Dimension } from './Dimension';
 
-export function createOverlay(): HTMLDivElement {
+export function createDiv(className: string): HTMLDivElement {
     let overlay: HTMLDivElement = document.createElement('div');
-    overlay.classList.add('zoom__overlay');
+    overlay.className = className;
     return overlay;
 }
 
-export function srcAttribute(element: HTMLImageElement): string {
-    let parent: HTMLElement | null = element.parentElement;
+export function createClone(src: string): HTMLImageElement {
+    let clone: HTMLImageElement = document.createElement('img');
+    clone.className = 'zoom__clone';
+    clone.src = src;
+    return clone;
+}
 
-    if (parent !== null) {
-        let attribute: string | null = parent.getAttribute('data-src');
+export function srcAttribute(wrapper: HTMLElement, image: HTMLImageElement): string {
+    let attribute: string | null = wrapper.getAttribute('data-src');
 
-        if (attribute !== null) {
-            return attribute;
-        }
+    if (attribute !== null) {
+        return attribute;
     }
 
-    return element.src as string;
+    return image.src as string;
 }
 
-export function fillViewportScale(container: HTMLElement, original: Dimension): number {
-    let targetWidth: number = Number(container.getAttribute('data-width') || Infinity);
-    let targetHeight: number = Number(container.getAttribute('data-height') || Infinity);
+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;
@@ -72,0 +75,0 @@ let scaleY: number = Math.min(viewportHeight(), targetHeight) / original.height;

lib/Zoom.ts

 import {
+    addTransitionEndListener,
+    createClone,
+    createDiv,
+    dimensions,
+    fillViewportScale,
+    removeTransitionEndListener,
     srcAttribute,
-    createOverlay,
-    removeTransitionEndListener,
-    fillViewportScale,
     translate,
-    dimensions,
-    repaint,
-    addTransitionEndListener
+    repaint
 } from './Element';
 import {
     scrollY,
-    viewportWidth,
-    viewportHeight
+    viewportHeight,
+    viewportWidth
 } from './Document';
@@ -19,2 +20,3 @@ import { Dimension } from './Dimension';
 const transform: any = require('transform-property');
+const eventListener: any = require('eventlistener');
 
@@ -26,3 +28,4 @@ const ESCAPE_KEY_CODE: number = 27;
 
-let overlay: HTMLDivElement = createOverlay();
+let overlay: HTMLDivElement = createDiv('zoom__overlay');
+let wrapper: HTMLElement;
 let container: HTMLElement;
@@ -57,9 +60,38 @@ let image: HTMLImageElement;
     if (target instanceof HTMLImageElement && target.classList.contains('zoom__element')) {
+        let parent: HTMLElement | null = target.parentElement;
+        if (parent === null) {
+            return;
+        }
+
+        let grandParent: HTMLElement | null = parent.parentElement;
+        if (grandParent === null) {
+            return;
+        }
+
         event.preventDefault();
 
-        if (transform && !event.metaKey && !event.ctrlKey) {
-            zoomImage(target);
+        let containerExists: boolean = parent.classList.contains('zoom__container');
+        let targetWrapper: HTMLElement = containerExists ? grandParent : parent;
+
+        if (targetWrapper.classList.contains('zoom--active')) {
+            return;
+        }
+
+        let src: string = srcAttribute(targetWrapper, target);
+
+        if (transform === undefined || event.metaKey || event.ctrlKey) {
+            window.open(src, '_blank');
+            return;
+        }
+
+        wrapper = targetWrapper;
+
+        if (containerExists) {
+            useExistingContainer(parent, target);
         } else {
-            window.open(srcAttribute(target), '_blank');
+            addContainer(target);
+            addClone(src);
         }
+
+        show();
     }
@@ -73,3 +105,3 @@ };
 let finishedLoadingClone: EventListener = (): void => {
-    clone.removeEventListener('load', finishedLoadingClone);
+    eventListener.remove(clone, 'load', finishedLoadingClone);
     loaded = true;
@@ -95,27 +127,22 @@
     removeTransitionEndListener(container, finishedCollapsingContainer);
-
     removeOverlay();
-    zoomInactive();
-    removeClone();
+    deactivateZoom();
 };
 
-function zoomImage(element: HTMLImageElement): void {
-    let parent: HTMLElement | null = element.parentElement;
+function addContainer(target: HTMLImageElement): void {
+    image = target.cloneNode(true) as HTMLImageElement;
+    container = createDiv('zoom__container');
+    container.appendChild(image);
+    wrapper.replaceChild(container, target);
+}
 
-    if (parent === null) {
-        return;
-    }
-
-    let parentClasses: DOMTokenList = parent.classList;
-
-    if (parentClasses.contains('zoom') && !parentClasses.contains('zoom--active')) {
-        container = parent;
-        image = element;
-        original = dimensions(image);
-        show();
-    }
+function useExistingContainer(parent: HTMLElement, target: HTMLImageElement): void {
+    loaded = true;
+    image = target;
+    container = parent;
+    clone = container.children.item(1) as HTMLImageElement;
 }
 
 function show(): void {
-    addClone();
+    freezeWrapperHeight();
     addOverlay();
@@ -129,2 +156,3 @@ showOverlay();
     loaded = false;
+
     removeEventListeners();
@@ -134,31 +162,34 @@ collapseContainer();
     hideClone();
+    unfreezeWrapperHeight();
 }
 
+function freezeWrapperHeight(): void {
+    wrapper.style.height = `${image.height}px`;
+}
+
+function unfreezeWrapperHeight(): void {
+    wrapper.style.height = '';
+}
+
 function addEventListeners(): void {
     initialScrollY = scrollY();
-    window.addEventListener('resize', resizeListener);
-    window.addEventListener('scroll', scrollListener);
-    document.addEventListener('keyup', keyboardListener);
-    container.addEventListener('click', zoomOutListener);
+    eventListener.add(window, 'resize', resizeListener);
+    eventListener.add(window, 'scroll', scrollListener);
+    eventListener.add(document, 'keyup', keyboardListener);
+    eventListener.add(container, 'click', zoomOutListener);
 }
 
 function removeEventListeners(): void {
-    window.removeEventListener('resize', resizeListener);
-    window.removeEventListener('scroll', scrollListener);
-    document.removeEventListener('keyup', keyboardListener);
-    container.removeEventListener('click', zoomOutListener);
+    eventListener.remove(window, 'resize', resizeListener);
+    eventListener.remove(window, 'scroll', scrollListener);
+    eventListener.remove(document, 'keyup', keyboardListener);
+    eventListener.remove(container, 'click', zoomOutListener);
 }
 
-function addClone(): void {
-    clone = document.createElement('img');
-    clone.classList.add('zoom__clone');
-    clone.addEventListener('load', finishedLoadingClone);
-    clone.src = srcAttribute(image);
+function addClone(src: string): void {
+    clone = createClone(src);
+    eventListener.add(clone, 'load', finishedLoadingClone);
     container.appendChild(clone);
 }
 
-function removeClone(): void {
-    container.removeChild(clone);
-}
-
 function showClone(): void {
@@ -182,3 +213,3 @@ image.classList.add('zoom__element--hidden');
 function scaleContainer(): void {
-    let scale: number = fillViewportScale(container, original);
+    let scale: number = fillViewportScale(wrapper, original);
 
@@ -231,3 +262,6 @@ let scaledWidth: number = original.width * scale;
     state = 'expanding';
-    zoomActive();
+
+    original = dimensions(image);
+    activateZoom();
+
     addTransitionEndListener(container, finishedExpandingContainer);
@@ -252,9 +286,9 @@ scaleContainer();
 
-function zoomActive(): void {
-    container.classList.add('zoom--active');
+function activateZoom(): void {
+    wrapper.classList.add('zoom--active');
     image.classList.add('zoom__element--active');
 }
 
-function zoomInactive(): void {
-    container.classList.remove('zoom--active');
+function deactivateZoom(): void {
+    wrapper.classList.remove('zoom--active');
     image.classList.remove('zoom__element--active');
@@ -264,3 +298,7 @@ }
 export function start(): void {
-    document.body.addEventListener('click', zoomInListener);
+    eventListener.add(document.body, 'click', zoomInListener);
 }
+
+export function stop(): void {
+    eventListener.remove(document.body, 'click', zoomInListener);
+}

package.json

 {
   "name": "zoom.ts",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "A lightweight TypeScript library for image zooming, as seen on Medium.",
@@ -34,2 +34,3 @@ "keywords": [
   "dependencies": {
+    "eventlistener": "0.0.1",
     "has-transitions": "0.3.0",
@@ -36,0 +37,0 @@ "has-translate3d": "0.0.3",

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

2338835

increased by0.09%

Lines of code

692

increased by4.69%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedeventlistener@0.0.1

• + Addedeventlistener@0.0.1(transitive)