@internetarchive/collection-browser 4.8.1-webdev-9227.1 → 4.8.1-webdev-9227.2
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.
- package/dist/src/collection-browser.js +4 -4
- package/dist/src/collection-browser.js.map +1 -1
- package/dist/src/collection-facets/facet-row-template.d.ts +1 -1
- package/dist/src/collection-facets/facet-row-template.js +10 -6
- package/dist/src/collection-facets/facet-row-template.js.map +1 -1
- package/dist/src/collection-facets/facet-row.js +3 -1
- package/dist/src/collection-facets/facet-row.js.map +1 -1
- package/dist/src/collection-facets/more-facets-content.js +3 -3
- package/dist/src/collection-facets/more-facets-content.js.map +1 -1
- package/dist/src/collection-facets/smart-facets/heuristics/wikidata/wikidata-entity-map.js +13 -4
- package/dist/src/collection-facets/smart-facets/heuristics/wikidata/wikidata-entity-map.js.map +1 -1
- package/dist/src/collection-facets/smart-facets/smart-facet-bar.js +6 -2
- package/dist/src/collection-facets/smart-facets/smart-facet-bar.js.map +1 -1
- package/dist/src/collection-facets.js +3 -3
- package/dist/src/collection-facets.js.map +1 -1
- package/dist/src/locales/es.d.ts +112 -1
- package/dist/src/locales/es.js +112 -1
- package/dist/src/locales/es.js.map +1 -1
- package/dist/src/manage/manage-bar.js +10 -10
- package/dist/src/manage/manage-bar.js.map +1 -1
- package/dist/src/mediatype/mediatype-config.js +55 -18
- package/dist/src/mediatype/mediatype-config.js.map +1 -1
- package/dist/src/models.js +114 -38
- package/dist/src/models.js.map +1 -1
- package/dist/src/sort-filter-bar/alpha-bar-tooltip.js +6 -2
- package/dist/src/sort-filter-bar/alpha-bar-tooltip.js.map +1 -1
- package/dist/src/sort-filter-bar/alpha-bar.js +5 -2
- package/dist/src/sort-filter-bar/alpha-bar.js.map +1 -1
- package/dist/src/sort-filter-bar/sort-filter-bar.js +6 -6
- package/dist/src/sort-filter-bar/sort-filter-bar.js.map +1 -1
- package/dist/src/tiles/grid/collection-tile.js +7 -5
- package/dist/src/tiles/grid/collection-tile.js.map +1 -1
- package/dist/src/tiles/grid/item-tile.js +6 -6
- package/dist/src/tiles/grid/item-tile.js.map +1 -1
- package/dist/src/tiles/grid/tile-stats.js +3 -1
- package/dist/src/tiles/grid/tile-stats.js.map +1 -1
- package/dist/src/tiles/list/tile-list.js +1 -1
- package/dist/src/tiles/list/tile-list.js.map +1 -1
- package/dist/src/tiles/tile-dispatcher.js +1 -1
- package/dist/src/tiles/tile-dispatcher.js.map +1 -1
- package/dist/src/tiles/tile-mediatype-icon.js +3 -1
- package/dist/src/tiles/tile-mediatype-icon.js.map +1 -1
- package/dist/src/utils/format-unit-size.d.ts +1 -1
- package/dist/src/utils/format-unit-size.js +20 -18
- package/dist/src/utils/format-unit-size.js.map +1 -1
- package/package.json +1 -1
|
@@ -64,7 +64,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
|
|
|
64
64
|
render() {
|
|
65
65
|
return html `
|
|
66
66
|
<div id="container">
|
|
67
|
-
<section id="sort-bar" aria-label
|
|
67
|
+
<section id="sort-bar" aria-label=${msg('Sorting options')}>
|
|
68
68
|
<slot name="sort-options-left"></slot>
|
|
69
69
|
<div id="sort-options">
|
|
70
70
|
${!this.enableSortOptionsSlot
|
|
@@ -272,7 +272,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
|
|
|
272
272
|
this.displayMode = 'grid';
|
|
273
273
|
}}
|
|
274
274
|
class=${this.displayMode === 'grid' ? 'active' : ''}
|
|
275
|
-
title
|
|
275
|
+
title=${msg('Tile view')}
|
|
276
276
|
data-testid="grid-button"
|
|
277
277
|
>
|
|
278
278
|
${tileIcon}
|
|
@@ -285,7 +285,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
|
|
|
285
285
|
this.displayMode = 'list-detail';
|
|
286
286
|
}}
|
|
287
287
|
class=${this.displayMode === 'list-detail' ? 'active' : ''}
|
|
288
|
-
title
|
|
288
|
+
title=${msg('List view')}
|
|
289
289
|
data-testid="list-detail-button"
|
|
290
290
|
>
|
|
291
291
|
${listIcon}
|
|
@@ -298,7 +298,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
|
|
|
298
298
|
this.displayMode = 'list-compact';
|
|
299
299
|
}}
|
|
300
300
|
class=${this.displayMode === 'list-compact' ? 'active' : ''}
|
|
301
|
-
title
|
|
301
|
+
title=${msg('Compact list view')}
|
|
302
302
|
data-testid="list-compact-button"
|
|
303
303
|
>
|
|
304
304
|
${compactIcon}
|
|
@@ -384,7 +384,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
|
|
|
384
384
|
return html ` <alpha-bar
|
|
385
385
|
.selectedLetter=${this.selectedTitleFilter}
|
|
386
386
|
.letterCounts=${this.prefixFilterCountMap?.title}
|
|
387
|
-
ariaLandmarkLabel
|
|
387
|
+
ariaLandmarkLabel=${msg('Filter by title letter')}
|
|
388
388
|
@letterChanged=${this.titleLetterChanged}
|
|
389
389
|
></alpha-bar>`;
|
|
390
390
|
}
|
|
@@ -392,7 +392,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
|
|
|
392
392
|
return html ` <alpha-bar
|
|
393
393
|
.selectedLetter=${this.selectedCreatorFilter}
|
|
394
394
|
.letterCounts=${this.prefixFilterCountMap?.creator}
|
|
395
|
-
ariaLandmarkLabel
|
|
395
|
+
ariaLandmarkLabel=${msg('Filter by creator letter')}
|
|
396
396
|
@letterChanged=${this.creatorLetterChanged}
|
|
397
397
|
></alpha-bar>`;
|
|
398
398
|
}
|
|
@@ -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 { localized, msg, str } from '@lit/localize';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SortDirection } from '@internetarchive/search-service';\nimport {\n CollectionDisplayMode,\n defaultSortAvailability,\n PrefixFilterCounts,\n PrefixFilterType,\n SORT_OPTIONS,\n SortField,\n SortOption,\n} from '../models';\n\nimport { sortUpIcon } from './img/sort-toggle-up';\nimport { sortDownIcon } from './img/sort-toggle-down';\nimport { sortDisabledIcon } from './img/sort-toggle-disabled';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\nimport { srOnlyStyle } from '../styles/sr-only';\n\nimport '@internetarchive/ia-dropdown';\nimport './alpha-bar';\n\ntype AlphaSelector = 'creator' | 'title';\n\n@customElement('sort-filter-bar')\n@localized()\nexport class SortFilterBar extends LitElement {\n /** Which display mode the tiles are being rendered with (grid/list-detail/list-compact) */\n @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n /** The default sort direction to use if none is set */\n @property({ type: String }) defaultSortDirection: SortDirection | null = null;\n\n /** The default sort field to use if none is set */\n @property({ type: String }) defaultSortField: Exclude<\n SortField,\n SortField.default\n > = SortField.relevance;\n\n /** The current sort direction (asc/desc), or null if none is set */\n @property({ type: String }) sortDirection: SortDirection | null = null;\n\n /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */\n @property({ type: String }) selectedSort: SortField = SortField.default;\n\n /** The currently selected title letter filter, or null if none is set */\n @property({ type: String }) selectedTitleFilter: string | null = null;\n\n /** The currently selected creator letter filter, or null if none is set */\n @property({ type: String }) selectedCreatorFilter: string | null = null;\n\n /**\n * Map defining which sortable fields should be included on the sort bar.\n *\n * E.g.,\n * ```\n * {\n * [SortField.relevance]: true,\n * [SortField.date]: false,\n * [SortField.title]: true,\n * ...\n * }\n * ```\n */\n @property({ type: Object }) sortFieldAvailability = defaultSortAvailability;\n\n /** Whether to replace the default sort options with a slot for customization (default `false`) */\n @property({ type: Boolean, reflect: true }) enableSortOptionsSlot: boolean =\n false;\n\n /** Whether to suppress showing the three display mode options on the right of the bar (default `false`) */\n @property({ type: Boolean, reflect: true })\n suppressDisplayModes: boolean = false;\n\n /** Maps of result counts for letters on the alphabet bar, for each letter filter type */\n @property({ type: Object }) prefixFilterCountMap?: Record<\n PrefixFilterType,\n PrefixFilterCounts\n >;\n\n /**\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 /** The single, consolidated dropdown component containing all available options */\n @query('#sort-dropdown')\n private sortOptionsDropdown!: IaDropdown;\n\n render() {\n return html`\n <div id=\"container\">\n <section id=\"sort-bar\" aria-label=\"Sorting options\">\n <slot name=\"sort-options-left\"></slot>\n <div id=\"sort-options\">\n ${!this.enableSortOptionsSlot\n ? html`\n <div class=\"sort-direction-container\">\n ${this.sortDirectionSelectorTemplate}\n </div>\n <span class=\"sort-by-text\">${msg('Sort by:')}</span>\n <div id=\"sort-selector-container\">\n ${this.sortSelectorTemplate}\n </div>\n `\n : html`<slot name=\"sort-options\"></slot>`}\n </div>\n <slot name=\"sort-options-right\"></slot>\n\n ${this.suppressDisplayModes\n ? nothing\n : html`<div id=\"display-style-selector\">\n ${this.displayOptionTemplate}\n </div>`}\n </section>\n\n ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}\n ${this.alphaBarTemplate}\n </div>\n `;\n }\n\n willUpdate(changed: PropertyValues) {\n if (changed.has('selectedSort') || changed.has('defaultSortField')) {\n // If the sort is changed from its default without a direction set,\n // we adopt the default sort direction for that sort type.\n if (\n this.selectedSort &&\n this.selectedSort !== SortField.default &&\n this.sortDirection === null\n ) {\n const sortOption = SORT_OPTIONS[this.finalizedSortField];\n this.sortDirection = sortOption.defaultSortDirection;\n }\n }\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('displayMode')) {\n this.displayModeChanged();\n }\n\n if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n this.alphaSelectorVisible = 'title';\n }\n\n if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n this.alphaSelectorVisible = 'creator';\n }\n\n if (changed.has('dropdownBackdropVisible')) {\n this.setupEscapeListeners();\n }\n }\n\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.closeDropdown();\n }\n };\n\n /**\n * Template to render the alphabet bar, or `nothing` if it should not be rendered\n * for the current sort\n */\n private get alphaBarTemplate(): TemplateResult | typeof nothing {\n if (!['title', 'creator'].includes(this.selectedSort)) return nothing;\n\n if (this.alphaSelectorVisible === null) {\n if (this.selectedSort === 'creator') return this.creatorSelectorBar;\n if (this.selectedSort === 'title') return this.titleSelectorBar;\n } else {\n return this.alphaSelectorVisible === 'creator'\n ? this.creatorSelectorBar\n : this.titleSelectorBar;\n }\n\n return nothing;\n }\n\n /** Template to render the sort direction toggle button */\n private get sortDirectionSelectorTemplate(): TemplateResult {\n const oppositeSortDirectionReadable =\n this.sortDirection === 'asc' ? msg('descending') : msg('ascending');\n const buttonLabel = this.canChangeSortDirection\n ? msg(str`Change to ${oppositeSortDirectionReadable} sort`)\n : msg('Directions are not available for the current sort option');\n\n return html`\n <button\n class=\"sort-direction-selector\"\n title=${buttonLabel}\n ?disabled=${!this.canChangeSortDirection}\n @click=${this.handleSortDirectionClicked}\n >\n <span class=\"sr-only\">${buttonLabel}</span>\n ${this.sortDirectionIcon}\n </button>\n `;\n }\n\n /** Template to render the sort direction button's icon in the correct current state */\n private get sortDirectionIcon(): TemplateResult {\n // Show a fully disabled icon for sort options without direction support\n if (!this.canChangeSortDirection) {\n return html`<div class=\"sort-direction-icon\">${sortDisabledIcon}</div>`;\n }\n\n // For all other sorts, show the ascending/descending direction\n return html`\n <div class=\"sort-direction-icon\">\n ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}\n </div>\n `;\n }\n\n /** The template to render all the sort options in a single dropdown */\n private get sortSelectorTemplate() {\n const displayedOptions = Object.values(SORT_OPTIONS).filter(\n opt => opt.shownInSortBar && this.sortFieldAvailability[opt.field],\n );\n\n return html`\n <div id=\"sort-dropdown-container\">\n ${this.getSortDropdown({\n displayName: SORT_OPTIONS[this.finalizedSortField].displayName,\n id: 'sort-dropdown',\n selected: true,\n dropdownOptions: displayedOptions.map(opt =>\n this.getDropdownOption(opt.field),\n ),\n selectedOption: this.finalizedSortField,\n onOptionSelected: this.sortOptionSelected,\n onDropdownClick: () => {\n this.dropdownBackdropVisible = this.sortOptionsDropdown.open;\n this.sortOptionsDropdown.classList.toggle(\n 'open',\n this.sortOptionsDropdown.open,\n );\n },\n })}\n </div>\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 */\n private getSortDropdown(options: {\n displayName: string;\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 }): TemplateResult {\n return html`\n <ia-dropdown\n id=${options.id}\n class=${options.selected ? 'selected' : ''}\n displayCaret\n closeOnSelect\n includeSelectedOption\n .openViaButton=${options.selected}\n .options=${options.dropdownOptions}\n .selectedOption=${options.selectedOption ?? ''}\n @optionSelected=${options.onOptionSelected ?? nothing}\n @click=${options.onDropdownClick ?? nothing}\n >\n <span\n class=\"dropdown-label\"\n slot=\"dropdown-label\"\n data-title=${options.displayName}\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 label: html`\n <span class=\"dropdown-option-label\">\n ${SORT_OPTIONS[sortField].displayName}\n </span>\n `,\n };\n }\n\n /** Handler for when a new sort dropdown option is selected */\n private sortOptionSelected(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 /** Added data-testid for Playwright testing * */\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 data-testid=\"grid-button\"\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 data-testid=\"list-detail-button\"\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 data-testid=\"list-compact-button\"\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.closeDropdown}\n @click=${this.closeDropdown}\n ></div>\n `;\n }\n\n /** Closes the sorting dropdown component's menus */\n private closeDropdown() {\n this.dropdownBackdropVisible = false;\n\n if (!this.sortOptionsDropdown) return;\n this.sortOptionsDropdown.open = false;\n this.sortOptionsDropdown.classList.remove('open');\n }\n\n setSortDirection(sortDirection: SortDirection) {\n this.sortDirection = sortDirection;\n this.emitSortChangedEvent();\n }\n\n /** Toggles the current sort direction between 'asc' and 'desc' */\n private toggleSortDirection() {\n this.setSortDirection(\n this.finalizedSortDirection === 'desc' ? 'asc' : 'desc',\n );\n }\n\n private handleSortDirectionClicked(): void {\n if (\n !this.sortDirection &&\n this.defaultSortField &&\n this.defaultSortDirection\n ) {\n // When the sort direction is merely defaulted (not set by the user), clicking\n // the toggled button should \"promote\" the default sort to an explicitly-set one\n // and then toggle it as usual.\n this.selectedSort = this.defaultSortField;\n this.sortDirection = this.defaultSortDirection;\n }\n\n this.toggleSortDirection();\n }\n\n setSelectedSort(sort: SortField) {\n this.selectedSort = sort;\n // Apply this field's default sort direction\n const sortOption = SORT_OPTIONS[sort];\n this.sortDirection = sortOption.defaultSortDirection;\n this.emitSortChangedEvent();\n }\n\n /** The current sort field, or the default one if no explicit sort is set */\n private get finalizedSortField(): SortField {\n const resolvedField =\n this.selectedSort === SortField.default\n ? this.defaultSortField\n : this.selectedSort;\n if (this.sortFieldAvailability[resolvedField]) return resolvedField;\n\n // Fall back to the first available sort option shown in the sort bar, if\n // the requested one isn't available\n return this.firstAvailableOption?.field ?? resolvedField;\n }\n\n /** The current sort direction, or the default one if no explicit direction is set */\n private get finalizedSortDirection(): SortDirection | null {\n return this.sortDirection === null\n ? this.defaultSortDirection\n : this.sortDirection;\n }\n\n /** The first option shown in the sort dropdown, or undefined if none are available */\n private get firstAvailableOption(): SortOption | undefined {\n return Object.values(SORT_OPTIONS).find(\n opt => opt.shownInSortBar && this.sortFieldAvailability[opt.field],\n );\n }\n\n /** Whether the sort direction button should be enabled for the current sort */\n private get canChangeSortDirection(): boolean {\n return SORT_OPTIONS[this.finalizedSortField].canSetDirection;\n }\n\n private get titleSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedTitleFilter}\n .letterCounts=${this.prefixFilterCountMap?.title}\n ariaLandmarkLabel=\"Filter by title letter\"\n @letterChanged=${this.titleLetterChanged}\n ></alpha-bar>`;\n }\n\n private get creatorSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedCreatorFilter}\n .letterCounts=${this.prefixFilterCountMap?.creator}\n ariaLandmarkLabel=\"Filter by creator letter\"\n @letterChanged=${this.creatorLetterChanged}\n ></alpha-bar>`;\n }\n\n private titleLetterChanged(\n e: CustomEvent<{ selectedLetter: string | undefined }>,\n ) {\n this.selectedTitleFilter = e.detail.selectedLetter ?? null;\n this.emitTitleLetterChangedEvent();\n }\n\n private creatorLetterChanged(\n e: CustomEvent<{ selectedLetter: string | undefined }>,\n ) {\n this.selectedCreatorFilter = e.detail.selectedLetter ?? null;\n this.emitCreatorLetterChangedEvent();\n }\n\n private emitTitleLetterChangedEvent() {\n const event = new CustomEvent<{ selectedLetter: string | null }>(\n 'titleLetterChanged',\n {\n detail: { selectedLetter: this.selectedTitleFilter },\n },\n );\n this.dispatchEvent(event);\n }\n\n private emitCreatorLetterChangedEvent() {\n const event = new CustomEvent<{ selectedLetter: string | null }>(\n 'creatorLetterChanged',\n {\n detail: { selectedLetter: this.selectedCreatorFilter },\n },\n );\n this.dispatchEvent(event);\n }\n\n private displayModeChanged() {\n const event = new CustomEvent<{\n displayMode?: CollectionDisplayMode;\n }>('displayModeChanged', {\n detail: { displayMode: this.displayMode },\n });\n this.dispatchEvent(event);\n }\n\n private emitSortChangedEvent() {\n const event = new CustomEvent<{\n selectedSort: SortField;\n sortDirection: SortDirection | null;\n }>('sortChanged', {\n detail: {\n selectedSort: this.selectedSort,\n sortDirection: this.sortDirection,\n },\n });\n this.dispatchEvent(event);\n }\n\n static get styles() {\n const disabledIconColor = css`#bbbbbb`;\n\n return [\n srOnlyStyle,\n css`\n #container {\n position: relative;\n }\n\n #sort-bar {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding-bottom: 1px;\n border-bottom: 1px solid #2c2c2c;\n font-size: 1.4rem;\n }\n\n #sort-options {\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n\n ul {\n list-style: none;\n display: flex;\n align-items: center;\n margin: 0;\n padding: 0;\n }\n\n li {\n padding: 0;\n }\n\n .sort-by-text {\n margin-right: 5px;\n font-weight: bold;\n white-space: nowrap;\n }\n\n .sort-direction-container {\n display: flex;\n align-self: stretch;\n flex: 0;\n margin: 0 3px;\n }\n\n .sort-direction-selector {\n display: flex;\n justify-content: center;\n width: 30px;\n margin: 0 5px 0 0;\n padding: 7px 8px;\n max-height: fit-content;\n border-radius: 5px;\n background: white;\n border: 1px solid rgb(25, 72, 128);\n appearance: none;\n cursor: pointer;\n }\n\n .sort-direction-selector:disabled {\n cursor: not-allowed;\n border-color: ${disabledIconColor};\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: 12px;\n height: 12px;\n }\n\n .sort-direction-icon > svg {\n flex: 1;\n }\n\n #sort-selector-container {\n flex: 1;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n #sort-dropdown-container {\n display: flex;\n justify-content: flex-start;\n align-items: center;\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 #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: ${disabledIconColor};\n }\n\n #display-style-selector button.active {\n fill: var(--ia-theme-primary-text-color, #2c2c2c);\n }\n\n #display-style-selector button svg {\n width: 24px;\n height: 24px;\n }\n\n ia-dropdown {\n --dropdownTextColor: white;\n --dropdownOffsetTop: 0;\n --dropdownBorderTopWidth: 0;\n --dropdownBorderTopLeftRadius: 0;\n --dropdownBorderTopRightRadius: 0;\n --dropdownWhiteSpace: nowrap;\n --dropdownListZIndex: 2;\n --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n --dropdownSelectedTextColor: white;\n --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n --caretHeight: 9px;\n --caretWidth: 12px;\n --caretPadding: 0 5px 0 0;\n }\n ia-dropdown.selected .dropdown-label {\n font-weight: bold;\n }\n ia-dropdown.open {\n z-index: 2;\n }\n\n .dropdown-label {\n display: inline-block;\n height: 100%;\n padding-left: 5px;\n font-size: 1.4rem;\n font-family: var(--ia-theme-base-font-family);\n line-height: 2;\n color: var(--ia-theme-primary-text-color, #2c2c2c);\n white-space: nowrap;\n user-select: none;\n }\n `,\n ];\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { localized, msg, str } from '@lit/localize';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SortDirection } from '@internetarchive/search-service';\nimport {\n CollectionDisplayMode,\n defaultSortAvailability,\n PrefixFilterCounts,\n PrefixFilterType,\n SORT_OPTIONS,\n SortField,\n SortOption,\n} from '../models';\n\nimport { sortUpIcon } from './img/sort-toggle-up';\nimport { sortDownIcon } from './img/sort-toggle-down';\nimport { sortDisabledIcon } from './img/sort-toggle-disabled';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\nimport { srOnlyStyle } from '../styles/sr-only';\n\nimport '@internetarchive/ia-dropdown';\nimport './alpha-bar';\n\ntype AlphaSelector = 'creator' | 'title';\n\n@customElement('sort-filter-bar')\n@localized()\nexport class SortFilterBar extends LitElement {\n /** Which display mode the tiles are being rendered with (grid/list-detail/list-compact) */\n @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n /** The default sort direction to use if none is set */\n @property({ type: String }) defaultSortDirection: SortDirection | null = null;\n\n /** The default sort field to use if none is set */\n @property({ type: String }) defaultSortField: Exclude<\n SortField,\n SortField.default\n > = SortField.relevance;\n\n /** The current sort direction (asc/desc), or null if none is set */\n @property({ type: String }) sortDirection: SortDirection | null = null;\n\n /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */\n @property({ type: String }) selectedSort: SortField = SortField.default;\n\n /** The currently selected title letter filter, or null if none is set */\n @property({ type: String }) selectedTitleFilter: string | null = null;\n\n /** The currently selected creator letter filter, or null if none is set */\n @property({ type: String }) selectedCreatorFilter: string | null = null;\n\n /**\n * Map defining which sortable fields should be included on the sort bar.\n *\n * E.g.,\n * ```\n * {\n * [SortField.relevance]: true,\n * [SortField.date]: false,\n * [SortField.title]: true,\n * ...\n * }\n * ```\n */\n @property({ type: Object }) sortFieldAvailability = defaultSortAvailability;\n\n /** Whether to replace the default sort options with a slot for customization (default `false`) */\n @property({ type: Boolean, reflect: true }) enableSortOptionsSlot: boolean =\n false;\n\n /** Whether to suppress showing the three display mode options on the right of the bar (default `false`) */\n @property({ type: Boolean, reflect: true })\n suppressDisplayModes: boolean = false;\n\n /** Maps of result counts for letters on the alphabet bar, for each letter filter type */\n @property({ type: Object }) prefixFilterCountMap?: Record<\n PrefixFilterType,\n PrefixFilterCounts\n >;\n\n /**\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 /** The single, consolidated dropdown component containing all available options */\n @query('#sort-dropdown')\n private sortOptionsDropdown!: IaDropdown;\n\n render() {\n return html`\n <div id=\"container\">\n <section id=\"sort-bar\" aria-label=${msg('Sorting options')}>\n <slot name=\"sort-options-left\"></slot>\n <div id=\"sort-options\">\n ${!this.enableSortOptionsSlot\n ? html`\n <div class=\"sort-direction-container\">\n ${this.sortDirectionSelectorTemplate}\n </div>\n <span class=\"sort-by-text\">${msg('Sort by:')}</span>\n <div id=\"sort-selector-container\">\n ${this.sortSelectorTemplate}\n </div>\n `\n : html`<slot name=\"sort-options\"></slot>`}\n </div>\n <slot name=\"sort-options-right\"></slot>\n\n ${this.suppressDisplayModes\n ? nothing\n : html`<div id=\"display-style-selector\">\n ${this.displayOptionTemplate}\n </div>`}\n </section>\n\n ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}\n ${this.alphaBarTemplate}\n </div>\n `;\n }\n\n willUpdate(changed: PropertyValues) {\n if (changed.has('selectedSort') || changed.has('defaultSortField')) {\n // If the sort is changed from its default without a direction set,\n // we adopt the default sort direction for that sort type.\n if (\n this.selectedSort &&\n this.selectedSort !== SortField.default &&\n this.sortDirection === null\n ) {\n const sortOption = SORT_OPTIONS[this.finalizedSortField];\n this.sortDirection = sortOption.defaultSortDirection;\n }\n }\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('displayMode')) {\n this.displayModeChanged();\n }\n\n if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n this.alphaSelectorVisible = 'title';\n }\n\n if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n this.alphaSelectorVisible = 'creator';\n }\n\n if (changed.has('dropdownBackdropVisible')) {\n this.setupEscapeListeners();\n }\n }\n\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.closeDropdown();\n }\n };\n\n /**\n * Template to render the alphabet bar, or `nothing` if it should not be rendered\n * for the current sort\n */\n private get alphaBarTemplate(): TemplateResult | typeof nothing {\n if (!['title', 'creator'].includes(this.selectedSort)) return nothing;\n\n if (this.alphaSelectorVisible === null) {\n if (this.selectedSort === 'creator') return this.creatorSelectorBar;\n if (this.selectedSort === 'title') return this.titleSelectorBar;\n } else {\n return this.alphaSelectorVisible === 'creator'\n ? this.creatorSelectorBar\n : this.titleSelectorBar;\n }\n\n return nothing;\n }\n\n /** Template to render the sort direction toggle button */\n private get sortDirectionSelectorTemplate(): TemplateResult {\n const oppositeSortDirectionReadable =\n this.sortDirection === 'asc' ? msg('descending') : msg('ascending');\n const buttonLabel = this.canChangeSortDirection\n ? msg(str`Change to ${oppositeSortDirectionReadable} sort`)\n : msg('Directions are not available for the current sort option');\n\n return html`\n <button\n class=\"sort-direction-selector\"\n title=${buttonLabel}\n ?disabled=${!this.canChangeSortDirection}\n @click=${this.handleSortDirectionClicked}\n >\n <span class=\"sr-only\">${buttonLabel}</span>\n ${this.sortDirectionIcon}\n </button>\n `;\n }\n\n /** Template to render the sort direction button's icon in the correct current state */\n private get sortDirectionIcon(): TemplateResult {\n // Show a fully disabled icon for sort options without direction support\n if (!this.canChangeSortDirection) {\n return html`<div class=\"sort-direction-icon\">${sortDisabledIcon}</div>`;\n }\n\n // For all other sorts, show the ascending/descending direction\n return html`\n <div class=\"sort-direction-icon\">\n ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}\n </div>\n `;\n }\n\n /** The template to render all the sort options in a single dropdown */\n private get sortSelectorTemplate() {\n const displayedOptions = Object.values(SORT_OPTIONS).filter(\n opt => opt.shownInSortBar && this.sortFieldAvailability[opt.field],\n );\n\n return html`\n <div id=\"sort-dropdown-container\">\n ${this.getSortDropdown({\n displayName: SORT_OPTIONS[this.finalizedSortField].displayName,\n id: 'sort-dropdown',\n selected: true,\n dropdownOptions: displayedOptions.map(opt =>\n this.getDropdownOption(opt.field),\n ),\n selectedOption: this.finalizedSortField,\n onOptionSelected: this.sortOptionSelected,\n onDropdownClick: () => {\n this.dropdownBackdropVisible = this.sortOptionsDropdown.open;\n this.sortOptionsDropdown.classList.toggle(\n 'open',\n this.sortOptionsDropdown.open,\n );\n },\n })}\n </div>\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 */\n private getSortDropdown(options: {\n displayName: string;\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 }): TemplateResult {\n return html`\n <ia-dropdown\n id=${options.id}\n class=${options.selected ? 'selected' : ''}\n displayCaret\n closeOnSelect\n includeSelectedOption\n .openViaButton=${options.selected}\n .options=${options.dropdownOptions}\n .selectedOption=${options.selectedOption ?? ''}\n @optionSelected=${options.onOptionSelected ?? nothing}\n @click=${options.onDropdownClick ?? nothing}\n >\n <span\n class=\"dropdown-label\"\n slot=\"dropdown-label\"\n data-title=${options.displayName}\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 label: html`\n <span class=\"dropdown-option-label\">\n ${SORT_OPTIONS[sortField].displayName}\n </span>\n `,\n };\n }\n\n /** Handler for when a new sort dropdown option is selected */\n private sortOptionSelected(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 /** Added data-testid for Playwright testing * */\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=${msg('Tile view')}\n data-testid=\"grid-button\"\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=${msg('List view')}\n data-testid=\"list-detail-button\"\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=${msg('Compact list view')}\n data-testid=\"list-compact-button\"\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.closeDropdown}\n @click=${this.closeDropdown}\n ></div>\n `;\n }\n\n /** Closes the sorting dropdown component's menus */\n private closeDropdown() {\n this.dropdownBackdropVisible = false;\n\n if (!this.sortOptionsDropdown) return;\n this.sortOptionsDropdown.open = false;\n this.sortOptionsDropdown.classList.remove('open');\n }\n\n setSortDirection(sortDirection: SortDirection) {\n this.sortDirection = sortDirection;\n this.emitSortChangedEvent();\n }\n\n /** Toggles the current sort direction between 'asc' and 'desc' */\n private toggleSortDirection() {\n this.setSortDirection(\n this.finalizedSortDirection === 'desc' ? 'asc' : 'desc',\n );\n }\n\n private handleSortDirectionClicked(): void {\n if (\n !this.sortDirection &&\n this.defaultSortField &&\n this.defaultSortDirection\n ) {\n // When the sort direction is merely defaulted (not set by the user), clicking\n // the toggled button should \"promote\" the default sort to an explicitly-set one\n // and then toggle it as usual.\n this.selectedSort = this.defaultSortField;\n this.sortDirection = this.defaultSortDirection;\n }\n\n this.toggleSortDirection();\n }\n\n setSelectedSort(sort: SortField) {\n this.selectedSort = sort;\n // Apply this field's default sort direction\n const sortOption = SORT_OPTIONS[sort];\n this.sortDirection = sortOption.defaultSortDirection;\n this.emitSortChangedEvent();\n }\n\n /** The current sort field, or the default one if no explicit sort is set */\n private get finalizedSortField(): SortField {\n const resolvedField =\n this.selectedSort === SortField.default\n ? this.defaultSortField\n : this.selectedSort;\n if (this.sortFieldAvailability[resolvedField]) return resolvedField;\n\n // Fall back to the first available sort option shown in the sort bar, if\n // the requested one isn't available\n return this.firstAvailableOption?.field ?? resolvedField;\n }\n\n /** The current sort direction, or the default one if no explicit direction is set */\n private get finalizedSortDirection(): SortDirection | null {\n return this.sortDirection === null\n ? this.defaultSortDirection\n : this.sortDirection;\n }\n\n /** The first option shown in the sort dropdown, or undefined if none are available */\n private get firstAvailableOption(): SortOption | undefined {\n return Object.values(SORT_OPTIONS).find(\n opt => opt.shownInSortBar && this.sortFieldAvailability[opt.field],\n );\n }\n\n /** Whether the sort direction button should be enabled for the current sort */\n private get canChangeSortDirection(): boolean {\n return SORT_OPTIONS[this.finalizedSortField].canSetDirection;\n }\n\n private get titleSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedTitleFilter}\n .letterCounts=${this.prefixFilterCountMap?.title}\n ariaLandmarkLabel=${msg('Filter by title letter')}\n @letterChanged=${this.titleLetterChanged}\n ></alpha-bar>`;\n }\n\n private get creatorSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedCreatorFilter}\n .letterCounts=${this.prefixFilterCountMap?.creator}\n ariaLandmarkLabel=${msg('Filter by creator letter')}\n @letterChanged=${this.creatorLetterChanged}\n ></alpha-bar>`;\n }\n\n private titleLetterChanged(\n e: CustomEvent<{ selectedLetter: string | undefined }>,\n ) {\n this.selectedTitleFilter = e.detail.selectedLetter ?? null;\n this.emitTitleLetterChangedEvent();\n }\n\n private creatorLetterChanged(\n e: CustomEvent<{ selectedLetter: string | undefined }>,\n ) {\n this.selectedCreatorFilter = e.detail.selectedLetter ?? null;\n this.emitCreatorLetterChangedEvent();\n }\n\n private emitTitleLetterChangedEvent() {\n const event = new CustomEvent<{ selectedLetter: string | null }>(\n 'titleLetterChanged',\n {\n detail: { selectedLetter: this.selectedTitleFilter },\n },\n );\n this.dispatchEvent(event);\n }\n\n private emitCreatorLetterChangedEvent() {\n const event = new CustomEvent<{ selectedLetter: string | null }>(\n 'creatorLetterChanged',\n {\n detail: { selectedLetter: this.selectedCreatorFilter },\n },\n );\n this.dispatchEvent(event);\n }\n\n private displayModeChanged() {\n const event = new CustomEvent<{\n displayMode?: CollectionDisplayMode;\n }>('displayModeChanged', {\n detail: { displayMode: this.displayMode },\n });\n this.dispatchEvent(event);\n }\n\n private emitSortChangedEvent() {\n const event = new CustomEvent<{\n selectedSort: SortField;\n sortDirection: SortDirection | null;\n }>('sortChanged', {\n detail: {\n selectedSort: this.selectedSort,\n sortDirection: this.sortDirection,\n },\n });\n this.dispatchEvent(event);\n }\n\n static get styles() {\n const disabledIconColor = css`#bbbbbb`;\n\n return [\n srOnlyStyle,\n css`\n #container {\n position: relative;\n }\n\n #sort-bar {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding-bottom: 1px;\n border-bottom: 1px solid #2c2c2c;\n font-size: 1.4rem;\n }\n\n #sort-options {\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n\n ul {\n list-style: none;\n display: flex;\n align-items: center;\n margin: 0;\n padding: 0;\n }\n\n li {\n padding: 0;\n }\n\n .sort-by-text {\n margin-right: 5px;\n font-weight: bold;\n white-space: nowrap;\n }\n\n .sort-direction-container {\n display: flex;\n align-self: stretch;\n flex: 0;\n margin: 0 3px;\n }\n\n .sort-direction-selector {\n display: flex;\n justify-content: center;\n width: 30px;\n margin: 0 5px 0 0;\n padding: 7px 8px;\n max-height: fit-content;\n border-radius: 5px;\n background: white;\n border: 1px solid rgb(25, 72, 128);\n appearance: none;\n cursor: pointer;\n }\n\n .sort-direction-selector:disabled {\n cursor: not-allowed;\n border-color: ${disabledIconColor};\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: 12px;\n height: 12px;\n }\n\n .sort-direction-icon > svg {\n flex: 1;\n }\n\n #sort-selector-container {\n flex: 1;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n #sort-dropdown-container {\n display: flex;\n justify-content: flex-start;\n align-items: center;\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 #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: ${disabledIconColor};\n }\n\n #display-style-selector button.active {\n fill: var(--ia-theme-primary-text-color, #2c2c2c);\n }\n\n #display-style-selector button svg {\n width: 24px;\n height: 24px;\n }\n\n ia-dropdown {\n --dropdownTextColor: white;\n --dropdownOffsetTop: 0;\n --dropdownBorderTopWidth: 0;\n --dropdownBorderTopLeftRadius: 0;\n --dropdownBorderTopRightRadius: 0;\n --dropdownWhiteSpace: nowrap;\n --dropdownListZIndex: 2;\n --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n --dropdownSelectedTextColor: white;\n --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n --caretHeight: 9px;\n --caretWidth: 12px;\n --caretPadding: 0 5px 0 0;\n }\n ia-dropdown.selected .dropdown-label {\n font-weight: bold;\n }\n ia-dropdown.open {\n z-index: 2;\n }\n\n .dropdown-label {\n display: inline-block;\n height: 100%;\n padding-left: 5px;\n font-size: 1.4rem;\n font-family: var(--ia-theme-base-font-family);\n line-height: 2;\n color: var(--ia-theme-primary-text-color, #2c2c2c);\n white-space: nowrap;\n user-select: none;\n }\n `,\n ];\n }\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { css, html, nothing } from 'lit';
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
|
-
import { localized, msg } from '@lit/localize';
|
|
5
|
+
import { localized, msg, str } from '@lit/localize';
|
|
6
6
|
import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
|
|
7
7
|
import { formatUnitSize } from '../../utils/format-unit-size';
|
|
8
8
|
import { baseTileStyles } from './styles/tile-grid-shared-styles';
|
|
@@ -75,10 +75,12 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
|
|
|
75
75
|
`;
|
|
76
76
|
}
|
|
77
77
|
get getItemsTemplate() {
|
|
78
|
-
const
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
78
|
+
const itemCount = this.model?.itemCount;
|
|
79
|
+
const formattedCount = itemCount?.toLocaleString();
|
|
80
|
+
const itemsLabel = itemCount === 1
|
|
81
|
+
? msg(str `${formattedCount} item`)
|
|
82
|
+
: msg(str `${formattedCount} items`);
|
|
83
|
+
return html `<span id="item-count">${itemsLabel}</span>`;
|
|
82
84
|
}
|
|
83
85
|
get getSizeTemplate() {
|
|
84
86
|
const collectionSize = this.model?.collectionSize ?? 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { localized, msg, str } from '@lit/localize';\nimport { collectionIcon } from '../../assets/img/icons/mediatype/collection';\nimport { formatUnitSize } from '../../utils/format-unit-size';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { BaseTileComponent } from '../base-tile-component';\nimport { LayoutType } from '../models';\nimport '../image-block';\n\n@customElement('collection-tile')\n@localized()\nexport class CollectionTile extends BaseTileComponent {\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n * - suppressBlurring = false;\n * - useLocalTime = false;\n */\n\n @property({ type: Boolean }) showInfoButton = false;\n\n @property({ type: String }) layoutType: LayoutType = 'default';\n\n render() {\n const containerClasses = classMap({\n container: true,\n minimal: this.layoutType === 'minimal',\n });\n\n return html`\n <div class=${containerClasses}>\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.getImageBlockTemplate} ${this.getTitleTemplate}\n </div>\n </div>\n\n ${this.getTileStatsTemplate}\n </div>\n `;\n }\n\n private get getImageBlockTemplate(): TemplateResult {\n return html`\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .viewSize=${'grid'}\n .suppressBlurring=${this.suppressBlurring}\n >\n </image-block>\n `;\n }\n\n private get getTitleTemplate() {\n return html`<div id=\"title\">\n <h3 class=\"truncated\">${this.model?.title}</h3>\n </div>`;\n }\n\n private get getTileStatsTemplate() {\n return html`\n <div id=\"item-stats\">\n <div id=\"item-mediatype\">${collectionIcon}</div>\n\n <div id=\"stats-row\">\n ${this.getItemsTemplate} ${this.getSizeTemplate}\n </div>\n </div>\n `;\n }\n\n private get getItemsTemplate() {\n const itemCount = this.model?.itemCount;\n const formattedCount = itemCount?.toLocaleString();\n const itemsLabel =\n itemCount === 1\n ? msg(str`${formattedCount} item`)\n : msg(str`${formattedCount} items`);\n\n return html`<span id=\"item-count\">${itemsLabel}</span>`;\n }\n\n private get getSizeTemplate() {\n const collectionSize = this.model?.collectionSize ?? 0;\n\n return collectionSize\n ? html`<span id=\"item-size\">${formatUnitSize(collectionSize, 1)}</span>`\n : ``;\n }\n\n private get infoButtonTemplate(): TemplateResult | typeof nothing {\n // ⓘ is an information icon\n return this.showInfoButton\n ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n ⓘ\n <span class=\"sr-only\">${msg('More info')}</span>\n </button>`\n : nothing;\n }\n\n private infoButtonPressed(e: PointerEvent) {\n e.preventDefault();\n const event = new CustomEvent<{ x: number; y: number }>(\n 'infoButtonPressed',\n { detail: { x: e.clientX, y: e.clientY } },\n );\n this.dispatchEvent(event);\n }\n\n static get styles(): CSSResultGroup {\n const tileBorderColor = css`var(--tileBorderColor, #555555)`;\n const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;\n const whiteColor = css`#fff`;\n\n return [\n baseTileStyles,\n css`\n .container {\n background-color: ${tileBackgroundColor};\n border: 1px solid ${tileBorderColor};\n }\n\n .item-info {\n flex-grow: initial;\n }\n\n h4.truncated,\n h3.truncated {\n color: ${whiteColor};\n }\n\n #item-mediatype svg {\n filter: invert(100%);\n height: 2.5rem;\n align-items: baseline;\n }\n\n .container:hover > #title {\n text-decoration: underline;\n }\n\n /* this is a workaround for Safari 15 where the hover effects are not working */\n image-block:hover > #title {\n text-decoration: underline;\n }\n\n #item-stats {\n display: flex;\n padding: 0 5px 5px;\n align-items: center;\n }\n\n #stats-row {\n display: flex;\n align-items: baseline;\n color: ${whiteColor};\n flex-direction: column;\n margin-left: 10px;\n }\n\n .minimal #item-stats {\n display: none;\n }\n\n .minimal .truncated {\n -webkit-line-clamp: initial;\n }\n\n .minimal .item-info {\n padding-bottom: 5px;\n }\n `,\n ];\n }\n}\n"]}
|
|
@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
|
|
|
4
4
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
5
|
import { map } from 'lit/directives/map.js';
|
|
6
6
|
import { classMap } from 'lit/directives/class-map.js';
|
|
7
|
-
import { localized, msg } from '@lit/localize';
|
|
7
|
+
import { localized, msg, str } from '@lit/localize';
|
|
8
8
|
import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
|
|
9
9
|
import { BaseTileComponent } from '../base-tile-component';
|
|
10
10
|
import { baseTileStyles } from './styles/tile-grid-shared-styles';
|
|
@@ -83,7 +83,7 @@ let ItemTile = class ItemTile extends BaseTileComponent {
|
|
|
83
83
|
return html `
|
|
84
84
|
<div class="created-by">
|
|
85
85
|
<span class="truncated" title=${displayedCreator}>
|
|
86
|
-
by
|
|
86
|
+
${msg(str `by\u00a0${displayedCreator}`)}
|
|
87
87
|
</span>
|
|
88
88
|
</div>
|
|
89
89
|
`;
|
|
@@ -175,8 +175,8 @@ let ItemTile = class ItemTile extends BaseTileComponent {
|
|
|
175
175
|
return nothing;
|
|
176
176
|
return html `
|
|
177
177
|
<div class="volume-issue">
|
|
178
|
-
<span class="truncated" title
|
|
179
|
-
Volume
|
|
178
|
+
<span class="truncated" title=${msg('volume|issue')}>
|
|
179
|
+
${msg(str `Volume\u00a0${this.model.volume}, Issue\u00a0${this.model.issue}`)}
|
|
180
180
|
</span>
|
|
181
181
|
</div>
|
|
182
182
|
`;
|
|
@@ -201,8 +201,8 @@ let ItemTile = class ItemTile extends BaseTileComponent {
|
|
|
201
201
|
}
|
|
202
202
|
const effectiveSort = this.sortParam ?? this.defaultSortParam;
|
|
203
203
|
const [viewCount, viewLabel] = effectiveSort?.field === 'week'
|
|
204
|
-
? [this.model?.weeklyViewCount, 'weekly views']
|
|
205
|
-
: [this.model?.viewCount, 'all-time views'];
|
|
204
|
+
? [this.model?.weeklyViewCount, msg('weekly views')]
|
|
205
|
+
: [this.model?.viewCount, msg('all-time views')];
|
|
206
206
|
return html `
|
|
207
207
|
<tile-stats
|
|
208
208
|
.model=${this.model}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { map } from 'lit/directives/map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { localized, msg } from '@lit/localize';\n\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport { BaseTileComponent } from '../base-tile-component';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { LayoutType } from '../models';\n\nimport '../image-block';\nimport '../review-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../tile-mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\n@localized()\nexport class ItemTile extends BaseTileComponent {\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - tileActions: TileAction[] = [];\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - defaultSortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n * - suppressBlurring = false;\n * - useLocalTime = false;\n */\n\n @property({ type: Boolean }) showInfoButton = false;\n\n @property({ type: Boolean }) showTvClips = false;\n\n @property({ type: String }) layoutType: LayoutType = 'default';\n\n render() {\n const itemTitle = this.model?.title;\n const containerClasses = classMap({\n container: true,\n simple: this.layoutType !== 'default',\n 'stats-only': this.layoutType === 'stats-only',\n 'snippets-only': this.layoutType === 'snippets-only',\n minimal: this.layoutType === 'minimal',\n });\n\n return html`\n <div class=${containerClasses}>\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.imageBlockTemplate}\n\n <div id=\"title\">\n <h3 class=\"truncated\" title=${ifDefined(itemTitle)}>\n ${itemTitle}\n </h3>\n </div>\n\n ${this.volumeIssueTemplate}\n ${this.isSortedByDate\n ? this.sortedDateInfoTemplate\n : this.creatorTemplate}\n ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}\n ${this.reviewBlockTemplate}\n </div>\n\n ${this.tileStatsTemplate}\n </div>\n </div>\n `;\n }\n\n /**\n * Templates\n */\n private get creatorTemplate(): TemplateResult | typeof nothing {\n const displayedCreator =\n this.displayValueProvider.firstCreatorMatchingFilter;\n if (!displayedCreator) return nothing;\n\n return html`\n <div class=\"created-by\">\n <span class=\"truncated\" title=${displayedCreator}>\n by ${displayedCreator}\n </span>\n </div>\n `;\n }\n\n private get imageBlockTemplate(): TemplateResult {\n return html`\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n .suppressBlurring=${this.suppressBlurring}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'grid'}\n >\n </image-block>\n `;\n }\n\n private get sortedDateInfoTemplate() {\n let sortedValue;\n let format: DateFormat = 'long';\n switch (this.effectiveSort?.field) {\n case 'date': {\n const datePublished = this.model?.datePublished;\n sortedValue = { field: 'published', value: datePublished };\n if (isFirstMillisecondOfUTCYear(datePublished)) {\n format = 'year-only';\n }\n break;\n }\n case 'reviewdate':\n sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n break;\n case 'addeddate':\n sortedValue = { field: 'added', value: this.model?.dateAdded };\n break;\n case 'publicdate':\n sortedValue = { field: 'archived', value: this.model?.dateArchived };\n break;\n default:\n break;\n }\n\n if (!sortedValue?.value) {\n return nothing;\n }\n\n const formattedDate = this.getFormattedDate(sortedValue.value, format);\n return html`\n <div class=\"date-sorted-by truncated\">\n <span>${sortedValue.field} ${formattedDate}</span>\n </div>\n `;\n }\n\n private get infoButtonTemplate(): TemplateResult | typeof nothing {\n // ⓘ is an information icon\n return this.showInfoButton\n ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n ⓘ\n <span class=\"sr-only\">${msg('More info')}</span>\n </button>`\n : nothing;\n }\n\n private get reviewBlockTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.review) return nothing;\n\n const { reviewtitle, reviewbody, stars } = this.model.review;\n return html`\n <review-block\n viewsize=\"grid\"\n title=${ifDefined(reviewtitle)}\n body=${ifDefined(reviewbody)}\n starRating=${ifDefined(stars)}\n >\n </review-block>\n `;\n }\n\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n if (!this.hasSnippets) return nothing;\n if (['stats-only', 'minimal'].includes(this.layoutType)) {\n return nothing;\n }\n\n return html`\n <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\n </text-snippet-block>\n `;\n }\n\n private get volumeIssueTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.volume || !this.model?.issue) return nothing;\n\n return html`\n <div class=\"volume-issue\">\n <span class=\"truncated\" title=\"volume|issue\">\n Volume ${this.model?.volume}, Issue ${this.model?.issue}\n </span>\n </div>\n `;\n }\n\n private get webArchivesCaptureDatesTemplate():\n | TemplateResult\n | typeof nothing {\n if (!this.model?.captureDates || !this.model.title) return nothing;\n\n return html`\n <ul class=\"capture-dates\">\n ${map(\n this.model.captureDates,\n date =>\n html`<li>\n ${this.displayValueProvider.webArchivesCaptureLink(\n this.model!.title,\n date,\n )}\n </li>`,\n )}\n </ul>\n `;\n }\n\n /**\n * Template for the stats row along the bottom of the tile.\n */\n private get tileStatsTemplate(): TemplateResult | typeof nothing {\n if (['snippets-only', 'minimal'].includes(this.layoutType)) {\n return nothing;\n }\n\n const effectiveSort = this.sortParam ?? this.defaultSortParam;\n const [viewCount, viewLabel] =\n effectiveSort?.field === 'week'\n ? [this.model?.weeklyViewCount, 'weekly views']\n : [this.model?.viewCount, 'all-time views'];\n\n return html`\n <tile-stats\n .model=${this.model}\n .mediatype=${this.model?.mediatype}\n .viewCount=${viewCount}\n .viewLabel=${viewLabel}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n .tvClipCount=${this.model?.tvClipCount}\n .showTvClips=${this.showTvClips}\n >\n </tile-stats>\n `;\n }\n\n private get isSortedByDate(): boolean {\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n this.effectiveSort?.field as string,\n );\n }\n\n /**\n * Returns the active sort param if one is set, or the default sort param otherwise.\n */\n private get effectiveSort(): SortParam | null {\n return this.sortParam ?? this.defaultSortParam;\n }\n\n private get hasSnippets(): boolean {\n return !!this.model?.snippets?.length;\n }\n\n private infoButtonPressed(e: PointerEvent): void {\n e.preventDefault();\n const event = new CustomEvent<{ x: number; y: number }>(\n 'infoButtonPressed',\n { detail: { x: e.clientX, y: e.clientY } },\n );\n this.dispatchEvent(event);\n }\n\n /**\n * CSS\n */\n static get styles(): CSSResultGroup {\n const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n return [\n baseTileStyles,\n css`\n a:link {\n text-decoration: none;\n color: var(--ia-theme-link-color, #4b64ff);\n }\n a:hover {\n text-decoration: underline;\n }\n\n .container {\n border: 1px solid ${tileBorderColor};\n }\n\n .simple #title > .truncated {\n -webkit-line-clamp: 2;\n }\n\n .simple .created-by > .truncated,\n .simple .date-sorted-by > .truncated,\n .simple .volume-issue > .truncated {\n -webkit-line-clamp: 1;\n }\n\n .simple.snippets-only .item-info,\n .simple.minimal .item-info {\n padding-bottom: 5px;\n }\n\n .simple.snippets-only text-snippet-block {\n margin-top: auto; /* Force the snippets to the bottom of the tile */\n }\n\n .capture-dates {\n margin: 0;\n padding: 0 5px;\n list-style-type: none;\n }\n\n review-block,\n text-snippet-block {\n --containerLeftMargin: 5px;\n --containerTopMargin: 5px;\n }\n\n /**\n * iOS Safari long-press on tiles (to bring up hover pane)\n * gets messy without this\n */\n @media screen and (pointer: coarse) and (hover: none) {\n .container {\n -webkit-touch-callout: none;\n }\n\n .truncated {\n -webkit-touch-callout: default;\n }\n }\n `,\n ];\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { map } from 'lit/directives/map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { localized, msg, str } from '@lit/localize';\n\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport { BaseTileComponent } from '../base-tile-component';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { LayoutType } from '../models';\n\nimport '../image-block';\nimport '../review-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../tile-mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\n@localized()\nexport class ItemTile extends BaseTileComponent {\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - tileActions: TileAction[] = [];\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - defaultSortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n * - suppressBlurring = false;\n * - useLocalTime = false;\n */\n\n @property({ type: Boolean }) showInfoButton = false;\n\n @property({ type: Boolean }) showTvClips = false;\n\n @property({ type: String }) layoutType: LayoutType = 'default';\n\n render() {\n const itemTitle = this.model?.title;\n const containerClasses = classMap({\n container: true,\n simple: this.layoutType !== 'default',\n 'stats-only': this.layoutType === 'stats-only',\n 'snippets-only': this.layoutType === 'snippets-only',\n minimal: this.layoutType === 'minimal',\n });\n\n return html`\n <div class=${containerClasses}>\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.imageBlockTemplate}\n\n <div id=\"title\">\n <h3 class=\"truncated\" title=${ifDefined(itemTitle)}>\n ${itemTitle}\n </h3>\n </div>\n\n ${this.volumeIssueTemplate}\n ${this.isSortedByDate\n ? this.sortedDateInfoTemplate\n : this.creatorTemplate}\n ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}\n ${this.reviewBlockTemplate}\n </div>\n\n ${this.tileStatsTemplate}\n </div>\n </div>\n `;\n }\n\n /**\n * Templates\n */\n private get creatorTemplate(): TemplateResult | typeof nothing {\n const displayedCreator =\n this.displayValueProvider.firstCreatorMatchingFilter;\n if (!displayedCreator) return nothing;\n\n return html`\n <div class=\"created-by\">\n <span class=\"truncated\" title=${displayedCreator}>\n ${msg(str`by\\u00a0${displayedCreator}`)}\n </span>\n </div>\n `;\n }\n\n private get imageBlockTemplate(): TemplateResult {\n return html`\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n .suppressBlurring=${this.suppressBlurring}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'grid'}\n >\n </image-block>\n `;\n }\n\n private get sortedDateInfoTemplate() {\n let sortedValue;\n let format: DateFormat = 'long';\n switch (this.effectiveSort?.field) {\n case 'date': {\n const datePublished = this.model?.datePublished;\n sortedValue = { field: 'published', value: datePublished };\n if (isFirstMillisecondOfUTCYear(datePublished)) {\n format = 'year-only';\n }\n break;\n }\n case 'reviewdate':\n sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n break;\n case 'addeddate':\n sortedValue = { field: 'added', value: this.model?.dateAdded };\n break;\n case 'publicdate':\n sortedValue = { field: 'archived', value: this.model?.dateArchived };\n break;\n default:\n break;\n }\n\n if (!sortedValue?.value) {\n return nothing;\n }\n\n const formattedDate = this.getFormattedDate(sortedValue.value, format);\n return html`\n <div class=\"date-sorted-by truncated\">\n <span>${sortedValue.field} ${formattedDate}</span>\n </div>\n `;\n }\n\n private get infoButtonTemplate(): TemplateResult | typeof nothing {\n // ⓘ is an information icon\n return this.showInfoButton\n ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n ⓘ\n <span class=\"sr-only\">${msg('More info')}</span>\n </button>`\n : nothing;\n }\n\n private get reviewBlockTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.review) return nothing;\n\n const { reviewtitle, reviewbody, stars } = this.model.review;\n return html`\n <review-block\n viewsize=\"grid\"\n title=${ifDefined(reviewtitle)}\n body=${ifDefined(reviewbody)}\n starRating=${ifDefined(stars)}\n >\n </review-block>\n `;\n }\n\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n if (!this.hasSnippets) return nothing;\n if (['stats-only', 'minimal'].includes(this.layoutType)) {\n return nothing;\n }\n\n return html`\n <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\n </text-snippet-block>\n `;\n }\n\n private get volumeIssueTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.volume || !this.model?.issue) return nothing;\n\n return html`\n <div class=\"volume-issue\">\n <span class=\"truncated\" title=${msg('volume|issue')}>\n ${msg(\n str`Volume\\u00a0${this.model.volume}, Issue\\u00a0${this.model.issue}`,\n )}\n </span>\n </div>\n `;\n }\n\n private get webArchivesCaptureDatesTemplate():\n | TemplateResult\n | typeof nothing {\n if (!this.model?.captureDates || !this.model.title) return nothing;\n\n return html`\n <ul class=\"capture-dates\">\n ${map(\n this.model.captureDates,\n date =>\n html`<li>\n ${this.displayValueProvider.webArchivesCaptureLink(\n this.model!.title,\n date,\n )}\n </li>`,\n )}\n </ul>\n `;\n }\n\n /**\n * Template for the stats row along the bottom of the tile.\n */\n private get tileStatsTemplate(): TemplateResult | typeof nothing {\n if (['snippets-only', 'minimal'].includes(this.layoutType)) {\n return nothing;\n }\n\n const effectiveSort = this.sortParam ?? this.defaultSortParam;\n const [viewCount, viewLabel] =\n effectiveSort?.field === 'week'\n ? [this.model?.weeklyViewCount, msg('weekly views')]\n : [this.model?.viewCount, msg('all-time views')];\n\n return html`\n <tile-stats\n .model=${this.model}\n .mediatype=${this.model?.mediatype}\n .viewCount=${viewCount}\n .viewLabel=${viewLabel}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n .tvClipCount=${this.model?.tvClipCount}\n .showTvClips=${this.showTvClips}\n >\n </tile-stats>\n `;\n }\n\n private get isSortedByDate(): boolean {\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n this.effectiveSort?.field as string,\n );\n }\n\n /**\n * Returns the active sort param if one is set, or the default sort param otherwise.\n */\n private get effectiveSort(): SortParam | null {\n return this.sortParam ?? this.defaultSortParam;\n }\n\n private get hasSnippets(): boolean {\n return !!this.model?.snippets?.length;\n }\n\n private infoButtonPressed(e: PointerEvent): void {\n e.preventDefault();\n const event = new CustomEvent<{ x: number; y: number }>(\n 'infoButtonPressed',\n { detail: { x: e.clientX, y: e.clientY } },\n );\n this.dispatchEvent(event);\n }\n\n /**\n * CSS\n */\n static get styles(): CSSResultGroup {\n const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n return [\n baseTileStyles,\n css`\n a:link {\n text-decoration: none;\n color: var(--ia-theme-link-color, #4b64ff);\n }\n a:hover {\n text-decoration: underline;\n }\n\n .container {\n border: 1px solid ${tileBorderColor};\n }\n\n .simple #title > .truncated {\n -webkit-line-clamp: 2;\n }\n\n .simple .created-by > .truncated,\n .simple .date-sorted-by > .truncated,\n .simple .volume-issue > .truncated {\n -webkit-line-clamp: 1;\n }\n\n .simple.snippets-only .item-info,\n .simple.minimal .item-info {\n padding-bottom: 5px;\n }\n\n .simple.snippets-only text-snippet-block {\n margin-top: auto; /* Force the snippets to the bottom of the tile */\n }\n\n .capture-dates {\n margin: 0;\n padding: 0 5px;\n list-style-type: none;\n }\n\n review-block,\n text-snippet-block {\n --containerLeftMargin: 5px;\n --containerTopMargin: 5px;\n }\n\n /**\n * iOS Safari long-press on tiles (to bring up hover pane)\n * gets messy without this\n */\n @media screen and (pointer: coarse) and (hover: none) {\n .container {\n -webkit-touch-callout: none;\n }\n\n .truncated {\n -webkit-touch-callout: default;\n }\n }\n `,\n ];\n }\n}\n"]}
|
|
@@ -19,7 +19,9 @@ let TileStats = class TileStats extends LitElement {
|
|
|
19
19
|
return html `
|
|
20
20
|
<div class="item-stats">
|
|
21
21
|
<p class="sr-only">
|
|
22
|
-
${this.mediatype === 'account'
|
|
22
|
+
${this.mediatype === 'account'
|
|
23
|
+
? msg('Account Stats')
|
|
24
|
+
: msg('Item Stats')}
|
|
23
25
|
</p>
|
|
24
26
|
<ul id="stats-row">
|
|
25
27
|
${this.mediatypeIconColumnTemplate}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,kBAAkB,IAAI,OAAO,EAAE,MAAM,wCAAwC,CAAC;AACvF,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAKhD,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAsBL,iEAAiE;QACpC,gBAAW,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { localized, msg, str } from '@lit/localize';\nimport { favoriteFilledIcon as favIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\nimport { quoteIcon } from '../../assets/img/icons/quote';\nimport { srOnlyStyle } from '../../styles/sr-only';\n\nimport { formatCount } from '../../utils/format-count';\nimport { TileModel } from '../../models';\n\n@customElement('tile-stats')\n@localized()\nexport class TileStats extends LitElement {\n /** The tile model these stats represent */\n @property({ type: Object }) model?: TileModel;\n\n /** The mediatype of the item these stats represent */\n @property({ type: String }) mediatype?: string;\n\n /** The number of uploaded items, if representing an account */\n @property({ type: Number }) itemCount?: number;\n\n /** The number of times the item has been viewed */\n @property({ type: Number }) viewCount?: number;\n\n /** The text label describing the type of views (default \"all-time views\") */\n @property({ type: String }) viewLabel?: string;\n\n /** The number of times the item has been favorited */\n @property({ type: Number }) favCount?: number;\n\n /** The number of times the item has been reviewed */\n @property({ type: Number }) commentCount?: number;\n\n /** Whether to show the number of TV clips in place of reviews */\n @property({ type: Boolean }) showTvClips = false;\n\n /** The number of times the TV item has been clipped */\n @property({ type: Number }) tvClipCount?: number;\n\n render() {\n return html`\n <div class=\"item-stats\">\n <p class=\"sr-only\">\n ${this.mediatype === 'account'\n ? msg('Account Stats')\n : msg('Item Stats')}\n </p>\n <ul id=\"stats-row\">\n ${this.mediatypeIconColumnTemplate}\n ${this.mediatype === 'account'\n ? this.uploadsColumnTemplate\n : this.viewsColumnTemplate}\n ${this.favoritesColumnTemplate}\n ${this.showTvClips\n ? this.tvClipsColumnTemplate\n : this.reviewsColumnTemplate}\n </ul>\n </div>\n `;\n }\n\n /**\n * Template for the mediatype icon column.\n */\n private get mediatypeIconColumnTemplate(): TemplateResult {\n return html`\n <li class=\"col\">\n <p class=\"sr-only\">${msg('Mediatype:')}</p>\n <tile-mediatype-icon .model=${this.model}></tile-mediatype-icon>\n </li>\n `;\n }\n\n /**\n * Helper method to construct a template for one of the tile stat columns,\n * given its stat count, labels, and icon.\n *\n * @param count The numeric count to show for the stat. If undefined, will be treated as 0.\n * @param label The textual label describing the stat (used in the title and screenreader text).\n * @param icon The icon visually representing the stat.\n * @param classes Any additional CSS classes the stat column should have (optional).\n */\n private columnTemplate(\n count: number | undefined,\n label: string,\n icon: TemplateResult,\n classes: string[] = [],\n ): TemplateResult {\n const formattedCount = formatCount(count ?? 0, 'short', 'short');\n const title = msg(str`${formattedCount} ${label}`);\n const srLabel = label + ':';\n\n return html`\n <li class=\"col ${classes.join(' ')}\" title=${title}>\n ${icon}\n <p class=\"status-text\">\n <span class=\"sr-only\">${srLabel}</span>\n ${formattedCount}\n </p>\n </li>\n `;\n }\n\n /**\n * Template for the views count column.\n */\n private get viewsColumnTemplate(): TemplateResult {\n const label = this.viewLabel ?? msg('all-time views');\n return this.columnTemplate(this.viewCount, label, viewsIcon);\n }\n\n /**\n * Template for the uploads count column (replaces views for account tiles).\n */\n private get uploadsColumnTemplate(): TemplateResult {\n return this.columnTemplate(this.itemCount, msg('uploads'), uploadIcon);\n }\n\n /**\n * Template for the favorites count column.\n */\n private get favoritesColumnTemplate(): TemplateResult {\n return this.columnTemplate(this.favCount, msg('favorites'), favIcon);\n }\n\n /**\n * Template for the reviews count column.\n */\n private get reviewsColumnTemplate(): TemplateResult {\n return this.columnTemplate(this.commentCount, msg('reviews'), reviewsIcon, [\n 'reviews',\n ]);\n }\n\n /**\n * Template for the TV clips count column (replaces reviews for TV tiles).\n */\n private get tvClipsColumnTemplate(): TemplateResult {\n return this.columnTemplate(this.tvClipCount, msg('clips'), quoteIcon);\n }\n\n static get styles(): CSSResultGroup {\n return [\n srOnlyStyle,\n css`\n tile-mediatype-icon {\n --iconHeight: 25px;\n --iconWidth: 25px;\n }\n\n ul {\n all: unset;\n list-style-type: none;\n }\n\n li {\n list-style-type: none;\n }\n\n svg {\n height: 13px;\n width: 13px;\n display: block;\n margin: auto;\n pointer-events: none;\n }\n\n /* Make the reviews icon slightly smaller/lower, for even visual weight */\n .reviews svg {\n height: 11px;\n width: 11px;\n margin-top: 2px;\n }\n\n .item-stats {\n height: 30px;\n padding-left: 5px;\n padding-right: 5px;\n font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n text-align: center;\n }\n\n #stats-row {\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n width: 100%;\n padding-bottom: 5px;\n }\n\n .col {\n min-width: 15px;\n max-width: 25%;\n height: 25px;\n }\n\n .status-text {\n font-size: 14px;\n height: 15px;\n color: #2c2c2c;\n line-height: 17px;\n margin: auto;\n display: block;\n text-align: center;\n }\n `,\n ];\n }\n}\n"]}
|
|
@@ -220,7 +220,7 @@ let TileList = class TileList extends BaseTileComponent {
|
|
|
220
220
|
return nothing;
|
|
221
221
|
// when its a search-tile, we don't have any stats to show
|
|
222
222
|
if (this.model?.mediatype === 'search') {
|
|
223
|
-
return this.metadataTemplate('(Favorited search query)', '');
|
|
223
|
+
return this.metadataTemplate(msg('(Favorited search query)'), '');
|
|
224
224
|
}
|
|
225
225
|
return this.metadataTemplate(`${formatCount(viewCount, this.formatSize)}`, this.displayValueProvider.viewsLabel);
|
|
226
226
|
}
|