@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

package/dist/esm/index-ecc819ad.js

@@ -0,0 +1,967 @@
+/**
+ * A collection of shims that provided minimal
+ * support of WeakMap and Map classes.
+ *
+ * These implementations are not meant to be used outside of
+ * ResizeObserver modules as they cover only a limited range
+ * of use cases.
+ */
+
+/* eslint-disable require-jsdoc */
+const hasNativeCollections =
+    typeof window.WeakMap === 'function' &&
+    typeof window.Map === 'function';
+
+const WeakMap = (() => {
+    if (hasNativeCollections) {
+        return window.WeakMap;
+    }
+
+    function getIndex(arr, key) {
+        let result = -1;
+
+        arr.some((entry, index) => {
+            let matches = entry[0] === key;
+
+            if (matches) {
+                result = index;
+            }
+
+            return matches;
+        });
+
+        return result;
+    }
+
+    return class {
+        constructor() {
+            this.__entries__ = [];
+        }
+
+        get(key) {
+            let index = getIndex(this.__entries__, key);
+
+            return this.__entries__[index][1];
+        }
+
+        set(key, value) {
+            let index = getIndex(this.__entries__, key);
+
+            if (~index) {
+                this.__entries__[index][1] = value;
+            } else {
+                this.__entries__.push([key, value]);
+            }
+        }
+
+        delete(key) {
+            let entries = this.__entries__,
+                index = getIndex(entries, key);
+
+            if (~index) {
+                entries.splice(index, 1);
+            }
+        }
+
+        has(key) {
+            return !!~getIndex(this.__entries__, key);
+        }
+    };
+})();
+
+const Map = (() => {
+    if (hasNativeCollections) {
+        return window.Map;
+    }
+
+    return class extends WeakMap {
+        get size() {
+            return this.__entries__.length;
+        }
+
+        clear() {
+            this.__entries__.splice(0, this.__entries__.length);
+        }
+
+        entries() {
+            return this.__entries__.slice();
+        }
+
+        keys() {
+            return this.__entries__.map(entry => entry[0]);
+        }
+
+        values() {
+            return this.__entries__.map(entry => entry[1]);
+        }
+
+        forEach(callback, ctx = null) {
+            for (const entry of this.__entries__) {
+                callback.call(ctx, entry[1], entry[0]);
+            }
+        }
+    };
+})();
+
+/**
+ * A shim for performance.now method which falls back
+ * to Date.now if the first one is not supported.
+ *
+ * @returns {Timestamp}
+ */
+const now = (() => {
+    if (
+        window.performance &&
+        typeof window.performance.now === 'function'
+    ) {
+        return () => window.performance.now();
+    }
+
+    return () => Date.now();
+})();
+
+/**
+ * A shim for requestAnimationFrame which falls back
+ * to setTimeout if the first one is not supported.
+ *
+ * @returns {Number} Requests' identifier.
+ */
+const requestAnimFrame = (() => {
+    if (
+        window.requestAnimationFrame &&
+        typeof window.requestAnimationFrame === 'function'
+    ) {
+        return window.requestAnimationFrame;
+    }
+
+    return callback => {
+        return setTimeout(() => callback(Date.now()), 1000 / 60);
+    };
+})();
+
+const mutationsSupported = typeof window.MutationObserver === 'function';
+
+/**
+ * Creates a wrapper function which ensures that
+ * provided callback will be invoked only once
+ * during the specified delay.
+ *
+ * @param {Function} callback - Function to be invoked.
+ * @param {Number} [delay = 0] - Delay after which to invoke callback.
+ * @returns {Function}
+ */
+function debounce(callback, delay = 0) {
+    let timeoutID = false;
+
+    return function (...args) {
+        if (timeoutID !== false) {
+            clearTimeout(timeoutID);
+        }
+
+        timeoutID = setTimeout(() => {
+            timeoutID = false;
+
+            /* eslint-disable no-invalid-this */
+            callback.apply(this, args);
+
+            /* eslint-enable no-invalid-this */
+        }, delay);
+    };
+}
+
+/**
+ * Controller class which handles updates of ResizeObserver instances.
+ * It's meant to decide when and for how long it's necessary to run updates by listening to the windows
+ * "resize" event along with a tracking of DOM mutations (nodes removal, changes of attributes, etc.).
+ *
+ * Transitions and animations are handled by running a repeatable update cycle either until the dimensions
+ * of observed elements are changing or the timeout is reached (default timeout is 50 milliseconds).
+ * Timeout value can be manually increased if transitions have a delay.
+ *
+ * Continuous update cycle will be used automatically in case if MutationObserver is not supported.
+ */
+class ResizeObserverController {
+    /**
+     * Creates a new instance of ResizeObserverController.
+     *
+     * @param {Number} [idleTimeout = 0] - Idle timeout value.
+     * @param {Boolean} [continuousUpdates = false] - Whether to use a continuous update cycle.
+     */
+    constructor(idleTimeout = 50, continuousUpdates = false) {
+        this._idleTimeout = idleTimeout;
+        this._isCycleContinuous = continuousUpdates;
+
+        this._cycleStartTime = 0;
+
+        // Indicates whether the update cycle is currently running.
+        this._isCycleActive = false;
+
+        // Indicates whether the update of observers is scheduled.
+        this._isUpdateScheduled = false;
+
+        // Indicates whether DOM listeners have been added.
+        this._listenersEnabled = false;
+
+        // Keeps reference to the instance of MutationObserver.
+        this._mutationsObserver = null;
+
+        // A list of connected observers.
+        this._observers = [];
+
+        // Fix value of "this" binding for the following methods.
+        this.runUpdates = this.runUpdates.bind(this);
+        this._resolveScheduled = this._resolveScheduled.bind(this);
+        this._onMutation = this._onMutation.bind(this);
+
+        // Function that will be invoked to re-run the
+        // update cycle if continuous cycles are enabled.
+        this._continuousCycleHandler = debounce(this.runUpdates, 200);
+    }
+
+    /**
+     * Returns current idle timeout value.
+     *
+     * @returns {Number}
+     */
+    get idleTimeout() {
+        return this._idleTimeout;
+    }
+
+    /**
+     * Sets up new idle timeout value.
+     *
+     * @param {Number} value - New timeout value.
+     */
+    set idleTimeout(value) {
+        this._idleTimeout = value;
+    }
+
+    /**
+     * Tells whether continuous updates are enabled.
+     *
+     * @returns {Boolean}
+     */
+    get continuousUpdates() {
+        return this._isCycleContinuous;
+    }
+
+    /**
+     * Enables or disables continuous updates.
+     *
+     * @param {Boolean} value - Whether to enable or disable
+     *      continuous updates. Note that the value won't be applied
+     *      if MutationObserver is not supported.
+     */
+    set continuousUpdates(value) {
+        if (mutationsSupported) {
+            this._isCycleContinuous = value;
+        }
+    }
+
+    /**
+     * Adds observer to observers list.
+     *
+     * @param {ResizeObserver} observer - Observer to be added.
+     */
+    connect(observer) {
+        if (!this.isConnected(observer)) {
+            this._observers.push(observer);
+        }
+
+        // Add listeners if they haven't been added yet.
+        if (!this._listenersEnabled) {
+            this._addListeners();
+        }
+    }
+
+    /**
+     * Removes observer from observers list.
+     *
+     * @param {ResizeObserver} observer - Observer to be removed.
+     */
+    disconnect(observer) {
+        let observers = this._observers,
+            index = observers.indexOf(observer);
+
+        if (~index) {
+            observers.splice(index, 1);
+        }
+
+        // Remove listeners if controller
+        // has no connected observers.
+        if (!observers.length && this._listenersEnabled) {
+            this._removeListeners();
+        }
+    }
+
+    /**
+     * Tells whether provided observer is connected to controller.
+     *
+     * @param {ResizeObserver} observer - Observer to be checked.
+     * @returns {Boolean}
+     */
+    isConnected(observer) {
+        return !!~this._observers.indexOf(observer);
+    }
+
+    /**
+     * Updates every observer from observers list and
+     * notifies them of queued entries.
+     *
+     * @private
+     * @returns {Boolean} Returns "true" if any observer
+     *      has detected changes in dimensions of its' elements.
+     */
+    _updateObservers() {
+        let hasChanges = false;
+
+        for (const observer of this._observers) {
+            observer.gatherActive();
+
+            if (observer.hasActive()) {
+                hasChanges = true;
+
+                observer.broadcastActive();
+            }
+        }
+
+        return hasChanges;
+    }
+
+    /**
+     * Starts the update cycle which will run either
+     * until it detects changes in the dimensions of
+     * elements or the idle timeout is reached.
+     */
+    runUpdates() {
+        this._cycleStartTime = now();
+        this._isCycleActive = true;
+
+        this.scheduleUpdate();
+    }
+
+    /**
+     * Schedules the update of observers.
+     *
+     * @private
+     */
+    scheduleUpdate() {
+        if (!this._isUpdateScheduled) {
+            this._isUpdateScheduled = true;
+
+            requestAnimFrame(this._resolveScheduled);
+        }
+    }
+
+    /**
+     * Invokes the update of observers. It may re-run the
+     * cycle if changes in observers have been detected.
+     *
+     * @private
+     */
+    _resolveScheduled() {
+        const hasChanges = this._updateObservers();
+
+        this._isUpdateScheduled = false;
+
+        // Do nothing if cycle wasn't started.
+        if (!this._isCycleActive) {
+            return;
+        }
+
+        // Re-start cycle if changes have been detected.
+        if (hasChanges) {
+            this.runUpdates();
+        } else if (this._hasRemainingTime()) {
+            this.scheduleUpdate();
+        } else {
+            this._endUpdates();
+        }
+    }
+
+    /**
+     * Tells whether the update cycle has time remaining.
+     *
+     * @private
+     * @returns {Boolean}
+     */
+    _hasRemainingTime() {
+        const timePassed = now() - this._cycleStartTime;
+
+        return this._idleTimeout - timePassed > 0;
+    }
+
+    /**
+     * Callback which is invoked when update cycle
+     * is finished. It may start a new cycle if continuous
+     * updates are enabled.
+     *
+     * @private
+     */
+    _endUpdates() {
+        this._isCycleActive = false;
+
+        if (this._isCycleContinuous && this._listenersEnabled) {
+            this._continuousCycleHandler();
+        }
+    }
+
+    /**
+     * Initializes DOM listeners.
+     *
+     * @private
+     */
+    _addListeners() {
+        // Do nothing if listeners have been already added.
+        if (this._listenersEnabled) {
+            return;
+        }
+
+        this._listenersEnabled = true;
+
+        // Repeatable cycle is used here because the resize event may
+        // lead to continuous changes, e.g. when width or height of an element
+        // are controlled by CSS transitions.
+        window.addEventListener('resize', this.runUpdates);
+
+        // Fall back to an infinite cycle.
+        if (!mutationsSupported) {
+            this._isCycleContinuous = true;
+
+            this.runUpdates();
+        } else {
+            // Subscribe to DOM mutations as they may lead to
+            // changes in dimensions of elements.
+            this._mutationsObserver = new MutationObserver(this._onMutation);
+
+            this._mutationsObserver.observe(document, {
+                attributes: true,
+                childList: true,
+                characterData: true,
+                subtree: true
+            });
+        }
+    }
+
+    /**
+     * Removes DOM listeners.
+     *
+     * @private
+     */
+    _removeListeners() {
+        // Do nothing if listeners have been already removed.
+        if (!this._listenersEnabled) {
+            return;
+        }
+
+        window.removeEventListener('resize', this.runUpdates);
+
+        if (this._mutationsObserver) {
+            this._mutationsObserver.disconnect();
+        }
+
+        this._mutationsObserver = null;
+        this._listenersEnabled = false;
+    }
+
+    /**
+     * DOM mutations handler.
+     *
+     * @private
+     * @param {Array<MutationRecord>} entries - An array of mutation records.
+     */
+    _onMutation(entries) {
+        // Check if at least one entry
+        // contains attributes changes.
+        const attrsChanged = entries.some(entry => {
+            return entry.type === 'attributes';
+        });
+
+        // It's expected that animations may start only
+        // after some attribute changes its' value.
+        attrsChanged ?
+            this.runUpdates() :
+            this.scheduleUpdate();
+    }
+}
+
+// Placeholder of a content rectangle.
+const emptyRect = {
+    width: 0,
+    height: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+};
+
+/**
+ * Extracts paddings data from the provided element.
+ *
+ * @param {Element} target - Element whose paddings to be extracted.
+ * @returns {Object} Object that contains
+ *      left, top, right and bottom padding values.
+ */
+function getPaddings(target) {
+    const styles = window.getComputedStyle(target);
+    const keys = ['top', 'right', 'bottom', 'left'];
+
+    const paddings = {};
+
+    for (const key of keys) {
+        const value = styles['padding-' + key].replace('px', '');
+
+        paddings[key] = parseFloat(value);
+    }
+
+    return paddings;
+}
+
+/**
+* Subtracts paddings from provided
+* dimensions and creates a content rectangle.
+*
+* @param {Number} clientWidth - Width including paddings.
+* @param {Number} clientHeight - Height including paddings.
+* @param {Object} paddings - Paddings data.
+* @returns {ClientRect}
+*/
+function createContentRect(clientWidth, clientHeight, paddings) {
+    const top = paddings.top;
+    const left = paddings.left;
+
+    const width = clientWidth - (left + paddings.right);
+    const height = clientHeight - (top + paddings.bottom);
+
+    return {
+        width,
+        height,
+        top,
+        right: width + left,
+        bottom: height + top,
+        left
+    };
+}
+
+/**
+ * Calculates content rectangle of provided SVG element.
+ *
+ * @param {SVGElement} target - Element whose content
+ *      rectangle needs to be calculated.
+ * @returns {ClientRect}
+ */
+function getSVGContentRect(target) {
+    const bbox = target.getBBox();
+
+    return createContentRect(bbox.width, bbox.height, emptyRect);
+}
+
+/**
+ * Calculates content rectangle of provided HTMLElement.
+ *
+ * @param {HTMLElement} target - Element whose content
+ *      rectangle needs to be calculated.
+ * @returns {ClientRect}
+ */
+function getHTMLElementContentRect(target) {
+    const width = target.clientWidth;
+    const height = target.clientHeight;
+
+    // It's not necessary to proceed with calculations
+    // as it's already known that the rectangle is empty.
+    if (!width && !height) {
+        return emptyRect;
+    }
+
+    return createContentRect(width, height, getPaddings(target));
+}
+
+/**
+ * Checks whether provided element
+ * is an instance of SVGElement.
+ *
+ * @param {Element} target - Element to be checked.
+ * @returns {Boolean}
+ */
+function isSVGElement(target) {
+    return target instanceof window.SVGElement;
+}
+
+/**
+ * Calculates an appropriate content rectangle
+ * for provided html or svg element.
+ *
+ * @param {Element} target - Element whose content rectangle
+ *      needs to be calculated.
+ * @returns {ClientRect}
+ */
+function getContentRect(target) {
+    return isSVGElement(target) ?
+        getSVGContentRect(target) :
+        getHTMLElementContentRect(target);
+}
+
+/**
+ * Class that is responsible for computations of the
+ * content rectangle of provided DOM element and
+ * for keeping track of its' changes.
+ */
+class ResizeObservation {
+    /**
+     * Creates an instance of ResizeObservation.
+     *
+     * @param {Element} target - Element whose content
+     *      rectangle needs to be observed.
+     */
+    constructor(target) {
+        this.target = target;
+
+        // Keeps reference to the last observed content rectangle.
+        this._contentRect = emptyRect;
+
+        // Broadcasted width of content rectangle.
+        this.broadcastWidth = 0;
+
+        // Broadcasted height of content rectangle.
+        this.broadcastHeight = 0;
+    }
+
+    /**
+     * Updates 'broadcastWidth' and 'broadcastHeight'
+     * properties with a data from the corresponding
+     * properties of the last observed content rectangle.
+     *
+     * @returns {ClientRect} Last observed content rectangle.
+     */
+    broadcastRect() {
+        const rect = this._contentRect;
+
+        this.broadcastWidth = rect.width;
+        this.broadcastHeight = rect.height;
+
+        return rect;
+    }
+
+    /**
+     * Updates content rectangle and tells whether its'
+     * width or height properties have changed since
+     * the last broadcast.
+     *
+     * @returns {Boolean}
+     */
+    isActive() {
+        const rect = getContentRect(this.target);
+
+        this._contentRect = rect;
+
+        return (
+            rect.width !== this.broadcastWidth ||
+            rect.height !== this.broadcastHeight
+        );
+    }
+}
+
+class ResizeObserverEntry {
+    /**
+     * Creates an instance of ResizeObserverEntry.
+     *
+     * @param {Element} target - Element that is being observed.
+     * @param {ClientRect} rectData - Data of the elements' content rectangle.
+     */
+    constructor(target, rectData) {
+        const contentRect = {};
+
+        // According to the specification following properties
+        // are not writable and in native implementation
+        // they are also not enumerable.
+        Object.defineProperties(contentRect, {
+            width: {value: rectData.width},
+            height: {value: rectData.height},
+            top: {value: rectData.top},
+            right: {value: rectData.right},
+            bottom: {value: rectData.bottom},
+            left: {value: rectData.left}
+        });
+
+        Object.defineProperties(this, {
+            target: {value: target},
+            contentRect: {value: contentRect}
+        });
+    }
+}
+
+class ResizeObserver$3 {
+    /**
+     * Creates a new instance of ResizeObserver.
+     *
+     * @param {Function} callback - Callback function which will be invoked
+     *      when one of the observed elements changes its' content rectangle.
+     * @param {ResizeObsreverController} controller - Controller instance
+     *      which is responsible for the updates of observer.
+     * @param {ResizeObserver} publicObserver - Reference
+     *      to the public ResizeObserver instance which will be passed
+     *      to callback function.
+     */
+    constructor(callback, controller, publicObserver) {
+        if (typeof callback !== 'function') {
+            throw new TypeError('The callback provided as parameter 1 is not a function.');
+        }
+
+        // Reference to the callback function.
+        this._callback = callback;
+
+        // A registry of ResizeObservation instances.
+        this._targets = new Map();
+
+        // A collection of resize observations that have detected
+        // changes in dimensions of elements.
+        this._activeTargets = [];
+
+        // Reference to associated ResizeObserverController.
+        this._controller = controller;
+
+        // Public ResizeObserver instance which will be passed
+        // to callback function.
+        this._publicObserver = publicObserver;
+    }
+
+    /**
+     * Starts observing provided element.
+     *
+     * @param {Element} target - Element to be observed.
+     */
+    observe(target) {
+        if (!arguments.length) {
+            throw new TypeError('1 argument required, but only 0 present.');
+        }
+
+        if (!(target instanceof Element)) {
+            throw new TypeError('parameter 1 is not of type "Element".');
+        }
+
+        const targets = this._targets;
+
+        // Do nothing if element is already being observed.
+        if (targets.has(target)) {
+            return;
+        }
+
+        targets.set(target, new ResizeObservation(target));
+
+        // Add observer to controller
+        // if it hasn't been connected yet.
+        if (!this._controller.isConnected(this)) {
+            this._controller.connect(this);
+        }
+
+        // Update observations.
+        this._controller.runUpdates();
+    }
+
+    /**
+     * Stops observing provided element.
+     *
+     * @param {Element} target - Element to stop observing.
+     */
+    unobserve(target) {
+        if (!arguments.length) {
+            throw new TypeError('1 argument required, but only 0 present.');
+        }
+
+        if (!(target instanceof Element)) {
+            throw new TypeError('parameter 1 is not of type "Element".');
+        }
+
+        const targets = this._targets;
+
+        // Do nothing if element is not being observed.
+        if (!targets.has(target)) {
+            return;
+        }
+
+        // Remove element and an associated with
+        // it ResizeObsrvation instance from registry.
+        targets.delete(target);
+
+        if (!targets.size) {
+            this.disconnect();
+        }
+    }
+
+    /**
+     * Stops observing all elements and
+     * clears the observations list.
+     */
+    disconnect() {
+        this.clearActive();
+        this._targets.clear();
+
+        this._controller.disconnect(this);
+    }
+
+    /**
+     * Invokes initial callback function with a list
+     * of ResizeObserverEntry instances collected from
+     * active resize observations.
+     */
+    broadcastActive() {
+        if (!this.hasActive()) {
+            return;
+        }
+
+        const publicObserver = this._publicObserver;
+
+        const entries = this._activeTargets.map(observation => {
+            return new ResizeObserverEntry(
+                observation.target,
+                observation.broadcastRect()
+            );
+        });
+
+        this.clearActive();
+
+        this._callback.call(publicObserver, entries, publicObserver);
+    }
+
+    /**
+     * Clears the collection of pending/active observations.
+     */
+    clearActive() {
+        this._activeTargets.splice(0);
+    }
+
+    /**
+     * Tells whether the observer has
+     * pending observations.
+     *
+     * @returns {Boolean}
+     */
+    hasActive() {
+        return !!this._activeTargets.length;
+    }
+
+    /**
+     * Clears an array of previously collected active observations
+     * and collects observation instances whose associated element
+     * has changes in its' content rectangle.
+     */
+    gatherActive() {
+        this.clearActive();
+
+        const activeTargets = this._activeTargets;
+
+        this._targets.forEach(observation => {
+            if (observation.isActive()) {
+                activeTargets.push(observation);
+            }
+        });
+    }
+}
+
+// Controller which will be assigned to all instances of ResizeObserver.
+const controller = new ResizeObserverController();
+
+// Registry of internal observers.
+const observers = new WeakMap();
+
+/**
+ * ResizeObservers' "Proxy" class which is meant to hide private
+ * properties and methods from public instances.
+ *
+ * Additionally it implements "idleTimeout" and "continuousUpdates" static property
+ * accessors to give a control over the behavior of ResizeObserverController
+ * instance. Changes made to these properties will affect all future and
+ * existing observers.
+ */
+class ResizeObserver$2 {
+    /**
+     * Creates a new instance of ResizeObserver.
+     *
+     * @param {Function} callback - Callback which will
+     *      be invoked when dimensions of one of the
+     *      observed elements have been changed.
+     */
+    constructor(callback) {
+        if (!arguments.length) {
+            throw new TypeError('1 argument required, but only 0 present.');
+        }
+
+        const observer = new ResizeObserver$3(callback, controller, this);
+
+        // Register an internal observer.
+        observers.set(this, observer);
+    }
+
+    /**
+     * Extracts controllers' idle timeout value.
+     *
+     * @returns {Number}
+     */
+    static get idleTimeout() {
+        return controller.idleTimeout;
+    }
+
+    /**
+     * Sets up new idle timeout.
+     *
+     * @param {Number} value - New timeout value.
+     */
+    static set idleTimeout(value) {
+        if (typeof value !== 'number') {
+            throw new TypeError('type of "idleTimeout" value must be a number.');
+        }
+
+        if (typeof value < 0) {
+            throw new TypeError('"idleTimeout" value must be greater than 0.');
+        }
+
+        controller.idleTimeout = value;
+    }
+
+    /**
+     * Tells whether continuous updates are enabled.
+     *
+     * @returns {Boolean}
+     */
+    static get continuousUpdates() {
+        return controller.continuousUpdates;
+    }
+
+    /**
+     * Enables or disables continuous updates.
+     *
+     * @param {Boolean} value - Whether to enable or disable
+     *      continuous updates.
+     */
+    static set continuousUpdates(value) {
+        if (typeof value !== 'boolean') {
+            throw new TypeError('type of "continuousUpdates" value must be a boolean.');
+        }
+
+        controller.continuousUpdates = value;
+    }
+}
+
+// Expose public methods of ResizeObserver.
+[
+    'observe',
+    'unobserve',
+    'disconnect'
+].forEach(method => {
+    ResizeObserver$2.prototype[method] = function () {
+        return observers.get(this)[method](...arguments);
+    };
+});
+
+let ResizeObserver = ResizeObserver$2;
+
+// Export existing implementation if it's available.
+if (typeof window.ResizeObserver === 'function') {
+    ResizeObserver = window.ResizeObserver;
+}
+
+const ResizeObserver$1 = ResizeObserver;
+
+export { ResizeObserver$1 as R };
+
+//# sourceMappingURL=index-ecc819ad.js.map