@internetarchive/collection-browser 4.8.1-webdev-9227.4 → 4.9.1-webdev-9670.0

package/dist/src/collection-browser.d.ts

@@ -12,6 +12,7 @@ import { RestorationStateHandlerInterface } from './restoration-state-handler';
 import type { CollectionBrowserQueryState, CollectionBrowserSearchInterface } from './data-source/collection-browser-query-state';
 import type { CollectionBrowserDataSourceInterface } from './data-source/collection-browser-data-source-interface';
 import type { LayoutType, TileAction } from './tiles/models';
+import type { TilePreviewOptions } from './tiles/preview/tile-preview-media';
 import '@internetarchive/elements/ia-combo-box/ia-combo-box';
 import './empty-placeholder';
 import './tiles/tile-dispatcher';
@@ -24,6 +25,13 @@ import './collection-facets/smart-facets/smart-facet-bar';
 export declare class CollectionBrowser extends LitElement implements InfiniteScrollerCellProviderInterface, SharedResizeObserverResizeHandlerInterface, CollectionBrowserSearchInterface {
     baseNavigationUrl?: string;
     baseImageUrl: string;
+    /**
+     * Prototype: show a live preview of an item when its tile is hovered,
+     * focused with the keyboard or long-pressed. Off by default.
+     */
+    enableTilePreviews: boolean;
+    /** Prototype: what tile previews may fetch and play (video clips, audio sound). */
+    tilePreviewOptions: TilePreviewOptions;
     searchService?: SearchServiceInterface;
     /**
      * Which backend should be targeted by searches (e.g., metadata or FTS)
@@ -172,8 +180,12 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
      * `LayoutType` for available options. Has no effect on list display modes.
      */
     tileLayoutType: LayoutType;
-    /** Label for the manage bar. Defaults to the manage bar's own localized label. */
-    manageViewLabel?: string;
+    /**
+     * Prototype: lets viewers zoom the tile grid with a pinch, ctrl/cmd +/-,
+     * or a slider next to the display mode buttons. Off by default.
+     */
+    enablePinchZoom: boolean;
+    manageViewLabel: string;
     /** Whether to replace the default sort options with a slot for customization (default: false) */
     enableSortOptionsSlot: boolean;
     /** Whether to expose a slot for a smart results carousel above the full results */
@@ -209,6 +221,13 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     private facetsLoading;
     private totalResults?;
     private mobileView;
+    /** The zoom level the viewer has chosen, if any (an index into `GRID_ZOOM_COLUMNS`). */
+    private gridZoomLevel?;
+    /** The zoom level closest to the layout the grid has when no zoom level is chosen. */
+    private defaultGridZoomLevel;
+    /** Identifies the latest zoom, so that an earlier one stops lining up its tile. */
+    private gridZoomAlignment;
+    private gridZoomController;
     /**
      * Any temporarily overridden `on`/`off` state for the user's tile blurring preference if they
      * have chosen to override it, or `no-override` if they have not.
@@ -388,6 +407,28 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
      * Template for the infinite scroller widget that contains the result tiles.
      */
     private get infiniteScrollerTemplate();
+    /** Whether the grid zoom prototype is on and applies to what's showing. */
+    private get pinchZoomActive();
+    private get effectiveGridZoomLevel();
+    /** Inline CSS variables for the chosen zoom level, if the viewer has chosen one. */
+    private get gridZoomStyles();
+    private get effectiveTileLayoutType();
+    /** How many columns the scroller's grid currently has. */
+    private measureGridColumns;
+    /** Connects/disconnects the gesture handling and tracks the default zoom level. */
+    private updateGridZoom;
+    private gridZoomSliderChanged;
+    /**
+     * Switches the grid to `level`, then scrolls so that the tile that was under
+     * `focal` (viewport coordinates) is still under it.
+     */
+    private commitGridZoomLevel;
+    /** Keeps `anchor`'s tile lined up with `focal` for `duration` ms. */
+    private alignTile;
+    /** Scrolls the nearest scrolling ancestor of `el` (or the page) by `delta` px. */
+    private scrollByWithin;
+    /** Finds the tile under a viewport point and where in the tile the point falls. */
+    private tileAtPoint;
     /**
      * Produces a `classMap` indicating which classes the infinite scroller should have
      * given the current display mode & placeholder case.

package/dist/src/collection-browser.js

@@ -3,19 +3,21 @@ import { __decorate } from "tslib";
 import { html, css, LitElement, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { localized, msg } from '@lit/localize';
+import { styleMap } from 'lit/directives/style-map.js';
+import { msg } from '@lit/localize';
 import { SearchType, } from '@internetarchive/search-service';
 import '@internetarchive/infinite-scroller';
 import { SortField, getDefaultSelectedFacets, sortOptionFromAPIString, SORT_OPTIONS, defaultProfileElementSorts, defaultFacetDisplayOrder, tvFacetDisplayOrder, defaultSortAvailability, favoritesSortAvailability, tvSortAvailability, } from './models';
 import { RestorationStateHandler, } from './restoration-state-handler';
 import { CollectionBrowserDataSource } from './data-source/collection-browser-data-source';
 import { FACETLESS_PAGE_ELEMENTS } from './data-source/models';
+import { GRID_ZOOM_COLUMNS, loadStoredZoomLevel, nearestZoomLevel, storeZoomLevel, zoomLayoutType, zoomLevelStyles, } from './utils/grid-zoom';
+import { GridZoomController } from './utils/grid-zoom-controller';
 import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
 import { updateSelectedFacetBucket } from './utils/facet-utils';
 import chevronIcon from './assets/img/icons/chevron';
 import { srOnlyStyle } from './styles/sr-only';
 import { sha1 } from './utils/sha1';
-import { getLocale } from './utils/get-locale';
 import '@internetarchive/elements/ia-combo-box/ia-combo-box';
 import './empty-placeholder';
 import './tiles/tile-dispatcher';
@@ -25,11 +27,22 @@ import './manage/manage-bar';
 import './collection-facets';
 import './circular-activity-indicator';
 import './collection-facets/smart-facets/smart-facet-bar';
+/** How long to keep a zoomed tile lined up with the focal point after a layout change. */
+const GRID_ZOOM_SETTLE_MS = 600;
+/** How long the grid stays hidden while the tile is lined up after a layout change. */
+const GRID_ZOOM_HIDDEN_MS = 250;
 let CollectionBrowser = class CollectionBrowser extends LitElement {
     static { CollectionBrowser_1 = this; }
     constructor() {
         super();
         this.baseImageUrl = 'https://archive.org';
+        /**
+         * Prototype: show a live preview of an item when its tile is hovered,
+         * focused with the keyboard or long-pressed. Off by default.
+         */
+        this.enableTilePreviews = false;
+        /** Prototype: what tile previews may fetch and play (video clips, audio sound). */
+        this.tilePreviewOptions = {};
         /**
          * Which backend should be targeted by searches (e.g., metadata or FTS)
          */
@@ -132,6 +145,12 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          * `LayoutType` for available options. Has no effect on list display modes.
          */
         this.tileLayoutType = 'default';
+        /**
+         * Prototype: lets viewers zoom the tile grid with a pinch, ctrl/cmd +/-,
+         * or a slider next to the display mode buttons. Off by default.
+         */
+        this.enablePinchZoom = false;
+        this.manageViewLabel = 'Select items to remove';
         /** Whether to replace the default sort options with a slot for customization (default: false) */
         this.enableSortOptionsSlot = false;
         /** Whether to expose a slot for a smart results carousel above the full results */
@@ -166,6 +185,17 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.searchResultsLoading = false;
         this.facetsLoading = false;
         this.mobileView = false;
+        /** The zoom level closest to the layout the grid has when no zoom level is chosen. */
+        this.defaultGridZoomLevel = nearestZoomLevel(4);
+        /** Identifies the latest zoom, so that an earlier one stops lining up its tile. */
+        this.gridZoomAlignment = 0;
+        this.gridZoomController = new GridZoomController({
+            getSurface: () => this.infiniteScroller,
+            getColumns: () => this.measureGridColumns(),
+            getLevel: () => this.effectiveGridZoomLevel,
+            captureAnchor: focal => this.tileAtPoint(focal),
+            commitLevel: (level, focal, anchor) => this.commitGridZoomLevel(level, focal, anchor),
+        });
         /**
          * Any temporarily overridden `on`/`off` state for the user's tile blurring preference if they
          * have chosen to override it, or `no-override` if they have not.
@@ -609,15 +639,13 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             return nothing;
         const shouldShowSearching = this.searchResultsLoading || this.totalResults === undefined;
         const classes = classMap({ filtered: this.hasActiveFilters });
-        const resultsCount = this.totalResults === undefined
-            ? undefined
-            : new Intl.NumberFormat(getLocale()).format(this.totalResults);
-        const resultsLabel = this.totalResults === 1 ? msg('Result') : msg('Results');
+        const resultsCount = this.totalResults?.toLocaleString();
+        const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
         // Added data-testid for Playwright testing
         return html `
       <div id="results-total" class=${classes} data-testid="results-total">
         <span id="big-results-count">
-          ${shouldShowSearching ? msg('Searching…') : resultsCount}
+          ${shouldShowSearching ? html `Searching&hellip;` : resultsCount}
         </span>
         <span id="big-results-label">
           ${shouldShowSearching ? nothing : resultsLabel}
@@ -651,10 +679,17 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             ? this.manageBarTemplate
             : this.sortFilterBarTemplate}
           <slot name="cb-results"></slot>
-          ${this.displayMode === `list-compact` && this.totalResults
+          <div id="results-body">
+            <slot name="results-aside"></slot>
+            <div id="results-main">
+              ${this.displayMode === `list-compact` && this.totalResults
             ? this.listHeaderTemplate
             : nothing}
-          ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
+              ${this.suppressResultTiles
+            ? nothing
+            : this.infiniteScrollerTemplate}
+            </div>
+          </div>
         </section>
       </div>
     `;
@@ -666,8 +701,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         return html `<infinite-scroller
       class=${this.infiniteScrollerClasses}
       itemCount=${this.placeholderType ? 0 : nothing}
-      ariaLandmarkLabel=${msg('Search results')}
+      ariaLandmarkLabel="Search results"
       .estimatedCellHeight=${this.estimatedTileHeight}
+      style=${styleMap(this.gridZoomStyles)}
       .minBufferMarginCells=${this.pageSize}
       .cellProvider=${this}
       .placeholderCellTemplate=${this.placeholderCellTemplate}
@@ -678,6 +714,127 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             : nothing}
     </infinite-scroller>`;
     }
+    /** Whether the grid zoom prototype is on and applies to what's showing. */
+    get pinchZoomActive() {
+        return this.enablePinchZoom && this.displayMode === 'grid';
+    }
+    get effectiveGridZoomLevel() {
+        return this.gridZoomLevel ?? this.defaultGridZoomLevel;
+    }
+    /** Inline CSS variables for the chosen zoom level, if the viewer has chosen one. */
+    get gridZoomStyles() {
+        if (!this.pinchZoomActive || this.gridZoomLevel === undefined)
+            return {};
+        return zoomLevelStyles(this.gridZoomLevel, this.infiniteScroller?.clientWidth ?? 0);
+    }
+    get effectiveTileLayoutType() {
+        if (!this.pinchZoomActive || this.gridZoomLevel === undefined) {
+            return this.tileLayoutType;
+        }
+        return zoomLayoutType(this.gridZoomLevel) ?? this.tileLayoutType;
+    }
+    /** How many columns the scroller's grid currently has. */
+    measureGridColumns() {
+        const cells = this.infiniteScroller?.shadowRoot?.querySelectorAll('.cell-container');
+        if (!cells?.length)
+            return GRID_ZOOM_COLUMNS[this.effectiveGridZoomLevel];
+        const firstTop = cells[0].getBoundingClientRect().top;
+        let columns = 0;
+        for (const cell of cells) {
+            if (cell.getBoundingClientRect().top !== firstTop)
+                break;
+            columns += 1;
+        }
+        return columns;
+    }
+    /** Connects/disconnects the gesture handling and tracks the default zoom level. */
+    updateGridZoom(changed) {
+        if (changed.has('enablePinchZoom') && this.enablePinchZoom) {
+            this.gridZoomLevel ??= loadStoredZoomLevel();
+        }
+        if (this.pinchZoomActive && this.infiniteScroller) {
+            this.gridZoomController.connect();
+            if (this.gridZoomLevel === undefined) {
+                this.defaultGridZoomLevel = nearestZoomLevel(this.measureGridColumns());
+            }
+        }
+        else {
+            this.gridZoomAlignment += 1;
+            this.gridZoomController.disconnect();
+        }
+    }
+    gridZoomSliderChanged(e) {
+        this.gridZoomController.zoomToLevel(e.detail.level);
+    }
+    /**
+     * Switches the grid to `level`, then scrolls so that the tile that was under
+     * `focal` (viewport coordinates) is still under it.
+     */
+    async commitGridZoomLevel(level, focal, anchor) {
+        const scroller = this.infiniteScroller;
+        if (!scroller)
+            return;
+        this.gridZoomLevel = level;
+        storeZoomLevel(level);
+        await this.updateComplete;
+        await scroller.bufferStabilized;
+        if (!anchor)
+            return;
+        // The scroller keeps re-measuring rows for a moment after a layout change.
+        // The grid stays hidden for the first part of that, and the rest is corrected
+        // in the background.
+        this.gridZoomAlignment += 1;
+        const alignment = this.gridZoomAlignment;
+        await this.alignTile(scroller, anchor, focal, GRID_ZOOM_HIDDEN_MS, alignment);
+        this.alignTile(scroller, anchor, focal, GRID_ZOOM_SETTLE_MS, alignment).catch(() => { });
+    }
+    /** Keeps `anchor`'s tile lined up with `focal` for `duration` ms. */
+    async alignTile(scroller, anchor, focal, duration, alignment) {
+        const deadline = performance.now() + duration;
+        while (performance.now() < deadline &&
+            alignment === this.gridZoomAlignment) {
+            const cell = scroller.shadowRoot?.querySelector(`[data-cell-index="${anchor.index}"]`);
+            if (cell) {
+                const rect = cell.getBoundingClientRect();
+                const delta = rect.top + rect.height * anchor.fractionY - focal.y;
+                if (Math.abs(delta) > 1)
+                    this.scrollByWithin(scroller, delta);
+            }
+            else {
+                await scroller.scrollToCell(anchor.index, false);
+            }
+            await new Promise(requestAnimationFrame);
+        }
+    }
+    /** Scrolls the nearest scrolling ancestor of `el` (or the page) by `delta` px. */
+    scrollByWithin(el, delta) {
+        let node = el;
+        while (node) {
+            const parent = node.parentElement ?? node.getRootNode().host ?? null;
+            if (!parent)
+                break;
+            const { overflowY } = getComputedStyle(parent);
+            if (overflowY === 'auto' || overflowY === 'scroll') {
+                parent.scrollTop += delta;
+                return;
+            }
+            node = parent;
+        }
+        window.scrollBy(0, delta);
+    }
+    /** Finds the tile under a viewport point and where in the tile the point falls. */
+    tileAtPoint(point) {
+        const cell = this.infiniteScroller?.shadowRoot
+            ?.elementsFromPoint(point.x, point.y)
+            .find(el => el.classList.contains('cell-container'));
+        if (!cell)
+            return undefined;
+        const rect = cell.getBoundingClientRect();
+        return {
+            index: Number(cell.dataset.cellIndex),
+            fractionY: (point.y - rect.top) / rect.height,
+        };
+    }
     /**
      * Produces a `classMap` indicating which classes the infinite scroller should have
      * given the current display mode & placeholder case.
@@ -740,6 +897,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
         .enableSortOptionsSlot=${this.enableSortOptionsSlot}
         .suppressDisplayModes=${this.suppressDisplayModes}
+        .showGridZoomSlider=${this.pinchZoomActive}
+        .gridZoomLevel=${this.effectiveGridZoomLevel}
+        @gridZoomLevelChanged=${this.gridZoomSliderChanged}
         @sortChanged=${this.userChangedSort}
         @displayModeChanged=${this.displayModeChanged}
         @titleLetterChanged=${this.titleLetterSelected}
@@ -749,6 +909,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         <slot name="sort-options-left" slot="sort-options-left"></slot>
         <slot name="sort-options" slot="sort-options"></slot>
         <slot name="sort-options-right" slot="sort-options-right"></slot>
+        <slot name="sort-bar-end" slot="sort-bar-end"></slot>
       </sort-filter-bar>
     `;
     }
@@ -1272,7 +1433,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             'clear-filters-btn': true,
             mobile,
         });
-        const buttonText = mobile ? msg('Clear all') : msg('Clear all filters');
+        const buttonText = mobile ? 'Clear all' : 'Clear all filters';
         return html `
       <div class="clear-filters-btn-row">
         ${mobile
@@ -1414,9 +1575,18 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             changed.has('baseImageUrl') ||
             changed.has('loggedIn') ||
             changed.has('tileActions') ||
-            changed.has('tileLayoutType')) {
+            changed.has('tileLayoutType') ||
+            changed.has('gridZoomLevel') ||
+            changed.has('enableTilePreviews') ||
+            changed.has('tilePreviewOptions')) {
             this.infiniteScroller?.reload();
         }
+        this.updateGridZoom(changed);
+        if (changed.has('contentWidth') &&
+            this.gridZoomStyles['--imgBlockHeight']) {
+            // Thumbnail sizes come from the scroller's width, which has only just changed.
+            requestAnimationFrame(() => this.requestUpdate());
+        }
         if (changed.has('profileElement')) {
             this.applyDefaultProfileSort();
         }
@@ -1517,8 +1687,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         super.connectedCallback?.();
         this.setupStateRestorationObserver();
         this.setupResizeObserver();
+        if (this.hasUpdated)
+            this.updateGridZoom(new Map());
     }
     disconnectedCallback() {
+        this.gridZoomController.disconnect();
         if (this.resizeObserver) {
             this.disconnectResizeObserver(this.resizeObserver);
         }
@@ -2069,9 +2242,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         .suppressBlurring=${this.shouldSuppressTileBlurring}
         .isManageView=${this.isManageView}
         .tileActions=${this.tileActions}
-        .layoutType=${this.tileLayoutType}
+        .layoutType=${this.effectiveTileLayoutType}
         ?showTvClips=${isTVSearch || isTVCollection}
         ?enableHoverPane=${true}
+        ?enableTilePreview=${this.enableTilePreviews}
+        .tilePreviewOptions=${this.tilePreviewOptions}
         ?useLocalTime=${shouldUseLocalTime}
         @resultSelected=${(e) => this.resultSelected(e)}
       >
@@ -2221,6 +2396,23 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           padding: 5px 5px 0;
         }
 
+        /*
+         * The results sit in a row with the optional results-aside slot, which
+         * lays out beside them as a flex item and takes its own width and spacing.
+         * The aside comes first in the DOM so keyboard and screen reader users
+         * reach it before the infinitely scrolling tiles, but it shows on the right.
+         */
+        #results-body {
+          display: flex;
+          align-items: flex-start;
+        }
+
+        #results-main {
+          order: -1;
+          flex: 1;
+          min-width: 0;
+        }
+
         #left-column {
           width: var(--leftColumnWidth, 18rem);
           /* Prevents Safari from shrinking col at first draw */
@@ -2593,6 +2785,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], CollectionBrowser.prototype, "baseImageUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionBrowser.prototype, "enableTilePreviews", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "tilePreviewOptions", void 0);
 __decorate([
     property({ type: Object })
 ], CollectionBrowser.prototype, "searchService", void 0);
@@ -2737,6 +2935,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], CollectionBrowser.prototype, "tileLayoutType", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'enable-pinch-zoom' })
+], CollectionBrowser.prototype, "enablePinchZoom", void 0);
 __decorate([
     property({ type: String })
 ], CollectionBrowser.prototype, "manageViewLabel", void 0);
@@ -2767,6 +2968,12 @@ __decorate([
 __decorate([
     state()
 ], CollectionBrowser.prototype, "mobileView", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "gridZoomLevel", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "defaultGridZoomLevel", void 0);
 __decorate([
     state()
 ], CollectionBrowser.prototype, "tileBlurOverrideState", void 0);
@@ -2822,8 +3029,7 @@ __decorate([
     query('infinite-scroller')
 ], CollectionBrowser.prototype, "infiniteScroller", void 0);
 CollectionBrowser = CollectionBrowser_1 = __decorate([
-    customElement('collection-browser'),
-    localized()
+    customElement('collection-browser')
 ], CollectionBrowser);
 export { CollectionBrowser };
 //# sourceMappingURL=collection-browser.js.map