@internetarchive/collection-browser 0.4.18-alpha.6 → 0.4.18

package/src/collection-browser.ts

@@ -70,7 +70,6 @@ import {
   analyticsActions,
   analyticsCategories,
 } from './utils/analytics-events';
-import { srOnlyStyle } from './styles/sr-only';
 
 @customElement('collection-browser')
 export class CollectionBrowser
@@ -378,9 +377,7 @@ export class CollectionBrowser
         class="column${this.isResizeToMobile ? ' preload' : ''}"
       >
         <div id="mobile-header-container">
-          ${this.mobileView
-            ? this.mobileFacetsTemplate
-            : html`<h2 id="facets-header" class="sr-only">Filters</h2>`}
+          ${this.mobileView ? this.mobileFacetsTemplate : nothing}
           <div id="results-total">
             <span id="big-results-count">
               ${shouldShowSearching ? html`Searching&hellip;` : resultsCount}
@@ -390,12 +387,15 @@ export class CollectionBrowser
             </span>
           </div>
         </div>
-        ${this.mobileView
-          ? nothing
-          : html`<div id="facets-container" aria-labelledby="facets-header">
-              ${this.facetsTemplate}
-              <div id="facets-scroll-sentinel"></div>
-            </div>`}
+        <div
+          id="facets-container"
+          class=${!this.mobileView || this.mobileFacetsVisible
+            ? 'expanded'
+            : ''}
+        >
+          ${this.facetsTemplate}
+          <div id="facets-scroll-sentinel"></div>
+        </div>
         ${this.mobileView ? nothing : html`<div id="facets-bottom-fade"></div>`}
       </div>
       <div id="right-column" class="column">
@@ -411,7 +411,6 @@ export class CollectionBrowser
     return html`<infinite-scroller
       class=${this.infiniteScrollerClasses}
       itemCount=${this.placeholderType ? 0 : nothing}
-      ariaLandmarkLabel="Search results"
       .cellProvider=${this}
       .placeholderCellTemplate=${this.placeholderCellTemplate}
       @scrollThresholdReached=${this.scrollThresholdReached}
@@ -582,34 +581,28 @@ export class CollectionBrowser
     this.selectedCreatorFilter = e.detail.selectedLetter;
   }
 
-  /**
-   * The full template for how the facets should be structured in mobile view,
-   * including the collapsible container (with header) and the facets themselves.
-   */
-  private get mobileFacetsTemplate(): TemplateResult {
-    const toggleFacetsVisible = () => {
-      this.isResizeToMobile = false;
-      this.mobileFacetsVisible = !this.mobileFacetsVisible;
-    };
-
+  private get mobileFacetsTemplate() {
     return html`
-      <details
-        id="mobile-filter-collapse"
-        @click=${toggleFacetsVisible}
-        @keyup=${toggleFacetsVisible}
-      >
-        <summary>
-          <span class="collapser-icon">${chevronIcon}</span>
-          <h2>Filters</h2>
-        </summary>
-        ${this.facetsTemplate}
-      </details>
+      <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>
     `;
   }
 
-  /**
-   * The template for the facets component alone, without any surrounding wrappers.
-   */
   private get facetsTemplate() {
     return html`
       <collection-facets
@@ -1703,327 +1696,306 @@ export class CollectionBrowser
     }
   }
 
-  static get styles() {
-    return [
-      srOnlyStyle,
-      css`
-        :host {
-          display: block;
-
-          --leftColumnWidth: 18rem;
-          --leftColumnPaddingRight: 2.5rem;
-        }
-
-        /**
-        * 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;
-        }
+  static styles = css`
+    :host {
+      display: block;
 
-        #content-container {
-          display: flex;
-        }
+      --leftColumnWidth: 18rem;
+      --leftColumnPaddingRight: 2.5rem;
+    }
 
-        .collapser-icon {
-          display: inline-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;
+    }
 
-        .collapser-icon svg {
-          display: inline-block;
-          width: 12px;
-          height: 12px;
-          transition: transform 0.2s ease-out;
-        }
+    #content-container {
+      display: flex;
+    }
 
-        #mobile-filter-collapse > summary {
-          cursor: pointer;
-          list-style: none;
-        }
+    .collapser {
+      display: inline-block;
+    }
 
-        #mobile-filter-collapse[open] > summary {
-          margin-bottom: 10px;
-        }
+    .collapser svg {
+      width: 10px;
+      height: 10px;
+      transition: transform 0.2s ease-out;
+    }
 
-        #mobile-filter-collapse h2 {
-          display: inline-block;
-          margin: 0;
-          font-size: 2rem;
-        }
+    .collapser.open svg {
+      transform: rotate(90deg);
+    }
 
-        #mobile-filter-collapse[open] svg {
-          transform: rotate(90deg);
-        }
+    #mobile-filter-collapse h1 {
+      cursor: pointer;
+    }
 
-        #content-container.mobile {
-          display: block;
-        }
+    #content-container.mobile {
+      display: block;
+    }
 
-        .column {
-          padding-top: 2rem;
-        }
+    .column {
+      padding-top: 2rem;
+    }
 
-        #right-column {
-          flex: 1;
-          position: relative;
-          border-left: 1px solid rgb(232, 232, 232);
-          border-right: 1px solid rgb(232, 232, 232);
-          padding-left: 1rem;
-          padding-right: 1rem;
-          background: #fff;
-        }
+    #right-column {
+      flex: 1;
+      position: relative;
+      border-left: 1px solid rgb(232, 232, 232);
+      border-right: 1px solid rgb(232, 232, 232);
+      padding-left: 1rem;
+      padding-right: 1rem;
+      background: #fff;
+    }
 
-        .mobile #right-column {
-          border-left: none;
-          padding: 5px 5px 0;
-        }
+    .mobile #right-column {
+      border-left: none;
+      padding: 5px 5px 0;
+    }
 
-        #left-column {
-          width: var(--leftColumnWidth, 18rem);
-          /* Prevents Safari from shrinking col at first draw */
-          min-width: var(--leftColumnWidth, 18rem);
-          padding-top: 0;
-          /* Reduced padding by 0.2rem to add the invisible border in the rule below */
-          padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
-          border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
-          z-index: 1;
-        }
+    #left-column {
+      width: var(--leftColumnWidth, 18rem);
+      /* Prevents Safari from shrinking col at first draw */
+      min-width: var(--leftColumnWidth, 18rem);
+      padding-top: 0;
+      /* Reduced padding by 0.2rem to add the invisible border in the rule below */
+      padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
+      border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
+      z-index: 1;
+    }
 
-        .desktop #left-column {
-          top: 0;
-          position: sticky;
-          height: calc(100vh - 2rem);
-          max-height: calc(100vh - 2rem);
-          overflow-x: hidden;
-          overflow-y: scroll;
-
-          /*
-          * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
-          * does at least give us a tiny bit of control over width & color.
-          */
-          scrollbar-width: thin;
-          scrollbar-color: transparent transparent;
-        }
-        .desktop #left-column:hover {
-          scrollbar-color: auto;
-        }
-        .desktop #left-column::-webkit-scrollbar {
-          appearance: none;
-          width: 6px;
-        }
-        .desktop #left-column::-webkit-scrollbar-button {
-          height: 3px;
-          background: transparent;
-        }
-        .desktop #left-column::-webkit-scrollbar-corner {
-          background: transparent;
-        }
-        .desktop #left-column::-webkit-scrollbar-thumb {
-          border-radius: 4px;
-        }
-        .desktop #left-column:hover::-webkit-scrollbar-thumb {
-          background: rgba(0, 0, 0, 0.15);
-        }
-        .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
-          background: rgba(0, 0, 0, 0.2);
-        }
-        .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
-          background: rgba(0, 0, 0, 0.3);
-        }
+    .desktop #left-column {
+      top: 0;
+      position: sticky;
+      height: calc(100vh - 2rem);
+      max-height: calc(100vh - 2rem);
+      overflow-x: hidden;
+      overflow-y: scroll;
+
+      /*
+       * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
+       * does at least give us a tiny bit of control over width & color.
+       */
+      scrollbar-width: thin;
+      scrollbar-color: transparent transparent;
+    }
+    .desktop #left-column:hover {
+      scrollbar-color: auto;
+    }
+    .desktop #left-column::-webkit-scrollbar {
+      appearance: none;
+      width: 6px;
+    }
+    .desktop #left-column::-webkit-scrollbar-button {
+      height: 3px;
+      background: transparent;
+    }
+    .desktop #left-column::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+    .desktop #left-column::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+    }
+    .desktop #left-column:hover::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.15);
+    }
+    .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
+      background: rgba(0, 0, 0, 0.2);
+    }
+    .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
+      background: rgba(0, 0, 0, 0.3);
+    }
 
-        #facets-bottom-fade {
-          background: linear-gradient(
-            to bottom,
-            #f5f5f700 0%,
-            #f5f5f7c0 50%,
-            #f5f5f7 80%,
-            #f5f5f7 100%
-          );
-          position: fixed;
-          bottom: 0;
-          height: 50px;
-          /* Wide enough to cover the content, but leave the scrollbar uncovered */
-          width: calc(
-            var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
-          );
-          z-index: 2;
-          pointer-events: none;
-          transition: height 0.1s ease;
-        }
-        #facets-bottom-fade.hidden {
-          height: 0;
-        }
+    #facets-bottom-fade {
+      background: linear-gradient(
+        to bottom,
+        #f5f5f700 0%,
+        #f5f5f7c0 50%,
+        #f5f5f7 80%,
+        #f5f5f7 100%
+      );
+      position: fixed;
+      bottom: 0;
+      height: 50px;
+      /* Wide enough to cover the content, but leave the scrollbar uncovered */
+      width: calc(
+        var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
+      );
+      z-index: 2;
+      pointer-events: none;
+      transition: height 0.1s ease;
+    }
+    #facets-bottom-fade.hidden {
+      height: 0;
+    }
 
-        .desktop #left-column-scroll-sentinel {
-          width: 1px;
-          height: 100vh;
-          background: transparent;
-        }
+    .desktop #left-column-scroll-sentinel {
+      width: 1px;
+      height: 100vh;
+      background: transparent;
+    }
 
-        .desktop #facets-scroll-sentinel {
-          width: 1px;
-          height: 1px;
-          background: transparent;
-        }
+    .desktop #facets-scroll-sentinel {
+      width: 1px;
+      height: 1px;
+      background: transparent;
+    }
 
-        .mobile #left-column {
-          width: 100%;
-          padding: 0;
-        }
+    .mobile #left-column {
+      width: 100%;
+      padding: 0;
+    }
 
-        #mobile-header-container {
-          display: flex;
-          justify-content: space-between;
-          align-items: flex-start;
-          margin: 10px 0;
-        }
+    #mobile-header-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
 
-        .desktop #mobile-header-container {
-          padding-top: 2rem;
-        }
+    .desktop #mobile-header-container {
+      padding-top: 2rem;
+    }
 
-        #facets-container {
-          position: relative;
-          max-height: 0;
-          transition: max-height 0.2s ease-in-out;
-          z-index: 1;
-          padding-bottom: 2rem;
-        }
+    #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;
-          padding-left: 10px;
-          padding-right: 10px;
-        }
+    .mobile #facets-container {
+      overflow: hidden;
+      padding-bottom: 0;
+      padding-left: 10px;
+      padding-right: 10px;
+    }
 
-        #facets-container.expanded {
-          max-height: 2000px;
-        }
+    #facets-container.expanded {
+      max-height: 2000px;
+    }
 
-        #results-total {
-          display: flex;
-          align-items: baseline;
-          margin-bottom: 5rem;
-        }
+    #results-total {
+      display: flex;
+      align-items: baseline;
+      margin-bottom: 5rem;
+    }
 
-        .mobile #results-total {
-          margin-bottom: 0;
-        }
+    .mobile #results-total {
+      margin-bottom: 0;
+    }
 
-        #big-results-count {
-          font-size: 2.4rem;
-          font-weight: 500;
-          margin-right: 5px;
-        }
+    #big-results-count {
+      font-size: 2.4rem;
+      font-weight: 500;
+      margin-right: 5px;
+    }
 
-        #big-results-label {
-          font-size: 1.4rem;
-          font-weight: 200;
-        }
+    #big-results-label {
+      font-size: 1.4rem;
+      font-weight: 200;
+    }
 
-        #list-header {
-          max-height: 4.2rem;
-        }
+    #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;
-        }
+    .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;
-        }
+    circular-activity-indicator {
+      width: 30px;
+      height: 30px;
+    }
 
-        sort-filter-bar {
-          display: block;
-          margin-bottom: 4rem;
-        }
+    sort-filter-bar {
+      display: block;
+      margin-bottom: 4rem;
+    }
 
-        infinite-scroller {
-          display: block;
-          --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
-          --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
-        }
+    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-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;
-        }
+    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;
-        }
+    .mobile infinite-scroller.list-detail {
+      --infiniteScrollerRowGap: 24px;
+    }
 
-        infinite-scroller.grid {
-          --infiniteScrollerCellMinWidth: var(
-            --collectionBrowserCellMinWidth,
-            17rem
-          );
-          --infiniteScrollerCellMaxWidth: var(
-            --collectionBrowserCellMaxWidth,
-            1fr
-          );
-        }
+    infinite-scroller.grid {
+      --infiniteScrollerCellMinWidth: var(
+        --collectionBrowserCellMinWidth,
+        17rem
+      );
+      --infiniteScrollerCellMaxWidth: var(--collectionBrowserCellMaxWidth, 1fr);
+    }
 
-        /* Allow tiles to shrink a bit further at smaller viewport widths */
-        @media screen and (max-width: 880px) {
-          infinite-scroller.grid {
-            --infiniteScrollerCellMinWidth: var(
-              --collectionBrowserCellMinWidth,
-              15rem
-            );
-          }
-        }
-        /* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
-        @media screen and (max-width: 360px) {
-          infinite-scroller.grid {
-            --infiniteScrollerCellMinWidth: var(
-              --collectionBrowserCellMinWidth,
-              12rem
-            );
-          }
-        }
+    /* Allow tiles to shrink a bit further at smaller viewport widths */
+    @media screen and (max-width: 880px) {
+      infinite-scroller.grid {
+        --infiniteScrollerCellMinWidth: var(
+          --collectionBrowserCellMinWidth,
+          15rem
+        );
+      }
+    }
+    /* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
+    @media screen and (max-width: 360px) {
+      infinite-scroller.grid {
+        --infiniteScrollerCellMinWidth: var(
+          --collectionBrowserCellMinWidth,
+          12rem
+        );
+      }
+    }
 
-        infinite-scroller.hidden {
-          display: none;
-        }
-      `,
-    ];
-  }
+    infinite-scroller.hidden {
+      display: none;
+    }
+  `;
 }