@internetarchive/collection-browser 0.4.14-alpha.7 → 0.4.14

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.
Files changed (10) hide show
  1. package/dist/src/sort-filter-bar/sort-filter-bar.js +4 -0
  2. package/dist/src/sort-filter-bar/sort-filter-bar.js.map +1 -1
  3. package/dist/src/tiles/list/tile-list.js +6 -0
  4. package/dist/src/tiles/list/tile-list.js.map +1 -1
  5. package/dist/src/tiles/text-snippet-block.js +6 -0
  6. package/dist/src/tiles/text-snippet-block.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/sort-filter-bar/sort-filter-bar.ts +4 -0
  9. package/src/tiles/list/tile-list.ts +6 -0
  10. package/src/tiles/text-snippet-block.ts +6 -0
package/dist/src/sort-filter-bar/sort-filter-bar.js CHANGED
@@ -710,6 +710,10 @@ SortFilterBar.styles = css `
710
710
  height: 14px;
711
711
  }
712
712
 
713
+ .sort-direction-icon > svg {
714
+ flex: 1;
715
+ }
716
+
713
717
  #date-sort-selector,
714
718
  #view-sort-selector {
715
719
  position: absolute;
package/dist/src/sort-filter-bar/sort-filter-bar.js.map CHANGED
@@ -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 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 DefaultSortDirection,\n PrefixFilterCounts,\n PrefixFilterType,\n SortField,\n SortFieldDisplayName,\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';\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 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.relevance;\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 /** 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 * 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 <div id=\"sort-bar\">\n <div class=\"sort-direction-container\">\n ${this.sortDirectionSelectorTemplate}\n </div>\n <span class=\"sort-by-text\">Sort by:</span>\n\n <div id=\"sort-selector-container\">\n ${this.mobileSortSelectorTemplate}\n ${this.desktopSortSelectorTemplate}\n </div>\n\n <div id=\"display-style-selector\">${this.displayOptionTemplate}</div>\n </div>\n\n ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}\n ${this.alphaBarTemplate}\n </div>\n `;\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('displayMode')) {\n this.displayModeChanged();\n }\n\n if (changed.has('selectedSort') && this.sortDirection === null) {\n this.sortDirection = DefaultSortDirection[this.selectedSort];\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')) {\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 resizeObserver.removeObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n\n resizeObserver.removeObserver({\n target: this.desktopSortContainer,\n handler: this,\n });\n }\n\n private setupResizeObserver() {\n if (!this.resizeObserver) return;\n this.resizeObserver.addObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n\n this.resizeObserver.addObserver({\n target: this.desktopSortContainer,\n handler: this,\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 return html`\n <button\n class=\"sort-direction-selector\"\n ?disabled=${this.selectedSort === 'relevance'}\n @click=${this.toggleSortDirection}\n >\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 // For relevance sort, show a fully disabled icon\n if (this.selectedSort === 'relevance') {\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.sortDirection === '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 <li>\n ${this.showRelevance\n ? this.getSortDisplayOption(SortField.relevance, {\n onClick: () => {\n this.dropdownBackdropVisible = false;\n if (this.selectedSort !== SortField.relevance) {\n this.clearAlphaBarFilters();\n this.setSelectedSort(SortField.relevance);\n }\n },\n })\n : nothing}\n </li>\n <li>${this.viewsDropdownTemplate}</li>\n <li>\n ${this.getSortDisplayOption(SortField.title, {\n onClick: () => {\n this.dropdownBackdropVisible = false;\n if (this.selectedSort !== 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.selectedSort !== 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 return html`\n <div\n id=\"mobile-sort-container\"\n class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n >\n ${this.getSortDropdown({\n displayName: html`${SortFieldDisplayName[this.selectedSort] ?? ''}`,\n id: 'mobile-dropdown',\n selected: true,\n dropdownOptions: Object.keys(SortField).map(field =>\n this.getDropdownOption(field as SortField)\n ),\n selectedOption: this.selectedSort ?? SortField.relevance,\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 = options?.selected ?? this.selectedSort === sortField;\n const displayName = options?.displayName ?? SortFieldDisplayName[sortField];\n return html`\n <button\n class=${isSelected ? 'selected' : nothing}\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 @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 ${SortFieldDisplayName[sortField]}\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 this.setSelectedSort(e.detail.option.id as SortField);\n }\n\n /** The template to render for the views dropdown */\n private get viewsDropdownTemplate(): TemplateResult {\n return this.getSortDropdown({\n displayName: html`${this.viewSortField}`,\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.selectedSort : '',\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(SortField.weeklyview);\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.dateSortField}`,\n id: 'date-dropdown',\n selected: this.dateOptionSelected,\n dropdownOptions: [\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.selectedSort : '',\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(SortField.date);\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(this.sortDirection === 'desc' ? 'asc' : 'desc');\n }\n\n private setSelectedSort(sort: SortField) {\n this.selectedSort = sort;\n // Apply this field's default sort direction\n this.sortDirection = DefaultSortDirection[this.selectedSort];\n this.emitSortChangedEvent();\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.datearchived,\n SortField.date,\n SortField.datereviewed,\n SortField.dateadded,\n ];\n return dateSortFields.includes(this.selectedSort);\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.selectedSort);\n }\n\n /**\n * The display name of the current date field\n *\n * @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n */\n private get dateSortField(): string {\n const defaultSort = SortFieldDisplayName[SortField.date];\n const name = this.dateOptionSelected\n ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n : defaultSort;\n return name;\n }\n\n /**\n * The display name of the current view field\n *\n * @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n */\n private get viewSortField(): string {\n const defaultSort = SortFieldDisplayName[SortField.weeklyview];\n const name = this.viewOptionSelected\n ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n : defaultSort;\n return name;\n }\n\n private get titleSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedTitleFilter}\n .letterCounts=${this.prefixFilterCountMap?.title}\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 @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 styles = css`\n #container {\n position: relative;\n }\n\n #sort-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid #2c2c2c;\n font-size: 1.4rem;\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 #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-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 #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 line-height: 2;\n color: var(--ia-theme-primary-text-color, #2c2c2c);\n white-space: nowrap;\n user-select: none;\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 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 DefaultSortDirection,\n PrefixFilterCounts,\n PrefixFilterType,\n SortField,\n SortFieldDisplayName,\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';\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 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.relevance;\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 /** 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 * 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 <div id=\"sort-bar\">\n <div class=\"sort-direction-container\">\n ${this.sortDirectionSelectorTemplate}\n </div>\n <span class=\"sort-by-text\">Sort by:</span>\n\n <div id=\"sort-selector-container\">\n ${this.mobileSortSelectorTemplate}\n ${this.desktopSortSelectorTemplate}\n </div>\n\n <div id=\"display-style-selector\">${this.displayOptionTemplate}</div>\n </div>\n\n ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}\n ${this.alphaBarTemplate}\n </div>\n `;\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('displayMode')) {\n this.displayModeChanged();\n }\n\n if (changed.has('selectedSort') && this.sortDirection === null) {\n this.sortDirection = DefaultSortDirection[this.selectedSort];\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')) {\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 resizeObserver.removeObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n\n resizeObserver.removeObserver({\n target: this.desktopSortContainer,\n handler: this,\n });\n }\n\n private setupResizeObserver() {\n if (!this.resizeObserver) return;\n this.resizeObserver.addObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n\n this.resizeObserver.addObserver({\n target: this.desktopSortContainer,\n handler: this,\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 return html`\n <button\n class=\"sort-direction-selector\"\n ?disabled=${this.selectedSort === 'relevance'}\n @click=${this.toggleSortDirection}\n >\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 // For relevance sort, show a fully disabled icon\n if (this.selectedSort === 'relevance') {\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.sortDirection === '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 <li>\n ${this.showRelevance\n ? this.getSortDisplayOption(SortField.relevance, {\n onClick: () => {\n this.dropdownBackdropVisible = false;\n if (this.selectedSort !== SortField.relevance) {\n this.clearAlphaBarFilters();\n this.setSelectedSort(SortField.relevance);\n }\n },\n })\n : nothing}\n </li>\n <li>${this.viewsDropdownTemplate}</li>\n <li>\n ${this.getSortDisplayOption(SortField.title, {\n onClick: () => {\n this.dropdownBackdropVisible = false;\n if (this.selectedSort !== 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.selectedSort !== 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 return html`\n <div\n id=\"mobile-sort-container\"\n class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n >\n ${this.getSortDropdown({\n displayName: html`${SortFieldDisplayName[this.selectedSort] ?? ''}`,\n id: 'mobile-dropdown',\n selected: true,\n dropdownOptions: Object.keys(SortField).map(field =>\n this.getDropdownOption(field as SortField)\n ),\n selectedOption: this.selectedSort ?? SortField.relevance,\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 = options?.selected ?? this.selectedSort === sortField;\n const displayName = options?.displayName ?? SortFieldDisplayName[sortField];\n return html`\n <button\n class=${isSelected ? 'selected' : nothing}\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 @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 ${SortFieldDisplayName[sortField]}\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 this.setSelectedSort(e.detail.option.id as SortField);\n }\n\n /** The template to render for the views dropdown */\n private get viewsDropdownTemplate(): TemplateResult {\n return this.getSortDropdown({\n displayName: html`${this.viewSortField}`,\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.selectedSort : '',\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(SortField.weeklyview);\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.dateSortField}`,\n id: 'date-dropdown',\n selected: this.dateOptionSelected,\n dropdownOptions: [\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.selectedSort : '',\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(SortField.date);\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(this.sortDirection === 'desc' ? 'asc' : 'desc');\n }\n\n private setSelectedSort(sort: SortField) {\n this.selectedSort = sort;\n // Apply this field's default sort direction\n this.sortDirection = DefaultSortDirection[this.selectedSort];\n this.emitSortChangedEvent();\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.datearchived,\n SortField.date,\n SortField.datereviewed,\n SortField.dateadded,\n ];\n return dateSortFields.includes(this.selectedSort);\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.selectedSort);\n }\n\n /**\n * The display name of the current date field\n *\n * @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n */\n private get dateSortField(): string {\n const defaultSort = SortFieldDisplayName[SortField.date];\n const name = this.dateOptionSelected\n ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n : defaultSort;\n return name;\n }\n\n /**\n * The display name of the current view field\n *\n * @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n */\n private get viewSortField(): string {\n const defaultSort = SortFieldDisplayName[SortField.weeklyview];\n const name = this.viewOptionSelected\n ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n : defaultSort;\n return name;\n }\n\n private get titleSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedTitleFilter}\n .letterCounts=${this.prefixFilterCountMap?.title}\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 @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 styles = css`\n #container {\n position: relative;\n }\n\n #sort-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid #2c2c2c;\n font-size: 1.4rem;\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-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 #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 line-height: 2;\n color: var(--ia-theme-primary-text-color, #2c2c2c);\n white-space: nowrap;\n user-select: none;\n }\n `;\n}\n"]}
package/dist/src/tiles/list/tile-list.js CHANGED
@@ -433,6 +433,12 @@ let TileList = class TileList extends LitElement {
433
433
  word-break: break-word;
434
434
  -webkit-line-clamp: 3; /* number of lines to show */
435
435
  line-clamp: 3;
436
+
437
+ /*
438
+ * Safari doesn't always respect the line-clamping rules above,
439
+ * so we add this to ensure these fields still get truncated
440
+ */
441
+ max-height: 60px;
436
442
  }
437
443
 
438
444
  #collections {
package/dist/src/tiles/list/tile-list.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport DOMPurify from 'dompurify';\n\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { SortParam } from '@internetarchive/search-service';\nimport { suppressedCollections, TileModel } from '../../models';\n\nimport { dateLabel } from './date-label';\nimport { accountLabel } from './account-label';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) sortParam: SortParam | null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @state() private collectionLinks: TemplateResult[] = [];\n\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) loggedIn = false;\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n ${this.classSize === 'mobile'\n ? this.mobileTemplate\n : this.desktopTemplate}\n </div>\n `;\n }\n\n /**\n * Templates\n */\n private get mobileTemplate() {\n return html`\n <div id=\"list-line-top\">\n <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n </div>\n </div>\n <div id=\"list-line-bottom\">${this.detailsTemplate}</div>\n `;\n }\n\n private get desktopTemplate() {\n return html`\n <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n ${this.detailsTemplate}\n </div>\n `;\n }\n\n private get imageBlockTemplate() {\n if (!this.model) return nothing;\n\n return html`<a\n href=\"${this.baseNavigationUrl}/details/${encodeURI(\n this.model.identifier\n )}\"\n >\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isCompactTile=${false}\n .isListTile=${true}\n .viewSize=${this.classSize}\n .loggedIn=${this.loggedIn}\n >\n </image-block>\n </a> `;\n }\n\n private get detailsTemplate() {\n return html`\n ${this.itemLineTemplate} ${this.creatorTemplate}\n <div id=\"dates-line\">\n ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n </div>\n <div id=\"views-line\">\n ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n </div>\n ${this.topicsTemplate} ${this.collectionsTemplate}\n ${this.descriptionTemplate} ${this.textSnippetsTemplate}\n `;\n }\n\n // Data templates\n private get iconRightTemplate() {\n return html`\n <a id=\"icon-right\" href=${this.mediatypeURL} target=\"_blank\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n >\n </mediatype-icon>\n </a>\n `;\n }\n\n private get titleTemplate() {\n if (!this.model?.title) {\n return nothing;\n }\n\n // If the model has a server-specified href, use it\n // Otherwise construct a details link using the identifier\n return this.model?.href\n ? html`<a href=\"${this.baseNavigationUrl}${this.model.href}\"\n >${this.model.title ?? this.model.identifier}</a\n >`\n : this.detailsLink(this.model.identifier, this.model.title);\n }\n\n private get itemLineTemplate() {\n const source = this.sourceTemplate;\n const volume = this.volumeTemplate;\n const issue = this.issueTemplate;\n if (!source && !volume && !issue) {\n return nothing;\n }\n return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n }\n\n private get sourceTemplate() {\n if (!this.model?.source) {\n return nothing;\n }\n return html`\n <div id=\"source\" class=\"metadata\">\n ${this.labelTemplate('Source')}\n ${this.searchLink('source', this.model.source)}\n </div>\n `;\n }\n\n private get volumeTemplate() {\n return this.metadataTemplate(this.model?.volume, 'Volume');\n }\n\n private get issueTemplate() {\n return this.metadataTemplate(this.model?.issue, 'Issue');\n }\n\n private get creatorTemplate() {\n // \"Archivist since\" if account\n if (this.model?.mediatype === 'account') {\n return html`\n <div id=\"creator\" class=\"metadata\">\n <span class=\"label\"> ${accountLabel(this.model?.dateAdded)} </span>\n </div>\n `;\n }\n // \"Creator\" if not account tile\n if (!this.model?.creators || this.model.creators.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"creator\" class=\"metadata\">\n ${this.labelTemplate('By')}\n ${join(\n map(this.model.creators, id => this.searchLink('creator', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get datePublishedTemplate() {\n return this.metadataTemplate(\n formatDate(this.model?.datePublished, 'long'),\n 'Published'\n );\n }\n\n // Show date label/value when sorted by date type\n // Except datePublished which is always shown\n private get dateSortByTemplate() {\n if (\n this.sortParam &&\n (this.sortParam.field === 'addeddate' ||\n this.sortParam.field === 'reviewdate' ||\n this.sortParam.field === 'publicdate')\n ) {\n return this.metadataTemplate(\n formatDate(this.date, 'long'),\n dateLabel(this.sortParam.field)\n );\n }\n return nothing;\n }\n\n private get viewsTemplate() {\n const viewCount =\n this.sortParam?.field === 'week'\n ? this.model?.weeklyViewCount // weekly views\n : this.model?.viewCount; // all-time views\n\n return this.metadataTemplate(\n `${formatCount(viewCount ?? 0, this.formatSize)}`,\n 'Views'\n );\n }\n\n private get ratingTemplate() {\n return this.metadataTemplate(this.model?.averageRating, 'Avg Rating');\n }\n\n private get reviewsTemplate() {\n return this.metadataTemplate(this.model?.commentCount, 'Reviews');\n }\n\n private get topicsTemplate() {\n if (!this.model?.subjects || this.model.subjects.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"topics\" class=\"metadata\">\n ${this.labelTemplate('Topics')}\n ${join(\n map(this.model.subjects, id => this.searchLink('subject', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get collectionsTemplate() {\n if (!this.collectionLinks || this.collectionLinks.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"collections\" class=\"metadata\">\n ${this.labelTemplate('Collections')}\n ${join(this.collectionLinks, html`, `)}\n </div>\n `;\n }\n\n private get descriptionTemplate() {\n return this.metadataTemplate(\n // Sanitize away any HTML tags and convert line breaks to spaces.\n unsafeHTML(\n DOMPurify.sanitize(this.model?.description?.replace(/\\n/g, ' ') ?? '')\n ),\n '',\n 'description'\n );\n }\n\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n if (!this.hasSnippets) return nothing;\n\n return html`<text-snippet-block\n viewsize=\"list\"\n .snippets=${this.model?.snippets}\n ></text-snippet-block>`;\n }\n\n private get hasSnippets(): boolean {\n return !!this.model?.snippets?.length;\n }\n\n // Utility functions\n // eslint-disable-next-line default-param-last\n private metadataTemplate(text: any, label = '', id?: string) {\n if (!text) return nothing;\n return html`\n <div id=${ifDefined(id)} class=\"metadata\">\n ${this.labelTemplate(label)} ${text}\n </div>\n `;\n }\n\n private labelTemplate(label: string) {\n return html` ${label\n ? html`<span class=\"label\">${label}: </span>`\n : nothing}`;\n }\n\n private searchLink(field: string, searchTerm: string) {\n if (!field || !searchTerm) {\n return nothing;\n }\n const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n // No whitespace after closing tag\n // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n /* eslint-disable lit/no-invalid-html */\n return html`<a\n href=\"${this.baseNavigationUrl}/search?query=${query}\"\n rel=\"nofollow\"\n >\n ${DOMPurify.sanitize(searchTerm)}</a\n >`;\n /* eslint-enable lit/no-invalid-html */\n }\n\n private detailsLink(identifier: string, text?: string): TemplateResult {\n const linkText = text ?? identifier;\n // No whitespace after closing tag\n // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway\n return html`<a\n href=\"${this.baseNavigationUrl}/details/${encodeURI(identifier)}\"\n >${DOMPurify.sanitize(linkText)}</a\n >`;\n }\n\n /** The URL of this item's mediatype collection, if defined. */\n private get mediatypeURL(): string | typeof nothing {\n // NB: baseNavigationUrl can be an empty string\n if (this.baseNavigationUrl === undefined || !this.model?.mediatype)\n return nothing;\n\n // Need special handling for certain mediatypes that don't have a top-level collection page\n switch (this.model.mediatype) {\n case 'collection':\n return `${this.baseNavigationUrl}/search?query=mediatype:collection&sort=-downloads`;\n case 'account':\n return nothing;\n default:\n return `${this.baseNavigationUrl}/details/${encodeURI(\n this.model.mediatype\n )}`;\n }\n }\n\n protected updated(changed: PropertyValues): void {\n if (changed.has('model')) {\n this.fetchCollectionNames();\n }\n }\n\n private async fetchCollectionNames() {\n if (\n !this.model?.collections ||\n this.model.collections.length === 0 ||\n !this.collectionNameCache\n ) {\n return;\n }\n // Note: quirk of Lit: need to replace collectionLinks array,\n // otherwise it will not re-render. Can't simply alter the array.\n this.collectionLinks = [];\n const newCollectionLinks: TemplateResult[] = [];\n const promises: Promise<void>[] = [];\n for (const collection of this.model.collections) {\n // Don't include favorites or collections that are meant to be suppressed\n if (\n !suppressedCollections[collection] &&\n !collection.startsWith('fav-')\n ) {\n promises.push(\n this.collectionNameCache?.collectionNameFor(collection).then(name => {\n newCollectionLinks.push(\n this.detailsLink(collection, name ?? collection)\n );\n })\n );\n }\n }\n await Promise.all(promises);\n this.collectionLinks = newCollectionLinks;\n }\n\n /*\n * TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n */\n private get date(): Date | undefined {\n switch (this.sortParam?.field) {\n case 'date':\n return this.model?.datePublished;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.dateArchived; // publicdate\n }\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): DateFormat | NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n div a {\n text-decoration: none;\n }\n\n div a:link {\n color: var(--ia-theme-link-color, #4b64ff);\n }\n\n .label {\n font-weight: bold;\n }\n\n #list-line.mobile {\n --infiniteScrollerRowGap: 20px;\n --infiniteScrollerRowHeight: auto;\n }\n\n #list-line.desktop {\n --infiniteScrollerRowGap: 30px;\n --infiniteScrollerRowHeight: auto;\n }\n\n /* fields */\n #icon-right {\n width: 20px;\n padding-top: 5px;\n --iconHeight: 20px;\n --iconWidth: 20px;\n --iconTextAlign: right;\n margin-top: -8px;\n text-align: right;\n }\n\n #title {\n color: #4b64ff;\n text-decoration: none;\n font-size: 22px;\n font-weight: bold;\n /* align top of text with image */\n line-height: 25px;\n margin-top: -4px;\n padding-bottom: 2px;\n flex-grow: 1;\n\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n overflow-wrap: anywhere;\n }\n\n .metadata {\n line-height: 20px;\n }\n\n #description,\n #creator,\n #topics,\n #source {\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n word-break: break-word;\n -webkit-line-clamp: 3; /* number of lines to show */\n line-clamp: 3;\n }\n\n #collections {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n overflow-wrap: anywhere;\n }\n\n #icon {\n padding-top: 5px;\n }\n\n #description {\n padding-top: 10px;\n }\n\n /* Top level container */\n #list-line {\n display: flex;\n }\n\n #list-line.mobile {\n flex-direction: column;\n }\n\n #list-line.desktop {\n column-gap: 10px;\n }\n\n #list-line-top {\n display: flex;\n column-gap: 7px;\n }\n\n #list-line-bottom {\n padding-top: 4px;\n }\n\n #list-line-right,\n #list-line-top,\n #list-line-bottom {\n width: 100%;\n }\n\n /*\n * If the container becomes very tiny, don't let the thumbnail side take\n * up too much space. Shouldn't make a difference on ordinary viewport sizes.\n */\n #list-line-left {\n max-width: 25%;\n\n display: flex;\n flex-direction: column;\n row-gap: 5px;\n }\n\n div a:hover {\n text-decoration: underline;\n }\n\n /* Lines containing multiple div as row */\n #item-line,\n #dates-line,\n #views-line,\n #title-line {\n display: flex;\n flex-direction: row;\n column-gap: 10px;\n }\n\n /*\n * With the exception of the title line, allow these to wrap if\n * the space becomes too small to accommodate them together.\n * \n * The title line is excluded because it contains the mediatype icon\n * which we don't want to wrap.\n */\n #item-line,\n #dates-line,\n #views-line {\n flex-wrap: wrap;\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport DOMPurify from 'dompurify';\n\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { SortParam } from '@internetarchive/search-service';\nimport { suppressedCollections, TileModel } from '../../models';\n\nimport { dateLabel } from './date-label';\nimport { accountLabel } from './account-label';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) sortParam: SortParam | null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @state() private collectionLinks: TemplateResult[] = [];\n\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) loggedIn = false;\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n ${this.classSize === 'mobile'\n ? this.mobileTemplate\n : this.desktopTemplate}\n </div>\n `;\n }\n\n /**\n * Templates\n */\n private get mobileTemplate() {\n return html`\n <div id=\"list-line-top\">\n <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n </div>\n </div>\n <div id=\"list-line-bottom\">${this.detailsTemplate}</div>\n `;\n }\n\n private get desktopTemplate() {\n return html`\n <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n ${this.detailsTemplate}\n </div>\n `;\n }\n\n private get imageBlockTemplate() {\n if (!this.model) return nothing;\n\n return html`<a\n href=\"${this.baseNavigationUrl}/details/${encodeURI(\n this.model.identifier\n )}\"\n >\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isCompactTile=${false}\n .isListTile=${true}\n .viewSize=${this.classSize}\n .loggedIn=${this.loggedIn}\n >\n </image-block>\n </a> `;\n }\n\n private get detailsTemplate() {\n return html`\n ${this.itemLineTemplate} ${this.creatorTemplate}\n <div id=\"dates-line\">\n ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n </div>\n <div id=\"views-line\">\n ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n </div>\n ${this.topicsTemplate} ${this.collectionsTemplate}\n ${this.descriptionTemplate} ${this.textSnippetsTemplate}\n `;\n }\n\n // Data templates\n private get iconRightTemplate() {\n return html`\n <a id=\"icon-right\" href=${this.mediatypeURL} target=\"_blank\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n >\n </mediatype-icon>\n </a>\n `;\n }\n\n private get titleTemplate() {\n if (!this.model?.title) {\n return nothing;\n }\n\n // If the model has a server-specified href, use it\n // Otherwise construct a details link using the identifier\n return this.model?.href\n ? html`<a href=\"${this.baseNavigationUrl}${this.model.href}\"\n >${this.model.title ?? this.model.identifier}</a\n >`\n : this.detailsLink(this.model.identifier, this.model.title);\n }\n\n private get itemLineTemplate() {\n const source = this.sourceTemplate;\n const volume = this.volumeTemplate;\n const issue = this.issueTemplate;\n if (!source && !volume && !issue) {\n return nothing;\n }\n return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n }\n\n private get sourceTemplate() {\n if (!this.model?.source) {\n return nothing;\n }\n return html`\n <div id=\"source\" class=\"metadata\">\n ${this.labelTemplate('Source')}\n ${this.searchLink('source', this.model.source)}\n </div>\n `;\n }\n\n private get volumeTemplate() {\n return this.metadataTemplate(this.model?.volume, 'Volume');\n }\n\n private get issueTemplate() {\n return this.metadataTemplate(this.model?.issue, 'Issue');\n }\n\n private get creatorTemplate() {\n // \"Archivist since\" if account\n if (this.model?.mediatype === 'account') {\n return html`\n <div id=\"creator\" class=\"metadata\">\n <span class=\"label\"> ${accountLabel(this.model?.dateAdded)} </span>\n </div>\n `;\n }\n // \"Creator\" if not account tile\n if (!this.model?.creators || this.model.creators.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"creator\" class=\"metadata\">\n ${this.labelTemplate('By')}\n ${join(\n map(this.model.creators, id => this.searchLink('creator', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get datePublishedTemplate() {\n return this.metadataTemplate(\n formatDate(this.model?.datePublished, 'long'),\n 'Published'\n );\n }\n\n // Show date label/value when sorted by date type\n // Except datePublished which is always shown\n private get dateSortByTemplate() {\n if (\n this.sortParam &&\n (this.sortParam.field === 'addeddate' ||\n this.sortParam.field === 'reviewdate' ||\n this.sortParam.field === 'publicdate')\n ) {\n return this.metadataTemplate(\n formatDate(this.date, 'long'),\n dateLabel(this.sortParam.field)\n );\n }\n return nothing;\n }\n\n private get viewsTemplate() {\n const viewCount =\n this.sortParam?.field === 'week'\n ? this.model?.weeklyViewCount // weekly views\n : this.model?.viewCount; // all-time views\n\n return this.metadataTemplate(\n `${formatCount(viewCount ?? 0, this.formatSize)}`,\n 'Views'\n );\n }\n\n private get ratingTemplate() {\n return this.metadataTemplate(this.model?.averageRating, 'Avg Rating');\n }\n\n private get reviewsTemplate() {\n return this.metadataTemplate(this.model?.commentCount, 'Reviews');\n }\n\n private get topicsTemplate() {\n if (!this.model?.subjects || this.model.subjects.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"topics\" class=\"metadata\">\n ${this.labelTemplate('Topics')}\n ${join(\n map(this.model.subjects, id => this.searchLink('subject', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get collectionsTemplate() {\n if (!this.collectionLinks || this.collectionLinks.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"collections\" class=\"metadata\">\n ${this.labelTemplate('Collections')}\n ${join(this.collectionLinks, html`, `)}\n </div>\n `;\n }\n\n private get descriptionTemplate() {\n return this.metadataTemplate(\n // Sanitize away any HTML tags and convert line breaks to spaces.\n unsafeHTML(\n DOMPurify.sanitize(this.model?.description?.replace(/\\n/g, ' ') ?? '')\n ),\n '',\n 'description'\n );\n }\n\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n if (!this.hasSnippets) return nothing;\n\n return html`<text-snippet-block\n viewsize=\"list\"\n .snippets=${this.model?.snippets}\n ></text-snippet-block>`;\n }\n\n private get hasSnippets(): boolean {\n return !!this.model?.snippets?.length;\n }\n\n // Utility functions\n // eslint-disable-next-line default-param-last\n private metadataTemplate(text: any, label = '', id?: string) {\n if (!text) return nothing;\n return html`\n <div id=${ifDefined(id)} class=\"metadata\">\n ${this.labelTemplate(label)} ${text}\n </div>\n `;\n }\n\n private labelTemplate(label: string) {\n return html` ${label\n ? html`<span class=\"label\">${label}: </span>`\n : nothing}`;\n }\n\n private searchLink(field: string, searchTerm: string) {\n if (!field || !searchTerm) {\n return nothing;\n }\n const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n // No whitespace after closing tag\n // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n /* eslint-disable lit/no-invalid-html */\n return html`<a\n href=\"${this.baseNavigationUrl}/search?query=${query}\"\n rel=\"nofollow\"\n >\n ${DOMPurify.sanitize(searchTerm)}</a\n >`;\n /* eslint-enable lit/no-invalid-html */\n }\n\n private detailsLink(identifier: string, text?: string): TemplateResult {\n const linkText = text ?? identifier;\n // No whitespace after closing tag\n // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway\n return html`<a\n href=\"${this.baseNavigationUrl}/details/${encodeURI(identifier)}\"\n >${DOMPurify.sanitize(linkText)}</a\n >`;\n }\n\n /** The URL of this item's mediatype collection, if defined. */\n private get mediatypeURL(): string | typeof nothing {\n // NB: baseNavigationUrl can be an empty string\n if (this.baseNavigationUrl === undefined || !this.model?.mediatype)\n return nothing;\n\n // Need special handling for certain mediatypes that don't have a top-level collection page\n switch (this.model.mediatype) {\n case 'collection':\n return `${this.baseNavigationUrl}/search?query=mediatype:collection&sort=-downloads`;\n case 'account':\n return nothing;\n default:\n return `${this.baseNavigationUrl}/details/${encodeURI(\n this.model.mediatype\n )}`;\n }\n }\n\n protected updated(changed: PropertyValues): void {\n if (changed.has('model')) {\n this.fetchCollectionNames();\n }\n }\n\n private async fetchCollectionNames() {\n if (\n !this.model?.collections ||\n this.model.collections.length === 0 ||\n !this.collectionNameCache\n ) {\n return;\n }\n // Note: quirk of Lit: need to replace collectionLinks array,\n // otherwise it will not re-render. Can't simply alter the array.\n this.collectionLinks = [];\n const newCollectionLinks: TemplateResult[] = [];\n const promises: Promise<void>[] = [];\n for (const collection of this.model.collections) {\n // Don't include favorites or collections that are meant to be suppressed\n if (\n !suppressedCollections[collection] &&\n !collection.startsWith('fav-')\n ) {\n promises.push(\n this.collectionNameCache?.collectionNameFor(collection).then(name => {\n newCollectionLinks.push(\n this.detailsLink(collection, name ?? collection)\n );\n })\n );\n }\n }\n await Promise.all(promises);\n this.collectionLinks = newCollectionLinks;\n }\n\n /*\n * TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n */\n private get date(): Date | undefined {\n switch (this.sortParam?.field) {\n case 'date':\n return this.model?.datePublished;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.dateArchived; // publicdate\n }\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): DateFormat | NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n div a {\n text-decoration: none;\n }\n\n div a:link {\n color: var(--ia-theme-link-color, #4b64ff);\n }\n\n .label {\n font-weight: bold;\n }\n\n #list-line.mobile {\n --infiniteScrollerRowGap: 20px;\n --infiniteScrollerRowHeight: auto;\n }\n\n #list-line.desktop {\n --infiniteScrollerRowGap: 30px;\n --infiniteScrollerRowHeight: auto;\n }\n\n /* fields */\n #icon-right {\n width: 20px;\n padding-top: 5px;\n --iconHeight: 20px;\n --iconWidth: 20px;\n --iconTextAlign: right;\n margin-top: -8px;\n text-align: right;\n }\n\n #title {\n color: #4b64ff;\n text-decoration: none;\n font-size: 22px;\n font-weight: bold;\n /* align top of text with image */\n line-height: 25px;\n margin-top: -4px;\n padding-bottom: 2px;\n flex-grow: 1;\n\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n overflow-wrap: anywhere;\n }\n\n .metadata {\n line-height: 20px;\n }\n\n #description,\n #creator,\n #topics,\n #source {\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n word-break: break-word;\n -webkit-line-clamp: 3; /* number of lines to show */\n line-clamp: 3;\n\n /*\n * Safari doesn't always respect the line-clamping rules above,\n * so we add this to ensure these fields still get truncated\n */\n max-height: 60px;\n }\n\n #collections {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n overflow-wrap: anywhere;\n }\n\n #icon {\n padding-top: 5px;\n }\n\n #description {\n padding-top: 10px;\n }\n\n /* Top level container */\n #list-line {\n display: flex;\n }\n\n #list-line.mobile {\n flex-direction: column;\n }\n\n #list-line.desktop {\n column-gap: 10px;\n }\n\n #list-line-top {\n display: flex;\n column-gap: 7px;\n }\n\n #list-line-bottom {\n padding-top: 4px;\n }\n\n #list-line-right,\n #list-line-top,\n #list-line-bottom {\n width: 100%;\n }\n\n /*\n * If the container becomes very tiny, don't let the thumbnail side take\n * up too much space. Shouldn't make a difference on ordinary viewport sizes.\n */\n #list-line-left {\n max-width: 25%;\n\n display: flex;\n flex-direction: column;\n row-gap: 5px;\n }\n\n div a:hover {\n text-decoration: underline;\n }\n\n /* Lines containing multiple div as row */\n #item-line,\n #dates-line,\n #views-line,\n #title-line {\n display: flex;\n flex-direction: row;\n column-gap: 10px;\n }\n\n /*\n * With the exception of the title line, allow these to wrap if\n * the space becomes too small to accommodate them together.\n * \n * The title line is excluded because it contains the mediatype icon\n * which we don't want to wrap.\n */\n #item-line,\n #dates-line,\n #views-line {\n flex-wrap: wrap;\n }\n `;\n }\n}\n"]}
package/dist/src/tiles/text-snippet-block.js CHANGED
@@ -103,6 +103,12 @@ let TextSnippetBlock = class TextSnippetBlock extends LitElement {
103
103
  padding-left: 15px;
104
104
  font-size: 1.4rem;
105
105
  line-height: 2rem;
106
+
107
+ /*
108
+ * Safari doesn't always respect the line-clamping rules,
109
+ * so we add this to ensure these fields still get truncated.
110
+ */
111
+ max-height: 6rem;
106
112
  }
107
113
 
108
114
  mark {
package/dist/src/tiles/text-snippet-block.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"text-snippet-block.js","sourceRoot":"","sources":["../../../src/tiles/text-snippet-block.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAG9C,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAC6B,aAAQ,GAAc,EAAE,CAAC;QAExB,aAAQ,GAAW,SAAS,CAAC;IA8G3D,CAAC;IA5GC,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,CAAA;YAAE,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;QAEpD,OAAO,IAAI,CAAA;;mCAEoB,IAAI,CAAC,QAAQ;YACpC,IAAI,CAAC,sBAAsB;;;KAGlC,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAA;iBACE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAA,YAAY,CAAC;KACzD,CAAC;IACJ,CAAC;IAED;;;;;;;;;;;;;OAaG;IACH,IAAY,gBAAgB;;QAC1B,OAAO,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,CAAC,CAAC,CAAC,EAAE;YAC5B,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAC5C,MAAM,SAAS,GAAqB,EAAE,CAAC;YAEvC,0DAA0D;YAC1D,4EAA4E;YAC5E,qDAAqD;YACrD,+EAA+E;YAC/E,IAAI,KAAK,GAAG,CAAC,CAAC;YACd,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;oBACvB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;cACf,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;oBACrB,KAAK,CAAC,CAAC,CAAC;WACjB,CAAC,CAAC;oBACH,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;iBACvC;aACF;YAED,kDAAkD;YAClD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAExC,gDAAgD;YAChD,OAAO,IAAI,CAAA,SAAS,SAAS,SAAS,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCT,CAAC;IACJ,CAAC;CACF,CAAA;AAhH4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAA0B;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA8B;AAH9C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAiH5B;SAjHY,gBAAgB","sourcesContent":["import {\n css,\n CSSResultGroup,\n html,\n LitElement,\n nothing,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { join } from 'lit/directives/join.js';\n\n@customElement('text-snippet-block')\nexport class TextSnippetBlock extends LitElement {\n @property({ type: Array }) snippets?: string[] = [];\n\n @property({ type: String }) viewSize: string = 'desktop';\n\n render() {\n if (!this.snippets?.length) return html`${nothing}`;\n\n return html`\n <div class=\"container\">\n <div class=\"snippet-view ${this.viewSize}\">\n ${this.ellipsisJoinedSnippets}\n </div>\n </div>\n `;\n }\n\n /**\n * An array of HTML templates derived from the snippets, with ellipses inserted\n * at the beginning, end, and between each pair of snippets.\n */\n private get ellipsisJoinedSnippets(): TemplateResult {\n return html`\n &hellip; ${join(this.snippetTemplates, html` &hellip; `)} &hellip;\n `;\n }\n\n /**\n * Returns an array of HTML span templates containing this item's snippets with all of\n * their `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.\n *\n * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags\n * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.\n *\n * Note on `<em>` vs. `<mark>`:\n * The old search page snippets had search keywords demarcated with `<em>` tags.\n * The `<mark>` tag is semantically more accurate for this use case than `<em>`,\n * but screen-reader behavior may be different. `<em>` will likely be read in a\n * different tone, while `<mark>` is often read no differently than ordinary text\n * in many screen-readers (though there are ways to work around this if needed).\n */\n private get snippetTemplates(): TemplateResult[] | undefined {\n return this.snippets?.map(s => {\n const matches = s.matchAll(/{{{(.+?)}}}/gs);\n const templates: TemplateResult[] = [];\n\n // Convert each match into an HTML template that includes:\n // - Everything from the end of the previous match (or the beginning of the\n // string) up to the current match, as raw text.\n // - The current match (excluding the curly braces) wrapped in a `<mark>` tag.\n let index = 0;\n for (const match of matches) {\n if (match.index != null) {\n templates.push(html`\n ${s.slice(index, match.index)}\n <mark>${match[1]}</mark>\n `);\n index = match.index + match[0].length;\n }\n }\n\n // Include any text from the last match to the end\n templates.push(html`${s.slice(index)}`);\n\n // Squash everything into a single span template\n return html`<span>${templates}</span>`;\n });\n }\n\n static get styles(): CSSResultGroup {\n return css`\n .container {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n width: calc(100% - 10px);\n border-left: 5px solid #194880;\n margin-top: var(--containerTopMargin, 10px);\n margin-left: var(--containerLeftMargin, 0px);\n border-radius: 3px;\n box-sizing: border-box;\n }\n\n .snippet-view {\n display: -webkit-box;\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size: 14px;\n overflow: hidden;\n overflow-wrap: break-word;\n -webkit-line-clamp: var(--maxLines, 3);\n -webkit-box-orient: vertical;\n margin-left: 5px;\n }\n\n .grid {\n font-size: 1.2rem;\n line-height: 1.5rem;\n }\n\n .list {\n margin: 0;\n padding-left: 15px;\n font-size: 1.4rem;\n line-height: 2rem;\n }\n\n mark {\n /* blue, 20% transparency */\n background-color: #0000ff33;\n color: inherit;\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"text-snippet-block.js","sourceRoot":"","sources":["../../../src/tiles/text-snippet-block.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAG9C,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAC6B,aAAQ,GAAc,EAAE,CAAC;QAExB,aAAQ,GAAW,SAAS,CAAC;IAoH3D,CAAC;IAlHC,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,CAAA;YAAE,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;QAEpD,OAAO,IAAI,CAAA;;mCAEoB,IAAI,CAAC,QAAQ;YACpC,IAAI,CAAC,sBAAsB;;;KAGlC,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAA;iBACE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAA,YAAY,CAAC;KACzD,CAAC;IACJ,CAAC;IAED;;;;;;;;;;;;;OAaG;IACH,IAAY,gBAAgB;;QAC1B,OAAO,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,CAAC,CAAC,CAAC,EAAE;YAC5B,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAC5C,MAAM,SAAS,GAAqB,EAAE,CAAC;YAEvC,0DAA0D;YAC1D,4EAA4E;YAC5E,qDAAqD;YACrD,+EAA+E;YAC/E,IAAI,KAAK,GAAG,CAAC,CAAC;YACd,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;oBACvB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;cACf,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;oBACrB,KAAK,CAAC,CAAC,CAAC;WACjB,CAAC,CAAC;oBACH,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;iBACvC;aACF;YAED,kDAAkD;YAClD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAExC,gDAAgD;YAChD,OAAO,IAAI,CAAA,SAAS,SAAS,SAAS,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+CT,CAAC;IACJ,CAAC;CACF,CAAA;AAtH4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAA0B;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA8B;AAH9C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAuH5B;SAvHY,gBAAgB","sourcesContent":["import {\n css,\n CSSResultGroup,\n html,\n LitElement,\n nothing,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { join } from 'lit/directives/join.js';\n\n@customElement('text-snippet-block')\nexport class TextSnippetBlock extends LitElement {\n @property({ type: Array }) snippets?: string[] = [];\n\n @property({ type: String }) viewSize: string = 'desktop';\n\n render() {\n if (!this.snippets?.length) return html`${nothing}`;\n\n return html`\n <div class=\"container\">\n <div class=\"snippet-view ${this.viewSize}\">\n ${this.ellipsisJoinedSnippets}\n </div>\n </div>\n `;\n }\n\n /**\n * An array of HTML templates derived from the snippets, with ellipses inserted\n * at the beginning, end, and between each pair of snippets.\n */\n private get ellipsisJoinedSnippets(): TemplateResult {\n return html`\n &hellip; ${join(this.snippetTemplates, html` &hellip; `)} &hellip;\n `;\n }\n\n /**\n * Returns an array of HTML span templates containing this item's snippets with all of\n * their `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.\n *\n * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags\n * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.\n *\n * Note on `<em>` vs. `<mark>`:\n * The old search page snippets had search keywords demarcated with `<em>` tags.\n * The `<mark>` tag is semantically more accurate for this use case than `<em>`,\n * but screen-reader behavior may be different. `<em>` will likely be read in a\n * different tone, while `<mark>` is often read no differently than ordinary text\n * in many screen-readers (though there are ways to work around this if needed).\n */\n private get snippetTemplates(): TemplateResult[] | undefined {\n return this.snippets?.map(s => {\n const matches = s.matchAll(/{{{(.+?)}}}/gs);\n const templates: TemplateResult[] = [];\n\n // Convert each match into an HTML template that includes:\n // - Everything from the end of the previous match (or the beginning of the\n // string) up to the current match, as raw text.\n // - The current match (excluding the curly braces) wrapped in a `<mark>` tag.\n let index = 0;\n for (const match of matches) {\n if (match.index != null) {\n templates.push(html`\n ${s.slice(index, match.index)}\n <mark>${match[1]}</mark>\n `);\n index = match.index + match[0].length;\n }\n }\n\n // Include any text from the last match to the end\n templates.push(html`${s.slice(index)}`);\n\n // Squash everything into a single span template\n return html`<span>${templates}</span>`;\n });\n }\n\n static get styles(): CSSResultGroup {\n return css`\n .container {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n width: calc(100% - 10px);\n border-left: 5px solid #194880;\n margin-top: var(--containerTopMargin, 10px);\n margin-left: var(--containerLeftMargin, 0px);\n border-radius: 3px;\n box-sizing: border-box;\n }\n\n .snippet-view {\n display: -webkit-box;\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size: 14px;\n overflow: hidden;\n overflow-wrap: break-word;\n -webkit-line-clamp: var(--maxLines, 3);\n -webkit-box-orient: vertical;\n margin-left: 5px;\n }\n\n .grid {\n font-size: 1.2rem;\n line-height: 1.5rem;\n }\n\n .list {\n margin: 0;\n padding-left: 15px;\n font-size: 1.4rem;\n line-height: 2rem;\n\n /*\n * Safari doesn't always respect the line-clamping rules,\n * so we add this to ensure these fields still get truncated.\n */\n max-height: 6rem;\n }\n\n mark {\n /* blue, 20% transparency */\n background-color: #0000ff33;\n color: inherit;\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": "0.4.14-alpha.7",
6
+ "version": "0.4.14",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.js",
9
9
  "scripts": {
package/src/sort-filter-bar/sort-filter-bar.ts CHANGED
@@ -859,6 +859,10 @@ export class SortFilterBar
859
859
  height: 14px;
860
860
  }
861
861
 
862
+ .sort-direction-icon > svg {
863
+ flex: 1;
864
+ }
865
+
862
866
  #date-sort-selector,
863
867
  #view-sort-selector {
864
868
  position: absolute;
package/src/tiles/list/tile-list.ts CHANGED
@@ -518,6 +518,12 @@ export class TileList extends LitElement {
518
518
  word-break: break-word;
519
519
  -webkit-line-clamp: 3; /* number of lines to show */
520
520
  line-clamp: 3;
521
+
522
+ /*
523
+ * Safari doesn't always respect the line-clamping rules above,
524
+ * so we add this to ensure these fields still get truncated
525
+ */
526
+ max-height: 60px;
521
527
  }
522
528
 
523
529
  #collections {
package/src/tiles/text-snippet-block.ts CHANGED
@@ -114,6 +114,12 @@ export class TextSnippetBlock extends LitElement {
114
114
  padding-left: 15px;
115
115
  font-size: 1.4rem;
116
116
  line-height: 2rem;
117
+
118
+ /*
119
+ * Safari doesn't always respect the line-clamping rules,
120
+ * so we add this to ensure these fields still get truncated.
121
+ */
122
+ max-height: 6rem;
117
123
  }
118
124
 
119
125
  mark {