masonry-simple 2.1.0 → 2.2.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 +17 -29
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +17 -29
- package/dist/index.module.js.map +1 -1
- package/package.json +1 -1
- package/src/index.js +20 -49
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
[](https://github.com/ux-ui-pro/masonry-simple)
|
|
8
8
|
[](https://www.npmjs.org/package/masonry-simple)
|
|
9
9
|
|
|
10
|
-
<sup>
|
|
10
|
+
<sup>500B gzipped</sup>
|
|
11
11
|
<h3><a href="https://l6nln6.csb.app/">Demo</a></h3>
|
|
12
12
|
|
|
13
13
|
</div>
|
package/dist/index.js
CHANGED
|
@@ -10,48 +10,36 @@ $parcel$defineInteropFlag(module.exports);
|
|
|
10
10
|
$parcel$export(module.exports, "default", () => $4fa36e821943b400$export$2e2bcd8739ae039);
|
|
11
11
|
class $4fa36e821943b400$var$MasonrySimple {
|
|
12
12
|
constructor(){
|
|
13
|
-
this.
|
|
13
|
+
this.container = null;
|
|
14
14
|
this.gridItems = [];
|
|
15
|
-
this.resizeObserver = null;
|
|
16
15
|
this.rowHeight = 1;
|
|
17
|
-
this.
|
|
18
|
-
this.
|
|
19
|
-
}
|
|
20
|
-
resizeItem(item) {
|
|
21
|
-
const rowSpan = Math.ceil((item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
|
|
22
|
-
const newItem = item;
|
|
23
|
-
newItem.style.gridRowEnd = `span ${rowSpan}`;
|
|
16
|
+
this.rowGap = 0;
|
|
17
|
+
this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));
|
|
24
18
|
}
|
|
25
19
|
resizeAllItems() {
|
|
26
|
-
|
|
27
|
-
this.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
this.pendingResize = false;
|
|
32
|
-
this.requestAnimationFrameId = null;
|
|
20
|
+
this.container.style.alignItems = "start";
|
|
21
|
+
this.gridItems.forEach((item)=>{
|
|
22
|
+
const rowSpan = Math.ceil((item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
|
|
23
|
+
const newItem = item;
|
|
24
|
+
newItem.style.gridRowEnd = `span ${rowSpan}`;
|
|
33
25
|
});
|
|
34
26
|
}
|
|
35
27
|
static init(options = {}) {
|
|
36
28
|
const { container: container = ".masonry" } = options;
|
|
37
29
|
const masonry = new $4fa36e821943b400$var$MasonrySimple();
|
|
38
|
-
masonry.
|
|
39
|
-
if (!masonry.
|
|
40
|
-
masonry.gridItems =
|
|
41
|
-
masonry.
|
|
42
|
-
masonry.rowGap = parseInt(
|
|
43
|
-
masonry.resizeObserver
|
|
44
|
-
masonry.resizeObserver.observe(masonry.grid);
|
|
30
|
+
masonry.container = container instanceof HTMLElement ? container : document.querySelector(container);
|
|
31
|
+
if (!masonry.container) return;
|
|
32
|
+
masonry.gridItems = Array.from(masonry.container.children);
|
|
33
|
+
masonry.container.style.contain = "layout";
|
|
34
|
+
masonry.rowGap = parseInt(getComputedStyle(masonry.container).rowGap, 10);
|
|
35
|
+
masonry.resizeObserver.observe(masonry.container);
|
|
45
36
|
masonry.resizeAllItems();
|
|
46
37
|
return masonry;
|
|
47
38
|
}
|
|
48
39
|
destroy() {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
this.grid.style.contain = "";
|
|
54
|
-
this.grid.style.alignItems = "";
|
|
40
|
+
this.resizeObserver.unobserve(this.container);
|
|
41
|
+
this.container.style.contain = "";
|
|
42
|
+
this.container.style.alignItems = "";
|
|
55
43
|
this.gridItems.forEach((item)=>{
|
|
56
44
|
const newItem = item;
|
|
57
45
|
newItem.style.gridRowEnd = "";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAA,MAAM;IACJ,aAAc;QACZ,IAAI,CAAC,
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAA,MAAM;IACJ,aAAc;QACZ,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,SAAS;QACd,IAAI,CAAC,iBAAiB,IAAI,eAAe,IAAI,CAAC,eAAe,KAAK,IAAI;IACxE;IAEA,iBAAiB;QACf,IAAI,CAAC,UAAU,MAAM,aAAa;QAClC,IAAI,CAAC,UAAU,QAAQ,CAAC;YACtB,MAAM,UAAU,KAAK,KACnB,AAAC,CAAA,KAAK,eAAe,IAAI,CAAC,MAAK,IAAM,CAAA,IAAI,CAAC,YAAY,IAAI,CAAC,MAAK;YAGlE,MAAM,UAAU;YAEhB,QAAQ,MAAM,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC;QAC9C;IACF;IAEA,OAAO,KAAK,UAAU,CAAC,CAAC,EAAE;QACxB,MAAM,aAAE,YAAY,YAAY,GAAG;QACnC,MAAM,UAAU,IAAI;QAEpB,QAAQ,YAAY,qBAAqB,cACrC,YACA,SAAS,cAAc;QAE3B,IAAI,CAAC,QAAQ,WAAW;QAExB,QAAQ,YAAY,MAAM,KAAK,QAAQ,UAAU;QACjD,QAAQ,UAAU,MAAM,UAAU;QAElC,QAAQ,SAAS,SAAS,iBAAiB,QAAQ,WAAW,QAAQ;QAEtE,QAAQ,eAAe,QAAQ,QAAQ;QACvC,QAAQ;QAER,OAAO;IACT;IAEA,UAAU;QACR,IAAI,CAAC,eAAe,UAAU,IAAI,CAAC;QAEnC,IAAI,CAAC,UAAU,MAAM,UAAU;QAC/B,IAAI,CAAC,UAAU,MAAM,aAAa;QAClC,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.container = null;\n this.gridItems = [];\n this.rowHeight = 1;\n this.rowGap = 0;\n this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));\n }\n\n resizeAllItems() {\n this.container.style.alignItems = 'start';\n this.gridItems.forEach((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\n static init(options = {}) {\n const { container = '.masonry' } = options;\n const masonry = new MasonrySimple();\n\n masonry.container = container instanceof HTMLElement\n ? container\n : document.querySelector(container);\n\n if (!masonry.container) return;\n\n masonry.gridItems = Array.from(masonry.container.children);\n masonry.container.style.contain = 'layout';\n\n masonry.rowGap = parseInt(getComputedStyle(masonry.container).rowGap, 10);\n\n masonry.resizeObserver.observe(masonry.container);\n masonry.resizeAllItems();\n\n return masonry;\n }\n\n destroy() {\n this.resizeObserver.unobserve(this.container);\n\n this.container.style.contain = '';\n this.container.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
|
@@ -1,47 +1,35 @@
|
|
|
1
1
|
class $cf838c15c8b009ba$var$MasonrySimple {
|
|
2
2
|
constructor(){
|
|
3
|
-
this.
|
|
3
|
+
this.container = null;
|
|
4
4
|
this.gridItems = [];
|
|
5
|
-
this.resizeObserver = null;
|
|
6
5
|
this.rowHeight = 1;
|
|
7
|
-
this.
|
|
8
|
-
this.
|
|
9
|
-
}
|
|
10
|
-
resizeItem(item) {
|
|
11
|
-
const rowSpan = Math.ceil((item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
|
|
12
|
-
const newItem = item;
|
|
13
|
-
newItem.style.gridRowEnd = `span ${rowSpan}`;
|
|
6
|
+
this.rowGap = 0;
|
|
7
|
+
this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));
|
|
14
8
|
}
|
|
15
9
|
resizeAllItems() {
|
|
16
|
-
|
|
17
|
-
this.
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
this.pendingResize = false;
|
|
22
|
-
this.requestAnimationFrameId = null;
|
|
10
|
+
this.container.style.alignItems = "start";
|
|
11
|
+
this.gridItems.forEach((item)=>{
|
|
12
|
+
const rowSpan = Math.ceil((item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
|
|
13
|
+
const newItem = item;
|
|
14
|
+
newItem.style.gridRowEnd = `span ${rowSpan}`;
|
|
23
15
|
});
|
|
24
16
|
}
|
|
25
17
|
static init(options = {}) {
|
|
26
18
|
const { container: container = ".masonry" } = options;
|
|
27
19
|
const masonry = new $cf838c15c8b009ba$var$MasonrySimple();
|
|
28
|
-
masonry.
|
|
29
|
-
if (!masonry.
|
|
30
|
-
masonry.gridItems =
|
|
31
|
-
masonry.
|
|
32
|
-
masonry.rowGap = parseInt(
|
|
33
|
-
masonry.resizeObserver
|
|
34
|
-
masonry.resizeObserver.observe(masonry.grid);
|
|
20
|
+
masonry.container = container instanceof HTMLElement ? container : document.querySelector(container);
|
|
21
|
+
if (!masonry.container) return;
|
|
22
|
+
masonry.gridItems = Array.from(masonry.container.children);
|
|
23
|
+
masonry.container.style.contain = "layout";
|
|
24
|
+
masonry.rowGap = parseInt(getComputedStyle(masonry.container).rowGap, 10);
|
|
25
|
+
masonry.resizeObserver.observe(masonry.container);
|
|
35
26
|
masonry.resizeAllItems();
|
|
36
27
|
return masonry;
|
|
37
28
|
}
|
|
38
29
|
destroy() {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
this.grid.style.contain = "";
|
|
44
|
-
this.grid.style.alignItems = "";
|
|
30
|
+
this.resizeObserver.unobserve(this.container);
|
|
31
|
+
this.container.style.contain = "";
|
|
32
|
+
this.container.style.alignItems = "";
|
|
45
33
|
this.gridItems.forEach((item)=>{
|
|
46
34
|
const newItem = item;
|
|
47
35
|
newItem.style.gridRowEnd = "";
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA,MAAM;IACJ,aAAc;QACZ,IAAI,CAAC,
|
|
1
|
+
{"mappings":"AAAA,MAAM;IACJ,aAAc;QACZ,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,SAAS;QACd,IAAI,CAAC,iBAAiB,IAAI,eAAe,IAAI,CAAC,eAAe,KAAK,IAAI;IACxE;IAEA,iBAAiB;QACf,IAAI,CAAC,UAAU,MAAM,aAAa;QAClC,IAAI,CAAC,UAAU,QAAQ,CAAC;YACtB,MAAM,UAAU,KAAK,KACnB,AAAC,CAAA,KAAK,eAAe,IAAI,CAAC,MAAK,IAAM,CAAA,IAAI,CAAC,YAAY,IAAI,CAAC,MAAK;YAGlE,MAAM,UAAU;YAEhB,QAAQ,MAAM,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC;QAC9C;IACF;IAEA,OAAO,KAAK,UAAU,CAAC,CAAC,EAAE;QACxB,MAAM,aAAE,YAAY,YAAY,GAAG;QACnC,MAAM,UAAU,IAAI;QAEpB,QAAQ,YAAY,qBAAqB,cACrC,YACA,SAAS,cAAc;QAE3B,IAAI,CAAC,QAAQ,WAAW;QAExB,QAAQ,YAAY,MAAM,KAAK,QAAQ,UAAU;QACjD,QAAQ,UAAU,MAAM,UAAU;QAElC,QAAQ,SAAS,SAAS,iBAAiB,QAAQ,WAAW,QAAQ;QAEtE,QAAQ,eAAe,QAAQ,QAAQ;QACvC,QAAQ;QAER,OAAO;IACT;IAEA,UAAU;QACR,IAAI,CAAC,eAAe,UAAU,IAAI,CAAC;QAEnC,IAAI,CAAC,UAAU,MAAM,UAAU;QAC/B,IAAI,CAAC,UAAU,MAAM,aAAa;QAClC,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.container = null;\n this.gridItems = [];\n this.rowHeight = 1;\n this.rowGap = 0;\n this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));\n }\n\n resizeAllItems() {\n this.container.style.alignItems = 'start';\n this.gridItems.forEach((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\n static init(options = {}) {\n const { container = '.masonry' } = options;\n const masonry = new MasonrySimple();\n\n masonry.container = container instanceof HTMLElement\n ? container\n : document.querySelector(container);\n\n if (!masonry.container) return;\n\n masonry.gridItems = Array.from(masonry.container.children);\n masonry.container.style.contain = 'layout';\n\n masonry.rowGap = parseInt(getComputedStyle(masonry.container).rowGap, 10);\n\n masonry.resizeObserver.observe(masonry.container);\n masonry.resizeAllItems();\n\n return masonry;\n }\n\n destroy() {\n this.resizeObserver.unobserve(this.container);\n\n this.container.style.contain = '';\n this.container.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
|
@@ -1,77 +1,48 @@
|
|
|
1
1
|
class MasonrySimple {
|
|
2
2
|
constructor() {
|
|
3
|
-
this.
|
|
3
|
+
this.container = null;
|
|
4
4
|
this.gridItems = [];
|
|
5
|
-
this.resizeObserver = null;
|
|
6
5
|
this.rowHeight = 1;
|
|
7
|
-
this.
|
|
8
|
-
this.
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
resizeItem(item) {
|
|
12
|
-
const rowSpan = Math.ceil(
|
|
13
|
-
(item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap),
|
|
14
|
-
);
|
|
15
|
-
|
|
16
|
-
const newItem = item;
|
|
17
|
-
|
|
18
|
-
newItem.style.gridRowEnd = `span ${rowSpan}`;
|
|
6
|
+
this.rowGap = 0;
|
|
7
|
+
this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));
|
|
19
8
|
}
|
|
20
9
|
|
|
21
10
|
resizeAllItems() {
|
|
22
|
-
|
|
11
|
+
this.container.style.alignItems = 'start';
|
|
12
|
+
this.gridItems.forEach((item) => {
|
|
13
|
+
const rowSpan = Math.ceil(
|
|
14
|
+
(item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap),
|
|
15
|
+
);
|
|
23
16
|
|
|
24
|
-
|
|
17
|
+
const newItem = item;
|
|
25
18
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
this.grid.style.alignItems = 'start';
|
|
29
|
-
this.gridItems.forEach((item) => this.resizeItem(item));
|
|
30
|
-
this.pendingResize = false;
|
|
31
|
-
this.requestAnimationFrameId = null;
|
|
32
|
-
});
|
|
33
|
-
}
|
|
19
|
+
newItem.style.gridRowEnd = `span ${rowSpan}`;
|
|
20
|
+
});
|
|
34
21
|
}
|
|
35
22
|
|
|
36
23
|
static init(options = {}) {
|
|
37
24
|
const { container = '.masonry' } = options;
|
|
38
25
|
const masonry = new MasonrySimple();
|
|
39
26
|
|
|
40
|
-
masonry.
|
|
27
|
+
masonry.container = container instanceof HTMLElement
|
|
41
28
|
? container
|
|
42
29
|
: document.querySelector(container);
|
|
43
30
|
|
|
44
|
-
if (!masonry.
|
|
45
|
-
|
|
46
|
-
masonry.gridItems = masonry.grid.children.length
|
|
47
|
-
? Array.from(masonry.grid.children)
|
|
48
|
-
: [];
|
|
49
|
-
|
|
50
|
-
masonry.grid.style.contain = 'layout';
|
|
31
|
+
if (!masonry.container) return;
|
|
51
32
|
|
|
52
|
-
masonry.
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
);
|
|
56
|
-
|
|
57
|
-
masonry.resizeObserver = new ResizeObserver(
|
|
58
|
-
masonry.resizeAllItems.bind(masonry),
|
|
59
|
-
);
|
|
60
|
-
|
|
61
|
-
masonry.resizeObserver.observe(masonry.grid);
|
|
33
|
+
masonry.gridItems = Array.from(masonry.container.children);
|
|
34
|
+
masonry.container.style.contain = 'layout';
|
|
35
|
+
masonry.rowGap = parseInt(getComputedStyle(masonry.container).rowGap, 10);
|
|
36
|
+
masonry.resizeObserver.observe(masonry.container);
|
|
62
37
|
masonry.resizeAllItems();
|
|
63
38
|
|
|
64
39
|
return masonry;
|
|
65
40
|
}
|
|
66
41
|
|
|
67
42
|
destroy() {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
this.grid.style.contain = '';
|
|
74
|
-
this.grid.style.alignItems = '';
|
|
43
|
+
this.resizeObserver.unobserve(this.container);
|
|
44
|
+
this.container.style.contain = '';
|
|
45
|
+
this.container.style.alignItems = '';
|
|
75
46
|
this.gridItems.forEach((item) => {
|
|
76
47
|
const newItem = item;
|
|
77
48
|
|