@internetarchive/collection-browser 0.0.1-alpha.13 → 0.0.1-alpha.16

package/dist/src/sort-filter-bar/sort-filter-bar.js

@@ -1,28 +1,24 @@
 import { __decorate } from "tslib";
-import { LitElement, html, css, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { LitElement, html, css, nothing, } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { SortField, SortFieldDisplayName, } from '../models';
 import './alpha-bar';
 import { sortIcon } from './img/sort-triangle';
 import { gridIcon } from './img/grid';
 import { listIcon } from './img/list';
-var SortFieldName;
-(function (SortFieldName) {
-    SortFieldName["datearchived"] = "Date Archived";
-    SortFieldName["datepublished"] = "Date Published";
-    SortFieldName["datereviewed"] = "Date Reviewed";
-    SortFieldName["dateadded"] = "Date Added";
-})(SortFieldName || (SortFieldName = {}));
 let SortFilterBar = class SortFilterBar extends LitElement {
     constructor() {
         super(...arguments);
         this.sortDirection = null;
-        this.selectedSort = 'relevance';
+        this.selectedSort = SortField.relevance;
         this.selectedTitleFilter = null;
         this.selectedCreatorFilter = null;
         this.showRelevance = true;
         this.titleSelectorVisible = false;
         this.creatorSelectorVisible = false;
         this.dateSortSelectorVisible = false;
+        this.desktopSelectorBarWidth = 0;
+        this.selectorBarContainerWidth = 0;
     }
     render() {
         return html `
@@ -35,143 +31,16 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             : nothing}
 
         <div id="sort-bar">
-          <div id="sort-selector">
-            <ul>
-              <li>
-                <div id="sort-direction-container">
-                  <button
-                    id="sort-ascending-btn"
-                    class="sort-button ${this.sortDirection === 'asc'
-            ? 'selected'
-            : ''}"
-                    @click=${() => {
-            this.sortDirection = 'asc';
-        }}
-                  >
-                    ${sortIcon}
-                  </button>
-                  <button
-                    id="sort-descending-btn"
-                    class="sort-button ${this.sortDirection === 'desc'
-            ? 'selected'
-            : ''}"
-                    @click=${() => {
-            this.sortDirection = 'desc';
-        }}
-                  >
-                    ${sortIcon}
-                  </button>
-                </div>
-              </li>
-              <li id="sort-by-text">Sort By</li>
-              ${this.showRelevance
-            ? html `
-                    <li>
-                      <a
-                        href="#"
-                        @click=${(e) => {
-                e.preventDefault();
-                this.selectedSort = 'relevance';
-            }}
-                        class=${this.selectedSort === 'relevance'
-                ? 'selected'
-                : ''}
-                      >
-                        Relevance
-                      </a>
-                    </li>
-                  `
-            : nothing}
-              <li>
-                <a
-                  href="#"
-                  @click=${(e) => {
-            e.preventDefault();
-            this.selectedSort = 'views';
-        }}
-                  class=${this.selectedSort === 'views' ? 'selected' : ''}
-                >
-                  Views
-                </a>
-              </li>
-              <li>
-                <a
-                  href="#"
-                  @click=${(e) => {
-            e.preventDefault();
-            this.titleSelectorVisible = !this.titleSelectorVisible;
-            this.selectedSort = 'title';
-        }}
-                  class=${this.selectedSort === 'title' ? 'selected' : ''}
-                >
-                  Title
-                </a>
-              </li>
-              <li>
-                <a
-                  href="#"
-                  @click=${(e) => {
-            e.preventDefault();
-            this.dateSortSelectorVisible =
-                !this.dateSortSelectorVisible;
-            this.selectedSort = 'datearchived';
-        }}
-                  class=${this.dateOptionSelected ? 'selected' : ''}
-                >
-                  ${this.dateSortField}
-                </a>
-              </li>
-              <li>
-                <a
-                  href="#"
-                  @click=${(e) => {
-            e.preventDefault();
-            this.creatorSelectorVisible = !this.creatorSelectorVisible;
-            this.selectedSort = 'creator';
-        }}
-                  class=${this.selectedSort === 'creator' ? 'selected' : ''}
-                >
-                  Creator
-                </a>
-              </li>
-            </ul>
+          <div id="sort-direction-container">
+            ${this.sortDirectionSelectorTemplate}
           </div>
 
-          <div id="display-style">
-            <ul>
-              ${this.displayMode !== 'grid'
-            ? html `<li>
-                    <label id="show-details">
-                      <input
-                        type="checkbox"
-                        @click=${this.detailSelected}
-                        ?checked=${this.displayMode === 'list-detail'}
-                      />
-                      Show Details
-                    </label>
-                  </li>`
-            : nothing}
-
-              <li>
-                <button
-                  id="grid-button"
-                  @click=${this.gridSelected}
-                  class=${this.displayMode === 'grid' ? 'active' : ''}
-                >
-                  ${gridIcon}
-                </button>
-              </li>
-              <li>
-                <button
-                  id="list-button"
-                  @click=${this.listSelected}
-                  class=${this.displayMode !== 'grid' ? 'active' : ''}
-                >
-                  ${listIcon}
-                </button>
-              </li>
-            </ul>
+          <div id="sort-selector-container">
+            ${this.mobileSortSelectorTemplate}
+            ${this.desktopSortSelectorTemplate}
           </div>
+
+          <div id="display-style-selector">${this.displayOptionTemplate}</div>
         </div>
 
         ${this.dateSortSelectorVisible ? this.dateSortSelector : nothing}
@@ -184,10 +53,6 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         if (changed.has('displayMode')) {
             this.displayModeChanged();
         }
-        if ((changed.has('sortDirection') || changed.has('selectedSort')) &&
-            this.sortDirection !== null) {
-            this.sortChanged();
-        }
         if (changed.has('selectedSort') && this.sortDirection === null) {
             this.sortDirection = 'desc';
         }
@@ -197,55 +62,231 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {
             this.creatorSelectorVisible = true;
         }
+        if (changed.has('resizeObserver')) {
+            const oldObserver = changed.get('resizeObserver');
+            if (oldObserver)
+                this.disconnectResizeObserver(oldObserver);
+            this.setupResizeObserver();
+        }
     }
-    get dateSortSelector() {
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.disconnectResizeObserver(this.resizeObserver);
+        }
+    }
+    disconnectResizeObserver(resizeObserver) {
+        resizeObserver.removeObserver({
+            target: this.sortSelectorContainer,
+            handler: this,
+        });
+        resizeObserver.removeObserver({
+            target: this.desktopSortSelector,
+            handler: this,
+        });
+    }
+    setupResizeObserver() {
+        if (!this.resizeObserver)
+            return;
+        this.resizeObserver.addObserver({
+            target: this.sortSelectorContainer,
+            handler: this,
+        });
+        this.resizeObserver.addObserver({
+            target: this.desktopSortSelector,
+            handler: this,
+        });
+    }
+    get mobileSelectorVisible() {
+        return this.selectorBarContainerWidth - 10 < this.desktopSelectorBarWidth;
+    }
+    handleResize(entry) {
+        if (entry.target === this.desktopSortSelector)
+            this.desktopSelectorBarWidth = entry.contentRect.width;
+        else if (entry.target === this.sortSelectorContainer)
+            this.selectorBarContainerWidth = entry.contentRect.width;
+    }
+    get sortDirectionSelectorTemplate() {
         return html `
-      <div id="date-sort-selector">
-        <ul>
-          <li>
-            <button
-              @click=${() => {
-            this.selectedSort = 'datepublished';
-            this.dateSortSelectorVisible = false;
-        }}
-            >
-              Date Archived
-            </button>
-          </li>
-          <li>
-            <button
-              @click=${() => {
-            this.selectedSort = 'datepublished';
-            this.dateSortSelectorVisible = false;
+      <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');
         }}
-            >
-              Date Published
-            </button>
-          </li>
-          <li>
-            <button
-              @click=${() => {
-            this.selectedSort = 'datereviewed';
-            this.dateSortSelectorVisible = false;
+        >
+          ${sortIcon}
+        </button>
+        <button
+          id="sort-descending-btn"
+          class="sort-button ${this.sortDirection === 'desc' ? 'selected' : ''}"
+          ?disabled=${this.selectedSort === 'relevance'}
+          @click=${() => {
+            this.setSortDirections('desc');
         }}
-            >
-              Date Reviewed
-            </button>
-          </li>
-          <li>
-            <button
-              @click=${() => {
-            this.selectedSort = 'dateadded';
-            this.dateSortSelectorVisible = false;
+        >
+          ${sortIcon}
+        </button>
+      </div>
+    `;
+    }
+    get desktopSortSelectorTemplate() {
+        return html `
+      <ul
+        id="desktop-sort-selector"
+        class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}
+      >
+        <li id="sort-by-text">Sort By</li>
+        <li>
+          ${this.showRelevance
+            ? this.getSortDisplayOption(SortField.relevance)
+            : nothing}
+        </li>
+        <li>${this.getSortDisplayOption(SortField.views)}</li>
+        <li>${this.getSortDisplayOption(SortField.title)}</li>
+        <li>
+          ${this.getSortDisplayOption(SortField.datearchived, {
+            additionalClickEvent: () => {
+                this.dateSortSelectorVisible = !this.dateSortSelectorVisible;
+            },
+            displayName: html `${this.dateSortField}`,
+            isSelected: () => this.dateOptionSelected,
+        })}
+        </li>
+        <li>
+          ${this.getSortDisplayOption(SortField.creator, {
+            additionalClickEvent: () => {
+                this.creatorSelectorVisible = !this.creatorSelectorVisible;
+            },
+        })}
+        </li>
+      </ul>
+    `;
+    }
+    /**
+     * This generates each of the sort option links.
+     *
+     * It manages the display value and the selected state of the option.
+     *
+     * @param sortField
+     * @param options {
+     *    additionalClickEvent?: () => void; If this is provided, it will also be called when the option is clicked.
+     *    displayName?: TemplateResult; The name to display for the option. Defaults to the sortField display name.
+     *    isSelected?: () => boolean; A function that returns true if the option is selected. Defaults to the selectedSort === sortField.
+     * }
+     * @returns
+     */
+    getSortDisplayOption(sortField, options) {
+        var _a, _b;
+        const isSelected = (_a = options === null || options === void 0 ? void 0 : options.isSelected) !== null && _a !== void 0 ? _a : (() => this.selectedSort === sortField);
+        const displayName = (_b = options === null || options === void 0 ? void 0 : options.displayName) !== null && _b !== void 0 ? _b : SortFieldDisplayName[sortField];
+        return html `
+      <a
+        href="#"
+        @click=${(e) => {
+            var _a;
+            e.preventDefault();
+            this.setSelectedSort(sortField);
+            (_a = options === null || options === void 0 ? void 0 : options.additionalClickEvent) === null || _a === void 0 ? void 0 : _a.call(options, e);
         }}
-            >
-              Date Added
-            </button>
-          </li>
+        class=${isSelected() ? 'selected' : ''}
+      >
+        ${displayName}
+      </a>
+    `;
+    }
+    get mobileSortSelectorTemplate() {
+        return html `
+      <select
+        id="mobile-sort-selector"
+        @change=${this.mobileSortChanged}
+        class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
+      >
+        ${Object.keys(SortField).map(field => html `
+            <option value="${field}" ?selected=${this.selectedSort === field}>
+              ${SortFieldDisplayName[field]}
+            </option>
+          `)}
+      </select>
+    `;
+    }
+    mobileSortChanged(e) {
+        const target = e.target;
+        this.setSelectedSort(target.value);
+    }
+    get displayOptionTemplate() {
+        return html `
+      <ul>
+        ${this.displayMode !== 'grid'
+            ? html `<li>
+              <label id="show-details">
+                <input
+                  type="checkbox"
+                  @click=${this.detailSelected}
+                  ?checked=${this.displayMode === 'list-detail'}
+                />
+                Show Details
+              </label>
+            </li>`
+            : nothing}
+
+        <li>
+          <button
+            id="grid-button"
+            @click=${this.gridSelected}
+            class=${this.displayMode === 'grid' ? 'active' : ''}
+          >
+            ${gridIcon}
+          </button>
+        </li>
+        <li>
+          <button
+            id="list-button"
+            @click=${this.listSelected}
+            class=${this.displayMode !== 'grid' ? 'active' : ''}
+          >
+            ${listIcon}
+          </button>
+        </li>
+      </ul>
+    `;
+    }
+    get dateSortSelector() {
+        return html `
+      <div id="date-sort-selector">
+        <ul>
+          <li>${this.getDateSortButton(SortField.datearchived)}</li>
+          <li>${this.getDateSortButton(SortField.datepublished)}</li>
+          <li>${this.getDateSortButton(SortField.datereviewed)}</li>
+          <li>${this.getDateSortButton(SortField.dateadded)}</li>
         </ul>
       </div>
     `;
     }
+    getDateSortButton(sortField) {
+        return html `
+      <button
+        @click=${() => {
+            this.selectDateSort(sortField);
+        }}
+      >
+        ${SortFieldDisplayName[sortField]}
+      </button>
+    `;
+    }
+    selectDateSort(sortField) {
+        this.dateSortSelectorVisible = false;
+        this.setSelectedSort(sortField);
+    }
+    setSortDirections(sortDirection) {
+        this.sortDirection = sortDirection;
+        this.emitSortChangedEvent();
+    }
+    setSelectedSort(sort) {
+        this.selectedSort = sort;
+        this.emitSortChangedEvent();
+    }
     /**
      * There are four date sort options.
      *
@@ -274,7 +315,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
      */
     get dateSortField() {
         var _a;
-        return ((_a = SortFieldName[this.selectedSort]) !== null && _a !== void 0 ? _a : 'Date Archived');
+        return (_a = SortFieldDisplayName[this.selectedSort]) !== null && _a !== void 0 ? _a : 'Date Archived';
     }
     get titleSelectorBar() {
         return html ` <alpha-bar
@@ -302,14 +343,17 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     }
     gridSelected() {
         this.displayMode = 'grid';
+        this.emitSortChangedEvent();
     }
     listSelected() {
         this.displayMode = 'list-compact';
+        this.emitSortChangedEvent();
     }
     detailSelected(e) {
         this.displayMode = e.target.checked
             ? 'list-detail'
             : 'list-compact';
+        this.emitSortChangedEvent();
     }
     displayModeChanged() {
         const event = new CustomEvent('displayModeChanged', {
@@ -317,7 +361,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         });
         this.dispatchEvent(event);
     }
-    sortChanged() {
+    emitSortChangedEvent() {
         const event = new CustomEvent('sortChanged', {
             detail: {
                 selectedSort: this.selectedSort,
@@ -340,6 +384,10 @@ SortFilterBar.styles = css `
       padding: 0.5rem 1.5rem;
     }
 
+    #sort-direction-container {
+      flex: 0;
+    }
+
     #sort-by-text {
       text-transform: uppercase;
     }
@@ -379,6 +427,11 @@ SortFilterBar.styles = css `
       opacity: 1;
     }
 
+    .sort-button:disabled {
+      opacity: 0.25;
+      cursor: default;
+    }
+
     #show-details {
       text-transform: uppercase;
       cursor: pointer;
@@ -388,43 +441,72 @@ SortFilterBar.styles = css `
       transform: rotate(180deg);
     }
 
-    #sort-direction-container {
+    #sort-direction-selector {
       display: flex;
       flex-direction: column;
       gap: 3px;
+      margin-right: 1rem;
+    }
+
+    #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 displY: none,
+      the width becomes 0
+    */
+    #desktop-sort-selector.hidden {
+      position: absolute;
+      top: -9999px;
+      left: -9999px;
+    }
+
+    #mobile-sort-selector.hidden {
+      display: none;
     }
 
-    #sort-selector li {
+    #desktop-sort-selector {
+      display: inline-flex;
+    }
+
+    #desktop-sort-selector li {
       display: flex;
       align-items: center;
     }
 
-    #sort-selector li a {
+    #desktop-sort-selector li a {
       text-decoration: none;
       text-transform: uppercase;
       font-size: 1.4rem;
       color: #333;
     }
 
-    #sort-selector li a.selected {
+    #desktop-sort-selector li a.selected {
       font-weight: bold;
     }
 
-    #sort-selector li::after {
+    #desktop-sort-selector li::after {
       content: '•';
       padding-left: 1rem;
       padding-right: 1rem;
     }
 
-    #sort-selector li:first-child::after {
+    #desktop-sort-selector li:first-child::after {
       content: '';
     }
 
-    #sort-selector li:last-child::after {
+    #desktop-sort-selector li:last-child::after {
       content: '';
     }
 
-    #display-style button {
+    #display-style-selector {
+      flex: 0;
+    }
+
+    #display-style-selector button {
       background: none;
       color: inherit;
       border: none;
@@ -434,11 +516,11 @@ SortFilterBar.styles = css `
       opacity: 0.5;
     }
 
-    #display-style button.active {
+    #display-style-selector button.active {
       opacity: 1;
     }
 
-    #display-style button svg {
+    #display-style-selector button svg {
       width: 24px;
       height: 24px;
     }
@@ -461,6 +543,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], SortFilterBar.prototype, "showRelevance", void 0);
+__decorate([
+    property({ type: Object })
+], SortFilterBar.prototype, "resizeObserver", void 0);
 __decorate([
     state()
 ], SortFilterBar.prototype, "titleSelectorVisible", void 0);
@@ -470,6 +555,18 @@ __decorate([
 __decorate([
     state()
 ], SortFilterBar.prototype, "dateSortSelectorVisible", void 0);
+__decorate([
+    state()
+], SortFilterBar.prototype, "desktopSelectorBarWidth", void 0);
+__decorate([
+    state()
+], SortFilterBar.prototype, "selectorBarContainerWidth", void 0);
+__decorate([
+    query('#desktop-sort-selector')
+], SortFilterBar.prototype, "desktopSortSelector", void 0);
+__decorate([
+    query('#sort-selector-container')
+], SortFilterBar.prototype, "sortSelectorContainer", void 0);
 SortFilterBar = __decorate([
     customElement('sort-filter-bar')
 ], SortFilterBar);