masonry-simple 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +1 -0
- package/dist/index.module.js.map +1 -1
- package/package.json +1 -1
- package/src/index.js +7 -1
package/README.md
CHANGED
package/dist/index.js
CHANGED
|
@@ -43,6 +43,7 @@ class $4fa36e821943b400$var$MasonrySimple {
|
|
|
43
43
|
masonry.resizeObserver = new ResizeObserver(masonry.resizeAllItems.bind(masonry));
|
|
44
44
|
masonry.resizeObserver.observe(masonry.grid);
|
|
45
45
|
masonry.resizeAllItems();
|
|
46
|
+
return masonry;
|
|
46
47
|
}
|
|
47
48
|
destroy() {
|
|
48
49
|
if (this.resizeObserver) {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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,cAChC,YACA,SAAS,cAAc;QAE3B,IAAI,CAAC,QAAQ,MAAM;QAEnB,QAAQ,YAAY,QAAQ,KAAK,SAAS,SACtC,MAAM,KAAK,QAAQ,KAAK,YACxB,EAAE;QAEN,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;QAER,OAAO;IACT;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;YAEhB,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\n ? container\n : 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\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 return masonry;\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\n newItem.style.gridRowEnd = '';\n });\n }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -33,6 +33,7 @@ class $cf838c15c8b009ba$var$MasonrySimple {
|
|
|
33
33
|
masonry.resizeObserver = new ResizeObserver(masonry.resizeAllItems.bind(masonry));
|
|
34
34
|
masonry.resizeObserver.observe(masonry.grid);
|
|
35
35
|
masonry.resizeAllItems();
|
|
36
|
+
return masonry;
|
|
36
37
|
}
|
|
37
38
|
destroy() {
|
|
38
39
|
if (this.resizeObserver) {
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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,cAChC,YACA,SAAS,cAAc;QAE3B,IAAI,CAAC,QAAQ,MAAM;QAEnB,QAAQ,YAAY,QAAQ,KAAK,SAAS,SACtC,MAAM,KAAK,QAAQ,KAAK,YACxB,EAAE;QAEN,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;QAER,OAAO;IACT;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;YAEhB,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\n ? container\n : 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\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 return masonry;\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\n newItem.style.gridRowEnd = '';\n });\n }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.module.js.map"}
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -37,13 +37,16 @@ class MasonrySimple {
|
|
|
37
37
|
const { container = '.masonry' } = options;
|
|
38
38
|
const masonry = new MasonrySimple();
|
|
39
39
|
|
|
40
|
-
masonry.grid = container instanceof HTMLElement
|
|
40
|
+
masonry.grid = container instanceof HTMLElement
|
|
41
|
+
? container
|
|
42
|
+
: document.querySelector(container);
|
|
41
43
|
|
|
42
44
|
if (!masonry.grid) return;
|
|
43
45
|
|
|
44
46
|
masonry.gridItems = masonry.grid.children.length
|
|
45
47
|
? Array.from(masonry.grid.children)
|
|
46
48
|
: [];
|
|
49
|
+
|
|
47
50
|
masonry.grid.style.contain = 'layout';
|
|
48
51
|
|
|
49
52
|
masonry.rowGap = parseInt(
|
|
@@ -57,6 +60,8 @@ class MasonrySimple {
|
|
|
57
60
|
|
|
58
61
|
masonry.resizeObserver.observe(masonry.grid);
|
|
59
62
|
masonry.resizeAllItems();
|
|
63
|
+
|
|
64
|
+
return masonry;
|
|
60
65
|
}
|
|
61
66
|
|
|
62
67
|
destroy() {
|
|
@@ -69,6 +74,7 @@ class MasonrySimple {
|
|
|
69
74
|
this.grid.style.alignItems = '';
|
|
70
75
|
this.gridItems.forEach((item) => {
|
|
71
76
|
const newItem = item;
|
|
77
|
+
|
|
72
78
|
newItem.style.gridRowEnd = '';
|
|
73
79
|
});
|
|
74
80
|
}
|