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