@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/overlay/managers/interaction-lock-manager.js

@@ -0,0 +1,375 @@
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { getOverlays } from './zindex-manager.js';
+/**
+* Check if two arrays are shallow equal
+* @param left Left side array
+* @param right Right side array
+* @returns true if arrays are equal
+*/
+const equal = (left, right) => {
+    const length = left.length;
+    if (length !== right.length) {
+        return false;
+    }
+    for (let i = 0; i < length; i += 1) {
+        if (left[i] !== right[i]) {
+            return false;
+        }
+    }
+    return true;
+};
+/**
+ * Scroll lock manager singleton is responsible for locking
+ * all scrollbars apart one in the active overlay
+ */
+export class ScrollLockManager {
+    constructor() {
+        this.scrollTop = 0;
+        this.scrollLeft = 0;
+        this.lockScroll = false;
+        /**
+         * A list of elements that are currently interactive
+         * aka `pointer-events: auto` applied
+         */
+        this.interactiveElements = [];
+        this.pointerEventsMap = new Map();
+        this.scrollThrottler = new AnimationTaskRunner();
+        /**
+         * Run on scroll event. If onscroll happened as a result of user interaction, restore the original position
+         * @param event Scroll event
+         * @returns {void}
+         */
+        this.onScroll = (event) => {
+            const path = event.composedPath();
+            if (this.lockScroll && !path.includes(this.interactiveElement)) {
+                this.restoreScrollPosition();
+            }
+        };
+        /**
+         * Apply scroll lock as a result of user interaction
+         * @returns {void}
+         */
+        this.applyScrollLock = () => {
+            // this must be applied in order to make the difference between user scroll and system scroll
+            // otherwise there must not be scroll prevention on resize/orientationchange events
+            this.scrollThrottler.cancel();
+            this.lockScroll = true;
+        };
+        /**
+         * Remove scroll lock when user interaction has finished
+         * @returns {void}
+         */
+        this.removeScrollLock = () => {
+            this.scrollThrottler.schedule(() => {
+                this.lockScroll = false;
+            });
+        };
+        /**
+         * Run on wheel event
+         * If wheel happened as a result of user interaction, restore the original position
+         * @param event Wheel event
+         * @returns {void}
+         */
+        this.onWheelScroll = (event) => {
+            if (this.shouldCancelWheel(event)) {
+                event.preventDefault();
+            }
+        };
+        /**
+         * Run on touch events.
+         * If touch happened as a result of user interaction, restore the original position
+         * @param event Touch event
+         * @returns {void}
+         */
+        this.onTouchScroll = (event) => {
+            if (event.cancelable && this.shouldCancelTouch(event)) { /* Not all touch events can be cancelled */
+                event.preventDefault();
+            }
+        };
+    }
+    /**
+     * Get a collection of interactive elements
+     * @param overlay Overlay to check
+     * @returns interactive elements
+     */
+    static getInteractiveElements(overlay) {
+        if (!overlay) {
+            return [];
+        }
+        // overlay is always included
+        const interactiveElements = [overlay];
+        if (overlay.interactiveElements && overlay.interactiveElements.length) {
+            return interactiveElements.concat(overlay.interactiveElements);
+        }
+        if (!overlay.lockPositionTarget && overlay.positionTarget instanceof HTMLElement) {
+            interactiveElements.push(overlay.positionTarget);
+        }
+        return interactiveElements;
+    }
+    /**
+     * The list of active overlays, which participate
+     * in lock management
+     */
+    get overlays() {
+        return getOverlays().filter(overlay => !overlay.noInteractionLock);
+    }
+    /**
+     * Lock the screen and make top most overlay
+     * and its position target interactive
+     * @returns {void}
+     */
+    applyLock() {
+        const topOverlay = this.overlays[0];
+        const oldInteractiveElements = this.interactiveElements;
+        const newInteractiveElements = ScrollLockManager.getInteractiveElements(topOverlay);
+        // do nothing if the list is the same
+        if (equal(oldInteractiveElements, newInteractiveElements)) {
+            return;
+        }
+        if (!oldInteractiveElements.length && newInteractiveElements.length) {
+            // lock the screen
+            this.saveScrollPosition();
+            this.lockEvents();
+            this.applyLockBackdrop();
+        }
+        else if (oldInteractiveElements.length && !newInteractiveElements.length) {
+            // unlock the screen
+            this.unlockEvents();
+            this.removeLockBackdrop();
+        }
+        // restore overlay events to original value
+        for (let i = 0; i < oldInteractiveElements.length; i += 1) {
+            this.restorePointerEvents(oldInteractiveElements[i]);
+        }
+        // make overlay interactive by applying pointer-events: auto;
+        for (let i = 0; i < newInteractiveElements.length; i += 1) {
+            this.setPointerEvents(newInteractiveElements[i]);
+        }
+        this.interactiveElements = newInteractiveElements;
+    }
+    /**
+     * Set pointer events style tag
+     * @param el Element to unlock
+     * @param [value=auto] Value of pointer events
+     * @returns {void}
+     */
+    setPointerEvents(el, value = 'auto') {
+        if (el) {
+            this.pointerEventsMap.set(el, el.style.pointerEvents);
+            el.style.setProperty('pointer-events', value);
+        }
+    }
+    /**
+     * Restore pointer events style tag
+     * @param el Element to restore
+     * @returns {void}
+     */
+    restorePointerEvents(el) {
+        if (el) {
+            const pointerEvents = this.pointerEventsMap.get(el);
+            this.pointerEventsMap.delete(el);
+            if (pointerEvents) {
+                el.style.setProperty('pointer-events', pointerEvents);
+            }
+            else {
+                el.style.removeProperty('pointer-events');
+            }
+        }
+    }
+    /**
+     * Get the top most interactive element
+     * @returns element
+     */
+    get interactiveElement() {
+        return this.interactiveElements[this.interactiveElements.length - 1];
+    }
+    /**
+     * Memoize the scroll position of the outside scrolling element.
+     * @returns {void}
+     */
+    saveScrollPosition() {
+        if (document.scrollingElement) {
+            this.scrollTop = document.scrollingElement.scrollTop;
+            this.scrollLeft = document.scrollingElement.scrollLeft;
+        }
+        else {
+            // Since we don't know if is the body or html, get max.
+            this.scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
+            this.scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
+        }
+    }
+    /**
+     * Resets the scroll position of the outside scrolling element.
+     * @returns {void}
+     */
+    restoreScrollPosition() {
+        if (document.scrollingElement) {
+            document.scrollingElement.scrollTop = this.scrollTop;
+            document.scrollingElement.scrollLeft = this.scrollLeft;
+        }
+        else {
+            // Since we don't know if is the body or html, set both.
+            document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop;
+            document.documentElement.scrollLeft = document.body.scrollLeft = this.scrollLeft;
+        }
+    }
+    /**
+     * Listen for scroll and wheel events, to apply the correct lock logic
+     * @returns {void}
+     */
+    lockEvents() {
+        const wheelEventConf = {
+            capture: true,
+            passive: false
+        };
+        document.addEventListener('wheel', this.onWheelScroll, wheelEventConf);
+        document.addEventListener('touchstart', this.onTouchScroll, wheelEventConf);
+        document.addEventListener('touchmove', this.onTouchScroll, wheelEventConf);
+        document.addEventListener('touchend', this.onTouchScroll, wheelEventConf);
+        const scrollEventConf = {
+            capture: true,
+            passive: true /* passive improves scrolling performance. See https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners how. This does not work in IE11 */
+        };
+        document.addEventListener('scroll', this.onScroll, scrollEventConf);
+        document.addEventListener('mousedown', this.applyScrollLock, scrollEventConf);
+        document.addEventListener('touchstart', this.applyScrollLock, scrollEventConf);
+        document.addEventListener('keydown', this.applyScrollLock, scrollEventConf);
+        document.addEventListener('mouseup', this.removeScrollLock, scrollEventConf);
+        document.addEventListener('touchend', this.removeScrollLock, scrollEventConf);
+        document.addEventListener('keyup', this.removeScrollLock, scrollEventConf);
+    }
+    /**
+     * Remove scroll and wheel listeners
+     * @returns {void}
+     */
+    unlockEvents() {
+        const wheelEventConf = {
+            capture: true,
+            passive: false
+        };
+        document.removeEventListener('wheel', this.onWheelScroll, wheelEventConf);
+        document.removeEventListener('touchstart', this.onTouchScroll, wheelEventConf);
+        document.removeEventListener('touchmove', this.onTouchScroll, wheelEventConf);
+        document.removeEventListener('touchend', this.onTouchScroll, wheelEventConf);
+        const scrollEventConf = {
+            capture: true,
+            passive: true
+        };
+        document.removeEventListener('scroll', this.onScroll, scrollEventConf);
+        document.removeEventListener('mousedown', this.applyScrollLock, scrollEventConf);
+        document.removeEventListener('touchstart', this.applyScrollLock, scrollEventConf);
+        document.removeEventListener('keydown', this.applyScrollLock, scrollEventConf);
+        document.removeEventListener('mouseup', this.removeScrollLock, scrollEventConf);
+        document.removeEventListener('touchend', this.removeScrollLock, scrollEventConf);
+        document.removeEventListener('keyup', this.removeScrollLock, scrollEventConf);
+    }
+    /**
+     * Add locking backdrop and prevent pointer events on document
+     * @returns {void}
+     */
+    applyLockBackdrop() {
+        this.setPointerEvents(document.documentElement, 'none'); /* prevent scrolling on all other scrollable elements */
+    }
+    /**
+     * Remove locking backdrop and prevent pointer events on document
+     * @returns {void}
+     */
+    removeLockBackdrop() {
+        this.restorePointerEvents(document.documentElement);
+    }
+    /**
+     * Check if wheel event should be cancelled
+     * @param event Touch event
+     * @return shouldCancelTouch True if the touch event should be cancelled
+     */
+    shouldCancelTouch(event) {
+        const { targetTouches, type, target } = event;
+        if (type === 'touchend') {
+            this.lastTouchPosition = undefined;
+            return false;
+        }
+        // store touch position
+        if (type === 'touchstart') {
+            const touch = targetTouches[0];
+            this.lastTouchPosition = {
+                pageX: touch.pageX,
+                pageY: touch.pageY,
+                target
+            };
+            return false;
+        }
+        if (!this.lastTouchPosition) {
+            return false;
+        }
+        // 'touchmove'
+        const touch = targetTouches[0];
+        const deltaX = this.lastTouchPosition.pageX - touch.pageX;
+        const deltaY = this.lastTouchPosition.pageY - touch.pageY;
+        return this.shouldCancelScroll(event, deltaY, deltaX);
+    }
+    /**
+     * Check if wheel event should be cancelled
+     * @param event Wheel event
+     * @return shouldCancelWheel True if the scroll event should be cancelled
+     */
+    shouldCancelWheel(event) {
+        const { deltaX, deltaY } = event;
+        return this.shouldCancelScroll(event, deltaY, deltaX);
+    }
+    /**
+     * Check if wheel event should be cancelled
+     * @param event Wheel event
+     * @param deltaY Scroll delta on Y axis
+     * @param deltaX Scroll delta on X axis
+     * @return shouldCancel True if the event should be cancelled
+     */
+    shouldCancelScroll(event, deltaY, deltaX) {
+        const isVerticalScroll = Math.abs(deltaY) >= Math.abs(deltaX);
+        const path = [...event.composedPath()];
+        let idx = -1;
+        const interactiveElements = [...this.interactiveElements];
+        // calculate if the wheel event should be stopped according to locked
+        while (idx === -1 && interactiveElements.length) {
+            idx = path.indexOf(interactiveElements.pop());
+        }
+        // scroll happened outside the locked container
+        if (idx === -1) {
+            return true;
+        }
+        const checkSlice = path.slice(0, idx + 1);
+        const canScroll = isVerticalScroll ? (element) => {
+            const style = window.getComputedStyle(element);
+            if (style.overflowY === 'scroll' || style.overflowY === 'auto') {
+                // delta < 0 is scroll up, delta > 0 is scroll down.
+                return deltaY < 0 ? element.scrollTop > 0 : element.scrollTop < element.scrollHeight - element.clientHeight;
+            }
+            return false;
+        } : (element) => {
+            const style = window.getComputedStyle(element);
+            if (style.overflowX === 'scroll' || style.overflowX === 'auto') {
+                // delta < 0 is scroll left, delta > 0 is scroll right.
+                return deltaX < 0 ? element.scrollLeft > 0 : element.scrollLeft < element.scrollWidth - element.clientWidth;
+            }
+            return false;
+        };
+        while (checkSlice.length) {
+            const node = checkSlice.shift();
+            if (node && node.nodeType !== Node.ELEMENT_NODE) {
+                continue;
+            }
+            if (canScroll(node)) {
+                return false;
+            }
+        }
+        return true;
+    }
+}
+const locker = new ScrollLockManager(); /* Locker is a singleton */
+/**
+* Lock the screen and make top most overlay
+* and its position target interactive
+* @returns {void}
+*/
+export const applyLock = () => {
+    locker.applyLock();
+};

package/lib/overlay/managers/viewport-manager.d.ts

@@ -0,0 +1,93 @@
+import type { ViewAreaInfo } from '../helpers/types';
+import type { Overlay } from '../elements/overlay';
+import '../elements/overlay-viewport.js';
+/**
+ * Viewport manager singleton is responsible for getting
+ * viewport sizes and reacting on viewport changes
+ * @returns {void}
+ */
+export declare class ViewportManager {
+    private registry;
+    private viewRegistry;
+    private refitFrame;
+    private screenViewport;
+    /**
+     * Refit all overlays
+     * @returns {void}
+     */
+    private callRefit;
+    /**
+     * Create overlay-viewport and insert it before the provided node
+     * @param insertBefore A node to insert before
+     * @returns created overlay-viewport
+     */
+    private createViewport;
+    /**
+     * Remove overlay-viewport from DOM tree
+     * @param viewport overlay-viewport to remove
+     * @returns {void}
+     */
+    private removeViewport;
+    /**
+     * Set screen sizing viewport
+     * @returns void
+     */
+    private setScreenViewport;
+    /**
+     * Removes screen sizing viewport
+     * @returns void
+     */
+    private removeScreenViewport;
+    /**
+     * Reset sizing for viewport
+     * @param viewport Viewport to reset sizing for
+     * @returns {void}
+     */
+    private resetViewportSizing;
+    getViewAreaInfo(overlay: Overlay): ViewAreaInfo;
+    register(overlay: Overlay): void;
+    deregister(overlay: Overlay): void;
+    /**
+     * @returns count of elements inside manager
+     */
+    size(): number;
+    /**
+     * applies deregister for each element in registry
+     * @returns {void}
+     */
+    clear(): void;
+}
+/**
+ * Register the new overlay. Must be run to let start behaviour to listen for viewport events
+ * @param overlay Overlay
+ * @returns {void}
+ */
+export declare const register: (overlay: Overlay) => void;
+/**
+ * Deregister the overlay
+ * @param overlay Overlay
+ * @returns {void}
+ */
+export declare const deregister: (overlay: Overlay) => void;
+/**
+ * @typedef {Object} ViewAreaInfo
+ * @property {Number} viewHeight - The height of view area
+ * @property {Number} viewWidth - The width of view area
+ * @property {Number} [offsetTop=0] - iOS only the view area vertical offset
+ * @property {Number} [offsetLeft=0] - iOS only the view area horizontal offset
+ */
+/**
+ * Get sizing information of the viewport for overlay
+ * @param overlay Overlay to get info for
+ * @return area info
+ */
+export declare const getViewAreaInfo: (overlay: Overlay) => ViewAreaInfo;
+/**
+ * @returns count of elements inside manager
+ */
+export declare const size: () => number;
+/**
+ * removes all elements from registry
+ * @returns {void}
+ */
+export declare const clear: () => void;

package/lib/overlay/managers/viewport-manager.js

@@ -0,0 +1,211 @@
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import '../elements/overlay-viewport.js';
+/**
+  * Default values for area info
+*/
+const viewAreaInfo = {
+    viewHeight: 0,
+    viewWidth: 0,
+    offsetTop: 0,
+    offsetLeft: 0,
+    offsetBottom: 0,
+    offsetRight: 0,
+    viewOffsetTop: 0,
+    viewOffsetLeft: 0
+};
+// Used to capture scroll events
+const ScrollEventOptions = { capture: true, passive: true };
+/**
+ * Viewport manager singleton is responsible for getting
+ * viewport sizes and reacting on viewport changes
+ * @returns {void}
+ */
+export class ViewportManager {
+    constructor() {
+        this.registry = new Map();
+        this.viewRegistry = new WeakMap();
+        this.refitFrame = new AnimationTaskRunner();
+        this.screenViewport = null;
+        /**
+         * Refit all overlays
+         * @returns {void}
+         */
+        this.callRefit = () => {
+            this.refitFrame.schedule(() => {
+                this.registry.forEach((viewport, overlay) => {
+                    this.resetViewportSizing(viewport);
+                    overlay.fit();
+                });
+            });
+        };
+    }
+    /**
+     * Create overlay-viewport and insert it before the provided node
+     * @param insertBefore A node to insert before
+     * @returns created overlay-viewport
+     */
+    createViewport(insertBefore) {
+        var _a;
+        const viewport = document.createElement('ef-overlay-viewport');
+        (_a = insertBefore === null || insertBefore === void 0 ? void 0 : insertBefore.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(viewport, insertBefore);
+        return viewport;
+    }
+    /**
+     * Remove overlay-viewport from DOM tree
+     * @param viewport overlay-viewport to remove
+     * @returns {void}
+     */
+    removeViewport(viewport) {
+        var _a;
+        (_a = viewport.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(viewport);
+    }
+    /**
+     * Set screen sizing viewport
+     * @returns void
+     */
+    setScreenViewport() {
+        if (!this.screenViewport) {
+            this.screenViewport = this.createViewport(document.body);
+        }
+    }
+    /**
+     * Removes screen sizing viewport
+     * @returns void
+     */
+    removeScreenViewport() {
+        if (this.screenViewport) {
+            this.removeViewport(this.screenViewport);
+            this.screenViewport = null;
+        }
+    }
+    /**
+     * Reset sizing for viewport
+     * @param viewport Viewport to reset sizing for
+     * @returns {void}
+     */
+    resetViewportSizing(viewport) {
+        if (!this.screenViewport) {
+            return;
+        }
+        const screenRect = this.screenViewport.getBoundingClientRect();
+        // since screenViewport is applied on html element, it does not include body zoom
+        // Zoom is a legacy feature and must not be used by any means.
+        // Kept here for compatibility with old apps
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const zoom = parseFloat(window.getComputedStyle(document.body).zoom);
+        const screenHeight = screenRect.height / zoom;
+        const screenWidth = screenRect.width / zoom;
+        const { top, left, bottom, right } = viewport.getBoundingClientRect();
+        const offsetTop = top < 0 ? Math.abs(top) : 0;
+        const offsetLeft = left < 0 ? Math.abs(left) : 0;
+        const offsetBottom = bottom > screenHeight ? bottom - screenHeight : 0;
+        const offsetRight = right > screenWidth ? right - screenWidth : 0;
+        const viewHeight = viewport.offsetHeight - offsetTop - offsetBottom;
+        const viewWidth = viewport.offsetWidth - offsetLeft - offsetRight;
+        this.viewRegistry.set(viewport, {
+            viewOffsetTop: top < 0 ? top + offsetTop : top,
+            viewOffsetLeft: left < 0 ? left + offsetLeft : left,
+            viewHeight: viewHeight < 0 ? 0 : viewHeight,
+            viewWidth: viewWidth < 0 ? 0 : viewWidth,
+            offsetTop,
+            offsetLeft,
+            offsetBottom,
+            offsetRight
+        });
+    }
+    getViewAreaInfo(overlay) {
+        const viewport = this.registry.get(overlay);
+        if (!viewport) {
+            return viewAreaInfo;
+        }
+        if (!this.viewRegistry.has(viewport)) {
+            this.resetViewportSizing(viewport);
+        }
+        return this.viewRegistry.get(viewport) || viewAreaInfo;
+    }
+    register(overlay) {
+        if (!this.registry.size) {
+            window.addEventListener('resize', this.callRefit);
+            window.addEventListener('orientationchange', this.callRefit);
+            window.addEventListener('scroll', this.callRefit, ScrollEventOptions);
+            this.setScreenViewport();
+        }
+        if (!this.registry.has(overlay)) {
+            const viewport = this.createViewport(overlay);
+            this.registry.set(overlay, viewport);
+            viewport.addEventListener('resize', () => overlay.fit());
+        }
+    }
+    deregister(overlay) {
+        if (this.registry.has(overlay)) {
+            const viewport = this.registry.get(overlay);
+            viewport && this.removeViewport(viewport);
+            this.registry.delete(overlay);
+        }
+        if (!this.registry.size) {
+            window.removeEventListener('resize', this.callRefit);
+            window.removeEventListener('orientationchange', this.callRefit);
+            window.removeEventListener('scroll', this.callRefit, ScrollEventOptions);
+            this.removeScreenViewport();
+        }
+    }
+    /**
+     * @returns count of elements inside manager
+     */
+    size() {
+        return this.registry.size;
+    }
+    /**
+     * applies deregister for each element in registry
+     * @returns {void}
+     */
+    clear() {
+        this.registry.forEach((viewport, overlay) => this.deregister(overlay));
+    }
+}
+const viewportManager = new ViewportManager();
+/**
+ * Register the new overlay. Must be run to let start behaviour to listen for viewport events
+ * @param overlay Overlay
+ * @returns {void}
+ */
+export const register = (overlay) => {
+    viewportManager.register(overlay);
+};
+/**
+ * Deregister the overlay
+ * @param overlay Overlay
+ * @returns {void}
+ */
+export const deregister = (overlay) => {
+    viewportManager.deregister(overlay);
+};
+/**
+ * @typedef {Object} ViewAreaInfo
+ * @property {Number} viewHeight - The height of view area
+ * @property {Number} viewWidth - The width of view area
+ * @property {Number} [offsetTop=0] - iOS only the view area vertical offset
+ * @property {Number} [offsetLeft=0] - iOS only the view area horizontal offset
+ */
+/**
+ * Get sizing information of the viewport for overlay
+ * @param overlay Overlay to get info for
+ * @return area info
+ */
+export const getViewAreaInfo = (overlay) => {
+    return viewportManager.getViewAreaInfo(overlay);
+};
+/**
+ * @returns count of elements inside manager
+ */
+export const size = () => {
+    return viewportManager.size();
+};
+/**
+ * removes all elements from registry
+ * @returns {void}
+ */
+export const clear = () => {
+    viewportManager.clear();
+};