medium-zoom/dist/pure/medium-zoom.min.umd.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 _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)({}).hasOwnProperty.call(t,o)&&(n[o]=t[o])}return n},_extends.apply(null,arguments)}!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):(n="undefined"!=typeof globalThis?globalThis:n||self).mediumZoom=e()}(this,function(){"use strict";var n=function(n){return"IMG"===n.tagName},e=function(n){return n&&1===n.nodeType},t=function(n){return".svg"===(n.currentSrc||n.src).substr(-4).toLowerCase()},o=function(t){try{return Array.isArray(t)?t.filter(n):function(n){return NodeList.prototype.isPrototypeOf(n)}(t)?[].slice.call(t).filter(n):e(t)?[t].filter(n):"string"==typeof t?[].slice.call(document.querySelectorAll(t)).filter(n):[]}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")}},i=function(n,r){void 0===r&&(r={});var u=window.Promise||function(n){function e(){}n(e,e)},c=function(n,e){return n.dispatchEvent(function(n,e){if("function"==typeof window.CustomEvent)return new CustomEvent(n,{detail:e});var t=document.createEvent("CustomEvent");return t.initCustomEvent(n,!1,!1,e),t}("medium-zoom:"+e,{zoom:O}))},d=function(n){var e=n.target;e!==j?-1!==y.indexOf(e)&&x({target:e}):z()},a=function(){if(_.t){var n=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;if(_.o||window.visualViewport&&window.visualViewport.scale>_.i)return T=n,clearTimeout(_.u),void(_.u=null);M||Math.abs(T-n)>E.scrollOffset&&!_.u&&(_.u=setTimeout(z,150))}},f=function(n){n.touches.length>=2&&(_.o=!0),_.o&&a(),0===n.touches.length&&(_.o=!1)},m=function(n){var e=n.key||n.keyCode;"Escape"!==e&&"Esc"!==e&&27!==e||z()},s=!1,l=function(){var n=y.length>0;s!==n&&(document[n?"addEventListener":"removeEventListener"]("click",d),s=n)},v=function(){for(var n=arguments.length,e=new Array(n),t=0;t<n;t++)e[t]=arguments[t];var i=e.reduce(function(n,e){return[].concat(n,o(e))},[]);return i.filter(function(n){return-1===y.indexOf(n)}).forEach(function(n){y.push(n),n.classList.add("medium-zoom-image")}),b.forEach(function(n){var e=n.type,t=n.listener,o=n.options;i.forEach(function(n){n.addEventListener(e,t,o)})}),l(),O},w=!1,p=function(n){if(w!==n){var e=n?"addEventListener":"removeEventListener";document[e]("keyup",m),document[e]("scroll",a);var t={passive:!0};["touchstart","touchend","touchcancel"].forEach(function(n){return document[e](n,f,t)}),window[e]("resize",z),w=n}},h=function(n,e){var t,o,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(),e())},d=function(){r.matches&&c()},a=function(){i=!0,clearTimeout(t),window.cancelAnimationFrame(o),n.removeEventListener("transitionend",c),r.removeListener(d)};n.addEventListener("transitionend",c),r.addListener(d);var f=window.getComputedStyle(n),m=1e3*(u(f.transitionDuration)+u(f.transitionDelay));return t=setTimeout(c,Math.max(0,m)+50),m<=0&&(o=window.requestAnimationFrame(function(){return c()})),a},g=function(n){var o=(void 0===n?{}:n).target,i={};return new u(function(n){if(_.t||o&&-1===y.indexOf(o))n(O);else{_=i;var r,u=function(){},d=function(){},a=function(e){i.m&&(u(),d(),window.cancelAnimationFrame(r),i.m=null,M=!1,n(O),e&&(document.body.classList.add("medium-zoom--opened"),c(i.t,"opened")))};if(i.m=a,i.t=o||y[0],i.t){if(i.i=window.visualViewport?window.visualViewport.scale:1,p(!0),M=!0,c(i.t,"open"),!i.l){if(T=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,i.v=function(n){var e=n.getBoundingClientRect(),t=e.top,o=e.left,i=e.width,r=e.height,u=n.cloneNode(),c=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,d=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=o+d+"px",u.style.width=i+"px",u.style.height=r+"px",u.style.transform="",u}(i.t),document.body.appendChild(j),E.template){var f=e(E.template)?E.template:document.querySelector(E.template);i.p=document.createElement("div"),i.p.appendChild(f.content.cloneNode(!0)),document.body.appendChild(i.p)}i.t.parentElement&&"PICTURE"===i.t.parentElement.tagName&&i.t.currentSrc&&(i.v.src=i.t.currentSrc),document.body.appendChild(i.v),r=window.requestAnimationFrame(function(){document.body.classList.add("medium-zoom--opened")}),i.t.classList.add("medium-zoom-image--hidden"),i.v.classList.add("medium-zoom-image--opened"),i.v.addEventListener("click",z);var m=function(){!function(){var n,o,r={width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,right:0,bottom:0};if(E.container)if(E.container instanceof Object)n=(r=_extends({},r,E.container)).width-r.left-r.right-2*E.margin,o=r.height-r.top-r.bottom-2*E.margin;else{var u=(e(E.container)?E.container:document.querySelector(E.container)).getBoundingClientRect();r=_extends({},r,{width:u.width,height:u.height,left:u.left,top:u.top})}n=n||r.width-2*E.margin,o=o||r.height-2*E.margin;var c=i.h||i.t,d=t(c)?n:c.naturalWidth||n,a=t(c)?o:c.naturalHeight||o,f=c.getBoundingClientRect(),m=f.top,s=f.left,l=f.width,v=f.height;if(l&&v){var w=Math.min(Math.max(l,d),n)/l,p=Math.min(Math.max(v,a),o)/v,h=Math.min(w,p),g="scale("+h+") translate3d("+((n-l)/2-s+E.margin+r.left)/h+"px, "+((o-v)/2-m+E.margin+r.top)/h+"px, 0)";i.v.style.transform=g,i.h&&(i.h.style.transform=g)}}(),u=h(i.v,function(){return a(!0)})},s=i.t.getAttribute("data-zoom-src");if(s||i.t.hasAttribute("srcset")){var l=document.createElement("img");[].slice.call(i.v.attributes).forEach(function(n){var e=n.name,t=n.value;/^(src|srcset|sizes|loading)$/.test(e)||l.setAttribute(e,t)}),i.h=l;var v=function(){d(),i.l||(l.naturalWidth?(l.classList.add("medium-zoom-image--opened"),l.addEventListener("click",z),document.body.appendChild(l)):(console.warn("Unable to reach the zoom image target "+(l.currentSrc||l.src)),i.h=null),m())};d=function(){l.removeEventListener("load",v),l.removeEventListener("error",v)},l.addEventListener("load",v),l.addEventListener("error",v),s||(l.srcset=i.v.srcset),l.src=s||i.v.src}else m()}}else n(O)}})},z=function(){return new u(function(n){var e=_;if(e.t&&!e.l){e.l=!0,e.m&&e.m(),clearTimeout(e.u),M=!0;var t=function(){e.t.classList.remove("medium-zoom-image--hidden"),[e.v,e.h,e.p,j].forEach(function(n){n&&(n.removeEventListener("click",z),n.parentNode&&n.parentNode.removeChild(n))}),_={},M=!1,p(!1),n(O),c(e.t,"closed")};e.v&&h(e.v,t),document.body.classList.remove("medium-zoom--opened"),e.v&&(e.v.style.transform=""),e.h&&(e.h.style.transform=""),e.p&&(e.p.style.transition=parseFloat(window.getComputedStyle(e.v).transitionDuration)?"opacity 150ms":"none",e.p.style.opacity=0),c(e.t,"close"),e.v||t()}else n(O)})},x=function(n){var e=(void 0===n?{}:n).target;return _.t?z():g({target:e})},y=[],b=[],M=!1,T=0,E=r,_={};"[object Object]"===Object.prototype.toString.call(n)?E=n:(n||"string"==typeof n)&&v(n);var j=function(n){var e=document.createElement("div");return e.classList.add("medium-zoom-overlay"),e.style.background=n,e}((E=_extends({margin:0,background:"#fff",scrollOffset:40,container:null,template:null},E)).background),O={open:g,close:z,toggle:x,update:function(n){void 0===n&&(n={});var t=n;return n.background&&(j.style.background=n.background),n.container&&n.container instanceof Object&&(t.container=_extends({},E.container,n.container)),n.template&&(t.template=e(n.template)?n.template:document.querySelector(n.template)),E=_extends({},E,t),y.forEach(function(n){c(n,"update")}),O},clone:function(n){return i(_extends({},E,n))},attach:v,detach:function(){_.v&&z();for(var n=arguments.length,e=new Array(n),t=0;t<n;t++)e[t]=arguments[t];var i=e.length>0?e.reduce(function(n,e){return[].concat(n,o(e))},[]):y;return i.forEach(function(n){n.classList.remove("medium-zoom-image"),c(n,"detach")}),y=y.filter(function(n){return-1===i.indexOf(n)}),l(),O},on:function(n,e,t){void 0===t&&(t={});var o="medium-zoom:"+n;return y.forEach(function(n){n.addEventListener(o,e,t)}),b.push({type:o,listener:e,options:t}),O},off:function(n,e,t){void 0===t&&(t={});var o="medium-zoom:"+n;return y.forEach(function(n){n.removeEventListener(o,e,t)}),b=b.filter(function(n){return!(n.type===o&&n.listener.toString()===e.toString())}),O},getOptions:function(){return E},getImages:function(){return y},getZoomedImage:function(){return _.t||null}};return O};return i});