masonry-simple 4.3.0 → 4.4.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.cjs.js +1 -1
- package/dist/index.es.js +14 -19
- package/package.json +13 -13
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";module.exports=class{container;gridItems=[];rowHeight=1;rowGap=0;resizeScheduled=!1;resizeObserver=null;mutationObserver=null;abortController=null;originalAutoRows="";constructor(t={}){this.container=t.container instanceof HTMLElement?t.container:typeof t.container=="string"?document.querySelector(t.container):document.querySelector(".masonry")}init(){this.container&&(this.setupAbortController(),this.storeAndSetAutoRows(),this.initializeContainerStyles(),this.initializeGridItems(),this.setupResizeObserver(),this.setupMutationObserver(),this.resizeAllItems())}refresh(){this.initializeGridItems(),this.resizeAllItems()}destroy(){this.container&&(this.abortController?.abort(),this.container.style.gridAutoRows=this.originalAutoRows,this.container.style.contain="",this.container.style.alignItems="",this.gridItems.forEach(t=>t.style.gridRowEnd=""),this.gridItems=[],this.resizeObserver=null,this.mutationObserver=null,this.abortController=null,this.originalAutoRows="")}handleResize(){this.resizeScheduled||(this.resizeScheduled=!0,requestAnimationFrame(()=>{this.resizeAllItems(),this.resizeScheduled=!1}))}resizeAllItems(){this.container&&(this.container.style.alignItems="start",this.gridItems.forEach(t=>{const e=Math.ceil((t.clientHeight+this.rowGap)/(this.rowHeight+this.rowGap));t.style.gridRowEnd=`span ${e}`}))}setupAbortController(){this.abortController=new AbortController,this.abortController.signal.addEventListener("abort",()=>{this.resizeObserver?.disconnect(),this.mutationObserver?.disconnect()})}setupResizeObserver(){this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.container)}setupMutationObserver(){this.mutationObserver=new MutationObserver(()=>{this.initializeGridItems(),this.resizeAllItems()}),this.mutationObserver.observe(this.container,{childList:!0,subtree:!1})}initializeContainerStyles(){if(!this.container)return;const t=getComputedStyle(this.container);this.rowGap=parseInt(t.rowGap,10)||0;const e=parseInt(t.gridAutoRows,10);this.rowHeight=Number.isNaN(e)?this.rowHeight:e,this.container.style.contain="layout"}initializeGridItems(){this.container&&(this.gridItems=Array.from(this.container.children),this.gridItems.forEach(t=>{const e=t.querySelector("img");e&&!e.complete&&e.addEventListener("load",()=>this.resizeAllItems(),{once:!0})}))}storeAndSetAutoRows(){this.container&&(this.originalAutoRows||(this.originalAutoRows=this.container.style.gridAutoRows||""),this.container.style.gridAutoRows="1px")}};
|
package/dist/index.es.js
CHANGED
|
@@ -1,17 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
class s {
|
|
2
|
+
container;
|
|
3
|
+
gridItems = [];
|
|
4
|
+
rowHeight = 1;
|
|
5
|
+
rowGap = 0;
|
|
6
|
+
resizeScheduled = !1;
|
|
7
|
+
resizeObserver = null;
|
|
8
|
+
mutationObserver = null;
|
|
9
|
+
abortController = null;
|
|
10
|
+
originalAutoRows = "";
|
|
5
11
|
constructor(t = {}) {
|
|
6
|
-
i(this, "container");
|
|
7
|
-
i(this, "gridItems", []);
|
|
8
|
-
i(this, "rowHeight", 1);
|
|
9
|
-
i(this, "rowGap", 0);
|
|
10
|
-
i(this, "resizeScheduled", !1);
|
|
11
|
-
i(this, "resizeObserver", null);
|
|
12
|
-
i(this, "mutationObserver", null);
|
|
13
|
-
i(this, "abortController", null);
|
|
14
|
-
i(this, "originalAutoRows", "");
|
|
15
12
|
this.container = t.container instanceof HTMLElement ? t.container : typeof t.container == "string" ? document.querySelector(t.container) : document.querySelector(".masonry");
|
|
16
13
|
}
|
|
17
14
|
init() {
|
|
@@ -21,8 +18,7 @@ class l {
|
|
|
21
18
|
this.initializeGridItems(), this.resizeAllItems();
|
|
22
19
|
}
|
|
23
20
|
destroy() {
|
|
24
|
-
|
|
25
|
-
this.container && ((t = this.abortController) == null || t.abort(), this.container.style.gridAutoRows = this.originalAutoRows, this.container.style.contain = "", this.container.style.alignItems = "", this.gridItems.forEach((e) => e.style.gridRowEnd = ""), this.gridItems = [], this.resizeObserver = null, this.mutationObserver = null, this.abortController = null, this.originalAutoRows = "");
|
|
21
|
+
this.container && (this.abortController?.abort(), this.container.style.gridAutoRows = this.originalAutoRows, this.container.style.contain = "", this.container.style.alignItems = "", this.gridItems.forEach((t) => t.style.gridRowEnd = ""), this.gridItems = [], this.resizeObserver = null, this.mutationObserver = null, this.abortController = null, this.originalAutoRows = "");
|
|
26
22
|
}
|
|
27
23
|
handleResize() {
|
|
28
24
|
this.resizeScheduled || (this.resizeScheduled = !0, requestAnimationFrame(() => {
|
|
@@ -37,8 +33,7 @@ class l {
|
|
|
37
33
|
}
|
|
38
34
|
setupAbortController() {
|
|
39
35
|
this.abortController = new AbortController(), this.abortController.signal.addEventListener("abort", () => {
|
|
40
|
-
|
|
41
|
-
(t = this.resizeObserver) == null || t.disconnect(), (e = this.mutationObserver) == null || e.disconnect();
|
|
36
|
+
this.resizeObserver?.disconnect(), this.mutationObserver?.disconnect();
|
|
42
37
|
});
|
|
43
38
|
}
|
|
44
39
|
setupResizeObserver() {
|
|
@@ -54,7 +49,7 @@ class l {
|
|
|
54
49
|
const t = getComputedStyle(this.container);
|
|
55
50
|
this.rowGap = parseInt(t.rowGap, 10) || 0;
|
|
56
51
|
const e = parseInt(t.gridAutoRows, 10);
|
|
57
|
-
this.rowHeight = Number.isNaN(e) ? this.rowHeight : e, this.container.style.contain = "layout
|
|
52
|
+
this.rowHeight = Number.isNaN(e) ? this.rowHeight : e, this.container.style.contain = "layout";
|
|
58
53
|
}
|
|
59
54
|
initializeGridItems() {
|
|
60
55
|
this.container && (this.gridItems = Array.from(this.container.children), this.gridItems.forEach((t) => {
|
|
@@ -67,5 +62,5 @@ class l {
|
|
|
67
62
|
}
|
|
68
63
|
}
|
|
69
64
|
export {
|
|
70
|
-
|
|
65
|
+
s as default
|
|
71
66
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "masonry-simple",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.4.0",
|
|
4
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",
|
|
@@ -36,21 +36,21 @@
|
|
|
36
36
|
"dist/"
|
|
37
37
|
],
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@eslint/js": "9.
|
|
39
|
+
"@eslint/js": "9.31.0",
|
|
40
40
|
"@rollup/plugin-terser": "0.4.4",
|
|
41
|
-
"@types/node": "
|
|
42
|
-
"@typescript-eslint/eslint-plugin": "8.
|
|
43
|
-
"@typescript-eslint/parser": "8.
|
|
44
|
-
"eslint": "9.
|
|
45
|
-
"eslint-config-prettier": "10.1.
|
|
46
|
-
"eslint-import-resolver-typescript": "4.
|
|
47
|
-
"eslint-plugin-import": "2.
|
|
48
|
-
"globals": "16.
|
|
49
|
-
"prettier": "3.
|
|
41
|
+
"@types/node": "24.0.14",
|
|
42
|
+
"@typescript-eslint/eslint-plugin": "8.37.0",
|
|
43
|
+
"@typescript-eslint/parser": "8.37.0",
|
|
44
|
+
"eslint": "9.31.0",
|
|
45
|
+
"eslint-config-prettier": "10.1.5",
|
|
46
|
+
"eslint-import-resolver-typescript": "4.4.4",
|
|
47
|
+
"eslint-plugin-import": "2.32.0",
|
|
48
|
+
"globals": "16.3.0",
|
|
49
|
+
"prettier": "3.6.2",
|
|
50
50
|
"rimraf": "6.0.1",
|
|
51
51
|
"typescript": "5.8.3",
|
|
52
|
-
"vite": "
|
|
53
|
-
"vite-plugin-dts": "4.5.
|
|
52
|
+
"vite": "7.0.4",
|
|
53
|
+
"vite-plugin-dts": "4.5.4"
|
|
54
54
|
},
|
|
55
55
|
"keywords": [
|
|
56
56
|
"masonry",
|