@internetarchive/collection-browser 0.4.9-alpha.1 → 0.4.9

package/src/sort-filter-bar/alpha-bar.ts

@@ -1,13 +1,27 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { LitElement, html, css, nothing, TemplateResult } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
 import type { PrefixFilterCounts } from '../models';
 
+import './alpha-bar-tooltip';
+import type { AlphaBarTooltip } from './alpha-bar-tooltip';
+
 @customElement('alpha-bar')
 export class AlphaBar extends LitElement {
   @property({ type: String }) selectedLetter: string | null = null;
 
   @property({ type: Object }) letterCounts?: PrefixFilterCounts;
 
+  @state()
+  private tooltipShown: boolean = false;
+
+  @state()
+  private hoveredLetter?: string;
+
+  @query('alpha-bar-tooltip')
+  private tooltip?: AlphaBarTooltip;
+
+  private readonly alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+
   private get selectedUppercaseLetter(): string | undefined {
     return this.selectedLetter?.toUpperCase();
   }
@@ -22,11 +36,14 @@ export class AlphaBar extends LitElement {
                 <li
                   class=${letter === this.selectedUppercaseLetter
                     ? 'selected'
-                    : ''}
+                    : nothing}
+                  @mousemove=${this.handleMouseMove}
+                  @mouseleave=${this.handleMouseLeave}
                 >
                   ${this.letterCounts?.[letter]
                     ? this.letterLinkTemplate(letter)
                     : html`<span>${letter}</span>`}
+                  ${this.tooltipTemplate(letter)}
                 </li>
               `
           )}
@@ -49,6 +66,17 @@ export class AlphaBar extends LitElement {
     `;
   }
 
+  private tooltipTemplate(letter: string): TemplateResult | typeof nothing {
+    if (this.hoveredLetter !== letter) return nothing;
+
+    return this.tooltipShown
+      ? html`<alpha-bar-tooltip
+          data-letter=${letter}
+          .numResults=${this.letterCounts?.[this.hoveredLetter] ?? 0}
+        ></alpha-bar-tooltip>`
+      : nothing;
+  }
+
   private letterClicked(letter: string) {
     if (letter === this.selectedUppercaseLetter) {
       this.selectedLetter = null;
@@ -62,7 +90,77 @@ export class AlphaBar extends LitElement {
     );
   }
 
-  private readonly alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+  private async handleMouseMove(e: MouseEvent) {
+    const target = e.target as HTMLLIElement;
+    if (target && !this.tooltipShown) {
+      const targetLetter = target.textContent?.trim() ?? undefined;
+      this.tooltipShown = true;
+      this.hoveredLetter = targetLetter;
+
+      await this.updateComplete;
+      await new Promise(resolve => {
+        setTimeout(resolve, 0);
+      });
+
+      if (this.tooltip && this.tooltip.dataset.letter === targetLetter) {
+        this.positionTooltip(target);
+      }
+    }
+  }
+
+  private handleMouseLeave() {
+    this.tooltipShown = false;
+    this.hoveredLetter = undefined;
+  }
+
+  private positionTooltip(targetElmt: HTMLElement) {
+    if (!this.tooltip) return;
+
+    // Basic positioning is just to center the whole tooltip on the letter box.
+    const tooltipWidth = this.tooltip.clientWidth;
+    const letterWidth = targetElmt.clientWidth;
+    let left = letterWidth / 2 - tooltipWidth / 2;
+
+    // But we also need to ensure the tooltip doesn't flow outside the viewport.
+    // First, calculate the full width of the document body, including margins
+    // (but not including any scrollbar).
+    const bodyStyle = getComputedStyle(document.body);
+    const bodyMarginLeft = parseFloat(
+      bodyStyle.getPropertyValue('margin-left')
+    );
+    const bodyMarginRight = parseFloat(
+      bodyStyle.getPropertyValue('margin-right')
+    );
+    const bodyWidthWithMargin =
+      document.body.clientWidth + bodyMarginLeft + bodyMarginRight;
+
+    // Calculate the positions of the tooltip's left/right edges, and determine
+    // how much they overflow the viewport by (if at all).
+    const targetRect = targetElmt.getBoundingClientRect();
+    const tooltipLeft = targetRect.left + left;
+    const tooltipRight = tooltipLeft + tooltipWidth;
+    const offset = 1; // How many pixels the tooltip must be offset from the left/right edges
+    let overflowAmt;
+    if (tooltipLeft < offset) {
+      // Tooltip overflows left edge of viewport
+      overflowAmt = tooltipLeft - offset;
+    } else if (tooltipRight > bodyWidthWithMargin - offset) {
+      // Tooltip overflows right edge of viewport
+      overflowAmt = tooltipRight - bodyWidthWithMargin + offset;
+    }
+
+    // Apply any needed adjustment to the tooltip and its arrow to keep it in the viewport
+    if (overflowAmt) {
+      left -= overflowAmt;
+      this.tooltip.style.setProperty(
+        '--tooltipArrowOffset',
+        `${overflowAmt}px`
+      );
+    }
+
+    this.tooltip.style.left = `${left}px`;
+    this.tooltip.classList.add('fade-in');
+  }
 
   static styles = css`
     h1 {
@@ -84,30 +182,56 @@ export class AlphaBar extends LitElement {
     }
 
     ul li {
+      position: relative;
       flex: 1;
       text-align: center;
       max-width: 2.5rem;
+      border-radius: 4px;
+    }
+
+    li:hover:not(.selected) a {
+      background-color: #c0c0c0;
+    }
+
+    a,
+    span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      aspect-ratio: 1 / 1;
     }
 
     a {
       color: #333;
       text-decoration: none;
-      padding: 0.5rem 0;
-      display: block;
+      border-radius: 4px;
     }
 
     span {
       color: #aaa;
-      padding: 0.5rem 0;
-      display: block;
+      cursor: default;
     }
 
     .selected {
-      background-color: darkgray;
+      background-color: #2c2c2c;
     }
 
     .selected a {
       color: white;
     }
+
+    alpha-bar-tooltip {
+      position: absolute;
+      top: 100%;
+      left: -9999px;
+      margin-top: 3px;
+
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    alpha-bar-tooltip.fade-in {
+      opacity: 1;
+    }
   `;
 }

package/src/tiles/grid/account-tile.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement, TemplateResult } from 'lit';
+import { css, html, LitElement, nothing, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { TileModel } from '../../models';
 
@@ -12,9 +12,12 @@ export class AccountTile extends LitElement {
 
   @property({ type: String }) baseImageUrl?: string;
 
+  @property({ type: Boolean }) showInfoButton = false;
+
   render() {
     return html`
       <div class="container">
+        ${this.infoButtonTemplate}
         <div class="tile-details">
           <div class="item-info">
             ${this.getAvatarTemplate} ${this.getTitleTemplate}
@@ -59,6 +62,25 @@ export class AccountTile extends LitElement {
     </tile-stats>`;
   }
 
+  private get infoButtonTemplate(): TemplateResult | typeof nothing {
+    // &#9432; is an information icon
+    return this.showInfoButton
+      ? html`<button class="info-button" @click=${this.infoButtonPressed}>
+          &#9432;
+          <span class="sr-only">More info</span>
+        </button>`
+      : nothing;
+  }
+
+  private infoButtonPressed(e: PointerEvent) {
+    e.preventDefault();
+    const event = new CustomEvent<{ x: number; y: number }>(
+      'infoButtonPressed',
+      { detail: { x: e.clientX, y: e.clientY } }
+    );
+    this.dispatchEvent(event);
+  }
+
   /**
    * CSS
    */

package/src/tiles/grid/collection-tile.ts

@@ -1,4 +1,11 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
 import type { TileModel } from '../../models';
@@ -12,9 +19,12 @@ export class CollectionTile extends LitElement {
 
   @property({ type: String }) baseImageUrl?: string;
 
+  @property({ type: Boolean }) showInfoButton = false;
+
   render() {
     return html`
       <div class="container">
+        ${this.infoButtonTemplate}
         <div class="tile-details">
           <div class="item-info">
             ${this.getImageBlockTemplate} ${this.getTitleTemplate}
@@ -56,7 +66,7 @@ export class CollectionTile extends LitElement {
   }
 
   private get getItemsTemplate() {
-    const collectionItems = this.model?.itemCount.toLocaleString();
+    const collectionItems = this.model?.itemCount?.toLocaleString();
 
     return html`<span id="item-count"
       >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span
@@ -71,6 +81,25 @@ export class CollectionTile extends LitElement {
       : ``;
   }
 
+  private get infoButtonTemplate(): TemplateResult | typeof nothing {
+    // &#9432; is an information icon
+    return this.showInfoButton
+      ? html`<button class="info-button" @click=${this.infoButtonPressed}>
+          &#9432;
+          <span class="sr-only">More info</span>
+        </button>`
+      : nothing;
+  }
+
+  private infoButtonPressed(e: PointerEvent) {
+    e.preventDefault();
+    const event = new CustomEvent<{ x: number; y: number }>(
+      'infoButtonPressed',
+      { detail: { x: e.clientX, y: e.clientY } }
+    );
+    this.dispatchEvent(event);
+  }
+
   static get styles(): CSSResultGroup {
     const tileBorderColor = css`var(--tileBorderColor, #555555)`;
     const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;

package/src/tiles/grid/item-tile.ts

@@ -31,11 +31,14 @@ export class ItemTile extends LitElement {
 
   @property({ type: Object }) sortParam?: SortParam;
 
+  @property({ type: Boolean }) showInfoButton = false;
+
   render() {
     const itemTitle = this.model?.title;
 
     return html`
       <div class="container">
+        ${this.infoButtonTemplate}
         <div class="tile-details">
           <div class="item-info">
             ${this.imageBlockTemplate}
@@ -96,8 +99,6 @@ export class ItemTile extends LitElement {
 
   private get sortedDateInfoTemplate() {
     let sortedValue;
-
-    // console.log('model: ', this.model)
     switch (this.sortParam?.field) {
       case 'date':
         sortedValue = { field: 'published', value: this.model?.datePublished };
@@ -127,6 +128,16 @@ export class ItemTile extends LitElement {
     `;
   }
 
+  private get infoButtonTemplate(): TemplateResult | typeof nothing {
+    // &#9432; is an information icon
+    return this.showInfoButton
+      ? html`<button class="info-button" @click=${this.infoButtonPressed}>
+          &#9432;
+          <span class="sr-only">More info</span>
+        </button>`
+      : nothing;
+  }
+
   private get textSnippetsTemplate(): TemplateResult | typeof nothing {
     if (!this.hasSnippets) return nothing;
 
@@ -158,6 +169,15 @@ export class ItemTile extends LitElement {
     return !!this.model?.snippets?.length;
   }
 
+  private infoButtonPressed(e: PointerEvent): void {
+    e.preventDefault();
+    const event = new CustomEvent<{ x: number; y: number }>(
+      'infoButtonPressed',
+      { detail: { x: e.clientX, y: e.clientY } }
+    );
+    this.dispatchEvent(event);
+  }
+
   /**
    * CSS
    */

package/src/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -51,7 +51,7 @@ export const baseTileStyles = css`
   .archivist-since {
     display: flex;
     justify-content: left;
-    align-items: flex-end; /* Important to start text from bottom */
+    align-items: flex-start;
     padding: 0 5px;
   }
 
@@ -97,7 +97,43 @@ export const baseTileStyles = css`
     text-decoration: underline;
   }
 
+  .info-button {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(220, 220, 220, 0.5);
+    color: white;
+    font-size: 2rem;
+    font-weight: bold;
+    line-height: 1;
+    text-shadow: black 1px 1px 3px;
+    overflow: visible;
+    aspect-ratio: 1 / 1;
+    z-index: 1;
+  }
+
   .hidden {
     display: none;
   }
+
+  .sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: -1px !important;
+    padding: 0 !important;
+    border: 0 !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+  }
 `;

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

@@ -38,6 +38,11 @@ export interface HoverPaneProviderInterface {
   getHoverPaneProps(): HoverPaneProperties;
 }
 
+export interface ToggleHoverPaneOptions {
+  coords: { x: number; y: number };
+  enableTouchBackdrop?: boolean;
+}
+
 /**
  * An interface for interacting with hover pane controllers (e.g.,
  * to retrieve their current hover pane template).
@@ -49,6 +54,14 @@ export interface HoverPaneControllerInterface extends ReactiveController {
    * pane should not currently be rendered.
    */
   getTemplate(): HTMLTemplateResult | typeof nothing;
+
+  /**
+   * Requests to manually toggle the state of the hover pane.
+   * If the hover pane is already shown, it will begin fading out and then
+   * subsequently be hidden and removed. If the hover pane is already fading
+   * out or hidden, it will fade back in and be shown.
+   */
+  toggleHoverPane(options: ToggleHoverPaneOptions): void;
 }
 
 const clamp = (val: number, min = -Infinity, max = Infinity) =>
@@ -123,6 +136,12 @@ export class HoverPaneController implements HoverPaneControllerInterface {
   /** The timer ID for recognizing a long press event */
   private longPressTimer?: number;
 
+  /**
+   * Whether the touch backdrop should currently be rendered irrespective of other touch
+   * interactions being enabled.
+   */
+  private forceTouchBackdrop: boolean = false;
+
   /** A record of the last mouse position on the host element, for positioning the hover pane */
   private lastPointerClientPos = { x: 0, y: 0 };
 
@@ -173,6 +192,18 @@ export class HoverPaneController implements HoverPaneControllerInterface {
       : nothing;
   }
 
+  /** @inheritdoc */
+  toggleHoverPane(options: ToggleHoverPaneOptions): void {
+    if (this.hoverPaneState === 'shown') {
+      this.fadeOutHoverPane();
+      this.forceTouchBackdrop = false;
+    } else {
+      this.lastPointerClientPos = options.coords;
+      this.forceTouchBackdrop = options.enableTouchBackdrop ?? false;
+      this.showHoverPane();
+    }
+  }
+
   /**
    * Produces a template for the invisible touch capture backdrop that
    * is used to cancel the hover pane on touch devices. We want any
@@ -181,7 +212,7 @@ export class HoverPaneController implements HoverPaneControllerInterface {
    * affect the state of the hover pane (e.g., fading it back in).
    */
   private get touchBackdropTemplate(): HTMLTemplateResult | typeof nothing {
-    return this.isTouchEnabled && this.enableLongPress
+    return this.showTouchBackdrop
       ? html`<div
           id="touch-backdrop"
           @touchstart=${this.handleBackdropInteraction}
@@ -195,6 +226,12 @@ export class HoverPaneController implements HoverPaneControllerInterface {
       : nothing;
   }
 
+  private get showTouchBackdrop(): boolean {
+    return (
+      (this.isTouchEnabled && this.enableLongPress) || this.forceTouchBackdrop
+    );
+  }
+
   /** Whether to use the mobile layout */
   private get isMobileView(): boolean {
     return !!this.mobileBreakpoint && window.innerWidth < this.mobileBreakpoint;

package/src/tiles/list/tile-list.ts

@@ -140,7 +140,14 @@ export class TileList extends LitElement {
     if (!this.model?.title) {
       return nothing;
     }
-    return html` ${this.detailsLink(this.model.identifier, this.model.title)} `;
+
+    // If the model has a server-specified href, use it
+    // Otherwise construct a details link using the identifier
+    return this.model?.href
+      ? html`<a href="${this.baseNavigationUrl}${this.model.href}"
+          >${this.model.title ?? this.model.identifier}</a
+        >`
+      : this.detailsLink(this.model.identifier, this.model.title);
   }
 
   private get itemLineTemplate() {

package/src/tiles/tile-dispatcher.ts

@@ -122,7 +122,7 @@ export class TileDispatcher
   private get linkTileTemplate() {
     return html`
       <a
-        href="${this.baseNavigationUrl}/details/${this.model?.identifier}"
+        href="${this.linkTileHref}"
         title=${this.shouldPrepareHoverPane
           ? nothing // Don't show title tooltips when we have the tile info popups
           : ifDefined(this.model?.title)}
@@ -136,6 +136,14 @@ export class TileDispatcher
     `;
   }
 
+  private get linkTileHref() {
+    // Use the server-specified href if available.
+    // Otherwise, construct a details page URL from the item identifier.
+    return this.model?.href
+      ? `${this.baseNavigationUrl}${this.model?.href}`
+      : `${this.baseNavigationUrl}/details/${this.model?.identifier}`;
+  }
+
   /**
    * Whether hover pane behavior should be prepared for this tile
    * (e.g., whether mouse listeners should be attached, etc.)
@@ -148,6 +156,10 @@ export class TileDispatcher
     );
   }
 
+  private get isHoverEnabled(): boolean {
+    return window.matchMedia('(hover: hover)').matches;
+  }
+
   /** @inheritdoc */
   getHoverPane(): TileHoverPane | undefined {
     return this.hoverPane;
@@ -192,6 +204,15 @@ export class TileDispatcher
     }
   }
 
+  private tileInfoButtonPressed(
+    e: CustomEvent<{ x: number; y: number }>
+  ): void {
+    this.hoverPaneController?.toggleHoverPane({
+      coords: e.detail,
+      enableTouchBackdrop: true,
+    });
+  }
+
   private get tile() {
     const {
       model,
@@ -213,6 +234,8 @@ export class TileDispatcher
               .baseImageUrl=${this.baseImageUrl}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
+              ?showInfoButton=${!this.isHoverEnabled}
+              @infoButtonPressed=${this.tileInfoButtonPressed}
             >
             </collection-tile>`;
           case 'account':
@@ -221,6 +244,8 @@ export class TileDispatcher
               .baseImageUrl=${this.baseImageUrl}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
+              ?showInfoButton=${!this.isHoverEnabled}
+              @infoButtonPressed=${this.tileInfoButtonPressed}
             >
             </account-tile>`;
           default:
@@ -232,6 +257,8 @@ export class TileDispatcher
               .baseImageUrl=${this.baseImageUrl}
               .sortParam=${sortParam}
               .loggedIn=${this.loggedIn}
+              ?showInfoButton=${!this.isHoverEnabled}
+              @infoButtonPressed=${this.tileInfoButtonPressed}
             >
             </item-tile>`;
         }
@@ -318,7 +345,7 @@ export class TileDispatcher
         height: 100vh;
         top: 0;
         left: 0;
-        z-index: 1;
+        z-index: 2;
         background: transparent;
       }
 

package/test/sort-filter-bar/alpha-bar-tooltip.test.ts

@@ -0,0 +1,17 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { AlphaBarTooltip } from '../../src/sort-filter-bar/alpha-bar-tooltip';
+
+import '../../src/sort-filter-bar/alpha-bar-tooltip';
+
+describe('Alphabet Filter Bar Tooltips', () => {
+  it('renders component', async () => {
+    const el = await fixture<AlphaBarTooltip>(
+      html`<alpha-bar-tooltip .numResults=${42}></alpha-bar-tooltip>`
+    );
+
+    // Should render the number of results
+    const tooltipText = el.shadowRoot?.querySelector('#tooltip-text');
+    expect(tooltipText?.textContent?.trim()).to.equal('42 results');
+  });
+});

package/test/sort-filter-bar/alpha-bar.test.ts

@@ -1,8 +1,9 @@
-import { expect, fixture } from '@open-wc/testing';
+import { aTimeout, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import type { AlphaBar } from '../../src/sort-filter-bar/alpha-bar';
 
 import '../../src/sort-filter-bar/alpha-bar';
+import type { AlphaBarTooltip } from '../../src/sort-filter-bar/alpha-bar-tooltip';
 
 describe('Alphabetical Filter Bar', () => {
   it('renders component', async () => {
@@ -49,4 +50,48 @@ describe('Alphabetical Filter Bar', () => {
     expect(selectedLetter).to.exist;
     expect(selectedLetter?.textContent?.trim()).to.equal('B');
   });
+
+  it('renders a tooltip when hovered and removes it when un-hovered', async () => {
+    const el = await fixture<AlphaBar>(html`<alpha-bar></alpha-bar>`);
+    const firstLetter = el.shadowRoot?.querySelector('li') as HTMLLIElement;
+    expect(firstLetter).to.exist;
+
+    firstLetter.dispatchEvent(new MouseEvent('mousemove'));
+    await el.updateComplete;
+
+    const tooltip = el.shadowRoot?.querySelector(
+      'alpha-bar-tooltip'
+    ) as AlphaBarTooltip;
+    expect(tooltip).to.exist;
+
+    // Should be positioned after next tick
+    await aTimeout(0);
+    expect(tooltip.style.left).to.exist;
+
+    firstLetter.dispatchEvent(new MouseEvent('mouseleave'));
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('alpha-bar-tooltip')).not.to.exist;
+  });
+
+  it('positions tooltip correctly when it would overflow viewport', async () => {
+    const el = await fixture<AlphaBar>(html`<alpha-bar></alpha-bar>`);
+    const letters = el.shadowRoot?.querySelectorAll('li');
+    const lastLetter = letters?.item(letters.length - 1) as HTMLLIElement;
+    expect(lastLetter).to.exist;
+
+    lastLetter.dispatchEvent(new MouseEvent('mousemove'));
+    await el.updateComplete;
+
+    const tooltip = el.shadowRoot?.querySelector(
+      'alpha-bar-tooltip'
+    ) as AlphaBarTooltip;
+    expect(tooltip).to.exist;
+
+    // Should be positioned after next tick, but not off-screen
+    await aTimeout(0);
+    expect(tooltip.getBoundingClientRect().right).to.be.lessThan(
+      window.innerWidth
+    );
+  });
 });