@crcong/wc-waterfall
Version:
wc-waterfall is a flow layout component written using web-component
2 lines (1 loc) • 2.84 kB
JavaScript
(function(m){"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=>{const o=t();class e extends HTMLElement{constructor(){super(),this.$props=t();const n={};for(const a in this.$props)n[a]={get:()=>this.$props[a],set:i=>{this.$props[a]=x(o,a,i),this.render()}};Object.defineProperties(this,n)}static get observedAttributes(){return Object.keys(o).filter(n=>w(o[n]))}attributeChangedCallback(n,a,i){i=x(o,n,i),this.$props[n]!==i&&(this.$props[n]=i)}}return e},x=(t,o,e)=>{const s=t[o];return w(s)?{number:n=>Number(n),string:n=>String(n),boolean:n=>n!=null&&n!="false"}[typeof s](e):void 0},w=t=>{const o=typeof t;return o=="number"||o=="string"||o=="boolean"};function _(t){let o=0;for(let e=0;e<t.length;e++)o=t[o]<=t[e]?o:e;return o}function M(t,{getW:o,setW:e,getH:s,setH:n,getPad:a,setX:i,setY:p,getChildren:d},l){const{cols:r}=l,c=l["gap-x"],W=l["gap-y"],[C,z,H,O]=a(t),f=d(t),$=f.length;if($){const k=(o(t)-c*(r-1)-(O+z))/r;Array.prototype.forEach.call(f,u=>e(u,k));const N=Array.prototype.map.call(f,u=>s(u)),h=Array(r).fill(C);for(let u=0;u<$;u++){const A=f[u],y=_(h);p(A,h[y]),i(A,O+(k+c)*y),h[y]+=N[u]+W}n(t,Math.max(...h)-W+H)}else n(t,C+H)}const b=Symbol(),g=Symbol();function S(t,o){let e,s,n;function a(){e=new ResizeObserver(l=>l.some(({target:r})=>r[g]!=r.offsetWidth||r[b]!=r.offsetHeight)&&d()),e.observe(t),Array.prototype.forEach.call(t.children,l=>e.observe(l)),s=new MutationObserver(l=>{l.forEach(r=>{r.addedNodes.forEach(c=>v(c)&&e.observe(c)),r.removedNodes.forEach(c=>v(c)&&e.unobserve(c))}),d()}),s.observe(t,{childList:!0,attributes:!1}),n=new MutationObserver(()=>d()),n.observe(t,{childList:!1,attributes:!0}),d()}function i(){e.disconnect(),s.disconnect(),n.disconnect()}let p=!1;function d(){p||(p=!0,requestAnimationFrame(()=>{o(),t[g]=t.offsetWidth,t[b]=t.offsetHeight,n.takeRecords(),p=!1}))}return{relayout:d,mount:a,unmount:i}}const T=(t,o)=>S(t,()=>{M(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},o)});document.head.appendChild(Object.assign(document.createElement("style"),{innerText:I}));const j=()=>({cols:2,"gap-x":4,"gap-y":4});class E extends L(j){constructor(){super()}connectedCallback(){this._layout=T(this,this),this._layout.mount()}disconnectedCallback(){this._layout.unmount()}render(){this.isConnected&&this._layout.relayout()}}return customElements.define("wc-waterfall",E),m.WaterfallElement=E,m})({});