UNPKG

@dword-design/minimasonry

Version:

Minimalist dependancy free Masonry layout library

2 lines (1 loc) 4.5 kB
var MiniMasonry=(()=>{function t(t){return this._sizes=[],this._columns=[],this._container=null,this._count=null,this._width=0,this._removeListener=null,this._currentGutterX=null,this._currentGutterY=null,this._containerResizeObserver=null,this._childrenResizeObserver=null,this._mutationObserver=null,this._resizeTimeout=null,this.conf={baseWidth:255,gutterX:null,gutterY:null,gutter:10,container:null,minify:!0,ultimateGutter:5,surroundingGutter:!0,direction:"ltr",wedge:!1},this.init(t),this}return t.prototype.init=function(t){for(var i in this.conf)null!=t[i]&&(this.conf[i]=t[i]);if(null!=this.conf.gutterX&&null!=this.conf.gutterY||(this.conf.gutterX=this.conf.gutterY=this.conf.gutter),this._currentGutterX=this.conf.gutterX,this._currentGutterY=this.conf.gutterY,this._container="object"==typeof this.conf.container&&this.conf.container.nodeName?this.conf.container:document.querySelector(this.conf.container),!this._container)throw new Error("Container not found or missing");var e=this.resizeThrottler.bind(this);this._containerResizeObserver=new ResizeObserver(e),this._childrenResizeObserver=new ResizeObserver(()=>this.layout()),this._mutationObserver=new MutationObserver(()=>{this._childrenResizeObserver.disconnect();for(var t of this._container.children)this._childrenResizeObserver.observe(t)}),this._containerResizeObserver.observe(this._container),this._mutationObserver.observe(this._container,{childList:!0}),this.layout()},t.prototype.reset=function(){this._sizes=[],this._columns=[],this._count=null,this._width=this._container.clientWidth;var t=this.conf.baseWidth;this._width<t&&(this._width=t,this._container.style.minWidth=t+"px"),1==this.getCount()?(this._currentGutterX=this.conf.ultimateGutter,this._count=1):this._width<this.conf.baseWidth+2*this._currentGutterX?this._currentGutterX=0:this._currentGutterX=this.conf.gutterX},t.prototype.getCount=function(){return this.conf.surroundingGutter?Math.floor((this._width-this._currentGutterX)/(this.conf.baseWidth+this._currentGutterX)):Math.floor((this._width+this._currentGutterX)/(this.conf.baseWidth+this._currentGutterX))},t.prototype.computeWidth=function(){var t=this.conf.surroundingGutter?(this._width-this._currentGutterX)/this._count-this._currentGutterX:(this._width+this._currentGutterX)/this._count-this._currentGutterX;return t=Number.parseFloat(t.toFixed(2))},t.prototype.layout=function(){if(this._container){this.reset(),null==this._count&&(this._count=this.getCount());for(var t=this.computeWidth(),i=0;i<this._count;i++)this._columns[i]=0;for(var e,r,n=this._container.children,s=0;s<n.length;s++)n[s].style.width=t+"px",this._sizes[s]=n[s].clientHeight;e="ltr"==this.conf.direction?this.conf.surroundingGutter?this._currentGutterX:0:this._width-(this.conf.surroundingGutter?this._currentGutterX:0),this._count>this._sizes.length&&(r=this._sizes.length*(t+this._currentGutterX)-this._currentGutterX,!1===this.conf.wedge?e="ltr"==this.conf.direction?(this._width-r)/2:this._width-(this._width-r)/2:"ltr"!=this.conf.direction&&(e=this._width-this._currentGutterX));for(var h=0;h<n.length;h++){var o=this.conf.minify?this.getShortest():this.getNextColumn(h),u=0,c=(!this.conf.surroundingGutter&&o==this._columns.length||(u=this._currentGutterX),u="ltr"==this.conf.direction?e+(t+u)*o:e-(t+u)*o-t,this._columns[o]);n[h].style.left=Math.round(u)+"px",n[h].style.top=Math.round(c)+"px",this._columns[o]+=this._sizes[h]+(1<this._count?this.conf.gutterY:this.conf.ultimateGutter)}this._container.style.height=this._columns[this.getLongest()]-this._currentGutterY+"px"}else console.error("Container not found")},t.prototype.getNextColumn=function(t){return t%this._columns.length},t.prototype.getShortest=function(){for(var t=0,i=0;i<this._count;i++)this._columns[i]<this._columns[t]&&(t=i);return t},t.prototype.getLongest=function(){for(var t=0,i=0;i<this._count;i++)this._columns[i]>this._columns[t]&&(t=i);return t},t.prototype.resizeThrottler=function(){this._resizeTimeout||(this._resizeTimeout=setTimeout(function(){this._resizeTimeout=null,this._container.clientWidth!=this._width&&this.layout()}.bind(this),33))},t.prototype.destroy=function(){this._containerResizeObserver.disconnect(),this._childrenResizeObserver.disconnect(),this._mutationObserver.disconnect();for(var t=this._container.children,i=0;i<t.length;i++)t[i].style.removeProperty("width"),t[i].style.removeProperty("transform");this._container.style.removeProperty("height"),this._container.style.removeProperty("min-width")},t})();