medium-zoom/dist/pure/index.js

A JavaScript library for zooming images like Medium. Works with React and any web framework.

/*! medium-zoom 1.1.2 | MIT License | https://github.com/francoischalifour/medium-zoom */
function n(){return n=Object.assign?Object.assign.bind():function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var e in o)({}).hasOwnProperty.call(o,e)&&(n[e]=o[e])}return n},n.apply(null,arguments)}var t=function(n){return"IMG"===n.tagName},o=function(n){return n&&1===n.nodeType},e=function(n){return".svg"===(n.currentSrc||n.src).substr(-4).toLowerCase()},i=function(n){try{return Array.isArray(n)?n.filter(t):function(n){return NodeList.prototype.isPrototypeOf(n)}(n)?[].slice.call(n).filter(t):o(n)?[n].filter(t):"string"==typeof n?[].slice.call(document.querySelectorAll(n)).filter(t):[]}catch(n){throw new TypeError("The provided selector is invalid.\nExpects a CSS selector, a Node element, a NodeList or an array.\nSee: https://github.com/francoischalifour/medium-zoom")}},r=function(t,u){void 0===u&&(u={});var c=window.Promise||function(n){function t(){}n(t,t)},a=function(n,t){return n.dispatchEvent(function(n,t){if("function"==typeof window.CustomEvent)return new CustomEvent(n,{detail:t});var o=document.createEvent("CustomEvent");return o.initCustomEvent(n,!1,!1,t),o}("medium-zoom:"+t,{zoom:C}))},d=function(n){var t=n.target;t!==k?-1!==M.indexOf(t)&&b({target:t}):y()},f=function(){if(j.t){var n=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;if(j.o||window.visualViewport&&window.visualViewport.scale>j.i)return O=n,clearTimeout(j.u),void(j.u=null);x||Math.abs(O-n)>T.scrollOffset&&!j.u&&(j.u=setTimeout(y,150))}},m=function(n){n.touches.length>=2&&(j.o=!0),j.o&&f(),0===n.touches.length&&(j.o=!1)},s=function(n){var t=n.key||n.keyCode;"Escape"!==t&&"Esc"!==t&&27!==t||y()},l=!1,v=function(){var n=M.length>0;l!==n&&(document[n?"addEventListener":"removeEventListener"]("click",d),l=n)},w=function(){for(var n=arguments.length,t=new Array(n),o=0;o<n;o++)t[o]=arguments[o];var e=t.reduce(function(n,t){return[].concat(n,i(t))},[]);return e.filter(function(n){return-1===M.indexOf(n)}).forEach(function(n){M.push(n),n.classList.add("medium-zoom-image")}),E.forEach(function(n){var t=n.type,o=n.listener,i=n.options;e.forEach(function(n){n.addEventListener(t,o,i)})}),v(),C},p=!1,h=function(n){if(p!==n){var t=n?"addEventListener":"removeEventListener";document[t]("keyup",s),document[t]("scroll",f);var o={passive:!0};["touchstart","touchend","touchcancel"].forEach(function(n){return document[t](n,m,o)}),window[t]("resize",y),p=n}},g=function(n,t){var o,e,i=!1,r=window.matchMedia("(prefers-reduced-motion)"),u=function(n){return Math.max.apply(Math,n.split(",").map(parseFloat))},c=function(n){i||n&&"transform"!==n.propertyName||(d(),t())},a=function(){r.matches&&c()},d=function(){i=!0,clearTimeout(o),window.cancelAnimationFrame(e),n.removeEventListener("transitionend",c),r.removeListener(a)};n.addEventListener("transitionend",c),r.addListener(a);var f=window.getComputedStyle(n),m=1e3*(u(f.transitionDuration)+u(f.transitionDelay));return o=setTimeout(c,Math.max(0,m)+50),m<=0&&(e=window.requestAnimationFrame(function(){return c()})),d},z=function(t){var i=(void 0===t?{}:t).target,r={};return new c(function(t){if(j.t||i&&-1===M.indexOf(i))t(C);else{j=r;var u,c=function(){},d=function(){},f=function(n){r.m&&(c(),d(),window.cancelAnimationFrame(u),r.m=null,x=!1,t(C),n&&(document.body.classList.add("medium-zoom--opened"),a(r.t,"opened")))};if(r.m=f,r.t=i||M[0],r.t){if(r.i=window.visualViewport?window.visualViewport.scale:1,h(!0),x=!0,a(r.t,"open"),!r.l){if(O=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,r.v=function(n){var t=n.getBoundingClientRect(),o=t.top,e=t.left,i=t.width,r=t.height,u=n.cloneNode(),c=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,a=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;return u.removeAttribute("id"),u.style.position="absolute",u.style.top=o+c+"px",u.style.left=e+a+"px",u.style.width=i+"px",u.style.height=r+"px",u.style.transform="",u}(r.t),document.body.appendChild(k),T.template){var m=o(T.template)?T.template:document.querySelector(T.template);r.p=document.createElement("div"),r.p.appendChild(m.content.cloneNode(!0)),document.body.appendChild(r.p)}r.t.parentElement&&"PICTURE"===r.t.parentElement.tagName&&r.t.currentSrc&&(r.v.src=r.t.currentSrc),document.body.appendChild(r.v),u=window.requestAnimationFrame(function(){document.body.classList.add("medium-zoom--opened")}),r.t.classList.add("medium-zoom-image--hidden"),r.v.classList.add("medium-zoom-image--opened"),r.v.addEventListener("click",y);var s=function(){!function(){var t,i,u={width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,right:0,bottom:0};if(T.container)if(T.container instanceof Object)t=(u=n({},u,T.container)).width-u.left-u.right-2*T.margin,i=u.height-u.top-u.bottom-2*T.margin;else{var c=(o(T.container)?T.container:document.querySelector(T.container)).getBoundingClientRect();u=n({},u,{width:c.width,height:c.height,left:c.left,top:c.top})}t=t||u.width-2*T.margin,i=i||u.height-2*T.margin;var a=r.h||r.t,d=e(a)?t:a.naturalWidth||t,f=e(a)?i:a.naturalHeight||i,m=a.getBoundingClientRect(),s=m.top,l=m.left,v=m.width,w=m.height;if(v&&w){var p=Math.min(Math.max(v,d),t)/v,h=Math.min(Math.max(w,f),i)/w,g=Math.min(p,h),z="scale("+g+") translate3d("+((t-v)/2-l+T.margin+u.left)/g+"px, "+((i-w)/2-s+T.margin+u.top)/g+"px, 0)";r.v.style.transform=z,r.h&&(r.h.style.transform=z)}}(),c=g(r.v,function(){return f(!0)})},l=r.t.getAttribute("data-zoom-src");if(l||r.t.hasAttribute("srcset")){var v=document.createElement("img");[].slice.call(r.v.attributes).forEach(function(n){var t=n.name,o=n.value;/^(src|srcset|sizes|loading)$/.test(t)||v.setAttribute(t,o)}),r.h=v;var w=function(){d(),r.l||(v.naturalWidth?(v.classList.add("medium-zoom-image--opened"),v.addEventListener("click",y),document.body.appendChild(v)):(console.warn("Unable to reach the zoom image target "+(v.currentSrc||v.src)),r.h=null),s())};d=function(){v.removeEventListener("load",w),v.removeEventListener("error",w)},v.addEventListener("load",w),v.addEventListener("error",w),l||(v.srcset=r.v.srcset),v.src=l||r.v.src}else s()}}else t(C)}})},y=function(){return new c(function(n){var t=j;if(t.t&&!t.l){t.l=!0,t.m&&t.m(),clearTimeout(t.u),x=!0;var o=function(){t.t.classList.remove("medium-zoom-image--hidden"),[t.v,t.h,t.p,k].forEach(function(n){n&&(n.removeEventListener("click",y),n.parentNode&&n.parentNode.removeChild(n))}),j={},x=!1,h(!1),n(C),a(t.t,"closed")};t.v&&g(t.v,o),document.body.classList.remove("medium-zoom--opened"),t.v&&(t.v.style.transform=""),t.h&&(t.h.style.transform=""),t.p&&(t.p.style.transition=parseFloat(window.getComputedStyle(t.v).transitionDuration)?"opacity 150ms":"none",t.p.style.opacity=0),a(t.t,"close"),t.v||o()}else n(C)})},b=function(n){var t=(void 0===n?{}:n).target;return j.t?y():z({target:t})},M=[],E=[],x=!1,O=0,T=u,j={};"[object Object]"===Object.prototype.toString.call(t)?T=t:(t||"string"==typeof t)&&w(t);var k=function(n){var t=document.createElement("div");return t.classList.add("medium-zoom-overlay"),t.style.background=n,t}((T=n({margin:0,background:"#fff",scrollOffset:40,container:null,template:null},T)).background),C={open:z,close:y,toggle:b,update:function(t){void 0===t&&(t={});var e=t;return t.background&&(k.style.background=t.background),t.container&&t.container instanceof Object&&(e.container=n({},T.container,t.container)),t.template&&(e.template=o(t.template)?t.template:document.querySelector(t.template)),T=n({},T,e),M.forEach(function(n){a(n,"update")}),C},clone:function(t){return r(n({},T,t))},attach:w,detach:function(){j.v&&y();for(var n=arguments.length,t=new Array(n),o=0;o<n;o++)t[o]=arguments[o];var e=t.length>0?t.reduce(function(n,t){return[].concat(n,i(t))},[]):M;return e.forEach(function(n){n.classList.remove("medium-zoom-image"),a(n,"detach")}),M=M.filter(function(n){return-1===e.indexOf(n)}),v(),C},on:function(n,t,o){void 0===o&&(o={});var e="medium-zoom:"+n;return M.forEach(function(n){n.addEventListener(e,t,o)}),E.push({type:e,listener:t,options:o}),C},off:function(n,t,o){void 0===o&&(o={});var e="medium-zoom:"+n;return M.forEach(function(n){n.removeEventListener(e,t,o)}),E=E.filter(function(n){return!(n.type===e&&n.listener.toString()===t.toString())}),C},getOptions:function(){return T},getImages:function(){return M},getZoomedImage:function(){return j.t||null}};return C};
export{r as default};