@internetarchive/collection-browser 4.3.0 → 4.3.1-alpha-webdev8257.0

package/src/tiles/models.ts

@@ -6,3 +6,19 @@
  *  - `minimal`: Show neither tile stats nor the text snippets.
  */
 export type LayoutType = 'default' | 'stats-only' | 'snippets-only' | 'minimal';
+
+/**
+ * Describes an action button to render at the bottom of a tile.
+ * Styling is controlled via CSS custom properties on the host:
+ *  - `--tileActionColor` (default: #333)
+ *  - `--tileActionBg` (default: #fff)
+ *  - `--tileActionHoverBg` (default: #f0f0f0)
+ *  - `--tileActionSeparatorColor` (default: #ddd)
+ */
+export interface TileAction {
+  /** Unique identifier for this action */
+  id: string;
+
+  /** Label text displayed on the button */
+  label: string;
+}

package/src/tiles/tile-dispatcher.ts

@@ -1,5 +1,6 @@
 import { css, html, nothing, PropertyValues } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { msg } from '@lit/localize';
 import type {
@@ -26,6 +27,7 @@ import {
   HoverPaneProviderInterface,
 } from './hover/hover-pane-controller';
 import { srOnlyStyle } from '../styles/sr-only';
+import { tileActionStyles } from '../styles/tile-action-styles';
 
 @customElement('tile-dispatcher')
 export class TileDispatcher
@@ -37,6 +39,7 @@ export class TileDispatcher
   /*
    * Reactive properties inherited from BaseTileComponent:
    *  - model?: TileModel;
+   *  - tileActions: TileAction[] = [];
    *  - currentWidth?: number;
    *  - currentHeight?: number;
    *  - baseNavigationUrl?: string;
@@ -104,14 +107,20 @@ export class TileDispatcher
 
   render() {
     const isGridMode = this.tileDisplayMode === 'grid';
+    const hasTileActions = isGridMode && this.showGridTileActions;
     const hoverPaneTemplate =
       this.hoverPaneController?.getTemplate() ?? nothing;
+    const containerClasses = classMap({
+      hoverable: isGridMode,
+      'has-tile-actions': hasTileActions,
+    });
     return html`
-      <div id="container" class=${isGridMode ? 'hoverable' : ''}>
+      <div id="container" class=${containerClasses}>
         ${this.tileDisplayMode === 'list-header'
           ? this.headerTemplate
           : this.tileTemplate}
-        ${this.manageCheckTemplate} ${hoverPaneTemplate}
+        ${this.gridTileActionsTemplate} ${this.manageCheckTemplate}
+        ${hoverPaneTemplate}
       </div>
     `;
   }
@@ -134,6 +143,7 @@ export class TileDispatcher
         .currentWidth=${currentWidth}
         .sortParam=${sortParam ?? defaultSortParam}
         .mobileBreakpoint=${mobileBreakpoint}
+        .tileActions=${this.tileActions}
       >
       </tile-list-compact-header>
     `;
@@ -306,6 +316,52 @@ export class TileDispatcher
     });
   }
 
+  /** Whether tile action buttons should be rendered in grid mode */
+  private get showGridTileActions(): boolean {
+    return (
+      this.tileActions.length > 0 &&
+      !this.isManageView &&
+      this.tileDisplayMode === 'grid'
+    );
+  }
+
+  /**
+   * Template for the grid-mode action buttons. Rendered alongside the inner
+   * tile link inside the dispatcher's shadow root so the action buttons can
+   * suppress the hover pane on hover.
+   */
+  private get gridTileActionsTemplate() {
+    if (!this.showGridTileActions) return nothing;
+
+    return html`
+      <div
+        class="tile-actions grid-tile-actions"
+        @mouseenter=${this.handleGridActionsMouseEnter}
+        @mousemove=${(e: Event) => e.stopPropagation()}
+      >
+        ${this.tileActions.map(
+          action => html`
+            <button
+              class="tile-action-btn"
+              @click=${(e: Event) => this.handleTileActionClick(e, action)}
+            >
+              ${action.label}
+            </button>
+          `,
+        )}
+      </div>
+    `;
+  }
+
+  /**
+   * When the mouse enters the grid-mode tile actions area, dispatch a
+   * synthetic mouseleave on the host to cancel the hover pane's show timer
+   * and hide any visible pane.
+   */
+  private handleGridActionsMouseEnter = (): void => {
+    this.dispatchEvent(new MouseEvent('mouseleave', { bubbles: false }));
+  };
+
   private get tile() {
     const {
       model,
@@ -402,6 +458,7 @@ export class TileDispatcher
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
           .suppressBlurring=${this.suppressBlurring}
+          .tileActions=${this.isManageView ? [] : this.tileActions}
           ?useLocalTime=${this.useLocalTime}
         >
         </tile-list-compact>`;
@@ -420,6 +477,7 @@ export class TileDispatcher
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
           .suppressBlurring=${this.suppressBlurring}
+          .tileActions=${this.isManageView ? [] : this.tileActions}
           ?useLocalTime=${this.useLocalTime}
         >
         </tile-list>`;
@@ -431,6 +489,7 @@ export class TileDispatcher
   static get styles() {
     return [
       srOnlyStyle,
+      tileActionStyles,
       css`
         :host {
           display: block;
@@ -466,8 +525,45 @@ export class TileDispatcher
           border-radius: 4px;
         }
 
-        #container.hoverable a:focus,
-        #container.hoverable a:hover {
+        /*
+         * When tile actions are present, the container takes on the role of
+         * the tile's visual card so the tile content and action row appear
+         * as a single unified element. The inner tile's own shadow/radius
+         * are disabled via CSS variable overrides to avoid visual
+         * duplication, and the action row sits as a footer inside the same
+         * card.
+         */
+        #container.has-tile-actions {
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          box-shadow: var(--tileShadow, 1px 1px 2px 0);
+          --tileBoxShadow: none;
+          --tileCornerRadius: 0;
+        }
+
+        #container.has-tile-actions .tile-link {
+          flex: 1;
+          min-height: 0;
+          overflow: hidden;
+          border-radius: 0;
+        }
+
+        /* Normal hover shadow lives on the inner anchor for plain tiles */
+        #container.hoverable:not(.has-tile-actions) a:focus,
+        #container.hoverable:not(.has-tile-actions) a:hover {
+          box-shadow: var(
+            --tileHoverBoxShadow,
+            0 0 6px 2px rgba(8, 8, 32, 0.8)
+          );
+          transition: box-shadow 0.1s ease;
+        }
+
+        /*
+         * When the container owns the card visuals, the hover shadow needs
+         * to move up to the container so it wraps the action row too.
+         */
+        #container.hoverable.has-tile-actions:hover {
           box-shadow: var(
             --tileHoverBoxShadow,
             0 0 6px 2px rgba(8, 8, 32, 0.8)
@@ -521,6 +617,20 @@ export class TileDispatcher
           left: -9999px;
           z-index: 2;
         }
+
+        /*
+         * Grid-mode action row sits flush against the bottom of the card —
+         * the buttons' own borders form the visible bottom edge. The outer
+         * buttons get rounded bottom corners to match the container so the
+         * red border traces cleanly around the card's bottom corners.
+         */
+        .grid-tile-actions .tile-action-btn:first-child {
+          border-bottom-left-radius: 4px;
+        }
+
+        .grid-tile-actions .tile-action-btn:last-child {
+          border-bottom-right-radius: 4px;
+        }
       `,
     ];
   }

package/src/tiles/tile-display-value-provider.ts

@@ -1,134 +1,134 @@
-import { TemplateResult, html, nothing } from 'lit';
-import { msg, str } from '@lit/localize';
-import type { SortParam } from '@internetarchive/search-service';
-import type { TileModel } from '../models';
-import { formatDate } from '../utils/format-date';
-
-/**
- * A class encapsulating shared logic for converting model values into display values
- * across different types of tiles.
- */
-export class TileDisplayValueProvider {
-  private model?: TileModel;
-
-  private baseNavigationUrl?: string;
-
-  private collectionPagePath?: string;
-
-  private sortParam?: SortParam;
-
-  private creatorFilter?: string;
-
-  constructor(
-    options: {
-      model?: TileModel;
-      baseNavigationUrl?: string;
-      collectionPagePath?: string;
-      sortParam?: SortParam;
-      creatorFilter?: string;
-    } = {},
-  ) {
-    this.model = options.model;
-    this.baseNavigationUrl = options.baseNavigationUrl;
-    this.collectionPagePath = options.collectionPagePath ?? '/details/';
-    this.sortParam = options.sortParam;
-    this.creatorFilter = options.creatorFilter;
-  }
-
-  /**
-   * Examines the creator(s) for the given tile model, returning
-   * the first creator whose name matches the provided filter
-   * (or simply the first creator overall if no filter is provided).
-   */
-  get firstCreatorMatchingFilter(): string | undefined {
-    let matchingCreator;
-
-    // If we're filtering by creator initial and have multiple creators, we want
-    // to surface the first creator who matches the filter.
-    if (this.creatorFilter && this.model?.creators.length) {
-      const firstLetter = this.creatorFilter; // This is just to satisfy tsc
-      matchingCreator = this.model.creators.find(creator =>
-        // Decompose combining characters first, so that e.g., filtering on E matches É too.
-        // Then remove anything that isn't strictly alphabetic, since our filters currently
-        // only handle A-Z. The first such letter (if one exists) is what needs to match.
-        creator
-          .normalize('NFD')
-          .replace(/[^A-Z]+/gi, '')
-          .toUpperCase()
-          .startsWith(firstLetter),
-      );
-    }
-
-    return matchingCreator ?? this.model?.creator;
-  }
-
-  /**
-   * The label indicating what year an account item was created.
-   * E.g., "Archivist since 2015"
-   */
-  get accountLabel(): string {
-    return this.model?.dateAdded
-      ? msg(str`Archivist since ${this.model.dateAdded.getFullYear()}`)
-      : '';
-  }
-
-  /**
-   * The readable label for the current sort if it is a type of date sort,
-   * or the empty string otherwise.
-   */
-  get dateLabel(): string {
-    switch (this.sortParam?.field) {
-      case 'publicdate':
-        return msg('Archived');
-      case 'reviewdate':
-        return msg('Reviewed');
-      case 'addeddate':
-        return msg('Added');
-      case 'date':
-        return msg('Published');
-      default:
-        return '';
-    }
-  }
-
-  /**
-   * The readable label for the current views column, based on whether
-   * weekly or all-time views are being shown.
-   */
-  get viewsLabel(): string {
-    return this.sortParam?.field === 'week'
-      ? msg('Weekly views')
-      : msg('All-time views');
-  }
-
-  /**
-   * Produces a URL pointing at the item page for the given identifier,
-   * using the current base URL and the correct path based on whether the
-   * item is specified to be a collection (default false).
-   */
-  itemPageUrl(
-    identifier?: string,
-    isCollection = false,
-  ): string | typeof nothing {
-    if (!identifier || this.baseNavigationUrl == null) return nothing;
-    const basePath = isCollection ? this.collectionPagePath : '/details/';
-    return `${this.baseNavigationUrl}${basePath}${identifier}`;
-  }
-
-  /**
-   * Produces a template for a link to a single web capture of the given URL and date
-   */
-  webArchivesCaptureLink(url: string, date: Date): TemplateResult {
-    // Convert the date into the format used to identify wayback captures (e.g., '20150102124550')
-    const captureDateStr = date
-      .toISOString()
-      .replace(/[TZ:-]/g, '')
-      .replace(/\..*/, '');
-    const captureHref = `https://web.archive.org/web/${captureDateStr}/${encodeURIComponent(
-      url,
-    )}`;
-    const captureText = formatDate(date, 'long');
-
-    return html` <a href=${captureHref}> ${captureText} </a> `;
-  }
-}
+import { TemplateResult, html, nothing } from 'lit';
+import { msg, str } from '@lit/localize';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileModel } from '../models';
+import { formatDate } from '../utils/format-date';
+
+/**
+ * A class encapsulating shared logic for converting model values into display values
+ * across different types of tiles.
+ */
+export class TileDisplayValueProvider {
+  private model?: TileModel;
+
+  private baseNavigationUrl?: string;
+
+  private collectionPagePath?: string;
+
+  private sortParam?: SortParam;
+
+  private creatorFilter?: string;
+
+  constructor(
+    options: {
+      model?: TileModel;
+      baseNavigationUrl?: string;
+      collectionPagePath?: string;
+      sortParam?: SortParam;
+      creatorFilter?: string;
+    } = {},
+  ) {
+    this.model = options.model;
+    this.baseNavigationUrl = options.baseNavigationUrl;
+    this.collectionPagePath = options.collectionPagePath ?? '/details/';
+    this.sortParam = options.sortParam;
+    this.creatorFilter = options.creatorFilter;
+  }
+
+  /**
+   * Examines the creator(s) for the given tile model, returning
+   * the first creator whose name matches the provided filter
+   * (or simply the first creator overall if no filter is provided).
+   */
+  get firstCreatorMatchingFilter(): string | undefined {
+    let matchingCreator;
+
+    // If we're filtering by creator initial and have multiple creators, we want
+    // to surface the first creator who matches the filter.
+    if (this.creatorFilter && this.model?.creators.length) {
+      const firstLetter = this.creatorFilter; // This is just to satisfy tsc
+      matchingCreator = this.model.creators.find(creator =>
+        // Decompose combining characters first, so that e.g., filtering on E matches É too.
+        // Then remove anything that isn't strictly alphabetic, since our filters currently
+        // only handle A-Z. The first such letter (if one exists) is what needs to match.
+        creator
+          .normalize('NFD')
+          .replace(/[^A-Z]+/gi, '')
+          .toUpperCase()
+          .startsWith(firstLetter),
+      );
+    }
+
+    return matchingCreator ?? this.model?.creator;
+  }
+
+  /**
+   * The label indicating what year an account item was created.
+   * E.g., "Archivist since 2015"
+   */
+  get accountLabel(): string {
+    return this.model?.dateAdded
+      ? msg(str`Archivist since ${this.model.dateAdded.getFullYear()}`)
+      : '';
+  }
+
+  /**
+   * The readable label for the current sort if it is a type of date sort,
+   * or the empty string otherwise.
+   */
+  get dateLabel(): string {
+    switch (this.sortParam?.field) {
+      case 'publicdate':
+        return msg('Archived');
+      case 'reviewdate':
+        return msg('Reviewed');
+      case 'addeddate':
+        return msg('Added');
+      case 'date':
+        return msg('Published');
+      default:
+        return '';
+    }
+  }
+
+  /**
+   * The readable label for the current views column, based on whether
+   * weekly or all-time views are being shown.
+   */
+  get viewsLabel(): string {
+    return this.sortParam?.field === 'week'
+      ? msg('Weekly views')
+      : msg('All-time views');
+  }
+
+  /**
+   * Produces a URL pointing at the item page for the given identifier,
+   * using the current base URL and the correct path based on whether the
+   * item is specified to be a collection (default false).
+   */
+  itemPageUrl(
+    identifier?: string,
+    isCollection = false,
+  ): string | typeof nothing {
+    if (!identifier || this.baseNavigationUrl == null) return nothing;
+    const basePath = isCollection ? this.collectionPagePath : '/details/';
+    return `${this.baseNavigationUrl}${basePath}${identifier}`;
+  }
+
+  /**
+   * Produces a template for a link to a single web capture of the given URL and date
+   */
+  webArchivesCaptureLink(url: string, date: Date): TemplateResult {
+    // Convert the date into the format used to identify wayback captures (e.g., '20150102124550')
+    const captureDateStr = date
+      .toISOString()
+      .replace(/[TZ:-]/g, '')
+      .replace(/\..*/, '');
+    const captureHref = `https://web.archive.org/web/${captureDateStr}/${encodeURIComponent(
+      url,
+    )}`;
+    const captureText = formatDate(date, 'long');
+
+    return html` <a href=${captureHref}> ${captureText} </a> `;
+  }
+}