@internetarchive/collection-browser 4.9.0 → 4.9.1-webdev-9670.0

package/dist/src/collection-browser.js

@@ -3,6 +3,7 @@ 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 { styleMap } from 'lit/directives/style-map.js';
 import { msg } from '@lit/localize';
 import { SearchType, } from '@internetarchive/search-service';
 import '@internetarchive/infinite-scroller';
@@ -10,6 +11,8 @@ import { SortField, getDefaultSelectedFacets, sortOptionFromAPIString, SORT_OPTI
 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';
@@ -24,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)
          */
@@ -131,6 +145,11 @@ 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;
@@ -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.
@@ -673,6 +703,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
       itemCount=${this.placeholderType ? 0 : nothing}
       ariaLandmarkLabel="Search results"
       .estimatedCellHeight=${this.estimatedTileHeight}
+      style=${styleMap(this.gridZoomStyles)}
       .minBufferMarginCells=${this.pageSize}
       .cellProvider=${this}
       .placeholderCellTemplate=${this.placeholderCellTemplate}
@@ -683,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.
@@ -745,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}
@@ -1420,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();
         }
@@ -1523,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);
         }
@@ -2075,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)}
       >
@@ -2616,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);
@@ -2760,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);
@@ -2790,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);