masonry-simple 3.1.0 → 3.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/.eslintignore +3 -0
- package/.eslintrc.json +22 -0
- package/README.md +7 -16
- package/dist/index.d.ts +10 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +34 -30
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +34 -30
- package/dist/index.module.js.map +1 -1
- package/package.json +29 -19
- package/src/index.ts +68 -0
- package/tsconfig.json +6 -0
- package/.swcrc +0 -9
- package/dist/masonry-simple.min.js +0 -1
- package/src/index.js +0 -64
- package/src/masonry-simple.js +0 -68
package/.eslintignore
ADDED
package/.eslintrc.json
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"env": {
|
|
3
|
+
"browser": true,
|
|
4
|
+
"es2021": true
|
|
5
|
+
},
|
|
6
|
+
"extends": [
|
|
7
|
+
"airbnb-base"
|
|
8
|
+
],
|
|
9
|
+
"parserOptions": {
|
|
10
|
+
"ecmaVersion": "latest",
|
|
11
|
+
"sourceType": "module"
|
|
12
|
+
},
|
|
13
|
+
"rules": {
|
|
14
|
+
"max-len": [
|
|
15
|
+
"off",
|
|
16
|
+
{
|
|
17
|
+
"code": 100,
|
|
18
|
+
"ignoreUrls": true
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
}
|
package/README.md
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
<br>
|
|
2
1
|
<div align="center">
|
|
2
|
+
<br>
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
<h1>masonry-simple</h1>
|
|
5
|
+
|
|
6
|
+
<p><sup>MasonrySimple implements a simple system for placing masonry style elements using CSS Grid. Masonry placement is used for dynamic grids where elements may have different heights and need to be placed neatly without gaps.</sup></p>
|
|
6
7
|
|
|
7
8
|
[](https://www.npmjs.com/package/masonry-simple)
|
|
8
9
|
[](https://github.com/ux-ui-pro/masonry-simple)
|
|
@@ -10,22 +11,15 @@ The MasonrySimple class is designed to create a masonry layout of elements on a
|
|
|
10
11
|
|
|
11
12
|
<sup>600B gzipped</sup>
|
|
12
13
|
|
|
13
|
-
<a href="https://
|
|
14
|
+
<a href="https://codepen.io/ux-ui/pen/poxGEqX">Demo</a>
|
|
14
15
|
|
|
15
16
|
</div>
|
|
16
|
-
|
|
17
17
|
<br>
|
|
18
18
|
|
|
19
|
-
➤ **
|
|
20
|
-
|
|
21
|
-
<sub>**Recommended**</sub>
|
|
19
|
+
➤ **Install**
|
|
22
20
|
```console
|
|
23
21
|
$ yarn add masonry-simple
|
|
24
22
|
```
|
|
25
|
-
<sub>**Not recommended**<br>Import the [masonry-simple.min.js](https://github.com/ux-ui-pro/masonry-simple/blob/master/dist/masonry-simple.min.js) file using the `<script>` tag. You can [download it here](https://github.com/ux-ui-pro/masonry-simple/releases/latest). In this connection method, no initialisation is required and it is mandatory to specify the `.masonry' class for the html container.</sub>
|
|
26
|
-
```html
|
|
27
|
-
<script src="path-to-the-file/masonry-simple.min.js"></script>
|
|
28
|
-
```
|
|
29
23
|
<br>
|
|
30
24
|
|
|
31
25
|
➤ **Import**
|
|
@@ -35,9 +29,6 @@ import MasonrySimple from 'masonry-simple';
|
|
|
35
29
|
<br>
|
|
36
30
|
|
|
37
31
|
➤ **Usage**
|
|
38
|
-
|
|
39
|
-
<sub>The container can be specified in the following formats: a string value representing the class or id of an element in the DOM, such as '.masonry' or '#masonry'. A Vue reactive reference that contains a DOM element.</sub>
|
|
40
|
-
|
|
41
32
|
```javascript
|
|
42
33
|
const masonry = new MasonrySimple({
|
|
43
34
|
container: '.masonry',
|
|
@@ -74,4 +65,4 @@ masonry.destroy();
|
|
|
74
65
|
|
|
75
66
|
➤ **License**
|
|
76
67
|
|
|
77
|
-
|
|
68
|
+
masonry-simple is released under MIT license
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"AAAA,qBAAM,aAAa;gBAQL,OAAO,GAAE;QAAE,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;KAAO;IA8BvD,IAAI;IAeJ,OAAO;CAYf;AAED,eAAe,aAAa,CAAC","sources":["src/src/index.ts","src/index.ts"],"sourcesContent":[null,"class MasonrySimple {\n private readonly container: HTMLElement | null = null;\n private gridItems: HTMLElement[] = [];\n private rowHeight: number = 1;\n private rowGap: number = 0;\n private resizeTimeout: number | null = null;\n private resizeObserver: ResizeObserver;\n\n constructor(options: { container?: HTMLElement | string } = {}) {\n this.container =\n options.container instanceof HTMLElement\n ? options.container\n : document.querySelector(options.container || '.masonry') as HTMLElement;\n\n this.resizeObserver = new ResizeObserver(() => this.handleResize());\n }\n\n private handleResize() {\n if (this.resizeTimeout !== null) {\n window.cancelAnimationFrame(this.resizeTimeout);\n }\n\n this.resizeTimeout = window.requestAnimationFrame(() => this.resizeAllItems());\n }\n\n private resizeAllItems() {\n if (!this.container) return;\n\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 item.style.gridRowEnd = `span ${rowSpan}`;\n });\n }\n\n public init() {\n if (!this.container) return;\n\n const computedStyle = getComputedStyle(this.container);\n\n this.rowGap = parseInt(computedStyle.rowGap, 10);\n this.rowHeight = parseInt(computedStyle.gridAutoRows, 10) || this.rowHeight;\n\n this.gridItems = Array.from(this.container.children) as HTMLElement[];\n this.container.style.contain = 'layout';\n this.resizeObserver.observe(this.container);\n this.gridItems.forEach((item) => this.resizeObserver.observe(item));\n this.resizeAllItems();\n }\n\n public destroy() {\n if (!this.container) return;\n\n this.resizeObserver.unobserve(this.container);\n this.gridItems.forEach((item) => this.resizeObserver.unobserve(item));\n\n this.container.style.contain = '';\n this.container.style.alignItems = '';\n this.gridItems.forEach((item) => {\n item.style.gridRowEnd = '';\n });\n }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.d.ts.map"}
|
package/dist/index.js
CHANGED
|
@@ -9,49 +9,53 @@ function $parcel$export(e, n, v, s) {
|
|
|
9
9
|
|
|
10
10
|
$parcel$defineInteropFlag(module.exports);
|
|
11
11
|
|
|
12
|
-
$parcel$export(module.exports, "default", ()
|
|
13
|
-
class $
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
$parcel$export(module.exports, "default", function () { return $a196c1ed25598f0e$export$2e2bcd8739ae039; });
|
|
13
|
+
class $a196c1ed25598f0e$var$MasonrySimple {
|
|
14
|
+
container = null;
|
|
15
|
+
gridItems = [];
|
|
16
|
+
rowHeight = 1;
|
|
17
|
+
rowGap = 0;
|
|
18
|
+
resizeTimeout = null;
|
|
19
|
+
resizeObserver;
|
|
20
20
|
constructor(options = {}){
|
|
21
|
-
this
|
|
21
|
+
this.container = options.container instanceof HTMLElement ? options.container : document.querySelector(options.container || ".masonry");
|
|
22
|
+
this.resizeObserver = new ResizeObserver(()=>this.handleResize());
|
|
22
23
|
}
|
|
23
|
-
|
|
24
|
-
if (this
|
|
25
|
-
this
|
|
26
|
-
this.#resizeAllItems();
|
|
27
|
-
});
|
|
24
|
+
handleResize() {
|
|
25
|
+
if (this.resizeTimeout !== null) window.cancelAnimationFrame(this.resizeTimeout);
|
|
26
|
+
this.resizeTimeout = window.requestAnimationFrame(()=>this.resizeAllItems());
|
|
28
27
|
}
|
|
29
|
-
|
|
30
|
-
this
|
|
31
|
-
this
|
|
32
|
-
|
|
28
|
+
resizeAllItems() {
|
|
29
|
+
if (!this.container) return;
|
|
30
|
+
this.container.style.alignItems = "start";
|
|
31
|
+
this.gridItems.forEach((item)=>{
|
|
32
|
+
const rowSpan = Math.ceil((item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
|
|
33
33
|
item.style.gridRowEnd = `span ${rowSpan}`;
|
|
34
34
|
});
|
|
35
35
|
}
|
|
36
36
|
init() {
|
|
37
|
-
if (!this
|
|
38
|
-
const
|
|
39
|
-
this
|
|
40
|
-
this
|
|
41
|
-
this
|
|
42
|
-
this
|
|
43
|
-
this
|
|
37
|
+
if (!this.container) return;
|
|
38
|
+
const computedStyle = getComputedStyle(this.container);
|
|
39
|
+
this.rowGap = parseInt(computedStyle.rowGap, 10);
|
|
40
|
+
this.rowHeight = parseInt(computedStyle.gridAutoRows, 10) || this.rowHeight;
|
|
41
|
+
this.gridItems = Array.from(this.container.children);
|
|
42
|
+
this.container.style.contain = "layout";
|
|
43
|
+
this.resizeObserver.observe(this.container);
|
|
44
|
+
this.gridItems.forEach((item)=>this.resizeObserver.observe(item));
|
|
45
|
+
this.resizeAllItems();
|
|
44
46
|
}
|
|
45
47
|
destroy() {
|
|
46
|
-
this
|
|
47
|
-
this
|
|
48
|
-
this
|
|
49
|
-
this
|
|
48
|
+
if (!this.container) return;
|
|
49
|
+
this.resizeObserver.unobserve(this.container);
|
|
50
|
+
this.gridItems.forEach((item)=>this.resizeObserver.unobserve(item));
|
|
51
|
+
this.container.style.contain = "";
|
|
52
|
+
this.container.style.alignItems = "";
|
|
53
|
+
this.gridItems.forEach((item)=>{
|
|
50
54
|
item.style.gridRowEnd = "";
|
|
51
55
|
});
|
|
52
56
|
}
|
|
53
57
|
}
|
|
54
|
-
var $
|
|
58
|
+
var $a196c1ed25598f0e$export$2e2bcd8739ae039 = $a196c1ed25598f0e$var$MasonrySimple;
|
|
55
59
|
|
|
56
60
|
|
|
57
61
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;AAAA,MAAM;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;AAAA,MAAM;IACa,YAAgC,KAAK;IAC9C,YAA2B,EAAE,CAAC;IAC9B,YAAoB,EAAE;IACtB,SAAiB,EAAE;IACnB,gBAA+B,KAAK;IACpC,eAA+B;IAEvC,YAAY,UAAgD,CAAC,CAAC,CAAE;QAC9D,IAAI,CAAC,SAAS,GACZ,QAAQ,SAAS,YAAY,cACzB,QAAQ,SAAS,GACjB,SAAS,aAAa,CAAC,QAAQ,SAAS,IAAI;QAElD,IAAI,CAAC,cAAc,GAAG,IAAI,eAAe,IAAM,IAAI,CAAC,YAAY;IAClE;IAEQ,eAAe;QACrB,IAAI,IAAI,CAAC,aAAa,KAAK,MACzB,OAAO,oBAAoB,CAAC,IAAI,CAAC,aAAa;QAGhD,IAAI,CAAC,aAAa,GAAG,OAAO,qBAAqB,CAAC,IAAM,IAAI,CAAC,cAAc;IAC7E;IAEQ,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QAErB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG;QAClC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YACtB,MAAM,UAAU,KAAK,IAAI,CACvB,AAAC,CAAA,KAAK,YAAY,GAAG,IAAI,CAAC,MAAM,AAAD,IAAM,CAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,AAAD;YAGlE,KAAK,KAAK,CAAC,UAAU,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC;QAC3C;IACF;IAEO,OAAO;QACZ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QAErB,MAAM,gBAAgB,iBAAiB,IAAI,CAAC,SAAS;QAErD,IAAI,CAAC,MAAM,GAAG,SAAS,cAAc,MAAM,EAAE;QAC7C,IAAI,CAAC,SAAS,GAAG,SAAS,cAAc,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS;QAE3E,IAAI,CAAC,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ;QACnD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG;QAC/B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS;QAC1C,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,OAAS,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;QAC7D,IAAI,CAAC,cAAc;IACrB;IAEO,UAAU;QACf,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QAErB,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS;QAC5C,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,OAAS,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;QAE/D,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG;QAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG;QAClC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YACtB,KAAK,KAAK,CAAC,UAAU,GAAG;QAC1B;IACF;AACF;IAEA,2CAAe","sources":["src/index.ts"],"sourcesContent":["class MasonrySimple {\n private readonly container: HTMLElement | null = null;\n private gridItems: HTMLElement[] = [];\n private rowHeight: number = 1;\n private rowGap: number = 0;\n private resizeTimeout: number | null = null;\n private resizeObserver: ResizeObserver;\n\n constructor(options: { container?: HTMLElement | string } = {}) {\n this.container =\n options.container instanceof HTMLElement\n ? options.container\n : document.querySelector(options.container || '.masonry') as HTMLElement;\n\n this.resizeObserver = new ResizeObserver(() => this.handleResize());\n }\n\n private handleResize() {\n if (this.resizeTimeout !== null) {\n window.cancelAnimationFrame(this.resizeTimeout);\n }\n\n this.resizeTimeout = window.requestAnimationFrame(() => this.resizeAllItems());\n }\n\n private resizeAllItems() {\n if (!this.container) return;\n\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 item.style.gridRowEnd = `span ${rowSpan}`;\n });\n }\n\n public init() {\n if (!this.container) return;\n\n const computedStyle = getComputedStyle(this.container);\n\n this.rowGap = parseInt(computedStyle.rowGap, 10);\n this.rowHeight = parseInt(computedStyle.gridAutoRows, 10) || this.rowHeight;\n\n this.gridItems = Array.from(this.container.children) as HTMLElement[];\n this.container.style.contain = 'layout';\n this.resizeObserver.observe(this.container);\n this.gridItems.forEach((item) => this.resizeObserver.observe(item));\n this.resizeAllItems();\n }\n\n public destroy() {\n if (!this.container) return;\n\n this.resizeObserver.unobserve(this.container);\n this.gridItems.forEach((item) => this.resizeObserver.unobserve(item));\n\n this.container.style.contain = '';\n this.container.style.alignItems = '';\n this.gridItems.forEach((item) => {\n item.style.gridRowEnd = '';\n });\n }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -1,46 +1,50 @@
|
|
|
1
|
-
class $
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
class $643fcf18b2d2e76f$var$MasonrySimple {
|
|
2
|
+
container = null;
|
|
3
|
+
gridItems = [];
|
|
4
|
+
rowHeight = 1;
|
|
5
|
+
rowGap = 0;
|
|
6
|
+
resizeTimeout = null;
|
|
7
|
+
resizeObserver;
|
|
8
8
|
constructor(options = {}){
|
|
9
|
-
this
|
|
9
|
+
this.container = options.container instanceof HTMLElement ? options.container : document.querySelector(options.container || ".masonry");
|
|
10
|
+
this.resizeObserver = new ResizeObserver(()=>this.handleResize());
|
|
10
11
|
}
|
|
11
|
-
|
|
12
|
-
if (this
|
|
13
|
-
this
|
|
14
|
-
this.#resizeAllItems();
|
|
15
|
-
});
|
|
12
|
+
handleResize() {
|
|
13
|
+
if (this.resizeTimeout !== null) window.cancelAnimationFrame(this.resizeTimeout);
|
|
14
|
+
this.resizeTimeout = window.requestAnimationFrame(()=>this.resizeAllItems());
|
|
16
15
|
}
|
|
17
|
-
|
|
18
|
-
this
|
|
19
|
-
this
|
|
20
|
-
|
|
16
|
+
resizeAllItems() {
|
|
17
|
+
if (!this.container) return;
|
|
18
|
+
this.container.style.alignItems = "start";
|
|
19
|
+
this.gridItems.forEach((item)=>{
|
|
20
|
+
const rowSpan = Math.ceil((item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
|
|
21
21
|
item.style.gridRowEnd = `span ${rowSpan}`;
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
24
|
init() {
|
|
25
|
-
if (!this
|
|
26
|
-
const
|
|
27
|
-
this
|
|
28
|
-
this
|
|
29
|
-
this
|
|
30
|
-
this
|
|
31
|
-
this
|
|
25
|
+
if (!this.container) return;
|
|
26
|
+
const computedStyle = getComputedStyle(this.container);
|
|
27
|
+
this.rowGap = parseInt(computedStyle.rowGap, 10);
|
|
28
|
+
this.rowHeight = parseInt(computedStyle.gridAutoRows, 10) || this.rowHeight;
|
|
29
|
+
this.gridItems = Array.from(this.container.children);
|
|
30
|
+
this.container.style.contain = "layout";
|
|
31
|
+
this.resizeObserver.observe(this.container);
|
|
32
|
+
this.gridItems.forEach((item)=>this.resizeObserver.observe(item));
|
|
33
|
+
this.resizeAllItems();
|
|
32
34
|
}
|
|
33
35
|
destroy() {
|
|
34
|
-
this
|
|
35
|
-
this
|
|
36
|
-
this
|
|
37
|
-
this
|
|
36
|
+
if (!this.container) return;
|
|
37
|
+
this.resizeObserver.unobserve(this.container);
|
|
38
|
+
this.gridItems.forEach((item)=>this.resizeObserver.unobserve(item));
|
|
39
|
+
this.container.style.contain = "";
|
|
40
|
+
this.container.style.alignItems = "";
|
|
41
|
+
this.gridItems.forEach((item)=>{
|
|
38
42
|
item.style.gridRowEnd = "";
|
|
39
43
|
});
|
|
40
44
|
}
|
|
41
45
|
}
|
|
42
|
-
var $
|
|
46
|
+
var $643fcf18b2d2e76f$export$2e2bcd8739ae039 = $643fcf18b2d2e76f$var$MasonrySimple;
|
|
43
47
|
|
|
44
48
|
|
|
45
|
-
export {$
|
|
49
|
+
export {$643fcf18b2d2e76f$export$2e2bcd8739ae039 as default};
|
|
46
50
|
//# sourceMappingURL=index.module.js.map
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA,MAAM;
|
|
1
|
+
{"mappings":"AAAA,MAAM;IACa,YAAgC,KAAK;IAC9C,YAA2B,EAAE,CAAC;IAC9B,YAAoB,EAAE;IACtB,SAAiB,EAAE;IACnB,gBAA+B,KAAK;IACpC,eAA+B;IAEvC,YAAY,UAAgD,CAAC,CAAC,CAAE;QAC9D,IAAI,CAAC,SAAS,GACZ,QAAQ,SAAS,YAAY,cACzB,QAAQ,SAAS,GACjB,SAAS,aAAa,CAAC,QAAQ,SAAS,IAAI;QAElD,IAAI,CAAC,cAAc,GAAG,IAAI,eAAe,IAAM,IAAI,CAAC,YAAY;IAClE;IAEQ,eAAe;QACrB,IAAI,IAAI,CAAC,aAAa,KAAK,MACzB,OAAO,oBAAoB,CAAC,IAAI,CAAC,aAAa;QAGhD,IAAI,CAAC,aAAa,GAAG,OAAO,qBAAqB,CAAC,IAAM,IAAI,CAAC,cAAc;IAC7E;IAEQ,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QAErB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG;QAClC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YACtB,MAAM,UAAU,KAAK,IAAI,CACvB,AAAC,CAAA,KAAK,YAAY,GAAG,IAAI,CAAC,MAAM,AAAD,IAAM,CAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,AAAD;YAGlE,KAAK,KAAK,CAAC,UAAU,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC;QAC3C;IACF;IAEO,OAAO;QACZ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QAErB,MAAM,gBAAgB,iBAAiB,IAAI,CAAC,SAAS;QAErD,IAAI,CAAC,MAAM,GAAG,SAAS,cAAc,MAAM,EAAE;QAC7C,IAAI,CAAC,SAAS,GAAG,SAAS,cAAc,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS;QAE3E,IAAI,CAAC,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ;QACnD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG;QAC/B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS;QAC1C,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,OAAS,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;QAC7D,IAAI,CAAC,cAAc;IACrB;IAEO,UAAU;QACf,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QAErB,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS;QAC5C,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,OAAS,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;QAE/D,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG;QAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG;QAClC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YACtB,KAAK,KAAK,CAAC,UAAU,GAAG;QAC1B;IACF;AACF;IAEA,2CAAe","sources":["src/index.ts"],"sourcesContent":["class MasonrySimple {\n private readonly container: HTMLElement | null = null;\n private gridItems: HTMLElement[] = [];\n private rowHeight: number = 1;\n private rowGap: number = 0;\n private resizeTimeout: number | null = null;\n private resizeObserver: ResizeObserver;\n\n constructor(options: { container?: HTMLElement | string } = {}) {\n this.container =\n options.container instanceof HTMLElement\n ? options.container\n : document.querySelector(options.container || '.masonry') as HTMLElement;\n\n this.resizeObserver = new ResizeObserver(() => this.handleResize());\n }\n\n private handleResize() {\n if (this.resizeTimeout !== null) {\n window.cancelAnimationFrame(this.resizeTimeout);\n }\n\n this.resizeTimeout = window.requestAnimationFrame(() => this.resizeAllItems());\n }\n\n private resizeAllItems() {\n if (!this.container) return;\n\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 item.style.gridRowEnd = `span ${rowSpan}`;\n });\n }\n\n public init() {\n if (!this.container) return;\n\n const computedStyle = getComputedStyle(this.container);\n\n this.rowGap = parseInt(computedStyle.rowGap, 10);\n this.rowHeight = parseInt(computedStyle.gridAutoRows, 10) || this.rowHeight;\n\n this.gridItems = Array.from(this.container.children) as HTMLElement[];\n this.container.style.contain = 'layout';\n this.resizeObserver.observe(this.container);\n this.gridItems.forEach((item) => this.resizeObserver.observe(item));\n this.resizeAllItems();\n }\n\n public destroy() {\n if (!this.container) return;\n\n this.resizeObserver.unobserve(this.container);\n this.gridItems.forEach((item) => this.resizeObserver.unobserve(item));\n\n this.container.style.contain = '';\n this.container.style.alignItems = '';\n this.gridItems.forEach((item) => {\n item.style.gridRowEnd = '';\n });\n }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "masonry-simple",
|
|
3
|
-
"version": "3.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "3.2.0",
|
|
4
|
+
"description": "MasonrySimple implements a simple system for placing masonry style elements using CSS Grid. Masonry placement is used for dynamic grids where elements may have different heights and need to be placed neatly without gaps.",
|
|
5
5
|
"author": "ux-ui.pro",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
@@ -11,27 +11,27 @@
|
|
|
11
11
|
"bugs": {
|
|
12
12
|
"url": "https://github.com/ux-ui-pro/masonry-simple/issues"
|
|
13
13
|
},
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"targets": {
|
|
17
|
-
"main": {
|
|
18
|
-
"source": "src/index.js"
|
|
19
|
-
},
|
|
20
|
-
"module": {
|
|
21
|
-
"source": "src/index.js"
|
|
22
|
-
}
|
|
23
|
-
},
|
|
14
|
+
"homepage": "https://github.com/ux-ui-pro/masonry-simple",
|
|
15
|
+
"sideEffects": false,
|
|
24
16
|
"scripts": {
|
|
25
|
-
"lint:js": "eslint --ext .js",
|
|
26
|
-
"lintfix": "yarn lint:js --fix",
|
|
27
17
|
"clean": "rm -rf dist .parcel-cache",
|
|
28
|
-
"
|
|
29
|
-
"
|
|
18
|
+
"build": "yarn clean && parcel build",
|
|
19
|
+
"lint:js": "eslint --ext .ts,.js",
|
|
20
|
+
"lintfix": "yarn lint:js --fix"
|
|
30
21
|
},
|
|
22
|
+
"browserslist": "> 0.5%, last 2 versions, not dead",
|
|
23
|
+
"source": "src/index.ts",
|
|
24
|
+
"main": "dist/index.js",
|
|
25
|
+
"module": "dist/index.module.js",
|
|
26
|
+
"types": "dist/index.d.ts",
|
|
31
27
|
"devDependencies": {
|
|
32
|
-
"
|
|
28
|
+
"@parcel/packager-ts": "2.12.0",
|
|
29
|
+
"@parcel/transformer-sass": "2.12.0",
|
|
30
|
+
"@parcel/transformer-typescript-types": "2.12.0",
|
|
31
|
+
"eslint": "^7.32.0 || ^8.57.0",
|
|
33
32
|
"eslint-config-airbnb-base": "^15.0.0",
|
|
34
|
-
"parcel": "^2.
|
|
33
|
+
"parcel": "^2.12.0",
|
|
34
|
+
"typescript": "^5.4.5"
|
|
35
35
|
},
|
|
36
36
|
"keywords": [
|
|
37
37
|
"masonry",
|
|
@@ -39,6 +39,16 @@
|
|
|
39
39
|
"grid",
|
|
40
40
|
"gallery",
|
|
41
41
|
"images",
|
|
42
|
-
"
|
|
42
|
+
"responsive",
|
|
43
|
+
"javascript",
|
|
44
|
+
"typescript",
|
|
45
|
+
"css",
|
|
46
|
+
"web",
|
|
47
|
+
"frontend",
|
|
48
|
+
"design",
|
|
49
|
+
"plugin",
|
|
50
|
+
"resize",
|
|
51
|
+
"html",
|
|
52
|
+
"flexible"
|
|
43
53
|
]
|
|
44
54
|
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
class MasonrySimple {
|
|
2
|
+
private readonly container: HTMLElement | null = null;
|
|
3
|
+
private gridItems: HTMLElement[] = [];
|
|
4
|
+
private rowHeight: number = 1;
|
|
5
|
+
private rowGap: number = 0;
|
|
6
|
+
private resizeTimeout: number | null = null;
|
|
7
|
+
private resizeObserver: ResizeObserver;
|
|
8
|
+
|
|
9
|
+
constructor(options: { container?: HTMLElement | string } = {}) {
|
|
10
|
+
this.container =
|
|
11
|
+
options.container instanceof HTMLElement
|
|
12
|
+
? options.container
|
|
13
|
+
: document.querySelector(options.container || '.masonry') as HTMLElement;
|
|
14
|
+
|
|
15
|
+
this.resizeObserver = new ResizeObserver(() => this.handleResize());
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
private handleResize() {
|
|
19
|
+
if (this.resizeTimeout !== null) {
|
|
20
|
+
window.cancelAnimationFrame(this.resizeTimeout);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
this.resizeTimeout = window.requestAnimationFrame(() => this.resizeAllItems());
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
private resizeAllItems() {
|
|
27
|
+
if (!this.container) return;
|
|
28
|
+
|
|
29
|
+
this.container.style.alignItems = 'start';
|
|
30
|
+
this.gridItems.forEach((item) => {
|
|
31
|
+
const rowSpan = Math.ceil(
|
|
32
|
+
(item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap)
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
item.style.gridRowEnd = `span ${rowSpan}`;
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
public init() {
|
|
40
|
+
if (!this.container) return;
|
|
41
|
+
|
|
42
|
+
const computedStyle = getComputedStyle(this.container);
|
|
43
|
+
|
|
44
|
+
this.rowGap = parseInt(computedStyle.rowGap, 10);
|
|
45
|
+
this.rowHeight = parseInt(computedStyle.gridAutoRows, 10) || this.rowHeight;
|
|
46
|
+
|
|
47
|
+
this.gridItems = Array.from(this.container.children) as HTMLElement[];
|
|
48
|
+
this.container.style.contain = 'layout';
|
|
49
|
+
this.resizeObserver.observe(this.container);
|
|
50
|
+
this.gridItems.forEach((item) => this.resizeObserver.observe(item));
|
|
51
|
+
this.resizeAllItems();
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
public destroy() {
|
|
55
|
+
if (!this.container) return;
|
|
56
|
+
|
|
57
|
+
this.resizeObserver.unobserve(this.container);
|
|
58
|
+
this.gridItems.forEach((item) => this.resizeObserver.unobserve(item));
|
|
59
|
+
|
|
60
|
+
this.container.style.contain = '';
|
|
61
|
+
this.container.style.alignItems = '';
|
|
62
|
+
this.gridItems.forEach((item) => {
|
|
63
|
+
item.style.gridRowEnd = '';
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export default MasonrySimple;
|
package/tsconfig.json
ADDED
package/.swcrc
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
function t(t,e){if(e.has(t))throw TypeError("Cannot initialize the same private elements twice on an object")}function e(t,e,n){if(!e.has(t))throw TypeError("attempted to "+n+" private field on non-instance");return e.get(t)}function n(t,n){var i=e(t,n,"get");return i.get?i.get.call(t):i.value}function i(e,n,i){t(e,n),n.set(e,i)}function a(t,n,i){var a=e(t,n,"set");return!function(t,e,n){if(e.set)e.set.call(t,n);else{if(!e.writable)throw TypeError("attempted to set read only private field");e.value=n}}(t,a,i),i}function r(t,e,n){if(!e.has(t))throw TypeError("attempted to get private field on non-instance");return n}function o(e,n){t(e,n),n.add(e)}var s=new WeakMap,l=new WeakMap,c=new WeakMap,h=new WeakMap,u=new WeakMap,f=new WeakMap,v=new WeakSet,w=new WeakSet,d=function(){var t;function e(){var t,n,d=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};!function(t,e){if(!(t instanceof e))throw TypeError("Cannot call a class as a function")}(this,e),o(this,v),o(this,w),i(this,s,{writable:!0,value:null}),i(this,l,{writable:!0,value:[]}),i(this,c,{writable:!0,value:1}),i(this,h,{writable:!0,value:0}),i(this,u,{writable:!0,value:null}),i(this,f,{writable:!0,value:new ResizeObserver(r(this,v,y).bind(this))}),a(this,s,(t=d.container,null!=(n=HTMLElement)&&"undefined"!=typeof Symbol&&n[Symbol.hasInstance]?!!n[Symbol.hasInstance](t):t instanceof n)?d.container:document.querySelector(d.container||".masonry"))}return t=[{key:"init",value:function(){if(n(this,s)){var t=getComputedStyle(n(this,s)).rowGap;a(this,l,Array.from(n(this,s).children)),n(this,s).style.contain="layout",a(this,h,parseInt(t,10)),n(this,f).observe(n(this,s)),r(this,w,p).call(this)}}},{key:"destroy",value:function(){n(this,f).unobserve(n(this,s)),n(this,s).style.contain="",n(this,s).style.alignItems="",n(this,l).forEach(function(t){t.style.gridRowEnd=""})}}],function(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}(e.prototype,t),e}();function y(){var t=this;n(this,u)&&window.cancelAnimationFrame(n(this,u)),a(this,u,window.requestAnimationFrame(function(){r(t,w,p).call(t)}))}function p(){var t=this;n(this,s).style.alignItems="start",n(this,l).forEach(function(e){var i=Math.ceil((e.clientHeight+n(t,h))/(n(t,c)+n(t,h)));e.style.gridRowEnd="span ".concat(i)})}document.addEventListener("DOMContentLoaded",function(){new d().init()});
|
package/src/index.js
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
class MasonrySimple {
|
|
2
|
-
#container = null;
|
|
3
|
-
|
|
4
|
-
#gridItems = [];
|
|
5
|
-
|
|
6
|
-
#rowHeight = 1;
|
|
7
|
-
|
|
8
|
-
#rowGap = 0;
|
|
9
|
-
|
|
10
|
-
#resizeTimeout = null;
|
|
11
|
-
|
|
12
|
-
#resizeObserver = new ResizeObserver(this.#handleResize.bind(this));
|
|
13
|
-
|
|
14
|
-
constructor(options = {}) {
|
|
15
|
-
this.#container =
|
|
16
|
-
options.container instanceof HTMLElement
|
|
17
|
-
? options.container
|
|
18
|
-
: document.querySelector(options.container || '.masonry');
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
#handleResize() {
|
|
22
|
-
if (this.#resizeTimeout) {
|
|
23
|
-
window.cancelAnimationFrame(this.#resizeTimeout);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
this.#resizeTimeout = window.requestAnimationFrame(() => {
|
|
27
|
-
this.#resizeAllItems();
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
#resizeAllItems() {
|
|
32
|
-
this.#container.style.alignItems = 'start';
|
|
33
|
-
this.#gridItems.forEach((item) => {
|
|
34
|
-
const rowSpan = Math.ceil(
|
|
35
|
-
(item.clientHeight + this.#rowGap) / (this.#rowHeight + this.#rowGap)
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
item.style.gridRowEnd = `span ${rowSpan}`;
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
init() {
|
|
43
|
-
if (!this.#container) return;
|
|
44
|
-
|
|
45
|
-
const { rowGap } = getComputedStyle(this.#container);
|
|
46
|
-
|
|
47
|
-
this.#gridItems = Array.from(this.#container.children);
|
|
48
|
-
this.#container.style.contain = 'layout';
|
|
49
|
-
this.#rowGap = parseInt(rowGap, 10);
|
|
50
|
-
this.#resizeObserver.observe(this.#container);
|
|
51
|
-
this.#resizeAllItems();
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
destroy() {
|
|
55
|
-
this.#resizeObserver.unobserve(this.#container);
|
|
56
|
-
this.#container.style.contain = '';
|
|
57
|
-
this.#container.style.alignItems = '';
|
|
58
|
-
this.#gridItems.forEach((item) => {
|
|
59
|
-
item.style.gridRowEnd = '';
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
export default MasonrySimple;
|
package/src/masonry-simple.js
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
class MasonrySimple {
|
|
2
|
-
#container = null;
|
|
3
|
-
|
|
4
|
-
#gridItems = [];
|
|
5
|
-
|
|
6
|
-
#rowHeight = 1;
|
|
7
|
-
|
|
8
|
-
#rowGap = 0;
|
|
9
|
-
|
|
10
|
-
#resizeTimeout = null;
|
|
11
|
-
|
|
12
|
-
#resizeObserver = new ResizeObserver(this.#handleResize.bind(this));
|
|
13
|
-
|
|
14
|
-
constructor(options = {}) {
|
|
15
|
-
this.#container =
|
|
16
|
-
options.container instanceof HTMLElement
|
|
17
|
-
? options.container
|
|
18
|
-
: document.querySelector(options.container || '.masonry');
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
#handleResize() {
|
|
22
|
-
if (this.#resizeTimeout) {
|
|
23
|
-
window.cancelAnimationFrame(this.#resizeTimeout);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
this.#resizeTimeout = window.requestAnimationFrame(() => {
|
|
27
|
-
this.#resizeAllItems();
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
#resizeAllItems() {
|
|
32
|
-
this.#container.style.alignItems = 'start';
|
|
33
|
-
this.#gridItems.forEach((item) => {
|
|
34
|
-
const rowSpan = Math.ceil(
|
|
35
|
-
(item.clientHeight + this.#rowGap) / (this.#rowHeight + this.#rowGap)
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
item.style.gridRowEnd = `span ${rowSpan}`;
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
init() {
|
|
43
|
-
if (!this.#container) return;
|
|
44
|
-
|
|
45
|
-
const { rowGap } = getComputedStyle(this.#container);
|
|
46
|
-
|
|
47
|
-
this.#gridItems = Array.from(this.#container.children);
|
|
48
|
-
this.#container.style.contain = 'layout';
|
|
49
|
-
this.#rowGap = parseInt(rowGap, 10);
|
|
50
|
-
this.#resizeObserver.observe(this.#container);
|
|
51
|
-
this.#resizeAllItems();
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
destroy() {
|
|
55
|
-
this.#resizeObserver.unobserve(this.#container);
|
|
56
|
-
this.#container.style.contain = '';
|
|
57
|
-
this.#container.style.alignItems = '';
|
|
58
|
-
this.#gridItems.forEach((item) => {
|
|
59
|
-
item.style.gridRowEnd = '';
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
document.addEventListener('DOMContentLoaded', () => {
|
|
65
|
-
const masonry = new MasonrySimple();
|
|
66
|
-
|
|
67
|
-
masonry.init();
|
|
68
|
-
});
|