brique/lib/index.esm.js

Create cascading layout grids like Pinterest with the power of CSS Grid Layout.

var u=Object.defineProperty;var a=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var h=(s,e,i)=>e in s?u(s,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[e]=i,d=(s,e)=>{for(var i in e||(e={}))v.call(e,i)&&h(s,i,e[i]);if(a)for(var i of a(e))c.call(e,i)&&h(s,i,e[i]);return s};var p=class{constructor(e,i=p.DEFAULT_OPTIONS,t=!0){this.gridElement=e;if(this.options=i,this.resizeObserver=new ResizeObserver(this.drawItems.bind(this)),this.resizeEvent=this.drawItems.bind(this),this.childrenObserver=new MutationObserver(this.updateItems.bind(this)),this.childrenObserver.observe(this.gridElement,{childList:!0,subtree:!0}),this.setItemElements(),this.drawGridContainer(),t?this.updateOnResize():this.drawItems(),t){this.updateOnResize(),window.ResizeObserver||this.drawItems();return}this.drawItems()}update(){this.setItemElements(),this.draw()}updateItems(){this.setItemElements(),this.drawItems()}updateOnResize(){this.observeGridResize||(window.ResizeObserver?this.resizeObserver.observe(this.gridElement):window.addEventListener("resize",this.resizeEvent),this.observeGridResize=!0)}stopUpdateOnResize(){!this.observeGridResize||(window.ResizeObserver?this.resizeObserver.disconnect():window.removeEventListener("resize",this.resizeEvent))}getOptions(){return this.options}setOptions(e){this.options=e,this.draw()}updateOptions(e){this.options=d(d({},this.options),e),this.draw()}destroy(){this.childrenObserver.disconnect(),this.stopUpdateOnResize()}draw(){this.drawGridContainer(),this.drawItems()}drawGridContainer(){let e=this.gridElement.style;e.display="grid",e.gridTemplateColumns=`repeat(${this.options.columns}, 1fr)`,e.gridAutoRows="1px",e.columnGap=this.options.columnGap||"",e.rowGap="0"}drawItems(){if(!!this.itemElements)for(let e=0,i=this.itemElements.length;e<i;e++){let t=this.itemElements[e],r=t.style;r.gridRowEnd=void 0;let n=0;if(this.options.columns<=e){let l=this.options.rowGap;r.marginTop=l||"0",n=parseInt(l)||0}else r.marginTop&&r.removeProperty("margin-top");let o=t.children[0];o&&(o.style.marginTop="0",n-=o.offsetTop-t.offsetTop),r.gridRowEnd=`span ${n+t.scrollHeight+t.clientHeight}`}}setItemElements(){this.itemElements=[].slice.call(this.gridElement.children)}},m=p;m.DEFAULT_OPTIONS={columns:3,columnGap:"32px",rowGap:"32px"};export{m as Brique};
//# sourceMappingURL=index.esm.js.map