masonry-simple 2.0.1 → 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/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 +17 -14
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;
|
|
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;
|
|
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
|
@@ -10,10 +10,11 @@ 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
|
+
|
|
17
18
|
newItem.style.gridRowEnd = `span ${rowSpan}`;
|
|
18
19
|
}
|
|
19
20
|
|
|
@@ -24,7 +25,7 @@ class MasonrySimple {
|
|
|
24
25
|
|
|
25
26
|
if (!this.requestAnimationFrameId) {
|
|
26
27
|
this.requestAnimationFrameId = requestAnimationFrame(() => {
|
|
27
|
-
this.grid.style.alignItems =
|
|
28
|
+
this.grid.style.alignItems = 'start';
|
|
28
29
|
this.gridItems.forEach((item) => this.resizeItem(item));
|
|
29
30
|
this.pendingResize = false;
|
|
30
31
|
this.requestAnimationFrameId = null;
|
|
@@ -33,32 +34,34 @@ class MasonrySimple {
|
|
|
33
34
|
}
|
|
34
35
|
|
|
35
36
|
static init(options = {}) {
|
|
36
|
-
const { container =
|
|
37
|
+
const { container = '.masonry' } = options;
|
|
37
38
|
const masonry = new MasonrySimple();
|
|
38
39
|
|
|
39
|
-
masonry.grid =
|
|
40
|
-
container
|
|
41
|
-
|
|
42
|
-
: document.querySelector(container);
|
|
40
|
+
masonry.grid = container instanceof HTMLElement
|
|
41
|
+
? container
|
|
42
|
+
: document.querySelector(container);
|
|
43
43
|
|
|
44
44
|
if (!masonry.grid) return;
|
|
45
45
|
|
|
46
46
|
masonry.gridItems = masonry.grid.children.length
|
|
47
47
|
? Array.from(masonry.grid.children)
|
|
48
48
|
: [];
|
|
49
|
-
|
|
49
|
+
|
|
50
|
+
masonry.grid.style.contain = 'layout';
|
|
50
51
|
|
|
51
52
|
masonry.rowGap = parseInt(
|
|
52
|
-
window.getComputedStyle(masonry.grid).getPropertyValue(
|
|
53
|
-
10
|
|
53
|
+
window.getComputedStyle(masonry.grid).getPropertyValue('grid-row-gap'),
|
|
54
|
+
10,
|
|
54
55
|
);
|
|
55
56
|
|
|
56
57
|
masonry.resizeObserver = new ResizeObserver(
|
|
57
|
-
masonry.resizeAllItems.bind(masonry)
|
|
58
|
+
masonry.resizeAllItems.bind(masonry),
|
|
58
59
|
);
|
|
59
60
|
|
|
60
61
|
masonry.resizeObserver.observe(masonry.grid);
|
|
61
62
|
masonry.resizeAllItems();
|
|
63
|
+
|
|
64
|
+
return masonry;
|
|
62
65
|
}
|
|
63
66
|
|
|
64
67
|
destroy() {
|
|
@@ -67,12 +70,12 @@ class MasonrySimple {
|
|
|
67
70
|
this.resizeObserver = null;
|
|
68
71
|
}
|
|
69
72
|
|
|
70
|
-
this.grid.style.contain =
|
|
71
|
-
this.grid.style.alignItems =
|
|
73
|
+
this.grid.style.contain = '';
|
|
74
|
+
this.grid.style.alignItems = '';
|
|
72
75
|
this.gridItems.forEach((item) => {
|
|
73
76
|
const newItem = item;
|
|
74
77
|
|
|
75
|
-
newItem.style.gridRowEnd =
|
|
78
|
+
newItem.style.gridRowEnd = '';
|
|
76
79
|
});
|
|
77
80
|
}
|
|
78
81
|
}
|