@flexilla/alpine-navbar
Version:
AlpineJS plugin for easily adding interactive navbar
2 lines (1 loc) • 1.58 kB
JavaScript
(()=>{var l=(e,o=document.body)=>o.querySelector(e);var c=e=>typeof e=="string"?l(e):e;var m=(e,o)=>{for(let[n,a]of Object.entries(o))e.setAttribute(n,a)};var f=e=>{let{trigger:o,targets:n,onToggle:a}=e,i=o?c(o):null,t=!0,r=s=>{for(let u of n){let g=c(u.element);m(g,u.attributes[s])}t=s==="initial",i&&(i.ariaExpanded=t?"false":"true"),a?.({isExpanded:!t})};r("initial");let d=()=>r(t?"to":"initial");return i?.addEventListener("click",d),{toInitial:()=>r("initial"),toAction:()=>r("to"),toggle:()=>r(t?"to":"initial"),get state(){return t?"initial":"to"},destroy:()=>{i?.removeEventListener("click",d)}}},p=({navbarElement:e,onToggle:o})=>{let n=typeof e=="string"?l(e):e;if(!(n instanceof HTMLElement))return;let a=n.getAttribute("id"),i=l(`[data-nav-trigger][data-toggle-nav=${a}]`),t=l(`[data-nav-overlay][data-navbar-id=${a}]`),r=[{element:n,attributes:{initial:{"data-state":"close"},to:{"data-state":"open"}}}];t&&(r=[...r,{element:t,attributes:{initial:{"data-state":"close"},to:{"data-state":"open"}}}]);let d=f({trigger:i,targets:r,onToggle:o}),s=()=>{d.toInitial()};return n.addEventListener("click",s),t instanceof HTMLElement&&!t.hasAttribute("data-static-overlay")&&t.addEventListener("click",s),{cleanup:()=>{n.removeEventListener("click",s),d.destroy(),t instanceof HTMLElement&&!t.hasAttribute("data-static-overlay")&&t.removeEventListener("click",s)},close:s,toggle:d.toggle}};function E(e){e.directive("navbar",(o,{},{cleanup:n})=>{let a=p({navbarElement:o});n(()=>{a.cleanup()})})}var v=E;document.addEventListener("alpine:init",()=>{v(window.Alpine)});})();