lightgallery
Version:
lightGallery is a feature-rich, modular JavaScript gallery plugin for building beautiful image and video galleries for the web and the mobile
2 lines (1 loc) • 9.97 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgOriginCrop=e()}(this,function(){"use strict";function t(t){return!!t&&Number.isFinite(t.left)&&Number.isFinite(t.top)&&t.width>0&&t.height>0}function e(t){const{triggerRect:e,containerRect:i,top:o,bottom:r,imageSize:n}=t,s=i.width,h=i.height-(o+r);return`translate3d(${-((s-e.width)/2-e.left+i.left)}px, ${-((h-e.height)/2-e.top+o)}px, 0) scale3d(${e.width/n.width}, ${e.height/n.height}, 1)`}const i={x:0,y:0,width:1,height:1},o=.001;function r(t){return Math.abs(t.x)<o&&Math.abs(t.y)<o&&Math.abs(t.width-1)<o&&Math.abs(t.height-1)<o}const n={percent:50,px:0},s={x:n,y:n},h={left:0,top:0,center:50,right:100,bottom:100};function a(t){const e=h[t];if(void 0!==e)return{percent:e,px:0};const i=/^(-?\d*\.?\d+)%$/.exec(t);if(i)return{percent:parseFloat(i[1]),px:0};const o=/^(-?\d*\.?\d+)px$/.exec(t);if(o)return{percent:0,px:parseFloat(o[1])};const r=/^calc\(\s*(-?\d*\.?\d+)%\s*([+-])\s*(-?\d*\.?\d+)px\s*\)$/.exec(t);if(r){const t="-"===r[2]?-1:1;return{percent:parseFloat(r[1]),px:t*parseFloat(r[3])}}}function l(t){var e,i;const o=(null!=t?t:"").split(",")[0].trim().toLowerCase();if(!o)return s;const r=null!=(e=o.match(/calc\([^)]*\)|\S+/g))?e:[];2!==r.length||"top"!==r[0]&&"bottom"!==r[0]||"left"!==r[1]&&"right"!==r[1]||r.reverse();const h=a(null!=(i=r[0])?i:""),l=void 0===r[1]?n:a(r[1]);return h&&l?{x:h,y:l}:s}function g(t){const e=(null!=t?t:"").trim().toLowerCase();switch(e){case"contain":case"cover":case"none":case"scale-down":return e;default:return"fill"}}function c(t){const e=(null!=t?t:"").split(",")[0].trim().toLowerCase();switch(e){case"cover":case"contain":return e;case"auto":case"auto auto":return"none";case"100% 100%":return"fill";default:return}}function u(t){return t.width/t.height}function d(t,e){if(o=t,r=e,Math.abs(o/r-1)<.01)return i;var o,r;if(e>t){const i=t/e;return{x:0,y:(1-i)/2,width:1,height:i}}const n=e/t;return{x:(1-n)/2,y:0,width:n,height:1}}function p(t,e){return e*t.percent/100+t.px}const f=t=>({rect:t,window:i,region:i});const m="lgBeforeOpen",w="lgBeforeClose",y="lgAfterClose",x={originCrop:!0};var b=Object.defineProperty,v=Object.defineProperties,S=Object.getOwnPropertyDescriptors,C=Object.getOwnPropertySymbols,B=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable,M=(t,e,i)=>e in t?b(t,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[e]=i,O=(t,e)=>{for(var i in e||(e={}))B.call(e,i)&&M(t,i,e[i]);if(C)for(var i of C(e))$.call(e,i)&&M(t,i,e[i]);return t},F=(t,e)=>v(t,S(e));const P="translate3d(0, 0, 0)",T=/^(none|translate3d\(0(px)?,\s*0(px)?,\s*0(px)?\))$/,z=/[a-z-]+\([^)]*\)|[a-z-]+/gi,D=.5;function I(){const t=document.createElement("div");return t.className="lg-origin-crop",t.style.position="absolute",t.style.top="0",t.style.right="0",t.style.bottom="0",t.style.left="0",t}return class{constructor(t){return this.closing=!1,this.stageMoved=!1,this.core=t,this.settings=O(O({},x),this.core.settings),this}init(){this.settings.originCrop&&(this.wrapStage(),this.patchCore(),this.core.LGel.on(`${m}.originCrop`,()=>this.onBeforeOpen()),this.core.LGel.on(`${w}.originCrop`,()=>this.onBeforeClose()),this.core.LGel.on(`${y}.originCrop`,()=>this.onAfterClose()))}destroy(){this.stopFollowing(),this.core.LGel.off(".originCrop"),this.resetStage(),this.unwrapStage(),this.restoreCore&&(this.restoreCore(),this.restoreCore=void 0),this.flight=void 0}patchCore(){const t=this.core,e=t.getOriginTransform,i=t.getDummyImgStyles,o=t.getDummyImageContent;t.getOriginTransform=(i,o)=>{const r=this.getFlight(i,o);return this.flight=r,this.closing&&this.followClose(),r?r.transform:e.call(t,i,o)},t.getDummyImgStyles=e=>{const o=this.flight&&this.flight.region;return e&&o&&!r(o)?`width:${e.width*o.width}px;\n margin-left: ${e.width*(o.x-.5)}px;\n margin-top: ${e.height*(o.y-.5)}px;\n height:${e.height*o.height}px`:i.call(t,e)},t.getDummyImageContent=(e,i,r)=>{const n=o.call(t,e,i,r),s=this.flight;if(n||!s||!s.dummySrc||t.items[i]!==s.element)return n;const h=document.createElement("img");return h.alt=r||"",h.src=s.dummySrc,h.className="lg-dummy-img",h.style.cssText=t.getDummyImgStyles(t.currentImageSize),e.addClass("lg-first-slide"),t.outer.addClass("lg-first-slide-loading"),h},this.restoreCore=()=>{t.getOriginTransform=e,t.getDummyImgStyles=i,t.getDummyImageContent=o}}getFlight(i,o){if(!(o&&o.width>0&&o.height>0))return;const n=i.querySelector("img"),h=n||i,a=h.getBoundingClientRect(),m={left:a.left,top:a.top,width:a.width,height:a.height};if(!t(m))return;const w=window.getComputedStyle(h),y=n?void 0:function(t){var e;const i=/url\(\s*(["']?)(.*?)\1\s*\)/.exec(null!=t?t:"");return(null==(e=null==i?void 0:i[2])?void 0:e.trim())||void 0}(w.getPropertyValue("background-image"));if(!n&&!y)return;const x=function(e){var i;const{box:o,imageSize:r,thumbSize:n,position:h=s}=e;let a=null!=(i=e.fit)?i:"fill";if(!(t(o)&&r.width>0&&r.height>0))return f(o);const l=u(r),g=n&&n.width>0&&n.height>0?n:void 0;g||"none"!==a&&"scale-down"!==a||(a="fill");const c=null!=g?g:r,m=d(l,u(c));let w,y;switch(a){case"fill":w=o.width/c.width,y=o.height/c.height;break;case"cover":w=y=Math.max(o.width/c.width,o.height/c.height);break;case"contain":w=y=Math.min(o.width/c.width,o.height/c.height);break;case"none":w=y=1;break;case"scale-down":w=y=Math.min(1,o.width/c.width,o.height/c.height)}const x=c.width*w,b=c.height*y,v=p(h.x,o.width-x),S=p(h.y,o.height-b),C=Math.max(0,v),B=Math.max(0,S),$=Math.min(o.width,v+x),M=Math.min(o.height,S+b);if($<=C||M<=B)return f(o);const O={left:o.left+C,top:o.top+B,width:$-C,height:M-B},F=(C-v)/x,P=(B-S)/b;return{rect:O,window:{x:m.x+F*m.width,y:m.y+P*m.height,width:O.width/x*m.width,height:O.height/b*m.height},region:m}}(O({box:m,imageSize:o},function(t,e){return t instanceof HTMLImageElement?{thumbSize:t.naturalWidth>0?{width:t.naturalWidth,height:t.naturalHeight}:void 0,fit:g(e.getPropertyValue("object-fit")),position:l(e.getPropertyValue("object-position"))}:{fit:c(e.getPropertyValue("background-size"))||"fill",position:l(e.getPropertyValue("background-position"))}}(h,w))),b=!r(x.window);if(n&&!b&&(v=x.rect,S=m,Math.abs(v.left-S.left)<D&&Math.abs(v.top-S.top)<D&&Math.abs(v.width-S.width)<D&&Math.abs(v.height-S.height)<D))return;var v,S;const C=this.core.outer.get().getBoundingClientRect(),B={left:C.left,top:C.top,width:C.width,height:this.core.outer.height()},{top:$,bottom:M}=this.core.mediaContainerPosition,P={element:i,region:x.region,dummySrc:y};if(!b)return F(O({},P),{transform:e({triggerRect:x.rect,containerRect:B,top:$,bottom:M,imageSize:o})});const T=function(t){const{triggerRect:e,containerRect:i,top:o,bottom:r,imageSize:n,window:s}=t,h=i.left,a=i.top+o,l=i.width,g=i.height-(o+r),c=e.left+e.width-(h+l),u=e.top+e.height-(a+g),d=l-e.width,p=g-e.height,f=e.width/(n.width*s.width),m=e.height/(n.height*s.height),w=n.width*(s.x+s.width/2-.5),y=n.height*(s.y+s.height/2-.5);return{transform:`translate3d(${(e.width-l)/2-w*f}px, ${(e.height-g)/2-y*m}px, 0) scale3d(${f}, ${m}, 1)`,outer:`translate3d(${c}px, ${u}px, 0)`,inner:`translate3d(${d}px, ${p}px, 0)`}}({triggerRect:x.rect,containerRect:B,top:$,bottom:M,imageSize:o,window:x.window});return F(O({},P),{transform:T.transform,stage:{outer:T.outer,inner:T.inner}})}onBeforeOpen(){const t=this.flight&&this.flight.stage;t&&this.outerBox&&(this.setStage(t.outer,t.inner),this.outerBox.getBoundingClientRect(),this.followOpen(this.core.getSlideItem(this.core.index).get()))}followOpen(t){this.stopFollowing();let e=!1;this.observer=new MutationObserver(()=>{const i=t.classList.contains("lg-start-end-progress");!e&&i&&T.test(t.style.transform.trim())?(e=!0,clearTimeout(this.flipGrace),this.setStage(P,P,this.getSlideTransition(t))):e&&!i&&(this.stopFollowing(),this.resetStage())}),this.observer.observe(t,{attributes:!0,attributeFilter:["class","style"]}),this.flipGrace=setTimeout(()=>{e||(this.stopFollowing(),this.resetStage())},this.core.settings.startAnimationDuration+300)}onBeforeClose(){this.stopFollowing(),this.closing=!0}followClose(){const t=this.flight&&this.flight.stage;(t||this.stageMoved)&&Promise.resolve().then(()=>{const e=this.core.getSlideItem(this.core.index).get();this.closing&&e&&this.setStage(t?t.outer:P,t?t.inner:P,this.getSlideTransition(e))})}onAfterClose(){this.resetStage(),this.closing=!1,this.flight=void 0}getSlideTransition(t){return function(t,e){const i=window.getComputedStyle(t),o=i.getPropertyValue("transition-property").split(",").map(t=>t.trim()),r=i.getPropertyValue("transition-duration").split(",").map(t=>t.trim()),n=i.getPropertyValue("transition-timing-function").match(z)||[];let s=o.indexOf("transform");return s<0&&(s=Math.max(0,o.indexOf("all"))),{duration:r[s%r.length]||e,easing:n.length?n[s%n.length]:"ease"}}(t,this.core.settings.startAnimationDuration+"ms")}setStage(t,e,i){[[this.outerBox,t],[this.innerBox,e]].forEach(([t,e])=>{t&&(t.style.overflow="hidden",t.style.transitionProperty=i?"transform":"none",t.style.transitionDuration=i?i.duration:"",t.style.transitionTimingFunction=i?i.easing:"",t.style.transform=e)}),this.stageMoved=!0}resetStage(){[this.outerBox,this.innerBox].forEach(t=>{t&&(t.style.overflow="",t.style.transitionProperty="",t.style.transitionDuration="",t.style.transitionTimingFunction="",t.style.transform="")}),this.stageMoved=!1}stopFollowing(){this.observer&&(this.observer.disconnect(),this.observer=void 0),clearTimeout(this.flipGrace),this.flipGrace=void 0}wrapStage(){const t=this.core.$inner.get(),e=t&&t.parentNode;e&&(this.outerBox=I(),this.innerBox=I(),e.insertBefore(this.outerBox,t),this.outerBox.appendChild(this.innerBox),this.innerBox.appendChild(t))}unwrapStage(){const t=this.core.$inner.get(),e=this.outerBox;e&&t&&e.parentNode&&(e.parentNode.insertBefore(t,e),e.remove()),this.outerBox=void 0,this.innerBox=void 0}}});