@internetarchive/collection-browser 0.4.10-alpha.3 → 0.4.11

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

@@ -11,12 +11,6 @@ import type {
   SharedResizeObserverInterface,
   SharedResizeObserverResizeHandlerInterface,
 } from '@internetarchive/shared-resize-observer';
-import '@internetarchive/ia-dropdown';
-import type {
-  IaDropdown,
-  optionInterface,
-} from '@internetarchive/ia-dropdown/dist/src/ia-dropdown';
-import type { SortDirection } from '@internetarchive/search-service';
 import {
   CollectionDisplayMode,
   PrefixFilterCounts,
@@ -63,28 +57,26 @@ export class SortFilterBar
 
   @state() viewSortSelectorVisible = false;
 
-  @state() desktopSortContainerWidth = 0;
+  @state() desktopSelectorBarWidth = 0;
 
   @state() selectorBarContainerWidth = 0;
 
   @state() hoveringOverDateSortOptions = false;
 
-  @query('#desktop-sort-container')
-  private desktopSortContainer!: HTMLUListElement;
+  @query('#desktop-sort-selector')
+  private desktopSortSelector!: HTMLUListElement;
 
   @query('#sort-selector-container')
   private sortSelectorContainer!: HTMLDivElement;
 
-  @query('#views-dropdown')
-  private viewsDropdown!: IaDropdown;
-
-  @query('#date-dropdown')
-  private dateDropdown!: IaDropdown;
-
   render() {
     return html`
       <div id="container">
         <div id="sort-bar">
+          <div id="sort-direction-container">
+            ${this.sortDirectionSelectorTemplate}
+          </div>
+
           <div id="sort-selector-container">
             ${this.mobileSortSelectorTemplate}
             ${this.desktopSortSelectorTemplate}
@@ -94,12 +86,14 @@ export class SortFilterBar
         </div>
 
         ${this.viewSortSelectorVisible && !this.mobileSelectorVisible
-          ? this.dropdownBackdrop
+          ? this.viewSortSelector
           : nothing}
         ${this.dateSortSelectorVisible && !this.mobileSelectorVisible
-          ? this.dropdownBackdrop
+          ? this.dateSortSelector
           : nothing}
         ${this.alphaBarTemplate}
+
+        <div id="bottom-shadow"></div>
       </div>
     `;
   }
@@ -173,7 +167,7 @@ export class SortFilterBar
     });
 
     resizeObserver.removeObserver({
-      target: this.desktopSortContainer,
+      target: this.desktopSortSelector,
       handler: this,
     });
   }
@@ -186,13 +180,13 @@ export class SortFilterBar
     });
 
     this.resizeObserver.addObserver({
-      target: this.desktopSortContainer,
+      target: this.desktopSortSelector,
       handler: this,
     });
   }
 
   private get mobileSelectorVisible() {
-    return this.selectorBarContainerWidth - 10 < this.desktopSortContainerWidth;
+    return this.selectorBarContainerWidth - 10 < this.desktopSelectorBarWidth;
   }
 
   private get alphaBarTemplate(): TemplateResult | typeof nothing {
@@ -211,8 +205,8 @@ export class SortFilterBar
   }
 
   handleResize(entry: ResizeObserverEntry): void {
-    if (entry.target === this.desktopSortContainer) {
-      this.desktopSortContainerWidth = entry.contentRect.width;
+    if (entry.target === this.desktopSortSelector) {
+      this.desktopSelectorBarWidth = entry.contentRect.width;
     } else if (entry.target === this.sortSelectorContainer) {
       this.selectorBarContainerWidth = entry.contentRect.width;
     }
@@ -220,130 +214,101 @@ export class SortFilterBar
 
   private get sortDirectionSelectorTemplate() {
     return html`
-      <button
-        id="sort-direction-selector"
-        ?disabled=${this.selectedSort === 'relevance'}
-        @click=${this.toggleSortDirection}
-      >
-        <div
+      <div id="sort-direction-selector">
+        <button
           id="sort-ascending-btn"
           class="sort-button ${this.sortDirection === 'asc' ? 'selected' : ''}"
+          ?disabled=${this.selectedSort === 'relevance'}
+          @click=${() => {
+            this.setSortDirections('asc');
+          }}
         >
           ${sortIcon}
-        </div>
-        <div
+        </button>
+        <button
           id="sort-descending-btn"
           class="sort-button ${this.sortDirection === 'desc' ? 'selected' : ''}"
+          ?disabled=${this.selectedSort === 'relevance'}
+          @click=${() => {
+            this.setSortDirections('desc');
+          }}
         >
           ${sortIcon}
-        </div>
-      </button>
+        </button>
+      </div>
     `;
   }
 
   private get desktopSortSelectorTemplate() {
     return html`
-      <div
-        id="desktop-sort-container"
+      <ul
+        id="desktop-sort-selector"
         class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}
       >
-        <span id="sort-by-text">Sort by</span>
-        <div id="sort-direction-container">
-          ${this.sortDirectionSelectorTemplate}
-        </div>
-        <ul id="desktop-sort-selector">
-          <li>
-            ${this.showRelevance
-              ? this.getSortDisplayOption(SortField.relevance)
-              : nothing}
-          </li>
-          <li>
-            ${this.getSortDropdown({
-              optionSelectedHandler: () => {
-                this.dateSortSelectorVisible = false;
-                this.alphaSelectorVisible = null;
-                this.selectedTitleFilter = null;
-                this.selectedCreatorFilter = null;
-                this.emitTitleLetterChangedEvent();
-                this.emitCreatorLetterChangedEvent();
-              },
-              clickHandler: () => {
-                if (!this.viewsDropdown.open && !this.viewOptionSelected)
-                  this.setSelectedSort(SortField.weeklyview);
-                this.dateDropdown.open = false;
-                this.viewSortSelectorVisible = this.viewsDropdown.open;
-                this.viewsDropdown.classList.toggle(
-                  'open',
-                  this.viewsDropdown.open
-                );
-              },
-              displayName: html`${this.viewSortField}`,
-              id: 'views-dropdown',
-              isSelected: () => this.viewOptionSelected,
-              dropdownOptions: [
-                this.getDropdownOption(SortField.weeklyview),
-                this.getDropdownOption(SortField.alltimeview),
-              ],
-              selectedOption: this.viewOptionSelected ? this.selectedSort : '',
-            })}
-          </li>
-          <li>
-            ${this.getSortDisplayOption(SortField.title, {
-              clickEvent: () => {
-                this.alphaSelectorVisible = 'title';
-                this.selectedCreatorFilter = null;
-                this.dateSortSelectorVisible = false;
-                this.viewSortSelectorVisible = false;
-                this.setSelectedSort(SortField.title);
-                this.emitCreatorLetterChangedEvent();
-              },
-            })}
-          </li>
-          <li>
-            ${this.getSortDropdown({
-              optionSelectedHandler: () => {
-                this.viewSortSelectorVisible = false;
-                this.alphaSelectorVisible = null;
-                this.selectedTitleFilter = null;
-                this.selectedCreatorFilter = null;
-                this.emitTitleLetterChangedEvent();
-                this.emitCreatorLetterChangedEvent();
-              },
-              clickHandler: () => {
-                if (!this.dateDropdown.open && !this.dateOptionSelected)
-                  this.setSelectedSort(SortField.date);
-                this.viewsDropdown.open = false;
-                this.dateSortSelectorVisible = this.dateDropdown.open;
-                this.dateDropdown.classList.toggle(
-                  'open',
-                  this.dateDropdown.open
-                );
-              },
-              displayName: html`${this.dateSortField}`,
-              id: 'date-dropdown',
-              isSelected: () => this.dateOptionSelected,
-              dropdownOptions: [
-                this.getDropdownOption(SortField.date),
-                this.getDropdownOption(SortField.datearchived),
-                this.getDropdownOption(SortField.datereviewed),
-                this.getDropdownOption(SortField.dateadded),
-              ],
-              selectedOption: this.dateOptionSelected ? this.selectedSort : '',
-            })}
-          </li>
-          <li>
-            ${this.getSortDisplayOption(SortField.creator, {
-              clickEvent: () => {
-                this.alphaSelectorVisible = 'creator';
-                this.selectedTitleFilter = null;
-                this.dateSortSelectorVisible = false;
-                this.setSelectedSort(SortField.creator);
-                this.emitTitleLetterChangedEvent();
-              },
-            })}
-          </li>
-        </ul>
-      </div>
+        <li id="sort-by-text">Sort By</li>
+        <li>
+          ${this.showRelevance
+            ? this.getSortDisplayOption(SortField.relevance)
+            : nothing}
+        </li>
+        <li>
+          ${this.getSortDisplayOption(SortField.weeklyview, {
+            clickEvent: () => {
+              if (!this.viewOptionSelected)
+                this.setSelectedSort(SortField.weeklyview);
+              this.viewSortSelectorVisible = !this.viewSortSelectorVisible;
+              this.dateSortSelectorVisible = false;
+              this.alphaSelectorVisible = null;
+              this.selectedTitleFilter = null;
+              this.selectedCreatorFilter = null;
+              this.emitTitleLetterChangedEvent();
+              this.emitCreatorLetterChangedEvent();
+            },
+            displayName: html`${this.viewSortField}`,
+            isSelected: () => this.viewOptionSelected,
+          })}
+        </li>
+        <li>
+          ${this.getSortDisplayOption(SortField.title, {
+            clickEvent: () => {
+              this.alphaSelectorVisible = 'title';
+              this.selectedCreatorFilter = null;
+              this.dateSortSelectorVisible = false;
+              this.viewSortSelectorVisible = false;
+              this.setSelectedSort(SortField.title);
+              this.emitCreatorLetterChangedEvent();
+            },
+          })}
+        </li>
+        <li>
+          ${this.getSortDisplayOption(SortField.date, {
+            clickEvent: () => {
+              if (!this.dateOptionSelected)
+                this.setSelectedSort(SortField.date);
+              this.dateSortSelectorVisible = !this.dateSortSelectorVisible;
+              this.viewSortSelectorVisible = false;
+              this.alphaSelectorVisible = null;
+              this.selectedTitleFilter = null;
+              this.selectedCreatorFilter = null;
+              this.emitTitleLetterChangedEvent();
+              this.emitCreatorLetterChangedEvent();
+            },
+            displayName: html`${this.dateSortField}`,
+            isSelected: () => this.dateOptionSelected,
+          })}
+        </li>
+        <li>
+          ${this.getSortDisplayOption(SortField.creator, {
+            clickEvent: () => {
+              this.alphaSelectorVisible = 'creator';
+              this.selectedTitleFilter = null;
+              this.dateSortSelectorVisible = false;
+              this.setSelectedSort(SortField.creator);
+              this.emitTitleLetterChangedEvent();
+            },
+          })}
+        </li>
+      </ul>
     `;
   }
 
@@ -388,76 +353,28 @@ export class SortFilterBar
             this.emitCreatorLetterChangedEvent();
           }
         }}
-        class=${isSelected() ? 'selected' : nothing}
+        class=${isSelected() ? 'selected' : ''}
       >
         ${displayName}
       </a>
     `;
   }
 
-  private getSortDropdown(options?: {
-    optionSelectedHandler?: (e: Event) => void;
-    clickHandler?: (e: PointerEvent) => void;
-    isSelected?: () => boolean;
-    displayName?: TemplateResult;
-    id?: string;
-    dropdownOptions?: optionInterface[];
-    selectedOption?: string;
-  }): TemplateResult {
-    return html`
-      <ia-dropdown
-        id=${options?.id ?? nothing}
-        class=${options?.isSelected?.() ? 'selected' : nothing}
-        displayCaret
-        closeOnSelect
-        includeSelectedOption
-        .openViaButton=${false}
-        .options=${options?.dropdownOptions}
-        .selectedOption=${options?.selectedOption}
-        @optionSelected=${options?.optionSelectedHandler ?? nothing}
-        @click=${options?.clickHandler ?? nothing}
-      >
-        <span class="dropdown-label" slot="dropdown-label">
-          ${options?.displayName ?? ''}
-        </span>
-      </ia-dropdown>
-    `;
-  }
-
-  private getDropdownOption(sortField: SortField): optionInterface {
-    return {
-      id: sortField,
-      selectedHandler: () => {
-        this.selectDropdownSortField(sortField);
-      },
-      label: html`
-        <span class="dropdown-option-label">
-          ${SortFieldDisplayName[sortField]}
-        </span>
-      `,
-    };
-  }
-
   private get mobileSortSelectorTemplate() {
     return html`
-      <div
-        id="mobile-sort-container"
+      <select
+        id="mobile-sort-selector"
+        @change=${this.mobileSortChanged}
         class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
       >
-        <span id="sort-by-text">Sort by</span>
-        <div id="sort-direction-container">
-          ${this.sortDirectionSelectorTemplate}
-        </div>
-        <select id="mobile-sort-selector" @change=${this.mobileSortChanged}>
-          ${Object.keys(SortField).map(
-            field => html`
-              <option value="${field}" ?selected=${this.selectedSort === field}>
-                ${SortFieldDisplayName[field as SortField]}
-              </option>
-            `
-          )}
-        </select>
-      </div>
+        ${Object.keys(SortField).map(
+          field => html`
+            <option value="${field}" ?selected=${this.selectedSort === field}>
+              ${SortFieldDisplayName[field as SortField]}
+            </option>
+          `
+        )}
+      </select>
     `;
   }
 
@@ -520,38 +437,72 @@ export class SortFilterBar
     `;
   }
 
-  private get dropdownBackdrop() {
+  private get dateSortSelector() {
     return html`
       <div
-        id="sort-selector-backdrop"
-        @keyup=${this.closeDropdowns}
-        @click=${this.closeDropdowns}
+        id="date-sort-selector-backdrop"
+        @keyup=${() => {
+          this.dateSortSelectorVisible = false;
+        }}
+        @click=${() => {
+          this.dateSortSelectorVisible = false;
+        }}
       ></div>
+      <div id="date-sort-selector">
+        <ul>
+          <li>${this.getDateSortButton(SortField.datearchived)}</li>
+          <li>${this.getDateSortButton(SortField.date)}</li>
+          <li>${this.getDateSortButton(SortField.datereviewed)}</li>
+          <li>${this.getDateSortButton(SortField.dateadded)}</li>
+        </ul>
+      </div>
     `;
   }
 
-  private closeDropdowns() {
-    this.viewsDropdown.open = false;
-    this.dateDropdown.open = false;
-    this.viewSortSelectorVisible = false;
-    this.dateSortSelectorVisible = false;
+  private get viewSortSelector() {
+    return html`
+      <div
+        id="view-sort-selector-backdrop"
+        @keyup=${() => {
+          this.viewSortSelectorVisible = false;
+        }}
+        @click=${() => {
+          this.viewSortSelectorVisible = false;
+        }}
+      ></div>
+      <div id="view-sort-selector">
+        <ul>
+          <li>${this.getDateSortButton(SortField.alltimeview)}</li>
+          <li>${this.getDateSortButton(SortField.weeklyview)}</li>
+        </ul>
+      </div>
+    `;
+  }
+
+  private getDateSortButton(sortField: SortField) {
+    return html`
+      <button
+        @click=${() => {
+          this.selectDateSort(sortField);
+        }}
+        class=${this.selectedSort === sortField ? 'selected' : ''}
+      >
+        ${SortFieldDisplayName[sortField]}
+      </button>
+    `;
   }
 
-  private selectDropdownSortField(sortField: SortField) {
+  private selectDateSort(sortField: SortField) {
     this.dateSortSelectorVisible = false;
     this.viewSortSelectorVisible = false;
     this.setSelectedSort(sortField);
   }
 
-  private setSortDirection(sortDirection: SortDirection) {
+  private setSortDirections(sortDirection: 'asc' | 'desc') {
     this.sortDirection = sortDirection;
     this.emitSortChangedEvent();
   }
 
-  private toggleSortDirection() {
-    this.setSortDirection(this.sortDirection === 'desc' ? 'asc' : 'desc');
-  }
-
   private setSelectedSort(sort: SortField) {
     this.selectedSort = sort;
     this.emitSortChangedEvent();
@@ -705,8 +656,9 @@ export class SortFilterBar
     #sort-bar {
       display: flex;
       justify-content: space-between;
-      border-bottom: 1px solid #2c2c2c;
+      border: 1px solid rgb(232, 232, 232);
       align-items: center;
+      padding: 0.5rem 1.5rem;
     }
 
     #sort-direction-container {
@@ -714,10 +666,14 @@ export class SortFilterBar
     }
 
     #sort-by-text {
-      margin-right: 10px;
-      font-size: 1.4rem;
-      font-weight: bold;
-      white-space: nowrap;
+      text-transform: uppercase;
+    }
+
+    #bottom-shadow {
+      height: 1px;
+      width: 100%;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+      background-color: #bbb;
     }
 
     ul {
@@ -732,28 +688,12 @@ export class SortFilterBar
       padding: 0;
     }
 
-    #sort-direction-selector {
-      display: flex;
-      flex-direction: column;
-      margin-right: 5px;
-      padding: 0;
-      border: none;
-      appearance: none;
-      background: transparent;
-      cursor: pointer;
-    }
-
-    #sort-direction-selector:disabled {
-      cursor: default;
-    }
-
     .sort-button {
-      display: flex;
-      align-items: center;
       background: none;
       color: inherit;
       border: none;
       padding: 0;
+      cursor: pointer;
       outline: inherit;
       width: 12px;
       height: 12px;
@@ -764,8 +704,9 @@ export class SortFilterBar
       opacity: 1;
     }
 
-    #sort-direction-selector:disabled .sort-button {
+    .sort-button:disabled {
       opacity: 0.25;
+      cursor: default;
     }
 
     #date-sort-selector,
@@ -816,45 +757,42 @@ export class SortFilterBar
       transform: rotate(180deg);
     }
 
-    #sort-selector-container {
-      flex: 1;
+    #sort-direction-selector {
       display: flex;
-      justify-content: flex-start;
-      align-items: center;
+      flex-direction: column;
+      gap: 3px;
+      margin-right: 1rem;
     }
 
-    #desktop-sort-container,
-    #mobile-sort-container {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
+    #sort-selector-container {
+      flex: 1;
     }
 
     /*
       we move the desktop sort selector offscreen instead of display: none
       because we need to observe the width of it vs its container to determine
-      if it's wide enough to display the desktop version and if you display: none,
+      if it's wide enough to display the desktop version and if you displY: none,
       the width becomes 0
     */
-    #desktop-sort-container.hidden {
+    #desktop-sort-selector.hidden {
       position: absolute;
       top: -9999px;
       left: -9999px;
-      visibility: hidden;
     }
 
-    #mobile-sort-container.hidden {
+    #mobile-sort-selector.hidden {
       display: none;
     }
 
-    #sort-selector-backdrop {
+    #date-sort-selector-backdrop,
+    #view-sort-selector-backdrop {
       position: fixed;
       top: 0;
       left: 0;
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       z-index: 1;
-      background-color: transparent;
+      background-color: rgba(255, 255, 255, 0.5);
     }
 
     #desktop-sort-selector {
@@ -864,22 +802,30 @@ export class SortFilterBar
     #desktop-sort-selector li {
       display: flex;
       align-items: center;
-      padding-left: 5px;
-      padding-right: 5px;
     }
 
     #desktop-sort-selector li a {
-      padding: 0 5px;
       text-decoration: none;
+      text-transform: uppercase;
       font-size: 1.4rem;
       color: #333;
-      line-height: 2;
+      line-height: 2.5;
     }
 
     #desktop-sort-selector li a.selected {
       font-weight: bold;
     }
 
+    #desktop-sort-selector li::after {
+      content: '•';
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    #desktop-sort-selector li:first-child::after {
+      content: '';
+    }
+
     #desktop-sort-selector li:last-child::after {
       content: '';
     }
@@ -895,7 +841,7 @@ export class SortFilterBar
       appearance: none;
       cursor: pointer;
       -webkit-appearance: none;
-      opacity: 0.3;
+      opacity: 0.5;
     }
 
     #display-style-selector button.active {
@@ -906,37 +852,5 @@ export class SortFilterBar
       width: 24px;
       height: 24px;
     }
-
-    ia-dropdown {
-      --dropdownTextColor: white;
-      --dropdownFontSize: 1.4rem;
-      --dropdownOffsetTop: 0;
-      --dropdownBorderTopWidth: 0;
-      --dropdownBorderTopLeftRadius: 0;
-      --dropdownBorderTopRightRadius: 0;
-      --dropdownWhiteSpace: nowrap;
-      --dropdownListZIndex: 2;
-      --dropdownCaretColor: #2c2c2c;
-      --dropdownSelectedTextColor: white;
-      --dropdownSelectedBgColor: #2c2c2c;
-      --caretHeight: 9px;
-      --caretWidth: 14px;
-    }
-    ia-dropdown.selected .dropdown-label {
-      font-weight: bold;
-    }
-    ia-dropdown.open {
-      z-index: 2;
-    }
-
-    .dropdown-label {
-      display: inline-block;
-      height: 100%;
-      padding-left: 5px;
-      font-size: 1.4rem;
-      line-height: 2;
-      color: #2c2c2c;
-      white-space: nowrap;
-    }
   `;
 }