@smoovy/observer/observable.d.ts

Simple and easy-to-use ticker

import { EventEmitter } from '@smoovy/emitter';
export type ObservableTarget = HTMLElement | Window;
export interface ObservableConfig<T extends ObservableTarget = ObservableTarget> {
    /**
     * The target to observe. Can be HTMLElement or Window
     */
    target: T;
    /**
     * Use `getBoundingClientRect()` instead of offsetWidth etc.
     *
     * Default = false
     */
    useBounds?: boolean;
    /**
     * Automatically listen for changes, resizes and updates once created
     *
     * Default = true
     */
    autoAttach?: boolean;
    /**
     * Whether to use visibility detection via the IntersectionObserver API.
     * You can configure it with a custom threshold.
     *
     * Default = false
     */
    visibilityDetection?: boolean | IntersectionObserverInit;
    /**
     * If `visiblityDetection` is enabled, this will delay the visibile
     * event by a defined number (ms)
     *
     * Default = 0
     */
    visibilityDelay?: number;
    /**
     * If `visibiltiyDetection` is enabled, remove the target from the
     * IntersectionObserver once it has been marked as visible
     *
     * Default = false
     */
    detectVisibilityOnce?: boolean;
    /**
     * Whether to detect dimension changes via the ResizeObserver API
     *
     * Default = false
     */
    resizeDetection?: boolean | ResizeObserverOptions;
    /**
     * Debounce is the number of milliseconds to wait for the next change.
     * So if the delta value is below this threshold the resize event will
     * be discarded and therefore the observable will not be updated.
     *
     * Default = 0
     */
    resizeDebounce?: number;
    /**
     * The initial update periods are executed on creation. This ensures that
     * after that element has been rendered minor chnages to the layout
     * and position of the obserable will be taken into account. This is only
     * being used if `autoAttach` is `true`
     *
     * Default = [50, 250, 500, 1000]
     */
    initUpdatePeriods?: number[];
    /**
     * Update periods after the window triggered a resize. Since sometimes
     * the size of a observable depends on each other, this ensures that
     * the size is forced to a stable state in conjuction to all observables
     * updating on resize.
     *
     * Default = [250, 500];
     */
    resizePeriods?: number[];
}
export declare enum ObservableEventType {
    VISIBILITY_CHANGE = "visibilitychange",
    DIMENSIONS_CHANGE = "dimensionschange"
}
export type ObservableChangeListener = (observable: Observable) => any;
export declare function observe<T extends ObservableTarget>(target: T, config?: Omit<ObservableConfig<T>, 'target'>): Observable<T>;
export declare function unobserve<T extends ObservableTarget>(observable: Observable<T>): void;
export declare class Observable<T extends ObservableTarget = HTMLElement> extends EventEmitter {
    private config;
    static readonly items: Map<ObservableTarget, Observable<any>[]>;
    private static intersecObservers;
    private static resizeObserver?;
    private static intersecId;
    private intersecObserver?;
    private lastResize;
    private visibilityTimer;
    private _left;
    private _top;
    private _width;
    private _height;
    private _scrollWidth;
    private _scrollHeight;
    private _visible;
    private _interecKey;
    private static handleEntries;
    constructor(config: ObservableConfig<T>);
    get resizeDebounce(): number;
    get resizeDetection(): boolean | ResizeObserverOptions | undefined;
    get visibilityDelay(): number;
    get visibilityThreshold(): number | number[];
    get ref(): T;
    get visible(): boolean;
    set visible(visible: boolean);
    get left(): number;
    get top(): number;
    get x(): number;
    get y(): number;
    get width(): number;
    get height(): number;
    get scrollWidth(): number;
    get scrollHeight(): number;
    get scrollSize(): {
        width: number;
        height: number;
    };
    get size(): {
        width: number;
        height: number;
    };
    get pos(): {
        left: number;
        top: number;
    };
    get coord(): {
        x: number;
        y: number;
    };
    get intersecKey(): string;
    attach(): void;
    onDimChange(listener: ObservableChangeListener): import("@smoovy/listener").Unlisten;
    onVisChange(listener: ObservableChangeListener): import("@smoovy/listener").Unlisten;
    onChange(listener: ObservableChangeListener): import("@smoovy/listener").Unlisten;
    update(): void;
    destroy(): void;
    private emitVisibility;
    private getIntersectionObserverConfig;
    private getIdFromConfig;
    private getElementOffset;
}