v1.4.0

Author: zaosoula

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
 

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.config.responsive) {
+        var onResize = this.resizeThrottler.bind(this);
+        window.addEventListener("resize", onResize);
+        this._removeListener = function() {
+            window.removeEventListener("resize", onResize);
+        };    
+    }
 
     this.layout();
 };

build/minimasonry.min.js

@@ -0,0 +1,22 @@
+declare module 'minimasonry' {
+  export interface MiniMasonryOptions {
+    container: string | ReturnType<typeof document.querySelector>;
+    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;
+  }
+}

index.d.ts

@@ -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",

package.json

@@ -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.config.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);
     }
 }