@internetarchive/collection-browser 2.19.1-alpha-webdev7818.0 → 2.20.0

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

@@ -3,7 +3,7 @@ import { LitElement, html, css, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { msg } from '@lit/localize';
 import '@internetarchive/ia-dropdown';
-import { SORT_OPTIONS, SortField, } from '../models';
+import { ALL_DATE_SORT_FIELDS, ALL_VIEWS_SORT_FIELDS, defaultSortAvailability, SORT_OPTIONS, SortField, } from '../models';
 import './alpha-bar';
 import { sortUpIcon } from './img/sort-toggle-up';
 import { sortDownIcon } from './img/sort-toggle-down';
@@ -19,6 +19,10 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         this.defaultSortDirection = null;
         /** The default sort field to use if none is set */
         this.defaultSortField = SortField.relevance;
+        /** Which view sort option to expose by default. */
+        this.defaultViewSort = SortField.weeklyview;
+        /** Which date sort option to expose by default */
+        this.defaultDateSort = SortField.date;
         /** The current sort direction (asc/desc), or null if none is set */
         this.sortDirection = null;
         /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */
@@ -27,10 +31,20 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         this.selectedTitleFilter = null;
         /** The currently selected creator letter filter, or null if none is set */
         this.selectedCreatorFilter = null;
-        /** Whether to show the Relevance sort option (default `true`) */
-        this.showRelevance = true;
-        /** Whether to show the Date Favorited sort option instead of Date Published/Archived/Reviewed (default `false`) */
-        this.showDateFavorited = false;
+        /**
+         * Map defining which sortable fields should be included on the sort bar.
+         *
+         * E.g.,
+         * ```
+         * {
+         *   [SortField.relevance]: true,
+         *   [SortField.date]: false,
+         *   [SortField.title]: true,
+         *   ...
+         * }
+         * ```
+         */
+        this.sortFieldAvailability = defaultSortAvailability;
         /** Whether to replace the default sort options with a slot for customization (default `false`) */
         this.enableSortOptionsSlot = false;
         /** Whether to suppress showing the three display mode options on the right of the bar (default `false`) */
@@ -38,11 +52,11 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         /**
          * The Views sort option that was most recently selected (or the default, if none has been selected yet)
          */
-        this.lastSelectedViewSort = SortField.weeklyview;
+        this.lastSelectedViewSort = this.defaultViewSort;
         /**
          * The Date sort option that was most recently selected (or the default, if none has been selected yet)
          */
-        this.lastSelectedDateSort = this.defaultDateSortField;
+        this.lastSelectedDateSort = this.defaultDateSort;
         /**
          * Which of the alphabet bars (title/creator) should be shown, or null if one
          * should not currently be rendered.
@@ -119,11 +133,12 @@ let SortFilterBar = class SortFilterBar extends LitElement {
                 this.lastSelectedDateSort = this.finalizedSortField;
             }
         }
-        // If we change which dropdown options are available, ensure the correct default becomes selected.
-        // Currently, Date Favorited is the only dropdown option whose presence/absence can change.
-        if (changed.has('showDateFavorited') &&
-            changed.get('showDateFavorited') !== this.showDateFavorited) {
-            this.lastSelectedDateSort = this.defaultDateSortField;
+        // If we change which dropdown options are defaulted, update the default selections
+        if (changed.has('defaultViewSort')) {
+            this.lastSelectedViewSort = this.defaultViewSort;
+        }
+        if (changed.has('defaultDateSort')) {
+            this.lastSelectedDateSort = this.defaultDateSort;
         }
     }
     updated(changed) {
@@ -265,64 +280,25 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}
       >
         <ul id="desktop-sort-selector">
-          ${this.showRelevance
-            ? html `<li>
-                ${this.getSortDisplayOption(SortField.relevance, {
-                onClick: () => {
-                    this.dropdownBackdropVisible = false;
-                    if (this.finalizedSortField !== SortField.relevance) {
-                        this.clearAlphaBarFilters();
-                        this.setSelectedSort(SortField.relevance);
-                    }
-                },
-            })}
-              </li>`
-            : nothing}
-          <li>${this.viewsDropdownTemplate}</li>
-          <li>
-            ${this.getSortDisplayOption(SortField.title, {
-            onClick: () => {
-                this.dropdownBackdropVisible = false;
-                if (this.finalizedSortField !== SortField.title) {
-                    this.alphaSelectorVisible = 'title';
-                    this.selectedCreatorFilter = null;
-                    this.setSelectedSort(SortField.title);
-                    this.emitCreatorLetterChangedEvent();
-                }
-            },
-        })}
-          </li>
-          <li>${this.dateDropdownTemplate}</li>
-          <li>
-            ${this.getSortDisplayOption(SortField.creator, {
-            onClick: () => {
-                this.dropdownBackdropVisible = false;
-                if (this.finalizedSortField !== SortField.creator) {
-                    this.alphaSelectorVisible = 'creator';
-                    this.selectedTitleFilter = null;
-                    this.setSelectedSort(SortField.creator);
-                    this.emitTitleLetterChangedEvent();
-                }
-            },
-        })}
-          </li>
+          <li>${this.relevanceSortSelectorTemplate}</li>
+          <li>${this.allViewsSortOptionsTemplate}</li>
+          <li>${this.titleSortSelectorTemplate}</li>
+          <li>${this.allDateSortOptionsTemplate}</li>
+          <li>${this.creatorSortSelectorTemplate}</li>
         </ul>
       </div>
     `;
     }
     /** The template to render all the sort options in mobile view */
     get mobileSortSelectorTemplate() {
-        const displayedOptions = Object.values(SORT_OPTIONS)
-            .filter(opt => opt.shownInSortBar)
-            .filter(opt => this.showRelevance || opt.field !== SortField.relevance)
-            .filter(opt => this.showDateFavorited || opt.field !== SortField.datefavorited);
+        const displayedOptions = Object.values(SORT_OPTIONS).filter(opt => opt.shownInSortBar && this.sortFieldAvailability[opt.field]);
         return html `
       <div
         id="mobile-sort-container"
         class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
       >
         ${this.getSortDropdown({
-            displayName: html `${SORT_OPTIONS[this.finalizedSortField].displayName}`,
+            displayName: SORT_OPTIONS[this.finalizedSortField].displayName,
             id: 'mobile-dropdown',
             selected: true,
             dropdownOptions: displayedOptions.map(opt => this.getDropdownOption(opt.field)),
@@ -337,30 +313,31 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     `;
     }
     /**
-     * This generates each of the non-dropdown sort option links.
+     * This generates each of the non-dropdown sort option buttons.
      *
      * It manages the display value and the selected state of the option.
      *
-     * @param sortField
-     * @param options {
-     *    onClick?: (e: Event) => 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.
-     *    selected?: boolean; true if the option is selected. Defaults to the selectedSort === sortField.
-     * }
-     * @returns
+     * @param sortField Which sort field the button represents
+     * @param options Additional options:
+     *   - `onSelected?: (e: Event) => void;` If this is provided, it will also be called when the option is selected.
+     *     Default is to clear any selected alphabetical filters.
      */
-    getSortDisplayOption(sortField, options) {
-        var _a, _b;
-        const isSelected = (_a = options === null || options === void 0 ? void 0 : options.selected) !== null && _a !== void 0 ? _a : this.finalizedSortField === sortField;
-        const displayName = (_b = options === null || options === void 0 ? void 0 : options.displayName) !== null && _b !== void 0 ? _b : SORT_OPTIONS[sortField].displayName;
+    getSortSelectorButton(sortField, options) {
+        var _a;
+        const isSelected = this.finalizedSortField === sortField;
+        const displayName = SORT_OPTIONS[sortField].displayName;
+        const onSelected = (_a = options === null || options === void 0 ? void 0 : options.onSelected) !== null && _a !== void 0 ? _a : (() => this.clearAlphaBarFilters());
         return html `
       <button
-        class=${isSelected ? 'selected' : nothing}
-        data-title="${displayName}"
+        class=${isSelected ? 'selected' : ''}
+        data-title=${displayName}
         @click=${(e) => {
-            var _a;
             e.preventDefault();
-            (_a = options === null || options === void 0 ? void 0 : options.onClick) === null || _a === void 0 ? void 0 : _a.call(options, e);
+            this.dropdownBackdropVisible = false;
+            if (this.finalizedSortField !== sortField) {
+                onSelected === null || onSelected === void 0 ? void 0 : onSelected(e);
+                this.setSelectedSort(sortField);
+            }
         }}
       >
         ${displayName}
@@ -382,25 +359,25 @@ let SortFilterBar = class SortFilterBar extends LitElement {
      *  on the dropdown's label
      */
     getSortDropdown(options) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         return html `
       <ia-dropdown
-        id=${(_a = options.id) !== null && _a !== void 0 ? _a : nothing}
-        class=${options.selected ? 'selected' : nothing}
+        id=${options.id}
+        class=${options.selected ? 'selected' : ''}
         displayCaret
         closeOnSelect
         includeSelectedOption
         .openViaButton=${options.selected}
         .options=${options.dropdownOptions}
-        .selectedOption=${(_b = options.selectedOption) !== null && _b !== void 0 ? _b : ''}
-        @optionSelected=${(_c = options.onOptionSelected) !== null && _c !== void 0 ? _c : nothing}
-        @click=${(_d = options.onDropdownClick) !== null && _d !== void 0 ? _d : nothing}
+        .selectedOption=${(_a = options.selectedOption) !== null && _a !== void 0 ? _a : ''}
+        @optionSelected=${(_b = options.onOptionSelected) !== null && _b !== void 0 ? _b : nothing}
+        @click=${(_c = options.onDropdownClick) !== null && _c !== void 0 ? _c : nothing}
       >
         <span
           class="dropdown-label"
           slot="dropdown-label"
-          data-title="${options.displayName.values}"
-          @click=${(_e = options.onLabelInteraction) !== null && _e !== void 0 ? _e : nothing}
+          data-title=${options.displayName}
+          @click=${(_d = options.onLabelInteraction) !== null && _d !== void 0 ? _d : nothing}
           @keydown=${options.onLabelInteraction
             ? (e) => {
                 var _a;
@@ -442,25 +419,92 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             this.lastSelectedDateSort = sortField;
         }
     }
-    /** The template to render for the views dropdown */
+    //
+    // SORT OPTION TEMPLATES
+    //
+    /**
+     * Template for the Relevance sort selector button, or `nothing` if the relevance
+     * field is not available for display.
+     */
+    get relevanceSortSelectorTemplate() {
+        if (!this.sortFieldAvailability.relevance)
+            return nothing;
+        return this.getSortSelectorButton(SortField.relevance);
+    }
+    /**
+     * Template for the Views sort selector button.
+     * This is shown instead of the views dropdown when only a single views sort field
+     * is available.
+     */
+    get viewsSortSelectorTemplate() {
+        const { availableViewsFields } = this;
+        if (availableViewsFields.length < 1)
+            return nothing;
+        return this.getSortSelectorButton(availableViewsFields[0]);
+    }
+    /**
+     * Template for the Title sort selector button, or `nothing` if the title field is
+     * not available for display.
+     */
+    get titleSortSelectorTemplate() {
+        if (!this.sortFieldAvailability.title)
+            return nothing;
+        return this.getSortSelectorButton(SortField.title, {
+            onSelected: () => {
+                this.alphaSelectorVisible = 'title';
+                this.selectedCreatorFilter = null;
+                this.emitCreatorLetterChangedEvent();
+            },
+        });
+    }
+    /**
+     * Template for the Date sort selector button.
+     * This is shown instead of the dates dropdown when only a single date sort field
+     * is available.
+     */
+    get dateSortSelectorTemplate() {
+        const { availableDateFields } = this;
+        if (availableDateFields.length < 1)
+            return nothing;
+        return this.getSortSelectorButton(availableDateFields[0]);
+    }
+    /**
+     * Template for the Creator sort selector button, or `nothing` if the creator field
+     * is not available for display.
+     */
+    get creatorSortSelectorTemplate() {
+        if (!this.sortFieldAvailability.creator)
+            return nothing;
+        return this.getSortSelectorButton(SortField.creator, {
+            onSelected: () => {
+                this.alphaSelectorVisible = 'creator';
+                this.selectedTitleFilter = null;
+                this.emitTitleLetterChangedEvent();
+            },
+        });
+    }
+    /**
+     * Template for the Views dropdown, shown when 2+ views sort fields are available.
+     */
     get viewsDropdownTemplate() {
+        const displayedOptions = ALL_VIEWS_SORT_FIELDS.filter(field => this.sortFieldAvailability[field]).map(field => this.getDropdownOption(field));
         return this.getSortDropdown({
-            displayName: html `${this.viewSortDisplayName}`,
+            displayName: this.viewSortDisplayName,
             id: 'views-dropdown',
             selected: this.viewOptionSelected,
-            dropdownOptions: [
-                this.getDropdownOption(SortField.weeklyview),
-                this.getDropdownOption(SortField.alltimeview),
-            ],
+            dropdownOptions: displayedOptions,
             selectedOption: this.viewOptionSelected ? this.finalizedSortField : '',
             onOptionSelected: this.dropdownOptionSelected,
             onDropdownClick: () => {
-                this.dateDropdown.open = false;
-                this.dropdownBackdropVisible = this.viewsDropdown.open;
-                this.viewsDropdown.classList.toggle('open', this.viewsDropdown.open);
+                if (this.dateDropdown)
+                    this.dateDropdown.open = false;
+                const viewsDropdown = this.viewsDropdown;
+                this.dropdownBackdropVisible = viewsDropdown.open;
+                viewsDropdown.classList.toggle('open', viewsDropdown.open);
             },
             onLabelInteraction: (e) => {
-                if (!this.viewsDropdown.open && !this.viewOptionSelected) {
+                var _a;
+                if (!((_a = this.viewsDropdown) === null || _a === void 0 ? void 0 : _a.open) && !this.viewOptionSelected) {
                     e.stopPropagation();
                     this.clearAlphaBarFilters();
                     this.setSelectedSort(this.lastSelectedViewSort);
@@ -468,30 +512,28 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             },
         });
     }
-    /** The template to render for the date dropdown */
+    /**
+     * Template for the Date dropdown, shown when 2+ date sort fields are available.
+     */
     get dateDropdownTemplate() {
+        const displayedOptions = ALL_DATE_SORT_FIELDS.filter(field => this.sortFieldAvailability[field]).map(field => this.getDropdownOption(field));
         return this.getSortDropdown({
-            displayName: html `${this.dateSortDisplayName}`,
+            displayName: this.dateSortDisplayName,
             id: 'date-dropdown',
             selected: this.dateOptionSelected,
-            dropdownOptions: [
-                ...(this.showDateFavorited
-                    ? [this.getDropdownOption(SortField.datefavorited)]
-                    : []),
-                this.getDropdownOption(SortField.date),
-                this.getDropdownOption(SortField.datearchived),
-                this.getDropdownOption(SortField.datereviewed),
-                this.getDropdownOption(SortField.dateadded),
-            ],
+            dropdownOptions: displayedOptions,
             selectedOption: this.dateOptionSelected ? this.finalizedSortField : '',
             onOptionSelected: this.dropdownOptionSelected,
             onDropdownClick: () => {
-                this.viewsDropdown.open = false;
-                this.dropdownBackdropVisible = this.dateDropdown.open;
-                this.dateDropdown.classList.toggle('open', this.dateDropdown.open);
+                if (this.viewsDropdown)
+                    this.viewsDropdown.open = false;
+                const dateDropdown = this.dateDropdown;
+                this.dropdownBackdropVisible = dateDropdown.open;
+                dateDropdown.classList.toggle('open', dateDropdown.open);
             },
             onLabelInteraction: (e) => {
-                if (!this.dateDropdown.open && !this.dateOptionSelected) {
+                var _a;
+                if (!((_a = this.dateDropdown) === null || _a === void 0 ? void 0 : _a.open) && !this.dateOptionSelected) {
                     e.stopPropagation();
                     this.clearAlphaBarFilters();
                     this.setSelectedSort(this.lastSelectedDateSort);
@@ -499,6 +541,36 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             },
         });
     }
+    /**
+     * Provides the appropriate template to use for Views sorting, depending on how many
+     * views sort fields are available.
+     */
+    get allViewsSortOptionsTemplate() {
+        const numViewsSortOptions = this.availableViewsFields.length;
+        switch (numViewsSortOptions) {
+            case 0:
+                return nothing;
+            case 1:
+                return this.viewsSortSelectorTemplate;
+            default:
+                return this.viewsDropdownTemplate;
+        }
+    }
+    /**
+     * Provides the appropriate template to use for Date sorting, depending on how many
+     * date sort fields are available.
+     */
+    get allDateSortOptionsTemplate() {
+        const numDateSortOptions = this.availableDateFields.length;
+        switch (numDateSortOptions) {
+            case 0:
+                return nothing;
+            case 1:
+                return this.dateSortSelectorTemplate;
+            default:
+                return this.dateDropdownTemplate;
+        }
+    }
     /** Handler for when a new mobile sort dropdown option is selected */
     mobileSortChanged(e) {
         this.dropdownBackdropVisible = false;
@@ -583,6 +655,8 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             this.mobileDropdown,
         ];
         for (const dropdown of allDropdowns) {
+            if (!dropdown)
+                continue;
             dropdown.open = false;
             dropdown.classList.remove('open');
         }
@@ -679,13 +753,6 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         ];
         return viewSortFields.includes(this.finalizedSortField);
     }
-    /**
-     * The default field for the date sort dropdown.
-     * This is Date Favorited when that option is available, or Date Published otherwise.
-     */
-    get defaultDateSortField() {
-        return this.showDateFavorited ? SortField.datefavorited : SortField.date;
-    }
     /**
      * The display name of the last selected date field
      *
@@ -708,6 +775,18 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     get viewSortDisplayName() {
         return SORT_OPTIONS[this.lastSelectedViewSort].displayName;
     }
+    /**
+     * Array of all the views sorts that should be shown
+     */
+    get availableViewsFields() {
+        return ALL_VIEWS_SORT_FIELDS.filter(field => this.sortFieldAvailability[field]);
+    }
+    /**
+     * Array of all the date sorts that should be shown
+     */
+    get availableDateFields() {
+        return ALL_DATE_SORT_FIELDS.filter(field => this.sortFieldAvailability[field]);
+    }
     get titleSelectorBar() {
         var _a;
         return html ` <alpha-bar
@@ -1009,6 +1088,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], SortFilterBar.prototype, "defaultSortField", void 0);
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "defaultViewSort", void 0);
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "defaultDateSort", void 0);
 __decorate([
     property({ type: String })
 ], SortFilterBar.prototype, "sortDirection", void 0);
@@ -1022,11 +1107,8 @@ __decorate([
     property({ type: String })
 ], SortFilterBar.prototype, "selectedCreatorFilter", void 0);
 __decorate([
-    property({ type: Boolean })
-], SortFilterBar.prototype, "showRelevance", void 0);
-__decorate([
-    property({ type: Boolean })
-], SortFilterBar.prototype, "showDateFavorited", void 0);
+    property({ type: Object })
+], SortFilterBar.prototype, "sortFieldAvailability", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SortFilterBar.prototype, "enableSortOptionsSlot", void 0);