wc-waterfall/dist/index.iife.js

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

(function(y){"use strict";var I="wc-waterfall{position:relative;display:block;box-sizing:border-box!important;overflow:unset!important}wc-waterfall>*{position:absolute;box-sizing:border-box}";const v=t=>t.nodeType==1,L=(t,n)=>{const e=t();class s extends HTMLElement{constructor(){super(),this.$props=t();const o={};for(const l in this.$props)o[l]={get:()=>this.$props[l],set:i=>{this.$props[l]=n!=null&&n[l]?n[l](i):w(e,l,i),this.render()}};Object.defineProperties(this,o)}static get observedAttributes(){return Object.keys(e).filter(o=>x(e[o]))}attributeChangedCallback(o,l,i){this.$props[o]=n!=null&&n[o]?n[o](i):w(e,o,i)}}return s},w=(t,n,e)=>{const s=t[n];return x(s)?{number:r=>Number(r),string:r=>String(r),boolean:r=>r!=null&&r!="false"}[typeof s](e):void 0},x=t=>{const n=typeof t;return n=="number"||n=="string"||n=="boolean"};function N(t){let n=0;for(let e=0;e<t.length;e++)n=t[n]<=t[e]?n:e;return n}function _(t,{getW:n,setW:e,getH:s,setH:r,getPad:o,setX:l,setY:i,getChildren:f},{cols:c,gap:a}){const[u,W]=Array.isArray(a)?a:[a,a],[A,z,C,H]=o(t),p=f(t),O=p.length;if(O){const $=(n(t)-u*(c-1)-(H+z))/c;Array.prototype.forEach.call(p,d=>e(d,$));const P=Array.prototype.map.call(p,d=>s(d)),h=Array(c).fill(A);for(let d=0;d<O;d++){const k=p[d],m=N(h);i(k,h[m]),l(k,H+($+u)*m),h[m]+=P[d]+W}r(t,Math.max(...h)-W+C)}else r(t,A+C)}const b=Symbol(),g=Symbol();function M(t,n){let e,s,r;function o(){e=new ResizeObserver(c=>c.some(({target:a})=>a[g]!=a.offsetWidth||a[b]!=a.offsetHeight)&&f()),e.observe(t),Array.prototype.forEach.call(t.children,c=>e.observe(c)),s=new MutationObserver(c=>{c.forEach(a=>{a.addedNodes.forEach(u=>v(u)&&e.observe(u)),a.removedNodes.forEach(u=>v(u)&&e.unobserve(u))}),f()}),s.observe(t,{childList:!0,attributes:!1}),r=new MutationObserver(()=>f()),r.observe(t,{childList:!1,attributes:!0}),f()}function l(){e.disconnect(),s.disconnect(),r.disconnect()}let i=!1;function f(){i||(i=!0,requestAnimationFrame(()=>{n(),t[g]=t.offsetWidth,t[b]=t.offsetHeight,r.takeRecords(),i=!1}))}return{relayout:f,mount:o,unmount:l}}const S=(t,n)=>M(t,()=>{_(t,{getW:e=>e.offsetWidth,setW:(e,s)=>e.style.width=s+"px",getH:e=>(e[g]=e.offsetWidth,e[b]=e.offsetHeight),setH:(e,s)=>e.style.height=s+"px",getPad:e=>{const s=getComputedStyle(e);return[parseInt(s.paddingTop),parseInt(s.paddingRight),parseInt(s.paddingBottom),parseInt(s.paddingLeft)]},setX:(e,s)=>e.style.left=s+"px",setY:(e,s)=>e.style.top=s+"px",getChildren:e=>e.children},n)});document.head.appendChild(Object.assign(document.createElement("style"),{innerText:I}));const T=()=>({cols:2,gap:4}),j={gap:t=>typeof t=="string"?t.includes(" ")?t.split(" ").map(Number):Number(t):t};class E extends L(T,j){constructor(){super()}connectedCallback(){this._layout=S(this,this),this._layout.mount()}disconnectedCallback(){this._layout.unmount()}render(){var n;(n=this._layout)==null||n.relayout()}}return customElements.get("wc-waterfall")||customElements.define("wc-waterfall",E),y.WaterfallElement=E,y})({});