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

package/dist/src/collection-browser.js

@@ -147,15 +147,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     }
     render() {
         this.setPlaceholderType();
-        return html `
-      <div
-        id="content-container"
-        class=${this.mobileView ? 'mobile' : 'desktop'}
-      >
+        return html `
+      <div
+        id="content-container"
+        class=${this.mobileView ? 'mobile' : 'desktop'}
+      >
         ${this.placeholderType
             ? this.emptyPlaceholderTemplate
-            : this.collectionBrowserTemplate}
-      </div>
+            : this.collectionBrowserTemplate}
+      </div>
     `;
     }
     setPlaceholderType() {
@@ -168,73 +168,73 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
     }
     get emptyPlaceholderTemplate() {
-        return html `
-      <empty-placeholder
-        .placeholderType=${this.placeholderType}
-        ?isMobileView=${this.mobileView}
-      ></empty-placeholder>
+        return html `
+      <empty-placeholder
+        .placeholderType=${this.placeholderType}
+        ?isMobileView=${this.mobileView}
+      ></empty-placeholder>
     `;
     }
     get collectionBrowserTemplate() {
-        return html `<div
-        id="left-column"
-        class="column${this.isResizeToMobile ? ' preload' : ''}"
-      >
-        <div id="mobile-header-container">
-          ${this.mobileView ? this.mobileFacetsTemplate : nothing}
-          <div id="results-total">
-            <span id="big-results-count">
+        return html `<div
+        id="left-column"
+        class="column${this.isResizeToMobile ? ' preload' : ''}"
+      >
+        <div id="mobile-header-container">
+          ${this.mobileView ? this.mobileFacetsTemplate : nothing}
+          <div id="results-total">
+            <span id="big-results-count">
               ${this.totalResults !== undefined
             ? this.totalResults.toLocaleString()
-            : '-'}
-            </span>
-            <span id="big-results-label">
-              ${this.totalResults === 1 ? 'Result' : 'Results'}
-            </span>
-          </div>
-        </div>
-        <div
-          id="facets-container"
+            : '-'}
+            </span>
+            <span id="big-results-label">
+              ${this.totalResults === 1 ? 'Result' : 'Results'}
+            </span>
+          </div>
+        </div>
+        <div
+          id="facets-container"
           class=${!this.mobileView || this.mobileFacetsVisible
             ? 'expanded'
-            : ''}
-        >
-          ${this.facetsTemplate}
-        </div>
-      </div>
-      <div id="right-column" class="column">
-        ${this.searchResultsLoading ? this.loadingTemplate : nothing}
-        ${this.sortFilterBarTemplate}
+            : ''}
+        >
+          ${this.facetsTemplate}
+        </div>
+      </div>
+      <div id="right-column" class="column">
+        ${this.searchResultsLoading ? this.loadingTemplate : nothing}
+        ${this.sortFilterBarTemplate}
         ${this.displayMode === `list-compact`
             ? this.listHeaderTemplate
-            : nothing}
-        ${this.infiniteScrollerTemplate}
+            : nothing}
+        ${this.infiniteScrollerTemplate}
       </div>`;
     }
     get infiniteScrollerTemplate() {
-        return html `<infinite-scroller
-      class="${ifDefined(this.displayMode)}"
-      .cellProvider=${this}
-      .placeholderCellTemplate=${this.placeholderCellTemplate}
-      @scrollThresholdReached=${this.scrollThresholdReached}
-      @visibleCellsChanged=${this.visibleCellsChanged}
+        return html `<infinite-scroller
+      class="${ifDefined(this.displayMode)}"
+      .cellProvider=${this}
+      .placeholderCellTemplate=${this.placeholderCellTemplate}
+      @scrollThresholdReached=${this.scrollThresholdReached}
+      @visibleCellsChanged=${this.visibleCellsChanged}
     ></infinite-scroller>`;
     }
     get sortFilterBarTemplate() {
-        return html `
-      <sort-filter-bar
-        .selectedSort=${this.selectedSort}
-        .sortDirection=${this.sortDirection}
-        .displayMode=${this.displayMode}
-        .selectedTitleFilter=${this.selectedTitleFilter}
-        .selectedCreatorFilter=${this.selectedCreatorFilter}
-        .resizeObserver=${this.resizeObserver}
-        @sortChanged=${this.userChangedSort}
-        @displayModeChanged=${this.displayModeChanged}
-        @titleLetterChanged=${this.titleLetterSelected}
-        @creatorLetterChanged=${this.creatorLetterSelected}
-      >
-      </sort-filter-bar>
+        return html `
+      <sort-filter-bar
+        .selectedSort=${this.selectedSort}
+        .sortDirection=${this.sortDirection}
+        .displayMode=${this.displayMode}
+        .selectedTitleFilter=${this.selectedTitleFilter}
+        .selectedCreatorFilter=${this.selectedCreatorFilter}
+        .resizeObserver=${this.resizeObserver}
+        @sortChanged=${this.userChangedSort}
+        @displayModeChanged=${this.displayModeChanged}
+        @titleLetterChanged=${this.titleLetterSelected}
+        @creatorLetterChanged=${this.creatorLetterSelected}
+      >
+      </sort-filter-bar>
     `;
     }
     userChangedSort(e) {
@@ -335,88 +335,88 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             this.fullYearAggregationLoading);
     }
     get mobileFacetsTemplate() {
-        return html `
-      <div id="mobile-filter-collapse">
-        <h1
+        return html `
+      <div id="mobile-filter-collapse">
+        <h1
           @click=${() => {
             this.isResizeToMobile = false;
             this.mobileFacetsVisible = !this.mobileFacetsVisible;
-        }}
+        }}
           @keyup=${() => {
             this.isResizeToMobile = false;
             this.mobileFacetsVisible = !this.mobileFacetsVisible;
-        }}
-        >
-          <span class="collapser ${this.mobileFacetsVisible ? 'open' : ''}">
-            ${chevronIcon}
-          </span>
-          Filters
-        </h1>
-      </div>
+        }}
+        >
+          <span class="collapser ${this.mobileFacetsVisible ? 'open' : ''}">
+            ${chevronIcon}
+          </span>
+          Filters
+        </h1>
+      </div>
     `;
     }
     get facetsTemplate() {
-        return html `
-      ${this.facetsLoading ? this.loadingTemplate : nothing}
-      <collection-facets
-        @facetsChanged=${this.facetsChanged}
-        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-        .searchService=${this.searchService}
-        .searchType=${this.searchType}
-        .aggregations=${this.aggregations}
-        .fullYearsHistogramAggregation=${this.fullYearsHistogramAggregation}
-        .previousSearchType=${this.previousSearchType}
-        .minSelectedDate=${this.minSelectedDate}
-        .maxSelectedDate=${this.maxSelectedDate}
-        .selectedFacets=${this.selectedFacets}
-        .collectionNameCache=${this.collectionNameCache}
-        .languageCodeHandler=${this.languageCodeHandler}
-        .showHistogramDatePicker=${this.showHistogramDatePicker}
-        .fullQuery=${this.fullQuery}
-        .modalManager=${this.modalManager}
-        ?collapsableFacets=${this.mobileView}
-        ?facetsLoading=${this.facetDataLoading}
-        ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
-        .onFacetClick=${this.facetClickHandler}
-        .analyticsHandler=${this.analyticsHandler}
-      >
-      </collection-facets>
+        return html `
+      ${this.facetsLoading ? this.loadingTemplate : nothing}
+      <collection-facets
+        @facetsChanged=${this.facetsChanged}
+        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+        .searchService=${this.searchService}
+        .searchType=${this.searchType}
+        .aggregations=${this.aggregations}
+        .fullYearsHistogramAggregation=${this.fullYearsHistogramAggregation}
+        .previousSearchType=${this.previousSearchType}
+        .minSelectedDate=${this.minSelectedDate}
+        .maxSelectedDate=${this.maxSelectedDate}
+        .selectedFacets=${this.selectedFacets}
+        .collectionNameCache=${this.collectionNameCache}
+        .languageCodeHandler=${this.languageCodeHandler}
+        .showHistogramDatePicker=${this.showHistogramDatePicker}
+        .fullQuery=${this.fullQuery}
+        .modalManager=${this.modalManager}
+        ?collapsableFacets=${this.mobileView}
+        ?facetsLoading=${this.facetDataLoading}
+        ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
+        .onFacetClick=${this.facetClickHandler}
+        .analyticsHandler=${this.analyticsHandler}
+      >
+      </collection-facets>
     `;
     }
     get loadingTemplate() {
-        return html `
-      <div class="loading-cover">
-        <circular-activity-indicator></circular-activity-indicator>
-      </div>
+        return html `
+      <div class="loading-cover">
+        <circular-activity-indicator></circular-activity-indicator>
+      </div>
     `;
     }
     get listHeaderTemplate() {
-        return html `
-      <div id="list-header">
-        <tile-dispatcher
-          .tileDisplayMode=${'list-header'}
-          .resizeObserver=${this.resizeObserver}
-          .sortParam=${this.sortParam}
-          .mobileBreakpoint=${this.mobileBreakpoint}
-          .loggedIn=${this.loggedIn}
-        >
-        </tile-dispatcher>
-      </div>
+        return html `
+      <div id="list-header">
+        <tile-dispatcher
+          .tileDisplayMode=${'list-header'}
+          .resizeObserver=${this.resizeObserver}
+          .sortParam=${this.sortParam}
+          .mobileBreakpoint=${this.mobileBreakpoint}
+          .loggedIn=${this.loggedIn}
+        >
+        </tile-dispatcher>
+      </div>
     `;
     }
     get queryDebuggingTemplate() {
         var _a, _b;
-        return html `
-      <div>
-        <ul>
-          <li>Base Query: ${this.baseQuery}</li>
-          <li>Facet Query: ${this.facetQuery}</li>
-          <li>Sort Filter Query: ${this.sortFilterQueries}</li>
-          <li>Date Range Query: ${this.dateRangeQueryClause}</li>
-          <li>Sort: ${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field} ${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}</li>
-          <li>Full Query: ${this.fullQuery}</li>
-        </ul>
-      </div>
+        return html `
+      <div>
+        <ul>
+          <li>Base Query: ${this.baseQuery}</li>
+          <li>Facet Query: ${this.facetQuery}</li>
+          <li>Sort Filter Query: ${this.sortFilterQueries}</li>
+          <li>Date Range Query: ${this.dateRangeQueryClause}</li>
+          <li>Sort: ${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field} ${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}</li>
+          <li>Full Query: ${this.fullQuery}</li>
+        </ul>
+      </div>
     `;
     }
     histogramDateRangeUpdated(e) {
@@ -763,7 +763,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      */
     get fullQueryNoDateKey() {
         var _a, _b;
-        return `${this.fullQueryWithoutDate}-${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field}-${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}`;
+        return `${this.fullQueryWithoutDate}-${this.searchType}-${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field}-${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}`;
     }
     /**
      * This method is similar to fetching the facets above,
@@ -818,7 +818,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      */
     get pageFetchQueryKey() {
         var _a, _b;
-        return `${this.fullQuery}-${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field}-${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}`;
+        return `${this.fullQuery}-${this.searchType}-${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field}-${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}`;
     }
     async fetchPage(pageNumber) {
         var _a, _b, _c, _d, _e;
@@ -1041,20 +1041,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const model = this.tileModelAtCellIndex(index);
         if (!model)
             return undefined;
-        return html `
-      <tile-dispatcher
-        .baseNavigationUrl=${this.baseNavigationUrl}
-        .baseImageUrl=${this.baseImageUrl}
-        .model=${model}
-        .tileDisplayMode=${this.displayMode}
-        .resizeObserver=${this.resizeObserver}
-        .collectionNameCache=${this.collectionNameCache}
-        .sortParam=${this.sortParam}
-        .mobileBreakpoint=${this.mobileBreakpoint}
-        .loggedIn=${this.loggedIn}
-        @resultSelected=${(e) => this.resultSelected(e)}
-      >
-      </tile-dispatcher>
+        return html `
+      <tile-dispatcher
+        .baseNavigationUrl=${this.baseNavigationUrl}
+        .baseImageUrl=${this.baseImageUrl}
+        .model=${model}
+        .tileDisplayMode=${this.displayMode}
+        .resizeObserver=${this.resizeObserver}
+        .collectionNameCache=${this.collectionNameCache}
+        .sortParam=${this.sortParam}
+        .mobileBreakpoint=${this.mobileBreakpoint}
+        .loggedIn=${this.loggedIn}
+        @resultSelected=${(e) => this.resultSelected(e)}
+      >
+      </tile-dispatcher>
     `;
     }
     /**
@@ -1066,212 +1066,212 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.fetchPage(this.pagesToRender);
     }
 };
-CollectionBrowser.styles = css `
-    :host {
-      display: block;
-    }
-
-    /**
-    * When page width resizes from desktop to mobile, use this class to
-    * disable expand/collapse transition when loading.
-    */
-    .preload * {
-      transition: none !important;
-      -webkit-transition: none !important;
-      -moz-transition: none !important;
-      -ms-transition: none !important;
-      -o-transition: none !important;
-    }
-
-    #content-container {
-      display: flex;
-    }
-
-    .collapser {
-      display: inline-block;
-    }
-
-    .collapser svg {
-      width: 10px;
-      height: 10px;
-      transition: transform 0.2s ease-out;
-    }
-
-    .collapser.open svg {
-      transform: rotate(90deg);
-    }
-
-    #mobile-filter-collapse h1 {
-      cursor: pointer;
-    }
-
-    #content-container.mobile {
-      display: block;
-    }
-
-    .column {
-      padding-top: 2rem;
-    }
-
-    #right-column {
-      flex: 1;
-      position: relative;
-      border-left: 1px solid rgb(232, 232, 232);
-      padding-left: 1rem;
-    }
-
-    .mobile #right-column {
-      border-left: none;
-      padding: 0;
-    }
-
-    #left-column {
-      width: 18rem;
-      min-width: 18rem; /* Prevents Safari from shrinking col at first draw */
-      padding-right: 12px;
-      padding-right: 1rem;
-    }
-
-    .desktop #left-column::-webkit-scrollbar {
-      display: none;
-    }
-
-    .mobile #left-column {
-      width: 100%;
-      padding: 0;
-    }
-
-    .desktop #left-column {
-      top: 0;
-      position: sticky;
-      max-height: 100vh;
-      overflow: scroll;
-      -ms-overflow-style: none; /* hide scrollbar IE and Edge */
-      scrollbar-width: none; /* hide scrollbar Firefox */
-    }
-
-    #mobile-header-container {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    #facets-container {
-      position: relative;
-      max-height: 0;
-      transition: max-height 0.2s ease-in-out;
-      z-index: 1;
-      padding-bottom: 2rem;
-    }
-
-    .mobile #facets-container {
-      overflow: hidden;
-      padding-bottom: 0;
-    }
-
-    #facets-container.expanded {
-      max-height: 2000px;
-    }
-
-    #results-total {
-      display: flex;
-      align-items: center;
-      margin-bottom: 5rem;
-    }
-
-    .mobile #results-total {
-      margin-bottom: 0;
-    }
-
-    #big-results-count {
-      font-size: 2.4rem;
-      font-weight: 500;
-      margin-right: 5px;
-    }
-
-    #big-results-label {
-      font-size: 1rem;
-      font-weight: 200;
-      text-transform: uppercase;
-    }
-
-    #list-header {
-      max-height: 4.2rem;
-    }
-
-    .loading-cover {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      z-index: 1;
-      padding-top: 50px;
-    }
-
-    circular-activity-indicator {
-      width: 30px;
-      height: 30px;
-    }
-
-    sort-filter-bar {
-      display: block;
-      margin-bottom: 4rem;
-    }
-
-    infinite-scroller {
-      display: block;
-      --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
-      --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
-    }
-
-    infinite-scroller.list-compact {
-      --infiniteScrollerCellMinWidth: var(
-        --collectionBrowserCellMinWidth,
-        100%
-      );
-      --infiniteScrollerCellMinHeight: 34px; /* override infinite scroller component */
-      --infiniteScrollerCellMaxHeight: 56px;
-      --infiniteScrollerRowGap: 0px;
-    }
-
-    infinite-scroller.list-detail {
-      --infiniteScrollerCellMinWidth: var(
-        --collectionBrowserCellMinWidth,
-        100%
-      );
-      --infiniteScrollerCellMinHeight: var(
-        --collectionBrowserCellMinHeight,
-        5rem
-      );
-      /*
-        30px in spec, compensating for a -4px margin
-        to align title with top of item image
-        src/tiles/list/tile-list.ts
-       */
-      --infiniteScrollerRowGap: 34px;
-    }
-
-    .mobile infinite-scroller.list-detail {
-      --infiniteScrollerRowGap: 24px;
-    }
-
-    infinite-scroller.grid {
-      --infiniteScrollerCellMinWidth: var(
-        --collectionBrowserCellMinWidth,
-        18rem
-      );
-      --infiniteScrollerCellMaxWidth: var(--collectionBrowserCellMaxWidth, 1fr);
-      --infiniteScrollerCellMinHeight: var(
-        --collectionBrowserCellMinHeight,
-        29rem
-      );
-      --infiniteScrollerCellMaxHeight: var(
-        --collectionBrowserCellMaxHeight,
-        29rem
-      );
-    }
+CollectionBrowser.styles = css `
+    :host {
+      display: block;
+    }
+
+    /**
+    * When page width resizes from desktop to mobile, use this class to
+    * disable expand/collapse transition when loading.
+    */
+    .preload * {
+      transition: none !important;
+      -webkit-transition: none !important;
+      -moz-transition: none !important;
+      -ms-transition: none !important;
+      -o-transition: none !important;
+    }
+
+    #content-container {
+      display: flex;
+    }
+
+    .collapser {
+      display: inline-block;
+    }
+
+    .collapser svg {
+      width: 10px;
+      height: 10px;
+      transition: transform 0.2s ease-out;
+    }
+
+    .collapser.open svg {
+      transform: rotate(90deg);
+    }
+
+    #mobile-filter-collapse h1 {
+      cursor: pointer;
+    }
+
+    #content-container.mobile {
+      display: block;
+    }
+
+    .column {
+      padding-top: 2rem;
+    }
+
+    #right-column {
+      flex: 1;
+      position: relative;
+      border-left: 1px solid rgb(232, 232, 232);
+      padding-left: 1rem;
+    }
+
+    .mobile #right-column {
+      border-left: none;
+      padding: 0;
+    }
+
+    #left-column {
+      width: 18rem;
+      min-width: 18rem; /* Prevents Safari from shrinking col at first draw */
+      padding-right: 12px;
+      padding-right: 1rem;
+    }
+
+    .desktop #left-column::-webkit-scrollbar {
+      display: none;
+    }
+
+    .mobile #left-column {
+      width: 100%;
+      padding: 0;
+    }
+
+    .desktop #left-column {
+      top: 0;
+      position: sticky;
+      max-height: 100vh;
+      overflow: scroll;
+      -ms-overflow-style: none; /* hide scrollbar IE and Edge */
+      scrollbar-width: none; /* hide scrollbar Firefox */
+    }
+
+    #mobile-header-container {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    #facets-container {
+      position: relative;
+      max-height: 0;
+      transition: max-height 0.2s ease-in-out;
+      z-index: 1;
+      padding-bottom: 2rem;
+    }
+
+    .mobile #facets-container {
+      overflow: hidden;
+      padding-bottom: 0;
+    }
+
+    #facets-container.expanded {
+      max-height: 2000px;
+    }
+
+    #results-total {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5rem;
+    }
+
+    .mobile #results-total {
+      margin-bottom: 0;
+    }
+
+    #big-results-count {
+      font-size: 2.4rem;
+      font-weight: 500;
+      margin-right: 5px;
+    }
+
+    #big-results-label {
+      font-size: 1rem;
+      font-weight: 200;
+      text-transform: uppercase;
+    }
+
+    #list-header {
+      max-height: 4.2rem;
+    }
+
+    .loading-cover {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      z-index: 1;
+      padding-top: 50px;
+    }
+
+    circular-activity-indicator {
+      width: 30px;
+      height: 30px;
+    }
+
+    sort-filter-bar {
+      display: block;
+      margin-bottom: 4rem;
+    }
+
+    infinite-scroller {
+      display: block;
+      --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
+      --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
+    }
+
+    infinite-scroller.list-compact {
+      --infiniteScrollerCellMinWidth: var(
+        --collectionBrowserCellMinWidth,
+        100%
+      );
+      --infiniteScrollerCellMinHeight: 34px; /* override infinite scroller component */
+      --infiniteScrollerCellMaxHeight: 56px;
+      --infiniteScrollerRowGap: 0px;
+    }
+
+    infinite-scroller.list-detail {
+      --infiniteScrollerCellMinWidth: var(
+        --collectionBrowserCellMinWidth,
+        100%
+      );
+      --infiniteScrollerCellMinHeight: var(
+        --collectionBrowserCellMinHeight,
+        5rem
+      );
+      /*
+        30px in spec, compensating for a -4px margin
+        to align title with top of item image
+        src/tiles/list/tile-list.ts
+       */
+      --infiniteScrollerRowGap: 34px;
+    }
+
+    .mobile infinite-scroller.list-detail {
+      --infiniteScrollerRowGap: 24px;
+    }
+
+    infinite-scroller.grid {
+      --infiniteScrollerCellMinWidth: var(
+        --collectionBrowserCellMinWidth,
+        18rem
+      );
+      --infiniteScrollerCellMaxWidth: var(--collectionBrowserCellMaxWidth, 1fr);
+      --infiniteScrollerCellMinHeight: var(
+        --collectionBrowserCellMinHeight,
+        29rem
+      );
+      --infiniteScrollerCellMaxHeight: var(
+        --collectionBrowserCellMaxHeight,
+        29rem
+      );
+    }
   `;
 __decorate([
     property({ type: String })