brique/lib/index.d.ts

Create cascading layout grids like Pinterest with the power of CSS Grid Layout.

export interface BriqueOptions {
    /** Number of columns */
    columns: number;
    /** Spacing between columns */
    columnGap?: string;
    /** Spacing between row */
    rowGap?: string;
}
/**
 * Class representing a Brique.
 */
export declare class Brique {
    readonly gridElement: HTMLElement;
    static DEFAULT_OPTIONS: BriqueOptions;
    itemElements?: HTMLElement[];
    private options;
    private resizeObserver;
    private resizeEvent;
    private childrenObserver;
    private observeGridResize;
    /**
     * Creates a new instance of Brique.
     * @param gridElement - Grid container
     * @param options - Options to customize the grid
     * @param observeGridResize - Update the dimension of grid items when the grid container is resized
     */
    constructor(gridElement: HTMLElement, options?: BriqueOptions, observeGridResize?: boolean);
    /**
     * Update the rendering of the entire grid.
     */
    update(): void;
    /**
     * Update the rendering of the grid items.
     */
    updateItems(): void;
    /**
     * Update the dimension of grid items when the grid element is resized.
     */
    updateOnResize(): void;
    /**
     * Update the dimension of grid items when the grid element is resized.
     */
    stopUpdateOnResize(): void;
    /**
     * Return current options object.
     */
    getOptions(): BriqueOptions;
    /**
     * Change all properties of options object.
     * @param options
     */
    setOptions(options: BriqueOptions): void;
    /**
     * Updates only changed properties.
     * @param updatedOptions - Option properties to update
     */
    updateOptions(updatedOptions: BriqueOptions): void;
    /**
     * Removes all events listened to on the HTML elements handled by the Brique class.
     * The `destroy()` method must be called when the grid is removed from HTML.
     */
    destroy(): void;
    /**
     * Apply inline styles on grid container and grid items
     * @private
     */
    private draw;
    /**
     * Apply inline styles on grid container
     */
    private drawGridContainer;
    /**
     * Apply inline styles on grid items
     */
    private drawItems;
    /**
     * Find grid items in grid element children and set property itemElements
     */
    private setItemElements;
}
//# sourceMappingURL=index.d.ts.map