@internetarchive/collection-browser 2.7.7-alpha.2 → 2.7.7

package/dist/src/tiles/hover/hover-pane-controller.js

@@ -1,175 +1,175 @@
-import { html, nothing, } from 'lit';
-const clamp = (val, min = -Infinity, max = Infinity) => Math.max(min, Math.min(val, max));
-export class HoverPaneController {
-    constructor(
-    /** The host element to which this controller should attach listeners */
-    host, 
-    /** Options for adjusting the hover pane behavior (offsets, delays, etc.) */
-    options = {}) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        this.host = host;
-        /**
-         * The breakpoint (in pixels) below which the mobile interface should be used.
-         */
-        this.mobileBreakpoint = 600;
-        /**
-         * The number of horizontal pixels the hover pane should be offset from the
-         * pointer position.
-         */
-        this.offsetX = -10;
-        /**
-         * The number of vertical pixels the hover pane should be offset from the
-         * pointer position.
-         */
-        this.offsetY = 15;
-        /**
-         * The delay between the mouse idling within the host element and when the hover
-         * pane should begin fading in (in milliseconds).
-         */
-        this.showDelay = 300;
-        /**
-         * The delay between when the mouse leaves the host element and when the hover
-         * pane should begin fading out (in milliseconds).
-         */
-        this.hideDelay = 100;
-        /**
-         * The delay between when a touch event begins on the host element and when the
-         * hover pane should begin fading in (in milliseconds).
-         */
-        this.longPressDelay = 600;
-        /**
-         * Whether long press interactions should cause the hover pane to appear (when
-         * below the mobile breakpoint).
-         */
-        this.enableLongPress = false;
-        /**
-         * Used to control the current state of this provider's hover pane.
-         *  - `'hidden'` => The hover pane is not present at all.
-         *  - `'shown'` => The hover pane is either fading in or fully visible.
-         *  - `'fading-out'` => The hover pane is fading out and about to be removed.
-         */
-        this.hoverPaneState = 'hidden';
-        /**
-         * Whether the touch backdrop should currently be rendered irrespective of other touch
-         * interactions being enabled.
-         */
-        this.forceTouchBackdrop = false;
-        /** A record of the last mouse position on the host element, for positioning the hover pane */
-        this.lastPointerClientPos = { x: 0, y: 0 };
-        /**
-         * Handler for the mouseenter event on the host element.
-         */
-        // NB: Arrow function so 'this' remains bound to the controller
-        this.handleMouseEnter = (e) => {
-            // Delegate to the mousemove handler, as they are currently processed identically
-            this.handleMouseMove(e);
-        };
-        /**
-         * Handler for the mousemove event on the host element.
-         * Aborts any pending hide/fade-out for the hover pane, and restarts the
-         * timer to show it.
-         */
-        // NB: Arrow function so 'this' remains bound to the controller
-        this.handleMouseMove = (e) => {
-            var _a;
-            // The mouse is within the tile, so abort any pending removal of the hover pane
-            clearTimeout(this.hideTimer);
-            // If the hover pane is currently fading out, just make it fade back in where it is
-            if (this.hoverPaneState === 'fading-out') {
-                this.hoverPaneState = 'shown';
-                (_a = this.hoverPane) === null || _a === void 0 ? void 0 : _a.classList.add('fade-in');
-            }
-            // Restart the timer to show the hover pane anytime the mouse moves within the tile
-            if (this.hoverPaneState === 'hidden') {
-                this.restartShowHoverPaneTimer();
-                this.lastPointerClientPos = { x: e.clientX, y: e.clientY };
-            }
-        };
-        /**
-         * Handler for the mouseleave event on the host element.
-         * Hides the hover pane if present, and aborts the timer for showing it.
-         */
-        // NB: Arrow function so 'this' remains bound to the controller
-        this.handleMouseLeave = () => {
-            // Abort any timer to show the hover pane, as the mouse has left the tile
-            clearTimeout(this.showTimer);
-            // Hide the hover pane if it's already been shown
-            clearTimeout(this.hideTimer);
-            if (this.hoverPaneState !== 'hidden') {
-                this.hideTimer = window.setTimeout(() => {
-                    this.fadeOutHoverPane();
-                }, this.hideDelay);
-            }
-        };
-        /**
-         * Handler for the touchstart event on the host element.
-         * Begins the timer for recognizing a long press event.
-         */
-        // NB: Arrow function so 'this' remains bound to the controller
-        this.handleTouchStart = (e) => {
-            clearTimeout(this.longPressTimer);
-            if (e.touches.length === 1) {
-                this.longPressTimer = window.setTimeout(() => {
-                    if (this.hoverPaneState === 'hidden') {
-                        this.showHoverPane();
-                    }
-                }, this.longPressDelay);
-                this.lastPointerClientPos = {
-                    x: e.touches[0].clientX,
-                    y: e.touches[0].clientY,
-                };
-            }
-        };
-        /**
-         * Handler for events that should cancel a pending long press event
-         * (touchmove, touchend, touchcancel). Aborts the timer for recognizing
-         * a long press.
-         */
-        // NB: Arrow function so 'this' remains bound to the controller
-        this.handleLongPressCancel = () => {
-            clearTimeout(this.longPressTimer);
-        };
-        /**
-         * Handler for the contextmenu event, which should be suppressed during
-         * mobile long-press events on the host element.
-         */
-        // NB: Arrow function so 'this' remains bound to the controller
-        this.handleContextMenu = (e) => {
-            e.preventDefault();
-        };
-        /**
-         * Immediately causes the hover pane to begin fading out, if it is present.
-         */
-        // NB: Arrow function so 'this' remains bound to the controller
-        this.handleBackdropInteraction = (e) => {
-            if (this.hoverPaneState !== 'hidden') {
-                this.fadeOutHoverPane();
-            }
-            e.stopPropagation();
-        };
-        this.mobileBreakpoint = (_a = options.mobileBreakpoint) !== null && _a !== void 0 ? _a : this.mobileBreakpoint;
-        this.offsetX = (_b = options.offsetX) !== null && _b !== void 0 ? _b : this.offsetX;
-        this.offsetY = (_c = options.offsetY) !== null && _c !== void 0 ? _c : this.offsetY;
-        this.showDelay = (_d = options.showDelay) !== null && _d !== void 0 ? _d : this.showDelay;
-        this.hideDelay = (_e = options.hideDelay) !== null && _e !== void 0 ? _e : this.hideDelay;
-        this.longPressDelay = (_f = options.longPressDelay) !== null && _f !== void 0 ? _f : this.longPressDelay;
-        this.enableLongPress = (_g = options.enableLongPress) !== null && _g !== void 0 ? _g : this.enableLongPress;
-        this.host.addController(this);
-    }
-    hostConnected() {
-        this.attachListeners();
-    }
-    hostDisconnected() {
-        this.detachListeners();
-    }
-    hostUpdated() {
-        this.hoverPane = this.host.getHoverPane();
-        this.hoverPaneProps = this.host.getHoverPaneProps();
-    }
-    /** @inheritdoc */
-    getTemplate() {
-        var _a, _b, _c, _d, _e, _f;
-        return this.shouldRenderHoverPane
+import { html, nothing, } from 'lit';
+const clamp = (val, min = -Infinity, max = Infinity) => Math.max(min, Math.min(val, max));
+export class HoverPaneController {
+    constructor(
+    /** The host element to which this controller should attach listeners */
+    host, 
+    /** Options for adjusting the hover pane behavior (offsets, delays, etc.) */
+    options = {}) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        this.host = host;
+        /**
+         * The breakpoint (in pixels) below which the mobile interface should be used.
+         */
+        this.mobileBreakpoint = 600;
+        /**
+         * The number of horizontal pixels the hover pane should be offset from the
+         * pointer position.
+         */
+        this.offsetX = -10;
+        /**
+         * The number of vertical pixels the hover pane should be offset from the
+         * pointer position.
+         */
+        this.offsetY = 15;
+        /**
+         * The delay between the mouse idling within the host element and when the hover
+         * pane should begin fading in (in milliseconds).
+         */
+        this.showDelay = 300;
+        /**
+         * The delay between when the mouse leaves the host element and when the hover
+         * pane should begin fading out (in milliseconds).
+         */
+        this.hideDelay = 100;
+        /**
+         * The delay between when a touch event begins on the host element and when the
+         * hover pane should begin fading in (in milliseconds).
+         */
+        this.longPressDelay = 600;
+        /**
+         * Whether long press interactions should cause the hover pane to appear (when
+         * below the mobile breakpoint).
+         */
+        this.enableLongPress = false;
+        /**
+         * Used to control the current state of this provider's hover pane.
+         *  - `'hidden'` => The hover pane is not present at all.
+         *  - `'shown'` => The hover pane is either fading in or fully visible.
+         *  - `'fading-out'` => The hover pane is fading out and about to be removed.
+         */
+        this.hoverPaneState = 'hidden';
+        /**
+         * Whether the touch backdrop should currently be rendered irrespective of other touch
+         * interactions being enabled.
+         */
+        this.forceTouchBackdrop = false;
+        /** A record of the last mouse position on the host element, for positioning the hover pane */
+        this.lastPointerClientPos = { x: 0, y: 0 };
+        /**
+         * Handler for the mouseenter event on the host element.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleMouseEnter = (e) => {
+            // Delegate to the mousemove handler, as they are currently processed identically
+            this.handleMouseMove(e);
+        };
+        /**
+         * Handler for the mousemove event on the host element.
+         * Aborts any pending hide/fade-out for the hover pane, and restarts the
+         * timer to show it.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleMouseMove = (e) => {
+            var _a;
+            // The mouse is within the tile, so abort any pending removal of the hover pane
+            clearTimeout(this.hideTimer);
+            // If the hover pane is currently fading out, just make it fade back in where it is
+            if (this.hoverPaneState === 'fading-out') {
+                this.hoverPaneState = 'shown';
+                (_a = this.hoverPane) === null || _a === void 0 ? void 0 : _a.classList.add('fade-in');
+            }
+            // Restart the timer to show the hover pane anytime the mouse moves within the tile
+            if (this.hoverPaneState === 'hidden') {
+                this.restartShowHoverPaneTimer();
+                this.lastPointerClientPos = { x: e.clientX, y: e.clientY };
+            }
+        };
+        /**
+         * Handler for the mouseleave event on the host element.
+         * Hides the hover pane if present, and aborts the timer for showing it.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleMouseLeave = () => {
+            // Abort any timer to show the hover pane, as the mouse has left the tile
+            clearTimeout(this.showTimer);
+            // Hide the hover pane if it's already been shown
+            clearTimeout(this.hideTimer);
+            if (this.hoverPaneState !== 'hidden') {
+                this.hideTimer = window.setTimeout(() => {
+                    this.fadeOutHoverPane();
+                }, this.hideDelay);
+            }
+        };
+        /**
+         * Handler for the touchstart event on the host element.
+         * Begins the timer for recognizing a long press event.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleTouchStart = (e) => {
+            clearTimeout(this.longPressTimer);
+            if (e.touches.length === 1) {
+                this.longPressTimer = window.setTimeout(() => {
+                    if (this.hoverPaneState === 'hidden') {
+                        this.showHoverPane();
+                    }
+                }, this.longPressDelay);
+                this.lastPointerClientPos = {
+                    x: e.touches[0].clientX,
+                    y: e.touches[0].clientY,
+                };
+            }
+        };
+        /**
+         * Handler for events that should cancel a pending long press event
+         * (touchmove, touchend, touchcancel). Aborts the timer for recognizing
+         * a long press.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleLongPressCancel = () => {
+            clearTimeout(this.longPressTimer);
+        };
+        /**
+         * Handler for the contextmenu event, which should be suppressed during
+         * mobile long-press events on the host element.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleContextMenu = (e) => {
+            e.preventDefault();
+        };
+        /**
+         * Immediately causes the hover pane to begin fading out, if it is present.
+         */
+        // NB: Arrow function so 'this' remains bound to the controller
+        this.handleBackdropInteraction = (e) => {
+            if (this.hoverPaneState !== 'hidden') {
+                this.fadeOutHoverPane();
+            }
+            e.stopPropagation();
+        };
+        this.mobileBreakpoint = (_a = options.mobileBreakpoint) !== null && _a !== void 0 ? _a : this.mobileBreakpoint;
+        this.offsetX = (_b = options.offsetX) !== null && _b !== void 0 ? _b : this.offsetX;
+        this.offsetY = (_c = options.offsetY) !== null && _c !== void 0 ? _c : this.offsetY;
+        this.showDelay = (_d = options.showDelay) !== null && _d !== void 0 ? _d : this.showDelay;
+        this.hideDelay = (_e = options.hideDelay) !== null && _e !== void 0 ? _e : this.hideDelay;
+        this.longPressDelay = (_f = options.longPressDelay) !== null && _f !== void 0 ? _f : this.longPressDelay;
+        this.enableLongPress = (_g = options.enableLongPress) !== null && _g !== void 0 ? _g : this.enableLongPress;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        this.attachListeners();
+    }
+    hostDisconnected() {
+        this.detachListeners();
+    }
+    hostUpdated() {
+        this.hoverPane = this.host.getHoverPane();
+        this.hoverPaneProps = this.host.getHoverPaneProps();
+    }
+    /** @inheritdoc */
+    getTemplate() {
+        var _a, _b, _c, _d, _e, _f;
+        return this.shouldRenderHoverPane
             ? html ` ${this.touchBackdropTemplate}
           <tile-hover-pane
             .model=${(_a = this.hoverPaneProps) === null || _a === void 0 ? void 0 : _a.model}
@@ -180,31 +180,31 @@ export class HoverPaneController {
             .collectionTitles=${(_f = this.hoverPaneProps) === null || _f === void 0 ? void 0 : _f.collectionTitles}
             .mobileBreakpoint=${this.mobileBreakpoint}
             .currentWidth=${window.innerWidth}
-          ></tile-hover-pane>`
-            : nothing;
-    }
-    /** @inheritdoc */
-    toggleHoverPane(options) {
-        var _a;
-        if (this.hoverPaneState === 'shown') {
-            this.fadeOutHoverPane();
-            this.forceTouchBackdrop = false;
-        }
-        else {
-            this.lastPointerClientPos = options.coords;
-            this.forceTouchBackdrop = (_a = options.enableTouchBackdrop) !== null && _a !== void 0 ? _a : false;
-            this.showHoverPane();
-        }
-    }
-    /**
-     * Produces a template for the invisible touch capture backdrop that
-     * is used to cancel the hover pane on touch devices. We want any
-     * touch interaction on the backdrop to remove the hover pane, and
-     * we don't want to bubble up mouse events that would otherwise
-     * affect the state of the hover pane (e.g., fading it back in).
-     */
-    get touchBackdropTemplate() {
-        return this.showTouchBackdrop
+          ></tile-hover-pane>`
+            : nothing;
+    }
+    /** @inheritdoc */
+    toggleHoverPane(options) {
+        var _a;
+        if (this.hoverPaneState === 'shown') {
+            this.fadeOutHoverPane();
+            this.forceTouchBackdrop = false;
+        }
+        else {
+            this.lastPointerClientPos = options.coords;
+            this.forceTouchBackdrop = (_a = options.enableTouchBackdrop) !== null && _a !== void 0 ? _a : false;
+            this.showHoverPane();
+        }
+    }
+    /**
+     * Produces a template for the invisible touch capture backdrop that
+     * is used to cancel the hover pane on touch devices. We want any
+     * touch interaction on the backdrop to remove the hover pane, and
+     * we don't want to bubble up mouse events that would otherwise
+     * affect the state of the hover pane (e.g., fading it back in).
+     */
+    get touchBackdropTemplate() {
+        return this.showTouchBackdrop
             ? html `<div
           id="touch-backdrop"
           @touchstart=${this.handleBackdropInteraction}
@@ -214,159 +214,159 @@ export class HoverPaneController {
           @mouseenter=${(e) => e.stopPropagation()}
           @mousemove=${(e) => e.stopPropagation()}
           @mouseleave=${(e) => e.stopPropagation()}
-        ></div>`
-            : nothing;
-    }
-    get showTouchBackdrop() {
-        return ((this.isTouchEnabled && this.enableLongPress) || this.forceTouchBackdrop);
-    }
-    /** Whether to use the mobile layout */
-    get isMobileView() {
-        return !!this.mobileBreakpoint && window.innerWidth < this.mobileBreakpoint;
-    }
-    get isHoverEnabled() {
-        return window.matchMedia('(hover: hover)').matches;
-    }
-    get isTouchEnabled() {
-        return ('ontouchstart' in window &&
-            window.matchMedia('(any-pointer: coarse)').matches);
-    }
-    /** Whether this controller should currently render its hover pane. */
-    get shouldRenderHoverPane() {
-        return this.hoverPaneState !== 'hidden';
-    }
-    /**
-     * Returns the desired top/left offsets (in pixels) for this tile's hover pane.
-     * The desired offsets balance positioning the hover pane under the primary pointer
-     * while preventing it from flowing outside the viewport. The returned offsets are
-     * given relative to this tile's content box.
-     *
-     * These offsets are only valid if the hover pane is already rendered with its
-     * correct width and height. If the hover pane is not present, the returned offsets
-     * will simply represent the current pointer position.
-     */
-    get hoverPaneDesiredOffsets() {
-        // Try to find offsets for the hover pane that:
-        //  (a) cause it to lie entirely within the viewport, and
-        //  (b) to the extent possible, minimize the distance between the
-        //      nearest corner of the hover pane and the mouse position
-        //      (with some additional offsets applied after the fact).
-        var _a;
-        let [left, top] = [
-            this.lastPointerClientPos.x,
-            this.lastPointerClientPos.y,
-        ];
-        // Flip the hover pane according to which quadrant of the viewport the mouse is in.
-        // (Similar to how Wikipedia's link hover panes work)
-        const flipHorizontal = this.lastPointerClientPos.x > window.innerWidth / 2;
-        const flipVertical = this.lastPointerClientPos.y > window.innerHeight / 2;
-        const hoverPaneRect = (_a = this.hoverPane) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (hoverPaneRect) {
-            // If we need to flip the hover pane, do so by subtracting its width/height from left/top
-            if (flipHorizontal) {
-                left -= hoverPaneRect.width;
-            }
-            if (flipVertical) {
-                top -= hoverPaneRect.height;
-            }
-            // Apply desired offsets from the mouse position
-            left += (flipHorizontal ? -1 : 1) * this.offsetX;
-            top += (flipVertical ? -1 : 1) * this.offsetY;
-            // On mobile view, shunt the hover pane to avoid overflowing the viewport
-            if (this.isMobileView) {
-                left = clamp(left, 20, window.innerWidth - hoverPaneRect.width - 20);
-                top = clamp(top, 20, window.innerHeight - hoverPaneRect.height - 20);
-            }
-        }
-        // Subtract off the tile's own offsets
-        const hostRect = this.host.getBoundingClientRect();
-        left -= hostRect.left;
-        top -= hostRect.top;
-        return { left, top };
-    }
-    /**
-     * Adds to the host element all the listeners necessary to make the
-     * hover pane functional.
-     */
-    attachListeners() {
-        if (this.isHoverEnabled) {
-            this.host.addEventListener('mouseenter', this.handleMouseEnter);
-            this.host.addEventListener('mousemove', this.handleMouseMove);
-            this.host.addEventListener('mouseleave', this.handleMouseLeave);
-        }
-        if (this.isTouchEnabled && this.enableLongPress) {
-            this.host.addEventListener('touchstart', this.handleTouchStart);
-            this.host.addEventListener('touchmove', this.handleLongPressCancel);
-            this.host.addEventListener('touchend', this.handleLongPressCancel);
-            this.host.addEventListener('touchcancel', this.handleLongPressCancel);
-            this.host.addEventListener('contextmenu', this.handleContextMenu);
-        }
-    }
-    /**
-     * Removes all the hover pane listeners from the host element.
-     */
-    detachListeners() {
-        this.host.removeEventListener('mouseenter', this.handleMouseEnter);
-        this.host.removeEventListener('mousemove', this.handleMouseMove);
-        this.host.removeEventListener('mouseleave', this.handleMouseLeave);
-        this.host.removeEventListener('touchstart', this.handleTouchStart);
-        this.host.removeEventListener('touchmove', this.handleLongPressCancel);
-        this.host.removeEventListener('touchend', this.handleLongPressCancel);
-        this.host.removeEventListener('touchcancel', this.handleLongPressCancel);
-        this.host.removeEventListener('contextmenu', this.handleContextMenu);
-    }
-    /**
-     * Aborts and restarts the timer for showing the hover pane.
-     */
-    restartShowHoverPaneTimer() {
-        clearTimeout(this.showTimer);
-        this.showTimer = window.setTimeout(() => {
-            this.showHoverPane();
-        }, this.showDelay);
-    }
-    /**
-     * Causes this tile's hover pane to be rendered, positioned, and made visible.
-     */
-    async showHoverPane() {
-        var _a;
-        this.hoverPaneState = 'shown';
-        this.host.requestUpdate();
-        // Wait for the state update to render the hover pane
-        await this.host.updateComplete;
-        await new Promise(resolve => {
-            // Pane sizes aren't accurate until next frame
-            requestAnimationFrame(resolve);
-        });
-        // Apply the correct positioning to the hover pane
-        this.repositionHoverPane();
-        // The hover pane is initially not visible (to avoid it shifting around
-        // while being positioned). Since it now has the correct positioning, we
-        // can make it visible and begin its fade-in animation.
-        (_a = this.hoverPane) === null || _a === void 0 ? void 0 : _a.classList.add('visible', 'fade-in');
-    }
-    /**
-     * Causes this tile's hover pane to begin fading out and starts
-     * the timer for it to be removed.
-     */
-    fadeOutHoverPane() {
-        var _a;
-        this.hoverPaneState = 'fading-out';
-        (_a = this.hoverPane) === null || _a === void 0 ? void 0 : _a.classList.remove('fade-in');
-        clearTimeout(this.hideTimer);
-        this.hideTimer = window.setTimeout(() => {
-            this.hoverPaneState = 'hidden';
-            this.host.requestUpdate();
-        }, 100);
-    }
-    /**
-     * Positions the hover pane with the correct offsets.
-     */
-    repositionHoverPane() {
-        if (!this.hoverPane)
-            return;
-        const { top, left } = this.hoverPaneDesiredOffsets;
-        this.hoverPane.style.top = `${top}px`;
-        this.hoverPane.style.left = `${left}px`;
-    }
-}
+        ></div>`
+            : nothing;
+    }
+    get showTouchBackdrop() {
+        return ((this.isTouchEnabled && this.enableLongPress) || this.forceTouchBackdrop);
+    }
+    /** Whether to use the mobile layout */
+    get isMobileView() {
+        return !!this.mobileBreakpoint && window.innerWidth < this.mobileBreakpoint;
+    }
+    get isHoverEnabled() {
+        return window.matchMedia('(hover: hover)').matches;
+    }
+    get isTouchEnabled() {
+        return ('ontouchstart' in window &&
+            window.matchMedia('(any-pointer: coarse)').matches);
+    }
+    /** Whether this controller should currently render its hover pane. */
+    get shouldRenderHoverPane() {
+        return this.hoverPaneState !== 'hidden';
+    }
+    /**
+     * Returns the desired top/left offsets (in pixels) for this tile's hover pane.
+     * The desired offsets balance positioning the hover pane under the primary pointer
+     * while preventing it from flowing outside the viewport. The returned offsets are
+     * given relative to this tile's content box.
+     *
+     * These offsets are only valid if the hover pane is already rendered with its
+     * correct width and height. If the hover pane is not present, the returned offsets
+     * will simply represent the current pointer position.
+     */
+    get hoverPaneDesiredOffsets() {
+        // Try to find offsets for the hover pane that:
+        //  (a) cause it to lie entirely within the viewport, and
+        //  (b) to the extent possible, minimize the distance between the
+        //      nearest corner of the hover pane and the mouse position
+        //      (with some additional offsets applied after the fact).
+        var _a;
+        let [left, top] = [
+            this.lastPointerClientPos.x,
+            this.lastPointerClientPos.y,
+        ];
+        // Flip the hover pane according to which quadrant of the viewport the mouse is in.
+        // (Similar to how Wikipedia's link hover panes work)
+        const flipHorizontal = this.lastPointerClientPos.x > window.innerWidth / 2;
+        const flipVertical = this.lastPointerClientPos.y > window.innerHeight / 2;
+        const hoverPaneRect = (_a = this.hoverPane) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (hoverPaneRect) {
+            // If we need to flip the hover pane, do so by subtracting its width/height from left/top
+            if (flipHorizontal) {
+                left -= hoverPaneRect.width;
+            }
+            if (flipVertical) {
+                top -= hoverPaneRect.height;
+            }
+            // Apply desired offsets from the mouse position
+            left += (flipHorizontal ? -1 : 1) * this.offsetX;
+            top += (flipVertical ? -1 : 1) * this.offsetY;
+            // On mobile view, shunt the hover pane to avoid overflowing the viewport
+            if (this.isMobileView) {
+                left = clamp(left, 20, window.innerWidth - hoverPaneRect.width - 20);
+                top = clamp(top, 20, window.innerHeight - hoverPaneRect.height - 20);
+            }
+        }
+        // Subtract off the tile's own offsets
+        const hostRect = this.host.getBoundingClientRect();
+        left -= hostRect.left;
+        top -= hostRect.top;
+        return { left, top };
+    }
+    /**
+     * Adds to the host element all the listeners necessary to make the
+     * hover pane functional.
+     */
+    attachListeners() {
+        if (this.isHoverEnabled) {
+            this.host.addEventListener('mouseenter', this.handleMouseEnter);
+            this.host.addEventListener('mousemove', this.handleMouseMove);
+            this.host.addEventListener('mouseleave', this.handleMouseLeave);
+        }
+        if (this.isTouchEnabled && this.enableLongPress) {
+            this.host.addEventListener('touchstart', this.handleTouchStart);
+            this.host.addEventListener('touchmove', this.handleLongPressCancel);
+            this.host.addEventListener('touchend', this.handleLongPressCancel);
+            this.host.addEventListener('touchcancel', this.handleLongPressCancel);
+            this.host.addEventListener('contextmenu', this.handleContextMenu);
+        }
+    }
+    /**
+     * Removes all the hover pane listeners from the host element.
+     */
+    detachListeners() {
+        this.host.removeEventListener('mouseenter', this.handleMouseEnter);
+        this.host.removeEventListener('mousemove', this.handleMouseMove);
+        this.host.removeEventListener('mouseleave', this.handleMouseLeave);
+        this.host.removeEventListener('touchstart', this.handleTouchStart);
+        this.host.removeEventListener('touchmove', this.handleLongPressCancel);
+        this.host.removeEventListener('touchend', this.handleLongPressCancel);
+        this.host.removeEventListener('touchcancel', this.handleLongPressCancel);
+        this.host.removeEventListener('contextmenu', this.handleContextMenu);
+    }
+    /**
+     * Aborts and restarts the timer for showing the hover pane.
+     */
+    restartShowHoverPaneTimer() {
+        clearTimeout(this.showTimer);
+        this.showTimer = window.setTimeout(() => {
+            this.showHoverPane();
+        }, this.showDelay);
+    }
+    /**
+     * Causes this tile's hover pane to be rendered, positioned, and made visible.
+     */
+    async showHoverPane() {
+        var _a;
+        this.hoverPaneState = 'shown';
+        this.host.requestUpdate();
+        // Wait for the state update to render the hover pane
+        await this.host.updateComplete;
+        await new Promise(resolve => {
+            // Pane sizes aren't accurate until next frame
+            requestAnimationFrame(resolve);
+        });
+        // Apply the correct positioning to the hover pane
+        this.repositionHoverPane();
+        // The hover pane is initially not visible (to avoid it shifting around
+        // while being positioned). Since it now has the correct positioning, we
+        // can make it visible and begin its fade-in animation.
+        (_a = this.hoverPane) === null || _a === void 0 ? void 0 : _a.classList.add('visible', 'fade-in');
+    }
+    /**
+     * Causes this tile's hover pane to begin fading out and starts
+     * the timer for it to be removed.
+     */
+    fadeOutHoverPane() {
+        var _a;
+        this.hoverPaneState = 'fading-out';
+        (_a = this.hoverPane) === null || _a === void 0 ? void 0 : _a.classList.remove('fade-in');
+        clearTimeout(this.hideTimer);
+        this.hideTimer = window.setTimeout(() => {
+            this.hoverPaneState = 'hidden';
+            this.host.requestUpdate();
+        }, 100);
+    }
+    /**
+     * Positions the hover pane with the correct offsets.
+     */
+    repositionHoverPane() {
+        if (!this.hoverPane)
+            return;
+        const { top, left } = this.hoverPaneDesiredOffsets;
+        this.hoverPane.style.top = `${top}px`;
+        this.hoverPane.style.left = `${left}px`;
+    }
+}
 //# sourceMappingURL=hover-pane-controller.js.map