ng-virtual-list 17.0.21 → 17.0.22

package/src/lib/utils/cacheMap.ts

@@ -0,0 +1,224 @@
+import { ScrollDirection } from "../models";
+import { debounce } from "./debounce";
+import { EventEmitter, TEventHandler } from "./eventEmitter";
+
+export class CMap<K = string, V = any> {
+    private _dict: { [k: string | number]: V } = {};
+
+    constructor(dict?: CMap<K, V>) {
+        if (dict) {
+            this._dict = { ...dict._dict };
+        }
+    }
+
+    get(key: K) {
+        const k = String(key);
+        return this._dict[k];
+    }
+    set(key: K, value: V) {
+        const k = String(key);
+        this._dict[k] = value;
+        return this;
+    }
+    has(key: K) {
+        return this._dict.hasOwnProperty(String(key));
+    }
+    delete(key: K) {
+        const k = String(key);
+        delete this._dict[k];
+    }
+    clear() {
+        this._dict = {};
+    }
+}
+
+export interface ICacheMap<I = any, B = any> {
+    set: (id: I, bounds: B) => CMap<I, B>;
+    has: (id: I) => boolean;
+    get: (id: I) => B | undefined;
+}
+
+export const CACHE_BOX_CHANGE_EVENT_NAME = 'change';
+
+type CacheMapEvents = typeof CACHE_BOX_CHANGE_EVENT_NAME;
+
+type OnChangeEventListener = (version: number) => void;
+
+type CacheMapListeners = OnChangeEventListener;
+
+const MAX_SCROLL_DIRECTION_POOL = 50, CLEAR_SCROLL_DIRECTION_TO = 10,
+    DIR_BACK = '-1', DIR_NONE = '0', DIR_FORWARD = '1';
+
+/**
+ * Cache map.
+ * Emits a change event on each mutation.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.x/projects/ng-virtual-list/src/lib/utils/cacheMap.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export class CacheMap<I = string | number, B = any, E extends string = CacheMapEvents, L extends TEventHandler = CacheMapListeners>
+    extends EventEmitter<E, L> implements ICacheMap {
+    protected _map = new CMap<I, B>();
+
+    protected _snapshot = new CMap<I, B>();
+
+    protected _version: number = 0;
+
+    protected _previousVersion = this._version;
+
+    protected _lifeCircleTimeout: any;
+
+    protected _delta: number = 0;
+
+    get delta() {
+        return this._delta;
+    }
+
+    protected _deltaDirection: ScrollDirection = 0;
+    set deltaDirection(v: ScrollDirection) {
+        this._deltaDirection = v;
+
+        this._scrollDirection = this.calcScrollDirection(v);
+    }
+    get deltaDirection() {
+        return this._deltaDirection;
+    }
+
+    private _scrollDirectionCache: Array<ScrollDirection> = [];
+    private _scrollDirection: ScrollDirection = 0;
+    get scrollDirection() {
+        return this._scrollDirection;
+    }
+
+    get version() {
+        return this._version;
+    }
+
+    private _clearScrollDirectionDebounce = debounce(() => {
+        while (this._scrollDirectionCache.length > CLEAR_SCROLL_DIRECTION_TO) {
+            this._scrollDirectionCache.shift();
+        }
+    }, 10);
+
+    constructor() {
+        super();
+        this.lifeCircle();
+    }
+
+    protected changesDetected() {
+        return this._version !== this._previousVersion;
+    }
+
+    protected stopLifeCircle() {
+        clearTimeout(this._lifeCircleTimeout);
+    }
+
+    protected nextTick(cb: () => void) {
+        if (this._disposed) {
+            return;
+        }
+
+        this._lifeCircleTimeout = setTimeout(() => {
+            cb();
+        });
+        return this._lifeCircleTimeout;
+    }
+
+    protected lifeCircle() {
+        this.fireChangeIfNeed();
+
+        this.lifeCircleDo();
+    }
+
+    protected lifeCircleDo() {
+        this._previousVersion = this._version;
+
+        this.nextTick(() => {
+            this.lifeCircle();
+        });
+    }
+
+    clearScrollDirectionCache() {
+        this._clearScrollDirectionDebounce.execute();
+    }
+
+    private calcScrollDirection(v: ScrollDirection): ScrollDirection {
+        while (this._scrollDirectionCache.length >= MAX_SCROLL_DIRECTION_POOL) {
+            this._scrollDirectionCache.shift();
+        }
+        this._scrollDirectionCache.push(v);
+        const dict: { [x: string]: number } = { [DIR_BACK]: 0, [DIR_NONE]: 0, [DIR_FORWARD]: 0 };
+        for (let i = 0, l = this._scrollDirectionCache.length, li = l - 1; i < l; i++) {
+            const dir = String(this._scrollDirectionCache[i]);
+            dict[dir] += 1;
+            if (i === li) {
+                for (let d in dict) {
+                    if (d === String(v)) {
+                        continue;
+                    }
+                    dict[d] -= 1;
+                }
+            }
+        }
+
+        if (dict[DIR_BACK] > dict[DIR_NONE] && dict[DIR_BACK] > dict[DIR_FORWARD]) {
+            return -1;
+        } else if (dict[DIR_FORWARD] > dict[DIR_BACK] && dict[DIR_FORWARD] > dict[DIR_NONE]) {
+            return 1;
+        }
+
+        return 0;
+    }
+
+    protected bumpVersion() {
+        if (this.changesDetected()) {
+            return;
+        }
+        const v = this._version === Number.MAX_SAFE_INTEGER ? 0 : this._version + 1;
+        this._version = v;
+    }
+
+    protected fireChangeIfNeed() {
+        if (this.changesDetected()) {
+            this.dispatch(CACHE_BOX_CHANGE_EVENT_NAME as E, this.version);
+        }
+    }
+
+    set(id: I, bounds: B): CMap<I, B> {
+        if (this._map.has(id)) {
+            const b: any = this._map.get(id), bb: any = bounds;
+            if (b.width === bb.width && b.height === bb.height) {
+                return this._map;
+            }
+            return this._map;
+        }
+
+        const v = this._map.set(id, bounds);
+
+        this.bumpVersion();
+
+        return v;
+    }
+
+    has(id: I): boolean {
+        return this._map.has(id);
+    }
+
+    get(id: I): B | undefined {
+        return this._map.get(id);
+    }
+
+    snapshot() {
+        this._snapshot = new CMap(this._map);
+    }
+
+    override dispose() {
+        super.dispose();
+
+        this.stopLifeCircle();
+
+        this._snapshot.clear();
+
+        this._map.clear();
+    }
+}

package/src/lib/utils/debounce.ts

@@ -0,0 +1,31 @@
+/**
+ * Simple debounce function.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.x/projects/ng-virtual-list/src/lib/utils/debounce.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export const debounce = (cb: (...args: Array<any>) => void, debounceTime: number = 0) => {
+    let timeout: any;
+    const dispose = () => {
+        if (timeout !== undefined) {
+            clearTimeout(timeout);
+        }
+    }
+    const execute = (...args: Array<any>) => {
+        dispose();
+
+        timeout = setTimeout(() => {
+            cb(...args);
+        }, debounceTime);
+    };
+    return {
+        /**
+         *  Call handling method
+         */
+        execute,
+        /**
+         * Method of destroying handlers
+         */
+        dispose,
+    };
+};

package/src/lib/utils/eventEmitter.ts

@@ -0,0 +1,119 @@
+export type TEventHandler = (...args: Array<any>) => void;
+
+/**
+ * Simple event emitter
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.x/projects/ng-virtual-list/src/lib/utils/eventEmitter.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export class EventEmitter<E = string, H = TEventHandler> {
+    private _listeners: {
+        [eventName: string]: Array<TEventHandler>,
+    } = {};
+
+    protected _disposed: boolean = false;
+
+    constructor() { }
+
+    /**
+     * Emits the event
+     */
+    dispatch(event: E, ...args: Array<any>): void {
+        const ctx = this;
+        const listeners = this._listeners[event as string];
+        if (Array.isArray(listeners)) {
+            for (let i = 0, l = listeners.length; i < l; i++) {
+                const listener = listeners[i];
+                if (listener) {
+                    listener.apply(ctx, args);
+                }
+            }
+        }
+    }
+
+    /**
+     * Emits the event async
+     */
+    dispatchAsync(event: E, ...args: Array<any>): void {
+        queueMicrotask(() => {
+            if (this._disposed) {
+                return;
+            }
+            this.dispatch(event, ...args);
+        });
+    }
+
+    /**
+     * Returns true if the event listener is already subscribed.
+     */
+    hasEventListener(eventName: E, handler: H): boolean {
+        const event = eventName as string;
+        if (this._listeners.hasOwnProperty(event)) {
+            const listeners = this._listeners[event];
+            const index = listeners.findIndex(v => v === handler);
+            if (index > -1) {
+                return true;
+            }
+        }
+        return false
+    }
+
+    /**
+     * Add event listener
+     */
+    addEventListener(eventName: E, handler: H): void {
+        const event = eventName as string;
+        if (!this._listeners.hasOwnProperty(event)) {
+            this._listeners[event] = [];
+        }
+        this._listeners[event].push(handler as TEventHandler);
+    }
+
+    /**
+     * Remove event listener
+     */
+    removeEventListener(eventName: E, handler: H): void {
+        const event = eventName as string;
+        if (!this._listeners.hasOwnProperty(event)) {
+            return;
+        }
+        const listeners = this._listeners[event], index = listeners.findIndex(v => v === handler);
+        if (index > -1) {
+            listeners.splice(index, 1);
+
+            if (listeners.length === 0) {
+                delete this._listeners[event];
+            }
+        }
+    }
+
+    /**
+     * Remove all listeners
+     */
+    removeAllListeners() {
+        const events = Object.keys(this._listeners);
+        while (events.length > 0) {
+            const event = events.pop();
+            if (event) {
+                const listeners = this._listeners[event];
+                if (Array.isArray(listeners)) {
+                    while (listeners.length > 0) {
+                        const listener = listeners.pop();
+                        if (listener) {
+                            this.removeEventListener(event as E, listener as H);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Method of destroying handlers
+     */
+    dispose() {
+        this._disposed = true;
+
+        this.removeAllListeners();
+    }
+}

package/{lib/utils/index.d.ts → src/lib/utils/index.ts}

@@ -1,7 +1,15 @@
-import { isDirection } from "./isDirection";
-import { debounce } from "./debounce";
-import { toggleClassName } from './toggleClassName';
-import { Tracker } from "./tracker";
-import { TrackBox } from "./trackBox";
-import { ScrollEvent } from "./scrollEvent";
-export { isDirection, debounce, toggleClassName, ScrollEvent, TrackBox, Tracker, };
+import { isDirection } from "./isDirection";
+import { debounce } from "./debounce";
+import { toggleClassName } from './toggleClassName';
+import { Tracker } from "./tracker";
+import { TrackBox } from "./trackBox";
+import { ScrollEvent } from "./scrollEvent";
+
+export {
+    isDirection,
+    debounce,
+    toggleClassName,
+    ScrollEvent,
+    TrackBox,
+    Tracker,
+};

package/src/lib/utils/isDirection.ts

@@ -0,0 +1,17 @@
+import { Direction, Directions } from "../enums";
+
+const HORIZONTAL_ALIASES = [Directions.HORIZONTAL, 'horizontal'],
+    VERTICAL_ALIASES = [Directions.VERTICAL, 'vertical'];
+
+/**
+ * Determines the axis membership of a virtual list
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.x/projects/ng-virtual-list/src/lib/utils/isDirection.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export const isDirection = (src: Direction, expected: Direction): boolean => {
+    if (HORIZONTAL_ALIASES.includes(expected)) {
+        return HORIZONTAL_ALIASES.includes(src);
+    }
+    return VERTICAL_ALIASES.includes(src);
+}

package/src/lib/utils/scrollEvent.ts

@@ -0,0 +1,62 @@
+import { IScrollEvent, ScrollDirection } from "../models";
+
+interface IScrollEventParams {
+    direction: ScrollDirection;
+    container: HTMLElement;
+    list: HTMLElement;
+    delta: number;
+    scrollDelta: number;
+    isVertical: boolean;
+}
+
+/**
+ * Scroll event.
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.x/projects/ng-virtual-list/src/lib/utils/scrollEvent.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export class ScrollEvent implements IScrollEvent {
+    private _direction: ScrollDirection = 1;
+    get direction() { return this._direction; }
+
+    private _scrollSize: number = 0;
+    get scrollSize() { return this._scrollSize; }
+
+    private _scrollWeight: number = 0;
+    get scrollWeight() { return this._scrollWeight; }
+
+    private _isVertical: boolean = true;
+    get isVertical() { return this._isVertical; }
+
+    private _listSize: number = 0;
+    get listSize() { return this._listSize; }
+
+    private _size: number = 0;
+    get size() { return this._size; }
+
+    private _isStart: boolean = true;
+    get isStart() { return this._isStart; }
+
+    private _isEnd: boolean = false;
+    get isEnd() { return this._isEnd; }
+
+    private _delta: number = 0;
+    get delta() { return this._delta; }
+
+    private _scrollDelta: number = 0;
+    get scrollDelta() { return this._scrollDelta; }
+
+    constructor(params: IScrollEventParams) {
+        const { direction, isVertical, container, list, delta, scrollDelta } = params;
+        this._direction = direction;
+        this._isVertical = isVertical;
+        this._scrollSize = isVertical ? container.scrollTop : container.scrollLeft;
+        this._scrollWeight = isVertical ? container.scrollHeight : container.scrollWidth;
+        this._listSize = isVertical ? list.offsetHeight : list.offsetWidth;
+        this._size = isVertical ? container.offsetHeight : container.offsetWidth;
+        this._isEnd = (this._scrollSize + this._size) === this._scrollWeight;
+        this._delta = delta;
+        this._scrollDelta = scrollDelta;
+        this._isStart = this._scrollSize === 0;
+    }
+}

package/src/lib/utils/toggleClassName.ts

@@ -0,0 +1,14 @@
+
+/**
+ * Switch css classes
+ * @link https://github.com/DjonnyX/ng-virtual-list/blob/17.x/projects/ng-virtual-list/src/lib/utils/toggleClassName.ts
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+export const toggleClassName = (el: HTMLElement, className: string, remove = false) => {
+    if (!el.classList.contains(className)) {
+        el.classList.add(className);
+    } else if (remove) {
+        el.classList.remove(className);
+    }
+};