@internetarchive/collection-browser 4.4.1 → 4.5.1-alpha-webdev8221.0

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

@@ -15,6 +15,7 @@ import { BaseTileComponent } from '../base-tile-component';
 import { formatCount, NumberFormat } from '../../utils/format-count';
 import type { DateFormat } from '../../utils/format-date';
 import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
+import { tileActionStyles } from '../../styles/tile-action-styles';
 
 import '../image-block';
 import '../review-block';
@@ -26,6 +27,7 @@ export class TileList extends BaseTileComponent {
   /*
    * Reactive properties inherited from BaseTileComponent:
    *  - model?: TileModel;
+   *  - tileActions: TileAction[] = [];
    *  - currentWidth?: number;
    *  - currentHeight?: number;
    *  - baseNavigationUrl?: string;
@@ -61,7 +63,9 @@ export class TileList extends BaseTileComponent {
   private get mobileTemplate() {
     return html`
       <div id="list-line-top">
-        <div id="list-line-left">${this.imageBlockTemplate}</div>
+        <div id="list-line-left">
+          ${this.imageBlockTemplate} ${this.renderTileActions('list-detail')}
+        </div>
         <div id="list-line-right">
           <div id="title-line">
             <div id="title">${this.titleTemplate}</div>
@@ -75,7 +79,9 @@ export class TileList extends BaseTileComponent {
 
   private get desktopTemplate() {
     return html`
-      <div id="list-line-left">${this.imageBlockTemplate}</div>
+      <div id="list-line-left">
+        ${this.imageBlockTemplate} ${this.renderTileActions('list-detail')}
+      </div>
       <div id="list-line-right">
         <div id="title-line">
           <div id="title">${this.titleTemplate}</div>
@@ -511,190 +517,202 @@ export class TileList extends BaseTileComponent {
   }
 
   static get styles() {
-    return css`
-      html {
-        font-size: unset;
-      }
-
-      div {
-        font-size: 14px;
-      }
-
-      div a {
-        text-decoration: none;
-      }
-
-      div a:link {
-        color: var(--ia-theme-link-color, #4b64ff);
-      }
-
-      .label {
-        font-weight: bold;
-      }
-
-      #list-line.mobile {
-        --infiniteScrollerRowGap: 20px;
-        --infiniteScrollerRowHeight: auto;
-      }
-
-      #list-line.desktop {
-        --infiniteScrollerRowGap: 30px;
-        --infiniteScrollerRowHeight: auto;
-      }
-
-      /* fields */
-      #icon-right {
-        width: 20px;
-        padding-top: 5px;
-        --iconHeight: 20px;
-        --iconWidth: 20px;
-        --iconTextAlign: right;
-        margin-top: -8px;
-        text-align: right;
-      }
-
-      #title {
-        color: #4b64ff;
-        text-decoration: none;
-        font-size: 22px;
-        font-weight: bold;
-        /* align top of text with image */
-        line-height: 25px;
-        margin-top: -4px;
-        padding-bottom: 2px;
-        flex-grow: 1;
-
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 3;
-        overflow: hidden;
-        overflow-wrap: anywhere;
-      }
-
-      .metadata {
-        line-height: 20px;
-      }
-
-      #description,
-      #creator,
-      #topics,
-      #source {
-        text-align: left;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-box-orient: vertical;
-        display: -webkit-box;
-        word-break: break-word;
-        -webkit-line-clamp: 3; /* number of lines to show */
-        line-clamp: 3;
-
-        /*
+    return [
+      tileActionStyles,
+      css`
+        html {
+          font-size: unset;
+        }
+
+        div {
+          font-size: 14px;
+        }
+
+        div a {
+          text-decoration: none;
+        }
+
+        div a:link {
+          color: var(--ia-theme-link-color, #4b64ff);
+        }
+
+        .label {
+          font-weight: bold;
+        }
+
+        #list-line.mobile {
+          --infiniteScrollerRowGap: 20px;
+          --infiniteScrollerRowHeight: auto;
+        }
+
+        #list-line.desktop {
+          --infiniteScrollerRowGap: 30px;
+          --infiniteScrollerRowHeight: auto;
+        }
+
+        /* fields */
+        #icon-right {
+          width: 20px;
+          padding-top: 5px;
+          --iconHeight: 20px;
+          --iconWidth: 20px;
+          --iconTextAlign: right;
+          margin-top: -8px;
+          text-align: right;
+        }
+
+        #title {
+          color: #4b64ff;
+          text-decoration: none;
+          font-size: 22px;
+          font-weight: bold;
+          /* align top of text with image */
+          line-height: 25px;
+          margin-top: -4px;
+          padding-bottom: 2px;
+          flex-grow: 1;
+
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+          overflow: hidden;
+          overflow-wrap: anywhere;
+        }
+
+        .metadata {
+          line-height: 20px;
+        }
+
+        #description,
+        #creator,
+        #topics,
+        #source {
+          text-align: left;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-box-orient: vertical;
+          display: -webkit-box;
+          word-break: break-word;
+          -webkit-line-clamp: 3; /* number of lines to show */
+          line-clamp: 3;
+
+          /*
          * Safari doesn't always respect the line-clamping rules above,
          * so we add this to ensure these fields still get truncated
          */
-        max-height: 60px;
-      }
-
-      #collections {
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 3;
-        overflow: hidden;
-        overflow-wrap: anywhere;
-      }
-
-      #collections > a {
-        display: inline-block;
-      }
-
-      #icon {
-        padding-top: 5px;
-      }
+          max-height: 60px;
+        }
+
+        #collections {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+          overflow: hidden;
+          overflow-wrap: anywhere;
+        }
+
+        #collections > a {
+          display: inline-block;
+        }
+
+        #icon {
+          padding-top: 5px;
+        }
+
+        #description {
+          padding-top: 10px;
+        }
+
+        /* Top level container */
+        #list-line {
+          display: flex;
+        }
+
+        #list-line.mobile {
+          flex-direction: column;
+        }
+
+        #list-line.desktop {
+          column-gap: 10px;
+        }
+
+        #list-line-top {
+          display: flex;
+          column-gap: 7px;
+        }
+
+        #list-line-bottom {
+          padding-top: 4px;
+        }
+
+        #list-line-right,
+        #list-line-top,
+        #list-line-bottom {
+          width: 100%;
+        }
 
-      #description {
-        padding-top: 10px;
-      }
-
-      /* Top level container */
-      #list-line {
-        display: flex;
-      }
-
-      #list-line.mobile {
-        flex-direction: column;
-      }
-
-      #list-line.desktop {
-        column-gap: 10px;
-      }
-
-      #list-line-top {
-        display: flex;
-        column-gap: 7px;
-      }
-
-      #list-line-bottom {
-        padding-top: 4px;
-      }
-
-      #list-line-right,
-      #list-line-top,
-      #list-line-bottom {
-        width: 100%;
-      }
-
-      /*
+        /*
        * If the container becomes very tiny, don't let the thumbnail side take
        * up too much space. Shouldn't make a difference on ordinary viewport sizes.
        */
-      #list-line-left {
-        max-width: 25%;
+        #list-line-left {
+          max-width: 25%;
+
+          display: flex;
+          flex-direction: column;
+          row-gap: 5px;
+        }
+
+        div a:hover {
+          text-decoration: underline;
+        }
+
+        /* Lines containing multiple div as row */
+        #item-line,
+        #dates-line,
+        #views-line,
+        #title-line {
+          display: flex;
+          flex-direction: row;
+          column-gap: 10px;
+        }
 
-        display: flex;
-        flex-direction: column;
-        row-gap: 5px;
-      }
-
-      div a:hover {
-        text-decoration: underline;
-      }
-
-      /* Lines containing multiple div as row */
-      #item-line,
-      #dates-line,
-      #views-line,
-      #title-line {
-        display: flex;
-        flex-direction: row;
-        column-gap: 10px;
-      }
-
-      /*
+        /*
        * With the exception of the title line, allow these to wrap if
        * the space becomes too small to accommodate them together.
        *
        * The title line is excluded because it contains the mediatype icon
        * which we don't want to wrap.
        */
-      #item-line,
-      #dates-line,
-      #views-line {
-        flex-wrap: wrap;
-      }
+        #item-line,
+        #dates-line,
+        #views-line {
+          flex-wrap: wrap;
+        }
+
+        .capture-dates {
+          margin: 0;
+          padding: 0;
+          list-style-type: none;
+        }
+
+        .capture-dates a:link {
+          text-decoration: none;
+          color: var(--ia-theme-link-color, #4b64ff);
+        }
+        .capture-dates a:hover {
+          text-decoration: underline;
+        }
 
-      .capture-dates {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-      }
-
-      .capture-dates a:link {
-        text-decoration: none;
-        color: var(--ia-theme-link-color, #4b64ff);
-      }
-      .capture-dates a:hover {
-        text-decoration: underline;
-      }
-    `;
+        /*
+       * Tile-list (extended) action row sits under the thumbnail in the left
+       * column. The image-block above already has its own bottom padding via
+       * the parent's row-gap, so we don't need extra spacing here.
+       */
+        .tile-actions.list-detail {
+          width: 100%;
+        }
+      `,
+    ];
   }
 }

package/src/tiles/models.ts

@@ -6,3 +6,16 @@
  *  - `minimal`: Show neither tile stats nor the text snippets.
  */
 export type LayoutType = 'default' | 'stats-only' | 'snippets-only' | 'minimal';
+
+/**
+ * Describes an action button to render on a tile.
+ * Styling is controlled via the CSS custom properties documented in
+ * `src/styles/tile-action-styles.ts`.
+ */
+export interface TileAction {
+  /** Unique identifier for this action, included in the `tileActionClicked` event */
+  id: string;
+
+  /** Visible 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/utils/date-filter-field.ts

@@ -0,0 +1,11 @@
+/**
+ * Determines the appropriate search filter field name based on date format.
+ * Dates in YYYY-MM format (containing a hyphen) use the `date` field;
+ * dates in YYYY format use the `year` field.
+ */
+export function dateFilterField(
+  minDate?: string,
+  maxDate?: string,
+): 'date' | 'year' {
+  return minDate?.includes('-') || maxDate?.includes('-') ? 'date' : 'year';
+}