axentix/dist/components/lightbox/lightbox.min.js

Axentix is a framework mixing fully customizable components & utility-first classes, leaving the design choice to the developer.

(function(n,o){typeof exports=="object"&&typeof module!="undefined"?module.exports=o():typeof define=="function"&&define.amd?define(o):(n=typeof globalThis!="undefined"?globalThis:n||self,n.Lightbox=o())})(this,function(){"use strict";var pt=Object.defineProperty;var z=n=>{throw TypeError(n)};var ut=(n,o,a)=>o in n?pt(n,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):n[o]=a;var H=(n,o,a)=>ut(n,typeof o!="symbol"?o+"":o,a),W=(n,o,a)=>o.has(n)||z("Cannot "+a);var e=(n,o,a)=>(W(n,o,"read from private field"),a?a.call(n):o.get(n)),c=(n,o,a)=>o.has(n)?z("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(n):o.set(n,a),r=(n,o,a,N)=>(W(n,o,"write to private field"),N?N.call(n,a):o.set(n,a),a),f=(n,o,a)=>(W(n,o,"access private method"),a);var O,D,k,A,R,u,T,I,d,L,b,v,S,w,E,g,l,q,B,M,Y,F,K,Z,G,J,Q,U,V,_;const n=[],o={components:[],plugins:[],prefix:"ax",mode:""},a=s=>o.components.find(i=>i.name===s).class,N=()=>{const s=o.components.filter(t=>t.dataDetection),i=o.plugins.filter(t=>t.dataDetection);return[...s,...i].map(t=>t.name)},j=(s,i)=>{if(!s.name||!s.class){console.error(`[Axentix] Error registering ${i} : Missing required parameters.`);return}if(o[i].some(t=>t.name===s.name)){console.error(`[Axentix] Error registering ${i} : Already exist.`);return}s.autoInit&&(s.autoInit.selector=s.autoInit.selector+=":not(.no-axentix-init)"),o[i].push(s)},tt=s=>{j(s,"components")},et=s=>s.replace(/[\w]([A-Z])/g,i=>i[0]+"-"+i[1]).toLowerCase(),it=(s,i="")=>{const t=et(s);return i?i+"-"+t:t},st=(s,i,t,h,y="")=>{const p=i[0].toUpperCase()+i.slice(1).toLowerCase();N().includes(p)&&t!=="Collapsible"&&p!=="Sidenav"&&(s[i]=a(p).getDefaultOptions());const m=y?y+"-"+i:i,C=X(s[i],t,h,m);if(!(Object.keys(C).length===0&&s.constructor===Object))return C},X=(s,i,t,h="")=>Object.keys(s).reduce((y,p)=>{if(typeof s[p]=="object"&&s[p]!==null){const m=st(s,p,i,t,h);m&&(y[p]=m)}else if(s[p]!==null){const m="data-"+i.toLowerCase()+"-"+it(p,h);if(t.hasAttribute(m)){const C=t.getAttribute(m);y[p]=typeof s[p]=="number"?Number(C):C,typeof s[p]=="boolean"&&(y[p]=C==="true")}}return y},{}),nt=(s,i)=>{const t=Object.assign({},a(s).getDefaultOptions());return X(t,s,i)},ot=()=>{document.querySelectorAll("[data-ax]").forEach(i=>{let t=i.dataset.ax;if(t=t[0].toUpperCase()+t.slice(1).toLowerCase(),!N().includes(t)){console.error(`[Axentix] Error: ${t} component doesn't exist. 
 Did you forget to register him ?`,i);return}try{const h=a(t);new h(`#${i.id}`)}catch(h){console.error("[Axentix] Data: Unable to load "+t,h)}})},rt=()=>{try{new Axentix.Axentix("all")}catch(s){console.error("[Axentix] Unable to auto init.",s)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&rt(),ot()});const $=(...s)=>s.reduce((i,t)=>{for(let h in t)i[h]=typeof t[h]=="object"&&t[h]!==null?$(i[h],t[h]):t[h];return i},{}),ht=(s,i,t)=>$(a(s).getDefaultOptions(),nt(s,t),i),lt=(s,i=document.createElement("div"))=>(s[0].parentElement.insertBefore(i,s[0]),s.forEach(h=>i.appendChild(h)),i),x=(s,i,t)=>{const h=new CustomEvent("ax."+i,{detail:{},bubbles:!0});s.dispatchEvent(h)},at=s=>{const i=n.find(t=>t.type!=="Toast"&&"#"+t.instance.el.id===s);return i?i.instance:!1};class ct{constructor(){H(this,"el")}removeListeners(){}setupListeners(){}setup(){}preventDbInstance(i){if(i&&at(i))throw new Error(`Instance already exist on ${i}`)}sync(){x(this.el,"component.sync"),this.removeListeners(),this.setupListeners()}reset(){x(this.el,"component.reset"),this.removeListeners(),this.setup()}destroy(){x(this.el,"component.destroy"),this.removeListeners();const i=n.findIndex(t=>t.instance.el.id===this.el.id);n.splice(i,1)}}const dt={animationDuration:400,overlayClass:"grey dark-4",offset:150,mobileOffset:80,caption:""};class P extends ct{constructor(t,h){super();c(this,l);H(this,"options");c(this,O);c(this,D);c(this,k);c(this,A);c(this,R);c(this,u);c(this,T);c(this,I);c(this,d);c(this,L,0);c(this,b,0);c(this,v,!1);c(this,S,!1);c(this,w);c(this,E,!1);c(this,g,!1);c(this,U,()=>{e(this,v)&&this.close()});try{this.preventDbInstance(t),n.push({type:"Lightbox",instance:this}),this.el=document.querySelector(t),this.options=ht("Lightbox",h,this.el),this.setup()}catch(y){console.error("[Axentix] Lightbox init error",y)}}setup(){x(this.el,"lightbox.setup"),this.el.style.transitionDuration=this.options.animationDuration+"ms",r(this,w,lt([this.el])),this.setupListeners()}setupListeners(){r(this,O,f(this,l,_).bind(this)),this.el.addEventListener("click",e(this,O)),r(this,k,f(this,l,J).bind(this)),r(this,A,f(this,l,Q).bind(this)),r(this,R,e(this,U).bind(this)),r(this,D,f(this,l,G).bind(this)),window.addEventListener("keyup",e(this,k)),window.addEventListener("scroll",e(this,A)),window.addEventListener("resize",e(this,R)),this.el.addEventListener("transitionend",e(this,D))}removeListeners(){this.el.removeEventListener("click",e(this,O)),this.el.removeEventListener("transitionend",e(this,D)),window.removeEventListener("keyup",e(this,k)),window.removeEventListener("scroll",e(this,A)),window.removeEventListener("resize",e(this,R)),r(this,O,void 0),r(this,k,void 0),r(this,A,void 0),r(this,R,void 0),r(this,D,void 0)}open(){r(this,g,!0);let t,h;e(this,E)?t=h=e(this,w).getBoundingClientRect():t=h=this.el.getBoundingClientRect(),r(this,E,!1),f(this,l,q).call(this),f(this,l,B).call(this);const y=window.innerHeight/2,p=window.innerWidth/2;r(this,d,t),this.el.style.width=e(this,d).width+"px",this.el.style.height=e(this,d).height+"px",this.el.style.top="0",this.el.style.left="0";const m=y+window.scrollY-(h.top+window.scrollY),C=p+window.scrollX-(h.left+window.scrollX);f(this,l,F).call(this),e(this,w).style.position="relative",setTimeout(()=>{x(this.el,"lightbox.open"),r(this,v,!0),this.el.classList.contains("responsive-media")&&(r(this,S,!0),this.el.classList.remove("responsive-media")),this.el.classList.add("active"),e(this,w).style.width=e(this,d).width+"px",e(this,w).style.height=e(this,d).height+"px",this.el.style.width=e(this,b)+"px",this.el.style.height=e(this,L)+"px",this.el.style.top=m-e(this,L)/2+"px",this.el.style.left=C-e(this,b)/2+"px"},50)}close(t){t!=null&&t.key&&t.key!=="Escape"||(r(this,v,!1),r(this,E,!0),r(this,g,!1),x(this.el,"lightbox.close"),f(this,l,M).call(this),this.el.style.position="absolute",this.el.style.top="0px",this.el.style.left="0px",this.el.style.width=e(this,d).width+"px",this.el.style.height=e(this,d).height+"px")}}return O=new WeakMap,D=new WeakMap,k=new WeakMap,A=new WeakMap,R=new WeakMap,u=new WeakMap,T=new WeakMap,I=new WeakMap,d=new WeakMap,L=new WeakMap,b=new WeakMap,v=new WeakMap,S=new WeakMap,w=new WeakMap,E=new WeakMap,g=new WeakMap,l=new WeakSet,q=function(){if(!e(this,u)){if(f(this,l,K).call(this),r(this,u,document.createElement("div")),e(this,u).style.transitionDuration=this.options.animationDuration+"ms",e(this,u).className="lightbox-overlay "+this.options.overlayClass,e(this,w).appendChild(e(this,u)),this.options.caption){const t=document.createElement("p");t.className="lightbox-caption",t.innerHTML=this.options.caption,e(this,u).appendChild(t)}r(this,T,this.close.bind(this)),e(this,u).addEventListener("click",e(this,T))}},B=function(){setTimeout(()=>{e(this,u).style.opacity="1"},50)},M=function(){e(this,u).style.opacity="0"},Y=function(){e(this,u).removeEventListener("click",e(this,T)),e(this,u).remove(),r(this,u,null)},F=function(){const t=window.innerWidth>=960?this.options.offset:this.options.mobileOffset;window.innerWidth/window.innerHeight>=e(this,d).width/e(this,d).height?(r(this,L,window.innerHeight-t),r(this,b,e(this,L)*e(this,d).width/e(this,d).height)):(r(this,b,window.innerWidth-t),r(this,L,e(this,b)*e(this,d).height/e(this,d).width))},K=function(){r(this,I,[]);for(let t=this.el;t&&t!==document;t=t.parentNode){const h=window.getComputedStyle(t);(h.overflow==="hidden"||h.overflowX==="hidden"||h.overflowY==="hidden")&&(e(this,I).push(t),t!==document.body&&t.style.setProperty("overflow","visible","important"),document.body.style.overflowX="hidden")}},Z=function(){e(this,I).forEach(t=>t.style.overflow=""),document.body.style.overflowX=""},G=function(t){!t.propertyName.includes("width")&&!t.propertyName.includes("height")||(e(this,E)?(f(this,l,V).call(this),r(this,E,!1),r(this,v,!1),x(this.el,"lightbox.closed")):e(this,g)&&(r(this,g,!1),x(this.el,"lightbox.opened")))},J=function(t){t.key==="Escape"&&(e(this,g)||e(this,v))&&this.close()},Q=function(){(e(this,v)||e(this,g))&&this.close()},U=new WeakMap,V=function(){this.el.classList.remove("active"),f(this,l,Y).call(this),f(this,l,Z).call(this),e(this,S)&&this.el.classList.add("responsive-media"),e(this,w).removeAttribute("style"),this.el.style.position="",this.el.style.left="",this.el.style.top="",this.el.style.width="",this.el.style.height="",this.el.style.transform=""},_=function(){if(e(this,g)||e(this,v)){this.close();return}this.open()},H(P,"getDefaultOptions",()=>dt),tt({class:P,name:"Lightbox",dataDetection:!0,autoInit:{enabled:!0,selector:".lightbox"}}),P});