diff --git a/README.md b/README.md index 76eae79..44e27ab 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Minimalist dependency free Masonry layout library MiniMasonry is a **lightweight** dependency free Masonry layout. It will compute elements position in JavaScript and update their positions using CSS's **transform attribute**. This means positioning does not trigger browser layout and **use** the device's **GPU**. This also allows CSS animation during element positioning. -MiniMasonry is **responsive**, you give it a target width and it will adjust columns number and elements width. MiniMasonry will increase element width (until another column can fit in the layout) but will never reduce the target width. +MiniMasonry is **responsive** by default, you give it a target width and it will adjust columns number and elements width. MiniMasonry will increase element width (until another column can fit in the layout) but will never reduce the target width. ## Installation @@ -27,7 +27,7 @@ import MiniMasonry from "minimasonry"; ## Usage -To use MiniMasonry you should have a container **relatively positioned** with your elements as children. Those **children** elements must be **absolutely positioned**. +⚠️ To use MiniMasonry you should have a container **relatively positioned** with your elements as children. Those **children** elements must be **absolutely positioned**. Then you can initialise MiniMasonry : @@ -52,6 +52,7 @@ surroundingGutter (boolean)|true|Set left gutter on first columns and right gutt ultimateGutter (int)|5|Gutter applied when only 1 column can be displayed. direction (string)|"ltr"|Sorting direction, "ltr" or "rtl". wedge (boolean)|false|False will start to sort from center, true will start from left or right according to direction parameter. +responsive (boolean)|true|True will add a "resize" event listener on the window to redraw the masonry on window resize. This listener is throttled to 66ms (15fps). ## API @@ -60,9 +61,7 @@ Here is the list of available APIs : Name|Description ----|----------- layout()|If list has changed, trigger a relayout of the masonry. -destroy()|Remove the resize listener and set back container as it was before initialization. - -MiniMasonry will add a "resize" event listener on the window to redraw the masonry on window resize. This listener is throttled to 66ms (15fps). +destroy()|Remove the resize listener if any and set back container as it was before initialization. ## Example diff --git a/build/minimasonry.esm.js b/build/minimasonry.esm.js index 33d3c69..30e4ef4 100644 --- a/build/minimasonry.esm.js +++ b/build/minimasonry.esm.js @@ -20,7 +20,8 @@ var MiniMasonry = function(conf) { ultimateGutter: 5, surroundingGutter: true, direction: 'ltr', - wedge: false + wedge: false, + responsive: true, }; this.init(conf); @@ -38,12 +39,9 @@ MiniMasonry.prototype.init = function(conf) { if (this.conf.gutterX == null || this.conf.gutterY == null) { this.conf.gutterX = this.conf.gutterY = this.conf.gutter; } - this._currentGutterX = this.conf.gutterX; this._currentGutterY = this.conf.gutterY; - console.log(this._currentGutterX); - this._container = typeof this.conf.container == 'object' && this.conf.container.nodeName ? this.conf.container : document.querySelector(this.conf.container); @@ -52,11 +50,13 @@ MiniMasonry.prototype.init = function(conf) { throw new Error('Container not found or missing'); } - var onResize = this.resizeThrottler.bind(this); - window.addEventListener("resize", onResize); - this._removeListener = function() { - window.removeEventListener("resize", onResize); - }; + if(this.conf.responsive) { + var onResize = this.resizeThrottler.bind(this); + window.addEventListener("resize", onResize); + this._removeListener = function() { + window.removeEventListener("resize", onResize); + }; + } this.layout(); }; @@ -214,8 +214,8 @@ MiniMasonry.prototype.resizeThrottler = function() { if (this._container.clientWidth != this._width) { this.layout(); } - // The actualResizeHandler will execute at a rate of 30fps - }.bind(this), 33); + // The actualResizeHandler will execute at a rate of 15fps + }.bind(this), 66); } }; diff --git a/build/minimasonry.min.js b/build/minimasonry.min.js index a8a381a..d325176 100644 --- a/build/minimasonry.min.js +++ b/build/minimasonry.min.js @@ -1 +1 @@ -var MiniMasonry=function(){"use strict";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._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,console.log(this._currentGutterX),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);window.addEventListener("resize",e),this._removeListener=function(){window.removeEventListener("resize",e)},this.layout()},t.prototype.reset=function(){this._sizes=[],this._columns=[],this._count=null,this._width=this._container.clientWidth;var t=this.conf.baseWidth;this._widththis._sizes.length&&(n=this._sizes.length*(t+this._currentGutterX)-this._currentGutterX,!1===this.conf.wedge?e="ltr"==this.conf.direction?(this._width-n)/2:this._width-(this._width-n)/2:"ltr"==this.conf.direction||(e=this._width-this._currentGutterX));for(var o=0;othis._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(){"function"==typeof this._removeListener&&this._removeListener();for(var t=this._container.children,i=0;ithis._sizes.length&&(n=this._sizes.length*(t+this._currentGutterX)-this._currentGutterX,!1===this.conf.wedge?e="ltr"==this.conf.direction?(this._width-n)/2:this._width-(this._width-n)/2:"ltr"!=this.conf.direction&&(e=this._width-this._currentGutterX));for(var o=0;othis._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),66))},t.prototype.destroy=function(){"function"==typeof this._removeListener&&this._removeListener();for(var t=this._container.children,i=0;i; + baseWidth?: number; + gutter?: number; + gutterX?: number; + gutterY?: number; + minify?: boolean; + surroundingGutter?: boolean; + ultimateGutter?: number; + direction?: 'ltr' | 'rtl'; + wedge?: boolean; + responsive?: boolean; + } + + export default class MiniMasonry { + constructor(opts: MiniMasonryOptions); + + layout(): void; + destroy(): void; + } +} diff --git a/package.json b/package.json index dc0f533..8fb78b0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "minimasonry", "description": "Minimalist dependancy free Masonry layout library", - "version": "1.3.1", + "version": "1.4.0", "devDependencies": { "@rollup/plugin-commonjs": "^21.0.1", "rollup": "^2.58.3", @@ -13,6 +13,7 @@ }, "main": "build/minimasonry.min.js", "module": "build/minimasonry.esm.js", + "types": "index.d.ts", "dependencies": {}, "repository": { "type": "git", diff --git a/src/minimasonry.js b/src/minimasonry.js index d0d2a00..1fadacd 100644 --- a/src/minimasonry.js +++ b/src/minimasonry.js @@ -20,7 +20,8 @@ var MiniMasonry = function(conf) { ultimateGutter: 5, surroundingGutter: true, direction: 'ltr', - wedge: false + wedge: false, + responsive: true, }; this.init(conf); @@ -49,10 +50,12 @@ MiniMasonry.prototype.init = function(conf) { throw new Error('Container not found or missing'); } - var onResize = this.resizeThrottler.bind(this) - window.addEventListener("resize", onResize); - this._removeListener = function() { - window.removeEventListener("resize", onResize); + if(this.conf.responsive) { + var onResize = this.resizeThrottler.bind(this) + window.addEventListener("resize", onResize); + this._removeListener = function() { + window.removeEventListener("resize", onResize); + } } this.layout(); @@ -213,8 +216,8 @@ MiniMasonry.prototype.resizeThrottler = function() { if (this._container.clientWidth != this._width) { this.layout(); } - // The actualResizeHandler will execute at a rate of 30fps - }.bind(this), 33); + // The actualResizeHandler will execute at a rate of 15fps + }.bind(this), 66); } }