@internetarchive/collection-browser 2.19.1-alpha-webdev7818.0 → 2.20.1-alpha-webdev7822.0

package/src/collection-browser.ts

@@ -47,6 +47,9 @@ import {
   tvFacetDisplayOrder,
   TvClipFilterType,
   TileBlurOverrideState,
+  defaultSortAvailability,
+  favoritesSortAvailability,
+  tvSortAvailability,
 } from './models';
 import {
   RestorationStateHandlerInterface,
@@ -201,6 +204,12 @@ export class CollectionBrowser
    */
   @property({ type: Boolean }) suppressURLQuery = false;
 
+  /**
+   * Whether to suppress persistence of the `sin` search type param to the URL.
+   * If true, the `sin` param will not be added to the URL or updated on query changes.
+   */
+  @property({ type: Boolean }) suppressURLSinParam = false;
+
   /**
    * Whether to suppress display of the sort bar.
    * If true, the entire sort bar (incl. display modes) will be omitted from rendering.
@@ -236,7 +245,7 @@ export class CollectionBrowser
    */
   @property({ type: String }) facetLoadStrategy: FacetLoadStrategy = 'eager';
 
-  @property({ type: Boolean }) facetPaneVisible = false;
+  @property({ type: Boolean, reflect: true }) facetPaneVisible = false;
 
   @property({ type: Boolean }) clearResultsOnEmptyQuery = false;
 
@@ -675,11 +684,7 @@ export class CollectionBrowser
    */
   private get desktopLeftColumnTemplate(): TemplateResult {
     return html`
-      <div
-        id="left-column"
-        class="column"
-        ?hidden=${!this.facetPaneVisible}
-      >
+      <div id="left-column" class="column" ?hidden=${!this.facetPaneVisible}>
         ${this.facetTopViewSlot}
         <div id="facets-header-container">
           <h2 id="facets-header" class="sr-only">${msg('Filters')}</h2>
@@ -802,14 +807,37 @@ export class CollectionBrowser
   private get sortFilterBarTemplate(): TemplateResult | typeof nothing {
     if (this.suppressSortBar) return nothing;
 
+    // Determine the set of sortable fields that should be shown in the sort bar
+    let defaultViewSort = SortField.weeklyview;
+    let defaultDateSort = SortField.date;
+    let sortFieldAvailability = defaultSortAvailability;
+
+    // We adjust the sort options for a couple of special cases...
+    if (this.withinCollection?.startsWith('fav-')) {
+      // When viewing a fav- collection, we include the Date Favorited option and show
+      // it as the default in the date dropdown.
+      defaultDateSort = SortField.datefavorited;
+      sortFieldAvailability = favoritesSortAvailability;
+    } else if (!this.withinCollection && this.searchType === SearchType.TV) {
+      // When viewing TV search results, we default the views dropdown to All-time Views
+      // and exclude several of the usual date sort options.
+      defaultViewSort = SortField.alltimeview;
+      defaultDateSort = SortField.datearchived;
+      sortFieldAvailability = tvSortAvailability;
+    }
+
+    // We only show relevance sort if a search query is currently defined
+    sortFieldAvailability.relevance = this.isRelevanceSortAvailable;
+
     return html`
       <sort-filter-bar
         .defaultSortField=${this.defaultSortField}
         .defaultSortDirection=${this.defaultSortDirection}
+        .defaultViewSort=${defaultViewSort}
+        .defaultDateSort=${defaultDateSort}
         .selectedSort=${this.selectedSort}
         .sortDirection=${this.sortDirection}
-        .showRelevance=${this.isRelevanceSortAvailable}
-        .showDateFavorited=${this.withinCollection?.startsWith('fav-')}
+        .sortFieldAvailability=${sortFieldAvailability}
         .displayMode=${this.displayMode}
         .selectedTitleFilter=${this.selectedTitleFilter}
         .selectedCreatorFilter=${this.selectedCreatorFilter}
@@ -1982,7 +2010,7 @@ export class CollectionBrowser
   private restoreState() {
     const restorationState = this.restorationStateHandler.getRestorationState();
     this.displayMode = restorationState.displayMode;
-    if (restorationState.searchType != null)
+    if (!this.suppressURLSinParam && restorationState.searchType != null)
       this.searchType = restorationState.searchType;
     this.selectedSort = restorationState.selectedSort ?? SortField.default;
     this.sortDirection = restorationState.sortDirection ?? null;
@@ -2002,7 +2030,7 @@ export class CollectionBrowser
   private persistState() {
     const restorationState: RestorationState = {
       displayMode: this.displayMode,
-      searchType: this.searchType,
+      searchType: this.suppressURLSinParam ? undefined : this.searchType,
       selectedSort: this.selectedSort,
       sortDirection: this.sortDirection ?? undefined,
       selectedFacets: this.selectedFacets ?? getDefaultSelectedFacets(),