magic-grid - npm Package Compare versions

Comparing version 3.3.6 to 3.3.7

index.d.ts

 /**
- * main decleration file
+ * main declaration file
  *
@@ -10,60 +10,109 @@ * @author zakaria harti
  */
-export interface MagicGridProps{
-  container: string | HTMLElement;
-  static?: boolean;
-  items?: number;
-  gutter?: number;
-  maxColumns?: number;
-  useMin?: boolean;
-  useTransform?: boolean;
-  animate?: boolean;
+export interface MagicGridProps {
+    container: string | HTMLElement;
+    static?: boolean;
+    items?: number;
+    gutter?: number;
+    maxColumns?: number;
+    useMin?: boolean;
+    useTransform?: boolean;
+    animate?: boolean;
+    center?: boolean;
 }
 
-export default MagicGrid;
+/**
+ * Listener class
+ */
 
+declare class Listener {
+    id: number;
+    event: string;
+    handler: (payload?: any) => void;
+
+    constructor(id: number, event: string, handler: (payload?: any) => void);
+}
+
 /**
+ * EventEmitter class
+ */
+declare class EventEmitter {
+    listeners: Array<Listener>;
+    private idCounter: number;
+
+    constructor();
+
+    removeListener(id: number): boolean;
+
+    addListener(event: string, handler: (payload?: any) => void): number;
+
+    emit(event: string, payload?: any): void;
+}
+
+/**
  * MagicGrid class
  */
-declare class MagicGrid {
-  /**
-   * class constructor
-   *
-   * @param {object} config
-   */
-  constructor(config: MagicGridProps);
+declare class MagicGrid extends EventEmitter {
+    container: HTMLElement;
+    containerClass: string;
+    static: boolean;
+    size: number;
+    gutter: number;
+    maxColumns: number | false;
+    useMin: boolean;
+    useTransform: boolean;
+    animate: boolean;
+    center: boolean;
+    styledItems: Set<HTMLElement>;
+    resizeObserver: ResizeObserver | null;
+    isPositioning: boolean;
 
-  /**
-   * Positions all the items and
-   * repositions them whenever the
-   * window size changes.
-   *
-   * @returns {void}
-   */
-   listen(): void;
+    /**
+     * class constructor
+     *
+     * @param {MagicGridProps} config
+     */
+    constructor(config: MagicGridProps);
 
-  /**
-   * Position each items in the container
-   * based on their corresponding columns
-   * values.
-   *
-   * @returns {void}
-   */
-  positionItems(): void;
+    /**
+     * Set a new container. Useful in cases where
+     * the container reference changes for any reason.
+     *
+     * @param container
+     */
+    setContainer(container: HTMLElement)
 
-  /**
-   * Checks if every items has been loaded
-   * in the dom.
-   *
-   * @return {Boolean} true if every items is present
-   */
-   ready(): boolean;
+    /**
+     * Positions all the items and
+     * repositions them whenever the
+     * window size changes.
+     *
+     * @returns {void}
+     */
+    listen(): void;
 
-   /**
-    * Initializes styles
-    *
-    * @private
-    */
-   private initStyles(): void;
+    /**
+     * Position each item in the container
+     * based on their corresponding columns
+     * values.
+     *
+     * @returns {void}
+     */
+    positionItems(): void;
 
     /**
+     * Checks if every item has been loaded
+     * in the dom.
+     *
+     * @return {boolean} true if every item is present
+     */
+    ready(): boolean;
+
+    /**
+     * Initializes styles
+     *
+     * @private
+     */
+    private initStyles(): void;
+
+    /**
      * Gets a collection of all items in a grid.
@@ -74,41 +123,53 @@ *
      */
-    private items (): void
+    private items(): HTMLCollection;
 
-        /**
-    * Calculates the width of a column.
-    *
-    * @return width of a column in the grid
-    * @private
-    */
-   private colWidth(): number;
+    /**
+     * Calculates the width of a column.
+     *
+     * @return {number} width of a column in the grid
+     * @private
+     */
+    private colWidth(): number;
 
-   /**
-    * Initializes an array of empty columns
-    * and calculates the leftover whitespace.
-    *
-    * @return {{cols: Array, wSpace: number}}
-    * @private
-    */
-   private setup(): object;
+    /**
+     * Initializes an array of empty columns
+     * and calculates the leftover whitespace.
+     *
+     * @return {{cols: Array<object>, wSpace: number}}
+     * @private
+     */
+    private setup(): { cols: Array<{ height: number; index: number }>; wSpace: number };
 
-   /**
-    * Gets the next available column.
-    *
-    * @param cols list of columns
-    * @param i index of dom element
-    *
-    * @return {*} next available column
-    * @private
-    */
-   private nextCol(cols: object[], i: number): object;
+    /**
+     * Gets the next available column.
+     *
+     * @param cols list of columns
+     * @param i index of dom element
+     *
+     * @return {object} next available column
+     * @private
+     */
+    private nextCol(cols: Array<{ height: number; index: number }>, i: number): { height: number; index: number };
 
-   /**
-    * Periodically checks that all items
-    * have been loaded in the dom. Calls
-    * this.listen() once all the items are
-    * present.
-    *
-    * @private
-    */
-   private getReady(): void;
+    /**
+     * Periodically checks that all items
+     * have been loaded in the dom. Calls
+     * this.listen() once all the items are
+     * present.
+     *
+     * @private
+     */
+    private getReady(): void;
+
+    /**
+     * Observes changes in the container size and repositions items
+     * @private
+     */
+    private observeContainerResize(): void;
+
+    /**
+     * Adds a callback for when positioning is complete
+     * @param callback - function to be called on positioning complete
+     */
+    onPositionComplete(callback: () => void): void;
 }
@@ -129,4 +190,6 @@
  *
- * @return longest column
+ * @return {object} shortest column
  */
-declare function getMin(cols: object[]): object;
+declare function getMin(cols: Array<{ height: number; index: number }>): { height: number; index: number };
+
+export default MagicGrid;

package.json

 {
   "name": "magic-grid",
-  "version": "3.3.6",
+  "version": "3.3.7",
   "description": "Super lightweight javascript library for dynamic grid layouts.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -67,5 +67,2 @@ [![MIT License](https://img.shields.io/npm/l/magic-grid.svg?style=for-the-badge)](https://www.npmjs.com/package/magic-grid)
 ```html
-<script src="node_modules/magic-grid/dist/magic-grid.cjs.js"></script>
-
-<!-- or (minified) -->
 <script src="node_modules/magic-grid/dist/magic-grid.min.js"></script>
@@ -72,0 +69,0 @@ ```

src/index.js

@@ -10,3 +10,3 @@ /**
 
-const EventEmitter = require("./EventEmitter.js");
+const EventEmitter = require("./event-emitter.js");
 const {checkParams, getMin} = require("./utils.js");
@@ -49,2 +49,15 @@ const {POSITIONING_COMPLETE_EVENT, REPOSITIONING_DELAY} = require("./constant.js");
   /**
+   * Set a new container. Useful in cases where
+   * the container reference changes for any reason.
+   * @param container
+   */
+  setContainer(container){
+      const previousContainer =  this.container;
+      this.container = container;
+
+      this.resizeObserver.unobserve(previousContainer);
+      this.resizeObserver.observe(container);
+  }
+
+  /**
    * Initializes styles
@@ -51,0 +64,0 @@ *

No alert changes

Improved metrics

Total package byte prevSize

70933

2.95%

Lines of code

1635

4.01%

Worsened metrics

Number of lines in readme file

204

-1.45%

No dependency changes