@internetarchive/collection-browser 3.3.1 → 3.3.2

package/dist/src/tiles/hover/hover-pane-controller.d.ts

@@ -1,220 +0,0 @@
-import type { SortParam } from '@internetarchive/search-service';
-import { HTMLTemplateResult, nothing, ReactiveController, ReactiveControllerHost } from 'lit';
-import type { TileModel } from '../../models';
-import type { CollectionTitles } from '../../data-source/models';
-export interface HoverPaneProperties {
-    model?: TileModel;
-    baseNavigationUrl?: string;
-    baseImageUrl?: string;
-    loggedIn: boolean;
-    suppressBlurring: boolean;
-    sortParam: SortParam | null;
-    collectionTitles?: CollectionTitles;
-}
-export interface HoverPaneControllerOptions {
-    offsetX?: number;
-    offsetY?: number;
-    enableLongPress?: boolean;
-    showDelay?: number;
-    hideDelay?: number;
-    longPressDelay?: number;
-    mobileBreakpoint?: number;
-}
-/** A common interface for providing a hover pane element. */
-export interface HoverPaneProviderInterface {
-    /** Returns the provider's currently rendered hover pane element. */
-    getHoverPane(): HTMLElement | undefined;
-    /** Returns properties that should be passed to the hover pane. */
-    getHoverPaneProps(): HoverPaneProperties;
-}
-export interface ToggleHoverPaneOptions {
-    coords: {
-        x: number;
-        y: number;
-    };
-    enableTouchBackdrop?: boolean;
-}
-/**
- * An interface for interacting with hover pane controllers (e.g.,
- * to retrieve their current hover pane template).
- */
-export interface HoverPaneControllerInterface extends ReactiveController {
-    /**
-     * Returns the hover pane template to render based on this controller's
-     * current state. The returned template may be `nothing` if the hover
-     * pane should not currently be rendered.
-     */
-    getTemplate(): HTMLTemplateResult | typeof nothing;
-    /**
-     * Requests to manually toggle the state of the hover pane.
-     * If the hover pane is already shown, it will begin fading out and then
-     * subsequently be hidden and removed. If the hover pane is already fading
-     * out or hidden, it will fade back in and be shown.
-     */
-    toggleHoverPane(options: ToggleHoverPaneOptions): void;
-}
-export declare class HoverPaneController implements HoverPaneControllerInterface {
-    /** The host element to which this controller should attach listeners */
-    private readonly host;
-    /**
-     * The hover pane element attached to this controller's host.
-     */
-    private hoverPane?;
-    /**
-     * The properties to be passed to the hover pane element
-     */
-    private hoverPaneProps?;
-    /**
-     * The breakpoint (in pixels) below which the mobile interface should be used.
-     */
-    private mobileBreakpoint?;
-    /**
-     * The number of horizontal pixels the hover pane should be offset from the
-     * pointer position.
-     */
-    private offsetX;
-    /**
-     * The number of vertical pixels the hover pane should be offset from the
-     * pointer position.
-     */
-    private offsetY;
-    /**
-     * The delay between the mouse idling within the host element and when the hover
-     * pane should begin fading in (in milliseconds).
-     */
-    private showDelay;
-    /**
-     * The delay between when the mouse leaves the host element and when the hover
-     * pane should begin fading out (in milliseconds).
-     */
-    private hideDelay;
-    /**
-     * The delay between when a touch event begins on the host element and when the
-     * hover pane should begin fading in (in milliseconds).
-     */
-    private longPressDelay;
-    /**
-     * Whether long press interactions should cause the hover pane to appear (when
-     * below the mobile breakpoint).
-     */
-    private enableLongPress;
-    /**
-     * 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.
-     */
-    private hoverPaneState;
-    /** The timer ID for showing the hover pane */
-    private showTimer?;
-    /** The timer ID for hiding the hover pane */
-    private hideTimer?;
-    /** The timer ID for recognizing a long press event */
-    private longPressTimer?;
-    /**
-     * Whether the touch backdrop should currently be rendered irrespective of other touch
-     * interactions being enabled.
-     */
-    private forceTouchBackdrop;
-    /** A record of the last mouse position on the host element, for positioning the hover pane */
-    private lastPointerClientPos;
-    constructor(
-    /** The host element to which this controller should attach listeners */
-    host: ReactiveControllerHost & HoverPaneProviderInterface & HTMLElement, 
-    /** Options for adjusting the hover pane behavior (offsets, delays, etc.) */
-    options?: HoverPaneControllerOptions);
-    hostConnected(): void;
-    hostDisconnected(): void;
-    hostUpdated(): void;
-    /** @inheritdoc */
-    getTemplate(): HTMLTemplateResult | typeof nothing;
-    /** @inheritdoc */
-    toggleHoverPane(options: ToggleHoverPaneOptions): void;
-    /**
-     * 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).
-     */
-    private get touchBackdropTemplate();
-    private get showTouchBackdrop();
-    /** Whether to use the mobile layout */
-    private get isMobileView();
-    private get isHoverEnabled();
-    private get isTouchEnabled();
-    /** Whether this controller should currently render its hover pane. */
-    private get shouldRenderHoverPane();
-    /**
-     * 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
-     * relative to the viewport, intended to position the pane as a popover element.
-     *
-     * 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.
-     */
-    private get hoverPaneDesiredOffsets();
-    /**
-     * Adds to the host element all the listeners necessary to make the
-     * hover pane functional.
-     */
-    private attachListeners;
-    /**
-     * Removes all the hover pane listeners from the host element.
-     */
-    private detachListeners;
-    /**
-     * Handler for the mouseenter event on the host element.
-     */
-    private handleMouseEnter;
-    /**
-     * 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.
-     */
-    private handleMouseMove;
-    /**
-     * Handler for the mouseleave event on the host element.
-     * Hides the hover pane if present, and aborts the timer for showing it.
-     */
-    private handleMouseLeave;
-    /**
-     * Handler for the touchstart event on the host element.
-     * Begins the timer for recognizing a long press event.
-     */
-    private handleTouchStart;
-    /**
-     * Handler for events that should cancel a pending long press event
-     * (touchmove, touchend, touchcancel). Aborts the timer for recognizing
-     * a long press.
-     */
-    private handleLongPressCancel;
-    /**
-     * Handler for the contextmenu event, which should be suppressed during
-     * mobile long-press events on the host element.
-     */
-    private handleContextMenu;
-    /**
-     * Immediately causes the hover pane to begin fading out, if it is present.
-     */
-    private handleBackdropInteraction;
-    /**
-     * Aborts and restarts the timer for showing the hover pane.
-     */
-    private restartShowHoverPaneTimer;
-    /**
-     * Causes this tile's hover pane to be rendered, positioned, and made visible.
-     */
-    private showHoverPane;
-    /**
-     * Causes this tile's hover pane to begin fading out and starts
-     * the timer for it to be removed.
-     */
-    private fadeOutHoverPane;
-    /**
-     * Positions the hover pane with the correct offsets.
-     */
-    private repositionHoverPane;
-}

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

@@ -1,378 +0,0 @@
-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, _g;
-        this.hoverPaneProps = this.host.getHoverPaneProps();
-        return this.shouldRenderHoverPane
-            ? html ` ${this.touchBackdropTemplate}
-          <tile-hover-pane
-            popover
-            .model=${(_a = this.hoverPaneProps) === null || _a === void 0 ? void 0 : _a.model}
-            .baseNavigationUrl=${(_b = this.hoverPaneProps) === null || _b === void 0 ? void 0 : _b.baseNavigationUrl}
-            .baseImageUrl=${(_c = this.hoverPaneProps) === null || _c === void 0 ? void 0 : _c.baseImageUrl}
-            .loggedIn=${(_d = this.hoverPaneProps) === null || _d === void 0 ? void 0 : _d.loggedIn}
-            .suppressBlurring=${(_e = this.hoverPaneProps) === null || _e === void 0 ? void 0 : _e.suppressBlurring}
-            .sortParam=${(_f = this.hoverPaneProps) === null || _f === void 0 ? void 0 : _f.sortParam}
-            .collectionTitles=${(_g = this.hoverPaneProps) === null || _g === void 0 ? void 0 : _g.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
-            ? html `<div
-          id="touch-backdrop"
-          @touchstart=${this.handleBackdropInteraction}
-          @touchmove=${this.handleBackdropInteraction}
-          @touchend=${this.handleBackdropInteraction}
-          @touchcancel=${this.handleBackdropInteraction}
-          @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
-     * relative to the viewport, intended to position the pane as a popover element.
-     *
-     * 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);
-            }
-        }
-        left += window.scrollX;
-        top += window.scrollY;
-        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, _b, _c, _d;
-        this.hoverPaneState = 'shown';
-        this.host.requestUpdate();
-        // Wait for the state update to render the hover pane
-        await this.host.updateComplete;
-        // Ensure the hover pane element is still in the document before showing,
-        // as it might have been removed by the previous update.
-        if (!((_a = this.hoverPane) === null || _a === void 0 ? void 0 : _a.isConnected))
-            return;
-        (_c = (_b = this.hoverPane) === null || _b === void 0 ? void 0 : _b.showPopover) === null || _c === void 0 ? void 0 : _c.call(_b);
-        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.
-        (_d = this.hoverPane) === null || _d === void 0 ? void 0 : _d.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

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

@@ -1 +0,0 @@
-{"version":3,"file":"hover-pane-controller.js","sourceRoot":"","sources":["../../../../src/tiles/hover/hover-pane-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { SortParam } from '@internetarchive/search-service';\nimport {\n  html,\n  HTMLTemplateResult,\n  nothing,\n  ReactiveController,\n  ReactiveControllerHost,\n} from 'lit';\nimport type { TileModel } from '../../models';\nimport type { CollectionTitles } from '../../data-source/models';\n\ntype HoverPaneState = 'hidden' | 'shown' | 'fading-out';\n\nexport interface HoverPaneProperties {\n  model?: TileModel;\n  baseNavigationUrl?: string;\n  baseImageUrl?: string;\n  loggedIn: boolean;\n  suppressBlurring: boolean;\n  sortParam: SortParam | null;\n  collectionTitles?: CollectionTitles;\n}\n\nexport interface HoverPaneControllerOptions {\n  offsetX?: number;\n  offsetY?: number;\n  enableLongPress?: boolean;\n  showDelay?: number;\n  hideDelay?: number;\n  longPressDelay?: number;\n  mobileBreakpoint?: number;\n}\n\n/** A common interface for providing a hover pane element. */\nexport interface HoverPaneProviderInterface {\n  /** Returns the provider's currently rendered hover pane element. */\n  getHoverPane(): HTMLElement | undefined;\n  /** Returns properties that should be passed to the hover pane. */\n  getHoverPaneProps(): HoverPaneProperties;\n}\n\nexport interface ToggleHoverPaneOptions {\n  coords: { x: number; y: number };\n  enableTouchBackdrop?: boolean;\n}\n\n/**\n * An interface for interacting with hover pane controllers (e.g.,\n * to retrieve their current hover pane template).\n */\nexport interface HoverPaneControllerInterface extends ReactiveController {\n  /**\n   * Returns the hover pane template to render based on this controller's\n   * current state. The returned template may be `nothing` if the hover\n   * pane should not currently be rendered.\n   */\n  getTemplate(): HTMLTemplateResult | typeof nothing;\n\n  /**\n   * Requests to manually toggle the state of the hover pane.\n   * If the hover pane is already shown, it will begin fading out and then\n   * subsequently be hidden and removed. If the hover pane is already fading\n   * out or hidden, it will fade back in and be shown.\n   */\n  toggleHoverPane(options: ToggleHoverPaneOptions): void;\n}\n\nconst clamp = (val: number, min = -Infinity, max = Infinity) =>\n  Math.max(min, Math.min(val, max));\n\nexport class HoverPaneController implements HoverPaneControllerInterface {\n  /**\n   * The hover pane element attached to this controller's host.\n   */\n  private hoverPane?: HTMLElement;\n\n  /**\n   * The properties to be passed to the hover pane element\n   */\n  private hoverPaneProps?: HoverPaneProperties;\n\n  /**\n   * The breakpoint (in pixels) below which the mobile interface should be used.\n   */\n  private mobileBreakpoint?: number = 600;\n\n  /**\n   * The number of horizontal pixels the hover pane should be offset from the\n   * pointer position.\n   */\n  private offsetX: number = -10;\n\n  /**\n   * The number of vertical pixels the hover pane should be offset from the\n   * pointer position.\n   */\n  private offsetY: number = 15;\n\n  /**\n   * The delay between the mouse idling within the host element and when the hover\n   * pane should begin fading in (in milliseconds).\n   */\n  private showDelay: number = 300;\n\n  /**\n   * The delay between when the mouse leaves the host element and when the hover\n   * pane should begin fading out (in milliseconds).\n   */\n  private hideDelay: number = 100;\n\n  /**\n   * The delay between when a touch event begins on the host element and when the\n   * hover pane should begin fading in (in milliseconds).\n   */\n  private longPressDelay: number = 600;\n\n  /**\n   * Whether long press interactions should cause the hover pane to appear (when\n   * below the mobile breakpoint).\n   */\n  private enableLongPress: boolean = false;\n\n  /**\n   * Used to control the current state of this provider's hover pane.\n   *  - `'hidden'` => The hover pane is not present at all.\n   *  - `'shown'` => The hover pane is either fading in or fully visible.\n   *  - `'fading-out'` => The hover pane is fading out and about to be removed.\n   */\n  private hoverPaneState: HoverPaneState = 'hidden';\n\n  /** The timer ID for showing the hover pane */\n  private showTimer?: number;\n\n  /** The timer ID for hiding the hover pane */\n  private hideTimer?: number;\n\n  /** The timer ID for recognizing a long press event */\n  private longPressTimer?: number;\n\n  /**\n   * Whether the touch backdrop should currently be rendered irrespective of other touch\n   * interactions being enabled.\n   */\n  private forceTouchBackdrop: boolean = false;\n\n  /** A record of the last mouse position on the host element, for positioning the hover pane */\n  private lastPointerClientPos = { x: 0, y: 0 };\n\n  constructor(\n    /** The host element to which this controller should attach listeners */\n    private readonly host: ReactiveControllerHost &\n      HoverPaneProviderInterface &\n      HTMLElement,\n    /** Options for adjusting the hover pane behavior (offsets, delays, etc.) */\n    options: HoverPaneControllerOptions = {},\n  ) {\n    this.mobileBreakpoint = options.mobileBreakpoint ?? this.mobileBreakpoint;\n    this.offsetX = options.offsetX ?? this.offsetX;\n    this.offsetY = options.offsetY ?? this.offsetY;\n    this.showDelay = options.showDelay ?? this.showDelay;\n    this.hideDelay = options.hideDelay ?? this.hideDelay;\n    this.longPressDelay = options.longPressDelay ?? this.longPressDelay;\n    this.enableLongPress = options.enableLongPress ?? this.enableLongPress;\n\n    this.host.addController(this);\n  }\n\n  hostConnected(): void {\n    this.attachListeners();\n  }\n\n  hostDisconnected(): void {\n    this.detachListeners();\n  }\n\n  hostUpdated(): void {\n    this.hoverPane = this.host.getHoverPane();\n    this.hoverPaneProps = this.host.getHoverPaneProps();\n  }\n\n  /** @inheritdoc */\n  getTemplate(): HTMLTemplateResult | typeof nothing {\n    this.hoverPaneProps = this.host.getHoverPaneProps();\n\n    return this.shouldRenderHoverPane\n      ? html` ${this.touchBackdropTemplate}\n          <tile-hover-pane\n            popover\n            .model=${this.hoverPaneProps?.model}\n            .baseNavigationUrl=${this.hoverPaneProps?.baseNavigationUrl}\n            .baseImageUrl=${this.hoverPaneProps?.baseImageUrl}\n            .loggedIn=${this.hoverPaneProps?.loggedIn}\n            .suppressBlurring=${this.hoverPaneProps?.suppressBlurring}\n            .sortParam=${this.hoverPaneProps?.sortParam}\n            .collectionTitles=${this.hoverPaneProps?.collectionTitles}\n            .mobileBreakpoint=${this.mobileBreakpoint}\n            .currentWidth=${window.innerWidth}\n          ></tile-hover-pane>`\n      : nothing;\n  }\n\n  /** @inheritdoc */\n  toggleHoverPane(options: ToggleHoverPaneOptions): void {\n    if (this.hoverPaneState === 'shown') {\n      this.fadeOutHoverPane();\n      this.forceTouchBackdrop = false;\n    } else {\n      this.lastPointerClientPos = options.coords;\n      this.forceTouchBackdrop = options.enableTouchBackdrop ?? false;\n      this.showHoverPane();\n    }\n  }\n\n  /**\n   * Produces a template for the invisible touch capture backdrop that\n   * is used to cancel the hover pane on touch devices. We want any\n   * touch interaction on the backdrop to remove the hover pane, and\n   * we don't want to bubble up mouse events that would otherwise\n   * affect the state of the hover pane (e.g., fading it back in).\n   */\n  private get touchBackdropTemplate(): HTMLTemplateResult | typeof nothing {\n    return this.showTouchBackdrop\n      ? html`<div\n          id=\"touch-backdrop\"\n          @touchstart=${this.handleBackdropInteraction}\n          @touchmove=${this.handleBackdropInteraction}\n          @touchend=${this.handleBackdropInteraction}\n          @touchcancel=${this.handleBackdropInteraction}\n          @mouseenter=${(e: MouseEvent) => e.stopPropagation()}\n          @mousemove=${(e: MouseEvent) => e.stopPropagation()}\n          @mouseleave=${(e: MouseEvent) => e.stopPropagation()}\n        ></div>`\n      : nothing;\n  }\n\n  private get showTouchBackdrop(): boolean {\n    return (\n      (this.isTouchEnabled && this.enableLongPress) || this.forceTouchBackdrop\n    );\n  }\n\n  /** Whether to use the mobile layout */\n  private get isMobileView(): boolean {\n    return !!this.mobileBreakpoint && window.innerWidth < this.mobileBreakpoint;\n  }\n\n  private get isHoverEnabled(): boolean {\n    return window.matchMedia('(hover: hover)').matches;\n  }\n\n  private get isTouchEnabled(): boolean {\n    return (\n      'ontouchstart' in window &&\n      window.matchMedia('(any-pointer: coarse)').matches\n    );\n  }\n\n  /** Whether this controller should currently render its hover pane. */\n  private get shouldRenderHoverPane(): boolean {\n    return this.hoverPaneState !== 'hidden';\n  }\n\n  /**\n   * Returns the desired top/left offsets (in pixels) for this tile's hover pane.\n   * The desired offsets balance positioning the hover pane under the primary pointer\n   * while preventing it from flowing outside the viewport. The returned offsets are\n   * relative to the viewport, intended to position the pane as a popover element.\n   *\n   * These offsets are only valid if the hover pane is already rendered with its\n   * correct width and height. If the hover pane is not present, the returned offsets\n   * will simply represent the current pointer position.\n   */\n  private get hoverPaneDesiredOffsets(): { top: number; left: number } {\n    // Try to find offsets for the hover pane that:\n    //  (a) cause it to lie entirely within the viewport, and\n    //  (b) to the extent possible, minimize the distance between the\n    //      nearest corner of the hover pane and the mouse position\n    //      (with some additional offsets applied after the fact).\n\n    let [left, top] = [\n      this.lastPointerClientPos.x,\n      this.lastPointerClientPos.y,\n    ];\n\n    // Flip the hover pane according to which quadrant of the viewport the mouse is in.\n    // (Similar to how Wikipedia's link hover panes work)\n    const flipHorizontal = this.lastPointerClientPos.x > window.innerWidth / 2;\n    const flipVertical = this.lastPointerClientPos.y > window.innerHeight / 2;\n\n    const hoverPaneRect = this.hoverPane?.getBoundingClientRect();\n    if (hoverPaneRect) {\n      // If we need to flip the hover pane, do so by subtracting its width/height from left/top\n      if (flipHorizontal) {\n        left -= hoverPaneRect.width;\n      }\n      if (flipVertical) {\n        top -= hoverPaneRect.height;\n      }\n\n      // Apply desired offsets from the mouse position\n      left += (flipHorizontal ? -1 : 1) * this.offsetX;\n      top += (flipVertical ? -1 : 1) * this.offsetY;\n\n      // On mobile view, shunt the hover pane to avoid overflowing the viewport\n      if (this.isMobileView) {\n        left = clamp(left, 20, window.innerWidth - hoverPaneRect.width - 20);\n        top = clamp(top, 20, window.innerHeight - hoverPaneRect.height - 20);\n      }\n    }\n\n    left += window.scrollX;\n    top += window.scrollY;\n\n    return { left, top };\n  }\n\n  /**\n   * Adds to the host element all the listeners necessary to make the\n   * hover pane functional.\n   */\n  private attachListeners(): void {\n    if (this.isHoverEnabled) {\n      this.host.addEventListener('mouseenter', this.handleMouseEnter);\n      this.host.addEventListener('mousemove', this.handleMouseMove);\n      this.host.addEventListener('mouseleave', this.handleMouseLeave);\n    }\n\n    if (this.isTouchEnabled && this.enableLongPress) {\n      this.host.addEventListener('touchstart', this.handleTouchStart);\n      this.host.addEventListener('touchmove', this.handleLongPressCancel);\n      this.host.addEventListener('touchend', this.handleLongPressCancel);\n      this.host.addEventListener('touchcancel', this.handleLongPressCancel);\n      this.host.addEventListener('contextmenu', this.handleContextMenu);\n    }\n  }\n\n  /**\n   * Removes all the hover pane listeners from the host element.\n   */\n  private detachListeners(): void {\n    this.host.removeEventListener('mouseenter', this.handleMouseEnter);\n    this.host.removeEventListener('mousemove', this.handleMouseMove);\n    this.host.removeEventListener('mouseleave', this.handleMouseLeave);\n    this.host.removeEventListener('touchstart', this.handleTouchStart);\n    this.host.removeEventListener('touchmove', this.handleLongPressCancel);\n    this.host.removeEventListener('touchend', this.handleLongPressCancel);\n    this.host.removeEventListener('touchcancel', this.handleLongPressCancel);\n    this.host.removeEventListener('contextmenu', this.handleContextMenu);\n  }\n\n  /**\n   * Handler for the mouseenter event on the host element.\n   */\n  // NB: Arrow function so 'this' remains bound to the controller\n  private handleMouseEnter = (e: MouseEvent): void => {\n    // Delegate to the mousemove handler, as they are currently processed identically\n    this.handleMouseMove(e);\n  };\n\n  /**\n   * Handler for the mousemove event on the host element.\n   * Aborts any pending hide/fade-out for the hover pane, and restarts the\n   * timer to show it.\n   */\n  // NB: Arrow function so 'this' remains bound to the controller\n  private handleMouseMove = (e: MouseEvent): void => {\n    // The mouse is within the tile, so abort any pending removal of the hover pane\n    clearTimeout(this.hideTimer);\n\n    // If the hover pane is currently fading out, just make it fade back in where it is\n    if (this.hoverPaneState === 'fading-out') {\n      this.hoverPaneState = 'shown';\n      this.hoverPane?.classList.add('fade-in');\n    }\n\n    // Restart the timer to show the hover pane anytime the mouse moves within the tile\n    if (this.hoverPaneState === 'hidden') {\n      this.restartShowHoverPaneTimer();\n      this.lastPointerClientPos = { x: e.clientX, y: e.clientY };\n    }\n  };\n\n  /**\n   * Handler for the mouseleave event on the host element.\n   * Hides the hover pane if present, and aborts the timer for showing it.\n   */\n  // NB: Arrow function so 'this' remains bound to the controller\n  private handleMouseLeave = (): void => {\n    // Abort any timer to show the hover pane, as the mouse has left the tile\n    clearTimeout(this.showTimer);\n\n    // Hide the hover pane if it's already been shown\n    clearTimeout(this.hideTimer);\n    if (this.hoverPaneState !== 'hidden') {\n      this.hideTimer = window.setTimeout(() => {\n        this.fadeOutHoverPane();\n      }, this.hideDelay);\n    }\n  };\n\n  /**\n   * Handler for the touchstart event on the host element.\n   * Begins the timer for recognizing a long press event.\n   */\n  // NB: Arrow function so 'this' remains bound to the controller\n  private handleTouchStart = (e: TouchEvent): void => {\n    clearTimeout(this.longPressTimer);\n\n    if (e.touches.length === 1) {\n      this.longPressTimer = window.setTimeout(() => {\n        if (this.hoverPaneState === 'hidden') {\n          this.showHoverPane();\n        }\n      }, this.longPressDelay);\n\n      this.lastPointerClientPos = {\n        x: e.touches[0].clientX,\n        y: e.touches[0].clientY,\n      };\n    }\n  };\n\n  /**\n   * Handler for events that should cancel a pending long press event\n   * (touchmove, touchend, touchcancel). Aborts the timer for recognizing\n   * a long press.\n   */\n  // NB: Arrow function so 'this' remains bound to the controller\n  private handleLongPressCancel = (): void => {\n    clearTimeout(this.longPressTimer);\n  };\n\n  /**\n   * Handler for the contextmenu event, which should be suppressed during\n   * mobile long-press events on the host element.\n   */\n  // NB: Arrow function so 'this' remains bound to the controller\n  private handleContextMenu = (e: Event): void => {\n    e.preventDefault();\n  };\n\n  /**\n   * Immediately causes the hover pane to begin fading out, if it is present.\n   */\n  // NB: Arrow function so 'this' remains bound to the controller\n  private handleBackdropInteraction = (e: Event): void => {\n    if (this.hoverPaneState !== 'hidden') {\n      this.fadeOutHoverPane();\n    }\n    e.stopPropagation();\n  };\n\n  /**\n   * Aborts and restarts the timer for showing the hover pane.\n   */\n  private restartShowHoverPaneTimer(): void {\n    clearTimeout(this.showTimer);\n    this.showTimer = window.setTimeout(() => {\n      this.showHoverPane();\n    }, this.showDelay);\n  }\n\n  /**\n   * Causes this tile's hover pane to be rendered, positioned, and made visible.\n   */\n  private async showHoverPane(): Promise<void> {\n    this.hoverPaneState = 'shown';\n    this.host.requestUpdate();\n\n    // Wait for the state update to render the hover pane\n    await this.host.updateComplete;\n\n    // Ensure the hover pane element is still in the document before showing,\n    // as it might have been removed by the previous update.\n    if (!this.hoverPane?.isConnected) return;\n\n    this.hoverPane?.showPopover?.();\n    await new Promise(resolve => {\n      // Pane sizes aren't accurate until next frame\n      requestAnimationFrame(resolve);\n    });\n\n    // Apply the correct positioning to the hover pane\n    this.repositionHoverPane();\n\n    // The hover pane is initially not visible (to avoid it shifting around\n    // while being positioned). Since it now has the correct positioning, we\n    // can make it visible and begin its fade-in animation.\n    this.hoverPane?.classList.add('visible', 'fade-in');\n  }\n\n  /**\n   * Causes this tile's hover pane to begin fading out and starts\n   * the timer for it to be removed.\n   */\n  private fadeOutHoverPane(): void {\n    this.hoverPaneState = 'fading-out';\n    this.hoverPane?.classList.remove('fade-in');\n\n    clearTimeout(this.hideTimer);\n    this.hideTimer = window.setTimeout(() => {\n      this.hoverPaneState = 'hidden';\n      this.host.requestUpdate();\n    }, 100);\n  }\n\n  /**\n   * Positions the hover pane with the correct offsets.\n   */\n  private repositionHoverPane(): void {\n    if (!this.hoverPane) return;\n\n    const { top, left } = this.hoverPaneDesiredOffsets;\n    this.hoverPane.style.top = `${top}px`;\n    this.hoverPane.style.left = `${left}px`;\n  }\n}\n"]}