@internetarchive/collection-browser 4.1.3-alpha-webdev8108.0 → 4.1.3-alpha-webdev8257.1

package/dist/src/tiles/tile-dispatcher.js

@@ -2,6 +2,7 @@ var TileDispatcher_1;
 import { __decorate } from "tslib";
 import { css, html, nothing } 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 './grid/collection-tile';
@@ -41,6 +42,15 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
         /** Whether this tile should include a hover pane at all (for applicable tile modes) */
         this.enableHoverPane = false;
         this.manageCheckTitle = msg('Remove this item from the list');
+        /** Action buttons to display at the bottom of the tile (grid mode only) */
+        this.tileActions = [];
+        /**
+         * When the mouse enters the tile actions area, dispatch a synthetic mouseleave
+         * on the host to cancel the hover pane's show timer and hide any visible pane.
+         */
+        this.handleTileActionsMouseEnter = () => {
+            this.dispatchEvent(new MouseEvent('mouseleave', { bubbles: false }));
+        };
     }
     static { TileDispatcher_1 = this; }
     acquireFocus() {
@@ -58,14 +68,20 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
     }; }
     render() {
         const isGridMode = this.tileDisplayMode === 'grid';
+        const hasTileActions = isGridMode && this.showTileActions;
         const hoverPaneTemplate = this.hoverPaneController?.getTemplate() ?? nothing;
-        return html `
-      <div id="container" class=${isGridMode ? 'hoverable' : ''}>
+        const containerClasses = classMap({
+            hoverable: isGridMode,
+            'has-tile-actions': hasTileActions,
+        });
+        return html `
+      <div id="container" class=${containerClasses}>
         ${this.tileDisplayMode === 'list-header'
             ? this.headerTemplate
-            : this.tileTemplate}
-        ${this.manageCheckTemplate} ${hoverPaneTemplate}
-      </div>
+            : this.tileTemplate}
+        ${this.tileActionsTemplate} ${this.manageCheckTemplate}
+        ${hoverPaneTemplate}
+      </div>
     `;
     }
     firstUpdated() {
@@ -78,42 +94,42 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
     }
     get headerTemplate() {
         const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } = this;
-        return html `
-      <tile-list-compact-header
-        class="header"
-        .currentWidth=${currentWidth}
-        .sortParam=${sortParam ?? defaultSortParam}
-        .mobileBreakpoint=${mobileBreakpoint}
-      >
-      </tile-list-compact-header>
+        return html `
+      <tile-list-compact-header
+        class="header"
+        .currentWidth=${currentWidth}
+        .sortParam=${sortParam ?? defaultSortParam}
+        .mobileBreakpoint=${mobileBreakpoint}
+      >
+      </tile-list-compact-header>
     `;
     }
     get tileTemplate() {
-        return html `
+        return html `
       ${this.tileDisplayMode === 'list-detail'
             ? this.tile
-            : this.linkTileTemplate}
+            : this.linkTileTemplate}
     `;
     }
     get linkTileTemplate() {
-        return html `
-      <a
-        href=${this.linkTileHref}
-        aria-label=${this.model?.title ?? 'Untitled item'}
-        aria-describedby="link-aria-description"
-        aria-haspopup=${this.shouldPrepareHoverPane ? 'dialog' : 'false'}
+        return html `
+      <a
+        href=${this.linkTileHref}
+        aria-label=${this.model?.title ?? 'Untitled item'}
+        aria-describedby="link-aria-description"
+        aria-haspopup=${this.shouldPrepareHoverPane ? 'dialog' : 'false'}
         title=${this.shouldPrepareHoverPane
             ? nothing // Don't show title tooltips when we have the tile info popups
-            : ifDefined(this.model?.title)}
-        @click=${this.handleLinkClicked}
-        @contextmenu=${this.handleLinkContextMenu}
-        class="tile-link"
-      >
-        ${this.tile}
-      </a>
-      <div id="link-aria-description" class="sr-only">
-        ${msg('Press Down Arrow to preview item details')}
-      </div>
+            : ifDefined(this.model?.title)}
+        @click=${this.handleLinkClicked}
+        @contextmenu=${this.handleLinkContextMenu}
+        class="tile-link"
+      >
+        ${this.tile}
+      </a>
+      <div id="link-aria-description" class="sr-only">
+        ${msg('Press Down Arrow to preview item details')}
+      </div>
     `;
     }
     get linkTileHref() {
@@ -129,15 +145,15 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
     get manageCheckTemplate() {
         if (!this.isManageView || this.tileDisplayMode !== 'grid')
             return nothing;
-        return html `
-      <div class="manage-check">
-        <input
-          type="checkbox"
-          title=${this.manageCheckTitle}
-          ?checked=${this.model?.checked}
-          @change=${this.handleLinkClicked}
-        />
-      </div>
+        return html `
+      <div class="manage-check">
+        <input
+          type="checkbox"
+          title=${this.manageCheckTitle}
+          ?checked=${this.model?.checked}
+          @change=${this.handleLinkClicked}
+        />
+      </div>
     `;
     }
     /**
@@ -226,6 +242,43 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
             enableTouchBackdrop: true,
         });
     }
+    /** Whether tile action buttons should be rendered */
+    get showTileActions() {
+        return (this.tileActions.length > 0 &&
+            !this.isManageView &&
+            this.tileDisplayMode === 'grid');
+    }
+    get tileActionsTemplate() {
+        if (!this.showTileActions)
+            return nothing;
+        return html `
+      <div
+        class="tile-actions"
+        @mouseenter=${this.handleTileActionsMouseEnter}
+        @mousemove=${(e) => e.stopPropagation()}
+      >
+        ${this.tileActions.map(action => html `
+            <button
+              class="tile-action-btn"
+              @click=${(e) => this.handleTileActionClick(e, action)}
+            >
+              ${action.label}
+            </button>
+          `)}
+      </div>
+    `;
+    }
+    handleTileActionClick(e, action) {
+        e.stopPropagation();
+        // Pre-set the hover pane controller's clicking flag so that focus
+        // restoration after a consumer-opened modal won't trigger the hover pane.
+        this.dispatchEvent(new PointerEvent('pointerdown'));
+        this.dispatchEvent(new CustomEvent('tileActionClicked', {
+            detail: { actionId: action.id, model: this.model },
+            bubbles: true,
+            composed: true,
+        }));
+    }
     get tile() {
         const { model, collectionPagePath, baseNavigationUrl, currentWidth, currentHeight, sortParam, creatorFilter, mobileBreakpoint, defaultSortParam, } = this;
         if (!model)
@@ -234,103 +287,103 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
             case 'grid':
                 switch (model.mediatype) {
                     case 'collection':
-                        return html `<collection-tile
-              .model=${model}
-              .collectionPagePath=${collectionPagePath}
-              .baseImageUrl=${this.baseImageUrl}
-              .currentWidth=${currentWidth}
-              .currentHeight=${currentHeight}
-              .creatorFilter=${creatorFilter}
-              .suppressBlurring=${this.suppressBlurring}
-              .isManageView=${this.isManageView}
-              .layoutType=${this.layoutType}
-              ?showInfoButton=${this.shouldShowInfoButton}
-              @infoButtonPressed=${this.tileInfoButtonPressed}
-            >
+                        return html `<collection-tile
+              .model=${model}
+              .collectionPagePath=${collectionPagePath}
+              .baseImageUrl=${this.baseImageUrl}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
+              .creatorFilter=${creatorFilter}
+              .suppressBlurring=${this.suppressBlurring}
+              .isManageView=${this.isManageView}
+              .layoutType=${this.layoutType}
+              ?showInfoButton=${this.shouldShowInfoButton}
+              @infoButtonPressed=${this.tileInfoButtonPressed}
+            >
             </collection-tile>`;
                     case 'account':
-                        return html `<account-tile
-              .model=${model}
-              .collectionPagePath=${collectionPagePath}
-              .baseImageUrl=${this.baseImageUrl}
-              .currentWidth=${currentWidth}
-              .currentHeight=${currentHeight}
-              .creatorFilter=${creatorFilter}
-              .suppressBlurring=${this.suppressBlurring}
-              .isManageView=${this.isManageView}
-              ?showInfoButton=${this.shouldShowInfoButton}
-              @infoButtonPressed=${this.tileInfoButtonPressed}
-            >
+                        return html `<account-tile
+              .model=${model}
+              .collectionPagePath=${collectionPagePath}
+              .baseImageUrl=${this.baseImageUrl}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
+              .creatorFilter=${creatorFilter}
+              .suppressBlurring=${this.suppressBlurring}
+              .isManageView=${this.isManageView}
+              ?showInfoButton=${this.shouldShowInfoButton}
+              @infoButtonPressed=${this.tileInfoButtonPressed}
+            >
             </account-tile>`;
                     case 'search':
-                        return html `<search-tile
-              .model=${model}
-              .collectionPagePath=${collectionPagePath}
-              .baseImageUrl=${this.baseImageUrl}
-              .currentWidth=${currentWidth}
-              .currentHeight=${currentHeight}
-              .creatorFilter=${creatorFilter}
-              .suppressBlurring=${this.suppressBlurring}
-              .isManageView=${this.isManageView}
-              ?showInfoButton=${false}
-              @infoButtonPressed=${this.tileInfoButtonPressed}
-            >
+                        return html `<search-tile
+              .model=${model}
+              .collectionPagePath=${collectionPagePath}
+              .baseImageUrl=${this.baseImageUrl}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
+              .creatorFilter=${creatorFilter}
+              .suppressBlurring=${this.suppressBlurring}
+              .isManageView=${this.isManageView}
+              ?showInfoButton=${false}
+              @infoButtonPressed=${this.tileInfoButtonPressed}
+            >
             </search-tile>`;
                     default:
-                        return html `<item-tile
-              .model=${model}
-              .collectionPagePath=${collectionPagePath}
-              .currentWidth=${this.currentWidth}
-              .currentHeight=${this.currentHeight}
-              .baseImageUrl=${this.baseImageUrl}
-              .sortParam=${sortParam}
-              .defaultSortParam=${defaultSortParam}
-              .creatorFilter=${creatorFilter}
-              .loggedIn=${this.loggedIn}
-              .suppressBlurring=${this.suppressBlurring}
-              .isManageView=${this.isManageView}
-              .layoutType=${this.layoutType}
-              ?showTvClips=${this.showTvClips}
-              ?showInfoButton=${this.shouldShowInfoButton}
-              ?useLocalTime=${this.useLocalTime}
-              @infoButtonPressed=${this.tileInfoButtonPressed}
-            >
+                        return html `<item-tile
+              .model=${model}
+              .collectionPagePath=${collectionPagePath}
+              .currentWidth=${this.currentWidth}
+              .currentHeight=${this.currentHeight}
+              .baseImageUrl=${this.baseImageUrl}
+              .sortParam=${sortParam}
+              .defaultSortParam=${defaultSortParam}
+              .creatorFilter=${creatorFilter}
+              .loggedIn=${this.loggedIn}
+              .suppressBlurring=${this.suppressBlurring}
+              .isManageView=${this.isManageView}
+              .layoutType=${this.layoutType}
+              ?showTvClips=${this.showTvClips}
+              ?showInfoButton=${this.shouldShowInfoButton}
+              ?useLocalTime=${this.useLocalTime}
+              @infoButtonPressed=${this.tileInfoButtonPressed}
+            >
             </item-tile>`;
                 }
             case 'list-compact':
-                return html `<tile-list-compact
-          .model=${model}
-          .collectionPagePath=${collectionPagePath}
-          .currentWidth=${currentWidth}
-          .currentHeight=${currentHeight}
-          .baseNavigationUrl=${baseNavigationUrl}
-          .sortParam=${sortParam}
-          .defaultSortParam=${defaultSortParam}
-          .creatorFilter=${creatorFilter}
-          .mobileBreakpoint=${mobileBreakpoint}
-          .baseImageUrl=${this.baseImageUrl}
-          .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.suppressBlurring}
-          ?useLocalTime=${this.useLocalTime}
-        >
+                return html `<tile-list-compact
+          .model=${model}
+          .collectionPagePath=${collectionPagePath}
+          .currentWidth=${currentWidth}
+          .currentHeight=${currentHeight}
+          .baseNavigationUrl=${baseNavigationUrl}
+          .sortParam=${sortParam}
+          .defaultSortParam=${defaultSortParam}
+          .creatorFilter=${creatorFilter}
+          .mobileBreakpoint=${mobileBreakpoint}
+          .baseImageUrl=${this.baseImageUrl}
+          .loggedIn=${this.loggedIn}
+          .suppressBlurring=${this.suppressBlurring}
+          ?useLocalTime=${this.useLocalTime}
+        >
         </tile-list-compact>`;
             case 'list-detail':
-                return html `<tile-list
-          .model=${model}
-          .collectionPagePath=${collectionPagePath}
-          .collectionTitles=${this.collectionTitles}
-          .currentWidth=${currentWidth}
-          .currentHeight=${currentHeight}
-          .baseNavigationUrl=${baseNavigationUrl}
-          .sortParam=${sortParam}
-          .defaultSortParam=${defaultSortParam}
-          .creatorFilter=${creatorFilter}
-          .mobileBreakpoint=${mobileBreakpoint}
-          .baseImageUrl=${this.baseImageUrl}
-          .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.suppressBlurring}
-          ?useLocalTime=${this.useLocalTime}
-        >
+                return html `<tile-list
+          .model=${model}
+          .collectionPagePath=${collectionPagePath}
+          .collectionTitles=${this.collectionTitles}
+          .currentWidth=${currentWidth}
+          .currentHeight=${currentHeight}
+          .baseNavigationUrl=${baseNavigationUrl}
+          .sortParam=${sortParam}
+          .defaultSortParam=${defaultSortParam}
+          .creatorFilter=${creatorFilter}
+          .mobileBreakpoint=${mobileBreakpoint}
+          .baseImageUrl=${this.baseImageUrl}
+          .loggedIn=${this.loggedIn}
+          .suppressBlurring=${this.suppressBlurring}
+          ?useLocalTime=${this.useLocalTime}
+        >
         </tile-list>`;
             default:
                 return nothing;
@@ -339,96 +392,157 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
     static get styles() {
         return [
             srOnlyStyle,
-            css `
-        :host {
-          display: block;
-          height: 100%;
-        }
-
-        collection-tile {
-          --tileBorderColor: #555555;
-          --tileBackgroundColor: #666666;
-          --imageBlockBackgroundColor: #666666;
-        }
-
-        account-tile {
-          --tileBorderColor: #dddddd;
-          --imageBlockBackgroundColor: #fcf5e6;
-        }
-
-        item-tile {
-          --tileBorderColor: #dddddd;
-          --imageBlockBackgroundColor: #f1f1f4;
-        }
-
-        search-tile {
-          --tileBorderColor: #555555;
-          --tileBackgroundColor: #666666;
-          --imageBlockBackgroundColor: #666666;
-          --iconFillColor: #2c2c2c;
-        }
-
-        #container {
-          position: relative;
-          height: 100%;
-          border-radius: 4px;
-        }
-
-        #container.hoverable a:focus,
-        #container.hoverable a:hover {
-          box-shadow: var(
-            --tileHoverBoxShadow,
-            0 0 6px 2px rgba(8, 8, 32, 0.8)
-          );
-          transition: box-shadow 0.1s ease;
-        }
-
-        a {
-          display: block;
-          height: 100%;
-          color: unset;
-          text-decoration: none;
-          transition: transform 0.05s ease;
-          border-radius: 4px;
-          outline: none;
-        }
-
-        a :first-child {
-          display: block;
-          height: 100%;
-        }
-
-        .manage-check {
-          position: absolute;
-          right: 0;
-          top: 0;
-          border: 5px solid #2c2c2c;
-          border-radius: 3px;
-          background-color: #2c2c2c;
-          z-index: 1;
-        }
-
-        .manage-check > input[type='checkbox'] {
-          display: block;
-          margin: 0;
-        }
-
-        #touch-backdrop {
-          position: fixed;
-          width: 100vw;
-          height: 100vh;
-          top: 0;
-          left: 0;
-          z-index: 2;
-          background: transparent;
-        }
-
-        tile-hover-pane {
-          position: absolute;
-          top: 0;
-          left: -9999px;
-          z-index: 2;
-        }
+            css `
+        :host {
+          display: block;
+          height: 100%;
+        }
+
+        collection-tile {
+          --tileBorderColor: #555555;
+          --tileBackgroundColor: #666666;
+          --imageBlockBackgroundColor: #666666;
+        }
+
+        account-tile {
+          --tileBorderColor: #dddddd;
+          --imageBlockBackgroundColor: #fcf5e6;
+        }
+
+        item-tile {
+          --tileBorderColor: #dddddd;
+          --imageBlockBackgroundColor: #f1f1f4;
+        }
+
+        search-tile {
+          --tileBorderColor: #555555;
+          --tileBackgroundColor: #666666;
+          --imageBlockBackgroundColor: #666666;
+          --iconFillColor: #2c2c2c;
+        }
+
+        #container {
+          position: relative;
+          height: 100%;
+          border-radius: 4px;
+        }
+
+        /*
+         * When tile actions are present, the container becomes the visual "card"
+         * so that the tile content and action buttons appear as one unified element.
+         */
+        /*
+         * When tile actions are present, the container takes over the tile's
+         * border-radius and box-shadow so that the action bar appears as part
+         * of the same card. The inner tile's own shadow/radius are disabled
+         * via CSS variable overrides so there is no visual duplication.
+         */
+        #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;
+        }
+
+        /* Move hover shadow to container level when tile actions are present */
+        #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;
+        }
+
+        #container.hoverable.has-tile-actions:hover {
+          box-shadow: var(
+            --tileHoverBoxShadow,
+            0 0 6px 2px rgba(8, 8, 32, 0.8)
+          );
+          transition: box-shadow 0.1s ease;
+        }
+
+        a {
+          display: block;
+          height: 100%;
+          color: unset;
+          text-decoration: none;
+          transition: transform 0.05s ease;
+          border-radius: 4px;
+          outline: none;
+        }
+
+        a :first-child {
+          display: block;
+          height: 100%;
+        }
+
+        .manage-check {
+          position: absolute;
+          right: 0;
+          top: 0;
+          border: 5px solid #2c2c2c;
+          border-radius: 3px;
+          background-color: #2c2c2c;
+          z-index: 1;
+        }
+
+        .manage-check > input[type='checkbox'] {
+          display: block;
+          margin: 0;
+        }
+
+        #touch-backdrop {
+          position: fixed;
+          width: 100vw;
+          height: 100vh;
+          top: 0;
+          left: 0;
+          z-index: 2;
+          background: transparent;
+        }
+
+        tile-hover-pane {
+          position: absolute;
+          top: 0;
+          left: -9999px;
+          z-index: 2;
+        }
+
+        .tile-actions {
+          flex-shrink: 0;
+          display: flex;
+          border-top: 1px solid var(--tileActionSeparatorColor, #ddd);
+        }
+
+        .tile-action-btn {
+          flex: 1;
+          padding: 8px;
+          border: none;
+          border-radius: 0;
+          font-size: 1.2rem;
+          cursor: pointer;
+          color: var(--tileActionColor, #333);
+          background: var(--tileActionBg, #fff);
+          transition: background 0.15s;
+        }
+
+        .tile-action-btn + .tile-action-btn {
+          border-left: 1px solid var(--tileActionSeparatorColor, #ddd);
+        }
+
+        .tile-action-btn:hover {
+          background: var(--tileActionHoverBg, #f0f0f0);
+        }
       `,
         ];
     }
@@ -457,6 +571,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], TileDispatcher.prototype, "manageCheckTitle", void 0);
+__decorate([
+    property({ type: Array })
+], TileDispatcher.prototype, "tileActions", void 0);
 __decorate([
     query('#container')
 ], TileDispatcher.prototype, "container", void 0);