@nascentdigital/funnel-core 4.4.4

package/dist/ui/browser/Browser.js

@@ -0,0 +1,313 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Browser = void 0;
+const css_escape_1 = __importDefault(require("css.escape"));
+const geometry_1 = require("../geometry");
+/**
+ * A collection of helper methods for manipulating client-side DOM and web browser APIs.
+ */
+var Browser;
+(function (Browser) {
+    /**
+     * Returns `true` if running within the actual browser and have access to HTML DOM and window object.
+     */
+    Browser.available = typeof global.window !== 'undefined';
+    /**
+     * Returns `window` object if browser is available, or `undefined` otherwise.
+     */
+    Browser.window = Browser.available ? global.window : undefined;
+    function getHtml() {
+        return Browser.window === null || Browser.window === void 0 ? void 0 : Browser.window.document.documentElement;
+    }
+    Browser.getHtml = getHtml;
+    function escapeCss(css) {
+        return (0, css_escape_1.default)(css);
+    }
+    Browser.escapeCss = escapeCss;
+    /**
+     * Provides preset HTML element selectors for various purposes.
+     */
+    let Element;
+    (function (Element) {
+        // constants
+        Element.tabbable = [
+            'a[href]:not([tabindex^="-"])',
+            'area[href]:not([tabindex^="-"])',
+            'input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])',
+            'input[type="radio"]:not([disabled]):not([tabindex^="-"])',
+            'select:not([disabled]):not([tabindex^="-"])',
+            'textarea:not([disabled]):not([tabindex^="-"])',
+            'button:not([disabled]):not([tabindex^="-"])',
+            'iframe:not([tabindex^="-"])',
+            'audio[controls]:not([tabindex^="-"])',
+            'video[controls]:not([tabindex^="-"])',
+            '[contenteditable]:not([tabindex^="-"])',
+            '[tabindex]:not([tabindex^="-"])'
+        ];
+    })(Element = Browser.Element || (Browser.Element = {}));
+    /**
+     * Scrolls to top of windows.
+     */
+    function scrollToTop() {
+        Browser.window === null || Browser.window === void 0 ? void 0 : Browser.window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+    Browser.scrollToTop = scrollToTop;
+    /**
+     * Locks top-level browser window scrolling.
+     *
+     * @param enabled disables scrolling if `true`, restores it otherwise
+     */
+    function setScrollEnabled(enabled) {
+        // skip if in SSR
+        if (!Browser.available || !Browser.window) {
+            return;
+        }
+        // FIXME: we should store the previous overflow-y style in a data-tag and restore it afterwards
+        // helpers
+        const updateScrollBehavior = (element) => {
+            if (enabled) {
+                element.style.removeProperty('overflow-y');
+            }
+            else {
+                element.style.setProperty('overflow-y', 'hidden');
+            }
+        };
+        // update overflow behavior on roots
+        const { documentElement, body } = Browser.window.document;
+        updateScrollBehavior(documentElement);
+        updateScrollBehavior(body);
+        // TODO: disable touch
+    }
+    Browser.setScrollEnabled = setScrollEnabled;
+    /**
+     * Resolves the actual HTML elements for the given selectors (pass-thru if inputs are already resolved)
+     *
+     * @param targets the selector or selectors to use - if actual `Element` instances are passed in they are returned as is
+     * @param container the root element where the search should be anchored, otherwise the `window.document` is used
+     */
+    function getElements(targets, container) {
+        // skip if not in browser
+        const root = container !== null && container !== void 0 ? container : Browser.window === null || Browser.window === void 0 ? void 0 : Browser.window.document;
+        if (!root) {
+            return [];
+        }
+        // handle array of selectors/elements
+        else if (Array.isArray(targets)) {
+            // skip if there are no targets
+            if (targets.length === 0) {
+                return [];
+            }
+            // or handle selector strings
+            else if (typeof targets[0] === 'string') {
+                return targets
+                    .flatMap(target => Array.from(root.querySelectorAll(target).values()));
+            }
+            // otherwise, return as-is (they're already elements)
+            else {
+                return targets;
+            }
+        }
+        // otherwise handle single element
+        else {
+            const element = getElement(targets, root);
+            return element ? [element] : [];
+        }
+    }
+    Browser.getElements = getElements;
+    /**
+     * Resolves an actual HTML element for a given selector (pass-thru if input is already resolved)
+     *
+     * @param target the selector to use - if an actual `Element` instance is passed, it is returned directly
+     * @param container the root element where the search should be anchored, otherwise the `window.document` is used
+     */
+    function getElement(target, container) {
+        var _a;
+        // skip if not in browser
+        const root = container !== null && container !== void 0 ? container : Browser.window === null || Browser.window === void 0 ? void 0 : Browser.window.document;
+        if (!root) {
+            return undefined;
+        }
+        // handle selector
+        else if (typeof target === 'string') {
+            return (_a = root.querySelector(target)) !== null && _a !== void 0 ? _a : undefined;
+        }
+        // or return element
+        else {
+            return target;
+        }
+    }
+    Browser.getElement = getElement;
+    function getElementRect(element, { absolute = false } = {}) {
+        // skip if there's no element or if we're SSR
+        if (!element || !Browser.available) {
+            return undefined;
+        }
+        // or skip if we already have a rect
+        else if (element instanceof geometry_1.Rect) {
+            return element;
+        }
+        // try to coerce element into an element (or fail)
+        const anchorElement = (typeof element === 'string'
+            ? document.querySelector(element)
+            : element);
+        // skip if there's no element
+        if (!anchorElement) {
+            return undefined;
+        }
+        // bypass any transforms (so we don't get invalid positioning)
+        const width = anchorElement.offsetWidth;
+        const height = anchorElement.offsetHeight;
+        let x = 0, y = 0;
+        let parentElement = anchorElement;
+        while (parentElement) {
+            x += parentElement.offsetLeft;
+            y += parentElement.offsetTop;
+            parentElement = parentElement.offsetParent;
+        }
+        // adjust based on viewport (if required)
+        if (!absolute && Browser.window) {
+            // determine scroll offsets
+            let scrollX = Browser.window.scrollX || Browser.window.pageXOffset;
+            let scrollY = Browser.window.scrollY || Browser.window.pageYOffset;
+            parentElement = anchorElement;
+            while (parentElement) {
+                scrollX += parentElement.scrollLeft;
+                scrollY += parentElement.scrollTop;
+                parentElement = parentElement.parentElement;
+            }
+            // adjust based on scrolling
+            x -= scrollX;
+            y -= scrollY;
+        }
+        // return rect
+        return new geometry_1.Rect(x, y, width, height);
+    }
+    Browser.getElementRect = getElementRect;
+    /**
+     * A helper method used to select a set of HTML DOM elements and make temporary modifications that can be later
+     * rolled back via the returned `restore()` method.
+     *
+     * @param container an optional container used to scope the target selectors, otherwise the `window.document` is used
+     * @param targets a set of elements or selectors that are the scope of modification
+     * @param restoreKey a key that if provided will persist the restore snapshot into the DOM element via a `dataset` tag
+     * @param onModify the callback where modification should be made
+     */
+    function modifyElements({ container, targets, restoreKey, onModify }) {
+        // get elements to modify
+        const elements = getElements(targets, container);
+        // create modifiers
+        const modifiers = elements.map(element => new ElementModifier(element, restoreKey));
+        // pass modifiers to callback
+        onModify(modifiers);
+        // snapshot all changes
+        modifiers.forEach(modifier => modifier.snapshot());
+        // return restore callback
+        return () => modifiers.forEach(modifier => modifier.restore());
+    }
+    Browser.modifyElements = modifyElements;
+    /**
+     * Locks all interactive browser elements from tab focus that are outside of the `target` scope (if provided).
+     * @param target The target (and its children) that should not be locked.
+     * @return An `unlock` callback that restores tab focus for the previously locked elements.
+     */
+    function lockFocus(target) {
+        // capture elements that can be focused (skip if
+        const focusableElement = getElement(target);
+        // lock all other focusable elements
+        return modifyElements({
+            targets: Element.tabbable,
+            onModify: elements => elements.forEach(modifier => {
+                // lock if it's not part of the focusable set
+                const { element } = modifier;
+                if (!focusableElement || (focusableElement !== element && !focusableElement.contains(element))) {
+                    modifier.setAttribute('tabindex', '-1');
+                }
+            }),
+            restoreKey: 'focusDisabled'
+        });
+    }
+    Browser.lockFocus = lockFocus;
+    /**
+     * A proxy used to manipulate an HTML DOM element.  This class provides a way to rollback changes and even
+     * persist the rollback snapshot directly in the DOM itself (via the `restoreKey`).
+     */
+    class ElementModifier {
+        constructor(element, _restoreKey) {
+            this.element = element;
+            this._restoreKey = _restoreKey;
+            // determine original values
+            let snapshot = undefined;
+            if (_restoreKey && element.dataset[_restoreKey]) {
+                snapshot = new Map(JSON.parse(element.dataset[_restoreKey]));
+            }
+            // initialize instance variables
+            this._originalAttributes = snapshot !== null && snapshot !== void 0 ? snapshot : new Map();
+        }
+        /**
+         * Sets an attribute on the underlying HTMLElement.
+         * @param name the name of the attribute being set
+         * @param value the attribute value
+         */
+        setAttribute(name, value) {
+            // save original (if we haven't captured the original value)
+            const { element, _originalAttributes } = this;
+            if (!_originalAttributes.has(name)) {
+                _originalAttributes.set(name, element.hasAttribute(name) ? element.getAttribute(name) : null);
+            }
+            // change attribute
+            this.element.setAttribute(name, value);
+        }
+        /**
+         * Removes an attribute from the underlying HTMLElement.
+         * @param name the name of the attribute being removed
+         */
+        deleteAttribute(name) {
+            // save original (if we haven't captured the original value)
+            const { element, _originalAttributes } = this;
+            if (!_originalAttributes.has(name)) {
+                _originalAttributes.set(name, element.hasAttribute(name) ? element.getAttribute(name) : null);
+            }
+            // delete value
+            element.removeAttribute(name);
+        }
+        /**
+         * Saves a snapshot of the pre-modified instance to the `Element`, but *only if* the `restoreKey` was specified.
+         */
+        snapshot() {
+            // skip if there's no restore key provided OR if there are no changes
+            const { element, _originalAttributes, _restoreKey } = this;
+            if (!_restoreKey || _originalAttributes.size === 0) {
+                return;
+            }
+            // serialize changes
+            element.dataset[_restoreKey] = JSON.stringify(Array.from(_originalAttributes.entries()));
+        }
+        /**
+         * Restores the underlying element to its pre-modification state, clearing any snapshot data.
+         */
+        restore() {
+            // undo each change
+            const { element, _originalAttributes, _restoreKey } = this;
+            for (const [attributeName, attributeValue] of _originalAttributes.entries()) {
+                // delete if there's no value
+                if (attributeValue === null) {
+                    element.removeAttribute(attributeName);
+                }
+                // or reset it
+                else {
+                    element.setAttribute(attributeName, attributeValue);
+                }
+            }
+            // clear attributes
+            _originalAttributes.clear();
+            // clear snapshot (if any)
+            if (_restoreKey && element.dataset[_restoreKey]) {
+                delete element.dataset[_restoreKey];
+            }
+        }
+    }
+    Browser.ElementModifier = ElementModifier;
+})(Browser || (exports.Browser = Browser = {}));

package/dist/ui/browser/ImageProxy.d.ts

@@ -0,0 +1,30 @@
+import { Size } from '../geometry';
+export declare abstract class ImageProxy {
+    readonly image: HTMLImageElement;
+    private readonly _state$;
+    private _blurHash?;
+    protected constructor(image: HTMLImageElement);
+    get state$(): import("rxjs").Observable<ImageProxy.State>;
+    get state(): ImageProxy.State;
+    private set state(value);
+    get loaded(): boolean;
+    get intrinsicSize(): Size;
+    waitUntil(...states: ImageProxy.State[]): Promise<ImageProxy.State>;
+    waitUntilReady(): Promise<void>;
+    getBlurHash(): Promise<string | undefined>;
+    dispose(): void;
+    private onLoad;
+    private onError;
+}
+export declare namespace ImageProxy {
+    type State = 'uninitialized' | 'loading' | 'ready' | 'error' | 'disposed';
+}
+export declare class ElementImageProxy extends ImageProxy {
+    constructor(image: HTMLImageElement);
+}
+export declare class BlobImageProxy extends ImageProxy {
+    readonly blob: Blob;
+    private readonly _src;
+    constructor(blob: Blob);
+    dispose(): void;
+}

package/dist/ui/browser/ImageProxy.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlobImageProxy = exports.ElementImageProxy = exports.ImageProxy = void 0;
+const rxjs_1 = require("rxjs");
+const errors_1 = require("../../errors");
+const BlurHasher_1 = require("./BlurHasher");
+// base
+class ImageProxy {
+    constructor(image) {
+        this.image = image;
+        // initialize instance variables
+        this._state$ = new rxjs_1.BehaviorSubject('uninitialized');
+        // bind methods (helps with callbacks
+        this.onLoad = this.onLoad.bind(this);
+        this.onError = this.onError.bind(this);
+        // add listeners
+        image.addEventListener('load', this.onLoad);
+        image.addEventListener('error', this.onError);
+        // set initial state
+        this.state = image.complete
+            ? image.naturalWidth === 0
+                ? 'error'
+                : 'ready'
+            : 'loading';
+    }
+    get state$() {
+        return this._state$.asObservable();
+    }
+    get state() {
+        return this._state$.getValue();
+    }
+    set state(state) {
+        // ignore if disposed
+        const { _state$ } = this;
+        if (_state$.getValue() === 'disposed') {
+            return;
+        }
+        // update
+        _state$.next(state);
+    }
+    get loaded() {
+        return this.state === 'ready';
+    }
+    get intrinsicSize() {
+        // throw if not ready
+        const { image, loaded } = this;
+        if (!loaded) {
+            throw new errors_1.InvalidOperationError('Cannot access size of unloaded image');
+        }
+        // return image size
+        return {
+            width: image.naturalWidth,
+            height: image.naturalHeight
+        };
+    }
+    waitUntil(...states) {
+        return (0, rxjs_1.firstValueFrom)(this._state$.pipe((0, rxjs_1.filter)(state => states.includes(state))));
+    }
+    async waitUntilReady() {
+        // wait for ready/error
+        const state = await this.waitUntil('ready', 'error', 'disposed');
+        // throw if error
+        if (state === 'error') {
+            throw new errors_1.NotAvailableError('Image could not be loaded');
+        }
+    }
+    async getBlurHash() {
+        // return hash if already computed
+        const { image, _blurHash } = this;
+        if (_blurHash) {
+            return _blurHash;
+        }
+        // ensure initialization is done
+        if (!this.loaded) {
+            await this.waitUntilReady();
+        }
+        // create hash
+        this._blurHash = BlurHasher_1.BlurHasher.createHash(image);
+        // return has
+        return this._blurHash;
+    }
+    dispose() {
+        // mark disposed
+        this._state$.next('disposed');
+        // remove listeners
+        const { image } = this;
+        image.removeEventListener('load', this.onLoad);
+        image.removeEventListener('error', this.onError);
+    }
+    onLoad() {
+        this.state = 'ready';
+    }
+    onError() {
+        this.state = 'error';
+    }
+}
+exports.ImageProxy = ImageProxy;
+// element
+class ElementImageProxy extends ImageProxy {
+    constructor(image) {
+        super(image);
+    }
+}
+exports.ElementImageProxy = ElementImageProxy;
+// blob
+class BlobImageProxy extends ImageProxy {
+    constructor(blob) {
+        // create offscreen image
+        const image = document.createElement('img');
+        const src = URL.createObjectURL(blob);
+        image.src = src;
+        const style = image.style;
+        style.position = 'absolute';
+        style.pointerEvents = 'none';
+        style.opacity = '0';
+        // construct base
+        super(image);
+        this.blob = blob;
+        // initialize instance variables
+        this._src = src;
+    }
+    dispose() {
+        // call base
+        super.dispose();
+        // revoke src
+        const { image, _src } = this;
+        URL.revokeObjectURL(_src);
+        // clean up dom
+        image.remove();
+    }
+}
+exports.BlobImageProxy = BlobImageProxy;

package/dist/ui/browser/InputEvent.d.ts

@@ -0,0 +1,13 @@
+export interface InputEvent {
+    bubbles: boolean;
+    cancelable: boolean;
+    defaultPrevented: boolean;
+    eventPhase: number;
+    isTrusted: boolean;
+    preventDefault(): void;
+    isDefaultPrevented(): boolean;
+    stopPropagation(): void;
+    isPropagationStopped(): boolean;
+    persist(): void;
+    timeStamp: number;
+}

package/dist/ui/browser/InputEvent.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/ui/browser/SVGProxy.d.ts

@@ -0,0 +1,9 @@
+import { Size } from '../geometry';
+export declare class SVGProxy {
+    readonly data: string;
+    private readonly svg;
+    private constructor();
+    get intrinsicSize(): Size | undefined;
+    static forBlob(blob: Blob): Promise<SVGProxy>;
+    static forData(data: string): SVGProxy;
+}

package/dist/ui/browser/SVGProxy.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVGProxy = void 0;
+const errors_1 = require("../../errors");
+const Browser_1 = require("./Browser");
+// class
+class SVGProxy {
+    constructor(data) {
+        this.data = data;
+        // throw if not in browser
+        if (!Browser_1.Browser.available) {
+            throw new errors_1.InvalidOperationError('Cannot access SVGProxy outside of Browser');
+        }
+        // parse svg (throw if not an svg)
+        const parser = new DOMParser();
+        const document = parser.parseFromString(data, 'image/svg+xml');
+        const element = document.documentElement;
+        if (!isSvgElement(element)) {
+            console.error('[SVGProxy] invalid SVG data:', data);
+            throw new errors_1.ArgumentError('Specified data is not an SVG');
+        }
+        // initialize instance variables
+        this.svg = element;
+    }
+    get intrinsicSize() {
+        // helper
+        const { svg } = this;
+        const resolveSize = (attribute) => {
+            const sizeRaw = svg.getAttribute(attribute) || undefined;
+            const size = sizeRaw ? Number.parseInt(sizeRaw) : undefined;
+            return Number.isInteger(size) ? size : undefined;
+        };
+        // return size OR undefined if we're missing size
+        const width = resolveSize('width');
+        const height = resolveSize('height');
+        console.error('[SVGProxy] extracted suze:', { svg, width, height, data: this.data });
+        return width && height
+            ? { width, height }
+            : undefined;
+    }
+    static async forBlob(blob) {
+        // throw if not an svg
+        const mimeType = blob.type.toLowerCase();
+        if (mimeType !== 'image/svg+xml') {
+            throw new errors_1.ArgumentError(`Expected SVG blob, found "${mimeType}"`);
+        }
+        // create svg proxy
+        return new SVGProxy(await blob.text());
+    }
+    static forData(data) {
+        return new SVGProxy(data);
+    }
+}
+exports.SVGProxy = SVGProxy;
+// guard
+function isSvgElement(element) {
+    var _a;
+    return ((_a = element === null || element === void 0 ? void 0 : element.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'svg';
+}

package/dist/ui/browser/VideoProxy.d.ts

@@ -0,0 +1,42 @@
+import { Size } from '../geometry';
+export declare abstract class VideoProxy {
+    readonly video: HTMLVideoElement;
+    private readonly _state$;
+    private _blurHash?;
+    protected constructor(video: HTMLVideoElement);
+    get state$(): import("rxjs").Observable<VideoProxy.State>;
+    get state(): VideoProxy.State;
+    private set state(value);
+    get loaded(): boolean;
+    get intrinsicSize(): Size;
+    get duration(): number;
+    waitUntil(...states: VideoProxy.State[]): Promise<VideoProxy.State>;
+    waitUntilReady(): Promise<void>;
+    seek(positionInSeconds: number): Promise<void>;
+    play({ playbackRate, loop }?: VideoProxy.PlayOptions): Promise<void>;
+    pause(): Promise<void>;
+    getBlurHash(): Promise<string | undefined>;
+    dispose(): void;
+    private onLoadData;
+    private onError;
+    private onPlay;
+    private onSeeking;
+    private onSeeked;
+    private onPause;
+}
+export declare namespace VideoProxy {
+    type State = 'uninitialized' | 'loading' | 'ready' | 'playing' | 'seeking' | 'error' | 'disposed';
+    type PlayOptions = {
+        playbackRate?: number;
+        loop?: boolean;
+    };
+}
+export declare class ElementVideoProxy extends VideoProxy {
+    constructor(video: HTMLVideoElement);
+}
+export declare class BlobVideoProxy extends VideoProxy {
+    readonly blob: Blob;
+    private readonly _src;
+    constructor(blob: Blob);
+    dispose(): void;
+}