UNPKG

10.1 kBJavaScriptView Raw
1/*! medium-zoom 1.0.4 | MIT License | https://github.com/francoischalifour/medium-zoom */var _extends=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},isSupported=function(a){return'IMG'===a.tagName},isNodeList=function(a){return NodeList.prototype.isPrototypeOf(a)},isNode=function(a){return a&&1===a.nodeType},isSvg=function(a){var b=a.currentSrc||a.src;return'.svg'===b.substr(-4).toLowerCase()},getImagesFromSelector=function(a){try{return Array.isArray(a)?a.filter(isSupported):isNodeList(a)?[].slice.call(a).filter(isSupported):isNode(a)?[a].filter(isSupported):'string'==typeof a?[].slice.call(document.querySelectorAll(a)).filter(isSupported):[]}catch(a){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')}},createOverlay=function(a){var b=document.createElement('div');return b.classList.add('medium-zoom-overlay'),b.style.background=a,b},cloneTarget=function(a){var b=a.getBoundingClientRect(),c=b.top,d=b.left,e=b.width,f=b.height,g=a.cloneNode(),h=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,i=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;return g.removeAttribute('id'),g.style.position='absolute',g.style.top=c+h+'px',g.style.left=d+i+'px',g.style.width=e+'px',g.style.height=f+'px',g.style.transform='',g},createCustomEvent=function(a,b){var c=_extends({bubbles:!1,cancelable:!1,detail:void 0},b);if('function'==typeof window.CustomEvent)return new CustomEvent(a,c);var d=document.createEvent('CustomEvent');return d.initCustomEvent(a,c.bubbles,c.cancelable,c.detail),d},mediumZoom=function a(b){var c=1<arguments.length&&arguments[1]!==void 0?arguments[1]:{},d=window.Promise||function(a){function b(){}a(b,b)},e=function(a){var b=a.target;return b===x?void n():void(-1===r.indexOf(b)||o({target:b}))},f=function(){if(!t&&w.original){var a=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;Math.abs(u-a)>v.scrollOffset&&setTimeout(n,150)}},g=function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},b=a;if(a.background&&(x.style.background=a.background),a.container&&a.container instanceof Object&&(b.container=_extends({},v.container,a.container)),a.template){var c=isNode(a.template)?a.template:document.querySelector(a.template);b.template=c}return v=_extends({},v,b),r.forEach(function(a){a.dispatchEvent(createCustomEvent('medium-zoom:update',{detail:{zoom:y}}))}),y},h=function(){var b=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{};return a(_extends({},v,b))},i=function(){for(var a=arguments.length,b=Array(a),c=0;c<a;c++)b[c]=arguments[c];var d=b.reduce(function(a,b){return[].concat(a,getImagesFromSelector(b))},[]);return d.filter(function(a){return-1===r.indexOf(a)}).forEach(function(a){r.push(a),a.classList.add('medium-zoom-image')}),s.forEach(function(a){var b=a.type,c=a.listener,e=a.options;d.forEach(function(a){a.addEventListener(b,c,e)})}),y},j=function(){for(var a=arguments.length,b=Array(a),c=0;c<a;c++)b[c]=arguments[c];w.zoomed&&n();var d=0<b.length?b.reduce(function(a,b){return[].concat(a,getImagesFromSelector(b))},[]):r;return d.forEach(function(a){a.classList.remove('medium-zoom-image'),a.dispatchEvent(createCustomEvent('medium-zoom:detach',{detail:{zoom:y}}))}),r=r.filter(function(a){return-1===d.indexOf(a)}),y},k=function(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};return r.forEach(function(d){d.addEventListener('medium-zoom:'+a,b,c)}),s.push({type:'medium-zoom:'+a,listener:b,options:c}),y},l=function(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};return r.forEach(function(d){d.removeEventListener('medium-zoom:'+a,b,c)}),s=s.filter(function(c){return c.type!=='medium-zoom:'+a||c.listener.toString()!==b.toString()}),y},m=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.target,c=function(){var a=Math.min,b={width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,right:0,bottom:0},c=void 0,d=void 0;if(v.container)if(v.container instanceof Object)b=_extends({},b,v.container),c=b.width-b.left-b.right-2*v.margin,d=b.height-b.top-b.bottom-2*v.margin;else{var e=isNode(v.container)?v.container:document.querySelector(v.container),f=e.getBoundingClientRect(),g=f.width,h=f.height,i=f.left,j=f.top;b=_extends({},b,{width:g,height:h,left:i,top:j})}c=c||b.width-2*v.margin,d=d||b.height-2*v.margin;var k=w.zoomedHd||w.original,l=isSvg(k)?c:k.naturalWidth||c,m=isSvg(k)?d:k.naturalHeight||d,n=k.getBoundingClientRect(),o=n.top,p=n.left,q=n.width,r=n.height,s=a(l,c)/q,t=a(m,d)/r,u=a(s,t),x=(-p+(c-q)/2+v.margin+b.left)/u,y=(-o+(d-r)/2+v.margin+b.top)/u,z='scale('+u+') translate3d('+x+'px, '+y+'px, 0)';w.zoomed.style.transform=z,w.zoomedHd&&(w.zoomedHd.style.transform=z)};return new d(function(a){if(b&&-1===r.indexOf(b))return void a(y);if(w.zoomed)return void a(y);if(b)w.original=b;else if(0<r.length){var d=r;w.original=d[0]}else return void a(y);if(w.original.dispatchEvent(createCustomEvent('medium-zoom:open',{detail:{zoom:y}})),u=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,t=!0,w.zoomed=cloneTarget(w.original),document.body.appendChild(x),v.template){var e=isNode(v.template)?v.template:document.querySelector(v.template);w.template=document.createElement('div'),w.template.appendChild(e.content.cloneNode(!0)),document.body.appendChild(w.template)}if(document.body.appendChild(w.zoomed),window.requestAnimationFrame(function(){document.body.classList.add('medium-zoom--opened')}),w.original.classList.add('medium-zoom-image--hidden'),w.zoomed.classList.add('medium-zoom-image--opened'),w.zoomed.addEventListener('click',n),w.zoomed.addEventListener('transitionend',function b(){t=!1,w.zoomed.removeEventListener('transitionend',b),w.original.dispatchEvent(createCustomEvent('medium-zoom:opened',{detail:{zoom:y}})),a(y)}),w.original.getAttribute('data-zoom-src')){w.zoomedHd=w.zoomed.cloneNode(),w.zoomedHd.removeAttribute('srcset'),w.zoomedHd.removeAttribute('sizes'),w.zoomedHd.src=w.zoomed.getAttribute('data-zoom-src'),w.zoomedHd.onerror=function(){clearInterval(f),console.warn('Unable to reach the zoom image target '+w.zoomedHd.src),w.zoomedHd=null,c()};var f=setInterval(function(){w.zoomedHd.complete&&(clearInterval(f),w.zoomedHd.classList.add('medium-zoom-image--opened'),w.zoomedHd.addEventListener('click',n),document.body.appendChild(w.zoomedHd),c())},10)}else if(w.original.hasAttribute('srcset')){w.zoomedHd=w.zoomed.cloneNode(),w.zoomedHd.removeAttribute('sizes');var g=w.zoomedHd.addEventListener('load',function(){w.zoomedHd.removeEventListener('load',g),w.zoomedHd.classList.add('medium-zoom-image--opened'),w.zoomedHd.addEventListener('click',n),document.body.appendChild(w.zoomedHd),c()})}else c()})},n=function(){return new d(function(a){if(t||!w.original)return void a(y);t=!0,document.body.classList.remove('medium-zoom--opened'),w.zoomed.style.transform='',w.zoomedHd&&(w.zoomedHd.style.transform=''),w.template&&(w.template.style.transition='opacity 150ms',w.template.style.opacity=0),w.original.dispatchEvent(createCustomEvent('medium-zoom:close',{detail:{zoom:y}})),w.zoomed.addEventListener('transitionend',function b(){w.original.classList.remove('medium-zoom-image--hidden'),document.body.removeChild(w.zoomed),w.zoomedHd&&document.body.removeChild(w.zoomedHd),document.body.removeChild(x),w.zoomed.classList.remove('medium-zoom-image--opened'),w.template&&document.body.removeChild(w.template),t=!1,w.zoomed.removeEventListener('transitionend',b),w.original.dispatchEvent(createCustomEvent('medium-zoom:closed',{detail:{zoom:y}})),w.original=null,w.zoomed=null,w.zoomedHd=null,w.template=null,a(y)})})},o=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.target;return w.original?n():m({target:b})},p=function(){return v},q=function(){return r},r=[],s=[],t=!1,u=0,v=c,w={original:null,zoomed:null,zoomedHd:null,template:null};'[object Object]'===Object.prototype.toString.call(b)?v=b:(b||'string'==typeof b)&&i(b),v=_extends({margin:0,background:'#fff',scrollOffset:40,container:null,template:null},v);var x=createOverlay(v.background);document.addEventListener('click',e),document.addEventListener('keyup',function(a){27===(a.keyCode||a.which)&&n()}),document.addEventListener('scroll',f),window.addEventListener('resize',n);var y={open:m,close:n,toggle:o,update:g,clone:h,attach:i,detach:j,on:k,off:l,getOptions:p,getImages:q,getZoomedImage:function(){return w.original}};return y};function styleInject(a,b){void 0===b&&(b={});var c=b.insertAt;if(a&&'undefined'!=typeof document){var d=document.head||document.getElementsByTagName('head')[0],e=document.createElement('style');e.type='text/css','top'===c?d.firstChild?d.insertBefore(e,d.firstChild):d.appendChild(e):d.appendChild(e),e.styleSheet?e.styleSheet.cssText=a:e.appendChild(document.createTextNode(a))}}var css='.medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.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)}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}';styleInject('.medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.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)}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}');export default mediumZoom;