masonry-simple 3.2.0 → 3.2.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/.eslintrc.json +7 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +4 -2
- package/dist/index.module.js.map +1 -1
- package/package.json +5 -3
- package/src/index.ts +16 -7
package/.eslintrc.json
CHANGED
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"env": {
|
|
3
3
|
"browser": true,
|
|
4
|
-
"
|
|
4
|
+
"es2022": true
|
|
5
5
|
},
|
|
6
6
|
"extends": [
|
|
7
|
-
"airbnb-base"
|
|
7
|
+
"airbnb-base",
|
|
8
|
+
"plugin:@typescript-eslint/recommended"
|
|
8
9
|
],
|
|
10
|
+
"parser": "@typescript-eslint/parser",
|
|
9
11
|
"parserOptions": {
|
|
10
12
|
"ecmaVersion": "latest",
|
|
11
|
-
"sourceType": "module"
|
|
13
|
+
"sourceType": "module",
|
|
14
|
+
"project": "./tsconfig.json"
|
|
12
15
|
},
|
|
16
|
+
"plugins": ["@typescript-eslint"],
|
|
13
17
|
"rules": {
|
|
14
18
|
"max-len": [
|
|
15
19
|
"off",
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA,qBAAM,aAAa;
|
|
1
|
+
{"mappings":"AAAA,qBAAM,aAAa;gBAaL,OAAO,GAAE;QAAE,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;KAAO;IA+BvD,IAAI;IAgBJ,OAAO;CAcf;AAED,eAAe,aAAa,CAAC","sources":["src/src/index.ts","src/index.ts"],"sourcesContent":[null,"class MasonrySimple {\n private readonly container: HTMLElement | null = null;\n\n private gridItems: HTMLElement[] = [];\n\n private rowHeight: number = 1;\n\n private rowGap: number = 0;\n\n private resizeTimeout: number | null = null;\n\n private resizeObserver: ResizeObserver;\n\n constructor(options: { container?: HTMLElement | string } = {}) {\n this.container = 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 const { style } = item;\n\n 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\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 const { style } = item;\n\n style.gridRowEnd = '';\n });\n }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.d.ts.map"}
|
package/dist/index.js
CHANGED
|
@@ -30,7 +30,8 @@ class $a196c1ed25598f0e$var$MasonrySimple {
|
|
|
30
30
|
this.container.style.alignItems = "start";
|
|
31
31
|
this.gridItems.forEach((item)=>{
|
|
32
32
|
const rowSpan = Math.ceil((item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
|
|
33
|
-
|
|
33
|
+
const { style: style } = item;
|
|
34
|
+
style.gridRowEnd = `span ${rowSpan}`;
|
|
34
35
|
});
|
|
35
36
|
}
|
|
36
37
|
init() {
|
|
@@ -51,7 +52,8 @@ class $a196c1ed25598f0e$var$MasonrySimple {
|
|
|
51
52
|
this.container.style.contain = "";
|
|
52
53
|
this.container.style.alignItems = "";
|
|
53
54
|
this.gridItems.forEach((item)=>{
|
|
54
|
-
|
|
55
|
+
const { style: style } = item;
|
|
56
|
+
style.gridRowEnd = "";
|
|
55
57
|
});
|
|
56
58
|
}
|
|
57
59
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;AAAA,MAAM;IACa,YAAgC,KAAK;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;AAAA,MAAM;IACa,YAAgC,KAAK;IAE9C,YAA2B,EAAE,CAAC;IAE9B,YAAoB,EAAE;IAEtB,SAAiB,EAAE;IAEnB,gBAA+B,KAAK;IAEpC,eAA+B;IAEvC,YAAY,UAAgD,CAAC,CAAC,CAAE;QAC9D,IAAI,CAAC,SAAS,GAAG,QAAQ,SAAS,YAAY,cAC1C,QAAQ,SAAS,GACjB,SAAS,aAAa,CAAC,QAAQ,SAAS,IAAI;QAEhD,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,MAAM,SAAE,KAAK,EAAE,GAAG;YAElB,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC;QACtC;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;QAE7D,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,MAAM,SAAE,KAAK,EAAE,GAAG;YAElB,MAAM,UAAU,GAAG;QACrB;IACF;AACF;IAEA,2CAAe","sources":["src/index.ts"],"sourcesContent":["class MasonrySimple {\n private readonly container: HTMLElement | null = null;\n\n private gridItems: HTMLElement[] = [];\n\n private rowHeight: number = 1;\n\n private rowGap: number = 0;\n\n private resizeTimeout: number | null = null;\n\n private resizeObserver: ResizeObserver;\n\n constructor(options: { container?: HTMLElement | string } = {}) {\n this.container = 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 const { style } = item;\n\n 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\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 const { style } = item;\n\n style.gridRowEnd = '';\n });\n }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -18,7 +18,8 @@ class $643fcf18b2d2e76f$var$MasonrySimple {
|
|
|
18
18
|
this.container.style.alignItems = "start";
|
|
19
19
|
this.gridItems.forEach((item)=>{
|
|
20
20
|
const rowSpan = Math.ceil((item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
|
|
21
|
-
|
|
21
|
+
const { style: style } = item;
|
|
22
|
+
style.gridRowEnd = `span ${rowSpan}`;
|
|
22
23
|
});
|
|
23
24
|
}
|
|
24
25
|
init() {
|
|
@@ -39,7 +40,8 @@ class $643fcf18b2d2e76f$var$MasonrySimple {
|
|
|
39
40
|
this.container.style.contain = "";
|
|
40
41
|
this.container.style.alignItems = "";
|
|
41
42
|
this.gridItems.forEach((item)=>{
|
|
42
|
-
|
|
43
|
+
const { style: style } = item;
|
|
44
|
+
style.gridRowEnd = "";
|
|
43
45
|
});
|
|
44
46
|
}
|
|
45
47
|
}
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA,MAAM;IACa,YAAgC,KAAK;
|
|
1
|
+
{"mappings":"AAAA,MAAM;IACa,YAAgC,KAAK;IAE9C,YAA2B,EAAE,CAAC;IAE9B,YAAoB,EAAE;IAEtB,SAAiB,EAAE;IAEnB,gBAA+B,KAAK;IAEpC,eAA+B;IAEvC,YAAY,UAAgD,CAAC,CAAC,CAAE;QAC9D,IAAI,CAAC,SAAS,GAAG,QAAQ,SAAS,YAAY,cAC1C,QAAQ,SAAS,GACjB,SAAS,aAAa,CAAC,QAAQ,SAAS,IAAI;QAEhD,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,MAAM,SAAE,KAAK,EAAE,GAAG;YAElB,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC;QACtC;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;QAE7D,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,MAAM,SAAE,KAAK,EAAE,GAAG;YAElB,MAAM,UAAU,GAAG;QACrB;IACF;AACF;IAEA,2CAAe","sources":["src/index.ts"],"sourcesContent":["class MasonrySimple {\n private readonly container: HTMLElement | null = null;\n\n private gridItems: HTMLElement[] = [];\n\n private rowHeight: number = 1;\n\n private rowGap: number = 0;\n\n private resizeTimeout: number | null = null;\n\n private resizeObserver: ResizeObserver;\n\n constructor(options: { container?: HTMLElement | string } = {}) {\n this.container = 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 const { style } = item;\n\n 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\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 const { style } = item;\n\n style.gridRowEnd = '';\n });\n }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "masonry-simple",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.1",
|
|
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",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"scripts": {
|
|
17
17
|
"clean": "rm -rf dist .parcel-cache",
|
|
18
18
|
"build": "yarn clean && parcel build",
|
|
19
|
-
"lint:js": "eslint
|
|
19
|
+
"lint:js": "eslint **/*.{ts,js}",
|
|
20
20
|
"lintfix": "yarn lint:js --fix"
|
|
21
21
|
},
|
|
22
22
|
"browserslist": "> 0.5%, last 2 versions, not dead",
|
|
@@ -26,10 +26,12 @@
|
|
|
26
26
|
"types": "dist/index.d.ts",
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@parcel/packager-ts": "2.12.0",
|
|
29
|
-
"@parcel/transformer-sass": "2.12.0",
|
|
30
29
|
"@parcel/transformer-typescript-types": "2.12.0",
|
|
30
|
+
"@typescript-eslint/eslint-plugin": "^7.11.0",
|
|
31
|
+
"@typescript-eslint/parser": "^7.11.0",
|
|
31
32
|
"eslint": "^7.32.0 || ^8.57.0",
|
|
32
33
|
"eslint-config-airbnb-base": "^15.0.0",
|
|
34
|
+
"eslint-plugin-import": "^2.29.1",
|
|
33
35
|
"parcel": "^2.12.0",
|
|
34
36
|
"typescript": "^5.4.5"
|
|
35
37
|
},
|
package/src/index.ts
CHANGED
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
class MasonrySimple {
|
|
2
2
|
private readonly container: HTMLElement | null = null;
|
|
3
|
+
|
|
3
4
|
private gridItems: HTMLElement[] = [];
|
|
5
|
+
|
|
4
6
|
private rowHeight: number = 1;
|
|
7
|
+
|
|
5
8
|
private rowGap: number = 0;
|
|
9
|
+
|
|
6
10
|
private resizeTimeout: number | null = null;
|
|
11
|
+
|
|
7
12
|
private resizeObserver: ResizeObserver;
|
|
8
13
|
|
|
9
14
|
constructor(options: { container?: HTMLElement | string } = {}) {
|
|
10
|
-
this.container =
|
|
11
|
-
options.container
|
|
12
|
-
|
|
13
|
-
: document.querySelector(options.container || '.masonry') as HTMLElement;
|
|
15
|
+
this.container = options.container instanceof HTMLElement
|
|
16
|
+
? options.container
|
|
17
|
+
: document.querySelector(options.container || '.masonry') as HTMLElement;
|
|
14
18
|
|
|
15
19
|
this.resizeObserver = new ResizeObserver(() => this.handleResize());
|
|
16
20
|
}
|
|
@@ -29,10 +33,12 @@ class MasonrySimple {
|
|
|
29
33
|
this.container.style.alignItems = 'start';
|
|
30
34
|
this.gridItems.forEach((item) => {
|
|
31
35
|
const rowSpan = Math.ceil(
|
|
32
|
-
(item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap)
|
|
36
|
+
(item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap),
|
|
33
37
|
);
|
|
34
38
|
|
|
35
|
-
|
|
39
|
+
const { style } = item;
|
|
40
|
+
|
|
41
|
+
style.gridRowEnd = `span ${rowSpan}`;
|
|
36
42
|
});
|
|
37
43
|
}
|
|
38
44
|
|
|
@@ -48,6 +54,7 @@ class MasonrySimple {
|
|
|
48
54
|
this.container.style.contain = 'layout';
|
|
49
55
|
this.resizeObserver.observe(this.container);
|
|
50
56
|
this.gridItems.forEach((item) => this.resizeObserver.observe(item));
|
|
57
|
+
|
|
51
58
|
this.resizeAllItems();
|
|
52
59
|
}
|
|
53
60
|
|
|
@@ -60,7 +67,9 @@ class MasonrySimple {
|
|
|
60
67
|
this.container.style.contain = '';
|
|
61
68
|
this.container.style.alignItems = '';
|
|
62
69
|
this.gridItems.forEach((item) => {
|
|
63
|
-
|
|
70
|
+
const { style } = item;
|
|
71
|
+
|
|
72
|
+
style.gridRowEnd = '';
|
|
64
73
|
});
|
|
65
74
|
}
|
|
66
75
|
}
|