masonry-simple 2.0.0 → 2.0.1
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.map +1 -1
- package/dist/index.module.js.map +1 -1
- package/package.json +1 -1
- package/src/index.js +15 -12
package/README.md
CHANGED
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;
|
|
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;QAChB,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,OACN,qBAAqB,cACjB,YACA,SAAS,cAAc;QAE7B,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;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 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 =\n 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 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\n newItem.style.gridRowEnd = \"\";\n });\n }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.js.map"}
|
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;
|
|
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;QAChB,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,OACN,qBAAqB,cACjB,YACA,SAAS,cAAc;QAE7B,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;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 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 =\n 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 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\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
|
@@ -10,11 +10,10 @@ class MasonrySimple {
|
|
|
10
10
|
|
|
11
11
|
resizeItem(item) {
|
|
12
12
|
const rowSpan = Math.ceil(
|
|
13
|
-
(item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap)
|
|
13
|
+
(item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap)
|
|
14
14
|
);
|
|
15
15
|
|
|
16
16
|
const newItem = item;
|
|
17
|
-
|
|
18
17
|
newItem.style.gridRowEnd = `span ${rowSpan}`;
|
|
19
18
|
}
|
|
20
19
|
|
|
@@ -25,7 +24,7 @@ class MasonrySimple {
|
|
|
25
24
|
|
|
26
25
|
if (!this.requestAnimationFrameId) {
|
|
27
26
|
this.requestAnimationFrameId = requestAnimationFrame(() => {
|
|
28
|
-
this.grid.style.alignItems =
|
|
27
|
+
this.grid.style.alignItems = "start";
|
|
29
28
|
this.gridItems.forEach((item) => this.resizeItem(item));
|
|
30
29
|
this.pendingResize = false;
|
|
31
30
|
this.requestAnimationFrameId = null;
|
|
@@ -34,25 +33,28 @@ class MasonrySimple {
|
|
|
34
33
|
}
|
|
35
34
|
|
|
36
35
|
static init(options = {}) {
|
|
37
|
-
const { container =
|
|
36
|
+
const { container = ".masonry" } = options;
|
|
38
37
|
const masonry = new MasonrySimple();
|
|
39
38
|
|
|
40
|
-
masonry.grid =
|
|
39
|
+
masonry.grid =
|
|
40
|
+
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
|
: [];
|
|
47
|
-
masonry.grid.style.contain =
|
|
49
|
+
masonry.grid.style.contain = "layout";
|
|
48
50
|
|
|
49
51
|
masonry.rowGap = parseInt(
|
|
50
|
-
window.getComputedStyle(masonry.grid).getPropertyValue(
|
|
51
|
-
10
|
|
52
|
+
window.getComputedStyle(masonry.grid).getPropertyValue("grid-row-gap"),
|
|
53
|
+
10
|
|
52
54
|
);
|
|
53
55
|
|
|
54
56
|
masonry.resizeObserver = new ResizeObserver(
|
|
55
|
-
masonry.resizeAllItems.bind(masonry)
|
|
57
|
+
masonry.resizeAllItems.bind(masonry)
|
|
56
58
|
);
|
|
57
59
|
|
|
58
60
|
masonry.resizeObserver.observe(masonry.grid);
|
|
@@ -65,11 +67,12 @@ class MasonrySimple {
|
|
|
65
67
|
this.resizeObserver = null;
|
|
66
68
|
}
|
|
67
69
|
|
|
68
|
-
this.grid.style.contain =
|
|
69
|
-
this.grid.style.alignItems =
|
|
70
|
+
this.grid.style.contain = "";
|
|
71
|
+
this.grid.style.alignItems = "";
|
|
70
72
|
this.gridItems.forEach((item) => {
|
|
71
73
|
const newItem = item;
|
|
72
|
-
|
|
74
|
+
|
|
75
|
+
newItem.style.gridRowEnd = "";
|
|
73
76
|
});
|
|
74
77
|
}
|
|
75
78
|
}
|