@n8d/htwoo-core/dist/js/umd/htwoo.overflow.min.js

hTWOo is a Fluent Design Framework purely in HTML and CSS

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).htwoo=e.htwoo||{},e.htwoo.overflow={}))}(this,(function(e){"use strict";const t=[],o=(e,o)=>{const l=e.target.parentElement;if(!l)return;const n=Array.from(l.querySelectorAll(".hoo-overflow > *"));n.length>0&&((e,o,l,n)=>{let r=t[n].filter((t=>t.overallWidth>e-40)),i=t[n].filter((t=>t.overallWidth<e-40));const c=l.querySelector(".hoo-buttonicon-overflow .hoo-buttonflyout");if(c){if(c&&c.children.length<r.length)for(let e=0;e<r.length;e++){const t=r[e].ref,o=l.querySelector(`[data-ref="${t}"]`);if(o){let e=document.createElement("li");e.appendChild(o),c.appendChild(e)}}if(0!==c.children.length){const e=c.closest(".hoo-buttonicon-overflow");e&&e.classList.add("is-active")}else{const e=c.closest(".hoo-buttonicon-overflow");e&&e.classList.remove("is-active")}if(c&&c.children.length>r.length)for(let e=0;e<i.length;e++){const t=i[e].ref,o=c.querySelector(`[data-ref="${t}"]`);o&&l.appendChild(o)}for(let e=0;e<c.children.length;e++)0===c.children[e].children.length&&c.children[e].remove()}})(l.clientWidth,0,e.target,o)},l=e=>{e.forEach(((e,t)=>{e.target.children&&(n(e.target.children,t),o(e,t))}))},n=(e,o)=>{let l=0;if(t.length<=o){t[o]=[];for(let n=0;n<e.length;n++){const r=e[n];if(l+=r.clientWidth,!r.classList.contains("hoo-buttonicon-overflow")){const e={chlld:r,ref:"ref-"+o+"-"+n,width:r.clientWidth,overallWidth:l};r.dataset.ref=e.ref,t[o].push(e)}}}};e.init=()=>{const e=document.querySelectorAll(".hoo-overflow");if(0!==e.length){const t=new ResizeObserver(l);e.forEach((e=>{t.observe(e)}))}}}));