@panyam/tsutils/lib/cjs/scrolling.js

Some basic TS utils for personal use

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HTMLElementScrollable = exports.ScrollGroup = void 0;
class ScrollGroup {
    constructor(scrollStopDelay = 50) {
        this.scrollStopDelay = scrollStopDelay;
        this.scrollables = [];
        this.isScrolling = false;
        this._focussedScrollable = null;
    }
    add(scrollable) {
        const index = this.scrollables.indexOf(scrollable);
        if (index >= 0)
            return;
        scrollable.attach(this);
        this.scrollables.push(scrollable);
    }
    remove(scrollable) {
        const index = this.scrollables.indexOf(scrollable);
        if (index < 0)
            return;
        this.detachAtIndex(index);
    }
    clear() {
        for (let i = this.scrollables.length - 1; i >= 0; i--) {
            this.detachAtIndex(i);
        }
    }
    detachAtIndex(index) {
        const scrollable = this.scrollables[index];
        scrollable.detach();
        this.scrollables.splice(index, 1);
        return scrollable;
    }
    syncFollowers(source) {
        if (this.isScrolling)
            return;
        this.isScrolling = true;
        const remScroll = Math.max(1, source.scrollSize - source.pageSize);
        const scrollPct = source.scrollOffset / remScroll;
        for (let i = this.scrollables.length - 1; i >= 0; i--) {
            const other = this.scrollables[i];
            if (other != source) {
                other.scrollOffset = scrollPct * (other.scrollSize - other.pageSize);
            }
        }
        setTimeout(() => {
            this.isScrolling = false;
        }, this.scrollStopDelay);
    }
}
exports.ScrollGroup = ScrollGroup;
class HTMLElementScrollable {
    constructor(element, vertical = true) {
        this._scrollGroup = null;
        this.vertical = true;
        this.onScrollEventListener = this.onScrollEvent.bind(this);
        this.onMouseEventListener = this.onMouseEvent.bind(this);
        this.onTouchEventListener = this.onTouchEvent.bind(this);
        this.element = element;
        this.vertical = vertical;
    }
    attach(scrollGroup) {
        if (this.element.scrollGroup == scrollGroup) {
            return;
        }
        else if (this.element.scrollGroup) {
            throw new Error("Detach element from ScrollGroup first.");
        }
        this.element.scrollGroup = scrollGroup;
        this._scrollGroup = scrollGroup;
        this.element.addEventListener("scroll", this.onScrollEventListener);
        this.element.addEventListener("mousedown", this.onMouseEventListener);
        this.element.addEventListener("mouseenter", this.onMouseEventListener);
        this.element.addEventListener("mouseleave", this.onMouseEventListener);
        this.element.addEventListener("touchstart", this.onTouchEventListener);
    }
    detach() {
        this.element.scrollGroup = null;
        this.element.removeEventListener("scroll", this.onScrollEventListener);
        this.element.removeEventListener("mousedown", this.onMouseEventListener);
        this.element.removeEventListener("mouseenter", this.onMouseEventListener);
        this.element.removeEventListener("mouseleave", this.onMouseEventListener);
        this.element.removeEventListener("touchstart", this.onTouchEventListener);
    }
    get scrollGroup() {
        return this._scrollGroup;
    }
    get scrollOffset() {
        if (this.vertical) {
            return this.element.scrollTop;
        }
        else {
            return this.element.scrollLeft;
        }
    }
    set scrollOffset(value) {
        if (this.vertical) {
            this.element.scrollTop = value;
        }
        else {
            this.element.scrollLeft = value;
        }
    }
    get scrollSize() {
        if (this.vertical) {
            return this.element.scrollHeight;
        }
        else {
            return this.element.scrollWidth;
        }
    }
    get pageSize() {
        if (this.vertical) {
            return this.element.clientHeight;
        }
        else {
            return this.element.clientWidth;
        }
    }
    onScrollEvent(event) {
        var _a;
        (_a = this.scrollGroup) === null || _a === void 0 ? void 0 : _a.syncFollowers(this);
    }
    onTouchEvent(event) {
        if (event.type == "touchstart" && this.scrollGroup) {
        }
    }
    onMouseEvent(event) {
        const element = event.target;
        if (this.scrollGroup) {
            if (event.type == "mouseenter") {
            }
            else if (event.type == "mouseleave") {
            }
            else if (event.type == "mousedown") {
            }
        }
    }
}
exports.HTMLElementScrollable = HTMLElementScrollable;
//# sourceMappingURL=scrolling.js.map