@internetarchive/collection-browser 4.1.1-alpha-webdev8185.1 → 4.1.2-alpha-webdev8332.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/src/collection-browser.d.ts +18 -9
- package/dist/src/collection-browser.js +77 -18
- package/dist/src/collection-browser.js.map +1 -1
- package/dist/src/data-source/collection-browser-data-source.js +3 -2
- package/dist/src/data-source/collection-browser-data-source.js.map +1 -1
- package/dist/src/data-source/collection-browser-query-state.d.ts +3 -5
- package/dist/src/data-source/collection-browser-query-state.js.map +1 -1
- package/dist/src/models.d.ts +2 -27
- package/dist/src/models.js +0 -36
- package/dist/src/models.js.map +1 -1
- package/dist/src/restoration-state-handler.js +9 -3
- package/dist/src/restoration-state-handler.js.map +1 -1
- package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +2 -2
- package/dist/src/sort-filter-bar/sort-filter-bar.js.map +1 -1
- package/dist/src/tiles/hover/hover-pane-controller.js +2 -1
- package/dist/src/tiles/hover/hover-pane-controller.js.map +1 -1
- package/dist/src/tiles/tile-dispatcher.d.ts +6 -0
- package/dist/src/tiles/tile-dispatcher.js +11 -3
- package/dist/src/tiles/tile-dispatcher.js.map +1 -1
- package/dist/test/collection-browser.test.js +17 -15
- package/dist/test/collection-browser.test.js.map +1 -1
- package/dist/test/tiles/tile-dispatcher.test.js +14 -0
- package/dist/test/tiles/tile-dispatcher.test.js.map +1 -1
- package/index.ts +0 -5
- package/package.json +1 -1
- package/src/collection-browser.ts +94 -25
- package/src/data-source/collection-browser-data-source.ts +3 -2
- package/src/data-source/collection-browser-query-state.ts +3 -12
- package/src/models.ts +4 -53
- package/src/restoration-state-handler.ts +7 -3
- package/src/sort-filter-bar/sort-filter-bar.ts +4 -3
- package/src/tiles/hover/hover-pane-controller.ts +2 -1
- package/src/tiles/tile-dispatcher.ts +12 -3
- package/test/collection-browser.test.ts +17 -15
- package/test/tiles/tile-dispatcher.test.ts +17 -0
|
@@ -190,6 +190,7 @@ export class HoverPaneController {
|
|
|
190
190
|
if (this.hoverPaneState !== 'hidden') {
|
|
191
191
|
this.fadeOutHoverPane();
|
|
192
192
|
}
|
|
193
|
+
e.preventDefault();
|
|
193
194
|
e.stopPropagation();
|
|
194
195
|
};
|
|
195
196
|
this.mobileBreakpoint = options.mobileBreakpoint ?? this.mobileBreakpoint;
|
|
@@ -239,7 +240,7 @@ export class HoverPaneController {
|
|
|
239
240
|
}
|
|
240
241
|
/** @inheritdoc */
|
|
241
242
|
toggleHoverPane(options) {
|
|
242
|
-
if (this.hoverPaneState
|
|
243
|
+
if (this.hoverPaneState !== 'hidden') {
|
|
243
244
|
this.fadeOutHoverPane();
|
|
244
245
|
this.forceTouchBackdrop = false;
|
|
245
246
|
}
|
|
@@ -1 +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';\nimport { msg } from '@lit/localize';\n\ntype HoverPaneState = 'hidden' | 'shown' | 'fading-out';\n\n// the anchor point of the hover pane\n// can be either the mouse cursor or near the host element\n// in the case of mouse navigation, we want it to follow the cursor\n// in the case of keyboard navigation, we want it to appear near the host element\ntype HoverPanePositionAnchor = 'host' | 'cursor';\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 /** When user has keyboard navigated out of more info, we want the host to get focus */\n acquireFocus(): void;\n /** When user has keyboard navigated out of more info, we want the host to lose focus */\n releaseFocus(): void;\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 /**\n * A flag to track whether the host element is being clicked by a pointer device, so that we\n * don't trigger unnecessary keyboard focus behaviors on click. This is needed, e.g., to prevent\n * the hover pane from appearing immediately at its `host` positioning on click, which can\n * obstruct the host element itself (due to the ordering of events fired).\n */\n private clicking = false;\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`\n ${this.touchBackdropTemplate}\n <tile-hover-pane\n popover\n tabindex=\"-1\"\n aria-describedby=\"tile-hover-pane-aria-description\"\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 <div id=\"tile-hover-pane-aria-description\" class=\"sr-only\">\n ${msg('Press Up Arrow to exit item detail preview')}\n </div>\n `\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 makePaneDesiredOffsets(anchor: HoverPanePositionAnchor): {\n top: number;\n left: number;\n } {\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/host element position\n // (with some additional offsets applied after the fact).\n\n let [left, top] = [0, 0];\n switch (anchor) {\n case 'host':\n const hostRect = this.host.getBoundingClientRect();\n // slight inset from host top left corner\n left = hostRect.left + 20;\n top = hostRect.top + 30;\n break;\n case 'cursor':\n left = this.lastPointerClientPos.x;\n top = this.lastPointerClientPos.y;\n break;\n }\n\n // Flip the hover pane according to which quadrant of the viewport the coordinates are in.\n // (Similar to how Wikipedia's link hover panes work)\n const flipHorizontal = left > window.innerWidth / 2;\n const flipVertical = top > 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 target 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 // keyboard navigation listeners\n this.host.addEventListener('focus', this.handleFocus);\n this.host.addEventListener('blur', this.handleBlur);\n this.host.addEventListener('pointerdown', this.handlePointerDown);\n this.host.addEventListener('keyup', this.handleKeyUp);\n this.host.addEventListener('keydown', this.handleKeyDown);\n\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 // keyboard navigation listeners\n this.host.removeEventListener('focus', this.handleFocus);\n this.host.removeEventListener('blur', this.handleBlur);\n this.host.removeEventListener('keyup', this.handleKeyUp);\n this.host.removeEventListener('keydown', this.handleKeyDown);\n }\n\n private handleFocus = (): void => {\n if (!this.clicking && this.hoverPaneState === 'hidden') {\n this.showHoverPane({\n anchor: 'host',\n });\n }\n this.clicking = false;\n };\n\n private handleBlur = (): void => {\n if (this.hoverPaneState !== 'hidden') {\n this.fadeOutHoverPane();\n }\n };\n\n private handlePointerDown = (): void => {\n this.clicking = true;\n };\n\n private handleKeyDown = (e: KeyboardEvent): void => {\n if (\n (e.key === 'ArrowDown' || e.key === 'ArrowUp') &&\n this.hoverPaneState !== 'hidden'\n ) {\n e.preventDefault();\n }\n };\n\n private handleKeyUp = (e: KeyboardEvent): void => {\n if (this.hoverPaneState === 'hidden' || !this.hoverPane) return;\n if (e.key === 'ArrowDown') {\n this.hoverPane.tabIndex = 1;\n this.hoverPane.focus();\n }\n\n const isArrowUp = e.key === 'ArrowUp';\n const isEscape = e.key === 'Escape' || e.key === 'Esc';\n\n if (isEscape) {\n this.fadeOutHoverPane();\n }\n if (isArrowUp || isEscape) {\n this.hoverPane.tabIndex = -1;\n this.host.acquireFocus();\n }\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 this.host.releaseFocus();\n\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 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.host.acquireFocus();\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(\n options: {\n anchor: HoverPanePositionAnchor;\n } = {\n anchor: 'cursor',\n },\n ): 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(options.anchor);\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 if (this.hoverPane) {\n this.hoverPane.tabIndex = -1;\n }\n this.host.requestUpdate();\n }, 100);\n }\n\n /**\n * Positions the hover pane with the correct offsets.\n */\n private repositionHoverPane(anchor: HoverPanePositionAnchor): void {\n if (!this.hoverPane) return;\n\n const { top, left } = this.makePaneDesiredOffsets(anchor);\n\n this.hoverPane.style.top = `${top}px`;\n this.hoverPane.style.left = `${left}px`;\n }\n}\n"]}
|
|
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';\nimport { msg } from '@lit/localize';\n\ntype HoverPaneState = 'hidden' | 'shown' | 'fading-out';\n\n// the anchor point of the hover pane\n// can be either the mouse cursor or near the host element\n// in the case of mouse navigation, we want it to follow the cursor\n// in the case of keyboard navigation, we want it to appear near the host element\ntype HoverPanePositionAnchor = 'host' | 'cursor';\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 /** When user has keyboard navigated out of more info, we want the host to get focus */\n acquireFocus(): void;\n /** When user has keyboard navigated out of more info, we want the host to lose focus */\n releaseFocus(): void;\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 /**\n * A flag to track whether the host element is being clicked by a pointer device, so that we\n * don't trigger unnecessary keyboard focus behaviors on click. This is needed, e.g., to prevent\n * the hover pane from appearing immediately at its `host` positioning on click, which can\n * obstruct the host element itself (due to the ordering of events fired).\n */\n private clicking = false;\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`\n ${this.touchBackdropTemplate}\n <tile-hover-pane\n popover\n tabindex=\"-1\"\n aria-describedby=\"tile-hover-pane-aria-description\"\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 <div id=\"tile-hover-pane-aria-description\" class=\"sr-only\">\n ${msg('Press Up Arrow to exit item detail preview')}\n </div>\n `\n : nothing;\n }\n\n /** @inheritdoc */\n toggleHoverPane(options: ToggleHoverPaneOptions): void {\n if (this.hoverPaneState !== 'hidden') {\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 makePaneDesiredOffsets(anchor: HoverPanePositionAnchor): {\n top: number;\n left: number;\n } {\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/host element position\n // (with some additional offsets applied after the fact).\n\n let [left, top] = [0, 0];\n switch (anchor) {\n case 'host':\n const hostRect = this.host.getBoundingClientRect();\n // slight inset from host top left corner\n left = hostRect.left + 20;\n top = hostRect.top + 30;\n break;\n case 'cursor':\n left = this.lastPointerClientPos.x;\n top = this.lastPointerClientPos.y;\n break;\n }\n\n // Flip the hover pane according to which quadrant of the viewport the coordinates are in.\n // (Similar to how Wikipedia's link hover panes work)\n const flipHorizontal = left > window.innerWidth / 2;\n const flipVertical = top > 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 target 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 // keyboard navigation listeners\n this.host.addEventListener('focus', this.handleFocus);\n this.host.addEventListener('blur', this.handleBlur);\n this.host.addEventListener('pointerdown', this.handlePointerDown);\n this.host.addEventListener('keyup', this.handleKeyUp);\n this.host.addEventListener('keydown', this.handleKeyDown);\n\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 // keyboard navigation listeners\n this.host.removeEventListener('focus', this.handleFocus);\n this.host.removeEventListener('blur', this.handleBlur);\n this.host.removeEventListener('keyup', this.handleKeyUp);\n this.host.removeEventListener('keydown', this.handleKeyDown);\n }\n\n private handleFocus = (): void => {\n if (!this.clicking && this.hoverPaneState === 'hidden') {\n this.showHoverPane({\n anchor: 'host',\n });\n }\n this.clicking = false;\n };\n\n private handleBlur = (): void => {\n if (this.hoverPaneState !== 'hidden') {\n this.fadeOutHoverPane();\n }\n };\n\n private handlePointerDown = (): void => {\n this.clicking = true;\n };\n\n private handleKeyDown = (e: KeyboardEvent): void => {\n if (\n (e.key === 'ArrowDown' || e.key === 'ArrowUp') &&\n this.hoverPaneState !== 'hidden'\n ) {\n e.preventDefault();\n }\n };\n\n private handleKeyUp = (e: KeyboardEvent): void => {\n if (this.hoverPaneState === 'hidden' || !this.hoverPane) return;\n if (e.key === 'ArrowDown') {\n this.hoverPane.tabIndex = 1;\n this.hoverPane.focus();\n }\n\n const isArrowUp = e.key === 'ArrowUp';\n const isEscape = e.key === 'Escape' || e.key === 'Esc';\n\n if (isEscape) {\n this.fadeOutHoverPane();\n }\n if (isArrowUp || isEscape) {\n this.hoverPane.tabIndex = -1;\n this.host.acquireFocus();\n }\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 this.host.releaseFocus();\n\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 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.preventDefault();\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.host.acquireFocus();\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(\n options: {\n anchor: HoverPanePositionAnchor;\n } = {\n anchor: 'cursor',\n },\n ): 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(options.anchor);\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 if (this.hoverPane) {\n this.hoverPane.tabIndex = -1;\n }\n this.host.requestUpdate();\n }, 100);\n }\n\n /**\n * Positions the hover pane with the correct offsets.\n */\n private repositionHoverPane(anchor: HoverPanePositionAnchor): void {\n if (!this.hoverPane) return;\n\n const { top, left } = this.makePaneDesiredOffsets(anchor);\n\n this.hoverPane.style.top = `${top}px`;\n this.hoverPane.style.left = `${left}px`;\n }\n}\n"]}
|
|
@@ -46,6 +46,12 @@ export declare class TileDispatcher extends BaseTileComponent implements SharedR
|
|
|
46
46
|
*/
|
|
47
47
|
private get shouldPrepareHoverPane();
|
|
48
48
|
private get isHoverEnabled();
|
|
49
|
+
/**
|
|
50
|
+
* Whether the info button should be shown on this tile.
|
|
51
|
+
* Only shown on touch/non-hover devices where a hover pane is available,
|
|
52
|
+
* so the button always has something to toggle.
|
|
53
|
+
*/
|
|
54
|
+
private get shouldShowInfoButton();
|
|
49
55
|
/** @inheritdoc */
|
|
50
56
|
getHoverPane(): TileHoverPane | undefined;
|
|
51
57
|
/** @inheritdoc */
|
|
@@ -155,6 +155,14 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
|
|
|
155
155
|
get isHoverEnabled() {
|
|
156
156
|
return window.matchMedia('(hover: hover)').matches;
|
|
157
157
|
}
|
|
158
|
+
/**
|
|
159
|
+
* Whether the info button should be shown on this tile.
|
|
160
|
+
* Only shown on touch/non-hover devices where a hover pane is available,
|
|
161
|
+
* so the button always has something to toggle.
|
|
162
|
+
*/
|
|
163
|
+
get shouldShowInfoButton() {
|
|
164
|
+
return !this.isHoverEnabled && this.shouldPrepareHoverPane;
|
|
165
|
+
}
|
|
158
166
|
/** @inheritdoc */
|
|
159
167
|
getHoverPane() {
|
|
160
168
|
return this.hoverPane;
|
|
@@ -236,7 +244,7 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
|
|
|
236
244
|
.suppressBlurring=${this.suppressBlurring}
|
|
237
245
|
.isManageView=${this.isManageView}
|
|
238
246
|
.layoutType=${this.layoutType}
|
|
239
|
-
?showInfoButton=${
|
|
247
|
+
?showInfoButton=${this.shouldShowInfoButton}
|
|
240
248
|
@infoButtonPressed=${this.tileInfoButtonPressed}
|
|
241
249
|
>
|
|
242
250
|
</collection-tile>`;
|
|
@@ -250,7 +258,7 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
|
|
|
250
258
|
.creatorFilter=${creatorFilter}
|
|
251
259
|
.suppressBlurring=${this.suppressBlurring}
|
|
252
260
|
.isManageView=${this.isManageView}
|
|
253
|
-
?showInfoButton=${
|
|
261
|
+
?showInfoButton=${this.shouldShowInfoButton}
|
|
254
262
|
@infoButtonPressed=${this.tileInfoButtonPressed}
|
|
255
263
|
>
|
|
256
264
|
</account-tile>`;
|
|
@@ -283,7 +291,7 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
|
|
|
283
291
|
.isManageView=${this.isManageView}
|
|
284
292
|
.layoutType=${this.layoutType}
|
|
285
293
|
?showTvClips=${this.showTvClips}
|
|
286
|
-
?showInfoButton=${
|
|
294
|
+
?showInfoButton=${this.shouldShowInfoButton}
|
|
287
295
|
?useLocalTime=${this.useLocalTime}
|
|
288
296
|
@infoButtonPressed=${this.tileInfoButtonPressed}
|
|
289
297
|
>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\nimport type {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { TileDisplayMode } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './grid/search-tile';\nimport './hover/tile-hover-pane';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\nimport type { TileHoverPane } from './hover/tile-hover-pane';\nimport { BaseTileComponent } from './base-tile-component';\nimport { LayoutType } from './models';\nimport {\n HoverPaneController,\n HoverPaneControllerInterface,\n HoverPaneProperties,\n HoverPaneProviderInterface,\n} from './hover/hover-pane-controller';\nimport { srOnlyStyle } from '../styles/sr-only';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n extends BaseTileComponent\n implements\n SharedResizeObserverResizeHandlerInterface,\n HoverPaneProviderInterface\n{\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - defaultSortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n * - suppressTileBlurring = false;\n * - useLocalTime = false;\n */\n\n @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n @property({ type: Boolean }) isManageView = false;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @property({ type: Object })\n collectionTitles?: CollectionTitles;\n\n @property({ type: Boolean }) showTvClips = false;\n\n /** What type of simplified layout to use in grid mode, if any */\n @property({ type: String }) layoutType: LayoutType = 'default';\n\n /** Whether this tile should include a hover pane at all (for applicable tile modes) */\n @property({ type: Boolean }) enableHoverPane = false;\n\n @property({ type: String }) manageCheckTitle = msg(\n 'Remove this item from the list',\n );\n\n private hoverPaneController?: HoverPaneControllerInterface;\n\n @query('#container')\n private container!: HTMLDivElement;\n\n @query('tile-hover-pane')\n private hoverPane?: TileHoverPane;\n\n @query('.tile-link')\n private tileLinkElement?: HTMLAnchorElement;\n\n acquireFocus(): void {\n this.tileLinkElement?.focus();\n }\n\n releaseFocus(): void {\n this.tileLinkElement?.blur();\n }\n\n /** Maps each display mode to whether hover panes should appear in that mode */\n private static readonly HOVER_PANE_DISPLAY_MODES: Record<\n TileDisplayMode,\n boolean\n > = {\n grid: true,\n 'list-compact': true,\n 'list-detail': false,\n 'list-header': false,\n };\n\n render() {\n const isGridMode = this.tileDisplayMode === 'grid';\n const hoverPaneTemplate =\n this.hoverPaneController?.getTemplate() ?? nothing;\n return html`\n <div id=\"container\" class=${isGridMode ? 'hoverable' : ''}>\n ${this.tileDisplayMode === 'list-header'\n ? this.headerTemplate\n : this.tileTemplate}\n ${this.manageCheckTemplate} ${hoverPaneTemplate}\n </div>\n `;\n }\n\n protected firstUpdated(): void {\n if (this.shouldPrepareHoverPane) {\n this.hoverPaneController = new HoverPaneController(this, {\n mobileBreakpoint: this.mobileBreakpoint,\n enableLongPress: false,\n });\n }\n }\n\n private get headerTemplate() {\n const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\n this;\n return html`\n <tile-list-compact-header\n class=\"header\"\n .currentWidth=${currentWidth}\n .sortParam=${sortParam ?? defaultSortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n >\n </tile-list-compact-header>\n `;\n }\n\n private get tileTemplate() {\n return html`\n ${this.tileDisplayMode === 'list-detail'\n ? this.tile\n : this.linkTileTemplate}\n `;\n }\n\n private get linkTileTemplate() {\n return html`\n <a\n href=${this.linkTileHref}\n aria-label=${this.model?.title ?? 'Untitled item'}\n aria-describedby=\"link-aria-description\"\n aria-haspopup=${this.shouldPrepareHoverPane ? 'dialog' : 'false'}\n title=${this.shouldPrepareHoverPane\n ? nothing // Don't show title tooltips when we have the tile info popups\n : ifDefined(this.model?.title)}\n @click=${this.handleLinkClicked}\n @contextmenu=${this.handleLinkContextMenu}\n class=\"tile-link\"\n >\n ${this.tile}\n </a>\n <div id=\"link-aria-description\" class=\"sr-only\">\n ${msg('Press Down Arrow to preview item details')}\n </div>\n `;\n }\n\n private get linkTileHref(): string | typeof nothing {\n if (!this.model?.identifier || this.baseNavigationUrl == null)\n return nothing;\n\n // Use the server-specified href if available.\n // Otherwise, construct a details page URL from the item identifier.\n if (this.model.href) {\n return `${this.baseNavigationUrl}${this.model.href}`;\n }\n\n return this.displayValueProvider.itemPageUrl(\n this.model.identifier,\n this.model.mediatype === 'collection',\n );\n }\n\n private get manageCheckTemplate() {\n if (!this.isManageView || this.tileDisplayMode !== 'grid') return nothing;\n\n return html`\n <div class=\"manage-check\">\n <input\n type=\"checkbox\"\n title=${this.manageCheckTitle}\n ?checked=${this.model?.checked}\n @change=${this.handleLinkClicked}\n />\n </div>\n `;\n }\n\n /**\n * Whether hover pane behavior should be prepared for this tile\n * (e.g., whether mouse listeners should be attached, etc.)\n */\n private get shouldPrepareHoverPane(): boolean {\n return (\n this.enableHoverPane &&\n !!this.tileDisplayMode &&\n TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\n this.model?.mediatype !== 'search' && // don't show hover panes on search tiles\n !this.model?.captureDates // don't show hover panes on web archive tiles\n );\n }\n\n private get isHoverEnabled(): boolean {\n return window.matchMedia('(hover: hover)').matches;\n }\n\n /** @inheritdoc */\n getHoverPane(): TileHoverPane | undefined {\n return this.hoverPane;\n }\n\n /** @inheritdoc */\n getHoverPaneProps(): HoverPaneProperties {\n return this;\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n\n disconnectedCallback(): void {\n this.stopResizeObservation(this.resizeObserver);\n }\n\n private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n observer?.removeObserver({\n handler: this,\n target: this.container,\n });\n }\n\n private startResizeObservation() {\n this.stopResizeObservation(this.resizeObserver);\n this.resizeObserver?.addObserver({\n handler: this,\n target: this.container,\n });\n }\n\n updated(props: PropertyValues) {\n if (props.has('resizeObserver')) {\n const previousObserver = props.get(\n 'resizeObserver',\n ) as SharedResizeObserverInterface;\n this.stopResizeObservation(previousObserver);\n this.startResizeObservation();\n }\n }\n\n /**\n * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\n * In manage view, it also checks/unchecks the tile.\n */\n private handleLinkClicked(e: Event): void {\n if (this.isManageView) {\n e.preventDefault();\n if (this.model) this.model.checked = !this.model.checked;\n }\n\n this.dispatchEvent(\n new CustomEvent('resultSelected', { detail: this.model }),\n );\n }\n\n /**\n * Handler for when the tile link is right-clicked.\n * In manage view, it opens the item in a new tab. Otherwise, does nothing.\n */\n private handleLinkContextMenu(e: Event): void {\n if (this.isManageView && this.linkTileHref !== nothing) {\n e.preventDefault();\n window.open(this.linkTileHref, '_blank');\n }\n }\n\n private tileInfoButtonPressed(\n e: CustomEvent<{ x: number; y: number }>,\n ): void {\n this.hoverPaneController?.toggleHoverPane({\n coords: e.detail,\n enableTouchBackdrop: true,\n });\n }\n\n private get tile() {\n const {\n model,\n collectionPagePath,\n baseNavigationUrl,\n currentWidth,\n currentHeight,\n sortParam,\n creatorFilter,\n mobileBreakpoint,\n defaultSortParam,\n } = this;\n\n if (!model) return nothing;\n\n switch (this.tileDisplayMode) {\n case 'grid':\n switch (model.mediatype) {\n case 'collection':\n return html`<collection-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .suppressBlurring=${this.suppressBlurring}\n .isManageView=${this.isManageView}\n .layoutType=${this.layoutType}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </collection-tile>`;\n case 'account':\n return html`<account-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .suppressBlurring=${this.suppressBlurring}\n .isManageView=${this.isManageView}\n ?showInfoButton=${!this.isHoverEnabled}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </account-tile>`;\n case 'search':\n return html`<search-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .suppressBlurring=${this.suppressBlurring}\n .isManageView=${this.isManageView}\n ?showInfoButton=${false}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </search-tile>`;\n default:\n return html`<item-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .currentWidth=${this.currentWidth}\n .currentHeight=${this.currentHeight}\n .baseImageUrl=${this.baseImageUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .loggedIn=${this.loggedIn}\n .suppressBlurring=${this.suppressBlurring}\n .isManageView=${this.isManageView}\n .layoutType=${this.layoutType}\n ?showTvClips=${this.showTvClips}\n ?showInfoButton=${!this.isHoverEnabled}\n ?useLocalTime=${this.useLocalTime}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </item-tile>`;\n }\n case 'list-compact':\n return html`<tile-list-compact\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n .suppressBlurring=${this.suppressBlurring}\n ?useLocalTime=${this.useLocalTime}\n >\n </tile-list-compact>`;\n case 'list-detail':\n return html`<tile-list\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .collectionTitles=${this.collectionTitles}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n .suppressBlurring=${this.suppressBlurring}\n ?useLocalTime=${this.useLocalTime}\n >\n </tile-list>`;\n default:\n return nothing;\n }\n }\n\n static get styles() {\n return [\n srOnlyStyle,\n css`\n :host {\n display: block;\n height: 100%;\n }\n\n collection-tile {\n --tileBorderColor: #555555;\n --tileBackgroundColor: #666666;\n --imageBlockBackgroundColor: #666666;\n }\n\n account-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #fcf5e6;\n }\n\n item-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #f1f1f4;\n }\n\n search-tile {\n --tileBorderColor: #555555;\n --tileBackgroundColor: #666666;\n --imageBlockBackgroundColor: #666666;\n --iconFillColor: #2c2c2c;\n }\n\n #container {\n position: relative;\n height: 100%;\n border-radius: 4px;\n }\n\n #container.hoverable a:focus,\n #container.hoverable a:hover {\n box-shadow: var(\n --tileHoverBoxShadow,\n 0 0 6px 2px rgba(8, 8, 32, 0.8)\n );\n transition: box-shadow 0.1s ease;\n }\n\n a {\n display: block;\n height: 100%;\n color: unset;\n text-decoration: none;\n transition: transform 0.05s ease;\n border-radius: 4px;\n outline: none;\n }\n\n a :first-child {\n display: block;\n height: 100%;\n }\n\n .manage-check {\n position: absolute;\n right: 0;\n top: 0;\n border: 5px solid #2c2c2c;\n border-radius: 3px;\n background-color: #2c2c2c;\n z-index: 1;\n }\n\n .manage-check > input[type='checkbox'] {\n display: block;\n margin: 0;\n }\n\n #touch-backdrop {\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n z-index: 2;\n background: transparent;\n }\n\n tile-hover-pane {\n position: absolute;\n top: 0;\n left: -9999px;\n z-index: 2;\n }\n `,\n ];\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\nimport type {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { TileDisplayMode } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './grid/search-tile';\nimport './hover/tile-hover-pane';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\nimport type { TileHoverPane } from './hover/tile-hover-pane';\nimport { BaseTileComponent } from './base-tile-component';\nimport { LayoutType } from './models';\nimport {\n HoverPaneController,\n HoverPaneControllerInterface,\n HoverPaneProperties,\n HoverPaneProviderInterface,\n} from './hover/hover-pane-controller';\nimport { srOnlyStyle } from '../styles/sr-only';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n extends BaseTileComponent\n implements\n SharedResizeObserverResizeHandlerInterface,\n HoverPaneProviderInterface\n{\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - defaultSortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n * - suppressTileBlurring = false;\n * - useLocalTime = false;\n */\n\n @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n @property({ type: Boolean }) isManageView = false;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @property({ type: Object })\n collectionTitles?: CollectionTitles;\n\n @property({ type: Boolean }) showTvClips = false;\n\n /** What type of simplified layout to use in grid mode, if any */\n @property({ type: String }) layoutType: LayoutType = 'default';\n\n /** Whether this tile should include a hover pane at all (for applicable tile modes) */\n @property({ type: Boolean }) enableHoverPane = false;\n\n @property({ type: String }) manageCheckTitle = msg(\n 'Remove this item from the list',\n );\n\n private hoverPaneController?: HoverPaneControllerInterface;\n\n @query('#container')\n private container!: HTMLDivElement;\n\n @query('tile-hover-pane')\n private hoverPane?: TileHoverPane;\n\n @query('.tile-link')\n private tileLinkElement?: HTMLAnchorElement;\n\n acquireFocus(): void {\n this.tileLinkElement?.focus();\n }\n\n releaseFocus(): void {\n this.tileLinkElement?.blur();\n }\n\n /** Maps each display mode to whether hover panes should appear in that mode */\n private static readonly HOVER_PANE_DISPLAY_MODES: Record<\n TileDisplayMode,\n boolean\n > = {\n grid: true,\n 'list-compact': true,\n 'list-detail': false,\n 'list-header': false,\n };\n\n render() {\n const isGridMode = this.tileDisplayMode === 'grid';\n const hoverPaneTemplate =\n this.hoverPaneController?.getTemplate() ?? nothing;\n return html`\n <div id=\"container\" class=${isGridMode ? 'hoverable' : ''}>\n ${this.tileDisplayMode === 'list-header'\n ? this.headerTemplate\n : this.tileTemplate}\n ${this.manageCheckTemplate} ${hoverPaneTemplate}\n </div>\n `;\n }\n\n protected firstUpdated(): void {\n if (this.shouldPrepareHoverPane) {\n this.hoverPaneController = new HoverPaneController(this, {\n mobileBreakpoint: this.mobileBreakpoint,\n enableLongPress: false,\n });\n }\n }\n\n private get headerTemplate() {\n const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\n this;\n return html`\n <tile-list-compact-header\n class=\"header\"\n .currentWidth=${currentWidth}\n .sortParam=${sortParam ?? defaultSortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n >\n </tile-list-compact-header>\n `;\n }\n\n private get tileTemplate() {\n return html`\n ${this.tileDisplayMode === 'list-detail'\n ? this.tile\n : this.linkTileTemplate}\n `;\n }\n\n private get linkTileTemplate() {\n return html`\n <a\n href=${this.linkTileHref}\n aria-label=${this.model?.title ?? 'Untitled item'}\n aria-describedby=\"link-aria-description\"\n aria-haspopup=${this.shouldPrepareHoverPane ? 'dialog' : 'false'}\n title=${this.shouldPrepareHoverPane\n ? nothing // Don't show title tooltips when we have the tile info popups\n : ifDefined(this.model?.title)}\n @click=${this.handleLinkClicked}\n @contextmenu=${this.handleLinkContextMenu}\n class=\"tile-link\"\n >\n ${this.tile}\n </a>\n <div id=\"link-aria-description\" class=\"sr-only\">\n ${msg('Press Down Arrow to preview item details')}\n </div>\n `;\n }\n\n private get linkTileHref(): string | typeof nothing {\n if (!this.model?.identifier || this.baseNavigationUrl == null)\n return nothing;\n\n // Use the server-specified href if available.\n // Otherwise, construct a details page URL from the item identifier.\n if (this.model.href) {\n return `${this.baseNavigationUrl}${this.model.href}`;\n }\n\n return this.displayValueProvider.itemPageUrl(\n this.model.identifier,\n this.model.mediatype === 'collection',\n );\n }\n\n private get manageCheckTemplate() {\n if (!this.isManageView || this.tileDisplayMode !== 'grid') return nothing;\n\n return html`\n <div class=\"manage-check\">\n <input\n type=\"checkbox\"\n title=${this.manageCheckTitle}\n ?checked=${this.model?.checked}\n @change=${this.handleLinkClicked}\n />\n </div>\n `;\n }\n\n /**\n * Whether hover pane behavior should be prepared for this tile\n * (e.g., whether mouse listeners should be attached, etc.)\n */\n private get shouldPrepareHoverPane(): boolean {\n return (\n this.enableHoverPane &&\n !!this.tileDisplayMode &&\n TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\n this.model?.mediatype !== 'search' && // don't show hover panes on search tiles\n !this.model?.captureDates // don't show hover panes on web archive tiles\n );\n }\n\n private get isHoverEnabled(): boolean {\n return window.matchMedia('(hover: hover)').matches;\n }\n\n /**\n * Whether the info button should be shown on this tile.\n * Only shown on touch/non-hover devices where a hover pane is available,\n * so the button always has something to toggle.\n */\n private get shouldShowInfoButton(): boolean {\n return !this.isHoverEnabled && this.shouldPrepareHoverPane;\n }\n\n /** @inheritdoc */\n getHoverPane(): TileHoverPane | undefined {\n return this.hoverPane;\n }\n\n /** @inheritdoc */\n getHoverPaneProps(): HoverPaneProperties {\n return this;\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n\n disconnectedCallback(): void {\n this.stopResizeObservation(this.resizeObserver);\n }\n\n private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n observer?.removeObserver({\n handler: this,\n target: this.container,\n });\n }\n\n private startResizeObservation() {\n this.stopResizeObservation(this.resizeObserver);\n this.resizeObserver?.addObserver({\n handler: this,\n target: this.container,\n });\n }\n\n updated(props: PropertyValues) {\n if (props.has('resizeObserver')) {\n const previousObserver = props.get(\n 'resizeObserver',\n ) as SharedResizeObserverInterface;\n this.stopResizeObservation(previousObserver);\n this.startResizeObservation();\n }\n }\n\n /**\n * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\n * In manage view, it also checks/unchecks the tile.\n */\n private handleLinkClicked(e: Event): void {\n if (this.isManageView) {\n e.preventDefault();\n if (this.model) this.model.checked = !this.model.checked;\n }\n\n this.dispatchEvent(\n new CustomEvent('resultSelected', { detail: this.model }),\n );\n }\n\n /**\n * Handler for when the tile link is right-clicked.\n * In manage view, it opens the item in a new tab. Otherwise, does nothing.\n */\n private handleLinkContextMenu(e: Event): void {\n if (this.isManageView && this.linkTileHref !== nothing) {\n e.preventDefault();\n window.open(this.linkTileHref, '_blank');\n }\n }\n\n private tileInfoButtonPressed(\n e: CustomEvent<{ x: number; y: number }>,\n ): void {\n this.hoverPaneController?.toggleHoverPane({\n coords: e.detail,\n enableTouchBackdrop: true,\n });\n }\n\n private get tile() {\n const {\n model,\n collectionPagePath,\n baseNavigationUrl,\n currentWidth,\n currentHeight,\n sortParam,\n creatorFilter,\n mobileBreakpoint,\n defaultSortParam,\n } = this;\n\n if (!model) return nothing;\n\n switch (this.tileDisplayMode) {\n case 'grid':\n switch (model.mediatype) {\n case 'collection':\n return html`<collection-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .suppressBlurring=${this.suppressBlurring}\n .isManageView=${this.isManageView}\n .layoutType=${this.layoutType}\n ?showInfoButton=${this.shouldShowInfoButton}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </collection-tile>`;\n case 'account':\n return html`<account-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .suppressBlurring=${this.suppressBlurring}\n .isManageView=${this.isManageView}\n ?showInfoButton=${this.shouldShowInfoButton}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </account-tile>`;\n case 'search':\n return html`<search-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .suppressBlurring=${this.suppressBlurring}\n .isManageView=${this.isManageView}\n ?showInfoButton=${false}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </search-tile>`;\n default:\n return html`<item-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .currentWidth=${this.currentWidth}\n .currentHeight=${this.currentHeight}\n .baseImageUrl=${this.baseImageUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .loggedIn=${this.loggedIn}\n .suppressBlurring=${this.suppressBlurring}\n .isManageView=${this.isManageView}\n .layoutType=${this.layoutType}\n ?showTvClips=${this.showTvClips}\n ?showInfoButton=${this.shouldShowInfoButton}\n ?useLocalTime=${this.useLocalTime}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </item-tile>`;\n }\n case 'list-compact':\n return html`<tile-list-compact\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n .suppressBlurring=${this.suppressBlurring}\n ?useLocalTime=${this.useLocalTime}\n >\n </tile-list-compact>`;\n case 'list-detail':\n return html`<tile-list\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .collectionTitles=${this.collectionTitles}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n .suppressBlurring=${this.suppressBlurring}\n ?useLocalTime=${this.useLocalTime}\n >\n </tile-list>`;\n default:\n return nothing;\n }\n }\n\n static get styles() {\n return [\n srOnlyStyle,\n css`\n :host {\n display: block;\n height: 100%;\n }\n\n collection-tile {\n --tileBorderColor: #555555;\n --tileBackgroundColor: #666666;\n --imageBlockBackgroundColor: #666666;\n }\n\n account-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #fcf5e6;\n }\n\n item-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #f1f1f4;\n }\n\n search-tile {\n --tileBorderColor: #555555;\n --tileBackgroundColor: #666666;\n --imageBlockBackgroundColor: #666666;\n --iconFillColor: #2c2c2c;\n }\n\n #container {\n position: relative;\n height: 100%;\n border-radius: 4px;\n }\n\n #container.hoverable a:focus,\n #container.hoverable a:hover {\n box-shadow: var(\n --tileHoverBoxShadow,\n 0 0 6px 2px rgba(8, 8, 32, 0.8)\n );\n transition: box-shadow 0.1s ease;\n }\n\n a {\n display: block;\n height: 100%;\n color: unset;\n text-decoration: none;\n transition: transform 0.05s ease;\n border-radius: 4px;\n outline: none;\n }\n\n a :first-child {\n display: block;\n height: 100%;\n }\n\n .manage-check {\n position: absolute;\n right: 0;\n top: 0;\n border: 5px solid #2c2c2c;\n border-radius: 3px;\n background-color: #2c2c2c;\n z-index: 1;\n }\n\n .manage-check > input[type='checkbox'] {\n display: block;\n margin: 0;\n }\n\n #touch-backdrop {\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n z-index: 2;\n background: transparent;\n }\n\n tile-hover-pane {\n position: absolute;\n top: 0;\n left: -9999px;\n z-index: 2;\n }\n `,\n ];\n }\n}\n"]}
|
|
@@ -898,16 +898,17 @@ describe('Collection Browser', () => {
|
|
|
898
898
|
// Original href q param starts/ends with %22%22, but should be collapsed to %22 before render
|
|
899
899
|
expect(el.dataSource.getTileModelAt(0)?.href).to.equal('/details/foo?q=%22quoted+query%22');
|
|
900
900
|
});
|
|
901
|
-
it('sets default sort from
|
|
901
|
+
it('sets default sort from collection metadata', async () => {
|
|
902
902
|
const searchService = new MockSearchService();
|
|
903
903
|
const el = await fixture(html `<collection-browser
|
|
904
904
|
.searchService=${searchService}
|
|
905
905
|
.baseNavigationUrl=${''}
|
|
906
|
-
.withinCollection=${'test-collection'}
|
|
907
|
-
.defaultSortField=${SortField.title}
|
|
908
|
-
.defaultSortDirection=${'asc'}
|
|
909
906
|
></collection-browser>`);
|
|
907
|
+
el.withinCollection = 'default-sort';
|
|
908
|
+
await el.updateComplete;
|
|
909
|
+
await el.initialSearchComplete;
|
|
910
910
|
await el.updateComplete;
|
|
911
|
+
await aTimeout(50);
|
|
911
912
|
const sortBar = el.shadowRoot?.querySelector('sort-filter-bar');
|
|
912
913
|
expect(sortBar).to.exist;
|
|
913
914
|
expect(sortBar.defaultSortField).to.equal(SortField.title);
|
|
@@ -915,16 +916,17 @@ describe('Collection Browser', () => {
|
|
|
915
916
|
expect(sortBar.selectedSort).to.equal(SortField.default);
|
|
916
917
|
expect(sortBar.sortDirection).to.be.null;
|
|
917
918
|
});
|
|
918
|
-
it('
|
|
919
|
+
it('sets default sort from collection metadata in "-field" format', async () => {
|
|
919
920
|
const searchService = new MockSearchService();
|
|
920
921
|
const el = await fixture(html `<collection-browser
|
|
921
922
|
.searchService=${searchService}
|
|
922
923
|
.baseNavigationUrl=${''}
|
|
923
|
-
.withinCollection=${'test-collection'}
|
|
924
|
-
.defaultSortField=${SortField.dateadded}
|
|
925
|
-
.defaultSortDirection=${'desc'}
|
|
926
924
|
></collection-browser>`);
|
|
925
|
+
el.withinCollection = 'default-sort-concise';
|
|
926
|
+
await el.updateComplete;
|
|
927
|
+
await el.initialSearchComplete;
|
|
927
928
|
await el.updateComplete;
|
|
929
|
+
await aTimeout(50);
|
|
928
930
|
const sortBar = el.shadowRoot?.querySelector('sort-filter-bar');
|
|
929
931
|
expect(sortBar).to.exist;
|
|
930
932
|
expect(sortBar.defaultSortField).to.equal(SortField.dateadded);
|
|
@@ -932,12 +934,11 @@ describe('Collection Browser', () => {
|
|
|
932
934
|
expect(sortBar.selectedSort).to.equal(SortField.default);
|
|
933
935
|
expect(sortBar.sortDirection).to.be.null;
|
|
934
936
|
});
|
|
935
|
-
it('
|
|
937
|
+
it('falls back to weekly views default sorting on profiles when tab not set', async () => {
|
|
936
938
|
const el = await fixture(html `<collection-browser
|
|
937
939
|
.withinProfile=${'@foobar'}
|
|
938
|
-
.defaultSortField=${SortField.weeklyview}
|
|
939
|
-
.defaultSortDirection=${'desc'}
|
|
940
940
|
></collection-browser>`);
|
|
941
|
+
el.applyDefaultProfileSort();
|
|
941
942
|
expect(el.defaultSortParam).to.deep.equal({
|
|
942
943
|
field: 'week',
|
|
943
944
|
direction: 'desc',
|
|
@@ -962,16 +963,17 @@ describe('Collection Browser', () => {
|
|
|
962
963
|
expect(sortBar.selectedSort).to.equal(SortField.default);
|
|
963
964
|
expect(sortBar.sortDirection).to.be.null;
|
|
964
965
|
});
|
|
965
|
-
it('uses date favorited sort as default when
|
|
966
|
+
it('uses date favorited sort as default when targeting fav- collection', async () => {
|
|
966
967
|
const searchService = new MockSearchService();
|
|
967
968
|
const el = await fixture(html `<collection-browser
|
|
968
969
|
.searchService=${searchService}
|
|
969
970
|
.baseNavigationUrl=${''}
|
|
970
|
-
.withinCollection=${'fav-sort'}
|
|
971
|
-
.defaultSortField=${SortField.datefavorited}
|
|
972
|
-
.defaultSortDirection=${'desc'}
|
|
973
971
|
></collection-browser>`);
|
|
972
|
+
el.withinCollection = 'fav-sort';
|
|
974
973
|
await el.updateComplete;
|
|
974
|
+
await el.initialSearchComplete;
|
|
975
|
+
await el.updateComplete;
|
|
976
|
+
await aTimeout(50);
|
|
975
977
|
const sortBar = el.shadowRoot?.querySelector('sort-filter-bar');
|
|
976
978
|
expect(sortBar).to.exist;
|
|
977
979
|
expect(sortBar.defaultSortField).to.equal(SortField.datefavorited);
|