UNPKG

@n8d/htwoo-core

Version:

hTWOo is a Fluent Design Framework purely in HTML and CSS

2 lines (1 loc) • 1.46 kB
"use strict";const e=[],t=(t,o)=>{const l=t.target.parentElement;if(!l)return;const r=Array.from(l.querySelectorAll(".hoo-overflow > *"));r.length>0&&((t,o,l,r)=>{let n=e[r].filter((e=>e.overallWidth>t-40)),i=e[r].filter((e=>e.overallWidth<t-40));const c=l.querySelector(".hoo-buttonicon-overflow .hoo-buttonflyout");if(c){if(c&&c.children.length<n.length)for(let e=0;e<n.length;e++){const t=n[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>n.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,t.target,o)},o=e=>{e.forEach(((e,o)=>{e.target.children&&(l(e.target.children,o),t(e,o))}))},l=(t,o)=>{let l=0;if(e.length<=o){e[o]=[];for(let r=0;r<t.length;r++){const n=t[r];if(l+=n.clientWidth,!n.classList.contains("hoo-buttonicon-overflow")){const t={chlld:n,ref:"ref-"+o+"-"+r,width:n.clientWidth,overallWidth:l};n.dataset.ref=t.ref,e[o].push(t)}}}};exports.init=()=>{const e=document.querySelectorAll(".hoo-overflow");if(0!==e.length){const t=new ResizeObserver(o);e.forEach((e=>{t.observe(e)}))}};