@internetarchive/collection-browser 2.1.8 → 2.1.9-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -140,6 +140,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
140
140
  this.setupEscapeListeners();
141
141
  }
142
142
  if (changed.has('resizeObserver') || changed.has('enableSortOptionsSlot')) {
143
+ console.log('sort bar updated / resize observer change');
143
144
  const oldObserver = changed.get('resizeObserver');
144
145
  if (oldObserver)
145
146
  this.disconnectResizeObserver(oldObserver);
@@ -155,11 +156,13 @@ let SortFilterBar = class SortFilterBar extends LitElement {
155
156
  }
156
157
  }
157
158
  disconnectedCallback() {
159
+ console.log('sort bar disconnectedCallback');
158
160
  if (this.resizeObserver) {
159
161
  this.disconnectResizeObserver(this.resizeObserver);
160
162
  }
161
163
  }
162
164
  disconnectResizeObserver(resizeObserver) {
165
+ console.log('disconnecting resize observer from sort bar');
163
166
  if (this.sortSelectorContainer) {
164
167
  resizeObserver.removeObserver({
165
168
  target: this.sortSelectorContainer,
@@ -176,6 +179,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
176
179
  setupResizeObserver() {
177
180
  if (!this.resizeObserver)
178
181
  return;
182
+ console.log('setting up resize observer in sort bar');
179
183
  if (this.sortSelectorContainer) {
180
184
  this.resizeObserver.addObserver({
181
185
  target: this.sortSelectorContainer,
@@ -1 +1 @@
1
- {"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport type {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport '@internetarchive/ia-dropdown';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SortDirection } from '@internetarchive/search-service';\nimport {\n CollectionDisplayMode,\n PrefixFilterCounts,\n PrefixFilterType,\n SORT_OPTIONS,\n SortField,\n} from '../models';\nimport './alpha-bar';\n\nimport { sortUpIcon } from './img/sort-toggle-up';\nimport { sortDownIcon } from './img/sort-toggle-down';\nimport { sortDisabledIcon } from './img/sort-toggle-disabled';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\nimport { srOnlyStyle } from '../styles/sr-only';\n\ntype AlphaSelector = 'creator' | 'title';\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar\n extends LitElement\n implements SharedResizeObserverResizeHandlerInterface\n{\n /** Which display mode the tiles are being rendered with (grid/list-detail/list-compact) */\n @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n /** The default sort direction to use if none is set */\n @property({ type: String }) defaultSortDirection: SortDirection | null = null;\n\n /** The default sort field to use if none is set */\n @property({ type: String }) defaultSortField: Exclude<\n SortField,\n SortField.default\n > = SortField.relevance;\n\n /** The current sort direction (asc/desc), or null if none is set */\n @property({ type: String }) sortDirection: SortDirection | null = null;\n\n /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */\n @property({ type: String }) selectedSort: SortField = SortField.default;\n\n /** The currently selected title letter filter, or null if none is set */\n @property({ type: String }) selectedTitleFilter: string | null = null;\n\n /** The currently selected creator letter filter, or null if none is set */\n @property({ type: String }) selectedCreatorFilter: string | null = null;\n\n /** Whether to show the Relevance sort option (default `true`) */\n @property({ type: Boolean }) showRelevance: boolean = true;\n\n /** Whether to show the Date Favorited sort option instead of Date Published/Archived/Reviewed (default `false`) */\n @property({ type: Boolean }) showDateFavorited: boolean = false;\n\n /** Whether to replace the default sort options with a slot for customization (default `false`) */\n @property({ type: Boolean, reflect: true }) enableSortOptionsSlot: boolean =\n false;\n\n /** Whether to suppress showing the three display mode options on the right of the bar (default `false`) */\n @property({ type: Boolean, reflect: true })\n suppressDisplayModes: boolean = false;\n\n /** Maps of result counts for letters on the alphabet bar, for each letter filter type */\n @property({ type: Object }) prefixFilterCountMap?: Record<\n PrefixFilterType,\n PrefixFilterCounts\n >;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n /**\n * The Views sort option that was most recently selected (or the default, if none has been selected yet)\n */\n @state() private lastSelectedViewSort = SortField.weeklyview;\n\n /**\n * The Date sort option that was most recently selected (or the default, if none has been selected yet)\n */\n @state() private lastSelectedDateSort = this.defaultDateSortField;\n\n /**\n * Which of the alphabet bars (title/creator) should be shown, or null if one\n * should not currently be rendered.\n */\n @state() alphaSelectorVisible: AlphaSelector | null = null;\n\n /**\n * Whether the transparent backdrop to catch clicks outside the dropdown menu\n * should be rendered.\n */\n @state() dropdownBackdropVisible = false;\n\n /**\n * The width of the desktop view sort option container, updated upon each resize.\n * Used for dynamically determining whether to use desktop or mobile view.\n */\n @state() desktopSortContainerWidth = 0;\n\n /**\n * The width of the full sort bar, updated upon each resize.\n * Used for dynamically determining whether to use desktop or mobile view.\n */\n @state() selectorBarContainerWidth = 0;\n\n /**\n * The container for all the desktop view's sort options.\n * Used for dynamically determining whether to use desktop or mobile view.\n */\n @query('#desktop-sort-container')\n private desktopSortContainer!: HTMLUListElement;\n\n /**\n * The container for the full sort bar.\n * Used for dynamically determining whether to use desktop or mobile view.\n */\n @query('#sort-selector-container')\n private sortSelectorContainer!: HTMLDivElement;\n\n /** The dropdown component containing options for weekly and all-time views */\n @query('#views-dropdown')\n private viewsDropdown!: IaDropdown;\n\n /** The dropdown component containing the four date options */\n @query('#date-dropdown')\n private dateDropdown!: IaDropdown;\n\n /** The single, consolidated dropdown component shown in mobile view */\n @query('#mobile-dropdown')\n private mobileDropdown!: IaDropdown;\n\n render() {\n return html`\n <div id=\"container\">\n <section id=\"sort-bar\" aria-label=\"Sorting options\">\n <slot name=\"sort-options-left\"></slot>\n <div id=\"sort-options\">\n ${!this.enableSortOptionsSlot\n ? html`\n <div class=\"sort-direction-container\">\n ${this.sortDirectionSelectorTemplate}\n </div>\n <span class=\"sort-by-text\">${msg('Sort by:')}</span>\n <div id=\"sort-selector-container\">\n ${this.mobileSortSelectorTemplate}\n ${this.desktopSortSelectorTemplate}\n </div>\n `\n : html`<slot name=\"sort-options\"></slot>`}\n </div>\n <slot name=\"sort-options-right\"></slot>\n\n ${this.suppressDisplayModes\n ? nothing\n : html`<div id=\"display-style-selector\">\n ${this.displayOptionTemplate}\n </div>`}\n </section>\n\n ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}\n ${this.alphaBarTemplate}\n </div>\n `;\n }\n\n willUpdate(changed: PropertyValues) {\n if (changed.has('selectedSort') || changed.has('defaultSortField')) {\n // If the sort is changed from its default without a direction set,\n // we adopt the default sort direction for that sort type.\n if (\n this.selectedSort &&\n this.selectedSort !== SortField.default &&\n this.sortDirection === null\n ) {\n const sortOption = SORT_OPTIONS[this.finalizedSortField];\n this.sortDirection = sortOption.defaultSortDirection;\n }\n\n if (this.viewOptionSelected) {\n this.lastSelectedViewSort = this.finalizedSortField;\n } else if (this.dateOptionSelected) {\n this.lastSelectedDateSort = this.finalizedSortField;\n }\n }\n\n // If we change which dropdown options are available, ensure the correct default becomes selected.\n // Currently, Date Favorited is the only dropdown option whose presence/absence can change.\n if (\n changed.has('showDateFavorited') &&\n changed.get('showDateFavorited') !== this.showDateFavorited\n ) {\n this.lastSelectedDateSort = this.defaultDateSortField;\n }\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('displayMode')) {\n this.displayModeChanged();\n }\n\n if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n this.alphaSelectorVisible = 'title';\n }\n\n if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n this.alphaSelectorVisible = 'creator';\n }\n\n if (changed.has('dropdownBackdropVisible')) {\n this.setupEscapeListeners();\n }\n\n if (changed.has('resizeObserver') || changed.has('enableSortOptionsSlot')) {\n const oldObserver = changed.get(\n 'resizeObserver'\n ) as SharedResizeObserverInterface;\n if (oldObserver) this.disconnectResizeObserver(oldObserver);\n this.setupResizeObserver();\n }\n }\n\n private setupEscapeListeners() {\n if (this.dropdownBackdropVisible) {\n document.addEventListener(\n 'keydown',\n this.boundSortBarSelectorEscapeListener\n );\n } else {\n document.removeEventListener(\n 'keydown',\n this.boundSortBarSelectorEscapeListener\n );\n }\n }\n\n private boundSortBarSelectorEscapeListener = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.closeDropdowns();\n }\n };\n\n disconnectedCallback(): void {\n if (this.resizeObserver) {\n this.disconnectResizeObserver(this.resizeObserver);\n }\n }\n\n private disconnectResizeObserver(\n resizeObserver: SharedResizeObserverInterface\n ) {\n if (this.sortSelectorContainer) {\n resizeObserver.removeObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n }\n\n if (this.desktopSortContainer) {\n resizeObserver.removeObserver({\n target: this.desktopSortContainer,\n handler: this,\n });\n }\n }\n\n private setupResizeObserver() {\n if (!this.resizeObserver) return;\n\n if (this.sortSelectorContainer) {\n this.resizeObserver.addObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n }\n\n if (this.desktopSortContainer) {\n this.resizeObserver.addObserver({\n target: this.desktopSortContainer,\n handler: this,\n });\n }\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n if (entry.target === this.desktopSortContainer) {\n this.desktopSortContainerWidth = entry.contentRect.width;\n } else if (entry.target === this.sortSelectorContainer) {\n this.selectorBarContainerWidth = entry.contentRect.width;\n }\n }\n\n /**\n * Whether to show the mobile sort bar because there is not enough space\n * for the desktop sort bar.\n */\n private get mobileSelectorVisible() {\n return this.selectorBarContainerWidth - 10 < this.desktopSortContainerWidth;\n }\n\n /**\n * Template to render the alphabet bar, or `nothing` if it should not be rendered\n * for the current sort\n */\n private get alphaBarTemplate(): TemplateResult | typeof nothing {\n if (!['title', 'creator'].includes(this.selectedSort)) return nothing;\n\n if (this.alphaSelectorVisible === null) {\n if (this.selectedSort === 'creator') return this.creatorSelectorBar;\n if (this.selectedSort === 'title') return this.titleSelectorBar;\n } else {\n return this.alphaSelectorVisible === 'creator'\n ? this.creatorSelectorBar\n : this.titleSelectorBar;\n }\n\n return nothing;\n }\n\n /** Template to render the sort direction toggle button */\n private get sortDirectionSelectorTemplate(): TemplateResult {\n const oppositeSortDirectionReadable =\n this.sortDirection === 'asc' ? 'descending' : 'ascending';\n const srLabel = `Change to ${oppositeSortDirectionReadable} sort`;\n\n return html`\n <button\n class=\"sort-direction-selector\"\n ?disabled=${!this.canChangeSortDirection}\n @click=${this.handleSortDirectionClicked}\n >\n <span class=\"sr-only\">${srLabel}</span>\n ${this.sortDirectionIcon}\n </button>\n `;\n }\n\n /** Template to render the sort direction button's icon in the correct current state */\n private get sortDirectionIcon(): TemplateResult {\n // Show a fully disabled icon for sort options without direction support\n if (!this.canChangeSortDirection) {\n return html`<div class=\"sort-direction-icon\">${sortDisabledIcon}</div>`;\n }\n\n // For all other sorts, show the ascending/descending direction\n return html`\n <div class=\"sort-direction-icon\">\n ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}\n </div>\n `;\n }\n\n /** The template to render all the sort options in desktop view */\n private get desktopSortSelectorTemplate() {\n return html`\n <div\n id=\"desktop-sort-container\"\n class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}\n >\n <ul id=\"desktop-sort-selector\">\n ${this.showRelevance\n ? html`<li>\n ${this.getSortDisplayOption(SortField.relevance, {\n onClick: () => {\n this.dropdownBackdropVisible = false;\n if (this.finalizedSortField !== SortField.relevance) {\n this.clearAlphaBarFilters();\n this.setSelectedSort(SortField.relevance);\n }\n },\n })}\n </li>`\n : nothing}\n <li>${this.viewsDropdownTemplate}</li>\n <li>\n ${this.getSortDisplayOption(SortField.title, {\n onClick: () => {\n this.dropdownBackdropVisible = false;\n if (this.finalizedSortField !== SortField.title) {\n this.alphaSelectorVisible = 'title';\n this.selectedCreatorFilter = null;\n this.setSelectedSort(SortField.title);\n this.emitCreatorLetterChangedEvent();\n }\n },\n })}\n </li>\n <li>${this.dateDropdownTemplate}</li>\n <li>\n ${this.getSortDisplayOption(SortField.creator, {\n onClick: () => {\n this.dropdownBackdropVisible = false;\n if (this.finalizedSortField !== SortField.creator) {\n this.alphaSelectorVisible = 'creator';\n this.selectedTitleFilter = null;\n this.setSelectedSort(SortField.creator);\n this.emitTitleLetterChangedEvent();\n }\n },\n })}\n </li>\n </ul>\n </div>\n `;\n }\n\n /** The template to render all the sort options in mobile view */\n private get mobileSortSelectorTemplate() {\n const displayedOptions = Object.values(SORT_OPTIONS)\n .filter(opt => opt.shownInSortBar)\n .filter(opt => this.showRelevance || opt.field !== SortField.relevance)\n .filter(\n opt => this.showDateFavorited || opt.field !== SortField.datefavorited\n );\n\n return html`\n <div\n id=\"mobile-sort-container\"\n class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n >\n ${this.getSortDropdown({\n displayName: html`${SORT_OPTIONS[this.finalizedSortField]\n .displayName}`,\n id: 'mobile-dropdown',\n selected: true,\n dropdownOptions: displayedOptions.map(opt =>\n this.getDropdownOption(opt.field)\n ),\n selectedOption: this.finalizedSortField,\n onOptionSelected: this.mobileSortChanged,\n onDropdownClick: () => {\n this.dropdownBackdropVisible = this.mobileDropdown.open;\n this.mobileDropdown.classList.toggle(\n 'open',\n this.mobileDropdown.open\n );\n },\n })}\n </div>\n `;\n }\n\n /**\n * This generates each of the non-dropdown sort option links.\n *\n * It manages the display value and the selected state of the option.\n *\n * @param sortField\n * @param options {\n * onClick?: (e: Event) => void; If this is provided, it will also be called when the option is clicked.\n * displayName?: TemplateResult; The name to display for the option. Defaults to the sortField display name.\n * selected?: boolean; true if the option is selected. Defaults to the selectedSort === sortField.\n * }\n * @returns\n */\n private getSortDisplayOption(\n sortField: SortField,\n options?: {\n displayName?: TemplateResult;\n selected?: boolean;\n onClick?: (e: Event) => void;\n }\n ): TemplateResult {\n const isSelected =\n options?.selected ?? this.finalizedSortField === sortField;\n const displayName =\n options?.displayName ?? SORT_OPTIONS[sortField].displayName;\n return html`\n <button\n class=${isSelected ? 'selected' : nothing}\n data-title=\"${displayName}\"\n @click=${(e: Event) => {\n e.preventDefault();\n options?.onClick?.(e);\n }}\n >\n ${displayName}\n </button>\n `;\n }\n\n /**\n * Generates a dropdown component containing multiple grouped sort options.\n *\n * @param options.displayName The name to use for the dropdown's visible label\n * @param options.id The id to apply to the dropdown element\n * @param options.dropdownOptions An array of option objects used to populate the dropdown\n * @param options.selectedOption The id of the option that should be initially selected\n * @param options.selected A boolean indicating whether this dropdown should use its\n * selected appearance\n * @param options.onOptionSelected A handler for optionSelected events coming from the dropdown\n * @param options.onDropdownClick A handler for click events on the dropdown\n * @param options.onLabelInteraction A handler for click events and Enter/Space keydown events\n * on the dropdown's label\n */\n private getSortDropdown(options: {\n displayName: TemplateResult;\n id?: string;\n dropdownOptions: optionInterface[];\n selectedOption?: string;\n selected: boolean;\n onOptionSelected?: (e: CustomEvent<{ option: optionInterface }>) => void;\n onDropdownClick?: (e: PointerEvent) => void;\n onLabelInteraction?: (e: Event) => void;\n }): TemplateResult {\n return html`\n <ia-dropdown\n id=${options.id ?? nothing}\n class=${options.selected ? 'selected' : nothing}\n displayCaret\n closeOnSelect\n includeSelectedOption\n .openViaButton=${options.selected}\n .options=${options.dropdownOptions}\n .selectedOption=${options.selectedOption ?? ''}\n @optionSelected=${options.onOptionSelected ?? nothing}\n @click=${options.onDropdownClick ?? nothing}\n >\n <span\n class=\"dropdown-label\"\n slot=\"dropdown-label\"\n data-title=\"${options.displayName.values}\"\n @click=${options.onLabelInteraction ?? nothing}\n @keydown=${options.onLabelInteraction\n ? (e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n options.onLabelInteraction?.(e);\n }\n }\n : nothing}\n >\n ${options.displayName}\n </span>\n </ia-dropdown>\n `;\n }\n\n /** Generates a single dropdown option object for the given sort field */\n private getDropdownOption(sortField: SortField): optionInterface {\n return {\n id: sortField,\n selectedHandler: () => {\n this.selectDropdownSortField(sortField);\n },\n label: html`\n <span class=\"dropdown-option-label\">\n ${SORT_OPTIONS[sortField].displayName}\n </span>\n `,\n };\n }\n\n /** Handler for when any sort dropdown option is selected */\n private dropdownOptionSelected(e: CustomEvent<{ option: optionInterface }>) {\n this.dropdownBackdropVisible = false;\n this.clearAlphaBarFilters();\n\n const sortField = e.detail.option.id as SortField;\n this.setSelectedSort(sortField);\n if (this.viewOptionSelected) {\n this.lastSelectedViewSort = sortField;\n } else if (this.dateOptionSelected) {\n this.lastSelectedDateSort = sortField;\n }\n }\n\n /** The template to render for the views dropdown */\n private get viewsDropdownTemplate(): TemplateResult {\n return this.getSortDropdown({\n displayName: html`${this.viewSortDisplayName}`,\n id: 'views-dropdown',\n selected: this.viewOptionSelected,\n dropdownOptions: [\n this.getDropdownOption(SortField.weeklyview),\n this.getDropdownOption(SortField.alltimeview),\n ],\n selectedOption: this.viewOptionSelected ? this.finalizedSortField : '',\n onOptionSelected: this.dropdownOptionSelected,\n onDropdownClick: () => {\n this.dateDropdown.open = false;\n this.dropdownBackdropVisible = this.viewsDropdown.open;\n this.viewsDropdown.classList.toggle('open', this.viewsDropdown.open);\n },\n onLabelInteraction: (e: Event) => {\n if (!this.viewsDropdown.open && !this.viewOptionSelected) {\n e.stopPropagation();\n this.clearAlphaBarFilters();\n this.setSelectedSort(this.lastSelectedViewSort);\n }\n },\n });\n }\n\n /** The template to render for the date dropdown */\n private get dateDropdownTemplate(): TemplateResult {\n return this.getSortDropdown({\n displayName: html`${this.dateSortDisplayName}`,\n id: 'date-dropdown',\n selected: this.dateOptionSelected,\n dropdownOptions: [\n ...(this.showDateFavorited\n ? [this.getDropdownOption(SortField.datefavorited)]\n : []),\n this.getDropdownOption(SortField.date),\n this.getDropdownOption(SortField.datearchived),\n this.getDropdownOption(SortField.datereviewed),\n this.getDropdownOption(SortField.dateadded),\n ],\n selectedOption: this.dateOptionSelected ? this.finalizedSortField : '',\n onOptionSelected: this.dropdownOptionSelected,\n onDropdownClick: () => {\n this.viewsDropdown.open = false;\n this.dropdownBackdropVisible = this.dateDropdown.open;\n this.dateDropdown.classList.toggle('open', this.dateDropdown.open);\n },\n onLabelInteraction: (e: Event) => {\n if (!this.dateDropdown.open && !this.dateOptionSelected) {\n e.stopPropagation();\n this.clearAlphaBarFilters();\n this.setSelectedSort(this.lastSelectedDateSort);\n }\n },\n });\n }\n\n /** Handler for when a new mobile sort dropdown option is selected */\n private mobileSortChanged(e: CustomEvent<{ option: optionInterface }>) {\n this.dropdownBackdropVisible = false;\n\n const sortField = e.detail.option.id as SortField;\n this.setSelectedSort(sortField);\n\n this.alphaSelectorVisible = null;\n if (sortField !== 'title' && this.selectedTitleFilter) {\n this.selectedTitleFilter = null;\n this.emitTitleLetterChangedEvent();\n }\n if (sortField !== 'creator' && this.selectedCreatorFilter) {\n this.selectedCreatorFilter = null;\n this.emitCreatorLetterChangedEvent();\n }\n }\n\n /** Template for rendering the three display mode options */\n private get displayOptionTemplate() {\n return html`\n <ul>\n <li>\n <button\n id=\"grid-button\"\n @click=${() => {\n this.displayMode = 'grid';\n }}\n class=${this.displayMode === 'grid' ? 'active' : ''}\n title=\"Tile view\"\n >\n ${tileIcon}\n </button>\n </li>\n <li>\n <button\n id=\"list-detail-button\"\n @click=${() => {\n this.displayMode = 'list-detail';\n }}\n class=${this.displayMode === 'list-detail' ? 'active' : ''}\n title=\"List view\"\n >\n ${listIcon}\n </button>\n </li>\n <li>\n <button\n id=\"list-compact-button\"\n @click=${() => {\n this.displayMode = 'list-compact';\n }}\n class=${this.displayMode === 'list-compact' ? 'active' : ''}\n title=\"Compact list view\"\n >\n ${compactIcon}\n </button>\n </li>\n </ul>\n `;\n }\n\n /**\n * Template for rendering the transparent backdrop to capture clicks outside the\n * dropdown menu while it is open.\n */\n private get dropdownBackdrop() {\n return html`\n <div\n id=\"sort-selector-backdrop\"\n @keyup=${this.closeDropdowns}\n @click=${this.closeDropdowns}\n ></div>\n `;\n }\n\n /** Closes all of the sorting dropdown components' menus */\n private closeDropdowns() {\n this.dropdownBackdropVisible = false;\n const allDropdowns = [\n this.viewsDropdown,\n this.dateDropdown,\n this.mobileDropdown,\n ];\n for (const dropdown of allDropdowns) {\n dropdown.open = false;\n dropdown.classList.remove('open');\n }\n }\n\n private selectDropdownSortField(sortField: SortField) {\n // When a dropdown sort option is selected, we additionally need to clear the backdrop\n this.dropdownBackdropVisible = false;\n this.setSelectedSort(sortField);\n }\n\n private clearAlphaBarFilters() {\n this.alphaSelectorVisible = null;\n this.selectedTitleFilter = null;\n this.selectedCreatorFilter = null;\n this.emitTitleLetterChangedEvent();\n this.emitCreatorLetterChangedEvent();\n }\n\n private setSortDirection(sortDirection: SortDirection) {\n this.sortDirection = sortDirection;\n this.emitSortChangedEvent();\n }\n\n /** Toggles the current sort direction between 'asc' and 'desc' */\n private toggleSortDirection() {\n this.setSortDirection(\n this.finalizedSortDirection === 'desc' ? 'asc' : 'desc'\n );\n }\n\n private handleSortDirectionClicked(): void {\n if (\n !this.sortDirection &&\n this.defaultSortField &&\n this.defaultSortDirection\n ) {\n // When the sort direction is merely defaulted (not set by the user), clicking\n // the toggled button should \"promote\" the default sort to an explicitly-set one\n // and then toggle it as usual.\n this.selectedSort = this.defaultSortField;\n this.sortDirection = this.defaultSortDirection;\n }\n\n this.toggleSortDirection();\n }\n\n private setSelectedSort(sort: SortField) {\n this.selectedSort = sort;\n // Apply this field's default sort direction\n const sortOption = SORT_OPTIONS[sort];\n this.sortDirection = sortOption.defaultSortDirection;\n this.emitSortChangedEvent();\n }\n\n /** The current sort field, or the default one if no explicit sort is set */\n private get finalizedSortField(): SortField {\n return this.selectedSort === SortField.default\n ? this.defaultSortField\n : this.selectedSort;\n }\n\n /** The current sort direction, or the default one if no explicit direction is set */\n private get finalizedSortDirection(): SortDirection | null {\n return this.sortDirection === null\n ? this.defaultSortDirection\n : this.sortDirection;\n }\n\n /** Whether the sort direction button should be enabled for the current sort */\n private get canChangeSortDirection(): boolean {\n return SORT_OPTIONS[this.finalizedSortField].canSetDirection;\n }\n\n /**\n * There are four date sort options.\n *\n * This checks to see if the current sort is one of them.\n *\n * @readonly\n * @private\n * @type {boolean}\n * @memberof SortFilterBar\n */\n private get dateOptionSelected(): boolean {\n const dateSortFields: SortField[] = [\n SortField.datefavorited,\n SortField.datearchived,\n SortField.date,\n SortField.datereviewed,\n SortField.dateadded,\n ];\n return dateSortFields.includes(this.finalizedSortField);\n }\n\n /**\n * There are two view sort options.\n *\n * This checks to see if the current sort is one of them.\n *\n * @readonly\n * @private\n * @type {boolean}\n * @memberof SortFilterBar\n */\n private get viewOptionSelected(): boolean {\n const viewSortFields: SortField[] = [\n SortField.alltimeview,\n SortField.weeklyview,\n ];\n return viewSortFields.includes(this.finalizedSortField);\n }\n\n /**\n * The default field for the date sort dropdown.\n * This is Date Favorited when that option is available, or Date Published otherwise.\n */\n private get defaultDateSortField(): SortField {\n return this.showDateFavorited ? SortField.datefavorited : SortField.date;\n }\n\n /**\n * The display name of the last selected date field\n *\n * @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n */\n private get dateSortDisplayName(): string {\n return SORT_OPTIONS[this.lastSelectedDateSort].displayName;\n }\n\n /**\n * The display name of the last selected view field\n *\n * @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n */\n private get viewSortDisplayName(): string {\n return SORT_OPTIONS[this.lastSelectedViewSort].displayName;\n }\n\n private get titleSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedTitleFilter}\n .letterCounts=${this.prefixFilterCountMap?.title}\n ariaLandmarkLabel=\"Filter by title letter\"\n @letterChanged=${this.titleLetterChanged}\n ></alpha-bar>`;\n }\n\n private get creatorSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedCreatorFilter}\n .letterCounts=${this.prefixFilterCountMap?.creator}\n ariaLandmarkLabel=\"Filter by creator letter\"\n @letterChanged=${this.creatorLetterChanged}\n ></alpha-bar>`;\n }\n\n private titleLetterChanged(\n e: CustomEvent<{ selectedLetter: string | undefined }>\n ) {\n this.selectedTitleFilter = e.detail.selectedLetter ?? null;\n this.emitTitleLetterChangedEvent();\n }\n\n private creatorLetterChanged(\n e: CustomEvent<{ selectedLetter: string | undefined }>\n ) {\n this.selectedCreatorFilter = e.detail.selectedLetter ?? null;\n this.emitCreatorLetterChangedEvent();\n }\n\n private emitTitleLetterChangedEvent() {\n const event = new CustomEvent<{ selectedLetter: string | null }>(\n 'titleLetterChanged',\n {\n detail: { selectedLetter: this.selectedTitleFilter },\n }\n );\n this.dispatchEvent(event);\n }\n\n private emitCreatorLetterChangedEvent() {\n const event = new CustomEvent<{ selectedLetter: string | null }>(\n 'creatorLetterChanged',\n {\n detail: { selectedLetter: this.selectedCreatorFilter },\n }\n );\n this.dispatchEvent(event);\n }\n\n private displayModeChanged() {\n const event = new CustomEvent<{\n displayMode?: CollectionDisplayMode;\n }>('displayModeChanged', {\n detail: { displayMode: this.displayMode },\n });\n this.dispatchEvent(event);\n }\n\n private emitSortChangedEvent() {\n const event = new CustomEvent<{\n selectedSort: SortField;\n sortDirection: SortDirection | null;\n }>('sortChanged', {\n detail: {\n selectedSort: this.selectedSort,\n sortDirection: this.sortDirection,\n },\n });\n this.dispatchEvent(event);\n }\n\n static get styles() {\n return [\n srOnlyStyle,\n css`\n #container {\n position: relative;\n }\n\n #sort-bar {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n border-bottom: 1px solid #2c2c2c;\n font-size: 1.4rem;\n }\n\n #sort-options {\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n\n ul {\n list-style: none;\n display: flex;\n align-items: center;\n margin: 0;\n padding: 0;\n }\n\n li {\n padding: 0;\n }\n\n .sort-by-text {\n margin-right: 5px;\n font-weight: bold;\n white-space: nowrap;\n }\n\n .sort-direction-container {\n display: flex;\n align-self: stretch;\n flex: 0;\n margin: 0 5px;\n }\n\n .sort-direction-selector {\n padding: 0;\n border: none;\n appearance: none;\n background: transparent;\n cursor: pointer;\n }\n\n .sort-direction-selector:disabled {\n cursor: default;\n }\n\n .sort-direction-icon {\n display: flex;\n align-items: center;\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n outline: inherit;\n width: 14px;\n height: 14px;\n }\n\n .sort-direction-icon > svg {\n flex: 1;\n }\n\n #date-sort-selector,\n #view-sort-selector {\n position: absolute;\n left: 150px;\n top: 45px;\n\n z-index: 1;\n padding: 1rem;\n background-color: white;\n border-radius: 2.5rem;\n border: 1px solid #404142;\n }\n\n #sort-selector-container {\n flex: 1;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n #desktop-sort-container,\n #mobile-sort-container {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n /*\n we move the desktop sort selector offscreen instead of display: none\n because we need to observe the width of it vs its container to determine\n if it's wide enough to display the desktop version and if you display: none,\n the width becomes 0\n */\n #desktop-sort-container.hidden {\n position: absolute;\n top: -9999px;\n left: -9999px;\n visibility: hidden;\n }\n\n #mobile-sort-container.hidden {\n display: none;\n }\n\n #sort-selector-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 1;\n background-color: transparent;\n }\n\n #desktop-sort-selector {\n display: inline-flex;\n }\n\n #desktop-sort-selector li {\n display: flex;\n align-items: center;\n padding-left: 5px;\n padding-right: 5px;\n }\n\n #desktop-sort-selector li a {\n padding: 0 5px;\n text-decoration: none;\n color: #333;\n line-height: 2;\n }\n\n #desktop-sort-selector li button {\n padding: 0px 5px;\n border: none;\n background: none;\n font-family: inherit;\n font-size: inherit;\n color: #333;\n line-height: 2;\n cursor: pointer;\n appearance: none;\n }\n\n #desktop-sort-selector li button.selected {\n font-weight: bold;\n }\n\n /**\n * Fix to not shift the sort-bar options when get selected\n */\n #desktop-sort-selector li button::before,\n #desktop-sort-selector .dropdown-label::before {\n display: block;\n content: attr(data-title);\n font-weight: bold;\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n\n #display-style-selector {\n flex: 0;\n }\n\n #display-style-selector button {\n background: none;\n color: inherit;\n border: none;\n appearance: none;\n cursor: pointer;\n -webkit-appearance: none;\n fill: #bbbbbb;\n }\n\n #display-style-selector button.active {\n fill: var(--ia-theme-primary-text-color, #2c2c2c);\n }\n\n #display-style-selector button svg {\n width: 24px;\n height: 24px;\n }\n\n ia-dropdown {\n --dropdownTextColor: white;\n --dropdownOffsetTop: 0;\n --dropdownBorderTopWidth: 0;\n --dropdownBorderTopLeftRadius: 0;\n --dropdownBorderTopRightRadius: 0;\n --dropdownWhiteSpace: nowrap;\n --dropdownListZIndex: 2;\n --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n --dropdownSelectedTextColor: white;\n --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n --caretHeight: 9px;\n --caretWidth: 12px;\n --caretPadding: 0 5px 0 0;\n }\n ia-dropdown.selected .dropdown-label {\n font-weight: bold;\n }\n ia-dropdown.open {\n z-index: 2;\n }\n\n .dropdown-label {\n display: inline-block;\n height: 100%;\n padding-left: 5px;\n font-size: 1.4rem;\n font-family: var(--ia-theme-base-font-family);\n line-height: 2;\n color: var(--ia-theme-primary-text-color, #2c2c2c);\n white-space: nowrap;\n user-select: none;\n }\n `,\n ];\n }\n}\n"]}
1
+ {"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport type {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport '@internetarchive/ia-dropdown';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SortDirection } from '@internetarchive/search-service';\nimport {\n CollectionDisplayMode,\n PrefixFilterCounts,\n PrefixFilterType,\n SORT_OPTIONS,\n SortField,\n} from '../models';\nimport './alpha-bar';\n\nimport { sortUpIcon } from './img/sort-toggle-up';\nimport { sortDownIcon } from './img/sort-toggle-down';\nimport { sortDisabledIcon } from './img/sort-toggle-disabled';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\nimport { srOnlyStyle } from '../styles/sr-only';\n\ntype AlphaSelector = 'creator' | 'title';\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar\n extends LitElement\n implements SharedResizeObserverResizeHandlerInterface\n{\n /** Which display mode the tiles are being rendered with (grid/list-detail/list-compact) */\n @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n /** The default sort direction to use if none is set */\n @property({ type: String }) defaultSortDirection: SortDirection | null = null;\n\n /** The default sort field to use if none is set */\n @property({ type: String }) defaultSortField: Exclude<\n SortField,\n SortField.default\n > = SortField.relevance;\n\n /** The current sort direction (asc/desc), or null if none is set */\n @property({ type: String }) sortDirection: SortDirection | null = null;\n\n /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */\n @property({ type: String }) selectedSort: SortField = SortField.default;\n\n /** The currently selected title letter filter, or null if none is set */\n @property({ type: String }) selectedTitleFilter: string | null = null;\n\n /** The currently selected creator letter filter, or null if none is set */\n @property({ type: String }) selectedCreatorFilter: string | null = null;\n\n /** Whether to show the Relevance sort option (default `true`) */\n @property({ type: Boolean }) showRelevance: boolean = true;\n\n /** Whether to show the Date Favorited sort option instead of Date Published/Archived/Reviewed (default `false`) */\n @property({ type: Boolean }) showDateFavorited: boolean = false;\n\n /** Whether to replace the default sort options with a slot for customization (default `false`) */\n @property({ type: Boolean, reflect: true }) enableSortOptionsSlot: boolean =\n false;\n\n /** Whether to suppress showing the three display mode options on the right of the bar (default `false`) */\n @property({ type: Boolean, reflect: true })\n suppressDisplayModes: boolean = false;\n\n /** Maps of result counts for letters on the alphabet bar, for each letter filter type */\n @property({ type: Object }) prefixFilterCountMap?: Record<\n PrefixFilterType,\n PrefixFilterCounts\n >;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n /**\n * The Views sort option that was most recently selected (or the default, if none has been selected yet)\n */\n @state() private lastSelectedViewSort = SortField.weeklyview;\n\n /**\n * The Date sort option that was most recently selected (or the default, if none has been selected yet)\n */\n @state() private lastSelectedDateSort = this.defaultDateSortField;\n\n /**\n * Which of the alphabet bars (title/creator) should be shown, or null if one\n * should not currently be rendered.\n */\n @state() alphaSelectorVisible: AlphaSelector | null = null;\n\n /**\n * Whether the transparent backdrop to catch clicks outside the dropdown menu\n * should be rendered.\n */\n @state() dropdownBackdropVisible = false;\n\n /**\n * The width of the desktop view sort option container, updated upon each resize.\n * Used for dynamically determining whether to use desktop or mobile view.\n */\n @state() desktopSortContainerWidth = 0;\n\n /**\n * The width of the full sort bar, updated upon each resize.\n * Used for dynamically determining whether to use desktop or mobile view.\n */\n @state() selectorBarContainerWidth = 0;\n\n /**\n * The container for all the desktop view's sort options.\n * Used for dynamically determining whether to use desktop or mobile view.\n */\n @query('#desktop-sort-container')\n private desktopSortContainer!: HTMLUListElement;\n\n /**\n * The container for the full sort bar.\n * Used for dynamically determining whether to use desktop or mobile view.\n */\n @query('#sort-selector-container')\n private sortSelectorContainer!: HTMLDivElement;\n\n /** The dropdown component containing options for weekly and all-time views */\n @query('#views-dropdown')\n private viewsDropdown!: IaDropdown;\n\n /** The dropdown component containing the four date options */\n @query('#date-dropdown')\n private dateDropdown!: IaDropdown;\n\n /** The single, consolidated dropdown component shown in mobile view */\n @query('#mobile-dropdown')\n private mobileDropdown!: IaDropdown;\n\n render() {\n return html`\n <div id=\"container\">\n <section id=\"sort-bar\" aria-label=\"Sorting options\">\n <slot name=\"sort-options-left\"></slot>\n <div id=\"sort-options\">\n ${!this.enableSortOptionsSlot\n ? html`\n <div class=\"sort-direction-container\">\n ${this.sortDirectionSelectorTemplate}\n </div>\n <span class=\"sort-by-text\">${msg('Sort by:')}</span>\n <div id=\"sort-selector-container\">\n ${this.mobileSortSelectorTemplate}\n ${this.desktopSortSelectorTemplate}\n </div>\n `\n : html`<slot name=\"sort-options\"></slot>`}\n </div>\n <slot name=\"sort-options-right\"></slot>\n\n ${this.suppressDisplayModes\n ? nothing\n : html`<div id=\"display-style-selector\">\n ${this.displayOptionTemplate}\n </div>`}\n </section>\n\n ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}\n ${this.alphaBarTemplate}\n </div>\n `;\n }\n\n willUpdate(changed: PropertyValues) {\n if (changed.has('selectedSort') || changed.has('defaultSortField')) {\n // If the sort is changed from its default without a direction set,\n // we adopt the default sort direction for that sort type.\n if (\n this.selectedSort &&\n this.selectedSort !== SortField.default &&\n this.sortDirection === null\n ) {\n const sortOption = SORT_OPTIONS[this.finalizedSortField];\n this.sortDirection = sortOption.defaultSortDirection;\n }\n\n if (this.viewOptionSelected) {\n this.lastSelectedViewSort = this.finalizedSortField;\n } else if (this.dateOptionSelected) {\n this.lastSelectedDateSort = this.finalizedSortField;\n }\n }\n\n // If we change which dropdown options are available, ensure the correct default becomes selected.\n // Currently, Date Favorited is the only dropdown option whose presence/absence can change.\n if (\n changed.has('showDateFavorited') &&\n changed.get('showDateFavorited') !== this.showDateFavorited\n ) {\n this.lastSelectedDateSort = this.defaultDateSortField;\n }\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('displayMode')) {\n this.displayModeChanged();\n }\n\n if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n this.alphaSelectorVisible = 'title';\n }\n\n if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n this.alphaSelectorVisible = 'creator';\n }\n\n if (changed.has('dropdownBackdropVisible')) {\n this.setupEscapeListeners();\n }\n\n if (changed.has('resizeObserver') || changed.has('enableSortOptionsSlot')) {\n console.log('sort bar updated / resize observer change');\n const oldObserver = changed.get(\n 'resizeObserver'\n ) as SharedResizeObserverInterface;\n if (oldObserver) this.disconnectResizeObserver(oldObserver);\n this.setupResizeObserver();\n }\n }\n\n private setupEscapeListeners() {\n if (this.dropdownBackdropVisible) {\n document.addEventListener(\n 'keydown',\n this.boundSortBarSelectorEscapeListener\n );\n } else {\n document.removeEventListener(\n 'keydown',\n this.boundSortBarSelectorEscapeListener\n );\n }\n }\n\n private boundSortBarSelectorEscapeListener = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.closeDropdowns();\n }\n };\n\n disconnectedCallback(): void {\n console.log('sort bar disconnectedCallback');\n if (this.resizeObserver) {\n this.disconnectResizeObserver(this.resizeObserver);\n }\n }\n\n private disconnectResizeObserver(\n resizeObserver: SharedResizeObserverInterface\n ) {\n console.log('disconnecting resize observer from sort bar');\n if (this.sortSelectorContainer) {\n resizeObserver.removeObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n }\n\n if (this.desktopSortContainer) {\n resizeObserver.removeObserver({\n target: this.desktopSortContainer,\n handler: this,\n });\n }\n }\n\n private setupResizeObserver() {\n if (!this.resizeObserver) return;\n console.log('setting up resize observer in sort bar');\n\n if (this.sortSelectorContainer) {\n this.resizeObserver.addObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n }\n\n if (this.desktopSortContainer) {\n this.resizeObserver.addObserver({\n target: this.desktopSortContainer,\n handler: this,\n });\n }\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n if (entry.target === this.desktopSortContainer) {\n this.desktopSortContainerWidth = entry.contentRect.width;\n } else if (entry.target === this.sortSelectorContainer) {\n this.selectorBarContainerWidth = entry.contentRect.width;\n }\n }\n\n /**\n * Whether to show the mobile sort bar because there is not enough space\n * for the desktop sort bar.\n */\n private get mobileSelectorVisible() {\n return this.selectorBarContainerWidth - 10 < this.desktopSortContainerWidth;\n }\n\n /**\n * Template to render the alphabet bar, or `nothing` if it should not be rendered\n * for the current sort\n */\n private get alphaBarTemplate(): TemplateResult | typeof nothing {\n if (!['title', 'creator'].includes(this.selectedSort)) return nothing;\n\n if (this.alphaSelectorVisible === null) {\n if (this.selectedSort === 'creator') return this.creatorSelectorBar;\n if (this.selectedSort === 'title') return this.titleSelectorBar;\n } else {\n return this.alphaSelectorVisible === 'creator'\n ? this.creatorSelectorBar\n : this.titleSelectorBar;\n }\n\n return nothing;\n }\n\n /** Template to render the sort direction toggle button */\n private get sortDirectionSelectorTemplate(): TemplateResult {\n const oppositeSortDirectionReadable =\n this.sortDirection === 'asc' ? 'descending' : 'ascending';\n const srLabel = `Change to ${oppositeSortDirectionReadable} sort`;\n\n return html`\n <button\n class=\"sort-direction-selector\"\n ?disabled=${!this.canChangeSortDirection}\n @click=${this.handleSortDirectionClicked}\n >\n <span class=\"sr-only\">${srLabel}</span>\n ${this.sortDirectionIcon}\n </button>\n `;\n }\n\n /** Template to render the sort direction button's icon in the correct current state */\n private get sortDirectionIcon(): TemplateResult {\n // Show a fully disabled icon for sort options without direction support\n if (!this.canChangeSortDirection) {\n return html`<div class=\"sort-direction-icon\">${sortDisabledIcon}</div>`;\n }\n\n // For all other sorts, show the ascending/descending direction\n return html`\n <div class=\"sort-direction-icon\">\n ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}\n </div>\n `;\n }\n\n /** The template to render all the sort options in desktop view */\n private get desktopSortSelectorTemplate() {\n return html`\n <div\n id=\"desktop-sort-container\"\n class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}\n >\n <ul id=\"desktop-sort-selector\">\n ${this.showRelevance\n ? html`<li>\n ${this.getSortDisplayOption(SortField.relevance, {\n onClick: () => {\n this.dropdownBackdropVisible = false;\n if (this.finalizedSortField !== SortField.relevance) {\n this.clearAlphaBarFilters();\n this.setSelectedSort(SortField.relevance);\n }\n },\n })}\n </li>`\n : nothing}\n <li>${this.viewsDropdownTemplate}</li>\n <li>\n ${this.getSortDisplayOption(SortField.title, {\n onClick: () => {\n this.dropdownBackdropVisible = false;\n if (this.finalizedSortField !== SortField.title) {\n this.alphaSelectorVisible = 'title';\n this.selectedCreatorFilter = null;\n this.setSelectedSort(SortField.title);\n this.emitCreatorLetterChangedEvent();\n }\n },\n })}\n </li>\n <li>${this.dateDropdownTemplate}</li>\n <li>\n ${this.getSortDisplayOption(SortField.creator, {\n onClick: () => {\n this.dropdownBackdropVisible = false;\n if (this.finalizedSortField !== SortField.creator) {\n this.alphaSelectorVisible = 'creator';\n this.selectedTitleFilter = null;\n this.setSelectedSort(SortField.creator);\n this.emitTitleLetterChangedEvent();\n }\n },\n })}\n </li>\n </ul>\n </div>\n `;\n }\n\n /** The template to render all the sort options in mobile view */\n private get mobileSortSelectorTemplate() {\n const displayedOptions = Object.values(SORT_OPTIONS)\n .filter(opt => opt.shownInSortBar)\n .filter(opt => this.showRelevance || opt.field !== SortField.relevance)\n .filter(\n opt => this.showDateFavorited || opt.field !== SortField.datefavorited\n );\n\n return html`\n <div\n id=\"mobile-sort-container\"\n class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n >\n ${this.getSortDropdown({\n displayName: html`${SORT_OPTIONS[this.finalizedSortField]\n .displayName}`,\n id: 'mobile-dropdown',\n selected: true,\n dropdownOptions: displayedOptions.map(opt =>\n this.getDropdownOption(opt.field)\n ),\n selectedOption: this.finalizedSortField,\n onOptionSelected: this.mobileSortChanged,\n onDropdownClick: () => {\n this.dropdownBackdropVisible = this.mobileDropdown.open;\n this.mobileDropdown.classList.toggle(\n 'open',\n this.mobileDropdown.open\n );\n },\n })}\n </div>\n `;\n }\n\n /**\n * This generates each of the non-dropdown sort option links.\n *\n * It manages the display value and the selected state of the option.\n *\n * @param sortField\n * @param options {\n * onClick?: (e: Event) => void; If this is provided, it will also be called when the option is clicked.\n * displayName?: TemplateResult; The name to display for the option. Defaults to the sortField display name.\n * selected?: boolean; true if the option is selected. Defaults to the selectedSort === sortField.\n * }\n * @returns\n */\n private getSortDisplayOption(\n sortField: SortField,\n options?: {\n displayName?: TemplateResult;\n selected?: boolean;\n onClick?: (e: Event) => void;\n }\n ): TemplateResult {\n const isSelected =\n options?.selected ?? this.finalizedSortField === sortField;\n const displayName =\n options?.displayName ?? SORT_OPTIONS[sortField].displayName;\n return html`\n <button\n class=${isSelected ? 'selected' : nothing}\n data-title=\"${displayName}\"\n @click=${(e: Event) => {\n e.preventDefault();\n options?.onClick?.(e);\n }}\n >\n ${displayName}\n </button>\n `;\n }\n\n /**\n * Generates a dropdown component containing multiple grouped sort options.\n *\n * @param options.displayName The name to use for the dropdown's visible label\n * @param options.id The id to apply to the dropdown element\n * @param options.dropdownOptions An array of option objects used to populate the dropdown\n * @param options.selectedOption The id of the option that should be initially selected\n * @param options.selected A boolean indicating whether this dropdown should use its\n * selected appearance\n * @param options.onOptionSelected A handler for optionSelected events coming from the dropdown\n * @param options.onDropdownClick A handler for click events on the dropdown\n * @param options.onLabelInteraction A handler for click events and Enter/Space keydown events\n * on the dropdown's label\n */\n private getSortDropdown(options: {\n displayName: TemplateResult;\n id?: string;\n dropdownOptions: optionInterface[];\n selectedOption?: string;\n selected: boolean;\n onOptionSelected?: (e: CustomEvent<{ option: optionInterface }>) => void;\n onDropdownClick?: (e: PointerEvent) => void;\n onLabelInteraction?: (e: Event) => void;\n }): TemplateResult {\n return html`\n <ia-dropdown\n id=${options.id ?? nothing}\n class=${options.selected ? 'selected' : nothing}\n displayCaret\n closeOnSelect\n includeSelectedOption\n .openViaButton=${options.selected}\n .options=${options.dropdownOptions}\n .selectedOption=${options.selectedOption ?? ''}\n @optionSelected=${options.onOptionSelected ?? nothing}\n @click=${options.onDropdownClick ?? nothing}\n >\n <span\n class=\"dropdown-label\"\n slot=\"dropdown-label\"\n data-title=\"${options.displayName.values}\"\n @click=${options.onLabelInteraction ?? nothing}\n @keydown=${options.onLabelInteraction\n ? (e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n options.onLabelInteraction?.(e);\n }\n }\n : nothing}\n >\n ${options.displayName}\n </span>\n </ia-dropdown>\n `;\n }\n\n /** Generates a single dropdown option object for the given sort field */\n private getDropdownOption(sortField: SortField): optionInterface {\n return {\n id: sortField,\n selectedHandler: () => {\n this.selectDropdownSortField(sortField);\n },\n label: html`\n <span class=\"dropdown-option-label\">\n ${SORT_OPTIONS[sortField].displayName}\n </span>\n `,\n };\n }\n\n /** Handler for when any sort dropdown option is selected */\n private dropdownOptionSelected(e: CustomEvent<{ option: optionInterface }>) {\n this.dropdownBackdropVisible = false;\n this.clearAlphaBarFilters();\n\n const sortField = e.detail.option.id as SortField;\n this.setSelectedSort(sortField);\n if (this.viewOptionSelected) {\n this.lastSelectedViewSort = sortField;\n } else if (this.dateOptionSelected) {\n this.lastSelectedDateSort = sortField;\n }\n }\n\n /** The template to render for the views dropdown */\n private get viewsDropdownTemplate(): TemplateResult {\n return this.getSortDropdown({\n displayName: html`${this.viewSortDisplayName}`,\n id: 'views-dropdown',\n selected: this.viewOptionSelected,\n dropdownOptions: [\n this.getDropdownOption(SortField.weeklyview),\n this.getDropdownOption(SortField.alltimeview),\n ],\n selectedOption: this.viewOptionSelected ? this.finalizedSortField : '',\n onOptionSelected: this.dropdownOptionSelected,\n onDropdownClick: () => {\n this.dateDropdown.open = false;\n this.dropdownBackdropVisible = this.viewsDropdown.open;\n this.viewsDropdown.classList.toggle('open', this.viewsDropdown.open);\n },\n onLabelInteraction: (e: Event) => {\n if (!this.viewsDropdown.open && !this.viewOptionSelected) {\n e.stopPropagation();\n this.clearAlphaBarFilters();\n this.setSelectedSort(this.lastSelectedViewSort);\n }\n },\n });\n }\n\n /** The template to render for the date dropdown */\n private get dateDropdownTemplate(): TemplateResult {\n return this.getSortDropdown({\n displayName: html`${this.dateSortDisplayName}`,\n id: 'date-dropdown',\n selected: this.dateOptionSelected,\n dropdownOptions: [\n ...(this.showDateFavorited\n ? [this.getDropdownOption(SortField.datefavorited)]\n : []),\n this.getDropdownOption(SortField.date),\n this.getDropdownOption(SortField.datearchived),\n this.getDropdownOption(SortField.datereviewed),\n this.getDropdownOption(SortField.dateadded),\n ],\n selectedOption: this.dateOptionSelected ? this.finalizedSortField : '',\n onOptionSelected: this.dropdownOptionSelected,\n onDropdownClick: () => {\n this.viewsDropdown.open = false;\n this.dropdownBackdropVisible = this.dateDropdown.open;\n this.dateDropdown.classList.toggle('open', this.dateDropdown.open);\n },\n onLabelInteraction: (e: Event) => {\n if (!this.dateDropdown.open && !this.dateOptionSelected) {\n e.stopPropagation();\n this.clearAlphaBarFilters();\n this.setSelectedSort(this.lastSelectedDateSort);\n }\n },\n });\n }\n\n /** Handler for when a new mobile sort dropdown option is selected */\n private mobileSortChanged(e: CustomEvent<{ option: optionInterface }>) {\n this.dropdownBackdropVisible = false;\n\n const sortField = e.detail.option.id as SortField;\n this.setSelectedSort(sortField);\n\n this.alphaSelectorVisible = null;\n if (sortField !== 'title' && this.selectedTitleFilter) {\n this.selectedTitleFilter = null;\n this.emitTitleLetterChangedEvent();\n }\n if (sortField !== 'creator' && this.selectedCreatorFilter) {\n this.selectedCreatorFilter = null;\n this.emitCreatorLetterChangedEvent();\n }\n }\n\n /** Template for rendering the three display mode options */\n private get displayOptionTemplate() {\n return html`\n <ul>\n <li>\n <button\n id=\"grid-button\"\n @click=${() => {\n this.displayMode = 'grid';\n }}\n class=${this.displayMode === 'grid' ? 'active' : ''}\n title=\"Tile view\"\n >\n ${tileIcon}\n </button>\n </li>\n <li>\n <button\n id=\"list-detail-button\"\n @click=${() => {\n this.displayMode = 'list-detail';\n }}\n class=${this.displayMode === 'list-detail' ? 'active' : ''}\n title=\"List view\"\n >\n ${listIcon}\n </button>\n </li>\n <li>\n <button\n id=\"list-compact-button\"\n @click=${() => {\n this.displayMode = 'list-compact';\n }}\n class=${this.displayMode === 'list-compact' ? 'active' : ''}\n title=\"Compact list view\"\n >\n ${compactIcon}\n </button>\n </li>\n </ul>\n `;\n }\n\n /**\n * Template for rendering the transparent backdrop to capture clicks outside the\n * dropdown menu while it is open.\n */\n private get dropdownBackdrop() {\n return html`\n <div\n id=\"sort-selector-backdrop\"\n @keyup=${this.closeDropdowns}\n @click=${this.closeDropdowns}\n ></div>\n `;\n }\n\n /** Closes all of the sorting dropdown components' menus */\n private closeDropdowns() {\n this.dropdownBackdropVisible = false;\n const allDropdowns = [\n this.viewsDropdown,\n this.dateDropdown,\n this.mobileDropdown,\n ];\n for (const dropdown of allDropdowns) {\n dropdown.open = false;\n dropdown.classList.remove('open');\n }\n }\n\n private selectDropdownSortField(sortField: SortField) {\n // When a dropdown sort option is selected, we additionally need to clear the backdrop\n this.dropdownBackdropVisible = false;\n this.setSelectedSort(sortField);\n }\n\n private clearAlphaBarFilters() {\n this.alphaSelectorVisible = null;\n this.selectedTitleFilter = null;\n this.selectedCreatorFilter = null;\n this.emitTitleLetterChangedEvent();\n this.emitCreatorLetterChangedEvent();\n }\n\n private setSortDirection(sortDirection: SortDirection) {\n this.sortDirection = sortDirection;\n this.emitSortChangedEvent();\n }\n\n /** Toggles the current sort direction between 'asc' and 'desc' */\n private toggleSortDirection() {\n this.setSortDirection(\n this.finalizedSortDirection === 'desc' ? 'asc' : 'desc'\n );\n }\n\n private handleSortDirectionClicked(): void {\n if (\n !this.sortDirection &&\n this.defaultSortField &&\n this.defaultSortDirection\n ) {\n // When the sort direction is merely defaulted (not set by the user), clicking\n // the toggled button should \"promote\" the default sort to an explicitly-set one\n // and then toggle it as usual.\n this.selectedSort = this.defaultSortField;\n this.sortDirection = this.defaultSortDirection;\n }\n\n this.toggleSortDirection();\n }\n\n private setSelectedSort(sort: SortField) {\n this.selectedSort = sort;\n // Apply this field's default sort direction\n const sortOption = SORT_OPTIONS[sort];\n this.sortDirection = sortOption.defaultSortDirection;\n this.emitSortChangedEvent();\n }\n\n /** The current sort field, or the default one if no explicit sort is set */\n private get finalizedSortField(): SortField {\n return this.selectedSort === SortField.default\n ? this.defaultSortField\n : this.selectedSort;\n }\n\n /** The current sort direction, or the default one if no explicit direction is set */\n private get finalizedSortDirection(): SortDirection | null {\n return this.sortDirection === null\n ? this.defaultSortDirection\n : this.sortDirection;\n }\n\n /** Whether the sort direction button should be enabled for the current sort */\n private get canChangeSortDirection(): boolean {\n return SORT_OPTIONS[this.finalizedSortField].canSetDirection;\n }\n\n /**\n * There are four date sort options.\n *\n * This checks to see if the current sort is one of them.\n *\n * @readonly\n * @private\n * @type {boolean}\n * @memberof SortFilterBar\n */\n private get dateOptionSelected(): boolean {\n const dateSortFields: SortField[] = [\n SortField.datefavorited,\n SortField.datearchived,\n SortField.date,\n SortField.datereviewed,\n SortField.dateadded,\n ];\n return dateSortFields.includes(this.finalizedSortField);\n }\n\n /**\n * There are two view sort options.\n *\n * This checks to see if the current sort is one of them.\n *\n * @readonly\n * @private\n * @type {boolean}\n * @memberof SortFilterBar\n */\n private get viewOptionSelected(): boolean {\n const viewSortFields: SortField[] = [\n SortField.alltimeview,\n SortField.weeklyview,\n ];\n return viewSortFields.includes(this.finalizedSortField);\n }\n\n /**\n * The default field for the date sort dropdown.\n * This is Date Favorited when that option is available, or Date Published otherwise.\n */\n private get defaultDateSortField(): SortField {\n return this.showDateFavorited ? SortField.datefavorited : SortField.date;\n }\n\n /**\n * The display name of the last selected date field\n *\n * @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n */\n private get dateSortDisplayName(): string {\n return SORT_OPTIONS[this.lastSelectedDateSort].displayName;\n }\n\n /**\n * The display name of the last selected view field\n *\n * @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n */\n private get viewSortDisplayName(): string {\n return SORT_OPTIONS[this.lastSelectedViewSort].displayName;\n }\n\n private get titleSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedTitleFilter}\n .letterCounts=${this.prefixFilterCountMap?.title}\n ariaLandmarkLabel=\"Filter by title letter\"\n @letterChanged=${this.titleLetterChanged}\n ></alpha-bar>`;\n }\n\n private get creatorSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedCreatorFilter}\n .letterCounts=${this.prefixFilterCountMap?.creator}\n ariaLandmarkLabel=\"Filter by creator letter\"\n @letterChanged=${this.creatorLetterChanged}\n ></alpha-bar>`;\n }\n\n private titleLetterChanged(\n e: CustomEvent<{ selectedLetter: string | undefined }>\n ) {\n this.selectedTitleFilter = e.detail.selectedLetter ?? null;\n this.emitTitleLetterChangedEvent();\n }\n\n private creatorLetterChanged(\n e: CustomEvent<{ selectedLetter: string | undefined }>\n ) {\n this.selectedCreatorFilter = e.detail.selectedLetter ?? null;\n this.emitCreatorLetterChangedEvent();\n }\n\n private emitTitleLetterChangedEvent() {\n const event = new CustomEvent<{ selectedLetter: string | null }>(\n 'titleLetterChanged',\n {\n detail: { selectedLetter: this.selectedTitleFilter },\n }\n );\n this.dispatchEvent(event);\n }\n\n private emitCreatorLetterChangedEvent() {\n const event = new CustomEvent<{ selectedLetter: string | null }>(\n 'creatorLetterChanged',\n {\n detail: { selectedLetter: this.selectedCreatorFilter },\n }\n );\n this.dispatchEvent(event);\n }\n\n private displayModeChanged() {\n const event = new CustomEvent<{\n displayMode?: CollectionDisplayMode;\n }>('displayModeChanged', {\n detail: { displayMode: this.displayMode },\n });\n this.dispatchEvent(event);\n }\n\n private emitSortChangedEvent() {\n const event = new CustomEvent<{\n selectedSort: SortField;\n sortDirection: SortDirection | null;\n }>('sortChanged', {\n detail: {\n selectedSort: this.selectedSort,\n sortDirection: this.sortDirection,\n },\n });\n this.dispatchEvent(event);\n }\n\n static get styles() {\n return [\n srOnlyStyle,\n css`\n #container {\n position: relative;\n }\n\n #sort-bar {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n border-bottom: 1px solid #2c2c2c;\n font-size: 1.4rem;\n }\n\n #sort-options {\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n\n ul {\n list-style: none;\n display: flex;\n align-items: center;\n margin: 0;\n padding: 0;\n }\n\n li {\n padding: 0;\n }\n\n .sort-by-text {\n margin-right: 5px;\n font-weight: bold;\n white-space: nowrap;\n }\n\n .sort-direction-container {\n display: flex;\n align-self: stretch;\n flex: 0;\n margin: 0 5px;\n }\n\n .sort-direction-selector {\n padding: 0;\n border: none;\n appearance: none;\n background: transparent;\n cursor: pointer;\n }\n\n .sort-direction-selector:disabled {\n cursor: default;\n }\n\n .sort-direction-icon {\n display: flex;\n align-items: center;\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n outline: inherit;\n width: 14px;\n height: 14px;\n }\n\n .sort-direction-icon > svg {\n flex: 1;\n }\n\n #date-sort-selector,\n #view-sort-selector {\n position: absolute;\n left: 150px;\n top: 45px;\n\n z-index: 1;\n padding: 1rem;\n background-color: white;\n border-radius: 2.5rem;\n border: 1px solid #404142;\n }\n\n #sort-selector-container {\n flex: 1;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n #desktop-sort-container,\n #mobile-sort-container {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n /*\n we move the desktop sort selector offscreen instead of display: none\n because we need to observe the width of it vs its container to determine\n if it's wide enough to display the desktop version and if you display: none,\n the width becomes 0\n */\n #desktop-sort-container.hidden {\n position: absolute;\n top: -9999px;\n left: -9999px;\n visibility: hidden;\n }\n\n #mobile-sort-container.hidden {\n display: none;\n }\n\n #sort-selector-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 1;\n background-color: transparent;\n }\n\n #desktop-sort-selector {\n display: inline-flex;\n }\n\n #desktop-sort-selector li {\n display: flex;\n align-items: center;\n padding-left: 5px;\n padding-right: 5px;\n }\n\n #desktop-sort-selector li a {\n padding: 0 5px;\n text-decoration: none;\n color: #333;\n line-height: 2;\n }\n\n #desktop-sort-selector li button {\n padding: 0px 5px;\n border: none;\n background: none;\n font-family: inherit;\n font-size: inherit;\n color: #333;\n line-height: 2;\n cursor: pointer;\n appearance: none;\n }\n\n #desktop-sort-selector li button.selected {\n font-weight: bold;\n }\n\n /**\n * Fix to not shift the sort-bar options when get selected\n */\n #desktop-sort-selector li button::before,\n #desktop-sort-selector .dropdown-label::before {\n display: block;\n content: attr(data-title);\n font-weight: bold;\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n\n #display-style-selector {\n flex: 0;\n }\n\n #display-style-selector button {\n background: none;\n color: inherit;\n border: none;\n appearance: none;\n cursor: pointer;\n -webkit-appearance: none;\n fill: #bbbbbb;\n }\n\n #display-style-selector button.active {\n fill: var(--ia-theme-primary-text-color, #2c2c2c);\n }\n\n #display-style-selector button svg {\n width: 24px;\n height: 24px;\n }\n\n ia-dropdown {\n --dropdownTextColor: white;\n --dropdownOffsetTop: 0;\n --dropdownBorderTopWidth: 0;\n --dropdownBorderTopLeftRadius: 0;\n --dropdownBorderTopRightRadius: 0;\n --dropdownWhiteSpace: nowrap;\n --dropdownListZIndex: 2;\n --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n --dropdownSelectedTextColor: white;\n --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n --caretHeight: 9px;\n --caretWidth: 12px;\n --caretPadding: 0 5px 0 0;\n }\n ia-dropdown.selected .dropdown-label {\n font-weight: bold;\n }\n ia-dropdown.open {\n z-index: 2;\n }\n\n .dropdown-label {\n display: inline-block;\n height: 100%;\n padding-left: 5px;\n font-size: 1.4rem;\n font-family: var(--ia-theme-base-font-family);\n line-height: 2;\n color: var(--ia-theme-primary-text-color, #2c2c2c);\n white-space: nowrap;\n user-select: none;\n }\n `,\n ];\n }\n}\n"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "The Internet Archive Collection Browser.",
4
4
  "license": "AGPL-3.0-only",
5
5
  "author": "Internet Archive",
6
- "version": "2.1.8",
6
+ "version": "2.1.9-alpha.0",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.js",
9
9
  "scripts": {
@@ -227,6 +227,7 @@ export class SortFilterBar
227
227
  }
228
228
 
229
229
  if (changed.has('resizeObserver') || changed.has('enableSortOptionsSlot')) {
230
+ console.log('sort bar updated / resize observer change');
230
231
  const oldObserver = changed.get(
231
232
  'resizeObserver'
232
233
  ) as SharedResizeObserverInterface;
@@ -256,6 +257,7 @@ export class SortFilterBar
256
257
  };
257
258
 
258
259
  disconnectedCallback(): void {
260
+ console.log('sort bar disconnectedCallback');
259
261
  if (this.resizeObserver) {
260
262
  this.disconnectResizeObserver(this.resizeObserver);
261
263
  }
@@ -264,6 +266,7 @@ export class SortFilterBar
264
266
  private disconnectResizeObserver(
265
267
  resizeObserver: SharedResizeObserverInterface
266
268
  ) {
269
+ console.log('disconnecting resize observer from sort bar');
267
270
  if (this.sortSelectorContainer) {
268
271
  resizeObserver.removeObserver({
269
272
  target: this.sortSelectorContainer,
@@ -281,6 +284,7 @@ export class SortFilterBar
281
284
 
282
285
  private setupResizeObserver() {
283
286
  if (!this.resizeObserver) return;
287
+ console.log('setting up resize observer in sort bar');
284
288
 
285
289
  if (this.sortSelectorContainer) {
286
290
  this.resizeObserver.addObserver({