neu-axentix/dist/neu-axentix.min.js

The official Axentix neumorphism design implementation. Start using neumorphism shadows in 3 easy steps.

(function(r){typeof define=="function"&&define.amd?define(r):r()})(function(){"use strict";var r="";let c,i,d,a;const f=["neu-bordered","neu-flat","neu-pressed","neu-concave","neu-convex"],u=(e,n,t)=>{if(e.dataset[n]&&!f.includes(e.dataset[n])){console.error("[Neu-Axentix] Error: invalid classname on",e);return}if(n==="neuClick")if(e.neuActive){if(t.type==="mousedown"||t.type==="touchstart")return;e.neuActive=!1}else{if(t.type==="mouseup"||t.type==="mouseleave"||t.type==="touchend"||t.type==="touchmove")return;e.neuActive=!0}if(n==="neuHover")if(!e.neuActive&&t.type==="mouseenter")e.neuActive=!0;else{if(!e.neuActive&&t.type==="mouseleave")return;e.neuActive&&t.type==="mouseleave"&&(e.neuActive=!1)}const s=e.dataset[n];e.neuCurrentClass?(e.classList.remove(e.neuCurrentClass),e.dataset[n]=e.neuCurrentClass):e.dataset[n]="",s?(e.classList.add(s),e.neuCurrentClass=s):e.neuCurrentClass=""},o=e=>{const n=e.className.split(" "),t=n.filter(s=>f.includes(s));if(t.length>=2){const s=n.filter(v=>!t.includes(v));s.push(t[0]),e.className=s.join(" ")}e.neuCurrentClass=t[0]||""},l=()=>{c=document.querySelectorAll("[data-neu-click]"),i=document.querySelectorAll("[data-neu-focus]"),d=document.querySelectorAll("[data-neu-clicked]"),a=document.querySelectorAll("[data-neu-hover]"),d.forEach(e=>{o(e),e.toggleRef=u.bind(null,e,"neuClicked"),e.addEventListener("click",e.toggleRef)}),c.forEach(e=>{o(e),e.toggleRef=u.bind(null,e,"neuClick"),e.addEventListener("mousedown",e.toggleRef),e.addEventListener("mouseleave",e.toggleRef),e.addEventListener("mouseup",e.toggleRef),"ontouchstart"in document.documentElement&&(e.addEventListener("touchstart",e.toggleRef),e.addEventListener("touchend",e.toggleRef))}),i.forEach(e=>{o(e),e.toggleRef=u.bind(null,e,"neuFocus"),e.addEventListener("focus",e.toggleRef),e.addEventListener("blur",e.toggleRef)}),a.forEach(e=>{o(e),e.toggleRef=u.bind(null,e,"neuHover"),e.addEventListener("mouseenter",e.toggleRef),e.addEventListener("mouseleave",e.toggleRef)})};document.addEventListener("DOMContentLoaded",l)});