@paintface_danny/alpine-match-heights
Version:
Alpine.js plugin to match heights of elements
2 lines (1 loc) • 1.18 kB
JavaScript
function f(s){let i=new Map,u=new MutationObserver(s.debounce(a,100)),d=new IntersectionObserver(s.debounce(e=>{e.some(r=>r.isIntersecting)&&a()},100)),g=s.debounce(a,100);function a(){i.forEach((e,r)=>{let o=r.includes("|row");h(e,o)})}function w(e){let r=e.getBoundingClientRect();return Math.floor(r.top+window.scrollY)}function h(e,r=!1){if(e?.size)if(e.forEach(o=>o.style.height="auto"),r){let o=new Map;e.forEach(t=>{let n=w(t);o.has(n)||o.set(n,new Set),o.get(n).add(t)}),o.forEach(t=>{let n=Math.max(...[...t].map(c=>c.offsetHeight));t.forEach(c=>c.style.height=`${n}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:r,modifiers:o})=>{let t=`${r||"default"}${o.includes("row")?"|row":""}`;return i.has(t)||i.set(t,new Set),i.get(t).add(e),u.observe(e,{childList:!0,subtree:!0,characterData:!0,attributes:!0}),d.observe(e),queueMicrotask(()=>h(i.get(t),t.includes("|row"))),()=>{let n=i.get(t);n&&(n.delete(e),n.size===0&&i.delete(t)),d.unobserve(e),u.unobserve(e)}})}var l=f;export{l as default};