@internetarchive/collection-browser 0.4.4-alpha → 0.4.4

package/src/collection-browser.ts

@@ -8,7 +8,7 @@ import {
   nothing,
 } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
 import type {
@@ -272,7 +272,7 @@ export class CollectionBrowser
   goToPage(pageNumber: number) {
     this.initialPageNumber = pageNumber;
     this.pagesToRender = pageNumber;
-    this.scrollToPage(pageNumber);
+    return this.scrollToPage(pageNumber);
   }
 
   clearFilters() {
@@ -328,6 +328,7 @@ export class CollectionBrowser
         .placeholderType=${this.placeholderType}
         ?isMobileView=${this.mobileView}
       ></empty-placeholder>
+      ${this.infiniteScrollerTemplate}
     `;
   }
 
@@ -371,7 +372,8 @@ export class CollectionBrowser
 
   private get infiniteScrollerTemplate() {
     return html`<infinite-scroller
-      class="${ifDefined(this.displayMode)}"
+      class=${this.infiniteScrollerClasses}
+      itemCount=${this.placeholderType ? 0 : nothing}
       .cellProvider=${this}
       .placeholderCellTemplate=${this.placeholderCellTemplate}
       @scrollThresholdReached=${this.scrollThresholdReached}
@@ -379,6 +381,13 @@ export class CollectionBrowser
     ></infinite-scroller>`;
   }
 
+  private get infiniteScrollerClasses() {
+    return classMap({
+      [this.displayMode ?? '']: !!this.displayMode,
+      hidden: !!this.placeholderType,
+    });
+  }
+
   private get sortFilterBarTemplate() {
     return html`
       <sort-filter-bar
@@ -514,10 +523,6 @@ export class CollectionBrowser
     this.selectedCreatorFilter = e.detail.selectedLetter;
   }
 
-  private get facetDataLoading(): boolean {
-    return this.facetsLoading || this.fullYearAggregationLoading;
-  }
-
   private get mobileFacetsTemplate() {
     return html`
       <div id="mobile-filter-collapse">
@@ -560,8 +565,8 @@ export class CollectionBrowser
         .filterMap=${this.filterMap}
         .modalManager=${this.modalManager}
         ?collapsableFacets=${this.mobileView}
-        ?facetsLoading=${this.facetDataLoading}
-        ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
+        ?facetsLoading=${this.facetsLoading}
+        ?fullYearAggregationLoading=${this.facetsLoading}
         .onFacetClick=${this.facetClickHandler}
         .analyticsHandler=${this.analyticsHandler}
       >
@@ -812,12 +817,7 @@ export class CollectionBrowser
       this.historyPopOccurred = false;
     }
 
-    await Promise.all([
-      this.doInitialPageFetch(),
-      this.fetchFacets(),
-      // Only fetch histogram data separately if we need it b/c of date filters
-      this.shouldRequestYearHistogram && this.fetchFullYearHistogram(),
-    ]);
+    await Promise.all([this.doInitialPageFetch(), this.fetchFacets()]);
   }
 
   private setupStateRestorationObserver() {
@@ -995,22 +995,6 @@ export class CollectionBrowser
     return fullQuery;
   }
 
-  /** The full query without any year facets or date range clauses */
-  private get fullQueryWithoutDates(): string | undefined {
-    if (!this.baseQuery) return undefined;
-    let fullQuery = this.baseQuery;
-
-    const { facetQueryWithoutYear, sortFilterQueries } = this;
-
-    if (facetQueryWithoutYear) {
-      fullQuery += ` AND ${facetQueryWithoutYear}`;
-    }
-    if (sortFilterQueries) {
-      fullQuery += ` AND ${sortFilterQueries}`;
-    }
-    return fullQuery;
-  }
-
   /**
    * Generates a query string for the given facets
    *
@@ -1027,24 +1011,6 @@ export class CollectionBrowser
     return this.joinFacetClauses(facetClauses);
   }
 
-  /**
-   * Generates a query string for the currently selected facets, excluding 'year' facets.
-   *
-   * Example: `mediatype:("collection" OR "audio" OR -"etree") AND subject:("foo" OR -"bar")`
-   */
-  private get facetQueryWithoutYear(): string | undefined {
-    if (!this.selectedFacets) return undefined;
-    const facetClauses = [];
-    for (const [facetName, facetValues] of Object.entries(
-      this.selectedFacets
-    )) {
-      if (facetName !== 'year') {
-        facetClauses.push(this.buildFacetClause(facetName, facetValues));
-      }
-    }
-    return this.joinFacetClauses(facetClauses);
-  }
-
   /**
    * Builds an OR-joined facet clause for the given facet name and values.
    *
@@ -1174,99 +1140,30 @@ export class CollectionBrowser
 
     this.aggregations = results?.success?.response.aggregations;
 
-    // If we're not fetching year histogram data separately, set it from the newly-fetched aggregations
-    if (!this.shouldRequestYearHistogram) {
-      this.fullYearsHistogramAggregation =
-        results?.success?.response?.aggregations?.year_histogram ??
-        results?.success?.response?.aggregations?.['year-histogram']; // Temp fix until PPS FTS key is fixed to use underscore
-    }
-  }
-
-  /**
-   * If we haven't changed the query, we don't need to fetch the full year histogram
-   *
-   * @private
-   * @type {string}
-   * @memberof CollectionBrowser
-   */
-  private previousFullQueryNoDate?: string;
-
-  /**
-   * The query key is a string that uniquely identifies the current query
-   * without the date range.
-   *
-   * If this doesn't change, we don't need to re-fetch the histogram date range
-   */
-  private get fullQueryNoDateKey() {
-    return `${this.fullQueryWithoutDates}-${this.searchType}-${this.sortParam?.field}-${this.sortParam?.direction}`;
-  }
-
-  /**
-   * This method is similar to fetching the facets above,
-   * but only fetching the year histogram. There is a subtle difference
-   * in how you have to fetch the year histogram where you can't use the
-   * advanced JSON syntax like the other aggregations. It's a special
-   * case that @ximm put it place.
-   */
-  private async fetchFullYearHistogram(): Promise<void> {
-    const { fullQueryNoDateKey } = this;
-    if (
-      !this.fullQueryWithoutDates ||
-      fullQueryNoDateKey === this.previousFullQueryNoDate
-    ) {
-      return;
-    }
-    this.previousFullQueryNoDate = fullQueryNoDateKey;
-
-    const aggregations = {
-      simpleParams: ['year'],
-    };
-
-    const params = {
-      query: this.fullQueryWithoutDates,
-      aggregations,
-      rows: 0,
-    };
-
-    this.fullYearAggregationLoading = true;
-    const results = await this.searchService?.search(params, this.searchType);
-    this.fullYearAggregationLoading = false;
-
     this.fullYearsHistogramAggregation =
       results?.success?.response?.aggregations?.year_histogram ??
       results?.success?.response?.aggregations?.['year-histogram']; // Temp fix until PPS FTS key is fixed to use underscore
   }
 
-  /**
-   * We only want to send a separate request for the year_histogram data
-   * if (a) the date picker component is enabled and (b) there is a year facet or date-range filter applied.
-   *
-   * Otherwise, we should just be using the histogram data supplied by the "normal" facet request.
-   */
-  private get shouldRequestYearHistogram() {
-    const datePickerEnabled = this.showHistogramDatePicker;
-    const hasDateRange = !!this.dateRangeQueryClause;
-    const hasYearFacet =
-      Object.keys(this.selectedFacets?.year ?? {}).length > 0;
-    return datePickerEnabled && (hasDateRange || hasYearFacet);
-  }
-
-  private scrollToPage(pageNumber: number) {
-    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.
+  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 = false;
-        this.infiniteScroller.reload();
-      }, 500);
-    }, 0);
+        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?.reload();
+          resolve();
+        }, 500);
+      }, 0);
+    });
   }
 
   /**
@@ -1363,7 +1260,9 @@ export class CollectionBrowser
     // temporary estimates based on pages rendered so far).
     if (results.length < this.pageSize) {
       this.endOfDataReached = true;
-      this.infiniteScroller.itemCount = this.totalResults;
+      if (this.infiniteScroller) {
+        this.infiniteScroller.itemCount = this.totalResults;
+      }
     }
     this.pageFetchesInProgress[pageFetchQueryKey]?.delete(pageNumber);
     this.searchResultsLoading = false;
@@ -1465,7 +1364,7 @@ export class CollectionBrowser
     const visiblePages = this.currentVisiblePageNumbers;
     const needsReload = visiblePages.includes(pageNumber);
     if (needsReload) {
-      this.infiniteScroller.reload();
+      this.infiniteScroller?.reload();
     }
   }
 
@@ -1590,6 +1489,7 @@ export class CollectionBrowser
         .sortParam=${this.sortParam}
         .mobileBreakpoint=${this.mobileBreakpoint}
         .loggedIn=${this.loggedIn}
+        ?enableHoverPane=${true}
         @resultSelected=${(e: CustomEvent) => this.resultSelected(e)}
       >
       </tile-dispatcher>
@@ -1659,13 +1559,11 @@ export class CollectionBrowser
       position: relative;
       border-left: 1px solid rgb(232, 232, 232);
       padding-left: 1rem;
-      margin-bottom: 1.5rem; // add space in the bottom of infinite scroller
     }
 
     .mobile #right-column {
       border-left: none;
       padding: 0;
-      margin-bottom: 1.5rem;
     }
 
     #left-column {
@@ -1806,5 +1704,9 @@ export class CollectionBrowser
       );
       --infiniteScrollerCellMaxWidth: var(--collectionBrowserCellMaxWidth, 1fr);
     }
+
+    infinite-scroller.hidden {
+      display: none;
+    }
   `;
 }

package/src/sort-filter-bar/sort-filter-bar.ts

@@ -380,7 +380,18 @@ export class SortFilterBar
 
   private mobileSortChanged(e: Event) {
     const target = e.target as HTMLSelectElement;
-    this.setSelectedSort(target.value as SortField);
+    const sortField = target.value as SortField;
+    this.setSelectedSort(sortField);
+
+    this.alphaSelectorVisible = null;
+    if (sortField !== 'title' && this.selectedTitleFilter) {
+      this.selectedTitleFilter = null;
+      this.emitTitleLetterChangedEvent();
+    }
+    if (sortField !== 'creator' && this.selectedCreatorFilter) {
+      this.selectedCreatorFilter = null;
+      this.emitCreatorLetterChangedEvent();
+    }
   }
 
   private get displayOptionTemplate() {

package/src/styles/item-image-styles.ts

@@ -16,6 +16,10 @@ export const baseItemImageStyles = css`
     position: relative;
   }
 
+  .list-box img {
+    border-radius: 0;
+  }
+
   .contain {
     object-fit: contain;
     object-position: center;
@@ -40,7 +44,7 @@ export const baseItemImageStyles = css`
     height: 160px;
   }
 
-  .collection-image {
+  :not(.list-box) > .collection-image {
     object-fit: cover;
     border-radius: 8px;
     width: 100%;

package/src/tiles/grid/item-tile.ts

@@ -83,7 +83,6 @@ export class ItemTile extends LitElement {
   private get imageBlockTemplate(): TemplateResult {
     return html`
       <image-block
-        class=${this.hasSnippets ? 'has-snippets' : nothing}
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}
         .loggedIn=${this.loggedIn}
@@ -174,7 +173,21 @@ export class ItemTile extends LitElement {
 
         text-snippet-block {
           --containerLeftMargin: 5px;
-          --containerTopMargin: 10px;
+          --containerTopMargin: 5px;
+        }
+
+        /**
+         * iOS Safari long-press on tiles (to bring up hover pane)
+         * gets messy without this
+         */
+        @media screen and (pointer: coarse) and (hover: none) {
+          .container {
+            -webkit-touch-callout: none;
+          }
+
+          .truncated {
+            -webkit-touch-callout: default;
+          }
         }
       `,
     ];

package/src/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -13,6 +13,7 @@ export const baseTileStyles = css`
     border: 1px #2c2c2c;
     border-radius: ${tileCornerRadius};
     box-shadow: 1px 1px 2px 0;
+    box-sizing: border-box;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -21,7 +22,6 @@ export const baseTileStyles = css`
 
   image-block {
     display: block;
-    margin-bottom: 5px;
     position: relative;
     text-align: center;
   }
@@ -35,14 +35,14 @@ export const baseTileStyles = css`
   }
 
   .item-info {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
     flex-grow: 1;
   }
 
   #title {
-    flex-shrink: 0;
-    padding-left: 5px;
-    padding-right: 5px;
-    margin-bottom: 10px;
+    padding: 0 5px;
   }
 
   .created-by,
@@ -52,7 +52,7 @@ export const baseTileStyles = css`
     display: flex;
     justify-content: left;
     align-items: flex-end; /* Important to start text from bottom */
-    padding: 0 5px 5px 5px;
+    padding: 0 5px;
   }
 
   .truncated {

package/src/tiles/grid/tile-stats.ts

@@ -63,7 +63,7 @@ export class TileStats extends LitElement {
               ${formattedFavCount}
             </p>
           </li>
-          <li class="col" title="${formattedReviewCount} reviews">
+          <li class="col reviews" title="${formattedReviewCount} reviews">
             ${reviewsIcon}
             <p class="status-text">
               <span class="sr-only">Reviews:</span>
@@ -92,25 +92,33 @@ export class TileStats extends LitElement {
       }
 
       svg {
-        height: 10px;
-        width: 10px;
+        height: 13px;
+        width: 13px;
         display: block;
         margin: auto;
         pointer-events: none;
       }
 
+      /* Make the reviews icon slightly smaller/lower, for even visual weight */
+      .reviews svg {
+        height: 11px;
+        width: 11px;
+        margin-top: 2px;
+      }
+
       .item-stats {
-        height: 35px;
+        height: 30px;
         padding-left: 5px;
         padding-right: 5px;
         font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
+        text-align: center;
       }
 
       #stats-row {
         display: flex;
+        justify-content: space-between;
         flex-wrap: wrap;
         width: 100%;
-        padding-top: 5px;
         padding-bottom: 5px;
       }
 
@@ -126,7 +134,7 @@ export class TileStats extends LitElement {
       }
 
       .col {
-        width: 25%;
+        min-width: 15px;
         height: 25px;
       }
 
@@ -134,7 +142,7 @@ export class TileStats extends LitElement {
         font-size: 14px;
         height: 15px;
         color: #2c2c2c;
-        line-height: 20px;
+        line-height: 17px;
         margin: auto;
         display: block;
         text-align: center;