axentix/dist/components/waves/waves.min.js

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

(function(c,p){typeof exports=="object"&&typeof module!="undefined"?module.exports=p():typeof define=="function"&&define.amd?define(p):(c=typeof globalThis!="undefined"?globalThis:c||self,c.Waves=p())})(this,function(){"use strict";var f=Math.pow;const c={components:[],plugins:[],prefix:"ax",mode:""},p=t=>`--${c.prefix}-${t}`,b=t=>c.components.find(n=>n.name===t).class,C=()=>{const t=c.components.filter(e=>e.dataDetection),n=c.plugins.filter(e=>e.dataDetection);return[...t,...n].map(e=>e.name)},A=()=>{document.querySelectorAll("[data-ax]").forEach(n=>{let e=n.dataset.ax;if(e=e[0].toUpperCase()+e.slice(1).toLowerCase(),!C().includes(e)){console.error(`[Axentix] Error: ${e} component doesn't exist. 
 Did you forget to register him ?`,n);return}try{const o=b(e);new o(`#${n.id}`)}catch(o){console.error("[Axentix] Data: Unable to load "+e,o)}})},$=()=>{try{new Axentix.Axentix("all")}catch(t){console.error("[Axentix] Unable to auto init.",t)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&$(),A()});const y=()=>"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0,E=()=>!!window.PointerEvent&&"maxTouchPoints"in window.navigator&&window.navigator.maxTouchPoints>=0,L=()=>y()?"touch":E()?"pointer":"mouse",v=()=>Math.random().toString().split(".")[1];let m="";const x={},g={},T=t=>{const n=v(),e=document.createElement("div"),o=document.createElement("div"),a=t.tagName.toLowerCase();return t.setAttribute("data-waves-id",n),o.classList.add("data-waves-item-inner"),o.setAttribute("data-waves-id",n),e.classList.add("data-waves-box"),e.setAttribute("data-waves-id",n),e.appendChild(o),x[n]=t,g[n]=e,["img","video"].includes(a)?t.parentNode.appendChild(e):t.appendChild(e),e},P=({id:t,size:n,x:e,y:o,container:a,item:s,target:l},d)=>{const i=document.createElement("span");let r=`height:${n}px;
           width:${n}px;
           left:${e}px;
           top:${o}px;`;return d&&(r+=`${p("waves-color")}: ${d}`),i.setAttribute("data-waves-id",t),i.classList.add("data-waves-item"),i.setAttribute("style",r),i.addEventListener("animationend",()=>{a.removeChild(i),!a.children.length&&s&&(s.parentNode&&s.parentNode.removeChild(s),l.removeAttribute("data-waves-id"),delete g[t],delete x[t])},{once:!0}),i},D=(t,n,e,o)=>{const{top:a,left:s,width:l,height:d}=o.getBoundingClientRect(),i=t-s,r=n-a;let u=g[e];u||(u=T(o)),e=u.getAttribute("data-waves-id")||v();const h=u.children[0],R=f(f(Math.max(s+l-t,t-s),2)+f(Math.max(a+d-n,n-a),2),.5)*2;return{id:e,size:R,x:i,y:r,container:h,item:u,target:o}},M=(t,n)=>{const{left:e,top:o,width:a,height:s}=t.getBoundingClientRect(),{left:l,top:d}=n.getBoundingClientRect(),{borderRadius:i,zIndex:r}=window.getComputedStyle(t);return`left:${e-l}px;
          top:${o-d}px;
          height:${s}px;
          width:${a}px;
          border-radius:${i||"0"};
          z-index:${r};`},N=(t,n)=>{const e=x[n];return e||(t.getAttribute("data-waves")!==null?t:t.closest("[data-waves]")||null)},W=t=>{const n=t.target,e=n.getAttribute("data-waves-id")||"",o=N(n,e);if(!o||o.getAttribute("disabled"))return;const a=o.getAttribute("data-waves");let{clientX:s,clientY:l}=t;if(m==="touch"){const h=t.touches[0];s=h.clientX,l=h.clientY}const d=D(s,l,e,o),i=P(d,a),{container:r,item:u}=d;r.setAttribute("style",M(o,u)),r.appendChild(i)},w=()=>{m=L();const t=`${m}${m==="touch"?"start":"down"}`;window.addEventListener(t,W)};return document.addEventListener("DOMContentLoaded",()=>w()),w});