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

package/src/collection-browser.ts

@@ -78,7 +78,6 @@ import { sha1 } from './utils/sha1';
 import type { PlaceholderType } from './empty-placeholder';
 import type { ManageBar } from './manage/manage-bar';
 import type { SmartFacetBar } from './collection-facets/smart-facets/smart-facet-bar';
-import type { LayoutType, TileAction } from './tiles/models';
 
 import '@internetarchive/elements/ia-combo-box/ia-combo-box';
 import './empty-placeholder';
@@ -298,15 +297,6 @@ export class CollectionBrowser
    */
   @property({ type: Boolean }) isManageView = false;
 
-  /** Action buttons to display on each tile */
-  @property({ type: Array }) tileActions: TileAction[] = [];
-
-  /**
-   * The simplified layout to apply to grid-mode tiles, if any. See
-   * `LayoutType` for available options. Has no effect on list display modes.
-   */
-  @property({ type: String }) tileLayoutType: LayoutType = 'default';
-
   @property({ type: String }) manageViewLabel = 'Select items to remove';
 
   /** Whether to replace the default sort options with a slot for customization (default: false) */
@@ -876,6 +866,7 @@ export class CollectionBrowser
       class=${this.infiniteScrollerClasses}
       itemCount=${this.placeholderType ? 0 : nothing}
       ariaLandmarkLabel="Search results"
+      .estimatedCellHeight=${this.estimatedTileHeight}
       .cellProvider=${this}
       .placeholderCellTemplate=${this.placeholderCellTemplate}
       @scrollThresholdReached=${this.scrollThresholdReached}
@@ -897,6 +888,25 @@ export class CollectionBrowser
     });
   }
 
+  /**
+   * Best-effort hint of how tall a single rendered tile is, by display mode.
+   * The scroller uses this to better estimate the size its initial scroll
+   * spacer and buffer position before real cell heights are measured.
+   * Should roughly match the placeholder heights since the initial render
+   * of a new page generally shows placeholders only anyway.
+   */
+  private get estimatedTileHeight(): number {
+    switch (this.displayMode) {
+      case 'list-detail':
+        return 80;
+      case 'list-compact':
+        return 45;
+      case 'grid':
+      default:
+        return 225;
+    }
+  }
+
   /**
    * Template for the sort & filtering bar that appears atop the search results.
    */
@@ -1591,7 +1601,6 @@ export class CollectionBrowser
           .mobileBreakpoint=${this.mobileBreakpoint}
           .loggedIn=${this.loggedIn}
           .suppressBlurring=${this.shouldSuppressTileBlurring}
-          .tileActions=${this.tileActions}
         >
         </tile-dispatcher>
       </div>
@@ -1741,8 +1750,7 @@ export class CollectionBrowser
       changed.has('displayMode') ||
       changed.has('baseNavigationUrl') ||
       changed.has('baseImageUrl') ||
-      changed.has('loggedIn') ||
-      changed.has('tileActions')
+      changed.has('loggedIn')
     ) {
       this.infiniteScroller?.reload();
     }
@@ -2335,25 +2343,34 @@ export class CollectionBrowser
     });
   }
 
-  private scrollToPage(pageNumber: number): Promise<void> {
-    return new Promise(resolve => {
-      const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
-      // without this setTimeout, Safari just pauses until the `fetchPage` is complete
-      // then scrolls to the cell
-      setTimeout(() => {
-        this.isScrollingToCell = true;
-        this.infiniteScroller?.scrollToCell(cellIndexToScrollTo, true);
-        // This timeout is to give the scroll animation time to finish
-        // then updating the infinite scroller once we're done scrolling
-        // There's no scroll animation completion callback so we're
-        // giving it 0.5s to finish.
-        setTimeout(() => {
-          this.isScrollingToCell = false;
-          this.infiniteScroller?.refreshAllVisibleCells();
-          resolve();
-        }, 500);
-      }, 0);
+  private async scrollToPage(pageNumber: number): Promise<void> {
+    const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
+
+    // Wait for the infinite scroller be rendered before proceeding
+    let waitAttempts = 0;
+    while (!this.infiniteScroller && waitAttempts < 20) {
+      await this.updateComplete;
+      waitAttempts++;
+    }
+    if (!this.infiniteScroller) return;
+
+    // The scroller have its default `itemCount=0`, so propagate our estimated
+    // tile count before jumping to the desired page.
+    if (this.infiniteScroller.itemCount < this.estimatedTileCount) {
+      this.infiniteScroller.itemCount = this.estimatedTileCount;
+      await this.updateComplete;
+    }
+
+    // Without this setTimeout(0), Safari just pauses until the `fetchPage`
+    // is complete then scrolls to the cell.
+    await new Promise<void>(resolve => {
+      setTimeout(resolve, 0);
     });
+
+    this.isScrollingToCell = true;
+    await this.infiniteScroller.scrollToCell(cellIndexToScrollTo, true);
+    this.isScrollingToCell = false;
+    this.infiniteScroller.refreshAllVisibleCells();
   }
 
   /**
@@ -2535,8 +2552,6 @@ export class CollectionBrowser
         .loggedIn=${this.loggedIn}
         .suppressBlurring=${this.shouldSuppressTileBlurring}
         .isManageView=${this.isManageView}
-        .tileActions=${this.tileActions}
-        .layoutType=${this.tileLayoutType}
         ?showTvClips=${isTVSearch || isTVCollection}
         ?enableHoverPane=${true}
         ?useLocalTime=${shouldUseLocalTime}

package/src/tiles/base-tile-component.ts

@@ -1,121 +1,65 @@
-import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
-import { property } from 'lit/decorators.js';
-import type { SortParam } from '@internetarchive/search-service';
-import { TileDisplayValueProvider } from './tile-display-value-provider';
-import type { TileModel } from '../models';
-import { DateFormat, formatDate } from '../utils/format-date';
-import type { TileAction } from './models';
-
-export abstract class BaseTileComponent extends LitElement {
-  @property({ type: Object }) model?: TileModel;
-
-  /** Action buttons to display on this tile (rendered by subclasses) */
-  @property({ type: Array }) tileActions: TileAction[] = [];
-
-  @property({ type: Number }) currentWidth?: number;
-
-  @property({ type: Number }) currentHeight?: number;
-
-  @property({ type: String }) baseNavigationUrl?: string;
-
-  @property({ type: String }) baseImageUrl?: string;
-
-  @property({ type: String }) collectionPagePath?: string;
-
-  @property({ type: Object }) sortParam: SortParam | null = null;
-
-  @property({ type: Object }) defaultSortParam: SortParam | null = null;
-
-  @property({ type: String }) creatorFilter?: string;
-
-  @property({ type: Number }) mobileBreakpoint?: number;
-
-  @property({ type: Boolean }) loggedIn = false;
-
-  @property({ type: Boolean }) suppressBlurring = false;
-
-  @property({ type: Boolean }) useLocalTime = false;
-
-  protected displayValueProvider = new TileDisplayValueProvider();
-
-  protected willUpdate(changed: PropertyValues<this>) {
-    // Ensure the TileDisplayValueProvider stays up-to-date as properties change
-    if (
-      changed.has('model') ||
-      changed.has('baseNavigationUrl') ||
-      changed.has('collectionPagePath') ||
-      changed.has('sortParam') ||
-      changed.has('defaultSortParam') ||
-      changed.has('creatorFilter')
-    ) {
-      this.displayValueProvider = new TileDisplayValueProvider({
-        model: this.model,
-        baseNavigationUrl: this.baseNavigationUrl,
-        collectionPagePath: this.collectionPagePath,
-        sortParam: this.sortParam ?? this.defaultSortParam ?? undefined,
-        creatorFilter: this.creatorFilter,
-      });
-    }
-  }
-
-  /**
-   * The formatted date string for given date and format type, taking into
-   * account whether this tile component should be using local time or UTC.
-   */
-  protected getFormattedDate(date?: Date, format?: DateFormat): string {
-    const { useLocalTime } = this;
-    return formatDate(date, format, { useLocalTime });
-  }
-
-  /**
-   * Renders the action buttons configured for this tile, or `nothing` if
-   * there are none. Optional `extraClass` is appended to the container's
-   * class list so subclasses can target their own layout tweaks.
-   */
-  protected renderTileActions(
-    extraClass: string = '',
-  ): TemplateResult | typeof nothing {
-    if (!this.tileActions.length) return nothing;
-
-    const containerClass = extraClass
-      ? `tile-actions ${extraClass}`
-      : 'tile-actions';
-    return html`
-      <div class=${containerClass}>
-        ${this.tileActions.map(
-          action => html`
-            <button
-              class="tile-action-btn"
-              @click=${(e: Event) => this.handleTileActionClick(e, action)}
-            >
-              ${action.label}
-            </button>
-          `,
-        )}
-      </div>
-    `;
-  }
-
-  /**
-   * Click handler for tile action buttons. Stops propagation so the click
-   * doesn't activate a wrapping tile link, and dispatches a
-   * `tileActionClicked` event (bubbling + composed) carrying the action ID
-   * and the tile model.
-   */
-  protected handleTileActionClick(e: Event, action: TileAction): void {
-    e.preventDefault();
-    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', { bubbles: true, composed: true }),
-    );
-    this.dispatchEvent(
-      new CustomEvent('tileActionClicked', {
-        detail: { actionId: action.id, model: this.model },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-}
+import { LitElement, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import type { SortParam } from '@internetarchive/search-service';
+import { TileDisplayValueProvider } from './tile-display-value-provider';
+import type { TileModel } from '../models';
+import { DateFormat, formatDate } from '../utils/format-date';
+
+export abstract class BaseTileComponent extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  @property({ type: Number }) currentWidth?: number;
+
+  @property({ type: Number }) currentHeight?: number;
+
+  @property({ type: String }) baseNavigationUrl?: string;
+
+  @property({ type: String }) baseImageUrl?: string;
+
+  @property({ type: String }) collectionPagePath?: string;
+
+  @property({ type: Object }) sortParam: SortParam | null = null;
+
+  @property({ type: Object }) defaultSortParam: SortParam | null = null;
+
+  @property({ type: String }) creatorFilter?: string;
+
+  @property({ type: Number }) mobileBreakpoint?: number;
+
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Boolean }) suppressBlurring = false;
+
+  @property({ type: Boolean }) useLocalTime = false;
+
+  protected displayValueProvider = new TileDisplayValueProvider();
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    // Ensure the TileDisplayValueProvider stays up-to-date as properties change
+    if (
+      changed.has('model') ||
+      changed.has('baseNavigationUrl') ||
+      changed.has('collectionPagePath') ||
+      changed.has('sortParam') ||
+      changed.has('defaultSortParam') ||
+      changed.has('creatorFilter')
+    ) {
+      this.displayValueProvider = new TileDisplayValueProvider({
+        model: this.model,
+        baseNavigationUrl: this.baseNavigationUrl,
+        collectionPagePath: this.collectionPagePath,
+        sortParam: this.sortParam ?? this.defaultSortParam ?? undefined,
+        creatorFilter: this.creatorFilter,
+      });
+    }
+  }
+
+  /**
+   * The formatted date string for given date and format type, taking into
+   * account whether this tile component should be using local time or UTC.
+   */
+  protected getFormattedDate(date?: Date, format?: DateFormat): string {
+    const { useLocalTime } = this;
+    return formatDate(date, format, { useLocalTime });
+  }
+}