@internetarchive/collection-browser 4.3.2-alpha-webdev7939.12 → 4.3.2-rc-webdev-8334.0

package/dist/src/collection-browser.js

@@ -1,4 +1,3 @@
-var CollectionBrowser_1;
 import { __decorate } from "tslib";
 import { html, css, LitElement, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
@@ -25,7 +24,6 @@ import './collection-facets';
 import './circular-activity-indicator';
 import './collection-facets/smart-facets/smart-facet-bar';
 let CollectionBrowser = class CollectionBrowser extends LitElement {
-    static { CollectionBrowser_1 = this; }
     constructor() {
         super();
         this.baseImageUrl = 'https://archive.org';
@@ -190,7 +188,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          */
         this.dataSourceInstallInProgress = false;
         this.placeholderCellTemplate = html `<collection-browser-loading-tile></collection-browser-loading-tile>`;
-        this.deferredFetchTimer = 0;
         /**
          * Updates the height of the left column according to its position on the page.
          * Arrow function ensures proper `this` binding.
@@ -228,7 +225,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const model = this.dataSource.getTileModelAt(index);
         /**
          * If we encounter a model we don't have yet and we're not in the middle of an
-         * automated scroll, schedule a fetch for the missing page and return undefined.
+         * automated scroll, fetch the page and just return undefined.
          * The datasource will be updated once the page is loaded and the cell will be rendered.
          *
          * We disable it during the automated scroll since we don't want to fetch pages for intervening cells the
@@ -236,51 +233,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          */
         if (!model && !this.isScrollingToCell && this.dataSource.queryInitialized) {
             const pageNumber = Math.floor(index / this.pageSize) + 1;
-            this.scheduleDeferredPageFetch(pageNumber);
-        }
-        return model;
-    }
-    /**
-     * Debounce delay for page fetches initiated by new cells becoming visible.
-     * Tuned so quick scrolling through unloaded regions doesn't send rapid-fire
-     * search requests for every page we pass through, but to still feel responsive
-     * when the scroll ends.
-     */
-    static { this.DEFERRED_FETCH_DELAY_MS = 150; }
-    /**
-     * Schedules a fetch for the given page, debounced to ensure we don't
-     * rapid-fire fetches while scrolling through pages quickly.
-     *
-     * If there's no pending fetch timer yet, it will fire a fetch immediately.
-     * Otherwise, it will reset any existing timer. In either case, a deferred
-     * fetch for the visible pages is scheduled after a brief delay to account
-     * for whatever pages we land on after scrolling.
-     */
-    scheduleDeferredPageFetch(pageNumber) {
-        if (!this.deferredFetchTimer) {
             this.dataSource.fetchPage(pageNumber);
         }
-        else {
-            window.clearTimeout(this.deferredFetchTimer);
-        }
-        this.deferredFetchTimer = window.setTimeout(() => {
-            this.deferredFetchTimer = 0;
-            this.fetchVisiblePages();
-        }, CollectionBrowser_1.DEFERRED_FETCH_DELAY_MS);
-    }
-    /**
-     * Fetch each currently-visible page whose first cell still has no
-     * loaded model.
-     */
-    fetchVisiblePages() {
-        const visibleIndices = this.infiniteScroller?.getVisibleCellIndices() ?? [];
-        const visiblePages = new Set(visibleIndices.map(i => Math.floor(i / this.pageSize) + 1));
-        for (const page of visiblePages) {
-            const firstCellOfPage = (page - 1) * this.pageSize;
-            if (!this.dataSource.getTileModelAt(firstCellOfPage)) {
-                this.dataSource.fetchPage(page);
-            }
-        }
+        return model;
     }
     // this is the total number of tiles we expect if
     // the data returned is a full page worth
@@ -658,7 +613,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
       class=${this.infiniteScrollerClasses}
       itemCount=${this.placeholderType ? 0 : nothing}
       ariaLandmarkLabel="Search results"
-      .estimatedCellHeight=${this.estimatedTileHeight}
       .cellProvider=${this}
       .placeholderCellTemplate=${this.placeholderCellTemplate}
       @scrollThresholdReached=${this.scrollThresholdReached}
@@ -678,24 +632,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             hidden: !!this.placeholderType,
         });
     }
-    /**
-     * 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.
-     */
-    get estimatedTileHeight() {
-        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.
      */
@@ -879,7 +815,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if ((this.currentPage ?? 1) > 1) {
             this.goToPage(1);
         }
-        this.setCurrentPage(1);
+        this.currentPage = 1;
     }
     /**
      * Fires an analytics event for sorting changes.
@@ -1521,10 +1457,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if (this.boundNavigationHandler) {
             window.removeEventListener('popstate', this.boundNavigationHandler);
         }
-        if (this.deferredFetchTimer) {
-            window.clearTimeout(this.deferredFetchTimer);
-            this.deferredFetchTimer = 0;
-        }
         this.leftColIntersectionObserver?.disconnect();
         this.facetsIntersectionObserver?.disconnect();
         window.removeEventListener('resize', this.updateLeftColumnHeight);
@@ -1696,39 +1628,26 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * @returns
      */
     visibleCellsChanged(e) {
-        this.updateVisiblePage(e.detail.visibleCellIndices);
-    }
-    /**
-     * Recomputes the current page from the given set of visible cell indices
-     * and emits `visiblePageChanged` if the page actually changed.
-     */
-    updateVisiblePage(visibleCellIndices) {
         if (this.isScrollingToCell)
             return;
+        const { visibleCellIndices } = e.detail;
         if (visibleCellIndices.length === 0)
             return;
-        // The indices aren't necessarily sorted, so sort them here to ensure our
-        // calculations below find the right cell/page.
-        const sorted = [...visibleCellIndices].sort((a, b) => a - b);
         // For page determination, do not count more than a single page of visible cells,
         // since otherwise patrons using very tall screens will be treated as one page
         // further than they actually are.
-        const lastIndexWithinCurrentPage = Math.min(this.pageSize, sorted.length) - 1;
-        const lastVisibleCellIndex = sorted[lastIndexWithinCurrentPage];
+        const lastIndexWithinCurrentPage = Math.min(this.pageSize, visibleCellIndices.length) - 1;
+        const lastVisibleCellIndex = visibleCellIndices[lastIndexWithinCurrentPage];
         const lastVisibleCellPage = Math.floor(lastVisibleCellIndex / this.pageSize) + 1;
-        this.setCurrentPage(lastVisibleCellPage);
-    }
-    /**
-     * Sets the current page number and emits a `visiblePageChanged`
-     * event if the new page differs from the previous one.
-     */
-    setCurrentPage(pageNumber) {
-        if (this.currentPage === pageNumber)
-            return;
-        this.currentPage = pageNumber;
-        this.dispatchEvent(new CustomEvent('visiblePageChanged', {
-            detail: { pageNumber },
-        }));
+        if (this.currentPage !== lastVisibleCellPage) {
+            this.currentPage = lastVisibleCellPage;
+        }
+        const event = new CustomEvent('visiblePageChanged', {
+            detail: {
+                pageNumber: lastVisibleCellPage,
+            },
+        });
+        this.dispatchEvent(event);
     }
     /**
      * A Promise which, after each query change, resolves once the fetches for the initial
@@ -1804,10 +1723,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.selectedFacets = restorationState.selectedFacets;
         if (!this.suppressURLQuery)
             this.baseQuery = restorationState.baseQuery;
-        this.setCurrentPage(restorationState.currentPage ?? 1);
+        this.currentPage = restorationState.currentPage ?? 1;
         this.minSelectedDate = restorationState.minSelectedDate;
         this.maxSelectedDate = restorationState.maxSelectedDate;
-        if (this.currentPage && this.currentPage > 1) {
+        if (this.currentPage > 1) {
             this.goToPage(this.currentPage);
         }
     }
@@ -1875,36 +1794,25 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             label: facetType,
         });
     }
-    async scrollToPage(pageNumber) {
-        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(resolve => {
-            setTimeout(resolve, 0);
+    scrollToPage(pageNumber) {
+        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);
         });
-        this.isScrollingToCell = true;
-        const scrolled = await this.infiniteScroller.scrollToCell(cellIndexToScrollTo, true);
-        this.isScrollingToCell = false;
-        this.infiniteScroller.refreshAllVisibleCells();
-        // After we finish scrolling, recompute the visible page from the new state
-        // so that it doesn't fall out of sync.
-        if (scrolled) {
-            this.updateVisiblePage(this.infiniteScroller.getVisibleCellIndices());
-        }
     }
     /**
      * Whether sorting by relevance makes sense for the current state.
@@ -2809,7 +2717,7 @@ __decorate([
 __decorate([
     query('infinite-scroller')
 ], CollectionBrowser.prototype, "infiniteScroller", void 0);
-CollectionBrowser = CollectionBrowser_1 = __decorate([
+CollectionBrowser = __decorate([
     customElement('collection-browser')
 ], CollectionBrowser);
 export { CollectionBrowser };