UNPKG

axentix

Version:

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

3 lines (2 loc) 8.12 kB
(function(o,i){typeof exports=="object"&&typeof module!="undefined"?module.exports=i():typeof define=="function"&&define.amd?define(i):(o=typeof globalThis!="undefined"?globalThis:o||self,o.Toast=i())})(this,function(){"use strict";var tt=Object.defineProperty;var M=o=>{throw TypeError(o)};var et=(o,i,l)=>i in o?tt(o,i,{enumerable:!0,configurable:!0,writable:!0,value:l}):o[i]=l;var P=(o,i,l)=>et(o,typeof i!="symbol"?i+"":i,l),$=(o,i,l)=>i.has(o)||M("Cannot "+l);var a=(o,i,l)=>($(o,i,"read from private field"),l?l.call(o):i.get(o)),u=(o,i,l)=>i.has(o)?M("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(o):i.set(o,l),h=(o,i,l,w)=>($(o,i,"write to private field"),w?w.call(o,l):i.set(o,l),l),c=(o,i,l)=>($(o,i,"access private method"),l);var g,d,p,x,b,y,m,f,n,R,O,k,I,X,B,q,H,N,U,Y,z,v;const o=[],i={components:[],plugins:[],prefix:"ax",mode:""},l=s=>`--${i.prefix}-${s}`,w=s=>i.components.find(t=>t.name===s).class,F=()=>{const s=i.components.filter(e=>e.dataDetection),t=i.plugins.filter(e=>e.dataDetection);return[...s,...t].map(e=>e.name)},V=(s,t)=>{if(!s.name||!s.class){console.error(`[Axentix] Error registering ${t} : Missing required parameters.`);return}if(i[t].some(e=>e.name===s.name)){console.error(`[Axentix] Error registering ${t} : Already exist.`);return}s.autoInit&&(s.autoInit.selector=s.autoInit.selector+=":not(.no-axentix-init)"),i[t].push(s)},G=s=>{V(s,"components")},J=()=>{document.querySelectorAll("[data-ax]").forEach(t=>{let e=t.dataset.ax;if(e=e[0].toUpperCase()+e.slice(1).toLowerCase(),!F().includes(e)){console.error(`[Axentix] Error: ${e} component doesn't exist. Did you forget to register him ?`,t);return}try{const r=w(e);new r(`#${t.id}`)}catch(r){console.error("[Axentix] Data: Unable to load "+e,r)}})},K=()=>{try{new Axentix.Axentix("all")}catch(s){console.error("[Axentix] Unable to auto init.",s)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&K(),J()});const A=(...s)=>s.reduce((t,e)=>{for(let r in e)t[r]=typeof e[r]=="object"&&e[r]!==null?A(t[r],e[r]):e[r];return t},{}),D=(s,t,e)=>{const r=new CustomEvent("ax."+t,{detail:{},bubbles:!0});s.dispatchEvent(r)},Q=()=>"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0,W=()=>!!window.PointerEvent&&"maxTouchPoints"in window.navigator&&window.navigator.maxTouchPoints>=0,Z=()=>Q()?"touch":W()?"pointer":"mouse",j=s=>o.filter(t=>t.type===s).map(t=>t.instance),E=s=>s.targetTouches&&s.targetTouches.length>=1?s.targetTouches[0].clientX:s.changedTouches&&s.changedTouches.length>=1?s.changedTouches[0].pageX:s.clientX,_={animationDuration:400,duration:4e3,classes:"",position:"right",direction:"top",mobileDirection:"bottom",offset:{x:"5%",y:"0%",mobileX:"10%",mobileY:"0%"},isClosable:!1,isSwipeable:!0,closableContent:"x",loading:{enabled:!0,border:"2px solid #E2E2E2"}},L=class L{constructor(t,e){u(this,n);P(this,"options");P(this,"id");u(this,g);u(this,d);u(this,p);u(this,x);u(this,b);u(this,y);u(this,m);u(this,f);if(j("Toast").length>0){console.error("[Axentix] Toast: Don't try to create multiple toast instances");return}o.push({type:"Toast",instance:this}),this.id=Math.random().toString().split(".")[1],h(this,g,t),this.options=A(L.getDefaultOptions(),e),h(this,p,Z()),this.options.position=this.options.position.toLowerCase(),this.options.direction=this.options.direction.toLowerCase(),this.options.mobileDirection=this.options.mobileDirection.toLowerCase(),h(this,d,{})}destroy(){const t=o.findIndex(e=>e.instance.id===this.id);o.splice(t,1)}show(){try{Object.keys(a(this,d)).includes(this.options.position)||c(this,n,R).call(this),c(this,n,z).call(this)}catch(t){console.error("[Axentix] Toast error",t)}}change(t,e){h(this,g,t),this.options=A(this.options,e)}};g=new WeakMap,d=new WeakMap,p=new WeakMap,x=new WeakMap,b=new WeakMap,y=new WeakMap,m=new WeakMap,f=new WeakMap,n=new WeakSet,R=function(){let t=document.createElement("div");["right","left"].includes(this.options.position)||(this.options.position="right"),this.options.position==="right"?t.style.right=this.options.offset.x:t.style.left=this.options.offset.x;const r=["bottom","top"];r.includes(this.options.direction)||(this.options.direction="top"),this.options.direction==="top"?t.style.top=this.options.offset.y:t.style.bottom=this.options.offset.y,r.includes(this.options.mobileDirection)||(this.options.mobileDirection="bottom"),t.style.setProperty(l("toaster-m-width"),100-this.options.offset.mobileX.slice(0,-1)+"%"),t.style.setProperty(l("toaster-m-offset"),this.options.offset.mobileY),this.options.loading.enabled&&t.style.setProperty(l("toast-loading-border"),this.options.loading.border),t.className=`toaster toaster-${this.options.position} toast-${this.options.direction} toaster-m-${this.options.mobileDirection}`,a(this,d)[this.options.position]=t,document.body.appendChild(t)},O=function(){for(const t in a(this,d)){let e=a(this,d)[t];e.childElementCount<=0&&(e.remove(),delete a(this,d)[t])}},k=function(t){setTimeout(()=>{D(t,"toast.show"),this.options.loading.enabled&&(t.classList.add("toast-loading"),t.style.setProperty(l("toast-loading-duration"),this.options.duration+"ms")),t.classList.add("toast-animated"),setTimeout(()=>{D(t,"toast.shown"),this.options.loading.enabled&&t.classList.add("toast-load")},this.options.animationDuration)},50)},I=function(t){setTimeout(()=>{D(t,"toast.hide"),c(this,n,v).call(this,t)},this.options.duration+this.options.animationDuration)},X=function(t){t.style.transitionTimingFunction="cubic-bezier(0.445, 0.05, 0.55, 0.95)",t.style.paddingTop="0",t.style.paddingBottom="0",t.style.margin="0",t.style.height="0"},B=function(t){h(this,x,c(this,n,H).bind(this)),h(this,b,c(this,n,N).bind(this)),h(this,y,c(this,n,U).bind(this)),t.addEventListener(`${a(this,p)}${a(this,p)==="touch"?"start":"down"}`,a(this,x)),t.addEventListener(`${a(this,p)}move`,a(this,b)),t.addEventListener(`${a(this,p)}${a(this,p)==="touch"?"end":"up"}`,a(this,y)),t.addEventListener(a(this,p)==="pointer"?"pointerleave":"mouseleave",a(this,y))},q=function(t){t.querySelectorAll("[data-toast-close]").forEach(e=>{e.addEventListener("click",()=>{c(this,n,v).call(this,t)})})},H=function(t){if(t.target.closest(".toast-trigger"))return;const e=t.target.closest(".toast");e.dataset.closing||(h(this,f,E(t)),h(this,m,!0),e.style.transitionProperty="height, margin, padding, transform, box-shadow")},N=function(t){if(!a(this,m))return;const e=t.target.closest(".toast"),r=e.getBoundingClientRect(),T=Math.abs(E(t)-a(this,f));e.style.left=E(t)-a(this,f)+"px",e.style.opacity=T<r.width?(.99-T/r.width).toString():"0.01"},U=function(t){if(!a(this,m))return;t.cancelable&&t.preventDefault(),h(this,m,!1);const e=t.target.closest(".toast");e.style.transitionProperty="height, margin, opacity, padding, transform, box-shadow, left",Math.abs(E(t)-a(this,f))>e.getBoundingClientRect().width/2?(c(this,n,v).call(this,e),e.dataset.closing="true"):(e.style.left="0px",e.style.opacity=1)},Y=function(t){c(this,n,B).call(this,t)},z=function(){let t=document.createElement("div");if(t.className="toast shadow-1 "+this.options.classes,t.innerHTML=a(this,g),t.style.transitionDuration=this.options.animationDuration+"ms",this.options.isClosable){let r=document.createElement("div");r.className="toast-trigger",r.innerHTML=this.options.closableContent,r.listenerRef=c(this,n,v).bind(this,t,r),r.addEventListener("click",r.listenerRef),t.appendChild(r)}this.options.isSwipeable&&c(this,n,Y).call(this,t),c(this,n,k).call(this,t),c(this,n,q).call(this,t),a(this,d)[this.options.position].appendChild(t),c(this,n,I).call(this,t);const e=t.clientHeight;t.style.height=e+"px"},v=function(t,e,r){if(t.isAnimated)return;let T=1;r&&(r.preventDefault(),T=0,this.options.isClosable&&e.removeEventListener("click",e.listenerRef)),t.style.opacity="0",t.isAnimated=!0;const S=T*this.options.animationDuration+this.options.animationDuration;setTimeout(()=>{c(this,n,X).call(this,t)},S/2),setTimeout(()=>{t.remove(),D(t,"toast.remove"),c(this,n,O).call(this)},S*1.45)},P(L,"getDefaultOptions",()=>_);let C=L;return G({class:C,name:"Toast"}),C});