masonry-simple 1.5.0 → 2.0.0

package/README.md

@@ -27,34 +27,34 @@ import MasonrySimple from 'masonry-simple'
 
 ### Usage
 ```javascript
-const masonrySimple = new MasonrySimple({
-	container: '.masonry'
+const masonry = MasonrySimple.init({
+  container: masonryRef.value
 })
 ```
 ```HTML
 <div class="masonry">
-	<div class="masonry__item">
-		...
-	</div>
-	<div class="masonry__item">
-		...
-	</div>
-	...
+  <div class="masonry__item">
+    ...
+  </div>
+  <div class="masonry__item">
+    ...
+  </div>
+  ...
 </div>
 ```
 ```SCSS
 .masonry {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-	grid-auto-flow: dense;
-	grid-gap: 10px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-auto-flow: dense;
+  grid-gap: 10px;
 }
 ```
 <br>
 
 ### Destroy
 ```javascript
-masonrySimple.destroy()
+masonry.destroy()
 ```
 <br>
 

package/dist/index.js

@@ -8,30 +8,41 @@ function $parcel$export(e, n, v, s) {
 $parcel$defineInteropFlag(module.exports);
 
 $parcel$export(module.exports, "default", () => $4fa36e821943b400$export$2e2bcd8739ae039);
-class $4fa36e821943b400$export$2e2bcd8739ae039 {
-    constructor(options = {}){
-        const { container: container = ".masonry" } = options;
+class $4fa36e821943b400$var$MasonrySimple {
+    constructor(){
         this.grid = null;
         this.gridItems = [];
         this.resizeObserver = null;
-        this.container = container;
-        this.grid = this.container instanceof HTMLElement ? this.container : document.querySelector(this.container);
-        if (!this.grid) return;
-        this.gridItems = this.grid.children.length ? Array.from(this.grid.children) : [];
-        this.grid.style.contain = "layout";
-        this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));
-        this.resizeObserver.observe(this.grid);
-        this.resizeAllItems();
+        this.rowHeight = 1;
+        this.requestAnimationFrameId = null;
+        this.pendingResize = false;
     }
-    resizeItem(item, rowHeight, rowGap) {
-        const rowSpan = Math.ceil((item.clientHeight + rowGap) / (rowHeight + rowGap));
-        item.style.gridRowEnd = "span " + rowSpan;
+    resizeItem(item) {
+        const rowSpan = Math.ceil((item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
+        const newItem = item;
+        newItem.style.gridRowEnd = `span ${rowSpan}`;
     }
     resizeAllItems() {
-        const rowHeight = 1;
-        const rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue("grid-row-gap"), 10);
-        this.grid.style.alignItems = "start";
-        this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
+        if (this.pendingResize) return;
+        this.pendingResize = true;
+        if (!this.requestAnimationFrameId) this.requestAnimationFrameId = requestAnimationFrame(()=>{
+            this.grid.style.alignItems = "start";
+            this.gridItems.forEach((item)=>this.resizeItem(item));
+            this.pendingResize = false;
+            this.requestAnimationFrameId = null;
+        });
+    }
+    static init(options = {}) {
+        const { container: container = ".masonry" } = options;
+        const masonry = new $4fa36e821943b400$var$MasonrySimple();
+        masonry.grid = container instanceof HTMLElement ? container : document.querySelector(container);
+        if (!masonry.grid) return;
+        masonry.gridItems = masonry.grid.children.length ? Array.from(masonry.grid.children) : [];
+        masonry.grid.style.contain = "layout";
+        masonry.rowGap = parseInt(window.getComputedStyle(masonry.grid).getPropertyValue("grid-row-gap"), 10);
+        masonry.resizeObserver = new ResizeObserver(masonry.resizeAllItems.bind(masonry));
+        masonry.resizeObserver.observe(masonry.grid);
+        masonry.resizeAllItems();
     }
     destroy() {
         if (this.resizeObserver) {
@@ -41,10 +52,12 @@ class $4fa36e821943b400$export$2e2bcd8739ae039 {
         this.grid.style.contain = "";
         this.grid.style.alignItems = "";
         this.gridItems.forEach((item)=>{
-            item.style.gridRowEnd = "";
+            const newItem = item;
+            newItem.style.gridRowEnd = "";
         });
     }
 }
+var $4fa36e821943b400$export$2e2bcd8739ae039 = $4fa36e821943b400$var$MasonrySimple;
 
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAe;IACd,YAAY,UAAU,CAAC,CAAC,CAAE;QACzB,MAAM,aAAE,YAAY,YAAY,GAAG;QAEnC,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,iBAAiB;QACtB,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,OACJ,IAAI,CAAC,qBAAqB,cACvB,IAAI,CAAC,YACL,SAAS,cAAc,IAAI,CAAC;QAEhC,IAAI,CAAC,IAAI,CAAC,MAAM;QAEhB,IAAI,CAAC,YAAY,IAAI,CAAC,KAAK,SAAS,SACjC,MAAM,KAAK,IAAI,CAAC,KAAK,YACrB,EAAE;QACL,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,iBAAiB,IAAI,eACzB,IAAI,CAAC,eAAe,KAAK,IAAI;QAE9B,IAAI,CAAC,eAAe,QAAQ,IAAI,CAAC;QAEjC,IAAI,CAAC;IACN;IAEA,WAAW,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE;QACnC,MAAM,UAAU,KAAK,KACpB,AAAC,CAAA,KAAK,eAAe,MAAK,IAAM,CAAA,YAAY,MAAK;QAGlD,KAAK,MAAM,aAAa,UAAU;IACnC;IAEA,iBAAiB;QAChB,MAAM,YAAY;QAClB,MAAM,SAAS,SACd,OAAO,iBAAiB,IAAI,CAAC,MAAM,iBAAiB,iBACpD;QAGD,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC,OACvB,IAAI,CAAC,WAAW,MAAM,WAAW;IAEnC;IAEA,UAAU;QACT,IAAI,IAAI,CAAC,gBAAgB;YACxB,IAAI,CAAC,eAAe,UAAU,IAAI,CAAC;YACnC,IAAI,CAAC,iBAAiB;QACvB;QAEA,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC;YACvB,KAAK,MAAM,aAAa;QACzB;IACD;AACD","sources":["src/index.js"],"sourcesContent":["export default class MasonrySimple {\r\n\tconstructor(options = {}) {\r\n\t\tconst { container = '.masonry' } = options\r\n\r\n\t\tthis.grid = null\r\n\t\tthis.gridItems = []\r\n\t\tthis.resizeObserver = null\r\n\t\tthis.container = container\r\n\t\tthis.grid =\r\n\t\t\tthis.container instanceof HTMLElement\r\n\t\t\t\t? this.container\r\n\t\t\t\t: document.querySelector(this.container)\r\n\r\n\t\tif (!this.grid) return\r\n\r\n\t\tthis.gridItems = this.grid.children.length\r\n\t\t\t? Array.from(this.grid.children)\r\n\t\t\t: []\r\n\t\tthis.grid.style.contain = 'layout'\r\n\t\tthis.resizeObserver = new ResizeObserver(\r\n\t\t\tthis.resizeAllItems.bind(this)\r\n\t\t)\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\r\n\t\tthis.resizeAllItems()\r\n\t}\r\n\r\n\tresizeItem(item, rowHeight, rowGap) {\r\n\t\tconst rowSpan = Math.ceil(\r\n\t\t\t(item.clientHeight + rowGap) / (rowHeight + rowGap)\r\n\t\t)\r\n\r\n\t\titem.style.gridRowEnd = 'span ' + rowSpan\r\n\t}\r\n\r\n\tresizeAllItems() {\r\n\t\tconst rowHeight = 1\r\n\t\tconst rowGap = parseInt(\r\n\t\t\twindow.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'),\r\n\t\t\t10\r\n\t\t)\r\n\r\n\t\tthis.grid.style.alignItems = 'start'\r\n\t\tthis.gridItems.forEach((item) =>\r\n\t\t\tthis.resizeItem(item, rowHeight, rowGap)\r\n\t\t)\r\n\t}\r\n\r\n\tdestroy() {\r\n\t\tif (this.resizeObserver) {\r\n\t\t\tthis.resizeObserver.unobserve(this.grid)\r\n\t\t\tthis.resizeObserver = null\r\n\t\t}\r\n\r\n\t\tthis.grid.style.contain = ''\r\n\t\tthis.grid.style.alignItems = ''\r\n\t\tthis.gridItems.forEach((item) => {\r\n\t\t\titem.style.gridRowEnd = ''\r\n\t\t})\r\n\t}\r\n}"],"names":[],"version":3,"file":"index.js.map"}
+{"mappings":";;;;;;;;;;AAAA,MAAM;IACJ,aAAc;QACZ,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,iBAAiB;QACtB,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,0BAA0B;QAC/B,IAAI,CAAC,gBAAgB;IACvB;IAEA,WAAW,IAAI,EAAE;QACf,MAAM,UAAU,KAAK,KACnB,AAAC,CAAA,KAAK,eAAe,IAAI,CAAC,MAAK,IAAM,CAAA,IAAI,CAAC,YAAY,IAAI,CAAC,MAAK;QAGlE,MAAM,UAAU;QAEhB,QAAQ,MAAM,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC;IAC9C;IAEA,iBAAiB;QACf,IAAI,IAAI,CAAC,eAAe;QAExB,IAAI,CAAC,gBAAgB;QAErB,IAAI,CAAC,IAAI,CAAC,yBACR,IAAI,CAAC,0BAA0B,sBAAsB;YACnD,IAAI,CAAC,KAAK,MAAM,aAAa;YAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC,OAAS,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,0BAA0B;QACjC;IAEJ;IAEA,OAAO,KAAK,UAAU,CAAC,CAAC,EAAE;QACxB,MAAM,aAAE,YAAY,YAAY,GAAG;QACnC,MAAM,UAAU,IAAI;QAEpB,QAAQ,OAAO,qBAAqB,cAAc,YAAY,SAAS,cAAc;QAErF,IAAI,CAAC,QAAQ,MAAM;QAEnB,QAAQ,YAAY,QAAQ,KAAK,SAAS,SACtC,MAAM,KAAK,QAAQ,KAAK,YACxB,EAAE;QACN,QAAQ,KAAK,MAAM,UAAU;QAE7B,QAAQ,SAAS,SACf,OAAO,iBAAiB,QAAQ,MAAM,iBAAiB,iBACvD;QAGF,QAAQ,iBAAiB,IAAI,eAC3B,QAAQ,eAAe,KAAK;QAG9B,QAAQ,eAAe,QAAQ,QAAQ;QACvC,QAAQ;IACV;IAEA,UAAU;QACR,IAAI,IAAI,CAAC,gBAAgB;YACvB,IAAI,CAAC,eAAe,UAAU,IAAI,CAAC;YACnC,IAAI,CAAC,iBAAiB;QACxB;QAEA,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC;YACtB,MAAM,UAAU;YAChB,QAAQ,MAAM,aAAa;QAC7B;IACF;AACF;IAEA,2CAAe","sources":["src/index.js"],"sourcesContent":["class MasonrySimple {\n  constructor() {\n    this.grid = null;\n    this.gridItems = [];\n    this.resizeObserver = null;\n    this.rowHeight = 1;\n    this.requestAnimationFrameId = null;\n    this.pendingResize = false;\n  }\n\n  resizeItem(item) {\n    const rowSpan = Math.ceil(\n      (item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap),\n    );\n\n    const newItem = item;\n\n    newItem.style.gridRowEnd = `span ${rowSpan}`;\n  }\n\n  resizeAllItems() {\n    if (this.pendingResize) return;\n\n    this.pendingResize = true;\n\n    if (!this.requestAnimationFrameId) {\n      this.requestAnimationFrameId = requestAnimationFrame(() => {\n        this.grid.style.alignItems = 'start';\n        this.gridItems.forEach((item) => this.resizeItem(item));\n        this.pendingResize = false;\n        this.requestAnimationFrameId = null;\n      });\n    }\n  }\n\n  static init(options = {}) {\n    const { container = '.masonry' } = options;\n    const masonry = new MasonrySimple();\n\n    masonry.grid = container instanceof HTMLElement ? container : document.querySelector(container);\n\n    if (!masonry.grid) return;\n\n    masonry.gridItems = masonry.grid.children.length\n      ? Array.from(masonry.grid.children)\n      : [];\n    masonry.grid.style.contain = 'layout';\n\n    masonry.rowGap = parseInt(\n      window.getComputedStyle(masonry.grid).getPropertyValue('grid-row-gap'),\n      10,\n    );\n\n    masonry.resizeObserver = new ResizeObserver(\n      masonry.resizeAllItems.bind(masonry),\n    );\n\n    masonry.resizeObserver.observe(masonry.grid);\n    masonry.resizeAllItems();\n  }\n\n  destroy() {\n    if (this.resizeObserver) {\n      this.resizeObserver.unobserve(this.grid);\n      this.resizeObserver = null;\n    }\n\n    this.grid.style.contain = '';\n    this.grid.style.alignItems = '';\n    this.gridItems.forEach((item) => {\n      const newItem = item;\n      newItem.style.gridRowEnd = '';\n    });\n  }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.js.map"}

package/dist/index.module.js

@@ -1,27 +1,38 @@
-class $cf838c15c8b009ba$export$2e2bcd8739ae039 {
-    constructor(options = {}){
-        const { container: container = ".masonry" } = options;
+class $cf838c15c8b009ba$var$MasonrySimple {
+    constructor(){
         this.grid = null;
         this.gridItems = [];
         this.resizeObserver = null;
-        this.container = container;
-        this.grid = this.container instanceof HTMLElement ? this.container : document.querySelector(this.container);
-        if (!this.grid) return;
-        this.gridItems = this.grid.children.length ? Array.from(this.grid.children) : [];
-        this.grid.style.contain = "layout";
-        this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));
-        this.resizeObserver.observe(this.grid);
-        this.resizeAllItems();
+        this.rowHeight = 1;
+        this.requestAnimationFrameId = null;
+        this.pendingResize = false;
     }
-    resizeItem(item, rowHeight, rowGap) {
-        const rowSpan = Math.ceil((item.clientHeight + rowGap) / (rowHeight + rowGap));
-        item.style.gridRowEnd = "span " + rowSpan;
+    resizeItem(item) {
+        const rowSpan = Math.ceil((item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
+        const newItem = item;
+        newItem.style.gridRowEnd = `span ${rowSpan}`;
     }
     resizeAllItems() {
-        const rowHeight = 1;
-        const rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue("grid-row-gap"), 10);
-        this.grid.style.alignItems = "start";
-        this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
+        if (this.pendingResize) return;
+        this.pendingResize = true;
+        if (!this.requestAnimationFrameId) this.requestAnimationFrameId = requestAnimationFrame(()=>{
+            this.grid.style.alignItems = "start";
+            this.gridItems.forEach((item)=>this.resizeItem(item));
+            this.pendingResize = false;
+            this.requestAnimationFrameId = null;
+        });
+    }
+    static init(options = {}) {
+        const { container: container = ".masonry" } = options;
+        const masonry = new $cf838c15c8b009ba$var$MasonrySimple();
+        masonry.grid = container instanceof HTMLElement ? container : document.querySelector(container);
+        if (!masonry.grid) return;
+        masonry.gridItems = masonry.grid.children.length ? Array.from(masonry.grid.children) : [];
+        masonry.grid.style.contain = "layout";
+        masonry.rowGap = parseInt(window.getComputedStyle(masonry.grid).getPropertyValue("grid-row-gap"), 10);
+        masonry.resizeObserver = new ResizeObserver(masonry.resizeAllItems.bind(masonry));
+        masonry.resizeObserver.observe(masonry.grid);
+        masonry.resizeAllItems();
     }
     destroy() {
         if (this.resizeObserver) {
@@ -31,10 +42,12 @@ class $cf838c15c8b009ba$export$2e2bcd8739ae039 {
         this.grid.style.contain = "";
         this.grid.style.alignItems = "";
         this.gridItems.forEach((item)=>{
-            item.style.gridRowEnd = "";
+            const newItem = item;
+            newItem.style.gridRowEnd = "";
         });
     }
 }
+var $cf838c15c8b009ba$export$2e2bcd8739ae039 = $cf838c15c8b009ba$var$MasonrySimple;
 
 
 export {$cf838c15c8b009ba$export$2e2bcd8739ae039 as default};

package/dist/index.module.js.map

@@ -1 +1 @@
-{"mappings":"AAAe;IACd,YAAY,UAAU,CAAC,CAAC,CAAE;QACzB,MAAM,aAAE,YAAY,YAAY,GAAG;QAEnC,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,iBAAiB;QACtB,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,OACJ,IAAI,CAAC,qBAAqB,cACvB,IAAI,CAAC,YACL,SAAS,cAAc,IAAI,CAAC;QAEhC,IAAI,CAAC,IAAI,CAAC,MAAM;QAEhB,IAAI,CAAC,YAAY,IAAI,CAAC,KAAK,SAAS,SACjC,MAAM,KAAK,IAAI,CAAC,KAAK,YACrB,EAAE;QACL,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,iBAAiB,IAAI,eACzB,IAAI,CAAC,eAAe,KAAK,IAAI;QAE9B,IAAI,CAAC,eAAe,QAAQ,IAAI,CAAC;QAEjC,IAAI,CAAC;IACN;IAEA,WAAW,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE;QACnC,MAAM,UAAU,KAAK,KACpB,AAAC,CAAA,KAAK,eAAe,MAAK,IAAM,CAAA,YAAY,MAAK;QAGlD,KAAK,MAAM,aAAa,UAAU;IACnC;IAEA,iBAAiB;QAChB,MAAM,YAAY;QAClB,MAAM,SAAS,SACd,OAAO,iBAAiB,IAAI,CAAC,MAAM,iBAAiB,iBACpD;QAGD,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC,OACvB,IAAI,CAAC,WAAW,MAAM,WAAW;IAEnC;IAEA,UAAU;QACT,IAAI,IAAI,CAAC,gBAAgB;YACxB,IAAI,CAAC,eAAe,UAAU,IAAI,CAAC;YACnC,IAAI,CAAC,iBAAiB;QACvB;QAEA,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC;YACvB,KAAK,MAAM,aAAa;QACzB;IACD;AACD","sources":["src/index.js"],"sourcesContent":["export default class MasonrySimple {\r\n\tconstructor(options = {}) {\r\n\t\tconst { container = '.masonry' } = options\r\n\r\n\t\tthis.grid = null\r\n\t\tthis.gridItems = []\r\n\t\tthis.resizeObserver = null\r\n\t\tthis.container = container\r\n\t\tthis.grid =\r\n\t\t\tthis.container instanceof HTMLElement\r\n\t\t\t\t? this.container\r\n\t\t\t\t: document.querySelector(this.container)\r\n\r\n\t\tif (!this.grid) return\r\n\r\n\t\tthis.gridItems = this.grid.children.length\r\n\t\t\t? Array.from(this.grid.children)\r\n\t\t\t: []\r\n\t\tthis.grid.style.contain = 'layout'\r\n\t\tthis.resizeObserver = new ResizeObserver(\r\n\t\t\tthis.resizeAllItems.bind(this)\r\n\t\t)\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\r\n\t\tthis.resizeAllItems()\r\n\t}\r\n\r\n\tresizeItem(item, rowHeight, rowGap) {\r\n\t\tconst rowSpan = Math.ceil(\r\n\t\t\t(item.clientHeight + rowGap) / (rowHeight + rowGap)\r\n\t\t)\r\n\r\n\t\titem.style.gridRowEnd = 'span ' + rowSpan\r\n\t}\r\n\r\n\tresizeAllItems() {\r\n\t\tconst rowHeight = 1\r\n\t\tconst rowGap = parseInt(\r\n\t\t\twindow.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'),\r\n\t\t\t10\r\n\t\t)\r\n\r\n\t\tthis.grid.style.alignItems = 'start'\r\n\t\tthis.gridItems.forEach((item) =>\r\n\t\t\tthis.resizeItem(item, rowHeight, rowGap)\r\n\t\t)\r\n\t}\r\n\r\n\tdestroy() {\r\n\t\tif (this.resizeObserver) {\r\n\t\t\tthis.resizeObserver.unobserve(this.grid)\r\n\t\t\tthis.resizeObserver = null\r\n\t\t}\r\n\r\n\t\tthis.grid.style.contain = ''\r\n\t\tthis.grid.style.alignItems = ''\r\n\t\tthis.gridItems.forEach((item) => {\r\n\t\t\titem.style.gridRowEnd = ''\r\n\t\t})\r\n\t}\r\n}"],"names":[],"version":3,"file":"index.module.js.map"}
+{"mappings":"AAAA,MAAM;IACJ,aAAc;QACZ,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,iBAAiB;QACtB,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,0BAA0B;QAC/B,IAAI,CAAC,gBAAgB;IACvB;IAEA,WAAW,IAAI,EAAE;QACf,MAAM,UAAU,KAAK,KACnB,AAAC,CAAA,KAAK,eAAe,IAAI,CAAC,MAAK,IAAM,CAAA,IAAI,CAAC,YAAY,IAAI,CAAC,MAAK;QAGlE,MAAM,UAAU;QAEhB,QAAQ,MAAM,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC;IAC9C;IAEA,iBAAiB;QACf,IAAI,IAAI,CAAC,eAAe;QAExB,IAAI,CAAC,gBAAgB;QAErB,IAAI,CAAC,IAAI,CAAC,yBACR,IAAI,CAAC,0BAA0B,sBAAsB;YACnD,IAAI,CAAC,KAAK,MAAM,aAAa;YAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC,OAAS,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,0BAA0B;QACjC;IAEJ;IAEA,OAAO,KAAK,UAAU,CAAC,CAAC,EAAE;QACxB,MAAM,aAAE,YAAY,YAAY,GAAG;QACnC,MAAM,UAAU,IAAI;QAEpB,QAAQ,OAAO,qBAAqB,cAAc,YAAY,SAAS,cAAc;QAErF,IAAI,CAAC,QAAQ,MAAM;QAEnB,QAAQ,YAAY,QAAQ,KAAK,SAAS,SACtC,MAAM,KAAK,QAAQ,KAAK,YACxB,EAAE;QACN,QAAQ,KAAK,MAAM,UAAU;QAE7B,QAAQ,SAAS,SACf,OAAO,iBAAiB,QAAQ,MAAM,iBAAiB,iBACvD;QAGF,QAAQ,iBAAiB,IAAI,eAC3B,QAAQ,eAAe,KAAK;QAG9B,QAAQ,eAAe,QAAQ,QAAQ;QACvC,QAAQ;IACV;IAEA,UAAU;QACR,IAAI,IAAI,CAAC,gBAAgB;YACvB,IAAI,CAAC,eAAe,UAAU,IAAI,CAAC;YACnC,IAAI,CAAC,iBAAiB;QACxB;QAEA,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC;YACtB,MAAM,UAAU;YAChB,QAAQ,MAAM,aAAa;QAC7B;IACF;AACF;IAEA,2CAAe","sources":["src/index.js"],"sourcesContent":["class MasonrySimple {\n  constructor() {\n    this.grid = null;\n    this.gridItems = [];\n    this.resizeObserver = null;\n    this.rowHeight = 1;\n    this.requestAnimationFrameId = null;\n    this.pendingResize = false;\n  }\n\n  resizeItem(item) {\n    const rowSpan = Math.ceil(\n      (item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap),\n    );\n\n    const newItem = item;\n\n    newItem.style.gridRowEnd = `span ${rowSpan}`;\n  }\n\n  resizeAllItems() {\n    if (this.pendingResize) return;\n\n    this.pendingResize = true;\n\n    if (!this.requestAnimationFrameId) {\n      this.requestAnimationFrameId = requestAnimationFrame(() => {\n        this.grid.style.alignItems = 'start';\n        this.gridItems.forEach((item) => this.resizeItem(item));\n        this.pendingResize = false;\n        this.requestAnimationFrameId = null;\n      });\n    }\n  }\n\n  static init(options = {}) {\n    const { container = '.masonry' } = options;\n    const masonry = new MasonrySimple();\n\n    masonry.grid = container instanceof HTMLElement ? container : document.querySelector(container);\n\n    if (!masonry.grid) return;\n\n    masonry.gridItems = masonry.grid.children.length\n      ? Array.from(masonry.grid.children)\n      : [];\n    masonry.grid.style.contain = 'layout';\n\n    masonry.rowGap = parseInt(\n      window.getComputedStyle(masonry.grid).getPropertyValue('grid-row-gap'),\n      10,\n    );\n\n    masonry.resizeObserver = new ResizeObserver(\n      masonry.resizeAllItems.bind(masonry),\n    );\n\n    masonry.resizeObserver.observe(masonry.grid);\n    masonry.resizeAllItems();\n  }\n\n  destroy() {\n    if (this.resizeObserver) {\n      this.resizeObserver.unobserve(this.grid);\n      this.resizeObserver = null;\n    }\n\n    this.grid.style.contain = '';\n    this.grid.style.alignItems = '';\n    this.gridItems.forEach((item) => {\n      const newItem = item;\n      newItem.style.gridRowEnd = '';\n    });\n  }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masonry-simple",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "description": "Responsive masonry grid",
   "author": "ux-ui.pro",
   "license": "MIT",
@@ -17,9 +17,13 @@
   "scripts": {
     "serve": "parcel watch",
     "build": "parcel build",
-    "clean": "rm -rf dist .parcel-cache"
+    "clean": "rm -rf dist .parcel-cache",
+    "lint": "eslint --ext .js,.vue --report-unused-disable-directives ."
   },
   "devDependencies": {
+    "eslint": "^7.32.0 || ^8.2.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.25.2",
     "parcel": "~2.9.3"
   },
   "keywords": [
@@ -29,4 +33,4 @@
     "gallery",
     "images"
   ]
-}
+}

package/src/index.js

@@ -1,61 +1,77 @@
-export default class MasonrySimple {
-	constructor(options = {}) {
-		const { container = '.masonry' } = options
-
-		this.grid = null
-		this.gridItems = []
-		this.resizeObserver = null
-		this.container = container
-		this.grid =
-			this.container instanceof HTMLElement
-				? this.container
-				: document.querySelector(this.container)
-
-		if (!this.grid) return
-
-		this.gridItems = this.grid.children.length
-			? Array.from(this.grid.children)
-			: []
-		this.grid.style.contain = 'layout'
-		this.resizeObserver = new ResizeObserver(
-			this.resizeAllItems.bind(this)
-		)
-		this.resizeObserver.observe(this.grid)
-
-		this.resizeAllItems()
-	}
-
-	resizeItem(item, rowHeight, rowGap) {
-		const rowSpan = Math.ceil(
-			(item.clientHeight + rowGap) / (rowHeight + rowGap)
-		)
-
-		item.style.gridRowEnd = 'span ' + rowSpan
-	}
-
-	resizeAllItems() {
-		const rowHeight = 1
-		const rowGap = parseInt(
-			window.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'),
-			10
-		)
-
-		this.grid.style.alignItems = 'start'
-		this.gridItems.forEach((item) =>
-			this.resizeItem(item, rowHeight, rowGap)
-		)
-	}
-
-	destroy() {
-		if (this.resizeObserver) {
-			this.resizeObserver.unobserve(this.grid)
-			this.resizeObserver = null
-		}
-
-		this.grid.style.contain = ''
-		this.grid.style.alignItems = ''
-		this.gridItems.forEach((item) => {
-			item.style.gridRowEnd = ''
-		})
-	}
-}
+class MasonrySimple {
+  constructor() {
+    this.grid = null;
+    this.gridItems = [];
+    this.resizeObserver = null;
+    this.rowHeight = 1;
+    this.requestAnimationFrameId = null;
+    this.pendingResize = false;
+  }
+
+  resizeItem(item) {
+    const rowSpan = Math.ceil(
+      (item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap),
+    );
+
+    const newItem = item;
+
+    newItem.style.gridRowEnd = `span ${rowSpan}`;
+  }
+
+  resizeAllItems() {
+    if (this.pendingResize) return;
+
+    this.pendingResize = true;
+
+    if (!this.requestAnimationFrameId) {
+      this.requestAnimationFrameId = requestAnimationFrame(() => {
+        this.grid.style.alignItems = 'start';
+        this.gridItems.forEach((item) => this.resizeItem(item));
+        this.pendingResize = false;
+        this.requestAnimationFrameId = null;
+      });
+    }
+  }
+
+  static init(options = {}) {
+    const { container = '.masonry' } = options;
+    const masonry = new MasonrySimple();
+
+    masonry.grid = container instanceof HTMLElement ? container : document.querySelector(container);
+
+    if (!masonry.grid) return;
+
+    masonry.gridItems = masonry.grid.children.length
+      ? Array.from(masonry.grid.children)
+      : [];
+    masonry.grid.style.contain = 'layout';
+
+    masonry.rowGap = parseInt(
+      window.getComputedStyle(masonry.grid).getPropertyValue('grid-row-gap'),
+      10,
+    );
+
+    masonry.resizeObserver = new ResizeObserver(
+      masonry.resizeAllItems.bind(masonry),
+    );
+
+    masonry.resizeObserver.observe(masonry.grid);
+    masonry.resizeAllItems();
+  }
+
+  destroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.unobserve(this.grid);
+      this.resizeObserver = null;
+    }
+
+    this.grid.style.contain = '';
+    this.grid.style.alignItems = '';
+    this.gridItems.forEach((item) => {
+      const newItem = item;
+      newItem.style.gridRowEnd = '';
+    });
+  }
+}
+
+export default MasonrySimple;