brique/lib/index.js

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

var d=Object.defineProperty;var m=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var u=(t,e,i)=>e in t?d(t,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[e]=i,p=(t,e)=>{for(var i in e||(e={}))v.call(e,i)&&u(t,i,e[i]);if(m)for(var i of m(e))c.call(e,i)&&u(t,i,e[i]);return t};var b=t=>d(t,"__esModule",{value:!0});var w=(t,e)=>{b(t);for(var i in e)d(t,i,{get:e[i],enumerable:!0})};w(exports,{Brique:()=>l});var a=class{constructor(e,i=a.DEFAULT_OPTIONS,s=!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(),s?this.updateOnResize():this.drawItems(),s){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=p(p({},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 s=this.itemElements[e],r=s.style;r.gridRowEnd=void 0;let n=0;if(this.options.columns<=e){let h=this.options.rowGap;r.marginTop=h||"0",n=parseInt(h)||0}else r.marginTop&&r.removeProperty("margin-top");let o=s.children[0];o&&(o.style.marginTop="0",n-=o.offsetTop-s.offsetTop),r.gridRowEnd=`span ${n+s.scrollHeight+s.clientHeight}`}}setItemElements(){this.itemElements=[].slice.call(this.gridElement.children)}},l=a;l.DEFAULT_OPTIONS={columns:3,columnGap:"32px",rowGap:"32px"};0&&(module.exports={Brique});
//# sourceMappingURL=index.js.map