@paintface_danny/alpine-match-heights/dist/alpine-match-heights.min.js

Alpine.js plugin to match heights of elements

(()=>{function f(s){let r=new Map,u=new MutationObserver(s.debounce(a,100)),d=new IntersectionObserver(s.debounce(e=>{e.some(n=>n.isIntersecting)&&a()},100)),g=s.debounce(a,100);function a(){r.forEach((e,n)=>{let o=n.includes("|row");h(e,o)})}function w(e){let n=e.getBoundingClientRect();return Math.floor(n.top+window.scrollY)}function h(e,n=!1){if(e?.size)if(e.forEach(o=>o.style.height="auto"),n){let o=new Map;e.forEach(t=>{let i=w(t);o.has(i)||o.set(i,new Set),o.get(i).add(t)}),o.forEach(t=>{let i=Math.max(...[...t].map(c=>c.offsetHeight));t.forEach(c=>c.style.height=`${i}px`)})}else{let o=Math.max(...[...e].map(t=>t.offsetHeight));e.forEach(t=>t.style.height=`${o}px`)}}window.addEventListener("resize",g),document.addEventListener("alpine:initialized",a),s.directive("match-height",(e,{expression:n,modifiers:o})=>{let t=`${n||"default"}${o.includes("row")?"|row":""}`;return r.has(t)||r.set(t,new Set),r.get(t).add(e),u.observe(e,{childList:!0,subtree:!0,characterData:!0,attributes:!0}),d.observe(e),queueMicrotask(()=>h(r.get(t),t.includes("|row"))),()=>{let i=r.get(t);i&&(i.delete(e),i.size===0&&r.delete(t)),d.unobserve(e),u.unobserve(e)}})}document.addEventListener("alpine:init",()=>window.Alpine.plugin(f));})();