zoom.ts - npm Package Compare versions

Comparing version 6.2.0 to 6.3.0

dist/zoom.js

 /*!
- * zoom.ts v6.2.0
+ * zoom.ts v6.3.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 r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.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 r(){return(document.documentElement||document.body).clientWidth}function o(){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=r,e.viewportHeight=o,e.scrollY=s},function(t,e,n){"use strict";function i(t){t.offsetHeight}function r(t,e){var i=n(10);return i?"translate3d("+t+"px, "+e+"px, 0)":"translate("+t+"px, "+e+"px)"}function o(t){var e=t.getBoundingClientRect();return new u.Dimension(e.left,e.top,t.clientWidth,t.clientHeight)}function s(t,e){var i=n(9);if(i)for(var r=0,o=f;r<o.length;r++){var s=o[r];t.addEventListener(s,e)}else e(new Event(f[0]))}function a(t,e){for(var n=0,i=f;n<i.length;n++){var r=i[n];t.removeEventListener(r,e)}}function c(t){var e=t.parentElement;if(null!==e){var n=e.getAttribute("data-src");if(null!==n)return n}return t.src}function l(t,e){var n=Number(t.getAttribute("data-width")||1/0),i=Number(t.getAttribute("data-height")||1/0),r=Math.min(d.viewportWidth(),n)/e.width,o=Math.min(d.viewportHeight(),i)/e.height;return Math.min(r,o)}Object.defineProperty(e,"__esModule",{value:!0});var u=n(5),d=n(0),f=["transitionend","webkitTransitionEnd","oTransitionEnd","MSTransitionEnd"];e.repaint=i,e.translate=r,e.dimensions=o,e.addTransitionEndListener=s,e.removeTransitionEndListener=a,e.srcAttribute=c,e.fillViewportScale=l},function(t,e){for(var n,i=["webkitTransform","MozTransform","msTransform","OTransform","transform"],r=document.createElement("p"),o=0;o<i.length;o++)if(n=i[o],null!=r.style[n]){t.exports=n;break}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(1),r=n(6),o=n(2),s=function(){function t(){var t=this;this.overlay=document.createElement("div"),this.clickListener=function(e){var n=e.target;n instanceof HTMLImageElement&&n.classList.contains("zoom__element")&&(e.preventDefault(),!o||e.metaKey||e.ctrlKey?window.open(i.srcAttribute(n),"_blank"):t.zoom(n))}}return t.prototype.start=function(){this.overlay.classList.add("zoom__overlay"),document.body.addEventListener("click",this.clickListener)},t.prototype.zoom=function(t){var e=t.parentElement;if(null!==e){var n=e.classList;if(n.contains("zoom")&&!n.contains("zoom--active")){var i=new r.Zoom(this.overlay,e,t);i.show()}}},t}();e.Listener=s},function(t,e,n){var i=n(7);"string"==typeof i&&(i=[[t.i,i,""]]);n(11)(i,{});i.locals&&(t.exports=i.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";Object.defineProperty(e,"__esModule",{value:!0});var i=n(1),r=n(0),o=27,s=50,a=function(){function t(t,e,n){var a=this;this.state="collapsed",this.finishedExpandingContainer=function(){i.removeTransitionEndListener(a.container,a.finishedExpandingContainer),a.state="expanded",a.repaintContainer()},this.finishedCollapsingContainer=function(){i.removeTransitionEndListener(a.container,a.finishedCollapsingContainer),document.body.removeChild(a.overlay),a.container.classList.remove("zoom--active"),a.element.classList.remove("zoom__element--active"),a.container.removeChild(a.clone)},this.resizeListener=function(){a.scaleContainer()},this.scrollListener=function(){Math.abs(a.initialScrollY-r.scrollY())>s&&a.hide()},this.clickListener=function(){a.hide()},this.keyboardListener=function(t){t.keyCode===o&&a.hide()},this.overlay=t,this.container=e,this.element=n,this.original=i.dimensions(n)}return t.prototype.show=function(){this.addClone(),this.showOverlay(),this.expandContainer(),this.addEventListeners()},t.prototype.hide=function(){this.removeEventListeners(),this.hideOverlay(),this.collapseContainer()},t.prototype.addClone=function(){this.clone=document.createElement("img"),this.clone.classList.add("zoom__clone"),this.clone.src=i.srcAttribute(this.element),this.container.appendChild(this.clone)},t.prototype.showOverlay=function(){document.body.appendChild(this.overlay),i.repaint(this.overlay),this.overlay.classList.add("zoom__overlay--visible")},t.prototype.hideOverlay=function(){this.overlay.classList.remove("zoom__overlay--visible"),i.removeTransitionEndListener(this.container,this.finishedExpandingContainer)},t.prototype.expandContainer=function(){this.state="expanding",this.container.classList.add("zoom--active"),this.element.classList.add("zoom__element--active"),i.addTransitionEndListener(this.container,this.finishedExpandingContainer),this.scaleContainer()},t.prototype.scaleContainer=function(){var t=i.fillViewportScale(this.container,this.original),e=this.original.width*t,n=this.original.height*t,o=(r.viewportWidth()-e)/2,s=(r.viewportHeight()-n)/2;if("expanding"===this.state||"collapsing"===this.state){var a=this.original.left+(this.original.width-e)/2,c=this.original.top+(this.original.height-n)/2,l=(o-a)/t,u=(s-c)/t;this.container.style.transform="scale("+t+") "+i.translate(l,u)}else this.container.style.transform="",this.container.style.left=o-this.original.left+"px",this.container.style.top=s-this.original.top+"px",this.container.style.width=e+"px",this.container.style.maxWidth=e+"px",this.container.style.height=n+"px"},t.prototype.repaintContainer=function(){this.container.style.transition="initial",this.scaleContainer(),i.repaint(this.container),this.container.style.transition=""},t.prototype.collapseContainer=function(){i.addTransitionEndListener(this.container,this.finishedCollapsingContainer),this.state="collapsing",this.repaintContainer(),this.container.style.transform="",this.container.style.left="",this.container.style.top="",this.container.style.width="",this.container.style.maxWidth="",this.container.style.height=""},t.prototype.addEventListeners=function(){this.initialScrollY=r.scrollY(),window.addEventListener("resize",this.resizeListener),window.addEventListener("scroll",this.scrollListener),document.addEventListener("keyup",this.keyboardListener),this.container.addEventListener("click",this.clickListener)},t.prototype.removeEventListeners=function(){window.removeEventListener("resize",this.resizeListener),window.removeEventListener("scroll",this.scrollListener),document.removeEventListener("keyup",this.keyboardListener),this.container.removeEventListener("click",this.clickListener)},t}();e.Zoom=a},function(t,e,n){e=t.exports=n(8)(),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{cursor:pointer;cursor:-moz-zoom-in;cursor:-webkit-zoom-in}.zoom__element--active{width:100%}.zoom__clone{position:absolute;cursor:pointer;cursor:-moz-zoom-out;cursor:-webkit-zoom-out}.zoom__clone,.zoom__overlay{top:0;right:0;bottom:0;left:0}.zoom__overlay{position:fixed;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(){for(var t=[],e=0;e<this.length;e++){var n=this[e];n[2]?t.push("@media "+n[2]+"{"+n[1]+"}"):t.push(n[1])}return t.join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(i[o]=!0)}for(r=0;r<e.length;r++){var s=e[r];"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,r=["transitionDuration","MozTransitionDuration","webkitTransitionDuration"];r.length;){var o=r.shift();o in document.body.style&&(i=o)}t.exports=n},function(t,e,n){var i=n(2);if(i&&window.getComputedStyle){var r={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"},o=document.createElement("div");o.style[i]="translate3d(1px,1px,1px)",document.body.insertBefore(o,null);var s=getComputedStyle(o).getPropertyValue(r[i]);document.body.removeChild(o),t.exports=null!=s&&s.length&&"none"!=s}else t.exports=!1},function(t,e){function n(t,e){for(var n=0;n<t.length;n++){var i=t[n],r=f[i.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](i.parts[o]);for(;o<i.parts.length;o++)r.parts.push(c(i.parts[o],e))}else{for(var s=[],o=0;o<i.parts.length;o++)s.push(c(i.parts[o],e));f[i.id]={id:i.id,refs:1,parts:s}}}}function i(t){for(var e=[],n={},i=0;i<t.length;i++){var r=t[i],o=r[0],s=r[1],a=r[2],c=r[3],l={css:s,media:a,sourceMap:c};n[o]?n[o].parts.push(l):e.push(n[o]={id:o,parts:[l]})}return e}function r(t,e){var n=m(),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 new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(e)}}function o(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",r(t,e),e}function a(t){var e=document.createElement("link");return e.rel="stylesheet",r(t,e),e}function c(t,e){var n,i,r;if(e.singleton){var c=y++;n=v||(v=s(e)),i=l.bind(null,n,c,!1),r=l.bind(null,n,c,!0)}else 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),r=function(){o(n),n.href&&URL.revokeObjectURL(n.href)}):(n=s(e),i=u.bind(null,n),r=function(){o(n)});return i(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;i(t=e)}else r()}}function l(t,e,n,i){var r=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=b(e,r);else{var o=document.createTextNode(r),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(o,s[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=e.css,i=e.sourceMap;i&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */");var r=new Blob([n],{type:"text/css"}),o=t.href;t.href=URL.createObjectURL(r),o&&URL.revokeObjectURL(o)}var f={},h=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},p=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),m=h(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,y=0,g=[];t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");e=e||{},"undefined"==typeof e.singleton&&(e.singleton=p()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var r=i(t);return n(r,e),function(t){for(var o=[],s=0;s<r.length;s++){var a=r[s],c=f[a.id];c.refs--,o.push(c)}if(t){var l=i(t);n(l,e)}for(var s=0;s<o.length;s++){var c=o[s];if(0===c.refs){for(var u=0;u<c.parts.length;u++)c.parts[u]();delete f[c.id]}}}};var b=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),n(4);var i=n(0),r=n(3),o=new r.Listener;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,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 d.Dimension(e.left,e.top,t.clientWidth,t.clientHeight)}function s(t,e){var i=n(9);if(i)for(var o=0,r=h;o<r.length;o++){var s=r[o];t.addEventListener(s,e)}else e(new Event(h[0]))}function a(t,e){for(var n=0,i=h;n<i.length;n++){var o=i[n];t.removeEventListener(o,e)}}function l(t){var e=t.parentElement;if(null!==e){var n=e.getAttribute("data-src");if(null!==n)return n}return t.src}function c(t,e){var n=Number(t.getAttribute("data-width")||1/0),i=Number(t.getAttribute("data-height")||1/0),o=Math.min(u.viewportWidth(),n)/e.width,r=Math.min(u.viewportHeight(),i)/e.height;return Math.min(o,r)}Object.defineProperty(e,"__esModule",{value:!0});var d=n(5),u=n(0),h=["transitionend","webkitTransitionEnd","oTransitionEnd","MSTransitionEnd"];e.repaint=i,e.translate=o,e.dimensions=r,e.addTransitionEndListener=s,e.removeTransitionEndListener=a,e.srcAttribute=l,e.fillViewportScale=c},function(t,e){for(var n,i=["webkitTransform","MozTransform","msTransform","OTransform","transform"],o=document.createElement("p"),r=0;r<i.length;r++)if(n=i[r],null!=o.style[n]){t.exports=n;break}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(1),o=n(6),r=n(2),s=function(){function t(){var t=this;this.overlay=document.createElement("div"),this.clickListener=function(e){var n=e.target;n instanceof HTMLImageElement&&n.classList.contains("zoom__element")&&(e.preventDefault(),!r||e.metaKey||e.ctrlKey?window.open(i.srcAttribute(n),"_blank"):t.zoom(n))}}return t.prototype.start=function(){this.overlay.classList.add("zoom__overlay"),document.body.addEventListener("click",this.clickListener)},t.prototype.zoom=function(t){var e=t.parentElement;if(null!==e){var n=e.classList;if(n.contains("zoom")&&!n.contains("zoom--active")){var i=new o.Zoom(this.overlay,e,t);i.show()}}},t}();e.Listener=s},function(t,e,n){var i=n(7);"string"==typeof i&&(i=[[t.i,i,""]]);n(11)(i,{});i.locals&&(t.exports=i.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";Object.defineProperty(e,"__esModule",{value:!0});var i=n(1),o=n(0),r=27,s=50,a=function(){function t(t,e,n){var a=this;this.loaded=!1,this.state="collapsed",this.finishedLoadingClone=function(){a.clone.removeEventListener("load",a.finishedLoadingClone),a.loaded=!0,"expanded"===a.state&&a.showClone()},this.finishedExpandingContainer=function(){i.removeTransitionEndListener(a.container,a.finishedExpandingContainer),a.state="expanded",a.repaintContainer(),a.loaded&&a.showClone()},this.finishedCollapsingContainer=function(){i.removeTransitionEndListener(a.container,a.finishedCollapsingContainer),document.body.removeChild(a.overlay),a.container.classList.remove("zoom--active"),a.element.classList.remove("zoom__element--active"),a.container.removeChild(a.clone)},this.resizeListener=function(){a.scaleContainer()},this.scrollListener=function(){Math.abs(a.initialScrollY-o.scrollY())>s&&a.hide()},this.clickListener=function(){a.hide()},this.keyboardListener=function(t){t.keyCode===r&&a.hide()},this.overlay=t,this.container=e,this.element=n,this.original=i.dimensions(n)}return t.prototype.show=function(){this.addClone(),this.showOverlay(),this.expandContainer(),this.addEventListeners()},t.prototype.hide=function(){this.removeEventListeners(),this.hideOverlay(),this.hideClone(),this.collapseContainer()},t.prototype.addClone=function(){this.clone=document.createElement("img"),this.clone.classList.add("zoom__clone"),this.clone.addEventListener("load",this.finishedLoadingClone),this.clone.src=i.srcAttribute(this.element),this.container.appendChild(this.clone)},t.prototype.showClone=function(){this.element.classList.add("zoom__element--hidden"),this.clone.classList.add("zoom__clone--visible")},t.prototype.hideClone=function(){this.element.classList.remove("zoom__element--hidden"),this.clone.classList.remove("zoom__clone--visible")},t.prototype.showOverlay=function(){document.body.appendChild(this.overlay),i.repaint(this.overlay),this.overlay.classList.add("zoom__overlay--visible")},t.prototype.hideOverlay=function(){this.overlay.classList.remove("zoom__overlay--visible"),i.removeTransitionEndListener(this.container,this.finishedExpandingContainer)},t.prototype.expandContainer=function(){this.state="expanding",this.container.classList.add("zoom--active"),this.element.classList.add("zoom__element--active"),i.addTransitionEndListener(this.container,this.finishedExpandingContainer),this.scaleContainer()},t.prototype.scaleContainer=function(){var t=i.fillViewportScale(this.container,this.original),e=this.original.width*t,n=this.original.height*t,r=(o.viewportWidth()-e)/2,s=(o.viewportHeight()-n)/2;if("expanding"===this.state||"collapsing"===this.state){var a=this.original.left+(this.original.width-e)/2,l=this.original.top+(this.original.height-n)/2,c=(r-a)/t,d=(s-l)/t;this.container.style.transform="scale("+t+") "+i.translate(c,d)}else this.container.style.transform="",this.container.style.left=r-this.original.left+"px",this.container.style.top=s-this.original.top+"px",this.container.style.width=e+"px",this.container.style.maxWidth=e+"px",this.container.style.height=n+"px"},t.prototype.repaintContainer=function(){this.container.style.transition="initial",this.scaleContainer(),i.repaint(this.container),this.container.style.transition=""},t.prototype.collapseContainer=function(){i.addTransitionEndListener(this.container,this.finishedCollapsingContainer),this.state="collapsing",this.repaintContainer(),this.container.style.transform="",this.container.style.left="",this.container.style.top="",this.container.style.width="",this.container.style.maxWidth="",this.container.style.height=""},t.prototype.addEventListeners=function(){this.initialScrollY=o.scrollY(),window.addEventListener("resize",this.resizeListener),window.addEventListener("scroll",this.scrollListener),document.addEventListener("keyup",this.keyboardListener),this.container.addEventListener("click",this.clickListener)},t.prototype.removeEventListeners=function(){window.removeEventListener("resize",this.resizeListener),window.removeEventListener("scroll",this.scrollListener),document.removeEventListener("keyup",this.keyboardListener),this.container.removeEventListener("click",this.clickListener)},t}();e.Zoom=a},function(t,e,n){e=t.exports=n(8)(),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(){for(var t=[],e=0;e<this.length;e++){var n=this[e];n[2]?t.push("@media "+n[2]+"{"+n[1]+"}"):t.push(n[1])}return t.join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},o=0;o<this.length;o++){var r=this[o][0];"number"==typeof r&&(i[r]=!0)}for(o=0;o<e.length;o++){var 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=["transitionDuration","MozTransitionDuration","webkitTransitionDuration"];o.length;){var r=o.shift();r in document.body.style&&(i=r)}t.exports=n},function(t,e,n){var i=n(2);if(i&&window.getComputedStyle){var o={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"},r=document.createElement("div");r.style[i]="translate3d(1px,1px,1px)",document.body.insertBefore(r,null);var s=getComputedStyle(r).getPropertyValue(o[i]);document.body.removeChild(r),t.exports=null!=s&&s.length&&"none"!=s}else t.exports=!1},function(t,e){function n(t,e){for(var n=0;n<t.length;n++){var i=t[n],o=h[i.id];if(o){o.refs++;for(var r=0;r<o.parts.length;r++)o.parts[r](i.parts[r]);for(;r<i.parts.length;r++)o.parts.push(l(i.parts[r],e))}else{for(var s=[],r=0;r<i.parts.length;r++)s.push(l(i.parts[r],e));h[i.id]={id:i.id,refs:1,parts:s}}}}function i(t){for(var e=[],n={},i=0;i<t.length;i++){var o=t[i],r=o[0],s=o[1],a=o[2],l=o[3],c={css:s,media:a,sourceMap:l};n[r]?n[r].parts.push(c):e.push(n[r]={id:r,parts:[c]})}return e}function o(t,e){var n=m(),i=b[b.length-1];if("top"===t.insertAt)i?i.nextSibling?n.insertBefore(e,i.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),b.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(e)}}function r(t){t.parentNode.removeChild(t);var e=b.indexOf(t);e>=0&&b.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 l(t,e){var n,i,o;if(e.singleton){var l=y++;n=v||(v=s(e)),i=c.bind(null,n,l,!1),o=c.bind(null,n,l,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=a(e),i=u.bind(null,n),o=function(){r(n),n.href&&URL.revokeObjectURL(n.href)}):(n=s(e),i=d.bind(null,n),o=function(){r(n)});return 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 c(t,e,n,i){var o=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=g(e,o);else{var r=document.createTextNode(o),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(r,s[e]):t.appendChild(r)}}function d(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 u(t,e){var n=e.css,i=e.sourceMap;i&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */");var o=new Blob([n],{type:"text/css"}),r=t.href;t.href=URL.createObjectURL(o),r&&URL.revokeObjectURL(r)}var h={},f=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},p=f(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),m=f(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,y=0,b=[];t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");e=e||{},"undefined"==typeof e.singleton&&(e.singleton=p()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var o=i(t);return n(o,e),function(t){for(var r=[],s=0;s<o.length;s++){var a=o[s],l=h[a.id];l.refs--,r.push(l)}if(t){var c=i(t);n(c,e)}for(var s=0;s<r.length;s++){var l=r[s];if(0===l.refs){for(var d=0;d<l.parts.length;d++)l.parts[d]();delete h[l.id]}}}};var g=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),n(4);var i=n(0),o=n(3),r=new o.Listener;i.ready(function(){return r.start()})}]);

lib/Zoom.ts

@@ -28,2 +28,3 @@ import { Dimension } from './Dimension';
 
+    private loaded: boolean = false;
     private state: State = 'collapsed';
@@ -51,2 +52,3 @@
         this.hideOverlay();
+        this.hideClone();
         this.collapseContainer();
@@ -58,2 +60,3 @@ }
         this.clone.classList.add('zoom__clone');
+        this.clone.addEventListener('load', this.finishedLoadingClone);
         this.clone.src = srcAttribute(this.element);
@@ -63,2 +66,21 @@ this.container.appendChild(this.clone);
 
+    private finishedLoadingClone: EventListener = () => {
+        this.clone.removeEventListener('load', this.finishedLoadingClone);
+        this.loaded = true;
+
+        if (this.state === 'expanded') {
+            this.showClone();
+        }
+    };
+
+    private showClone(): void {
+        this.element.classList.add('zoom__element--hidden');
+        this.clone.classList.add('zoom__clone--visible');
+    }
+
+    private hideClone(): void {
+        this.element.classList.remove('zoom__element--hidden');
+        this.clone.classList.remove('zoom__clone--visible');
+    }
+
     private showOverlay(): void {
@@ -116,2 +138,6 @@ document.body.appendChild(this.overlay);
         this.repaintContainer();
+
+        if (this.loaded) {
+            this.showClone();
+        }
     };
@@ -118,0 +144,0 @@

package.json

 {
   "name": "zoom.ts",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "A lightweight TypeScript library for image zooming, as seen on Medium.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -15,3 +15,3 @@ # ![zoom.ts][logo]
 `zoom.ts` easily plugs into your application and starts listening to zoom events
-as soon as the DOM is ready. The library accounts for just 4.2kB of bandwidth
+as soon as the DOM is ready. The library accounts for just 4.4kB of bandwidth
 once gzipped and requires no external bootstrapping.
@@ -18,0 +18,0 @@

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

2340283

increased by0.16%

Lines of code

644

increased by3.37%

No dependency changes