wc-flow-layout/dist/index.iife.js

wc-flow-layout is a flow layout component written using web-component

(function(m){"use strict";function r(t,e,s,i){if(s==="a"&&!i)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return s==="m"?i:s==="a"?i.call(t):i?i.value:e.get(t)}function c(t,e,s,i,o){if(i==="m")throw new TypeError("Private method is not writable");if(i==="a"&&!o)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?t!==e||!o:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return i==="a"?o.call(t,s):o?o.value=s:e.set(t,s),s}function A(t,e){e===void 0&&(e={});var s=e.insertAt;if(!(!t||typeof document>"u")){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",s==="top"&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}var H=`wc-flow-layout {\r
  position: relative;\r
  display: block;\r
  box-sizing: content-box !important;\r
}\r
      \r
wc-flow-layout > * {\r
  position: absolute;\r
  box-sizing: border-box;\r
}\r
`;A(H);function M(t){let e=0;for(let s=0;s<t.length;s++)e=t[e]<=t[s]?e:s;return e}function P(t,{getW:e,setW:s,getH:i,setH:o,getPad:j,setX:O,setY:k,getChildren:I},{cols:w,gap:p}){const[_,L,E,x]=j(t),u=I(t),T=u.length;if(T){const W=(e(t)-p*(w-1)-(x+L))/w;Array.prototype.forEach.call(u,a=>s(a,W));const z=Array.prototype.map.call(u,a=>i(a)),g=Array(w).fill(_);for(let a=0;a<T;a++){const C=u[a],y=M(g);k(C,g[y]),O(C,x+(W+p)*y),g[y]+=z[a]+p}o(t,Math.max(...g)-p+E)}else o(t,_+E)}var b,n,f,l,d,v;class h extends HTMLElement{constructor(){super(),b.add(this),Object.defineProperty(this,"_fl_w",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"_fl_h",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),n.set(this,void 0),f.set(this,void 0),l.set(this,void 0),d.set(this,!1)}get gap(){return+(this.getAttribute("gap")||h.default_props.gap)}set gap(e){this.setAttribute("gap",e+"")}get cols(){return+(this.getAttribute("cols")||h.default_props.cols)}set cols(e){this.setAttribute("cols",e+"")}connectedCallback(){c(this,n,new ResizeObserver(e=>e.some(({target:s})=>s._fl_w!=s.offsetWidth||s._fl_h!=s.offsetHeight)&&this.relayout()),"f"),r(this,n,"f").observe(this),Array.prototype.forEach.call(this.children,e=>r(this,n,"f").observe(e)),this.relayout(),c(this,f,new MutationObserver(e=>{e.forEach(s=>{s.addedNodes.forEach(i=>i instanceof HTMLElement&&r(this,n,"f").observe(i)),s.removedNodes.forEach(i=>i instanceof HTMLElement&&r(this,n,"f").unobserve(i))}),this.relayout()}),"f"),r(this,f,"f").observe(this,{childList:!0,attributes:!1}),c(this,l,new MutationObserver(()=>this.relayout()),"f"),r(this,l,"f").observe(this,{childList:!1,attributes:!0})}disconnectedCallback(){r(this,n,"f").disconnect(),r(this,f,"f").disconnect(),r(this,l,"f").disconnect()}relayout(){r(this,d,"f")||(c(this,d,!0,"f"),requestAnimationFrame(()=>{r(this,b,"m",v).call(this),c(this,d,!1,"f")}))}}return n=new WeakMap,f=new WeakMap,l=new WeakMap,d=new WeakMap,b=new WeakSet,v=function(){P(this,{getW:t=>t.offsetWidth,setW:(t,e)=>t.style.width=e+"px",getH:t=>(t._fl_w=t.offsetWidth,t._fl_h=t.offsetHeight),setH:(t,e)=>t.style.height=e+"px",getPad:t=>{const e=getComputedStyle(t);return[parseInt(e.paddingTop),parseInt(e.paddingRight),-parseInt(e.paddingTop),parseInt(e.paddingLeft)]},setX:(t,e)=>t.style.left=e+"px",setY:(t,e)=>t.style.top=e+"px",getChildren:t=>t.children},{cols:this.cols,gap:this.gap}),this._fl_w=this.offsetWidth,this._fl_h=this.offsetHeight,r(this,l,"f").takeRecords()},Object.defineProperty(h,"default_props",{enumerable:!0,configurable:!0,writable:!0,value:Object.freeze({cols:2,gap:4})}),customElements.define("wc-flow-layout",h),m.FlowLayout=h,m})({});