@internetarchive/collection-browser 3.3.1 → 3.3.3

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

@@ -26,6 +26,10 @@ export interface HoverPaneProviderInterface {
     getHoverPane(): HTMLElement | undefined;
     /** Returns properties that should be passed to the hover pane. */
     getHoverPaneProps(): HoverPaneProperties;
+    /** When user has keyboard navigated out of more info, we want the host to get focus */
+    acquireFocus(): void;
+    /** When user has keyboard navigated out of more info, we want the host to lose focus */
+    releaseFocus(): void;
 }
 export interface ToggleHoverPaneOptions {
     coords: {
@@ -155,7 +159,7 @@ export declare class HoverPaneController implements HoverPaneControllerInterface
      * correct width and height. If the hover pane is not present, the returned offsets
      * will simply represent the current pointer position.
      */
-    private get hoverPaneDesiredOffsets();
+    private makePaneDesiredOffsets;
     /**
      * Adds to the host element all the listeners necessary to make the
      * hover pane functional.
@@ -165,6 +169,10 @@ export declare class HoverPaneController implements HoverPaneControllerInterface
      * Removes all the hover pane listeners from the host element.
      */
     private detachListeners;
+    private handleFocus;
+    private handleBlur;
+    private handleKeyDown;
+    private handleKeyUp;
     /**
      * Handler for the mouseenter event on the host element.
      */

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

@@ -1,4 +1,5 @@
 import { html, nothing, } from 'lit';
+import { msg } from '@lit/localize';
 const clamp = (val, min = -Infinity, max = Infinity) => Math.max(min, Math.min(val, max));
 export class HoverPaneController {
     constructor(
@@ -56,6 +57,41 @@ export class HoverPaneController {
         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 };
+        this.handleFocus = () => {
+            if (this.hoverPaneState === 'hidden') {
+                this.showHoverPane({
+                    anchor: 'host',
+                });
+            }
+        };
+        this.handleBlur = () => {
+            if (this.hoverPaneState !== 'hidden') {
+                this.fadeOutHoverPane();
+            }
+        };
+        this.handleKeyDown = (e) => {
+            if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') &&
+                this.hoverPaneState !== 'hidden') {
+                e.preventDefault();
+            }
+        };
+        this.handleKeyUp = (e) => {
+            if (this.hoverPaneState === 'hidden' || !this.hoverPane)
+                return;
+            if (e.key === 'ArrowDown') {
+                this.hoverPane.tabIndex = 1;
+                this.hoverPane.focus();
+            }
+            const isArrowUp = e.key === 'ArrowUp';
+            const isEscape = e.key === 'Escape' || e.key === 'Esc';
+            if (isEscape) {
+                this.fadeOutHoverPane();
+            }
+            if (isArrowUp || isEscape) {
+                this.hoverPane.tabIndex = -1;
+                this.host.acquireFocus();
+            }
+        };
         /**
          * Handler for the mouseenter event on the host element.
          */
@@ -91,10 +127,10 @@ export class HoverPaneController {
          */
         // NB: Arrow function so 'this' remains bound to the controller
         this.handleMouseLeave = () => {
+            this.host.releaseFocus();
             // 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();
@@ -171,19 +207,26 @@ export class HoverPaneController {
         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>`
+            ? html `
+          ${this.touchBackdropTemplate}
+          <tile-hover-pane
+            popover
+            tabindex="-1"
+            aria-describedby="tile-hover-pane-aria-description"
+            .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>
+          <div id="tile-hover-pane-aria-description" class="sr-only">
+            ${msg('Press Up Arrow to exit item detail preview')}
+          </div>
+        `
             : nothing;
     }
     /** @inheritdoc */
@@ -208,15 +251,15 @@ export class HoverPaneController {
      */
     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()}
+            ? 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;
     }
@@ -248,21 +291,30 @@ export class HoverPaneController {
      * correct width and height. If the hover pane is not present, the returned offsets
      * will simply represent the current pointer position.
      */
-    get hoverPaneDesiredOffsets() {
+    makePaneDesiredOffsets(anchor) {
         // 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
+        //      nearest corner of the hover pane and the mouse/host element 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.
+        let [left, top] = [0, 0];
+        switch (anchor) {
+            case 'host':
+                const hostRect = this.host.getBoundingClientRect();
+                // slight inset from host top left corner
+                left = hostRect.left + 20;
+                top = hostRect.top + 30;
+                break;
+            case 'cursor':
+                left = this.lastPointerClientPos.x;
+                top = this.lastPointerClientPos.y;
+                break;
+        }
+        // Flip the hover pane according to which quadrant of the viewport the coordinates are 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 flipHorizontal = left > window.innerWidth / 2;
+        const flipVertical = top > 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
@@ -272,7 +324,7 @@ export class HoverPaneController {
             if (flipVertical) {
                 top -= hoverPaneRect.height;
             }
-            // Apply desired offsets from the mouse position
+            // Apply desired offsets from the target 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
@@ -290,6 +342,11 @@ export class HoverPaneController {
      * hover pane functional.
      */
     attachListeners() {
+        // keyboard navigation listeners
+        this.host.addEventListener('focus', this.handleFocus);
+        this.host.addEventListener('blur', this.handleBlur);
+        this.host.addEventListener('keyup', this.handleKeyUp);
+        this.host.addEventListener('keydown', this.handleKeyDown);
         if (this.isHoverEnabled) {
             this.host.addEventListener('mouseenter', this.handleMouseEnter);
             this.host.addEventListener('mousemove', this.handleMouseMove);
@@ -315,6 +372,11 @@ export class HoverPaneController {
         this.host.removeEventListener('touchend', this.handleLongPressCancel);
         this.host.removeEventListener('touchcancel', this.handleLongPressCancel);
         this.host.removeEventListener('contextmenu', this.handleContextMenu);
+        // keyboard navigation listeners
+        this.host.removeEventListener('focus', this.handleFocus);
+        this.host.removeEventListener('blur', this.handleBlur);
+        this.host.removeEventListener('keyup', this.handleKeyUp);
+        this.host.removeEventListener('keydown', this.handleKeyDown);
     }
     /**
      * Aborts and restarts the timer for showing the hover pane.
@@ -322,13 +384,16 @@ export class HoverPaneController {
     restartShowHoverPaneTimer() {
         clearTimeout(this.showTimer);
         this.showTimer = window.setTimeout(() => {
+            this.host.acquireFocus();
             this.showHoverPane();
         }, this.showDelay);
     }
     /**
      * Causes this tile's hover pane to be rendered, positioned, and made visible.
      */
-    async showHoverPane() {
+    async showHoverPane(options = {
+        anchor: 'cursor',
+    }) {
         var _a, _b, _c, _d;
         this.hoverPaneState = 'shown';
         this.host.requestUpdate();
@@ -344,7 +409,7 @@ export class HoverPaneController {
             requestAnimationFrame(resolve);
         });
         // Apply the correct positioning to the hover pane
-        this.repositionHoverPane();
+        this.repositionHoverPane(options.anchor);
         // 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.
@@ -361,16 +426,19 @@ export class HoverPaneController {
         clearTimeout(this.hideTimer);
         this.hideTimer = window.setTimeout(() => {
             this.hoverPaneState = 'hidden';
+            if (this.hoverPane) {
+                this.hoverPane.tabIndex = -1;
+            }
             this.host.requestUpdate();
         }, 100);
     }
     /**
      * Positions the hover pane with the correct offsets.
      */
-    repositionHoverPane() {
+    repositionHoverPane(anchor) {
         if (!this.hoverPane)
             return;
-        const { top, left } = this.hoverPaneDesiredOffsets;
+        const { top, left } = this.makePaneDesiredOffsets(anchor);
         this.hoverPane.style.top = `${top}px`;
         this.hoverPane.style.left = `${left}px`;
     }

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

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

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

@@ -1,5 +1,6 @@
 import type { SortParam } from '@internetarchive/search-service';
 import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+import '@a11y/focus-trap';
 import { type TileModel } from '../../models';
 import type { CollectionTitles } from '../../data-source/models';
 import '../list/tile-list';