medium-zoom/dist/medium-zoom.esm.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 o=1;o<arguments.length;o++){var t=arguments[o];for(var e in t)({}).hasOwnProperty.call(t,e)&&(n[e]=t[e])}return n},n.apply(null,arguments)}var o=function(n){return"IMG"===n.tagName},t=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(o):function(n){return NodeList.prototype.isPrototypeOf(n)}(n)?[].slice.call(n).filter(o):t(n)?[n].filter(o):"string"==typeof n?[].slice.call(document.querySelectorAll(n)).filter(o):[]}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(o,u){void 0===u&&(u={});var c=window.Promise||function(n){function o(){}n(o,o)},m=function(n,o){return n.dispatchEvent(function(n,o){if("function"==typeof window.CustomEvent)return new CustomEvent(n,{detail:o});var t=document.createEvent("CustomEvent");return t.initCustomEvent(n,!1,!1,o),t}("medium-zoom:"+o,{zoom:C}))},a=function(n){var o=n.target;o!==k?-1!==M.indexOf(o)&&b({target:o}):y()},d=function(){if(j.o){var n=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;if(j.t||window.visualViewport&&window.visualViewport.scale>j.i)return O=n,clearTimeout(j.u),void(j.u=null);E||Math.abs(O-n)>T.scrollOffset&&!j.u&&(j.u=setTimeout(y,150))}},f=function(n){n.touches.length>=2&&(j.t=!0),j.t&&d(),0===n.touches.length&&(j.t=!1)},s=function(n){var o=n.key||n.keyCode;"Escape"!==o&&"Esc"!==o&&27!==o||y()},l=!1,v=function(){var n=M.length>0;l!==n&&(document[n?"addEventListener":"removeEventListener"]("click",a),l=n)},p=function(){for(var n=arguments.length,o=new Array(n),t=0;t<n;t++)o[t]=arguments[t];var e=o.reduce(function(n,o){return[].concat(n,i(o))},[]);return e.filter(function(n){return-1===M.indexOf(n)}).forEach(function(n){M.push(n),n.classList.add("medium-zoom-image")}),x.forEach(function(n){var o=n.type,t=n.listener,i=n.options;e.forEach(function(n){n.addEventListener(o,t,i)})}),v(),C},w=!1,h=function(n){if(w!==n){var o=n?"addEventListener":"removeEventListener";document[o]("keyup",s),document[o]("scroll",d);var t={passive:!0};["touchstart","touchend","touchcancel"].forEach(function(n){return document[o](n,f,t)}),window[o]("resize",y),w=n}},g=function(n,o){var t,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||(a(),o())},m=function(){r.matches&&c()},a=function(){i=!0,clearTimeout(t),window.cancelAnimationFrame(e),n.removeEventListener("transitionend",c),r.removeListener(m)};n.addEventListener("transitionend",c),r.addListener(m);var d=window.getComputedStyle(n),f=1e3*(u(d.transitionDuration)+u(d.transitionDelay));return t=setTimeout(c,Math.max(0,f)+50),f<=0&&(e=window.requestAnimationFrame(function(){return c()})),a},z=function(o){var i=(void 0===o?{}:o).target,r={};return new c(function(o){if(j.o||i&&-1===M.indexOf(i))o(C);else{j=r;var u,c=function(){},a=function(){},d=function(n){r.m&&(c(),a(),window.cancelAnimationFrame(u),r.m=null,E=!1,o(C),n&&(document.body.classList.add("medium-zoom--opened"),m(r.o,"opened")))};if(r.m=d,r.o=i||M[0],r.o){if(r.i=window.visualViewport?window.visualViewport.scale:1,h(!0),E=!0,m(r.o,"open"),!r.l){if(O=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,r.v=function(n){var o=n.getBoundingClientRect(),t=o.top,e=o.left,i=o.width,r=o.height,u=n.cloneNode(),c=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,m=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;return u.removeAttribute("id"),u.style.position="absolute",u.style.top=t+c+"px",u.style.left=e+m+"px",u.style.width=i+"px",u.style.height=r+"px",u.style.transform="",u}(r.o),document.body.appendChild(k),T.template){var f=t(T.template)?T.template:document.querySelector(T.template);r.p=document.createElement("div"),r.p.appendChild(f.content.cloneNode(!0)),document.body.appendChild(r.p)}r.o.parentElement&&"PICTURE"===r.o.parentElement.tagName&&r.o.currentSrc&&(r.v.src=r.o.currentSrc),document.body.appendChild(r.v),u=window.requestAnimationFrame(function(){document.body.classList.add("medium-zoom--opened")}),r.o.classList.add("medium-zoom-image--hidden"),r.v.classList.add("medium-zoom-image--opened"),r.v.addEventListener("click",y);var s=function(){!function(){var o,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)o=(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=(t(T.container)?T.container:document.querySelector(T.container)).getBoundingClientRect();u=n({},u,{width:c.width,height:c.height,left:c.left,top:c.top})}o=o||u.width-2*T.margin,i=i||u.height-2*T.margin;var m=r.h||r.o,a=e(m)?o:m.naturalWidth||o,d=e(m)?i:m.naturalHeight||i,f=m.getBoundingClientRect(),s=f.top,l=f.left,v=f.width,p=f.height;if(v&&p){var w=Math.min(Math.max(v,a),o)/v,h=Math.min(Math.max(p,d),i)/p,g=Math.min(w,h),z="scale("+g+") translate3d("+((o-v)/2-l+T.margin+u.left)/g+"px, "+((i-p)/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 d(!0)})},l=r.o.getAttribute("data-zoom-src");if(l||r.o.hasAttribute("srcset")){var v=document.createElement("img");[].slice.call(r.v.attributes).forEach(function(n){var o=n.name,t=n.value;/^(src|srcset|sizes|loading)$/.test(o)||v.setAttribute(o,t)}),r.h=v;var p=function(){a(),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())};a=function(){v.removeEventListener("load",p),v.removeEventListener("error",p)},v.addEventListener("load",p),v.addEventListener("error",p),l||(v.srcset=r.v.srcset),v.src=l||r.v.src}else s()}}else o(C)}})},y=function(){return new c(function(n){var o=j;if(o.o&&!o.l){o.l=!0,o.m&&o.m(),clearTimeout(o.u),E=!0;var t=function(){o.o.classList.remove("medium-zoom-image--hidden"),[o.v,o.h,o.p,k].forEach(function(n){n&&(n.removeEventListener("click",y),n.parentNode&&n.parentNode.removeChild(n))}),j={},E=!1,h(!1),n(C),m(o.o,"closed")};o.v&&g(o.v,t),document.body.classList.remove("medium-zoom--opened"),o.v&&(o.v.style.transform=""),o.h&&(o.h.style.transform=""),o.p&&(o.p.style.transition=parseFloat(window.getComputedStyle(o.v).transitionDuration)?"opacity 150ms":"none",o.p.style.opacity=0),m(o.o,"close"),o.v||t()}else n(C)})},b=function(n){var o=(void 0===n?{}:n).target;return j.o?y():z({target:o})},M=[],x=[],E=!1,O=0,T=u,j={};"[object Object]"===Object.prototype.toString.call(o)?T=o:(o||"string"==typeof o)&&p(o);var k=function(n){var o=document.createElement("div");return o.classList.add("medium-zoom-overlay"),o.style.background=n,o}((T=n({margin:0,background:"#fff",scrollOffset:40,container:null,template:null},T)).background),C={open:z,close:y,toggle:b,update:function(o){void 0===o&&(o={});var e=o;return o.background&&(k.style.background=o.background),o.container&&o.container instanceof Object&&(e.container=n({},T.container,o.container)),o.template&&(e.template=t(o.template)?o.template:document.querySelector(o.template)),T=n({},T,e),M.forEach(function(n){m(n,"update")}),C},clone:function(o){return r(n({},T,o))},attach:p,detach:function(){j.v&&y();for(var n=arguments.length,o=new Array(n),t=0;t<n;t++)o[t]=arguments[t];var e=o.length>0?o.reduce(function(n,o){return[].concat(n,i(o))},[]):M;return e.forEach(function(n){n.classList.remove("medium-zoom-image"),m(n,"detach")}),M=M.filter(function(n){return-1===e.indexOf(n)}),v(),C},on:function(n,o,t){void 0===t&&(t={});var e="medium-zoom:"+n;return M.forEach(function(n){n.addEventListener(e,o,t)}),x.push({type:e,listener:o,options:t}),C},off:function(n,o,t){void 0===t&&(t={});var e="medium-zoom:"+n;return M.forEach(function(n){n.removeEventListener(e,o,t)}),x=x.filter(function(n){return!(n.type===e&&n.listener.toString()===o.toString())}),C},getOptions:function(){return T},getImages:function(){return M},getZoomedImage:function(){return j.o||null}};return C};if("undefined"!=typeof document){var u=document.createElement("style");u.textContent=".medium-zoom-overlay{opacity:0;will-change:opacity;transition:opacity .3s;position:fixed;top:0;bottom:0;left:0;right:0}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{cursor:pointer;cursor:zoom-out;will-change:transform;position:relative}@media (prefers-reduced-motion:reduce){.medium-zoom-image,.medium-zoom-overlay{transition:none!important}}",document.head.appendChild(u)}var c=r;
export{c as default};