@internetarchive/collection-browser 2.2.3-alpha.1 → 2.2.3-alpha.3

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

@@ -149,10 +149,9 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
      */
     private searchResultsLoading;
     private facetsLoading;
-    private facetsOptedIn;
     private totalResults?;
     private mobileView;
-    private mobileFacetsVisible;
+    private collapsibleFacetsVisible;
     private contentWidth?;
     private defaultSortField;
     private defaultSortDirection;

package/dist/src/collection-browser.js

@@ -9,6 +9,7 @@ import '@internetarchive/infinite-scroller';
 import { SortField, getDefaultSelectedFacets, sortOptionFromAPIString, SORT_OPTIONS, defaultProfileElementSorts, } 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 { analyticsActions, analyticsCategories, } from './utils/analytics-events';
 import chevronIcon from './assets/img/icons/chevron';
 import { srOnlyStyle } from './styles/sr-only';
@@ -85,7 +86,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          *
          * To entirely suppress facets from being loaded, this may be set to `off`.
          */
-        this.facetLoadStrategy = 'opt-in';
+        this.facetLoadStrategy = 'eager';
         this.clearResultsOnEmptyQuery = false;
         this.collectionPagePath = '/details/';
         /** describes where this component is being used */
@@ -128,9 +129,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          */
         this.searchResultsLoading = false;
         this.facetsLoading = false;
-        this.facetsOptedIn = false;
         this.mobileView = false;
-        this.mobileFacetsVisible = false;
+        this.collapsibleFacetsVisible = false;
         this.defaultSortField = SortField.relevance;
         this.defaultSortDirection = null;
         this.placeholderType = null;
@@ -689,11 +689,13 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * including the collapsible container (with header) and the facets themselves.
      */
     get mobileFacetsTemplate() {
+        if (FACETLESS_PAGE_ELEMENTS.includes(this.profileElement))
+            return nothing;
         const toggleFacetsVisible = (e) => {
             var _a;
-            this.isResizeToMobile = false;
-            this.mobileFacetsVisible = !this.mobileFacetsVisible;
             const target = e.target;
+            this.isResizeToMobile = false;
+            this.collapsibleFacetsVisible = target.open;
             (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
                 category: this.searchContext,
                 action: analyticsActions.mobileFacetsToggled,
@@ -715,6 +717,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * The template for the facets component alone, without any surrounding wrappers.
      */
     get facetsTemplate() {
+        if (FACETLESS_PAGE_ELEMENTS.includes(this.profileElement))
+            return nothing;
         if (this.facetLoadStrategy === 'off') {
             return html `
         <p class="facets-message">
@@ -722,21 +726,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         </p>
       `;
         }
-        if (this.facetLoadStrategy === 'opt-in' &&
-            !this.mobileView &&
-            !this.facetsOptedIn) {
-            return html `
-        <button
-          class="load-facets-btn"
-          @click=${() => {
-                this.facetsOptedIn = true;
-            }}
-        >
-          ${msg('Load facets')}
-        </button>
-      `;
-        }
-        return html `
+        const facets = html `
       <collection-facets
         @facetsChanged=${this.facetsChanged}
         @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
@@ -771,6 +761,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
       >
       </collection-facets>
     `;
+        // In the desktop facets opt-in case, wrap the facet sidebar in a <details> widget
+        // that can be opened and closed as needed.
+        if (this.facetLoadStrategy === 'opt-in' && !this.mobileView) {
+            return html `
+        <details
+          class="desktop-facets-dropdown"
+          @toggle=${(e) => {
+                const target = e.target;
+                this.collapsibleFacetsVisible = target.open;
+            }}
+        >
+          <summary>
+            <span class="collapser-icon">${chevronIcon}</span>
+            <h2>${msg('Filters')}</h2>
+          </summary>
+          ${facets}
+        </button>
+      `;
+        }
+        // Otherwise, just render the facets component bare
+        return facets;
     }
     /**
      * The HTML template for the "Clear all filters" button, or `nothing` if no
@@ -1053,11 +1064,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      */
     updateFacetReadiness() {
         // In desktop view, we are always ready to load facets *unless* we are
-        // using the `opt-in` strategy and the opt-in has not yet occurred.
+        // using the `opt-in` strategy and the facets dropdown is not open.
         const desktopFacetsReady = !this.mobileView &&
-            (this.facetLoadStrategy !== 'opt-in' || this.facetsOptedIn);
+            (this.facetLoadStrategy !== 'opt-in' || this.collapsibleFacetsVisible);
         // In mobile view, facets are considered ready provided they are currently visible (their dropdown is opened).
-        const mobileFacetsReady = this.mobileView && this.mobileFacetsVisible;
+        const mobileFacetsReady = this.mobileView && this.collapsibleFacetsVisible;
         this.dataSource.handleFacetReadinessChange(desktopFacetsReady || mobileFacetsReady);
     }
     /**
@@ -1655,6 +1666,25 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           font-size: 1.4rem;
         }
 
+        .desktop-facets-dropdown > summary {
+          cursor: pointer;
+          list-style: none;
+        }
+
+        .desktop-facets-dropdown h2 {
+          display: inline-block;
+          margin: 0;
+          font-size: 1.6rem;
+        }
+
+        .desktop-facets-dropdown[open] > summary {
+          margin-bottom: 10px;
+        }
+
+        .desktop-facets-dropdown[open] svg {
+          transform: rotate(90deg);
+        }
+
         .desktop #left-column-scroll-sentinel {
           width: 1px;
           height: 100vh;
@@ -1692,8 +1722,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           width: 100%;
         }
 
-        .clear-filters-btn,
-        .load-facets-btn {
+        .clear-filters-btn {
           display: inline-block;
           appearance: none;
           margin: 0;
@@ -1706,8 +1735,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           cursor: pointer;
         }
 
-        .clear-filters-btn:hover,
-        .load-facets-btn:hover {
+        .clear-filters-btn:hover {
           text-decoration: underline;
         }
 
@@ -2004,9 +2032,6 @@ __decorate([
 __decorate([
     state()
 ], CollectionBrowser.prototype, "facetsLoading", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "facetsOptedIn", void 0);
 __decorate([
     state()
 ], CollectionBrowser.prototype, "totalResults", void 0);
@@ -2015,7 +2040,7 @@ __decorate([
 ], CollectionBrowser.prototype, "mobileView", void 0);
 __decorate([
     state()
-], CollectionBrowser.prototype, "mobileFacetsVisible", void 0);
+], CollectionBrowser.prototype, "collapsibleFacetsVisible", void 0);
 __decorate([
     state()
 ], CollectionBrowser.prototype, "contentWidth", void 0);