masonry-snap-grid-layout 0.0.4 → 0.0.5

package/README.md

@@ -31,6 +31,7 @@ yarn add masonry-snap-grid-layout
 
 ```ts
 import MasonrySnapGridLayout from 'masonry-snap-grid-layout';
+import 'masonry-snap-grid-layout/dist/index.css'; // Import the CSS!
 
 const container = document.getElementById('masonry-container')!;
 const masonry = new MasonrySnapGridLayout(container, {
@@ -61,7 +62,8 @@ In your HTML:
 'use client';
 
 import React from 'react';
-import MasonrySnapGrid from 'masonry-snap-grid-layout/react'; // Adjust path if needed
+import MasonrySnapGrid from 'masonry-snap-grid-layout/react';
+import 'masonry-snap-grid-layout/dist/index.css'; // Import the CSS!
 
 export default function MasonryGrid() {
   const items = Array.from({ length: 25 }, (_, i) => i);

package/dist/MasonrySnapGridLayout-CF1GeXL9.d.cts

@@ -0,0 +1,71 @@
+/**
+ * MasonrySnapGridLayoutClassNames
+ * Optional CSS class names to override default styling selectors.
+ * Enables users to customize CSS classes easily.
+ */
+interface MasonrySnapGridLayoutClassNames {
+    container: string;
+    item?: string;
+    itemContent?: string;
+    itemHeader?: string;
+    itemTitle?: string;
+    itemId?: string;
+    itemBody?: string;
+    progressBar?: string;
+    progress?: string;
+    itemFooter?: string;
+}
+/**
+ * MasonrySnapGridLayoutOptions
+ * Configuration options accepted by MasonrySnapGridLayout.
+ */
+interface MasonrySnapGridLayoutOptions {
+    /** Spacing between items in pixels (default: 16) */
+    gutter?: number;
+    /** Minimum width for each column in pixels (default: 250) */
+    minColWidth?: number;
+    /** Enable or disable animations (default: true) */
+    animate?: boolean;
+    /** Duration of animation transitions in milliseconds (default: 400) */
+    transitionDuration?: number;
+    /** Initial number of items to generate on init (default: 30) */
+    initialItems?: number;
+    /**
+     * Optional class names object to override default CSS class names.
+     */
+    classNames?: MasonrySnapGridLayoutClassNames;
+    /**
+     * Item content can be:
+     * - a callback function that receives the item index and returns an HTMLElement or string (HTML markup),
+     * - a static HTMLElement or string (HTML markup) for all items,
+     * - or null to use the default template.
+     */
+    itemContent?: ((index: number) => HTMLElement | string) | HTMLElement | string | null;
+}
+
+declare class MasonrySnapGridLayout {
+    private readonly container;
+    private readonly options;
+    private classNames;
+    private items;
+    private positions;
+    private columnHeights;
+    private columns;
+    private lastPositions;
+    private resizeRaf;
+    private resizeObserver;
+    private boundResizeHandler;
+    constructor(container: HTMLElement, options?: MasonrySnapGridLayoutOptions);
+    private init;
+    private setupEventListeners;
+    generateItems(count: number): void;
+    private createItem;
+    calculateLayout(): void;
+    applyLayout(animate?: boolean): void;
+    private handleResize;
+    shuffleItems(): void;
+    addItems(count: number): void;
+    destroy(): void;
+}
+
+export { MasonrySnapGridLayout as M, type MasonrySnapGridLayoutOptions as a };

package/dist/MasonrySnapGridLayout-CF1GeXL9.d.ts

@@ -0,0 +1,71 @@
+/**
+ * MasonrySnapGridLayoutClassNames
+ * Optional CSS class names to override default styling selectors.
+ * Enables users to customize CSS classes easily.
+ */
+interface MasonrySnapGridLayoutClassNames {
+    container: string;
+    item?: string;
+    itemContent?: string;
+    itemHeader?: string;
+    itemTitle?: string;
+    itemId?: string;
+    itemBody?: string;
+    progressBar?: string;
+    progress?: string;
+    itemFooter?: string;
+}
+/**
+ * MasonrySnapGridLayoutOptions
+ * Configuration options accepted by MasonrySnapGridLayout.
+ */
+interface MasonrySnapGridLayoutOptions {
+    /** Spacing between items in pixels (default: 16) */
+    gutter?: number;
+    /** Minimum width for each column in pixels (default: 250) */
+    minColWidth?: number;
+    /** Enable or disable animations (default: true) */
+    animate?: boolean;
+    /** Duration of animation transitions in milliseconds (default: 400) */
+    transitionDuration?: number;
+    /** Initial number of items to generate on init (default: 30) */
+    initialItems?: number;
+    /**
+     * Optional class names object to override default CSS class names.
+     */
+    classNames?: MasonrySnapGridLayoutClassNames;
+    /**
+     * Item content can be:
+     * - a callback function that receives the item index and returns an HTMLElement or string (HTML markup),
+     * - a static HTMLElement or string (HTML markup) for all items,
+     * - or null to use the default template.
+     */
+    itemContent?: ((index: number) => HTMLElement | string) | HTMLElement | string | null;
+}
+
+declare class MasonrySnapGridLayout {
+    private readonly container;
+    private readonly options;
+    private classNames;
+    private items;
+    private positions;
+    private columnHeights;
+    private columns;
+    private lastPositions;
+    private resizeRaf;
+    private resizeObserver;
+    private boundResizeHandler;
+    constructor(container: HTMLElement, options?: MasonrySnapGridLayoutOptions);
+    private init;
+    private setupEventListeners;
+    generateItems(count: number): void;
+    private createItem;
+    calculateLayout(): void;
+    applyLayout(animate?: boolean): void;
+    private handleResize;
+    shuffleItems(): void;
+    addItems(count: number): void;
+    destroy(): void;
+}
+
+export { MasonrySnapGridLayout as M, type MasonrySnapGridLayoutOptions as a };

package/dist/esm/index.js

@@ -1,10 +1,5 @@
 // src/MasonrySnapGridLayout.ts
 var MasonrySnapGridLayout = class {
-  /**
-   * Constructor initializes the layout with container element and options
-   * @param container HTMLElement container where masonry items are rendered
-   * @param options configuration options for layout and styling
-   */
   constructor(container2, options = {}) {
     this.items = [];
     this.positions = [];
@@ -12,65 +7,46 @@ var MasonrySnapGridLayout = class {
     this.columns = 0;
     this.lastPositions = [];
     this.resizeRaf = null;
+    this.resizeObserver = null;
+    this.boundResizeHandler = this.handleResize.bind(this);
     this.container = container2;
+    this.classNames = {
+      container: "masonry-snap-grid-container",
+      item: "masonry-snap-grid-item",
+      itemContent: "masonry-snap-grid-item-content",
+      itemHeader: "masonry-snap-grid-item-header",
+      itemTitle: "masonry-snap-grid-item-title",
+      itemId: "masonry-snap-grid-item-id",
+      itemBody: "masonry-snap-grid-item-body",
+      progressBar: "masonry-snap-grid-progress-bar",
+      progress: "masonry-snap-grid-progress",
+      itemFooter: "masonry-snap-grid-item-footer",
+      ...options.classNames || {}
+    };
     this.options = {
       gutter: 16,
       minColWidth: 250,
       animate: true,
       transitionDuration: 400,
-      initialItems: 30,
+      initialItems: 0,
       itemContent: null,
-      classNames: {
-        container: "masonry-snap-grid-layout-container",
-        item: "masonry-snap-grid-layout-item",
-        itemContent: "item-content",
-        itemHeader: "item-header",
-        itemTitle: "item-title",
-        itemId: "item-id",
-        itemBody: "item-body",
-        progressBar: "progress-bar",
-        progress: "progress",
-        itemFooter: "item-footer"
-      },
+      classNames: this.classNames,
       ...options
     };
-    this.classNames = {
-      container: "masonry-snap-grid-layout-container",
-      item: "masonry-snap-grid-layout-item",
-      itemContent: "item-content",
-      itemHeader: "item-header",
-      itemTitle: "item-title",
-      itemId: "item-id",
-      itemBody: "item-body",
-      progressBar: "progress-bar",
-      progress: "progress",
-      itemFooter: "item-footer",
-      ...this.options.classNames || {}
-    };
     this.container.classList.add(this.classNames.container);
     this.init();
   }
-  /**
-   * Initialization: set listeners, generate initial items, layout
-   */
   init() {
     this.setupEventListeners();
     this.generateItems(this.options.initialItems);
     this.calculateLayout();
     this.applyLayout(false);
   }
-  /**
-   * Setup event listeners for window resize and container resize observer
-   */
   setupEventListeners() {
-    const resizeObserver = new ResizeObserver(() => this.handleResize());
-    resizeObserver.observe(this.container);
-    window.addEventListener("resize", () => this.handleResize());
+    this.resizeObserver = new ResizeObserver(() => this.handleResize());
+    this.resizeObserver.observe(this.container);
+    window.addEventListener("resize", this.boundResizeHandler);
   }
-  /**
-   * Generate specified number of items, removing excess if any
-   * @param count number of items to generate
-   */
   generateItems(count) {
     if (count < this.items.length) {
       this.items.slice(count).forEach((item) => item.remove());
@@ -86,11 +62,6 @@ var MasonrySnapGridLayout = class {
     }
     this.container.appendChild(fragment);
   }
-  /**
-   * Create a single masonry item HTMLElement, with content from renderItemContent callback or default template
-   * @param index index of the item
-   * @returns HTMLElement for the item
-   */
   createItem(index) {
     const div = document.createElement("div");
     div.className = this.classNames.item;
@@ -101,52 +72,17 @@ var MasonrySnapGridLayout = class {
     } else if (contentOption instanceof HTMLElement || typeof contentOption === "string") {
       content = contentOption;
     } else {
-      content = this.defaultItemContent(index);
+      content = `Item ${index + 1}`;
     }
     if (typeof content === "string") {
-      div.innerHTML = content;
+      div.textContent = content;
     } else {
       div.appendChild(content);
     }
-    const height = 120 + Math.floor(Math.random() * 180);
+    const height = 120 + Math.floor(Math.random() * 100);
     div.style.height = `${height}px`;
-    const hue = index * 137.508 % 360;
-    div.style.background = `linear-gradient(135deg, hsl(${hue}, 70%, 60%), hsl(${hue + 40}, 70%, 50%))`;
     return div;
   }
-  /**
-   * Default item content template string
-   * @param index index of the item
-   * @returns string HTML template for item content
-   */
-  defaultItemContent(index) {
-    return `
-      <div class="${this.classNames.itemContent}">
-        <div class="${this.classNames.itemHeader}">
-          <div class="${this.classNames.itemTitle}">Item ${index + 1}</div>
-          <div class="${this.classNames.itemId}">#${index + 1}</div>
-        </div>
-        <div class="${this.classNames.itemBody}">
-          <div class="${this.classNames.progressBar}">
-            <div class="${this.classNames.progress}"></div>
-          </div>
-        </div>
-        <div class="${this.classNames.itemFooter}">
-          ${this.getRandomEmoji()}
-        </div>
-      </div>
-    `;
-  }
-  /**
-   * Returns a random emoji from a fixed set for item footer
-   */
-  getRandomEmoji() {
-    const emojis = ["\u{1F680}", "\u2728", "\u{1F525}", "\u{1F4A1}", "\u{1F31F}", "\u{1F3AF}", "\u26A1", "\u{1F4BB}", "\u{1F527}", "\u{1F4CA}"];
-    return emojis[Math.floor(Math.random() * emojis.length)];
-  }
-  /**
-   * Calculate positions of each item in masonry grid based on container width, gutter, min column width
-   */
   calculateLayout() {
     const { gutter, minColWidth } = this.options;
     const containerWidth = this.container.clientWidth;
@@ -171,10 +107,6 @@ var MasonrySnapGridLayout = class {
     const maxHeight = Math.max(...this.columnHeights);
     this.container.style.height = `${maxHeight}px`;
   }
-  /**
-   * Apply calculated positions to each item with optional animation
-   * @param animate whether to animate layout changes (default false)
-   */
   applyLayout(animate = false) {
     const duration = this.options.transitionDuration;
     this.items.forEach((item, i) => {
@@ -187,7 +119,7 @@ var MasonrySnapGridLayout = class {
         item.style.transition = "none";
         item.style.transform = `translate3d(${pos.x + dx}px, ${pos.y + dy}px, 0)`;
         void item.offsetHeight;
-        item.style.transition = `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
+        item.style.transition = `transform ${duration}ms ease`;
         item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;
       } else {
         item.style.transition = "none";
@@ -195,9 +127,6 @@ var MasonrySnapGridLayout = class {
       }
     });
   }
-  /**
-   * Handle container resize using RAF to optimize performance
-   */
   handleResize() {
     if (this.resizeRaf) cancelAnimationFrame(this.resizeRaf);
     this.resizeRaf = requestAnimationFrame(() => {
@@ -205,9 +134,6 @@ var MasonrySnapGridLayout = class {
       this.applyLayout(true);
     });
   }
-  /**
-   * Shuffle items randomly and reapply layout with animation
-   */
   shuffleItems() {
     for (let i = this.items.length - 1; i > 0; i--) {
       const j = Math.floor(Math.random() * (i + 1));
@@ -219,16 +145,31 @@ var MasonrySnapGridLayout = class {
     this.calculateLayout();
     this.applyLayout(true);
   }
-  /**
-   * Add more items dynamically
-   * @param count number of items to add
-   */
   addItems(count) {
     const newCount = this.items.length + count;
     this.generateItems(newCount);
     this.calculateLayout();
     this.applyLayout(true);
   }
+  destroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    window.removeEventListener("resize", this.boundResizeHandler);
+    if (this.resizeRaf) {
+      cancelAnimationFrame(this.resizeRaf);
+      this.resizeRaf = null;
+    }
+    this.container.innerHTML = "";
+    this.container.removeAttribute("style");
+    this.container.classList.remove(this.classNames.container);
+    this.items = [];
+    this.positions = [];
+    this.columnHeights = [];
+    this.columns = 0;
+    this.lastPositions = [];
+  }
 };
 
 // src/index.ts

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MasonrySnapGridLayout.ts","../../src/index.ts"],"sourcesContent":["/**\r\n * MasonrySnapGridLayout\r\n * A performant masonry grid layout library with smooth animations,\r\n * customizable gutter, columns, and dynamic item content.\r\n *\r\n * Package name: masonry-snap-grid-layout\r\n */\r\n\r\nimport { MasonrySnapGridLayoutClassNames, MasonrySnapGridLayoutOptions } from \"./types\";\r\n\r\nexport default class MasonrySnapGridLayout {\r\n    private readonly container: HTMLElement;\r\n    private readonly options: Required<MasonrySnapGridLayoutOptions>;\r\n    private classNames: Required<MasonrySnapGridLayoutClassNames>;\r\n\r\n    private items: HTMLElement[] = [];\r\n    private positions: { x: number; y: number; width: number; height: number }[] = [];\r\n    private columnHeights: number[] = [];\r\n    private columns: number = 0;\r\n    private lastPositions: typeof this.positions = [];\r\n    private resizeRaf: number | null = null;\r\n\r\n    /**\r\n     * Constructor initializes the layout with container element and options\r\n     * @param container HTMLElement container where masonry items are rendered\r\n     * @param options configuration options for layout and styling\r\n     */\r\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions = {}) {\r\n        this.container = container;\r\n\r\n        // Set default options with overrides from user\r\n        this.options = {\r\n            gutter: 16,\r\n            minColWidth: 250,\r\n            animate: true,\r\n            transitionDuration: 400,\r\n            initialItems: 30,\r\n            itemContent: null,\r\n            classNames: {\r\n                container: \"masonry-snap-grid-layout-container\",\r\n                item: \"masonry-snap-grid-layout-item\",\r\n                itemContent: \"item-content\",\r\n                itemHeader: \"item-header\",\r\n                itemTitle: \"item-title\",\r\n                itemId: \"item-id\",\r\n                itemBody: \"item-body\",\r\n                progressBar: \"progress-bar\",\r\n                progress: \"progress\",\r\n                itemFooter: \"item-footer\",\r\n            },\r\n            ...options,\r\n        };\r\n\r\n        // Merge default classNames with user provided classNames\r\n        this.classNames = {\r\n            container: \"masonry-snap-grid-layout-container\",\r\n            item: \"masonry-snap-grid-layout-item\",\r\n            itemContent: \"item-content\",\r\n            itemHeader: \"item-header\",\r\n            itemTitle: \"item-title\",\r\n            itemId: \"item-id\",\r\n            itemBody: \"item-body\",\r\n            progressBar: \"progress-bar\",\r\n            progress: \"progress\",\r\n            itemFooter: \"item-footer\",\r\n            ...(this.options.classNames || {}),\r\n        };\r\n\r\n        // Add container class for styling\r\n        this.container.classList.add(this.classNames.container);\r\n\r\n        // Initialize the layout\r\n        this.init();\r\n    }\r\n\r\n    /**\r\n     * Initialization: set listeners, generate initial items, layout\r\n     */\r\n    private init() {\r\n        this.setupEventListeners();\r\n        this.generateItems(this.options.initialItems);\r\n        this.calculateLayout();\r\n        this.applyLayout(false);\r\n    }\r\n\r\n    /**\r\n     * Setup event listeners for window resize and container resize observer\r\n     */\r\n    private setupEventListeners() {\r\n        // Use ResizeObserver to handle container size changes\r\n        const resizeObserver = new ResizeObserver(() => this.handleResize());\r\n        resizeObserver.observe(this.container);\r\n\r\n        window.addEventListener(\"resize\", () => this.handleResize());\r\n    }\r\n\r\n    /**\r\n     * Generate specified number of items, removing excess if any\r\n     * @param count number of items to generate\r\n     */\r\n    private generateItems(count: number) {\r\n        // Remove extra items if reducing count\r\n        if (count < this.items.length) {\r\n            this.items.slice(count).forEach((item) => item.remove());\r\n            this.items = this.items.slice(0, count);\r\n            return;\r\n        }\r\n\r\n        const startIndex = this.items.length;\r\n        const fragment = document.createDocumentFragment();\r\n\r\n        for (let i = startIndex; i < count; i++) {\r\n            const item = this.createItem(i);\r\n            fragment.appendChild(item);\r\n            this.items.push(item);\r\n        }\r\n\r\n        this.container.appendChild(fragment);\r\n    }\r\n\r\n    /**\r\n     * Create a single masonry item HTMLElement, with content from renderItemContent callback or default template\r\n     * @param index index of the item\r\n     * @returns HTMLElement for the item\r\n     */\r\n    private createItem(index: number): HTMLElement {\r\n        const div = document.createElement(\"div\");\r\n        div.className = this.classNames.item;\r\n\r\n        const contentOption = this.options.itemContent;\r\n\r\n        // Determine content type: function, static HTMLElement, static string, or fallback to default\r\n        let content: HTMLElement | string;\r\n\r\n        if (typeof contentOption === \"function\") {\r\n            // Call function with index to get content\r\n            content = contentOption(index);\r\n        } else if (contentOption instanceof HTMLElement || typeof contentOption === \"string\") {\r\n            // Use static content\r\n            content = contentOption;\r\n        } else {\r\n            // Fallback to default item content template string\r\n            content = this.defaultItemContent(index);\r\n        }\r\n\r\n        // Insert content into item element\r\n        if (typeof content === \"string\") {\r\n            div.innerHTML = content;\r\n        } else {\r\n            div.appendChild(content);\r\n        }\r\n\r\n        // Random height to simulate masonry effect\r\n        const height = 120 + Math.floor(Math.random() * 180);\r\n        div.style.height = `${height}px`;\r\n\r\n        // Color with HSL for distinct appearance\r\n        const hue = (index * 137.508) % 360; // golden angle\r\n        div.style.background = `linear-gradient(135deg, hsl(${hue}, 70%, 60%), hsl(${hue + 40}, 70%, 50%))`;\r\n\r\n        return div;\r\n    }\r\n\r\n    /**\r\n     * Default item content template string\r\n     * @param index index of the item\r\n     * @returns string HTML template for item content\r\n     */\r\n    private defaultItemContent(index: number): string {\r\n        return `\r\n      <div class=\"${this.classNames.itemContent}\">\r\n        <div class=\"${this.classNames.itemHeader}\">\r\n          <div class=\"${this.classNames.itemTitle}\">Item ${index + 1}</div>\r\n          <div class=\"${this.classNames.itemId}\">#${index + 1}</div>\r\n        </div>\r\n        <div class=\"${this.classNames.itemBody}\">\r\n          <div class=\"${this.classNames.progressBar}\">\r\n            <div class=\"${this.classNames.progress}\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"${this.classNames.itemFooter}\">\r\n          ${this.getRandomEmoji()}\r\n        </div>\r\n      </div>\r\n    `;\r\n    }\r\n\r\n    /**\r\n     * Returns a random emoji from a fixed set for item footer\r\n     */\r\n    private getRandomEmoji(): string {\r\n        const emojis = [\"🚀\", \"✨\", \"🔥\", \"💡\", \"🌟\", \"🎯\", \"⚡\", \"💻\", \"🔧\", \"📊\"];\r\n        return emojis[Math.floor(Math.random() * emojis.length)];\r\n    }\r\n\r\n    /**\r\n     * Calculate positions of each item in masonry grid based on container width, gutter, min column width\r\n     */\r\n    private calculateLayout() {\r\n        const { gutter, minColWidth } = this.options;\r\n        const containerWidth = this.container.clientWidth;\r\n\r\n        // Calculate number of columns that fit\r\n        this.columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\r\n\r\n        // Calculate each column width\r\n        const colWidth = (containerWidth - (this.columns - 1) * gutter) / this.columns;\r\n\r\n        // Store previous positions for animation\r\n        this.lastPositions = [...this.positions];\r\n\r\n        // Reset column heights array\r\n        this.columnHeights = new Array(this.columns).fill(0);\r\n        this.positions = [];\r\n\r\n        // Calculate position for each item and assign column\r\n        this.items.forEach((item, i) => {\r\n            const height = item.offsetHeight;\r\n\r\n            // Find the shortest column index\r\n            let minCol = 0;\r\n            for (let c = 1; c < this.columns; c++) {\r\n                if (this.columnHeights[c] < this.columnHeights[minCol]) {\r\n                    minCol = c;\r\n                }\r\n            }\r\n\r\n            // Calculate item's x,y position\r\n            const x = minCol * (colWidth + gutter);\r\n            const y = this.columnHeights[minCol];\r\n\r\n            // Save calculated position\r\n            this.positions[i] = { x, y, width: colWidth, height };\r\n\r\n            // Update column height to include this item + gutter\r\n            this.columnHeights[minCol] += height + gutter;\r\n        });\r\n\r\n        // Set container height to max column height for proper scrolling\r\n        const maxHeight = Math.max(...this.columnHeights);\r\n        this.container.style.height = `${maxHeight}px`;\r\n    }\r\n\r\n    /**\r\n     * Apply calculated positions to each item with optional animation\r\n     * @param animate whether to animate layout changes (default false)\r\n     */\r\n    private applyLayout(animate: boolean = false) {\r\n        const duration = this.options.transitionDuration;\r\n\r\n        this.items.forEach((item, i) => {\r\n            const pos = this.positions[i] || { x: 0, y: 0, width: 0 };\r\n            const lastPos = this.lastPositions[i] || { x: 0, y: 0 };\r\n\r\n            // Set item width for responsive columns\r\n            item.style.width = `${pos.width}px`;\r\n\r\n            if (animate) {\r\n                // Calculate differences for smooth animation\r\n                const dx = lastPos.x - pos.x;\r\n                const dy = lastPos.y - pos.y;\r\n\r\n                // Apply initial transform to old position (without transition)\r\n                item.style.transition = \"none\";\r\n                item.style.transform = `translate3d(${pos.x + dx}px, ${pos.y + dy}px, 0)`;\r\n\r\n                // Trigger reflow to apply the style immediately\r\n                void item.offsetHeight;\r\n\r\n                // Animate transform to new position\r\n                item.style.transition = `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`;\r\n                item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;\r\n            } else {\r\n                // Directly set transform without animation\r\n                item.style.transition = \"none\";\r\n                item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;\r\n            }\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Handle container resize using RAF to optimize performance\r\n     */\r\n    private handleResize() {\r\n        if (this.resizeRaf) cancelAnimationFrame(this.resizeRaf);\r\n        this.resizeRaf = requestAnimationFrame(() => {\r\n            this.calculateLayout();\r\n            this.applyLayout(true);\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Shuffle items randomly and reapply layout with animation\r\n     */\r\n    public shuffleItems() {\r\n        // Fisher-Yates shuffle algorithm\r\n        for (let i = this.items.length - 1; i > 0; i--) {\r\n            const j = Math.floor(Math.random() * (i + 1));\r\n            [this.items[i], this.items[j]] = [this.items[j], this.items[i]];\r\n        }\r\n\r\n        // Re-append items in new order in DOM\r\n        const fragment = document.createDocumentFragment();\r\n        this.items.forEach((item) => fragment.appendChild(item));\r\n        this.container.appendChild(fragment);\r\n\r\n        // Update layout positions and animate\r\n        this.calculateLayout();\r\n        this.applyLayout(true);\r\n    }\r\n\r\n    /**\r\n     * Add more items dynamically\r\n     * @param count number of items to add\r\n     */\r\n    public addItems(count: number) {\r\n        const newCount = this.items.length + count;\r\n        this.generateItems(newCount);\r\n        this.calculateLayout();\r\n        this.applyLayout(true);\r\n    }\r\n}\r\n","import './masonry-snap-grid-layout.css';\r\nimport MasonrySnapGridLayout  from './MasonrySnapGridLayout';\r\n\r\nconst container = document.getElementById('masonry');\r\nif (container) {\r\n    const masonry = new MasonrySnapGridLayout(container, {\r\n        gutter: 20,\r\n        minColWidth: 200,\r\n        animate: true,\r\n        initialItems: 40,\r\n\r\n        // Custom item content example\r\n        itemContent: (index) => {\r\n            const div = document.createElement('div');\r\n            div.textContent = `Custom Item ${index + 1}`;\r\n            div.style.color = '#fff';\r\n            div.style.fontWeight = 'bold';\r\n            div.style.textAlign = 'center';\r\n            div.style.padding = '1rem';\r\n            return div;\r\n        },\r\n\r\n        classNames: {\r\n            container: 'masonry-snap-grid-layout-container',\r\n            item: 'masonry-snap-grid-layout-item',\r\n        },\r\n    });\r\n\r\n    // Example to update count later\r\n    masonry.addItems(5);\r\n\r\n    // Example to shuffle items\r\n    masonry.shuffleItems();\r\n}\r\n\r\nexport default MasonrySnapGridLayout;\r\nexport { MasonrySnapGridLayout };"],"mappings":"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","names":["container"]}
+{"version":3,"sources":["../../src/MasonrySnapGridLayout.ts","../../src/index.ts"],"sourcesContent":["import { MasonrySnapGridLayoutClassNames, MasonrySnapGridLayoutOptions } from './types';\r\n\r\nexport default class MasonrySnapGridLayout {\r\n    private readonly container: HTMLElement;\r\n    private readonly options: Required<MasonrySnapGridLayoutOptions>;\r\n    private classNames: Required<MasonrySnapGridLayoutClassNames>;\r\n\r\n    private items: HTMLElement[] = [];\r\n    private positions: { x: number; y: number; width: number; height: number }[] = [];\r\n    private columnHeights: number[] = [];\r\n    private columns: number = 0;\r\n    private lastPositions: typeof this.positions = [];\r\n    private resizeRaf: number | null = null;\r\n\r\n    private resizeObserver: ResizeObserver | null = null;\r\n    private boundResizeHandler = this.handleResize.bind(this);\r\n\r\n    constructor(container: HTMLElement, options: MasonrySnapGridLayoutOptions = {}) {\r\n        this.container = container;\r\n        this.classNames = {\r\n            container: 'masonry-snap-grid-container',\r\n            item: 'masonry-snap-grid-item',\r\n            itemContent: 'masonry-snap-grid-item-content',\r\n            itemHeader: 'masonry-snap-grid-item-header',\r\n            itemTitle: 'masonry-snap-grid-item-title',\r\n            itemId: 'masonry-snap-grid-item-id',\r\n            itemBody: 'masonry-snap-grid-item-body',\r\n            progressBar: 'masonry-snap-grid-progress-bar',\r\n            progress: 'masonry-snap-grid-progress',\r\n            itemFooter: 'masonry-snap-grid-item-footer',\r\n            ...(options.classNames || {}),\r\n        }\r\n        this.options = {\r\n            gutter: 16,\r\n            minColWidth: 250,\r\n            animate: true,\r\n            transitionDuration: 400,\r\n            initialItems: 0,\r\n            itemContent: null,\r\n            classNames: this.classNames,\r\n            ...options,\r\n        };\r\n\r\n\r\n        this.container.classList.add(this.classNames.container);\r\n        this.init();\r\n    }\r\n\r\n    private init() {\r\n        this.setupEventListeners();\r\n        this.generateItems(this.options.initialItems);\r\n        this.calculateLayout();\r\n        this.applyLayout(false);\r\n    }\r\n\r\n    private setupEventListeners() {\r\n        this.resizeObserver = new ResizeObserver(() => this.handleResize());\r\n        this.resizeObserver.observe(this.container);\r\n\r\n        window.addEventListener('resize', this.boundResizeHandler);\r\n    }\r\n\r\n    public generateItems(count: number) {\r\n        if (count < this.items.length) {\r\n            this.items.slice(count).forEach((item) => item.remove());\r\n            this.items = this.items.slice(0, count);\r\n            return;\r\n        }\r\n\r\n        const startIndex = this.items.length;\r\n        const fragment = document.createDocumentFragment();\r\n\r\n        for (let i = startIndex; i < count; i++) {\r\n            const item = this.createItem(i);\r\n            fragment.appendChild(item);\r\n            this.items.push(item);\r\n        }\r\n\r\n        this.container.appendChild(fragment);\r\n    }\r\n\r\n    private createItem(index: number): HTMLElement {\r\n        const div = document.createElement('div');\r\n        div.className = this.classNames.item;\r\n\r\n        const contentOption = this.options.itemContent;\r\n        let content: HTMLElement | string;\r\n\r\n        if (typeof contentOption === 'function') {\r\n            content = contentOption(index);\r\n        } else if (contentOption instanceof HTMLElement || typeof contentOption === 'string') {\r\n            content = contentOption;\r\n        } else {\r\n            content = `Item ${index + 1}`;\r\n        }\r\n\r\n        if (typeof content === 'string') {\r\n            div.textContent = content;\r\n        } else {\r\n            div.appendChild(content);\r\n        }\r\n\r\n        // Assigning height dynamically for layout simulation (no styles applied)\r\n        const height = 120 + Math.floor(Math.random() * 100);\r\n        div.style.height = `${height}px`;\r\n\r\n        return div;\r\n    }\r\n\r\n    public calculateLayout() {\r\n        const { gutter, minColWidth } = this.options;\r\n        const containerWidth = this.container.clientWidth;\r\n\r\n        this.columns = Math.max(1, Math.floor((containerWidth + gutter) / (minColWidth + gutter)));\r\n        const colWidth = (containerWidth - (this.columns - 1) * gutter) / this.columns;\r\n\r\n        this.lastPositions = [...this.positions];\r\n        this.columnHeights = new Array(this.columns).fill(0);\r\n        this.positions = [];\r\n\r\n        this.items.forEach((item, i) => {\r\n            const height = item.offsetHeight;\r\n\r\n            let minCol = 0;\r\n            for (let c = 1; c < this.columns; c++) {\r\n                if (this.columnHeights[c] < this.columnHeights[minCol]) {\r\n                    minCol = c;\r\n                }\r\n            }\r\n\r\n            const x = minCol * (colWidth + gutter);\r\n            const y = this.columnHeights[minCol];\r\n\r\n            this.positions[i] = { x, y, width: colWidth, height };\r\n            this.columnHeights[minCol] += height + gutter;\r\n        });\r\n\r\n        const maxHeight = Math.max(...this.columnHeights);\r\n        this.container.style.height = `${maxHeight}px`;\r\n    }\r\n\r\n    applyLayout(animate: boolean = false) {\r\n        const duration = this.options.transitionDuration;\r\n\r\n        this.items.forEach((item, i) => {\r\n            const pos = this.positions[i] || { x: 0, y: 0, width: 0 };\r\n            const lastPos = this.lastPositions[i] || { x: 0, y: 0 };\r\n\r\n            item.style.width = `${pos.width}px`;\r\n\r\n            if (animate) {\r\n                const dx = lastPos.x - pos.x;\r\n                const dy = lastPos.y - pos.y;\r\n\r\n                item.style.transition = 'none';\r\n                item.style.transform = `translate3d(${pos.x + dx}px, ${pos.y + dy}px, 0)`;\r\n                void item.offsetHeight;\r\n\r\n                item.style.transition = `transform ${duration}ms ease`;\r\n                item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;\r\n            } else {\r\n                item.style.transition = 'none';\r\n                item.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;\r\n            }\r\n        });\r\n    }\r\n\r\n    private handleResize() {\r\n        if (this.resizeRaf) cancelAnimationFrame(this.resizeRaf);\r\n        this.resizeRaf = requestAnimationFrame(() => {\r\n            this.calculateLayout();\r\n            this.applyLayout(true);\r\n        });\r\n    }\r\n\r\n    public shuffleItems() {\r\n        for (let i = this.items.length - 1; i > 0; i--) {\r\n            const j = Math.floor(Math.random() * (i + 1));\r\n            [this.items[i], this.items[j]] = [this.items[j], this.items[i]];\r\n        }\r\n\r\n        const fragment = document.createDocumentFragment();\r\n        this.items.forEach((item) => fragment.appendChild(item));\r\n        this.container.appendChild(fragment);\r\n\r\n        this.calculateLayout();\r\n        this.applyLayout(true);\r\n    }\r\n\r\n    public addItems(count: number) {\r\n        const newCount = this.items.length + count;\r\n        this.generateItems(newCount);\r\n        this.calculateLayout();\r\n        this.applyLayout(true);\r\n    }\r\n\r\n    public destroy(): void {\r\n        if (this.resizeObserver) {\r\n            this.resizeObserver.disconnect();\r\n            this.resizeObserver = null;\r\n        }\r\n\r\n        window.removeEventListener('resize', this.boundResizeHandler);\r\n\r\n        if (this.resizeRaf) {\r\n            cancelAnimationFrame(this.resizeRaf);\r\n            this.resizeRaf = null;\r\n        }\r\n\r\n        this.container.innerHTML = '';\r\n        this.container.removeAttribute('style');\r\n        this.container.classList.remove(this.classNames.container);\r\n\r\n        this.items = [];\r\n        this.positions = [];\r\n        this.columnHeights = [];\r\n        this.columns = 0;\r\n        this.lastPositions = [];\r\n    }\r\n}","import './masonry-snap-grid-layout.css';\r\nimport MasonrySnapGridLayout  from './MasonrySnapGridLayout';\r\nimport {MasonrySnapGridLayoutOptions}  from './types';\r\n\r\nconst container = document.getElementById('masonry');\r\nif (container) {\r\n    const masonry = new MasonrySnapGridLayout(container, {\r\n        gutter: 20,\r\n        minColWidth: 200,\r\n        animate: true,\r\n        initialItems: 40,\r\n\r\n        // Custom item content example\r\n        itemContent: (index) => {\r\n            const div = document.createElement('div');\r\n            div.textContent = `Custom Item ${index + 1}`;\r\n            div.style.color = '#fff';\r\n            div.style.fontWeight = 'bold';\r\n            div.style.textAlign = 'center';\r\n            div.style.padding = '1rem';\r\n            return div;\r\n        },\r\n\r\n        classNames: {\r\n            container: 'masonry-snap-grid-layout-container',\r\n            item: 'masonry-snap-grid-layout-item',\r\n        },\r\n    });\r\n\r\n    // Example to update count later\r\n    masonry.addItems(5);\r\n\r\n    // Example to shuffle items\r\n    masonry.shuffleItems();\r\n}\r\n\r\nexport default MasonrySnapGridLayout;\r\nexport { MasonrySnapGridLayout, MasonrySnapGridLayoutOptions };"],"mappings":";AAEA,IAAqB,wBAArB,MAA2C;AAAA,EAevC,YAAYA,YAAwB,UAAwC,CAAC,GAAG;AAVhF,SAAQ,QAAuB,CAAC;AAChC,SAAQ,YAAuE,CAAC;AAChF,SAAQ,gBAA0B,CAAC;AACnC,SAAQ,UAAkB;AAC1B,SAAQ,gBAAuC,CAAC;AAChD,SAAQ,YAA2B;AAEnC,SAAQ,iBAAwC;AAChD,SAAQ,qBAAqB,KAAK,aAAa,KAAK,IAAI;AAGpD,SAAK,YAAYA;AACjB,SAAK,aAAa;AAAA,MACd,WAAW;AAAA,MACX,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,aAAa;AAAA,MACb,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,GAAI,QAAQ,cAAc,CAAC;AAAA,IAC/B;AACA,SAAK,UAAU;AAAA,MACX,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT,oBAAoB;AAAA,MACpB,cAAc;AAAA,MACd,aAAa;AAAA,MACb,YAAY,KAAK;AAAA,MACjB,GAAG;AAAA,IACP;AAGA,SAAK,UAAU,UAAU,IAAI,KAAK,WAAW,SAAS;AACtD,SAAK,KAAK;AAAA,EACd;AAAA,EAEQ,OAAO;AACX,SAAK,oBAAoB;AACzB,SAAK,cAAc,KAAK,QAAQ,YAAY;AAC5C,SAAK,gBAAgB;AACrB,SAAK,YAAY,KAAK;AAAA,EAC1B;AAAA,EAEQ,sBAAsB;AAC1B,SAAK,iBAAiB,IAAI,eAAe,MAAM,KAAK,aAAa,CAAC;AAClE,SAAK,eAAe,QAAQ,KAAK,SAAS;AAE1C,WAAO,iBAAiB,UAAU,KAAK,kBAAkB;AAAA,EAC7D;AAAA,EAEO,cAAc,OAAe;AAChC,QAAI,QAAQ,KAAK,MAAM,QAAQ;AAC3B,WAAK,MAAM,MAAM,KAAK,EAAE,QAAQ,CAAC,SAAS,KAAK,OAAO,CAAC;AACvD,WAAK,QAAQ,KAAK,MAAM,MAAM,GAAG,KAAK;AACtC;AAAA,IACJ;AAEA,UAAM,aAAa,KAAK,MAAM;AAC9B,UAAM,WAAW,SAAS,uBAAuB;AAEjD,aAAS,IAAI,YAAY,IAAI,OAAO,KAAK;AACrC,YAAM,OAAO,KAAK,WAAW,CAAC;AAC9B,eAAS,YAAY,IAAI;AACzB,WAAK,MAAM,KAAK,IAAI;AAAA,IACxB;AAEA,SAAK,UAAU,YAAY,QAAQ;AAAA,EACvC;AAAA,EAEQ,WAAW,OAA4B;AAC3C,UAAM,MAAM,SAAS,cAAc,KAAK;AACxC,QAAI,YAAY,KAAK,WAAW;AAEhC,UAAM,gBAAgB,KAAK,QAAQ;AACnC,QAAI;AAEJ,QAAI,OAAO,kBAAkB,YAAY;AACrC,gBAAU,cAAc,KAAK;AAAA,IACjC,WAAW,yBAAyB,eAAe,OAAO,kBAAkB,UAAU;AAClF,gBAAU;AAAA,IACd,OAAO;AACH,gBAAU,QAAQ,QAAQ,CAAC;AAAA,IAC/B;AAEA,QAAI,OAAO,YAAY,UAAU;AAC7B,UAAI,cAAc;AAAA,IACtB,OAAO;AACH,UAAI,YAAY,OAAO;AAAA,IAC3B;AAGA,UAAM,SAAS,MAAM,KAAK,MAAM,KAAK,OAAO,IAAI,GAAG;AACnD,QAAI,MAAM,SAAS,GAAG,MAAM;AAE5B,WAAO;AAAA,EACX;AAAA,EAEO,kBAAkB;AACrB,UAAM,EAAE,QAAQ,YAAY,IAAI,KAAK;AACrC,UAAM,iBAAiB,KAAK,UAAU;AAEtC,SAAK,UAAU,KAAK,IAAI,GAAG,KAAK,OAAO,iBAAiB,WAAW,cAAc,OAAO,CAAC;AACzF,UAAM,YAAY,kBAAkB,KAAK,UAAU,KAAK,UAAU,KAAK;AAEvE,SAAK,gBAAgB,CAAC,GAAG,KAAK,SAAS;AACvC,SAAK,gBAAgB,IAAI,MAAM,KAAK,OAAO,EAAE,KAAK,CAAC;AACnD,SAAK,YAAY,CAAC;AAElB,SAAK,MAAM,QAAQ,CAAC,MAAM,MAAM;AAC5B,YAAM,SAAS,KAAK;AAEpB,UAAI,SAAS;AACb,eAAS,IAAI,GAAG,IAAI,KAAK,SAAS,KAAK;AACnC,YAAI,KAAK,cAAc,CAAC,IAAI,KAAK,cAAc,MAAM,GAAG;AACpD,mBAAS;AAAA,QACb;AAAA,MACJ;AAEA,YAAM,IAAI,UAAU,WAAW;AAC/B,YAAM,IAAI,KAAK,cAAc,MAAM;AAEnC,WAAK,UAAU,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,UAAU,OAAO;AACpD,WAAK,cAAc,MAAM,KAAK,SAAS;AAAA,IAC3C,CAAC;AAED,UAAM,YAAY,KAAK,IAAI,GAAG,KAAK,aAAa;AAChD,SAAK,UAAU,MAAM,SAAS,GAAG,SAAS;AAAA,EAC9C;AAAA,EAEA,YAAY,UAAmB,OAAO;AAClC,UAAM,WAAW,KAAK,QAAQ;AAE9B,SAAK,MAAM,QAAQ,CAAC,MAAM,MAAM;AAC5B,YAAM,MAAM,KAAK,UAAU,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,EAAE;AACxD,YAAM,UAAU,KAAK,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,EAAE;AAEtD,WAAK,MAAM,QAAQ,GAAG,IAAI,KAAK;AAE/B,UAAI,SAAS;AACT,cAAM,KAAK,QAAQ,IAAI,IAAI;AAC3B,cAAM,KAAK,QAAQ,IAAI,IAAI;AAE3B,aAAK,MAAM,aAAa;AACxB,aAAK,MAAM,YAAY,eAAe,IAAI,IAAI,EAAE,OAAO,IAAI,IAAI,EAAE;AACjE,aAAK,KAAK;AAEV,aAAK,MAAM,aAAa,aAAa,QAAQ;AAC7C,aAAK,MAAM,YAAY,eAAe,IAAI,CAAC,OAAO,IAAI,CAAC;AAAA,MAC3D,OAAO;AACH,aAAK,MAAM,aAAa;AACxB,aAAK,MAAM,YAAY,eAAe,IAAI,CAAC,OAAO,IAAI,CAAC;AAAA,MAC3D;AAAA,IACJ,CAAC;AAAA,EACL;AAAA,EAEQ,eAAe;AACnB,QAAI,KAAK,UAAW,sBAAqB,KAAK,SAAS;AACvD,SAAK,YAAY,sBAAsB,MAAM;AACzC,WAAK,gBAAgB;AACrB,WAAK,YAAY,IAAI;AAAA,IACzB,CAAC;AAAA,EACL;AAAA,EAEO,eAAe;AAClB,aAAS,IAAI,KAAK,MAAM,SAAS,GAAG,IAAI,GAAG,KAAK;AAC5C,YAAM,IAAI,KAAK,MAAM,KAAK,OAAO,KAAK,IAAI,EAAE;AAC5C,OAAC,KAAK,MAAM,CAAC,GAAG,KAAK,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,GAAG,KAAK,MAAM,CAAC,CAAC;AAAA,IAClE;AAEA,UAAM,WAAW,SAAS,uBAAuB;AACjD,SAAK,MAAM,QAAQ,CAAC,SAAS,SAAS,YAAY,IAAI,CAAC;AACvD,SAAK,UAAU,YAAY,QAAQ;AAEnC,SAAK,gBAAgB;AACrB,SAAK,YAAY,IAAI;AAAA,EACzB;AAAA,EAEO,SAAS,OAAe;AAC3B,UAAM,WAAW,KAAK,MAAM,SAAS;AACrC,SAAK,cAAc,QAAQ;AAC3B,SAAK,gBAAgB;AACrB,SAAK,YAAY,IAAI;AAAA,EACzB;AAAA,EAEO,UAAgB;AACnB,QAAI,KAAK,gBAAgB;AACrB,WAAK,eAAe,WAAW;AAC/B,WAAK,iBAAiB;AAAA,IAC1B;AAEA,WAAO,oBAAoB,UAAU,KAAK,kBAAkB;AAE5D,QAAI,KAAK,WAAW;AAChB,2BAAqB,KAAK,SAAS;AACnC,WAAK,YAAY;AAAA,IACrB;AAEA,SAAK,UAAU,YAAY;AAC3B,SAAK,UAAU,gBAAgB,OAAO;AACtC,SAAK,UAAU,UAAU,OAAO,KAAK,WAAW,SAAS;AAEzD,SAAK,QAAQ,CAAC;AACd,SAAK,YAAY,CAAC;AAClB,SAAK,gBAAgB,CAAC;AACtB,SAAK,UAAU;AACf,SAAK,gBAAgB,CAAC;AAAA,EAC1B;AACJ;;;ACvNA,IAAM,YAAY,SAAS,eAAe,SAAS;AACnD,IAAI,WAAW;AACX,QAAM,UAAU,IAAI,sBAAsB,WAAW;AAAA,IACjD,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,SAAS;AAAA,IACT,cAAc;AAAA;AAAA,IAGd,aAAa,CAAC,UAAU;AACpB,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,UAAI,cAAc,eAAe,QAAQ,CAAC;AAC1C,UAAI,MAAM,QAAQ;AAClB,UAAI,MAAM,aAAa;AACvB,UAAI,MAAM,YAAY;AACtB,UAAI,MAAM,UAAU;AACpB,aAAO;AAAA,IACX;AAAA,IAEA,YAAY;AAAA,MACR,WAAW;AAAA,MACX,MAAM;AAAA,IACV;AAAA,EACJ,CAAC;AAGD,UAAQ,SAAS,CAAC;AAGlB,UAAQ,aAAa;AACzB;AAEA,IAAO,gBAAQ;","names":["container"]}