@internetarchive/collection-browser 0.4.12 → 0.4.13
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 +3 -0
- package/dist/src/collection-browser.js.map +1 -1
- package/dist/src/collection-facets.js +1 -10
- package/dist/src/collection-facets.js.map +1 -1
- package/dist/src/models.d.ts +5 -1
- package/dist/src/models.js +19 -8
- package/dist/src/models.js.map +1 -1
- package/dist/src/sort-filter-bar/alpha-bar-tooltip.js +1 -2
- package/dist/src/sort-filter-bar/alpha-bar-tooltip.js.map +1 -1
- package/dist/src/sort-filter-bar/img/list.js +1 -1
- package/dist/src/sort-filter-bar/img/list.js.map +1 -1
- package/dist/src/sort-filter-bar/img/sort-toggle-disabled.d.ts +1 -0
- package/dist/src/sort-filter-bar/img/sort-toggle-disabled.js +15 -0
- package/dist/src/sort-filter-bar/img/sort-toggle-disabled.js.map +1 -0
- package/dist/src/sort-filter-bar/img/sort-toggle-down.d.ts +1 -0
- package/dist/src/sort-filter-bar/img/sort-toggle-down.js +17 -0
- package/dist/src/sort-filter-bar/img/sort-toggle-down.js.map +1 -0
- package/dist/src/sort-filter-bar/img/sort-toggle-up.d.ts +1 -0
- package/dist/src/sort-filter-bar/img/sort-toggle-up.js +17 -0
- package/dist/src/sort-filter-bar/img/sort-toggle-up.js.map +1 -0
- package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +95 -14
- package/dist/src/sort-filter-bar/sort-filter-bar.js +386 -292
- package/dist/src/sort-filter-bar/sort-filter-bar.js.map +1 -1
- package/dist/src/tiles/grid/item-tile.js +9 -5
- package/dist/src/tiles/grid/item-tile.js.map +1 -1
- package/dist/src/tiles/grid/tile-stats.d.ts +1 -0
- package/dist/src/tiles/grid/tile-stats.js +5 -1
- package/dist/src/tiles/grid/tile-stats.js.map +1 -1
- package/dist/test/sort-filter-bar/sort-filter-bar.test.js +241 -68
- package/dist/test/sort-filter-bar/sort-filter-bar.test.js.map +1 -1
- package/package.json +2 -1
- package/src/collection-browser.ts +3 -0
- package/src/collection-facets.ts +1 -10
- package/src/models.ts +23 -8
- package/src/sort-filter-bar/alpha-bar-tooltip.ts +1 -2
- package/src/sort-filter-bar/img/list.ts +1 -1
- package/src/sort-filter-bar/img/sort-toggle-disabled.ts +15 -0
- package/src/sort-filter-bar/img/sort-toggle-down.ts +17 -0
- package/src/sort-filter-bar/img/sort-toggle-up.ts +17 -0
- package/src/sort-filter-bar/sort-filter-bar.ts +433 -303
- package/src/tiles/grid/item-tile.ts +6 -1
- package/src/tiles/grid/tile-stats.ts +3 -1
- package/test/sort-filter-bar/sort-filter-bar.test.ts +377 -101
|
@@ -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 {\n CollectionDisplayMode,\n PrefixFilterCounts,\n PrefixFilterType,\n SortField,\n SortFieldDisplayName,\n} from '../models';\nimport './alpha-bar';\n\nimport { sortIcon } from './img/sort-triangle';\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 @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n @property({ type: String }) sortDirection: 'asc' | 'desc' | null = null;\n\n @property({ type: String }) selectedSort: SortField = SortField.relevance;\n\n @property({ type: String }) selectedTitleFilter: string | null = null;\n\n @property({ type: String }) selectedCreatorFilter: string | null = null;\n\n @property({ type: Boolean }) showRelevance: boolean = true;\n\n @property({ type: Object }) prefixFilterCountMap?: Record<\n PrefixFilterType,\n PrefixFilterCounts\n >;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @state() alphaSelectorVisible: AlphaSelector | null = null;\n\n @state() dateSortSelectorVisible = false;\n\n @state() viewSortSelectorVisible = false;\n\n @state() desktopSelectorBarWidth = 0;\n\n @state() selectorBarContainerWidth = 0;\n\n @state() hoveringOverDateSortOptions = false;\n\n @query('#desktop-sort-selector')\n private desktopSortSelector!: HTMLUListElement;\n\n @query('#sort-selector-container')\n private sortSelectorContainer!: HTMLDivElement;\n\n render() {\n return html`\n <div id=\"container\">\n <div id=\"sort-bar\">\n <div id=\"sort-direction-container\">\n ${this.sortDirectionSelectorTemplate}\n </div>\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.viewSortSelectorVisible && !this.mobileSelectorVisible\n ? this.viewSortSelector\n : nothing}\n ${this.dateSortSelectorVisible && !this.mobileSelectorVisible\n ? this.dateSortSelector\n : nothing}\n ${this.alphaBarTemplate}\n\n <div id=\"bottom-shadow\"></div>\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 = 'desc';\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 (\n changed.has('dateSortSelectorVisible') ||\n changed.has('viewSortSelectorVisible')\n ) {\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.dateSortSelectorVisible || this.viewSortSelectorVisible) {\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.viewSortSelectorVisible = false;\n this.dateSortSelectorVisible = false;\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.desktopSortSelector,\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.desktopSortSelector,\n handler: this,\n });\n }\n\n private get mobileSelectorVisible() {\n return this.selectorBarContainerWidth - 10 < this.desktopSelectorBarWidth;\n }\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 handleResize(entry: ResizeObserverEntry): void {\n if (entry.target === this.desktopSortSelector) {\n this.desktopSelectorBarWidth = entry.contentRect.width;\n } else if (entry.target === this.sortSelectorContainer) {\n this.selectorBarContainerWidth = entry.contentRect.width;\n }\n }\n\n private get sortDirectionSelectorTemplate() {\n return html`\n <div id=\"sort-direction-selector\">\n <button\n id=\"sort-ascending-btn\"\n class=\"sort-button ${this.sortDirection === 'asc' ? 'selected' : ''}\"\n ?disabled=${this.selectedSort === 'relevance'}\n @click=${() => {\n this.setSortDirections('asc');\n }}\n >\n ${sortIcon}\n </button>\n <button\n id=\"sort-descending-btn\"\n class=\"sort-button ${this.sortDirection === 'desc' ? 'selected' : ''}\"\n ?disabled=${this.selectedSort === 'relevance'}\n @click=${() => {\n this.setSortDirections('desc');\n }}\n >\n ${sortIcon}\n </button>\n </div>\n `;\n }\n\n private get desktopSortSelectorTemplate() {\n return html`\n <ul\n id=\"desktop-sort-selector\"\n class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}\n >\n <li id=\"sort-by-text\">Sort By</li>\n <li>\n ${this.showRelevance\n ? this.getSortDisplayOption(SortField.relevance)\n : nothing}\n </li>\n <li>\n ${this.getSortDisplayOption(SortField.weeklyview, {\n clickEvent: () => {\n if (!this.viewOptionSelected)\n this.setSelectedSort(SortField.weeklyview);\n this.viewSortSelectorVisible = !this.viewSortSelectorVisible;\n this.dateSortSelectorVisible = false;\n this.alphaSelectorVisible = null;\n this.selectedTitleFilter = null;\n this.selectedCreatorFilter = null;\n this.emitTitleLetterChangedEvent();\n this.emitCreatorLetterChangedEvent();\n },\n displayName: html`${this.viewSortField}`,\n isSelected: () => this.viewOptionSelected,\n })}\n </li>\n <li>\n ${this.getSortDisplayOption(SortField.title, {\n clickEvent: () => {\n this.alphaSelectorVisible = 'title';\n this.selectedCreatorFilter = null;\n this.dateSortSelectorVisible = false;\n this.viewSortSelectorVisible = false;\n this.setSelectedSort(SortField.title);\n this.emitCreatorLetterChangedEvent();\n },\n })}\n </li>\n <li>\n ${this.getSortDisplayOption(SortField.date, {\n clickEvent: () => {\n if (!this.dateOptionSelected)\n this.setSelectedSort(SortField.date);\n this.dateSortSelectorVisible = !this.dateSortSelectorVisible;\n this.viewSortSelectorVisible = false;\n this.alphaSelectorVisible = null;\n this.selectedTitleFilter = null;\n this.selectedCreatorFilter = null;\n this.emitTitleLetterChangedEvent();\n this.emitCreatorLetterChangedEvent();\n },\n displayName: html`${this.dateSortField}`,\n isSelected: () => this.dateOptionSelected,\n })}\n </li>\n <li>\n ${this.getSortDisplayOption(SortField.creator, {\n clickEvent: () => {\n this.alphaSelectorVisible = 'creator';\n this.selectedTitleFilter = null;\n this.dateSortSelectorVisible = false;\n this.setSelectedSort(SortField.creator);\n this.emitTitleLetterChangedEvent();\n },\n })}\n </li>\n </ul>\n `;\n }\n\n /**\n * This generates each of the 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 * additionalClickEvent?: () => 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 * isSelected?: () => boolean; A function that returns true if the option is selected. Defaults to the selectedSort === sortField.\n * }\n * @returns\n */\n private getSortDisplayOption(\n sortField: SortField,\n options?: {\n clickEvent?: (e: Event) => void;\n isSelected?: () => boolean;\n displayName?: TemplateResult;\n }\n ): TemplateResult {\n const isSelected =\n options?.isSelected ?? (() => this.selectedSort === sortField);\n const displayName = options?.displayName ?? SortFieldDisplayName[sortField];\n return html`\n <a\n href=\"#\"\n @click=${(e: Event) => {\n e.preventDefault();\n if (options?.clickEvent) {\n options.clickEvent(e);\n } else {\n this.alphaSelectorVisible = null;\n this.dateSortSelectorVisible = false;\n this.selectedTitleFilter = null;\n this.selectedCreatorFilter = null;\n this.setSelectedSort(sortField);\n this.emitTitleLetterChangedEvent();\n this.emitCreatorLetterChangedEvent();\n }\n }}\n class=${isSelected() ? 'selected' : ''}\n >\n ${displayName}\n </a>\n `;\n }\n\n private get mobileSortSelectorTemplate() {\n return html`\n <select\n id=\"mobile-sort-selector\"\n @change=${this.mobileSortChanged}\n class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n >\n ${Object.keys(SortField).map(\n field => html`\n <option value=\"${field}\" ?selected=${this.selectedSort === field}>\n ${SortFieldDisplayName[field as SortField]}\n </option>\n `\n )}\n </select>\n `;\n }\n\n private mobileSortChanged(e: Event) {\n const target = e.target as HTMLSelectElement;\n const sortField = target.value 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 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 private get dateSortSelector() {\n return html`\n <div\n id=\"date-sort-selector-backdrop\"\n @keyup=${() => {\n this.dateSortSelectorVisible = false;\n }}\n @click=${() => {\n this.dateSortSelectorVisible = false;\n }}\n ></div>\n <div id=\"date-sort-selector\">\n <ul>\n <li>${this.getDateSortButton(SortField.datearchived)}</li>\n <li>${this.getDateSortButton(SortField.date)}</li>\n <li>${this.getDateSortButton(SortField.datereviewed)}</li>\n <li>${this.getDateSortButton(SortField.dateadded)}</li>\n </ul>\n </div>\n `;\n }\n\n private get viewSortSelector() {\n return html`\n <div\n id=\"view-sort-selector-backdrop\"\n @keyup=${() => {\n this.viewSortSelectorVisible = false;\n }}\n @click=${() => {\n this.viewSortSelectorVisible = false;\n }}\n ></div>\n <div id=\"view-sort-selector\">\n <ul>\n <li>${this.getDateSortButton(SortField.alltimeview)}</li>\n <li>${this.getDateSortButton(SortField.weeklyview)}</li>\n </ul>\n </div>\n `;\n }\n\n private getDateSortButton(sortField: SortField) {\n return html`\n <button\n @click=${() => {\n this.selectDateSort(sortField);\n }}\n class=${this.selectedSort === sortField ? 'selected' : ''}\n >\n ${SortFieldDisplayName[sortField]}\n </button>\n `;\n }\n\n private selectDateSort(sortField: SortField) {\n this.dateSortSelectorVisible = false;\n this.viewSortSelectorVisible = false;\n this.setSelectedSort(sortField);\n }\n\n private setSortDirections(sortDirection: 'asc' | 'desc') {\n this.sortDirection = sortDirection;\n this.emitSortChangedEvent();\n }\n\n private setSelectedSort(sort: SortField) {\n this.selectedSort = sort;\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('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: 'asc' | 'desc' | 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 border: 1px solid rgb(232, 232, 232);\n align-items: center;\n padding: 0.5rem 1.5rem;\n }\n\n #sort-direction-container {\n flex: 0;\n }\n\n #sort-by-text {\n text-transform: uppercase;\n }\n\n #bottom-shadow {\n height: 1px;\n width: 100%;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n background-color: #bbb;\n }\n\n ul {\n list-style: none;\n display: flex;\n margin: 0;\n padding: 0;\n align-items: center;\n }\n\n li {\n padding: 0;\n }\n\n .sort-button {\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n cursor: pointer;\n outline: inherit;\n width: 12px;\n height: 12px;\n opacity: 0.5;\n }\n\n .sort-button.selected {\n opacity: 1;\n }\n\n .sort-button:disabled {\n opacity: 0.25;\n cursor: default;\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 #date-sort-selector button,\n #view-sort-selector button {\n background: none;\n border-radius: 15px;\n color: #404142;\n border: none;\n appearance: none;\n cursor: pointer;\n -webkit-appearance: none;\n font-size: 1.4rem;\n font-weight: 400;\n padding: 0.5rem 1.2rem;\n }\n\n #date-sort-selector button.selected,\n #view-sort-selector button.selected {\n background-color: #404142;\n color: white;\n }\n\n #show-details {\n text-transform: uppercase;\n cursor: pointer;\n display: flex;\n }\n\n #show-details input {\n margin-right: 0.5rem;\n flex: 0 0 12px;\n }\n\n #sort-descending-btn {\n transform: rotate(180deg);\n }\n\n #sort-direction-selector {\n display: flex;\n flex-direction: column;\n gap: 3px;\n margin-right: 1rem;\n }\n\n #sort-selector-container {\n flex: 1;\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 displY: none,\n the width becomes 0\n */\n #desktop-sort-selector.hidden {\n position: absolute;\n top: -9999px;\n left: -9999px;\n }\n\n #mobile-sort-selector.hidden {\n display: none;\n }\n\n #date-sort-selector-backdrop,\n #view-sort-selector-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n background-color: rgba(255, 255, 255, 0.5);\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 }\n\n #desktop-sort-selector li a {\n text-decoration: none;\n text-transform: uppercase;\n font-size: 1.4rem;\n color: #333;\n line-height: 2.5;\n }\n\n #desktop-sort-selector li a.selected {\n font-weight: bold;\n }\n\n #desktop-sort-selector li::after {\n content: '•';\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n #desktop-sort-selector li:first-child::after {\n content: '';\n }\n\n #desktop-sort-selector li:last-child::after {\n content: '';\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 opacity: 0.5;\n }\n\n #display-style-selector button.active {\n opacity: 1;\n }\n\n #display-style-selector button svg {\n width: 24px;\n height: 24px;\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: 'asc' | 'desc' | 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.clearAlphaBarFilters();\n this.dropdownBackdropVisible = false;\n this.setSelectedSort(SortField.relevance);\n this.emitTitleLetterChangedEvent();\n this.emitCreatorLetterChangedEvent();\n },\n })\n : nothing}\n </li>\n <li>${this.viewsDropdownTemplate}</li>\n <li>\n ${this.getSortDisplayOption(SortField.title, {\n onClick: () => {\n this.alphaSelectorVisible = 'title';\n this.selectedCreatorFilter = null;\n this.dropdownBackdropVisible = false;\n this.setSelectedSort(SortField.title);\n this.emitCreatorLetterChangedEvent();\n },\n })}\n </li>\n <li>${this.dateDropdownTemplate}</li>\n <li>\n ${this.getSortDisplayOption(SortField.creator, {\n onClick: () => {\n this.alphaSelectorVisible = 'creator';\n this.selectedTitleFilter = null;\n this.dropdownBackdropVisible = false;\n this.setSelectedSort(SortField.creator);\n this.emitTitleLetterChangedEvent();\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 isSelected: () => 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 * isSelected?: () => boolean; A function that returns 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 onClick?: (e: Event) => void;\n isSelected?: () => boolean;\n }\n ): TemplateResult {\n const isSelected =\n options?.isSelected ?? (() => this.selectedSort === sortField);\n const displayName = options?.displayName ?? SortFieldDisplayName[sortField];\n return html`\n <a\n href=\"#\"\n @click=${(e: Event) => {\n e.preventDefault();\n options?.onClick?.(e);\n }}\n class=${isSelected() ? 'selected' : nothing}\n >\n ${displayName}\n </a>\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.isSelected A function returning a boolean indicating whether this dropdown\n * should use its 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 isSelected?: () => boolean;\n onOptionSelected?: (e: CustomEvent<{ option: optionInterface }>) => void;\n onDropdownClick?: (e: PointerEvent) => void;\n onLabelInteraction?: () => void;\n }): TemplateResult {\n return html`\n <ia-dropdown\n id=${options.id ?? nothing}\n class=${options.isSelected?.() ? 'selected' : nothing}\n displayCaret\n closeOnSelect\n includeSelectedOption\n .openViaButton=${false}\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?.();\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 this.emitTitleLetterChangedEvent();\n this.emitCreatorLetterChangedEvent();\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 isSelected: () => 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: () => {\n if (!this.viewsDropdown.open && !this.viewOptionSelected) {\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 isSelected: () => 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: () => {\n if (!this.dateDropdown.open && !this.dateOptionSelected) {\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 }\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('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: 'asc' | 'desc' | 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 a.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 }\n `;\n}\n"]}
|
|
@@ -17,8 +17,11 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
17
17
|
this.showInfoButton = false;
|
|
18
18
|
}
|
|
19
19
|
render() {
|
|
20
|
-
var _a, _b, _c, _d, _e;
|
|
20
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
21
21
|
const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
|
|
22
|
+
const [viewCount, viewLabel] = ((_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.field) === 'week'
|
|
23
|
+
? [(_c = this.model) === null || _c === void 0 ? void 0 : _c.weeklyViewCount, 'weekly views']
|
|
24
|
+
: [(_d = this.model) === null || _d === void 0 ? void 0 : _d.viewCount, 'all-time views'];
|
|
22
25
|
return html `
|
|
23
26
|
<div class="container">
|
|
24
27
|
${this.infoButtonTemplate}
|
|
@@ -40,10 +43,11 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
40
43
|
</div>
|
|
41
44
|
|
|
42
45
|
<tile-stats
|
|
43
|
-
.mediatype=${(
|
|
44
|
-
.viewCount=${
|
|
45
|
-
.
|
|
46
|
-
.
|
|
46
|
+
.mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}
|
|
47
|
+
.viewCount=${viewCount}
|
|
48
|
+
.viewLabel=${viewLabel}
|
|
49
|
+
.favCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.favCount}
|
|
50
|
+
.commentCount=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.commentCount}
|
|
47
51
|
>
|
|
48
52
|
</tile-stats>
|
|
49
53
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n css,\n CSSResultGroup,\n html,\n LitElement,\n nothing,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { SortParam } from '@internetarchive/search-service';\n\nimport { formatDate } from '../../utils/format-date';\nimport type { TileModel } from '../../models';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: Object }) sortParam?: SortParam;\n\n @property({ type: Boolean }) showInfoButton = false;\n\n render() {\n const itemTitle = this.model?.title;\n\n return html`\n <div class=\"container\">\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.imageBlockTemplate}\n\n <div id=\"title\">\n <h1 class=\"truncated\" title=${ifDefined(itemTitle)}>\n ${itemTitle}\n </h1>\n </div>\n\n ${this.volumeIssueTemplate}\n ${this.doesSortedByDate\n ? this.sortedDateInfoTemplate\n : this.creatorTemplate}\n ${this.textSnippetsTemplate}\n </div>\n\n <tile-stats\n .mediatype=${this.model?.mediatype}\n .viewCount=${this.model?.viewCount}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n >\n </tile-stats>\n </div>\n </div>\n `;\n }\n\n /**\n * Templates\n */\n private get creatorTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.creator) return nothing;\n\n return html`\n <div class=\"created-by\">\n <span class=\"truncated\" title=${ifDefined(this.model?.creator)}>\n by ${this.model?.creator}\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 .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'grid'}\n >\n </image-block>\n `;\n }\n\n private get sortedDateInfoTemplate() {\n let sortedValue;\n switch (this.sortParam?.field) {\n case 'date':\n sortedValue = { field: 'published', value: this.model?.datePublished };\n break;\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 return html`\n <div class=\"date-sorted-by truncated\">\n <span>\n ${sortedValue?.field} ${formatDate(sortedValue?.value, 'long')}\n </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\">More info</span>\n </button>`\n : nothing;\n }\n\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n if (!this.hasSnippets) return nothing;\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 doesSortedByDate() {\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n this.sortParam?.field as string\n );\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 .container {\n border: 1px solid ${tileBorderColor};\n }\n\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":["/* eslint-disable import/no-duplicates */\nimport {\n css,\n CSSResultGroup,\n html,\n LitElement,\n nothing,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { SortParam } from '@internetarchive/search-service';\n\nimport { formatDate } from '../../utils/format-date';\nimport type { TileModel } from '../../models';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: Object }) sortParam?: SortParam;\n\n @property({ type: Boolean }) showInfoButton = false;\n\n render() {\n const itemTitle = this.model?.title;\n const [viewCount, viewLabel] =\n this.sortParam?.field === 'week'\n ? [this.model?.weeklyViewCount, 'weekly views']\n : [this.model?.viewCount, 'all-time views'];\n\n return html`\n <div class=\"container\">\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.imageBlockTemplate}\n\n <div id=\"title\">\n <h1 class=\"truncated\" title=${ifDefined(itemTitle)}>\n ${itemTitle}\n </h1>\n </div>\n\n ${this.volumeIssueTemplate}\n ${this.doesSortedByDate\n ? this.sortedDateInfoTemplate\n : this.creatorTemplate}\n ${this.textSnippetsTemplate}\n </div>\n\n <tile-stats\n .mediatype=${this.model?.mediatype}\n .viewCount=${viewCount}\n .viewLabel=${viewLabel}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n >\n </tile-stats>\n </div>\n </div>\n `;\n }\n\n /**\n * Templates\n */\n private get creatorTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.creator) return nothing;\n\n return html`\n <div class=\"created-by\">\n <span class=\"truncated\" title=${ifDefined(this.model?.creator)}>\n by ${this.model?.creator}\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 .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'grid'}\n >\n </image-block>\n `;\n }\n\n private get sortedDateInfoTemplate() {\n let sortedValue;\n switch (this.sortParam?.field) {\n case 'date':\n sortedValue = { field: 'published', value: this.model?.datePublished };\n break;\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 return html`\n <div class=\"date-sorted-by truncated\">\n <span>\n ${sortedValue?.field} ${formatDate(sortedValue?.value, 'long')}\n </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\">More info</span>\n </button>`\n : nothing;\n }\n\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n if (!this.hasSnippets) return nothing;\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 doesSortedByDate() {\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n this.sortParam?.field as string\n );\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 .container {\n border: 1px solid ${tileBorderColor};\n }\n\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"]}
|
|
@@ -8,11 +8,12 @@ import { viewsIcon } from '../../assets/img/icons/views';
|
|
|
8
8
|
import { formatCount } from '../../utils/format-count';
|
|
9
9
|
let TileStats = class TileStats extends LitElement {
|
|
10
10
|
render() {
|
|
11
|
+
var _a;
|
|
11
12
|
const formattedFavCount = formatCount(this.favCount, 'short', 'short');
|
|
12
13
|
const formattedReviewCount = formatCount(this.commentCount, 'short', 'short');
|
|
13
14
|
const uploadsOrViewsTitle = this.mediatype === 'account'
|
|
14
15
|
? `${this.itemCount} uploads`
|
|
15
|
-
: `${this.viewCount} all-time views`;
|
|
16
|
+
: `${this.viewCount} ${(_a = this.viewLabel) !== null && _a !== void 0 ? _a : 'all-time views'}`;
|
|
16
17
|
return html `
|
|
17
18
|
<div class="item-stats">
|
|
18
19
|
<p class="sr-only">
|
|
@@ -135,6 +136,9 @@ __decorate([
|
|
|
135
136
|
__decorate([
|
|
136
137
|
property({ type: Number })
|
|
137
138
|
], TileStats.prototype, "viewCount", void 0);
|
|
139
|
+
__decorate([
|
|
140
|
+
property({ type: String })
|
|
141
|
+
], TileStats.prototype, "viewLabel", void 0);
|
|
138
142
|
__decorate([
|
|
139
143
|
property({ type: Number })
|
|
140
144
|
], TileStats.prototype, "favCount", void 0);
|
|
@@ -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,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;
|
|
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,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAavC,MAAM;;QACJ,MAAM,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;QACvE,MAAM,oBAAoB,GAAG,WAAW,CACtC,IAAI,CAAC,YAAY,EACjB,OAAO,EACP,OAAO,CACR,CAAC;QAEF,MAAM,mBAAmB,GACvB,IAAI,CAAC,SAAS,KAAK,SAAS;YAC1B,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,UAAU;YAC7B,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,IAAI,MAAA,IAAI,CAAC,SAAS,mCAAI,gBAAgB,EAAE,CAAC;QAEhE,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY;;;;;yCAKhC,IAAI,CAAC,SAAS;;mCAEpB,mBAAmB;cACxC,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;;;kBAGjD,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ;;gBAEtD,WAAW,CACX,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC9D,OAAO,EACP,OAAO,CACR;;;mCAGoB,iBAAiB;cACtC,kBAAkB;;;gBAGhB,iBAAiB;;;2CAGU,oBAAoB;cACjD,WAAW;;;gBAGT,oBAAoB;;;;;KAK/B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwET,CAAC;IACJ,CAAC;CACF,CAAA;AA9I6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AAXvC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA+IrB;SA/IY,SAAS","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { favoriteFilledIcon } 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';\n\nimport { formatCount } from '../../utils/format-count';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n @property({ type: String }) mediatype?: string;\n\n @property({ type: Number }) itemCount?: number;\n\n @property({ type: Number }) viewCount?: number;\n\n @property({ type: String }) viewLabel?: number;\n\n @property({ type: Number }) favCount?: number;\n\n @property({ type: Number }) commentCount?: number;\n\n render() {\n const formattedFavCount = formatCount(this.favCount, 'short', 'short');\n const formattedReviewCount = formatCount(\n this.commentCount,\n 'short',\n 'short'\n );\n\n const uploadsOrViewsTitle =\n this.mediatype === 'account'\n ? `${this.itemCount} uploads`\n : `${this.viewCount} ${this.viewLabel ?? 'all-time views'}`;\n\n return html`\n <div class=\"item-stats\">\n <p class=\"sr-only\">\n ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n </p>\n <ul id=\"stats-row\">\n <li class=\"col\">\n <p class=\"sr-only\">Mediatype:</p>\n <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>\n </li>\n <li class=\"col\" title=\"${uploadsOrViewsTitle}\">\n ${this.mediatype === 'account' ? uploadIcon : viewsIcon}\n <p class=\"status-text\">\n <span class=\"sr-only\">\n ${this.mediatype === 'account' ? 'Uploads:' : 'Views:'}\n </span>\n ${formatCount(\n this.mediatype === 'account' ? this.itemCount : this.viewCount,\n 'short',\n 'short'\n )}\n </p>\n </li>\n <li class=\"col\" title=\"${formattedFavCount} favorites\">\n ${favoriteFilledIcon}\n <p class=\"status-text\">\n <span class=\"sr-only\">Favorites:</span>\n ${formattedFavCount}\n </p>\n </li>\n <li class=\"col reviews\" title=\"${formattedReviewCount} reviews\">\n ${reviewsIcon}\n <p class=\"status-text\">\n <span class=\"sr-only\">Reviews:</span>\n ${formattedReviewCount}\n </p>\n </li>\n </ul>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n mediatype-icon {\n --iconHeight: 25px;\n --iconWidth: 25px;\n }\n\n ul {\n all: unset; // unset all property values\n list-style-type: none; // remove default list-style\n }\n\n li {\n list-style-type: none; // remove default list-style\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 .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\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"]}
|