masonry-simple 4.2.1 → 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.
Files changed (5) hide show
  1. package/dist/index.cjs.js +1 -1
  2. package/dist/index.d.ts +11 -5
  3. package/dist/index.es.js +45 -31
  4. package/package.json +15 -17
  5. package/dist/index.umd.js +0 -1
package/dist/index.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";var s=Object.defineProperty;var n=(e,t,r)=>t in e?s(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r;var i=(e,t,r)=>n(e,typeof t!="symbol"?t+"":t,r);module.exports=class{constructor(e={}){i(this,"container");i(this,"gridItems",[]);i(this,"rowHeight",1);i(this,"rowGap",0);i(this,"resizeObserver",null);i(this,"abortController",null);this.container=e.container instanceof HTMLElement?e.container:typeof e.container=="string"?document.querySelector(e.container):document.querySelector(".masonry")||null}handleResize(){"requestIdleCallback"in window?window.requestIdleCallback(()=>this.resizeAllItems(),{timeout:200}):setTimeout(()=>this.resizeAllItems(),200)}resizeAllItems(){this.container&&(this.container.style.alignItems="start",this.gridItems.forEach(e=>{const t=Math.ceil((e.clientHeight+this.rowGap)/(this.rowHeight+this.rowGap));e.style.gridRowEnd=`span ${t}`}))}init(){this.container&&(this.setupAbortController(),this.initializeContainerStyles(),this.initializeGridItems(),this.setupResizeObserver(),this.resizeAllItems())}setupAbortController(){this.abortController=new AbortController,this.abortController.signal.addEventListener("abort",()=>{var e;(e=this.resizeObserver)==null||e.disconnect()})}setupResizeObserver(){this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver&&this.container&&(this.resizeObserver.observe(this.container),this.gridItems.forEach(e=>this.resizeObserver.observe(e)))}initializeContainerStyles(){if(!this.container)return;const e=getComputedStyle(this.container);this.rowGap=parseInt(e.rowGap,10)||0,this.rowHeight=parseInt(e.gridAutoRows,10)||this.rowHeight,this.container.style.contain="layout"}initializeGridItems(){this.container&&(this.gridItems=Array.from(this.container.children))}destroy(){var e;this.container&&((e=this.abortController)==null||e.abort(),this.container.style.contain="",this.container.style.alignItems="",this.gridItems.forEach(t=>{t.style.gridRowEnd=""}),this.abortController=null,this.resizeObserver=null)}};
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.d.ts CHANGED
@@ -1,21 +1,27 @@
1
1
  interface MasonrySimpleOptions {
2
2
  container?: HTMLElement | string;
3
3
  }
4
- declare class MasonrySimple {
5
- private container;
4
+ export default class MasonrySimple {
5
+ private readonly container;
6
6
  private gridItems;
7
7
  private rowHeight;
8
8
  private rowGap;
9
+ private resizeScheduled;
9
10
  private resizeObserver;
11
+ private mutationObserver;
10
12
  private abortController;
13
+ private originalAutoRows;
11
14
  constructor(options?: MasonrySimpleOptions);
15
+ init(): void;
16
+ refresh(): void;
17
+ destroy(): void;
12
18
  private handleResize;
13
19
  private resizeAllItems;
14
- init(): void;
15
20
  private setupAbortController;
16
21
  private setupResizeObserver;
22
+ private setupMutationObserver;
17
23
  private initializeContainerStyles;
18
24
  private initializeGridItems;
19
- destroy(): void;
25
+ private storeAndSetAutoRows;
20
26
  }
21
- export default MasonrySimple;
27
+ export {};
package/dist/index.es.js CHANGED
@@ -1,52 +1,66 @@
1
- var s = Object.defineProperty;
2
- var n = (r, e, t) => e in r ? s(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
3
- var i = (r, e, t) => n(r, typeof e != "symbol" ? e + "" : e, t);
4
- class l {
5
- constructor(e = {}) {
6
- i(this, "container");
7
- i(this, "gridItems", []);
8
- i(this, "rowHeight", 1);
9
- i(this, "rowGap", 0);
10
- i(this, "resizeObserver", null);
11
- i(this, "abortController", null);
12
- this.container = e.container instanceof HTMLElement ? e.container : typeof e.container == "string" ? document.querySelector(e.container) : document.querySelector(".masonry") || null;
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 = "";
11
+ constructor(t = {}) {
12
+ this.container = t.container instanceof HTMLElement ? t.container : typeof t.container == "string" ? document.querySelector(t.container) : document.querySelector(".masonry");
13
+ }
14
+ init() {
15
+ this.container && (this.setupAbortController(), this.storeAndSetAutoRows(), this.initializeContainerStyles(), this.initializeGridItems(), this.setupResizeObserver(), this.setupMutationObserver(), this.resizeAllItems());
16
+ }
17
+ refresh() {
18
+ this.initializeGridItems(), this.resizeAllItems();
19
+ }
20
+ destroy() {
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 = "");
13
22
  }
14
23
  handleResize() {
15
- "requestIdleCallback" in window ? window.requestIdleCallback(() => this.resizeAllItems(), { timeout: 200 }) : setTimeout(() => this.resizeAllItems(), 200);
24
+ this.resizeScheduled || (this.resizeScheduled = !0, requestAnimationFrame(() => {
25
+ this.resizeAllItems(), this.resizeScheduled = !1;
26
+ }));
16
27
  }
17
28
  resizeAllItems() {
18
- this.container && (this.container.style.alignItems = "start", this.gridItems.forEach((e) => {
19
- const t = Math.ceil((e.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
20
- e.style.gridRowEnd = `span ${t}`;
29
+ this.container && (this.container.style.alignItems = "start", this.gridItems.forEach((t) => {
30
+ const e = Math.ceil((t.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
31
+ t.style.gridRowEnd = `span ${e}`;
21
32
  }));
22
33
  }
23
- init() {
24
- this.container && (this.setupAbortController(), this.initializeContainerStyles(), this.initializeGridItems(), this.setupResizeObserver(), this.resizeAllItems());
25
- }
26
34
  setupAbortController() {
27
35
  this.abortController = new AbortController(), this.abortController.signal.addEventListener("abort", () => {
28
- var e;
29
- (e = this.resizeObserver) == null || e.disconnect();
36
+ this.resizeObserver?.disconnect(), this.mutationObserver?.disconnect();
30
37
  });
31
38
  }
32
39
  setupResizeObserver() {
33
- this.resizeObserver = new ResizeObserver(() => this.handleResize()), this.resizeObserver && this.container && (this.resizeObserver.observe(this.container), this.gridItems.forEach((e) => this.resizeObserver.observe(e)));
40
+ this.resizeObserver = new ResizeObserver(() => this.handleResize()), this.resizeObserver.observe(this.container);
41
+ }
42
+ setupMutationObserver() {
43
+ this.mutationObserver = new MutationObserver(() => {
44
+ this.initializeGridItems(), this.resizeAllItems();
45
+ }), this.mutationObserver.observe(this.container, { childList: !0, subtree: !1 });
34
46
  }
35
47
  initializeContainerStyles() {
36
48
  if (!this.container) return;
37
- const e = getComputedStyle(this.container);
38
- this.rowGap = parseInt(e.rowGap, 10) || 0, this.rowHeight = parseInt(e.gridAutoRows, 10) || this.rowHeight, this.container.style.contain = "layout";
49
+ const t = getComputedStyle(this.container);
50
+ this.rowGap = parseInt(t.rowGap, 10) || 0;
51
+ const e = parseInt(t.gridAutoRows, 10);
52
+ this.rowHeight = Number.isNaN(e) ? this.rowHeight : e, this.container.style.contain = "layout";
39
53
  }
40
54
  initializeGridItems() {
41
- this.container && (this.gridItems = Array.from(this.container.children));
55
+ this.container && (this.gridItems = Array.from(this.container.children), this.gridItems.forEach((t) => {
56
+ const e = t.querySelector("img");
57
+ e && !e.complete && e.addEventListener("load", () => this.resizeAllItems(), { once: !0 });
58
+ }));
42
59
  }
43
- destroy() {
44
- var e;
45
- this.container && ((e = this.abortController) == null || e.abort(), this.container.style.contain = "", this.container.style.alignItems = "", this.gridItems.forEach((t) => {
46
- t.style.gridRowEnd = "";
47
- }), this.abortController = null, this.resizeObserver = null);
60
+ storeAndSetAutoRows() {
61
+ this.container && (this.originalAutoRows || (this.originalAutoRows = this.container.style.gridAutoRows || ""), this.container.style.gridAutoRows = "1px");
48
62
  }
49
63
  }
50
64
  export {
51
- l as default
65
+ s as default
52
66
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "masonry-simple",
3
- "version": "4.2.1",
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",
@@ -24,13 +24,11 @@
24
24
  "source": "src/index.ts",
25
25
  "main": "dist/index.cjs.js",
26
26
  "module": "dist/index.es.js",
27
- "browser": "./dist/index.umd.js",
28
27
  "types": "dist/index.d.ts",
29
28
  "exports": {
30
29
  ".": {
31
30
  "require": "./dist/index.cjs.js",
32
- "import": "./dist/index.es.js",
33
- "default": "./dist/index.umd.js"
31
+ "import": "./dist/index.es.js"
34
32
  },
35
33
  "./dist/*": "./dist/*"
36
34
  },
@@ -38,21 +36,21 @@
38
36
  "dist/"
39
37
  ],
40
38
  "devDependencies": {
41
- "@eslint/js": "9.22.0",
39
+ "@eslint/js": "9.31.0",
42
40
  "@rollup/plugin-terser": "0.4.4",
43
- "@types/node": "22.13.10",
44
- "@typescript-eslint/eslint-plugin": "8.26.0",
45
- "@typescript-eslint/parser": "8.26.0",
46
- "eslint": "9.22.0",
47
- "eslint-config-prettier": "10.1.1",
48
- "eslint-import-resolver-typescript": "3.8.3",
49
- "eslint-plugin-import": "2.31.0",
50
- "globals": "16.0.0",
51
- "prettier": "3.5.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",
52
50
  "rimraf": "6.0.1",
53
- "typescript": "5.8.2",
54
- "vite": "6.2.1",
55
- "vite-plugin-dts": "4.5.3"
51
+ "typescript": "5.8.3",
52
+ "vite": "7.0.4",
53
+ "vite-plugin-dts": "4.5.4"
56
54
  },
57
55
  "keywords": [
58
56
  "masonry",
package/dist/index.umd.js DELETED
@@ -1 +0,0 @@
1
- (function(e,t){typeof exports=="object"&&typeof module<"u"?module.exports=t():typeof define=="function"&&define.amd?define(t):(e=typeof globalThis<"u"?globalThis:e||self).MasonrySimple=t()})(this,function(){"use strict";var s=Object.defineProperty;var n=(e,t,r)=>t in e?s(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r;var i=(e,t,r)=>n(e,typeof t!="symbol"?t+"":t,r);return class{constructor(e={}){i(this,"container");i(this,"gridItems",[]);i(this,"rowHeight",1);i(this,"rowGap",0);i(this,"resizeObserver",null);i(this,"abortController",null);this.container=e.container instanceof HTMLElement?e.container:typeof e.container=="string"?document.querySelector(e.container):document.querySelector(".masonry")||null}handleResize(){"requestIdleCallback"in window?window.requestIdleCallback(()=>this.resizeAllItems(),{timeout:200}):setTimeout(()=>this.resizeAllItems(),200)}resizeAllItems(){this.container&&(this.container.style.alignItems="start",this.gridItems.forEach(e=>{const t=Math.ceil((e.clientHeight+this.rowGap)/(this.rowHeight+this.rowGap));e.style.gridRowEnd=`span ${t}`}))}init(){this.container&&(this.setupAbortController(),this.initializeContainerStyles(),this.initializeGridItems(),this.setupResizeObserver(),this.resizeAllItems())}setupAbortController(){this.abortController=new AbortController,this.abortController.signal.addEventListener("abort",()=>{var e;(e=this.resizeObserver)==null||e.disconnect()})}setupResizeObserver(){this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver&&this.container&&(this.resizeObserver.observe(this.container),this.gridItems.forEach(e=>this.resizeObserver.observe(e)))}initializeContainerStyles(){if(!this.container)return;const e=getComputedStyle(this.container);this.rowGap=parseInt(e.rowGap,10)||0,this.rowHeight=parseInt(e.gridAutoRows,10)||this.rowHeight,this.container.style.contain="layout"}initializeGridItems(){this.container&&(this.gridItems=Array.from(this.container.children))}destroy(){var e;this.container&&((e=this.abortController)==null||e.abort(),this.container.style.contain="",this.container.style.alignItems="",this.gridItems.forEach(t=>{t.style.gridRowEnd=""}),this.abortController=null,this.resizeObserver=null)}}});