@internetarchive/collection-browser 3.5.2-alpha-webdev8164.0 → 3.5.2-alpha-webdev8093.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/collection-facets/facets-template.js +0 -5
- package/dist/src/collection-facets/facets-template.js.map +1 -1
- package/dist/src/collection-facets/more-facets-content.d.ts +8 -34
- package/dist/src/collection-facets/more-facets-content.js +65 -264
- package/dist/src/collection-facets/more-facets-content.js.map +1 -1
- package/dist/src/tiles/hover/hover-pane-controller.d.ts +8 -0
- package/dist/src/tiles/hover/hover-pane-controller.js +13 -1
- package/dist/src/tiles/hover/hover-pane-controller.js.map +1 -1
- package/dist/test/collection-facets/more-facets-content.test.js +3 -109
- package/dist/test/collection-facets/more-facets-content.test.js.map +1 -1
- package/package.json +1 -1
- package/src/collection-facets/facets-template.ts +0 -5
- package/src/collection-facets/more-facets-content.ts +70 -284
- package/src/tiles/hover/hover-pane-controller.ts +15 -1
- package/test/collection-facets/more-facets-content.test.ts +3 -150
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"more-facets-content.js","sourceRoot":"","sources":["../../../src/collection-facets/more-facets-content.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n css,\r\n CSSResultGroup,\r\n html,\r\n LitElement,\r\n nothing,\r\n PropertyValues,\r\n TemplateResult,\r\n} from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport {\r\n Aggregation,\r\n Bucket,\r\n SearchServiceInterface,\r\n SearchParams,\r\n SearchType,\r\n AggregationSortType,\r\n FilterMap,\r\n PageType,\r\n} from '@internetarchive/search-service';\r\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\r\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\r\nimport { msg } from '@lit/localize';\r\nimport {\r\n SelectedFacets,\r\n FacetGroup,\r\n FacetBucket,\r\n FacetOption,\r\n facetTitles,\r\n suppressedCollections,\r\n valueFacetSort,\r\n defaultFacetSort,\r\n getDefaultSelectedFacets,\r\n FacetEventDetails,\r\n} from '../models';\r\nimport type {\r\n CollectionTitles,\r\n PageSpecifierParams,\r\n TVChannelAliases,\r\n} from '../data-source/models';\r\nimport '@internetarchive/elements/ia-status-indicator/ia-status-indicator';\r\nimport './facets-template';\r\nimport {\r\n analyticsActions,\r\n analyticsCategories,\r\n} from '../utils/analytics-events';\r\nimport './toggle-switch';\r\nimport './more-facets-pagination';\r\nimport { srOnlyStyle } from '../styles/sr-only';\r\nimport {\r\n mergeSelectedFacets,\r\n sortBucketsBySelectionState,\r\n updateSelectedFacetBucket,\r\n} from '../utils/facet-utils';\r\nimport {\r\n MORE_FACETS__DEFAULT_PAGE_SIZE,\r\n MORE_FACETS__MAX_AGGREGATIONS,\r\n} from './models';\r\n\r\n/**\r\n * Threshold for switching from horizontal scroll to pagination.\r\n * If facet count >= this value, use pagination. Otherwise use horizontal scroll.\r\n */\r\nconst PAGINATION_THRESHOLD = 1000;\r\n\r\n@customElement('more-facets-content')\r\nexport class MoreFacetsContent extends LitElement {\r\n @property({ type: String }) facetKey?: FacetOption;\r\n\r\n @property({ type: String }) query?: string;\r\n\r\n @property({ type: Array }) identifiers?: string[];\r\n\r\n @property({ type: Object }) filterMap?: FilterMap;\r\n\r\n @property({ type: Number }) searchType?: SearchType;\r\n\r\n @property({ type: Object }) pageSpecifierParams?: PageSpecifierParams;\r\n\r\n @property({ type: Object })\r\n collectionTitles?: CollectionTitles;\r\n\r\n @property({ type: Object })\r\n tvChannelAliases?: TVChannelAliases;\r\n\r\n /**\r\n * Maximum number of facets to show per page within the modal.\r\n */\r\n @property({ type: Number }) facetsPerPage = MORE_FACETS__DEFAULT_PAGE_SIZE;\r\n\r\n /**\r\n * Whether we are waiting for facet data to load.\r\n * We begin with this set to true so that we show an initial loading indicator.\r\n */\r\n @property({ type: Boolean }) facetsLoading = true;\r\n\r\n /**\r\n * The set of pre-existing facet selections (including both selected & negated facets).\r\n */\r\n @property({ type: Object }) selectedFacets?: SelectedFacets;\r\n\r\n @property({ type: Number }) sortedBy: AggregationSortType =\r\n AggregationSortType.COUNT;\r\n\r\n @property({ type: Boolean }) isTvSearch = false;\r\n\r\n @property({ type: Object }) modalManager?: ModalManagerInterface;\r\n\r\n @property({ type: Object }) searchService?: SearchServiceInterface;\r\n\r\n @property({ type: Object, attribute: false })\r\n analyticsHandler?: AnalyticsManagerInterface;\r\n\r\n /**\r\n * The full set of aggregations received from the search service\r\n */\r\n @state() private aggregations?: Record<string, Aggregation>;\r\n\r\n /**\r\n * A FacetGroup storing the full set of facet buckets to be shown on the dialog.\r\n */\r\n @state() private facetGroup?: FacetGroup;\r\n\r\n /**\r\n * An object holding any changes the patron has made to their facet selections\r\n * within the modal dialog but which they have not yet applied. These are\r\n * eventually merged into the existing `selectedFacets` when the patron applies\r\n * their changes, or discarded if they cancel/close the dialog.\r\n */\r\n @state() private unappliedFacetChanges: SelectedFacets =\r\n getDefaultSelectedFacets();\r\n\r\n /**\r\n * Text entered by the user to filter facet buckets.\r\n * Applied to bucket.key for case-insensitive matching.\r\n */\r\n @state() private filterText = '';\r\n\r\n /**\r\n * Current page number for pagination (when facet count >= PAGINATION_THRESHOLD).\r\n */\r\n @state() private pageNumber = 1;\r\n\r\n willUpdate(changed: PropertyValues): void {\r\n if (\r\n changed.has('aggregations') ||\r\n changed.has('facetsPerPage') ||\r\n changed.has('sortedBy') ||\r\n changed.has('selectedFacets') ||\r\n changed.has('unappliedFacetChanges')\r\n ) {\r\n // Convert the merged selected facets & aggregations into a facet group, and\r\n // store it for reuse across pages.\r\n this.facetGroup = this.mergedFacets;\r\n }\r\n\r\n // Reset to page 1 when filter text changes (only matters for pagination mode)\r\n if (changed.has('filterText')) {\r\n this.pageNumber = 1;\r\n }\r\n }\r\n\r\n updated(changed: PropertyValues): void {\r\n // If any of the search properties change, it triggers a facet fetch\r\n if (\r\n changed.has('facetKey') ||\r\n changed.has('query') ||\r\n changed.has('searchType') ||\r\n changed.has('filterMap')\r\n ) {\r\n this.facetsLoading = true;\r\n this.pageNumber = 1; // Reset to page 1 on new search\r\n this.sortedBy = defaultFacetSort[this.facetKey as FacetOption];\r\n\r\n this.updateSpecificFacets();\r\n }\r\n }\r\n\r\n firstUpdated(): void {\r\n this.setupEscapeListeners();\r\n }\r\n\r\n /**\r\n * Close more facets modal on Escape click\r\n */\r\n private setupEscapeListeners() {\r\n if (this.modalManager) {\r\n document.addEventListener('keydown', (e: KeyboardEvent) => {\r\n if (e.key === 'Escape') {\r\n this.modalManager?.closeModal();\r\n }\r\n });\r\n } else {\r\n document.removeEventListener('keydown', () => {});\r\n }\r\n }\r\n\r\n /**\r\n * Whether facet requests are for the search_results page type (either defaulted or explicitly).\r\n */\r\n private get isSearchResultsPage(): boolean {\r\n // Default page type is search_results when none is specified, so we check\r\n // for undefined as well.\r\n const pageType: PageType | undefined = this.pageSpecifierParams?.pageType;\r\n return pageType === undefined || pageType === 'search_results';\r\n }\r\n\r\n /**\r\n * Get specific facets data from search-service API based of currently query params\r\n * - this.aggregations - hold result of search service and being used for further processing.\r\n */\r\n async updateSpecificFacets(): Promise<void> {\r\n if (!this.facetKey) return; // Can't fetch facets if we don't know what type of facets we need!\r\n\r\n const trimmedQuery = this.query?.trim();\r\n if (!trimmedQuery && this.isSearchResultsPage) return; // The search page _requires_ a query\r\n\r\n const aggregations = {\r\n simpleParams: [this.facetKey],\r\n };\r\n const aggregationsSize = MORE_FACETS__MAX_AGGREGATIONS; // Only request the 10K highest-count facets\r\n\r\n const params: SearchParams = {\r\n ...this.pageSpecifierParams,\r\n query: trimmedQuery || '',\r\n identifiers: this.identifiers,\r\n filters: this.filterMap,\r\n aggregations,\r\n aggregationsSize,\r\n rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?\r\n };\r\n\r\n const results = await this.searchService?.search(params, this.searchType);\r\n this.aggregations = results?.success?.response.aggregations;\r\n this.facetsLoading = false;\r\n\r\n const collectionTitles = results?.success?.response?.collectionTitles;\r\n if (collectionTitles) {\r\n for (const [id, title] of Object.entries(collectionTitles)) {\r\n this.collectionTitles?.set(id, title);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Combines the selected facets with the aggregations to create a single list of facets\r\n */\r\n private get mergedFacets(): FacetGroup | undefined {\r\n if (!this.facetKey || !this.selectedFacets) return undefined;\r\n\r\n const { selectedFacetGroup, aggregationFacetGroup } = this;\r\n\r\n // If we don't have any aggregations, then there is nothing to show yet\r\n if (!aggregationFacetGroup) return undefined;\r\n\r\n // Start with either the selected group if we have one, or the aggregate group otherwise\r\n const facetGroup = { ...(selectedFacetGroup ?? aggregationFacetGroup) };\r\n\r\n // Attach the counts to the selected buckets\r\n const bucketsWithCount =\r\n selectedFacetGroup?.buckets.map(bucket => {\r\n const selectedBucket = aggregationFacetGroup.buckets.find(\r\n b => b.key === bucket.key,\r\n );\r\n return selectedBucket\r\n ? {\r\n ...bucket,\r\n count: selectedBucket.count,\r\n }\r\n : bucket;\r\n }) ?? [];\r\n\r\n // Sort the buckets by selection state\r\n // We do this *prior* to considering unapplied selections, because we want the facets\r\n // to remain in position when they are selected/unselected, rather than re-sort themselves.\r\n sortBucketsBySelectionState(bucketsWithCount, this.sortedBy);\r\n\r\n // Append any additional buckets that were not selected\r\n aggregationFacetGroup.buckets.forEach(bucket => {\r\n const existingBucket = selectedFacetGroup?.buckets.find(\r\n b => b.key === bucket.key,\r\n );\r\n if (existingBucket) return;\r\n bucketsWithCount.push(bucket);\r\n });\r\n\r\n // Apply any unapplied selections that appear on this page\r\n const unappliedBuckets = this.unappliedFacetChanges[this.facetKey];\r\n for (const [index, bucket] of bucketsWithCount.entries()) {\r\n const unappliedBucket = unappliedBuckets?.[bucket.key];\r\n if (unappliedBucket) {\r\n bucketsWithCount[index] = { ...unappliedBucket };\r\n }\r\n }\r\n\r\n // For TV creator facets, uppercase the display text\r\n if (this.facetKey === 'creator' && this.isTvSearch) {\r\n bucketsWithCount.forEach(b => {\r\n b.displayText = (b.displayText ?? b.key)?.toLocaleUpperCase();\r\n\r\n const channelLabel = this.tvChannelAliases?.get(b.displayText);\r\n if (channelLabel && channelLabel !== b.displayText) {\r\n b.extraNote = `(${channelLabel})`;\r\n }\r\n });\r\n }\r\n\r\n facetGroup.buckets = bucketsWithCount;\r\n return facetGroup;\r\n }\r\n\r\n /**\r\n * Converts the selected facets for the current facet key to a `FacetGroup`,\r\n * which is easier to work with.\r\n */\r\n private get selectedFacetGroup(): FacetGroup | undefined {\r\n if (!this.selectedFacets || !this.facetKey) return undefined;\r\n\r\n const selectedFacetsForKey = this.selectedFacets[this.facetKey];\r\n if (!selectedFacetsForKey) return undefined;\r\n\r\n const facetGroupTitle = facetTitles[this.facetKey];\r\n\r\n const buckets: FacetBucket[] = Object.entries(selectedFacetsForKey).map(\r\n ([value, data]) => {\r\n const displayText: string = value;\r\n return {\r\n displayText,\r\n key: value,\r\n count: data?.count,\r\n state: data?.state,\r\n };\r\n },\r\n );\r\n\r\n return {\r\n title: facetGroupTitle,\r\n key: this.facetKey,\r\n buckets,\r\n };\r\n }\r\n\r\n /**\r\n * Converts the raw `aggregations` for the current facet key to a `FacetGroup`,\r\n * which is easier to work with.\r\n */\r\n private get aggregationFacetGroup(): FacetGroup | undefined {\r\n if (!this.aggregations || !this.facetKey) return undefined;\r\n\r\n const currentAggregation = this.aggregations[this.facetKey];\r\n if (!currentAggregation) return undefined;\r\n\r\n const facetGroupTitle = facetTitles[this.facetKey];\r\n\r\n // Order the facets according to the current sort option\r\n let sortedBuckets = currentAggregation.getSortedBuckets(\r\n this.sortedBy,\r\n ) as Bucket[];\r\n\r\n if (this.facetKey === 'collection') {\r\n // we are not showing fav- collections or certain deemphasized collections in facets\r\n sortedBuckets = sortedBuckets?.filter(bucket => {\r\n const bucketKey = bucket?.key?.toString();\r\n return (\r\n !suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-')\r\n );\r\n });\r\n }\r\n\r\n // Construct the array of facet buckets from the aggregation buckets\r\n const facetBuckets: FacetBucket[] = sortedBuckets.map(bucket => {\r\n const bucketKeyStr = `${bucket.key}`;\r\n return {\r\n displayText: `${bucketKeyStr}`,\r\n key: `${bucketKeyStr}`,\r\n count: bucket.doc_count,\r\n state: 'none',\r\n };\r\n });\r\n\r\n return {\r\n title: facetGroupTitle,\r\n key: this.facetKey,\r\n buckets: facetBuckets,\r\n };\r\n }\r\n\r\n /**\r\n * Returns the facet group with buckets filtered by the current filter text.\r\n * Filters are applied to the full bucket list before pagination.\r\n */\r\n private get filteredFacetGroup(): FacetGroup | undefined {\r\n const { facetGroup, filterText } = this;\r\n if (!facetGroup) return undefined;\r\n\r\n // If no filter text, return the full group\r\n if (!filterText.trim()) {\r\n return facetGroup;\r\n }\r\n\r\n // Filter buckets case-insensitively by bucket key\r\n const lowerFilter = filterText.toLowerCase().trim();\r\n const filteredBuckets = facetGroup.buckets.filter(bucket =>\r\n bucket.key.toLowerCase().includes(lowerFilter),\r\n );\r\n\r\n return {\r\n ...facetGroup,\r\n buckets: filteredBuckets,\r\n };\r\n }\r\n\r\n /**\r\n * Determines whether to use pagination based on the number of filtered facets.\r\n * Returns true if facet count >= PAGINATION_THRESHOLD, false otherwise.\r\n */\r\n private get usePagination(): boolean {\r\n const facetCount = this.filteredFacetGroup?.buckets.length ?? 0;\r\n return facetCount >= PAGINATION_THRESHOLD;\r\n }\r\n\r\n /**\r\n * Returns the facet group for the current page.\r\n * If using pagination (>= 1000 facets), slices to show only the current page.\r\n * Otherwise, returns all facets for horizontal scrolling.\r\n */\r\n private get facetGroupForCurrentPage(): FacetGroup | undefined {\r\n const filteredGroup = this.filteredFacetGroup;\r\n if (!filteredGroup) return undefined;\r\n\r\n // If facet count is below threshold, show all facets with horizontal scroll\r\n if (!this.usePagination) {\r\n return filteredGroup;\r\n }\r\n\r\n // Otherwise, use pagination - slice to current page\r\n const startIndex = (this.pageNumber - 1) * this.facetsPerPage;\r\n const endIndex = startIndex + this.facetsPerPage;\r\n const slicedBuckets = filteredGroup.buckets.slice(startIndex, endIndex);\r\n\r\n return {\r\n ...filteredGroup,\r\n buckets: slicedBuckets,\r\n };\r\n }\r\n\r\n private get moreFacetsTemplate(): TemplateResult {\r\n const facetGroup = this.facetGroupForCurrentPage;\r\n\r\n // Show empty state if filtering returned no results\r\n if (\r\n this.filterText.trim() &&\r\n (!facetGroup || facetGroup.buckets.length === 0)\r\n ) {\r\n return this.emptyFilterResultsTemplate;\r\n }\r\n\r\n return html`\r\n <facets-template\r\n .facetGroup=${facetGroup}\r\n .selectedFacets=${this.selectedFacets}\r\n .collectionTitles=${this.collectionTitles}\r\n @facetClick=${(e: CustomEvent<FacetEventDetails>) => {\r\n if (this.facetKey) {\r\n this.unappliedFacetChanges = updateSelectedFacetBucket(\r\n this.unappliedFacetChanges,\r\n this.facetKey,\r\n e.detail.bucket,\r\n );\r\n }\r\n }}\r\n ></facets-template>\r\n `;\r\n }\r\n\r\n private get loaderTemplate(): TemplateResult {\r\n return html`\r\n <ia-status-indicator\r\n class=\"facets-loader\"\r\n mode=\"loading\"\r\n ></ia-status-indicator>\r\n `;\r\n }\r\n\r\n private get emptyFilterResultsTemplate(): TemplateResult {\r\n return html`\r\n <div class=\"empty-results\">\r\n <p>${msg('No matching values found.')}</p>\r\n <p class=\"hint\">${msg('Try a different search term.')}</p>\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Number of pages for pagination (only used when facet count >= PAGINATION_THRESHOLD).\r\n */\r\n private get paginationSize(): number {\r\n const filteredBuckets = this.filteredFacetGroup?.buckets ?? [];\r\n return Math.ceil(filteredBuckets.length / this.facetsPerPage);\r\n }\r\n\r\n /**\r\n * Template for pagination component (only shown when facet count >= PAGINATION_THRESHOLD).\r\n */\r\n private get facetsPaginationTemplate() {\r\n if (!this.usePagination) return nothing;\r\n\r\n return html`<more-facets-pagination\r\n .size=${this.paginationSize}\r\n .currentPage=${this.pageNumber}\r\n @pageNumberClicked=${this.pageNumberClicked}\r\n ></more-facets-pagination>`;\r\n }\r\n\r\n private get footerTemplate() {\r\n return html`\r\n ${this.facetsPaginationTemplate}\r\n <div class=\"footer\">\r\n <button class=\"btn btn-cancel\" type=\"button\" @click=${this.cancelClick}>\r\n Cancel\r\n </button>\r\n <button\r\n class=\"btn btn-submit\"\r\n type=\"button\"\r\n @click=${this.applySearchFacetsClicked}\r\n >\r\n Apply filters\r\n </button>\r\n </div>\r\n `;\r\n }\r\n\r\n private sortFacetAggregation(facetSortType: AggregationSortType) {\r\n this.sortedBy = facetSortType;\r\n this.dispatchEvent(\r\n new CustomEvent('sortedFacets', { detail: this.sortedBy }),\r\n );\r\n }\r\n\r\n /**\r\n * Handler for filter input changes. Updates the filter text and triggers re-render.\r\n */\r\n private handleFilterInput(e: Event): void {\r\n const input = e.target as HTMLInputElement;\r\n this.filterText = input.value;\r\n }\r\n\r\n /**\r\n * Handler for pagination page number clicks.\r\n * Only used when facet count >= PAGINATION_THRESHOLD.\r\n */\r\n private pageNumberClicked(e: CustomEvent<{ page: number }>) {\r\n this.pageNumber = e.detail.page;\r\n\r\n // Track page navigation in analytics\r\n this.analyticsHandler?.sendEvent({\r\n category: analyticsCategories.default,\r\n action: analyticsActions.moreFacetsPageChange,\r\n label: `${this.pageNumber}`,\r\n });\r\n\r\n this.dispatchEvent(\r\n new CustomEvent('pageChanged', { detail: this.pageNumber }),\r\n );\r\n }\r\n\r\n private get modalHeaderTemplate(): TemplateResult {\r\n const facetSort =\r\n this.sortedBy ?? defaultFacetSort[this.facetKey as FacetOption];\r\n const defaultSwitchSide =\r\n facetSort === AggregationSortType.COUNT ? 'left' : 'right';\r\n\r\n return html`<span class=\"sr-only\">${msg('More facets for:')}</span>\r\n <span class=\"title\">\r\n ${this.facetGroup?.title}\r\n\r\n <label class=\"sort-label\">${msg('Sort by:')}</label>\r\n ${this.facetKey\r\n ? html`<toggle-switch\r\n class=\"sort-toggle\"\r\n leftValue=${AggregationSortType.COUNT}\r\n leftLabel=\"Count\"\r\n rightValue=${valueFacetSort[this.facetKey]}\r\n .rightLabel=${this.facetGroup?.title}\r\n side=${defaultSwitchSide}\r\n @change=${(e: CustomEvent<string>) => {\r\n this.sortFacetAggregation(\r\n Number(e.detail) as AggregationSortType,\r\n );\r\n }}\r\n ></toggle-switch>`\r\n : nothing}\r\n\r\n <label class=\"filter-label\" for=\"facet-filter\"\r\n >${msg('Filter by:')}</label\r\n >\r\n <input\r\n id=\"facet-filter\"\r\n type=\"text\"\r\n class=\"filter-input\"\r\n .value=${this.filterText}\r\n @input=${this.handleFilterInput}\r\n placeholder=${msg('Search...')}\r\n aria-label=${msg('Filter facets')}\r\n />\r\n </span>`;\r\n }\r\n\r\n render() {\r\n const contentClass = this.usePagination\r\n ? 'facets-content pagination-mode'\r\n : 'facets-content horizontal-scroll-mode';\r\n const sectionClass = this.usePagination\r\n ? 'pagination-mode'\r\n : 'horizontal-scroll-mode';\r\n\r\n return html`\r\n ${this.facetsLoading\r\n ? this.loaderTemplate\r\n : html`\r\n <section id=\"more-facets\" class=\"${sectionClass}\">\r\n <div class=\"header-content\">${this.modalHeaderTemplate}</div>\r\n <div class=\"${contentClass}\">\r\n ${this.usePagination\r\n ? this.moreFacetsTemplate\r\n : html`<div class=\"facets-horizontal-container\">\r\n ${this.moreFacetsTemplate}\r\n </div>`}\r\n </div>\r\n ${this.footerTemplate}\r\n </section>\r\n `}\r\n `;\r\n }\r\n\r\n private applySearchFacetsClicked() {\r\n const mergedSelections = mergeSelectedFacets(\r\n this.selectedFacets,\r\n this.unappliedFacetChanges,\r\n );\r\n\r\n const event = new CustomEvent<SelectedFacets>('facetsChanged', {\r\n detail: mergedSelections,\r\n bubbles: true,\r\n composed: true,\r\n });\r\n this.dispatchEvent(event);\r\n\r\n // Reset the unapplied changes back to default, now that they have been applied\r\n this.unappliedFacetChanges = getDefaultSelectedFacets();\r\n\r\n // Reset filter text\r\n this.filterText = '';\r\n\r\n this.modalManager?.closeModal();\r\n this.analyticsHandler?.sendEvent({\r\n category: analyticsCategories.default,\r\n action: `${analyticsActions.applyMoreFacetsModal}`,\r\n label: `${this.facetKey}`,\r\n });\r\n }\r\n\r\n private cancelClick() {\r\n // Reset the unapplied changes back to default\r\n this.unappliedFacetChanges = getDefaultSelectedFacets();\r\n\r\n // Reset filter text\r\n this.filterText = '';\r\n\r\n this.modalManager?.closeModal();\r\n this.analyticsHandler?.sendEvent({\r\n category: analyticsCategories.default,\r\n action: analyticsActions.closeMoreFacetsModal,\r\n label: `${this.facetKey}`,\r\n });\r\n }\r\n\r\n static get styles(): CSSResultGroup {\r\n const modalSubmitButton = css`var(--primaryButtonBGColor, #194880)`;\r\n\r\n return [\r\n srOnlyStyle,\r\n css`\r\n section#more-facets {\r\n overflow: auto;\r\n padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */\r\n --facetsColumnCount: 3;\r\n }\r\n\r\n /* Horizontal scroll mode: fixed column height for horizontal overflow */\r\n section#more-facets.horizontal-scroll-mode {\r\n --facetsColumnCount: 3;\r\n --facetsMaxHeight: 280px;\r\n }\r\n\r\n /* Pagination mode: set height for proper column layout with vertical scroll */\r\n section#more-facets.pagination-mode {\r\n --facetsColumnCount: 3;\r\n --facetsMaxHeight: 280px; /* Columns need height constraint to flow properly */\r\n }\r\n .header-content .title {\r\n display: block;\r\n text-align: left;\r\n font-size: 1.8rem;\r\n padding: 0 10px;\r\n font-weight: bold;\r\n }\r\n\r\n .sort-label {\r\n margin-left: 20px;\r\n font-size: 1.3rem;\r\n }\r\n\r\n .sort-toggle {\r\n font-weight: normal;\r\n }\r\n\r\n .filter-label {\r\n margin-left: 20px;\r\n font-size: 1.3rem;\r\n }\r\n\r\n .filter-input {\r\n font-size: 1.3rem;\r\n padding: 4px 8px;\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n margin-left: 5px;\r\n width: 150px;\r\n font-family: inherit;\r\n }\r\n\r\n .filter-input:focus {\r\n outline: 2px solid #194880;\r\n outline-offset: 1px;\r\n border-color: #194880;\r\n }\r\n\r\n .empty-results {\r\n text-align: center;\r\n padding: 40px 20px;\r\n color: #666;\r\n }\r\n\r\n .empty-results .hint {\r\n font-size: 1.1rem;\r\n margin-top: 10px;\r\n }\r\n\r\n .facets-content {\r\n font-size: 1.2rem;\r\n max-height: 300px;\r\n padding: 10px;\r\n /* Force scrollbar to always be visible */\r\n scrollbar-width: thin; /* Firefox */\r\n scrollbar-color: #888 #f1f1f1; /* Firefox - thumb and track colors */\r\n }\r\n\r\n /* Pagination mode: vertical scrolling, allow taller height for multiple columns */\r\n .facets-content.pagination-mode {\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n max-height: none; /* Remove height constraint to allow columns to flow properly */\r\n height: 300px; /* Fixed height to enable vertical scroll */\r\n }\r\n\r\n /* Horizontal scroll mode: horizontal scrolling only */\r\n .facets-content.horizontal-scroll-mode {\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n }\r\n\r\n /* Webkit browsers scrollbar styling - always visible */\r\n .facets-content::-webkit-scrollbar {\r\n width: 12px; /* Vertical scrollbar width */\r\n height: 12px; /* Horizontal scrollbar height */\r\n }\r\n\r\n .facets-content::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 6px;\r\n }\r\n\r\n .facets-content::-webkit-scrollbar-thumb {\r\n background: #888;\r\n border-radius: 6px;\r\n min-height: 30px; /* Ensure thumb is always visible when scrolling is possible */\r\n }\r\n\r\n .facets-content::-webkit-scrollbar-thumb:hover {\r\n background: #555;\r\n }\r\n\r\n /* Force corner to match track color */\r\n .facets-content::-webkit-scrollbar-corner {\r\n background: #f1f1f1;\r\n }\r\n\r\n .facets-horizontal-container {\r\n display: inline-block;\r\n min-width: 100%;\r\n /* Allow natural width expansion based on content */\r\n width: fit-content;\r\n }\r\n .facets-loader {\r\n --icon-width: 70px;\r\n margin-bottom: 20px;\r\n display: block;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n .btn {\r\n border: none;\r\n padding: 10px;\r\n margin-bottom: 10px;\r\n width: auto;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n }\r\n .btn-cancel {\r\n background-color: #2c2c2c;\r\n color: white;\r\n }\r\n .btn-submit {\r\n background-color: ${modalSubmitButton};\r\n color: white;\r\n }\r\n .footer {\r\n text-align: center;\r\n margin-top: 10px;\r\n }\r\n\r\n @media (max-width: 560px) {\r\n section#more-facets.horizontal-scroll-mode,\r\n section#more-facets.pagination-mode {\r\n max-height: 450px;\r\n --facetsColumnCount: 1; /* Single column on mobile */\r\n --facetsMaxHeight: none; /* Remove fixed height for vertical scrolling */\r\n }\r\n /* On mobile, always use vertical scrolling regardless of mode */\r\n .facets-content,\r\n .facets-content.pagination-mode,\r\n .facets-content.horizontal-scroll-mode {\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n height: 300px;\r\n }\r\n .filter-input {\r\n width: 120px;\r\n font-size: 1.2rem;\r\n }\r\n }\r\n `,\r\n ];\r\n }\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"more-facets-content.js","sourceRoot":"","sources":["../../../src/collection-facets/more-facets-content.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n css,\r\n CSSResultGroup,\r\n html,\r\n LitElement,\r\n nothing,\r\n PropertyValues,\r\n TemplateResult,\r\n} from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport {\r\n Aggregation,\r\n Bucket,\r\n SearchServiceInterface,\r\n SearchParams,\r\n SearchType,\r\n AggregationSortType,\r\n FilterMap,\r\n PageType,\r\n} from '@internetarchive/search-service';\r\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\r\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\r\nimport { msg } from '@lit/localize';\r\nimport {\r\n SelectedFacets,\r\n FacetGroup,\r\n FacetBucket,\r\n FacetOption,\r\n facetTitles,\r\n suppressedCollections,\r\n valueFacetSort,\r\n defaultFacetSort,\r\n getDefaultSelectedFacets,\r\n FacetEventDetails,\r\n} from '../models';\r\nimport type {\r\n CollectionTitles,\r\n PageSpecifierParams,\r\n TVChannelAliases,\r\n} from '../data-source/models';\r\nimport '@internetarchive/elements/ia-status-indicator/ia-status-indicator';\r\nimport './more-facets-pagination';\r\nimport './facets-template';\r\nimport {\r\n analyticsActions,\r\n analyticsCategories,\r\n} from '../utils/analytics-events';\r\nimport './toggle-switch';\r\nimport { srOnlyStyle } from '../styles/sr-only';\r\nimport {\r\n mergeSelectedFacets,\r\n sortBucketsBySelectionState,\r\n updateSelectedFacetBucket,\r\n} from '../utils/facet-utils';\r\nimport {\r\n MORE_FACETS__DEFAULT_PAGE_SIZE,\r\n MORE_FACETS__MAX_AGGREGATIONS,\r\n} from './models';\r\n\r\n@customElement('more-facets-content')\r\nexport class MoreFacetsContent extends LitElement {\r\n @property({ type: String }) facetKey?: FacetOption;\r\n\r\n @property({ type: String }) query?: string;\r\n\r\n @property({ type: Array }) identifiers?: string[];\r\n\r\n @property({ type: Object }) filterMap?: FilterMap;\r\n\r\n @property({ type: Number }) searchType?: SearchType;\r\n\r\n @property({ type: Object }) pageSpecifierParams?: PageSpecifierParams;\r\n\r\n @property({ type: Object })\r\n collectionTitles?: CollectionTitles;\r\n\r\n @property({ type: Object })\r\n tvChannelAliases?: TVChannelAliases;\r\n\r\n /**\r\n * Maximum number of facets to show per page within the modal.\r\n */\r\n @property({ type: Number }) facetsPerPage = MORE_FACETS__DEFAULT_PAGE_SIZE;\r\n\r\n /**\r\n * Whether we are waiting for facet data to load.\r\n * We begin with this set to true so that we show an initial loading indicator.\r\n */\r\n @property({ type: Boolean }) facetsLoading = true;\r\n\r\n /**\r\n * The set of pre-existing facet selections (including both selected & negated facets).\r\n */\r\n @property({ type: Object }) selectedFacets?: SelectedFacets;\r\n\r\n @property({ type: Number }) sortedBy: AggregationSortType =\r\n AggregationSortType.COUNT;\r\n\r\n @property({ type: Boolean }) isTvSearch = false;\r\n\r\n @property({ type: Object }) modalManager?: ModalManagerInterface;\r\n\r\n @property({ type: Object }) searchService?: SearchServiceInterface;\r\n\r\n @property({ type: Object, attribute: false })\r\n analyticsHandler?: AnalyticsManagerInterface;\r\n\r\n /**\r\n * The full set of aggregations received from the search service\r\n */\r\n @state() private aggregations?: Record<string, Aggregation>;\r\n\r\n /**\r\n * A FacetGroup storing the full set of facet buckets to be shown on the dialog.\r\n */\r\n @state() private facetGroup?: FacetGroup;\r\n\r\n /**\r\n * An object holding any changes the patron has made to their facet selections\r\n * within the modal dialog but which they have not yet applied. These are\r\n * eventually merged into the existing `selectedFacets` when the patron applies\r\n * their changes, or discarded if they cancel/close the dialog.\r\n */\r\n @state() private unappliedFacetChanges: SelectedFacets =\r\n getDefaultSelectedFacets();\r\n\r\n /**\r\n * Which page of facets we are showing.\r\n */\r\n @state() private pageNumber = 1;\r\n\r\n willUpdate(changed: PropertyValues): void {\r\n if (\r\n changed.has('aggregations') ||\r\n changed.has('facetsPerPage') ||\r\n changed.has('sortedBy') ||\r\n changed.has('selectedFacets') ||\r\n changed.has('unappliedFacetChanges')\r\n ) {\r\n // Convert the merged selected facets & aggregations into a facet group, and\r\n // store it for reuse across pages.\r\n this.facetGroup = this.mergedFacets;\r\n }\r\n }\r\n\r\n updated(changed: PropertyValues): void {\r\n // If any of the search properties change, it triggers a facet fetch\r\n if (\r\n changed.has('facetKey') ||\r\n changed.has('query') ||\r\n changed.has('searchType') ||\r\n changed.has('filterMap')\r\n ) {\r\n this.facetsLoading = true;\r\n this.pageNumber = 1;\r\n this.sortedBy = defaultFacetSort[this.facetKey as FacetOption];\r\n\r\n this.updateSpecificFacets();\r\n }\r\n }\r\n\r\n firstUpdated(): void {\r\n this.setupEscapeListeners();\r\n }\r\n\r\n /**\r\n * Close more facets modal on Escape click\r\n */\r\n private setupEscapeListeners() {\r\n if (this.modalManager) {\r\n document.addEventListener('keydown', (e: KeyboardEvent) => {\r\n if (e.key === 'Escape') {\r\n this.modalManager?.closeModal();\r\n }\r\n });\r\n } else {\r\n document.removeEventListener('keydown', () => {});\r\n }\r\n }\r\n\r\n /**\r\n * Whether facet requests are for the search_results page type (either defaulted or explicitly).\r\n */\r\n private get isSearchResultsPage(): boolean {\r\n // Default page type is search_results when none is specified, so we check\r\n // for undefined as well.\r\n const pageType: PageType | undefined = this.pageSpecifierParams?.pageType;\r\n return pageType === undefined || pageType === 'search_results';\r\n }\r\n\r\n /**\r\n * Get specific facets data from search-service API based of currently query params\r\n * - this.aggregations - hold result of search service and being used for further processing.\r\n */\r\n async updateSpecificFacets(): Promise<void> {\r\n if (!this.facetKey) return; // Can't fetch facets if we don't know what type of facets we need!\r\n\r\n const trimmedQuery = this.query?.trim();\r\n if (!trimmedQuery && this.isSearchResultsPage) return; // The search page _requires_ a query\r\n\r\n const aggregations = {\r\n simpleParams: [this.facetKey],\r\n };\r\n const aggregationsSize = MORE_FACETS__MAX_AGGREGATIONS; // Only request the 10K highest-count facets\r\n\r\n const params: SearchParams = {\r\n ...this.pageSpecifierParams,\r\n query: trimmedQuery || '',\r\n identifiers: this.identifiers,\r\n filters: this.filterMap,\r\n aggregations,\r\n aggregationsSize,\r\n rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?\r\n };\r\n\r\n const results = await this.searchService?.search(params, this.searchType);\r\n this.aggregations = results?.success?.response.aggregations;\r\n this.facetsLoading = false;\r\n\r\n const collectionTitles = results?.success?.response?.collectionTitles;\r\n if (collectionTitles) {\r\n for (const [id, title] of Object.entries(collectionTitles)) {\r\n this.collectionTitles?.set(id, title);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Handler for page number changes from the pagination widget.\r\n */\r\n private pageNumberClicked(e: CustomEvent<{ page: number }>) {\r\n const page = e?.detail?.page;\r\n if (page) {\r\n this.pageNumber = Number(page);\r\n }\r\n\r\n this.analyticsHandler?.sendEvent({\r\n category: analyticsCategories.default,\r\n action: analyticsActions.moreFacetsPageChange,\r\n label: `${this.pageNumber}`,\r\n });\r\n }\r\n\r\n /**\r\n * Combines the selected facets with the aggregations to create a single list of facets\r\n */\r\n private get mergedFacets(): FacetGroup | undefined {\r\n if (!this.facetKey || !this.selectedFacets) return undefined;\r\n\r\n const { selectedFacetGroup, aggregationFacetGroup } = this;\r\n\r\n // If we don't have any aggregations, then there is nothing to show yet\r\n if (!aggregationFacetGroup) return undefined;\r\n\r\n // Start with either the selected group if we have one, or the aggregate group otherwise\r\n const facetGroup = { ...(selectedFacetGroup ?? aggregationFacetGroup) };\r\n\r\n // Attach the counts to the selected buckets\r\n const bucketsWithCount =\r\n selectedFacetGroup?.buckets.map(bucket => {\r\n const selectedBucket = aggregationFacetGroup.buckets.find(\r\n b => b.key === bucket.key,\r\n );\r\n return selectedBucket\r\n ? {\r\n ...bucket,\r\n count: selectedBucket.count,\r\n }\r\n : bucket;\r\n }) ?? [];\r\n\r\n // Sort the buckets by selection state\r\n // We do this *prior* to considering unapplied selections, because we want the facets\r\n // to remain in position when they are selected/unselected, rather than re-sort themselves.\r\n sortBucketsBySelectionState(bucketsWithCount, this.sortedBy);\r\n\r\n // Append any additional buckets that were not selected\r\n aggregationFacetGroup.buckets.forEach(bucket => {\r\n const existingBucket = selectedFacetGroup?.buckets.find(\r\n b => b.key === bucket.key,\r\n );\r\n if (existingBucket) return;\r\n bucketsWithCount.push(bucket);\r\n });\r\n\r\n // Apply any unapplied selections that appear on this page\r\n const unappliedBuckets = this.unappliedFacetChanges[this.facetKey];\r\n for (const [index, bucket] of bucketsWithCount.entries()) {\r\n const unappliedBucket = unappliedBuckets?.[bucket.key];\r\n if (unappliedBucket) {\r\n bucketsWithCount[index] = { ...unappliedBucket };\r\n }\r\n }\r\n\r\n // For TV creator facets, uppercase the display text\r\n if (this.facetKey === 'creator' && this.isTvSearch) {\r\n bucketsWithCount.forEach(b => {\r\n b.displayText = (b.displayText ?? b.key)?.toLocaleUpperCase();\r\n\r\n const channelLabel = this.tvChannelAliases?.get(b.displayText);\r\n if (channelLabel && channelLabel !== b.displayText) {\r\n b.extraNote = `(${channelLabel})`;\r\n }\r\n });\r\n }\r\n\r\n facetGroup.buckets = bucketsWithCount;\r\n return facetGroup;\r\n }\r\n\r\n /**\r\n * Converts the selected facets for the current facet key to a `FacetGroup`,\r\n * which is easier to work with.\r\n */\r\n private get selectedFacetGroup(): FacetGroup | undefined {\r\n if (!this.selectedFacets || !this.facetKey) return undefined;\r\n\r\n const selectedFacetsForKey = this.selectedFacets[this.facetKey];\r\n if (!selectedFacetsForKey) return undefined;\r\n\r\n const facetGroupTitle = facetTitles[this.facetKey];\r\n\r\n const buckets: FacetBucket[] = Object.entries(selectedFacetsForKey).map(\r\n ([value, data]) => {\r\n const displayText: string = value;\r\n return {\r\n displayText,\r\n key: value,\r\n count: data?.count,\r\n state: data?.state,\r\n };\r\n },\r\n );\r\n\r\n return {\r\n title: facetGroupTitle,\r\n key: this.facetKey,\r\n buckets,\r\n };\r\n }\r\n\r\n /**\r\n * Converts the raw `aggregations` for the current facet key to a `FacetGroup`,\r\n * which is easier to work with.\r\n */\r\n private get aggregationFacetGroup(): FacetGroup | undefined {\r\n if (!this.aggregations || !this.facetKey) return undefined;\r\n\r\n const currentAggregation = this.aggregations[this.facetKey];\r\n if (!currentAggregation) return undefined;\r\n\r\n const facetGroupTitle = facetTitles[this.facetKey];\r\n\r\n // Order the facets according to the current sort option\r\n let sortedBuckets = currentAggregation.getSortedBuckets(\r\n this.sortedBy,\r\n ) as Bucket[];\r\n\r\n if (this.facetKey === 'collection') {\r\n // we are not showing fav- collections or certain deemphasized collections in facets\r\n sortedBuckets = sortedBuckets?.filter(bucket => {\r\n const bucketKey = bucket?.key?.toString();\r\n return (\r\n !suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-')\r\n );\r\n });\r\n }\r\n\r\n // Construct the array of facet buckets from the aggregation buckets\r\n const facetBuckets: FacetBucket[] = sortedBuckets.map(bucket => {\r\n const bucketKeyStr = `${bucket.key}`;\r\n return {\r\n displayText: `${bucketKeyStr}`,\r\n key: `${bucketKeyStr}`,\r\n count: bucket.doc_count,\r\n state: 'none',\r\n };\r\n });\r\n\r\n return {\r\n title: facetGroupTitle,\r\n key: this.facetKey,\r\n buckets: facetBuckets,\r\n };\r\n }\r\n\r\n /**\r\n * Returns a FacetGroup representing only the current page of facet buckets to show.\r\n */\r\n private get facetGroupForCurrentPage(): FacetGroup | undefined {\r\n const { facetGroup } = this;\r\n if (!facetGroup) return undefined;\r\n\r\n // Slice out only the current page of facet buckets\r\n const firstBucketIndexOnPage = (this.pageNumber - 1) * this.facetsPerPage;\r\n const truncatedBuckets = facetGroup.buckets.slice(\r\n firstBucketIndexOnPage,\r\n firstBucketIndexOnPage + this.facetsPerPage,\r\n );\r\n\r\n return {\r\n ...facetGroup,\r\n buckets: truncatedBuckets,\r\n };\r\n }\r\n\r\n private get moreFacetsTemplate(): TemplateResult {\r\n return html`\r\n <facets-template\r\n .facetGroup=${this.facetGroupForCurrentPage}\r\n .selectedFacets=${this.selectedFacets}\r\n .collectionTitles=${this.collectionTitles}\r\n @facetClick=${(e: CustomEvent<FacetEventDetails>) => {\r\n if (this.facetKey) {\r\n this.unappliedFacetChanges = updateSelectedFacetBucket(\r\n this.unappliedFacetChanges,\r\n this.facetKey,\r\n e.detail.bucket,\r\n );\r\n }\r\n }}\r\n ></facets-template>\r\n `;\r\n }\r\n\r\n private get loaderTemplate(): TemplateResult {\r\n return html`\r\n <ia-status-indicator\r\n class=\"facets-loader\"\r\n mode=\"loading\"\r\n ></ia-status-indicator>\r\n `;\r\n }\r\n\r\n /**\r\n * How many pages of facets to show in the modal pagination widget\r\n */\r\n private get paginationSize(): number {\r\n if (!this.aggregations || !this.facetKey) return 0;\r\n\r\n // Calculate the appropriate number of pages to show in the modal pagination widget\r\n const length = this.aggregations[this.facetKey]?.buckets.length;\r\n return Math.ceil(length / this.facetsPerPage);\r\n }\r\n\r\n // render pagination if more then 1 page\r\n private get facetsPaginationTemplate() {\r\n return this.paginationSize > 1\r\n ? html`<more-facets-pagination\r\n .size=${this.paginationSize}\r\n .currentPage=${1}\r\n @pageNumberClicked=${this.pageNumberClicked}\r\n ></more-facets-pagination>`\r\n : nothing;\r\n }\r\n\r\n private get footerTemplate() {\r\n if (this.paginationSize > 0) {\r\n return html`${this.facetsPaginationTemplate}\r\n <div class=\"footer\">\r\n <button\r\n class=\"btn btn-cancel\"\r\n type=\"button\"\r\n @click=${this.cancelClick}\r\n >\r\n Cancel\r\n </button>\r\n <button\r\n class=\"btn btn-submit\"\r\n type=\"button\"\r\n @click=${this.applySearchFacetsClicked}\r\n >\r\n Apply filters\r\n </button>\r\n </div> `;\r\n }\r\n\r\n return nothing;\r\n }\r\n\r\n private sortFacetAggregation(facetSortType: AggregationSortType) {\r\n this.sortedBy = facetSortType;\r\n this.dispatchEvent(\r\n new CustomEvent('sortedFacets', { detail: this.sortedBy }),\r\n );\r\n }\r\n\r\n private get modalHeaderTemplate(): TemplateResult {\r\n const facetSort =\r\n this.sortedBy ?? defaultFacetSort[this.facetKey as FacetOption];\r\n const defaultSwitchSide =\r\n facetSort === AggregationSortType.COUNT ? 'left' : 'right';\r\n\r\n return html`<span class=\"sr-only\">${msg('More facets for:')}</span>\r\n <span class=\"title\">\r\n ${this.facetGroup?.title}\r\n\r\n <label class=\"sort-label\">${msg('Sort by:')}</label>\r\n ${this.facetKey\r\n ? html`<toggle-switch\r\n class=\"sort-toggle\"\r\n leftValue=${AggregationSortType.COUNT}\r\n leftLabel=\"Count\"\r\n rightValue=${valueFacetSort[this.facetKey]}\r\n .rightLabel=${this.facetGroup?.title}\r\n side=${defaultSwitchSide}\r\n @change=${(e: CustomEvent<string>) => {\r\n this.sortFacetAggregation(\r\n Number(e.detail) as AggregationSortType,\r\n );\r\n }}\r\n ></toggle-switch>`\r\n : nothing}\r\n </span>`;\r\n }\r\n\r\n render() {\r\n return html`\r\n ${this.facetsLoading\r\n ? this.loaderTemplate\r\n : html`\r\n <section id=\"more-facets\">\r\n <div class=\"header-content\">${this.modalHeaderTemplate}</div>\r\n <div class=\"facets-content\">${this.moreFacetsTemplate}</div>\r\n ${this.footerTemplate}\r\n </section>\r\n `}\r\n `;\r\n }\r\n\r\n private applySearchFacetsClicked() {\r\n const mergedSelections = mergeSelectedFacets(\r\n this.selectedFacets,\r\n this.unappliedFacetChanges,\r\n );\r\n\r\n const event = new CustomEvent<SelectedFacets>('facetsChanged', {\r\n detail: mergedSelections,\r\n bubbles: true,\r\n composed: true,\r\n });\r\n this.dispatchEvent(event);\r\n\r\n // Reset the unapplied changes back to default, now that they have been applied\r\n this.unappliedFacetChanges = getDefaultSelectedFacets();\r\n\r\n this.modalManager?.closeModal();\r\n this.analyticsHandler?.sendEvent({\r\n category: analyticsCategories.default,\r\n action: `${analyticsActions.applyMoreFacetsModal}`,\r\n label: `${this.facetKey}`,\r\n });\r\n }\r\n\r\n private cancelClick() {\r\n // Reset the unapplied changes back to default\r\n this.unappliedFacetChanges = getDefaultSelectedFacets();\r\n\r\n this.modalManager?.closeModal();\r\n this.analyticsHandler?.sendEvent({\r\n category: analyticsCategories.default,\r\n action: analyticsActions.closeMoreFacetsModal,\r\n label: `${this.facetKey}`,\r\n });\r\n }\r\n\r\n static get styles(): CSSResultGroup {\r\n const modalSubmitButton = css`var(--primaryButtonBGColor, #194880)`;\r\n\r\n return [\r\n srOnlyStyle,\r\n css`\r\n section#more-facets {\r\n overflow: auto;\r\n padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */\r\n --facetsColumnCount: 3;\r\n }\r\n .header-content .title {\r\n display: block;\r\n text-align: left;\r\n font-size: 1.8rem;\r\n padding: 0 10px;\r\n font-weight: bold;\r\n }\r\n\r\n .sort-label {\r\n margin-left: 20px;\r\n font-size: 1.3rem;\r\n }\r\n\r\n .sort-toggle {\r\n font-weight: normal;\r\n }\r\n\r\n .facets-content {\r\n font-size: 1.2rem;\r\n max-height: 300px;\r\n overflow: auto;\r\n padding: 10px;\r\n }\r\n .facets-loader {\r\n --icon-width: 70px;\r\n margin-bottom: 20px;\r\n display: block;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n .btn {\r\n border: none;\r\n padding: 10px;\r\n margin-bottom: 10px;\r\n width: auto;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n }\r\n .btn-cancel {\r\n background-color: #2c2c2c;\r\n color: white;\r\n }\r\n .btn-submit {\r\n background-color: ${modalSubmitButton};\r\n color: white;\r\n }\r\n .footer {\r\n text-align: center;\r\n margin-top: 10px;\r\n }\r\n\r\n @media (max-width: 560px) {\r\n section#more-facets {\r\n max-height: 450px;\r\n --facetsColumnCount: 1;\r\n }\r\n .facets-content {\r\n overflow-y: auto;\r\n height: 300px;\r\n }\r\n }\r\n `,\r\n ];\r\n }\r\n}\r\n"]}
|
|
@@ -122,6 +122,13 @@ export declare class HoverPaneController implements HoverPaneControllerInterface
|
|
|
122
122
|
private forceTouchBackdrop;
|
|
123
123
|
/** A record of the last mouse position on the host element, for positioning the hover pane */
|
|
124
124
|
private lastPointerClientPos;
|
|
125
|
+
/**
|
|
126
|
+
* A flag to track whether the host element is being clicked by a pointer device, so that we
|
|
127
|
+
* don't trigger unnecessary keyboard focus behaviors on click. This is needed, e.g., to prevent
|
|
128
|
+
* the hover pane from appearing immediately at its `host` positioning on click, which can
|
|
129
|
+
* obstruct the host element itself (due to the ordering of events fired).
|
|
130
|
+
*/
|
|
131
|
+
private clicking;
|
|
125
132
|
constructor(
|
|
126
133
|
/** The host element to which this controller should attach listeners */
|
|
127
134
|
host: ReactiveControllerHost & HoverPaneProviderInterface & HTMLElement,
|
|
@@ -171,6 +178,7 @@ export declare class HoverPaneController implements HoverPaneControllerInterface
|
|
|
171
178
|
private detachListeners;
|
|
172
179
|
private handleFocus;
|
|
173
180
|
private handleBlur;
|
|
181
|
+
private handlePointerDown;
|
|
174
182
|
private handleKeyDown;
|
|
175
183
|
private handleKeyUp;
|
|
176
184
|
/**
|
|
@@ -56,18 +56,29 @@ export class HoverPaneController {
|
|
|
56
56
|
this.forceTouchBackdrop = false;
|
|
57
57
|
/** A record of the last mouse position on the host element, for positioning the hover pane */
|
|
58
58
|
this.lastPointerClientPos = { x: 0, y: 0 };
|
|
59
|
+
/**
|
|
60
|
+
* A flag to track whether the host element is being clicked by a pointer device, so that we
|
|
61
|
+
* don't trigger unnecessary keyboard focus behaviors on click. This is needed, e.g., to prevent
|
|
62
|
+
* the hover pane from appearing immediately at its `host` positioning on click, which can
|
|
63
|
+
* obstruct the host element itself (due to the ordering of events fired).
|
|
64
|
+
*/
|
|
65
|
+
this.clicking = false;
|
|
59
66
|
this.handleFocus = () => {
|
|
60
|
-
if (this.hoverPaneState === 'hidden') {
|
|
67
|
+
if (!this.clicking && this.hoverPaneState === 'hidden') {
|
|
61
68
|
this.showHoverPane({
|
|
62
69
|
anchor: 'host',
|
|
63
70
|
});
|
|
64
71
|
}
|
|
72
|
+
this.clicking = false;
|
|
65
73
|
};
|
|
66
74
|
this.handleBlur = () => {
|
|
67
75
|
if (this.hoverPaneState !== 'hidden') {
|
|
68
76
|
this.fadeOutHoverPane();
|
|
69
77
|
}
|
|
70
78
|
};
|
|
79
|
+
this.handlePointerDown = () => {
|
|
80
|
+
this.clicking = true;
|
|
81
|
+
};
|
|
71
82
|
this.handleKeyDown = (e) => {
|
|
72
83
|
if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') &&
|
|
73
84
|
this.hoverPaneState !== 'hidden') {
|
|
@@ -340,6 +351,7 @@ export class HoverPaneController {
|
|
|
340
351
|
// keyboard navigation listeners
|
|
341
352
|
this.host.addEventListener('focus', this.handleFocus);
|
|
342
353
|
this.host.addEventListener('blur', this.handleBlur);
|
|
354
|
+
this.host.addEventListener('pointerdown', this.handlePointerDown);
|
|
343
355
|
this.host.addEventListener('keyup', this.handleKeyUp);
|
|
344
356
|
this.host.addEventListener('keydown', this.handleKeyDown);
|
|
345
357
|
if (this.isHoverEnabled) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hover-pane-controller.js","sourceRoot":"","sources":["../../../../src/tiles/hover/hover-pane-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { SortParam } from '@internetarchive/search-service';\nimport {\n html,\n HTMLTemplateResult,\n nothing,\n ReactiveController,\n ReactiveControllerHost,\n} from 'lit';\nimport type { TileModel } from '../../models';\nimport type { CollectionTitles } from '../../data-source/models';\nimport { msg } from '@lit/localize';\n\ntype HoverPaneState = 'hidden' | 'shown' | 'fading-out';\n\n// the anchor point of the hover pane\n// can be either the mouse cursor or near the host element\n// in the case of mouse navigation, we want it to follow the cursor\n// in the case of keyboard navigation, we want it to appear near the host element\ntype HoverPanePositionAnchor = 'host' | 'cursor';\n\nexport interface HoverPaneProperties {\n model?: TileModel;\n baseNavigationUrl?: string;\n baseImageUrl?: string;\n loggedIn: boolean;\n suppressBlurring: boolean;\n sortParam: SortParam | null;\n collectionTitles?: CollectionTitles;\n}\n\nexport interface HoverPaneControllerOptions {\n offsetX?: number;\n offsetY?: number;\n enableLongPress?: boolean;\n showDelay?: number;\n hideDelay?: number;\n longPressDelay?: number;\n mobileBreakpoint?: number;\n}\n\n/** A common interface for providing a hover pane element. */\nexport interface HoverPaneProviderInterface {\n /** Returns the provider's currently rendered hover pane element. */\n getHoverPane(): HTMLElement | undefined;\n /** Returns properties that should be passed to the hover pane. */\n getHoverPaneProps(): HoverPaneProperties;\n /** When user has keyboard navigated out of more info, we want the host to get focus */\n acquireFocus(): void;\n /** When user has keyboard navigated out of more info, we want the host to lose focus */\n releaseFocus(): void;\n}\n\nexport interface ToggleHoverPaneOptions {\n coords: { x: number; y: number };\n enableTouchBackdrop?: boolean;\n}\n\n/**\n * An interface for interacting with hover pane controllers (e.g.,\n * to retrieve their current hover pane template).\n */\nexport interface HoverPaneControllerInterface extends ReactiveController {\n /**\n * Returns the hover pane template to render based on this controller's\n * current state. The returned template may be `nothing` if the hover\n * pane should not currently be rendered.\n */\n getTemplate(): HTMLTemplateResult | typeof nothing;\n\n /**\n * Requests to manually toggle the state of the hover pane.\n * If the hover pane is already shown, it will begin fading out and then\n * subsequently be hidden and removed. If the hover pane is already fading\n * out or hidden, it will fade back in and be shown.\n */\n toggleHoverPane(options: ToggleHoverPaneOptions): void;\n}\n\nconst clamp = (val: number, min = -Infinity, max = Infinity) =>\n Math.max(min, Math.min(val, max));\n\nexport class HoverPaneController implements HoverPaneControllerInterface {\n /**\n * The hover pane element attached to this controller's host.\n */\n private hoverPane?: HTMLElement;\n\n /**\n * The properties to be passed to the hover pane element\n */\n private hoverPaneProps?: HoverPaneProperties;\n\n /**\n * The breakpoint (in pixels) below which the mobile interface should be used.\n */\n private mobileBreakpoint?: number = 600;\n\n /**\n * The number of horizontal pixels the hover pane should be offset from the\n * pointer position.\n */\n private offsetX: number = -10;\n\n /**\n * The number of vertical pixels the hover pane should be offset from the\n * pointer position.\n */\n private offsetY: number = 15;\n\n /**\n * The delay between the mouse idling within the host element and when the hover\n * pane should begin fading in (in milliseconds).\n */\n private showDelay: number = 300;\n\n /**\n * The delay between when the mouse leaves the host element and when the hover\n * pane should begin fading out (in milliseconds).\n */\n private hideDelay: number = 100;\n\n /**\n * The delay between when a touch event begins on the host element and when the\n * hover pane should begin fading in (in milliseconds).\n */\n private longPressDelay: number = 600;\n\n /**\n * Whether long press interactions should cause the hover pane to appear (when\n * below the mobile breakpoint).\n */\n private enableLongPress: boolean = false;\n\n /**\n * Used to control the current state of this provider's hover pane.\n * - `'hidden'` => The hover pane is not present at all.\n * - `'shown'` => The hover pane is either fading in or fully visible.\n * - `'fading-out'` => The hover pane is fading out and about to be removed.\n */\n private hoverPaneState: HoverPaneState = 'hidden';\n\n /** The timer ID for showing the hover pane */\n private showTimer?: number;\n\n /** The timer ID for hiding the hover pane */\n private hideTimer?: number;\n\n /** The timer ID for recognizing a long press event */\n private longPressTimer?: number;\n\n /**\n * Whether the touch backdrop should currently be rendered irrespective of other touch\n * interactions being enabled.\n */\n private forceTouchBackdrop: boolean = false;\n\n /** A record of the last mouse position on the host element, for positioning the hover pane */\n private lastPointerClientPos = { x: 0, y: 0 };\n\n constructor(\n /** The host element to which this controller should attach listeners */\n private readonly host: ReactiveControllerHost &\n HoverPaneProviderInterface &\n HTMLElement,\n /** Options for adjusting the hover pane behavior (offsets, delays, etc.) */\n options: HoverPaneControllerOptions = {},\n ) {\n this.mobileBreakpoint = options.mobileBreakpoint ?? this.mobileBreakpoint;\n this.offsetX = options.offsetX ?? this.offsetX;\n this.offsetY = options.offsetY ?? this.offsetY;\n this.showDelay = options.showDelay ?? this.showDelay;\n this.hideDelay = options.hideDelay ?? this.hideDelay;\n this.longPressDelay = options.longPressDelay ?? this.longPressDelay;\n this.enableLongPress = options.enableLongPress ?? this.enableLongPress;\n\n this.host.addController(this);\n }\n\n hostConnected(): void {\n this.attachListeners();\n }\n\n hostDisconnected(): void {\n this.detachListeners();\n }\n\n hostUpdated(): void {\n this.hoverPane = this.host.getHoverPane();\n this.hoverPaneProps = this.host.getHoverPaneProps();\n }\n\n /** @inheritdoc */\n getTemplate(): HTMLTemplateResult | typeof nothing {\n this.hoverPaneProps = this.host.getHoverPaneProps();\n\n return this.shouldRenderHoverPane\n ? html`\n ${this.touchBackdropTemplate}\n <tile-hover-pane\n popover\n tabindex=\"-1\"\n aria-describedby=\"tile-hover-pane-aria-description\"\n .model=${this.hoverPaneProps?.model}\n .baseNavigationUrl=${this.hoverPaneProps?.baseNavigationUrl}\n .baseImageUrl=${this.hoverPaneProps?.baseImageUrl}\n .loggedIn=${this.hoverPaneProps?.loggedIn}\n .suppressBlurring=${this.hoverPaneProps?.suppressBlurring}\n .sortParam=${this.hoverPaneProps?.sortParam}\n .collectionTitles=${this.hoverPaneProps?.collectionTitles}\n .mobileBreakpoint=${this.mobileBreakpoint}\n .currentWidth=${window.innerWidth}\n ></tile-hover-pane>\n <div id=\"tile-hover-pane-aria-description\" class=\"sr-only\">\n ${msg('Press Up Arrow to exit item detail preview')}\n </div>\n `\n : nothing;\n }\n\n /** @inheritdoc */\n toggleHoverPane(options: ToggleHoverPaneOptions): void {\n if (this.hoverPaneState === 'shown') {\n this.fadeOutHoverPane();\n this.forceTouchBackdrop = false;\n } else {\n this.lastPointerClientPos = options.coords;\n this.forceTouchBackdrop = options.enableTouchBackdrop ?? false;\n this.showHoverPane();\n }\n }\n\n /**\n * Produces a template for the invisible touch capture backdrop that\n * is used to cancel the hover pane on touch devices. We want any\n * touch interaction on the backdrop to remove the hover pane, and\n * we don't want to bubble up mouse events that would otherwise\n * affect the state of the hover pane (e.g., fading it back in).\n */\n private get touchBackdropTemplate(): HTMLTemplateResult | typeof nothing {\n return this.showTouchBackdrop\n ? html`<div\n id=\"touch-backdrop\"\n @touchstart=${this.handleBackdropInteraction}\n @touchmove=${this.handleBackdropInteraction}\n @touchend=${this.handleBackdropInteraction}\n @touchcancel=${this.handleBackdropInteraction}\n @mouseenter=${(e: MouseEvent) => e.stopPropagation()}\n @mousemove=${(e: MouseEvent) => e.stopPropagation()}\n @mouseleave=${(e: MouseEvent) => e.stopPropagation()}\n ></div>`\n : nothing;\n }\n\n private get showTouchBackdrop(): boolean {\n return (\n (this.isTouchEnabled && this.enableLongPress) || this.forceTouchBackdrop\n );\n }\n\n /** Whether to use the mobile layout */\n private get isMobileView(): boolean {\n return !!this.mobileBreakpoint && window.innerWidth < this.mobileBreakpoint;\n }\n\n private get isHoverEnabled(): boolean {\n return window.matchMedia('(hover: hover)').matches;\n }\n\n private get isTouchEnabled(): boolean {\n return (\n 'ontouchstart' in window &&\n window.matchMedia('(any-pointer: coarse)').matches\n );\n }\n\n /** Whether this controller should currently render its hover pane. */\n private get shouldRenderHoverPane(): boolean {\n return this.hoverPaneState !== 'hidden';\n }\n\n /**\n * Returns the desired top/left offsets (in pixels) for this tile's hover pane.\n * The desired offsets balance positioning the hover pane under the primary pointer\n * while preventing it from flowing outside the viewport. The returned offsets are\n * relative to the viewport, intended to position the pane as a popover element.\n *\n * These offsets are only valid if the hover pane is already rendered with its\n * correct width and height. If the hover pane is not present, the returned offsets\n * will simply represent the current pointer position.\n */\n private makePaneDesiredOffsets(anchor: HoverPanePositionAnchor): {\n top: number;\n left: number;\n } {\n // Try to find offsets for the hover pane that:\n // (a) cause it to lie entirely within the viewport, and\n // (b) to the extent possible, minimize the distance between the\n // nearest corner of the hover pane and the mouse/host element position\n // (with some additional offsets applied after the fact).\n\n let [left, top] = [0, 0];\n switch (anchor) {\n case 'host':\n const hostRect = this.host.getBoundingClientRect();\n // slight inset from host top left corner\n left = hostRect.left + 20;\n top = hostRect.top + 30;\n break;\n case 'cursor':\n left = this.lastPointerClientPos.x;\n top = this.lastPointerClientPos.y;\n break;\n }\n\n // Flip the hover pane according to which quadrant of the viewport the coordinates are in.\n // (Similar to how Wikipedia's link hover panes work)\n const flipHorizontal = left > window.innerWidth / 2;\n const flipVertical = top > window.innerHeight / 2;\n\n const hoverPaneRect = this.hoverPane?.getBoundingClientRect();\n if (hoverPaneRect) {\n // If we need to flip the hover pane, do so by subtracting its width/height from left/top\n if (flipHorizontal) {\n left -= hoverPaneRect.width;\n }\n if (flipVertical) {\n top -= hoverPaneRect.height;\n }\n\n // Apply desired offsets from the target position\n left += (flipHorizontal ? -1 : 1) * this.offsetX;\n top += (flipVertical ? -1 : 1) * this.offsetY;\n\n // On mobile view, shunt the hover pane to avoid overflowing the viewport\n if (this.isMobileView) {\n left = clamp(left, 20, window.innerWidth - hoverPaneRect.width - 20);\n top = clamp(top, 20, window.innerHeight - hoverPaneRect.height - 20);\n }\n }\n\n left += window.scrollX;\n top += window.scrollY;\n\n return { left, top };\n }\n\n /**\n * Adds to the host element all the listeners necessary to make the\n * hover pane functional.\n */\n private attachListeners(): void {\n // keyboard navigation listeners\n this.host.addEventListener('focus', this.handleFocus);\n this.host.addEventListener('blur', this.handleBlur);\n this.host.addEventListener('keyup', this.handleKeyUp);\n this.host.addEventListener('keydown', this.handleKeyDown);\n\n if (this.isHoverEnabled) {\n this.host.addEventListener('mouseenter', this.handleMouseEnter);\n this.host.addEventListener('mousemove', this.handleMouseMove);\n this.host.addEventListener('mouseleave', this.handleMouseLeave);\n }\n\n if (this.isTouchEnabled && this.enableLongPress) {\n this.host.addEventListener('touchstart', this.handleTouchStart);\n this.host.addEventListener('touchmove', this.handleLongPressCancel);\n this.host.addEventListener('touchend', this.handleLongPressCancel);\n this.host.addEventListener('touchcancel', this.handleLongPressCancel);\n this.host.addEventListener('contextmenu', this.handleContextMenu);\n }\n }\n\n /**\n * Removes all the hover pane listeners from the host element.\n */\n private detachListeners(): void {\n this.host.removeEventListener('mouseenter', this.handleMouseEnter);\n this.host.removeEventListener('mousemove', this.handleMouseMove);\n this.host.removeEventListener('mouseleave', this.handleMouseLeave);\n this.host.removeEventListener('touchstart', this.handleTouchStart);\n this.host.removeEventListener('touchmove', this.handleLongPressCancel);\n this.host.removeEventListener('touchend', this.handleLongPressCancel);\n this.host.removeEventListener('touchcancel', this.handleLongPressCancel);\n this.host.removeEventListener('contextmenu', this.handleContextMenu);\n\n // keyboard navigation listeners\n this.host.removeEventListener('focus', this.handleFocus);\n this.host.removeEventListener('blur', this.handleBlur);\n this.host.removeEventListener('keyup', this.handleKeyUp);\n this.host.removeEventListener('keydown', this.handleKeyDown);\n }\n\n private handleFocus = (): void => {\n if (this.hoverPaneState === 'hidden') {\n this.showHoverPane({\n anchor: 'host',\n });\n }\n };\n\n private handleBlur = (): void => {\n if (this.hoverPaneState !== 'hidden') {\n this.fadeOutHoverPane();\n }\n };\n\n private handleKeyDown = (e: KeyboardEvent): void => {\n if (\n (e.key === 'ArrowDown' || e.key === 'ArrowUp') &&\n this.hoverPaneState !== 'hidden'\n ) {\n e.preventDefault();\n }\n };\n\n private handleKeyUp = (e: KeyboardEvent): void => {\n if (this.hoverPaneState === 'hidden' || !this.hoverPane) return;\n if (e.key === 'ArrowDown') {\n this.hoverPane.tabIndex = 1;\n this.hoverPane.focus();\n }\n\n const isArrowUp = e.key === 'ArrowUp';\n const isEscape = e.key === 'Escape' || e.key === 'Esc';\n\n if (isEscape) {\n this.fadeOutHoverPane();\n }\n if (isArrowUp || isEscape) {\n this.hoverPane.tabIndex = -1;\n this.host.acquireFocus();\n }\n };\n\n /**\n * Handler for the mouseenter event on the host element.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleMouseEnter = (e: MouseEvent): void => {\n // Delegate to the mousemove handler, as they are currently processed identically\n this.handleMouseMove(e);\n };\n\n /**\n * Handler for the mousemove event on the host element.\n * Aborts any pending hide/fade-out for the hover pane, and restarts the\n * timer to show it.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleMouseMove = (e: MouseEvent): void => {\n // The mouse is within the tile, so abort any pending removal of the hover pane\n clearTimeout(this.hideTimer);\n\n // If the hover pane is currently fading out, just make it fade back in where it is\n if (this.hoverPaneState === 'fading-out') {\n this.hoverPaneState = 'shown';\n this.hoverPane?.classList.add('fade-in');\n }\n\n // Restart the timer to show the hover pane anytime the mouse moves within the tile\n if (this.hoverPaneState === 'hidden') {\n this.restartShowHoverPaneTimer();\n this.lastPointerClientPos = { x: e.clientX, y: e.clientY };\n }\n };\n\n /**\n * Handler for the mouseleave event on the host element.\n * Hides the hover pane if present, and aborts the timer for showing it.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleMouseLeave = (): void => {\n this.host.releaseFocus();\n\n // Abort any timer to show the hover pane, as the mouse has left the tile\n clearTimeout(this.showTimer);\n\n // Hide the hover pane if it's already been shown\n if (this.hoverPaneState !== 'hidden') {\n this.hideTimer = window.setTimeout(() => {\n this.fadeOutHoverPane();\n }, this.hideDelay);\n }\n };\n\n /**\n * Handler for the touchstart event on the host element.\n * Begins the timer for recognizing a long press event.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleTouchStart = (e: TouchEvent): void => {\n clearTimeout(this.longPressTimer);\n\n if (e.touches.length === 1) {\n this.longPressTimer = window.setTimeout(() => {\n if (this.hoverPaneState === 'hidden') {\n this.showHoverPane();\n }\n }, this.longPressDelay);\n\n this.lastPointerClientPos = {\n x: e.touches[0].clientX,\n y: e.touches[0].clientY,\n };\n }\n };\n\n /**\n * Handler for events that should cancel a pending long press event\n * (touchmove, touchend, touchcancel). Aborts the timer for recognizing\n * a long press.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleLongPressCancel = (): void => {\n clearTimeout(this.longPressTimer);\n };\n\n /**\n * Handler for the contextmenu event, which should be suppressed during\n * mobile long-press events on the host element.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleContextMenu = (e: Event): void => {\n e.preventDefault();\n };\n\n /**\n * Immediately causes the hover pane to begin fading out, if it is present.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleBackdropInteraction = (e: Event): void => {\n if (this.hoverPaneState !== 'hidden') {\n this.fadeOutHoverPane();\n }\n e.stopPropagation();\n };\n\n /**\n * Aborts and restarts the timer for showing the hover pane.\n */\n private restartShowHoverPaneTimer(): void {\n clearTimeout(this.showTimer);\n this.showTimer = window.setTimeout(() => {\n this.host.acquireFocus();\n this.showHoverPane();\n }, this.showDelay);\n }\n\n /**\n * Causes this tile's hover pane to be rendered, positioned, and made visible.\n */\n private async showHoverPane(\n options: {\n anchor: HoverPanePositionAnchor;\n } = {\n anchor: 'cursor',\n },\n ): Promise<void> {\n this.hoverPaneState = 'shown';\n this.host.requestUpdate();\n\n // Wait for the state update to render the hover pane\n await this.host.updateComplete;\n\n // Ensure the hover pane element is still in the document before showing,\n // as it might have been removed by the previous update.\n if (!this.hoverPane?.isConnected) return;\n\n this.hoverPane?.showPopover?.();\n await new Promise(resolve => {\n // Pane sizes aren't accurate until next frame\n requestAnimationFrame(resolve);\n });\n\n // Apply the correct positioning to the hover pane\n this.repositionHoverPane(options.anchor);\n\n // The hover pane is initially not visible (to avoid it shifting around\n // while being positioned). Since it now has the correct positioning, we\n // can make it visible and begin its fade-in animation.\n this.hoverPane?.classList.add('visible', 'fade-in');\n }\n\n /**\n * Causes this tile's hover pane to begin fading out and starts\n * the timer for it to be removed.\n */\n private fadeOutHoverPane(): void {\n this.hoverPaneState = 'fading-out';\n this.hoverPane?.classList.remove('fade-in');\n\n clearTimeout(this.hideTimer);\n this.hideTimer = window.setTimeout(() => {\n this.hoverPaneState = 'hidden';\n if (this.hoverPane) {\n this.hoverPane.tabIndex = -1;\n }\n this.host.requestUpdate();\n }, 100);\n }\n\n /**\n * Positions the hover pane with the correct offsets.\n */\n private repositionHoverPane(anchor: HoverPanePositionAnchor): void {\n if (!this.hoverPane) return;\n\n const { top, left } = this.makePaneDesiredOffsets(anchor);\n\n this.hoverPane.style.top = `${top}px`;\n this.hoverPane.style.left = `${left}px`;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"hover-pane-controller.js","sourceRoot":"","sources":["../../../../src/tiles/hover/hover-pane-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { SortParam } from '@internetarchive/search-service';\nimport {\n html,\n HTMLTemplateResult,\n nothing,\n ReactiveController,\n ReactiveControllerHost,\n} from 'lit';\nimport type { TileModel } from '../../models';\nimport type { CollectionTitles } from '../../data-source/models';\nimport { msg } from '@lit/localize';\n\ntype HoverPaneState = 'hidden' | 'shown' | 'fading-out';\n\n// the anchor point of the hover pane\n// can be either the mouse cursor or near the host element\n// in the case of mouse navigation, we want it to follow the cursor\n// in the case of keyboard navigation, we want it to appear near the host element\ntype HoverPanePositionAnchor = 'host' | 'cursor';\n\nexport interface HoverPaneProperties {\n model?: TileModel;\n baseNavigationUrl?: string;\n baseImageUrl?: string;\n loggedIn: boolean;\n suppressBlurring: boolean;\n sortParam: SortParam | null;\n collectionTitles?: CollectionTitles;\n}\n\nexport interface HoverPaneControllerOptions {\n offsetX?: number;\n offsetY?: number;\n enableLongPress?: boolean;\n showDelay?: number;\n hideDelay?: number;\n longPressDelay?: number;\n mobileBreakpoint?: number;\n}\n\n/** A common interface for providing a hover pane element. */\nexport interface HoverPaneProviderInterface {\n /** Returns the provider's currently rendered hover pane element. */\n getHoverPane(): HTMLElement | undefined;\n /** Returns properties that should be passed to the hover pane. */\n getHoverPaneProps(): HoverPaneProperties;\n /** When user has keyboard navigated out of more info, we want the host to get focus */\n acquireFocus(): void;\n /** When user has keyboard navigated out of more info, we want the host to lose focus */\n releaseFocus(): void;\n}\n\nexport interface ToggleHoverPaneOptions {\n coords: { x: number; y: number };\n enableTouchBackdrop?: boolean;\n}\n\n/**\n * An interface for interacting with hover pane controllers (e.g.,\n * to retrieve their current hover pane template).\n */\nexport interface HoverPaneControllerInterface extends ReactiveController {\n /**\n * Returns the hover pane template to render based on this controller's\n * current state. The returned template may be `nothing` if the hover\n * pane should not currently be rendered.\n */\n getTemplate(): HTMLTemplateResult | typeof nothing;\n\n /**\n * Requests to manually toggle the state of the hover pane.\n * If the hover pane is already shown, it will begin fading out and then\n * subsequently be hidden and removed. If the hover pane is already fading\n * out or hidden, it will fade back in and be shown.\n */\n toggleHoverPane(options: ToggleHoverPaneOptions): void;\n}\n\nconst clamp = (val: number, min = -Infinity, max = Infinity) =>\n Math.max(min, Math.min(val, max));\n\nexport class HoverPaneController implements HoverPaneControllerInterface {\n /**\n * The hover pane element attached to this controller's host.\n */\n private hoverPane?: HTMLElement;\n\n /**\n * The properties to be passed to the hover pane element\n */\n private hoverPaneProps?: HoverPaneProperties;\n\n /**\n * The breakpoint (in pixels) below which the mobile interface should be used.\n */\n private mobileBreakpoint?: number = 600;\n\n /**\n * The number of horizontal pixels the hover pane should be offset from the\n * pointer position.\n */\n private offsetX: number = -10;\n\n /**\n * The number of vertical pixels the hover pane should be offset from the\n * pointer position.\n */\n private offsetY: number = 15;\n\n /**\n * The delay between the mouse idling within the host element and when the hover\n * pane should begin fading in (in milliseconds).\n */\n private showDelay: number = 300;\n\n /**\n * The delay between when the mouse leaves the host element and when the hover\n * pane should begin fading out (in milliseconds).\n */\n private hideDelay: number = 100;\n\n /**\n * The delay between when a touch event begins on the host element and when the\n * hover pane should begin fading in (in milliseconds).\n */\n private longPressDelay: number = 600;\n\n /**\n * Whether long press interactions should cause the hover pane to appear (when\n * below the mobile breakpoint).\n */\n private enableLongPress: boolean = false;\n\n /**\n * Used to control the current state of this provider's hover pane.\n * - `'hidden'` => The hover pane is not present at all.\n * - `'shown'` => The hover pane is either fading in or fully visible.\n * - `'fading-out'` => The hover pane is fading out and about to be removed.\n */\n private hoverPaneState: HoverPaneState = 'hidden';\n\n /** The timer ID for showing the hover pane */\n private showTimer?: number;\n\n /** The timer ID for hiding the hover pane */\n private hideTimer?: number;\n\n /** The timer ID for recognizing a long press event */\n private longPressTimer?: number;\n\n /**\n * Whether the touch backdrop should currently be rendered irrespective of other touch\n * interactions being enabled.\n */\n private forceTouchBackdrop: boolean = false;\n\n /** A record of the last mouse position on the host element, for positioning the hover pane */\n private lastPointerClientPos = { x: 0, y: 0 };\n\n /**\n * A flag to track whether the host element is being clicked by a pointer device, so that we\n * don't trigger unnecessary keyboard focus behaviors on click. This is needed, e.g., to prevent\n * the hover pane from appearing immediately at its `host` positioning on click, which can\n * obstruct the host element itself (due to the ordering of events fired).\n */\n private clicking = false;\n\n constructor(\n /** The host element to which this controller should attach listeners */\n private readonly host: ReactiveControllerHost &\n HoverPaneProviderInterface &\n HTMLElement,\n /** Options for adjusting the hover pane behavior (offsets, delays, etc.) */\n options: HoverPaneControllerOptions = {},\n ) {\n this.mobileBreakpoint = options.mobileBreakpoint ?? this.mobileBreakpoint;\n this.offsetX = options.offsetX ?? this.offsetX;\n this.offsetY = options.offsetY ?? this.offsetY;\n this.showDelay = options.showDelay ?? this.showDelay;\n this.hideDelay = options.hideDelay ?? this.hideDelay;\n this.longPressDelay = options.longPressDelay ?? this.longPressDelay;\n this.enableLongPress = options.enableLongPress ?? this.enableLongPress;\n\n this.host.addController(this);\n }\n\n hostConnected(): void {\n this.attachListeners();\n }\n\n hostDisconnected(): void {\n this.detachListeners();\n }\n\n hostUpdated(): void {\n this.hoverPane = this.host.getHoverPane();\n this.hoverPaneProps = this.host.getHoverPaneProps();\n }\n\n /** @inheritdoc */\n getTemplate(): HTMLTemplateResult | typeof nothing {\n this.hoverPaneProps = this.host.getHoverPaneProps();\n\n return this.shouldRenderHoverPane\n ? html`\n ${this.touchBackdropTemplate}\n <tile-hover-pane\n popover\n tabindex=\"-1\"\n aria-describedby=\"tile-hover-pane-aria-description\"\n .model=${this.hoverPaneProps?.model}\n .baseNavigationUrl=${this.hoverPaneProps?.baseNavigationUrl}\n .baseImageUrl=${this.hoverPaneProps?.baseImageUrl}\n .loggedIn=${this.hoverPaneProps?.loggedIn}\n .suppressBlurring=${this.hoverPaneProps?.suppressBlurring}\n .sortParam=${this.hoverPaneProps?.sortParam}\n .collectionTitles=${this.hoverPaneProps?.collectionTitles}\n .mobileBreakpoint=${this.mobileBreakpoint}\n .currentWidth=${window.innerWidth}\n ></tile-hover-pane>\n <div id=\"tile-hover-pane-aria-description\" class=\"sr-only\">\n ${msg('Press Up Arrow to exit item detail preview')}\n </div>\n `\n : nothing;\n }\n\n /** @inheritdoc */\n toggleHoverPane(options: ToggleHoverPaneOptions): void {\n if (this.hoverPaneState === 'shown') {\n this.fadeOutHoverPane();\n this.forceTouchBackdrop = false;\n } else {\n this.lastPointerClientPos = options.coords;\n this.forceTouchBackdrop = options.enableTouchBackdrop ?? false;\n this.showHoverPane();\n }\n }\n\n /**\n * Produces a template for the invisible touch capture backdrop that\n * is used to cancel the hover pane on touch devices. We want any\n * touch interaction on the backdrop to remove the hover pane, and\n * we don't want to bubble up mouse events that would otherwise\n * affect the state of the hover pane (e.g., fading it back in).\n */\n private get touchBackdropTemplate(): HTMLTemplateResult | typeof nothing {\n return this.showTouchBackdrop\n ? html`<div\n id=\"touch-backdrop\"\n @touchstart=${this.handleBackdropInteraction}\n @touchmove=${this.handleBackdropInteraction}\n @touchend=${this.handleBackdropInteraction}\n @touchcancel=${this.handleBackdropInteraction}\n @mouseenter=${(e: MouseEvent) => e.stopPropagation()}\n @mousemove=${(e: MouseEvent) => e.stopPropagation()}\n @mouseleave=${(e: MouseEvent) => e.stopPropagation()}\n ></div>`\n : nothing;\n }\n\n private get showTouchBackdrop(): boolean {\n return (\n (this.isTouchEnabled && this.enableLongPress) || this.forceTouchBackdrop\n );\n }\n\n /** Whether to use the mobile layout */\n private get isMobileView(): boolean {\n return !!this.mobileBreakpoint && window.innerWidth < this.mobileBreakpoint;\n }\n\n private get isHoverEnabled(): boolean {\n return window.matchMedia('(hover: hover)').matches;\n }\n\n private get isTouchEnabled(): boolean {\n return (\n 'ontouchstart' in window &&\n window.matchMedia('(any-pointer: coarse)').matches\n );\n }\n\n /** Whether this controller should currently render its hover pane. */\n private get shouldRenderHoverPane(): boolean {\n return this.hoverPaneState !== 'hidden';\n }\n\n /**\n * Returns the desired top/left offsets (in pixels) for this tile's hover pane.\n * The desired offsets balance positioning the hover pane under the primary pointer\n * while preventing it from flowing outside the viewport. The returned offsets are\n * relative to the viewport, intended to position the pane as a popover element.\n *\n * These offsets are only valid if the hover pane is already rendered with its\n * correct width and height. If the hover pane is not present, the returned offsets\n * will simply represent the current pointer position.\n */\n private makePaneDesiredOffsets(anchor: HoverPanePositionAnchor): {\n top: number;\n left: number;\n } {\n // Try to find offsets for the hover pane that:\n // (a) cause it to lie entirely within the viewport, and\n // (b) to the extent possible, minimize the distance between the\n // nearest corner of the hover pane and the mouse/host element position\n // (with some additional offsets applied after the fact).\n\n let [left, top] = [0, 0];\n switch (anchor) {\n case 'host':\n const hostRect = this.host.getBoundingClientRect();\n // slight inset from host top left corner\n left = hostRect.left + 20;\n top = hostRect.top + 30;\n break;\n case 'cursor':\n left = this.lastPointerClientPos.x;\n top = this.lastPointerClientPos.y;\n break;\n }\n\n // Flip the hover pane according to which quadrant of the viewport the coordinates are in.\n // (Similar to how Wikipedia's link hover panes work)\n const flipHorizontal = left > window.innerWidth / 2;\n const flipVertical = top > window.innerHeight / 2;\n\n const hoverPaneRect = this.hoverPane?.getBoundingClientRect();\n if (hoverPaneRect) {\n // If we need to flip the hover pane, do so by subtracting its width/height from left/top\n if (flipHorizontal) {\n left -= hoverPaneRect.width;\n }\n if (flipVertical) {\n top -= hoverPaneRect.height;\n }\n\n // Apply desired offsets from the target position\n left += (flipHorizontal ? -1 : 1) * this.offsetX;\n top += (flipVertical ? -1 : 1) * this.offsetY;\n\n // On mobile view, shunt the hover pane to avoid overflowing the viewport\n if (this.isMobileView) {\n left = clamp(left, 20, window.innerWidth - hoverPaneRect.width - 20);\n top = clamp(top, 20, window.innerHeight - hoverPaneRect.height - 20);\n }\n }\n\n left += window.scrollX;\n top += window.scrollY;\n\n return { left, top };\n }\n\n /**\n * Adds to the host element all the listeners necessary to make the\n * hover pane functional.\n */\n private attachListeners(): void {\n // keyboard navigation listeners\n this.host.addEventListener('focus', this.handleFocus);\n this.host.addEventListener('blur', this.handleBlur);\n this.host.addEventListener('pointerdown', this.handlePointerDown);\n this.host.addEventListener('keyup', this.handleKeyUp);\n this.host.addEventListener('keydown', this.handleKeyDown);\n\n if (this.isHoverEnabled) {\n this.host.addEventListener('mouseenter', this.handleMouseEnter);\n this.host.addEventListener('mousemove', this.handleMouseMove);\n this.host.addEventListener('mouseleave', this.handleMouseLeave);\n }\n\n if (this.isTouchEnabled && this.enableLongPress) {\n this.host.addEventListener('touchstart', this.handleTouchStart);\n this.host.addEventListener('touchmove', this.handleLongPressCancel);\n this.host.addEventListener('touchend', this.handleLongPressCancel);\n this.host.addEventListener('touchcancel', this.handleLongPressCancel);\n this.host.addEventListener('contextmenu', this.handleContextMenu);\n }\n }\n\n /**\n * Removes all the hover pane listeners from the host element.\n */\n private detachListeners(): void {\n this.host.removeEventListener('mouseenter', this.handleMouseEnter);\n this.host.removeEventListener('mousemove', this.handleMouseMove);\n this.host.removeEventListener('mouseleave', this.handleMouseLeave);\n this.host.removeEventListener('touchstart', this.handleTouchStart);\n this.host.removeEventListener('touchmove', this.handleLongPressCancel);\n this.host.removeEventListener('touchend', this.handleLongPressCancel);\n this.host.removeEventListener('touchcancel', this.handleLongPressCancel);\n this.host.removeEventListener('contextmenu', this.handleContextMenu);\n\n // keyboard navigation listeners\n this.host.removeEventListener('focus', this.handleFocus);\n this.host.removeEventListener('blur', this.handleBlur);\n this.host.removeEventListener('keyup', this.handleKeyUp);\n this.host.removeEventListener('keydown', this.handleKeyDown);\n }\n\n private handleFocus = (): void => {\n if (!this.clicking && this.hoverPaneState === 'hidden') {\n this.showHoverPane({\n anchor: 'host',\n });\n }\n this.clicking = false;\n };\n\n private handleBlur = (): void => {\n if (this.hoverPaneState !== 'hidden') {\n this.fadeOutHoverPane();\n }\n };\n\n private handlePointerDown = (): void => {\n this.clicking = true;\n };\n\n private handleKeyDown = (e: KeyboardEvent): void => {\n if (\n (e.key === 'ArrowDown' || e.key === 'ArrowUp') &&\n this.hoverPaneState !== 'hidden'\n ) {\n e.preventDefault();\n }\n };\n\n private handleKeyUp = (e: KeyboardEvent): void => {\n if (this.hoverPaneState === 'hidden' || !this.hoverPane) return;\n if (e.key === 'ArrowDown') {\n this.hoverPane.tabIndex = 1;\n this.hoverPane.focus();\n }\n\n const isArrowUp = e.key === 'ArrowUp';\n const isEscape = e.key === 'Escape' || e.key === 'Esc';\n\n if (isEscape) {\n this.fadeOutHoverPane();\n }\n if (isArrowUp || isEscape) {\n this.hoverPane.tabIndex = -1;\n this.host.acquireFocus();\n }\n };\n\n /**\n * Handler for the mouseenter event on the host element.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleMouseEnter = (e: MouseEvent): void => {\n // Delegate to the mousemove handler, as they are currently processed identically\n this.handleMouseMove(e);\n };\n\n /**\n * Handler for the mousemove event on the host element.\n * Aborts any pending hide/fade-out for the hover pane, and restarts the\n * timer to show it.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleMouseMove = (e: MouseEvent): void => {\n // The mouse is within the tile, so abort any pending removal of the hover pane\n clearTimeout(this.hideTimer);\n\n // If the hover pane is currently fading out, just make it fade back in where it is\n if (this.hoverPaneState === 'fading-out') {\n this.hoverPaneState = 'shown';\n this.hoverPane?.classList.add('fade-in');\n }\n\n // Restart the timer to show the hover pane anytime the mouse moves within the tile\n if (this.hoverPaneState === 'hidden') {\n this.restartShowHoverPaneTimer();\n this.lastPointerClientPos = { x: e.clientX, y: e.clientY };\n }\n };\n\n /**\n * Handler for the mouseleave event on the host element.\n * Hides the hover pane if present, and aborts the timer for showing it.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleMouseLeave = (): void => {\n this.host.releaseFocus();\n\n // Abort any timer to show the hover pane, as the mouse has left the tile\n clearTimeout(this.showTimer);\n\n // Hide the hover pane if it's already been shown\n if (this.hoverPaneState !== 'hidden') {\n this.hideTimer = window.setTimeout(() => {\n this.fadeOutHoverPane();\n }, this.hideDelay);\n }\n };\n\n /**\n * Handler for the touchstart event on the host element.\n * Begins the timer for recognizing a long press event.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleTouchStart = (e: TouchEvent): void => {\n clearTimeout(this.longPressTimer);\n\n if (e.touches.length === 1) {\n this.longPressTimer = window.setTimeout(() => {\n if (this.hoverPaneState === 'hidden') {\n this.showHoverPane();\n }\n }, this.longPressDelay);\n\n this.lastPointerClientPos = {\n x: e.touches[0].clientX,\n y: e.touches[0].clientY,\n };\n }\n };\n\n /**\n * Handler for events that should cancel a pending long press event\n * (touchmove, touchend, touchcancel). Aborts the timer for recognizing\n * a long press.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleLongPressCancel = (): void => {\n clearTimeout(this.longPressTimer);\n };\n\n /**\n * Handler for the contextmenu event, which should be suppressed during\n * mobile long-press events on the host element.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleContextMenu = (e: Event): void => {\n e.preventDefault();\n };\n\n /**\n * Immediately causes the hover pane to begin fading out, if it is present.\n */\n // NB: Arrow function so 'this' remains bound to the controller\n private handleBackdropInteraction = (e: Event): void => {\n if (this.hoverPaneState !== 'hidden') {\n this.fadeOutHoverPane();\n }\n e.stopPropagation();\n };\n\n /**\n * Aborts and restarts the timer for showing the hover pane.\n */\n private restartShowHoverPaneTimer(): void {\n clearTimeout(this.showTimer);\n this.showTimer = window.setTimeout(() => {\n this.host.acquireFocus();\n this.showHoverPane();\n }, this.showDelay);\n }\n\n /**\n * Causes this tile's hover pane to be rendered, positioned, and made visible.\n */\n private async showHoverPane(\n options: {\n anchor: HoverPanePositionAnchor;\n } = {\n anchor: 'cursor',\n },\n ): Promise<void> {\n this.hoverPaneState = 'shown';\n this.host.requestUpdate();\n\n // Wait for the state update to render the hover pane\n await this.host.updateComplete;\n\n // Ensure the hover pane element is still in the document before showing,\n // as it might have been removed by the previous update.\n if (!this.hoverPane?.isConnected) return;\n\n this.hoverPane?.showPopover?.();\n await new Promise(resolve => {\n // Pane sizes aren't accurate until next frame\n requestAnimationFrame(resolve);\n });\n\n // Apply the correct positioning to the hover pane\n this.repositionHoverPane(options.anchor);\n\n // The hover pane is initially not visible (to avoid it shifting around\n // while being positioned). Since it now has the correct positioning, we\n // can make it visible and begin its fade-in animation.\n this.hoverPane?.classList.add('visible', 'fade-in');\n }\n\n /**\n * Causes this tile's hover pane to begin fading out and starts\n * the timer for it to be removed.\n */\n private fadeOutHoverPane(): void {\n this.hoverPaneState = 'fading-out';\n this.hoverPane?.classList.remove('fade-in');\n\n clearTimeout(this.hideTimer);\n this.hideTimer = window.setTimeout(() => {\n this.hoverPaneState = 'hidden';\n if (this.hoverPane) {\n this.hoverPane.tabIndex = -1;\n }\n this.host.requestUpdate();\n }, 100);\n }\n\n /**\n * Positions the hover pane with the correct offsets.\n */\n private repositionHoverPane(anchor: HoverPanePositionAnchor): void {\n if (!this.hoverPane) return;\n\n const { top, left } = this.makePaneDesiredOffsets(anchor);\n\n this.hoverPane.style.top = `${top}px`;\n this.hoverPane.style.left = `${left}px`;\n }\n}\n"]}
|
|
@@ -3,7 +3,6 @@ import { html } from 'lit';
|
|
|
3
3
|
import '../../src/collection-facets/more-facets-content';
|
|
4
4
|
import { MockSearchService } from '../mocks/mock-search-service';
|
|
5
5
|
import { MockAnalyticsHandler } from '../mocks/mock-analytics-handler';
|
|
6
|
-
import { Aggregation } from '@internetarchive/search-service';
|
|
7
6
|
const selectedFacetsGroup = {
|
|
8
7
|
title: 'Media Type',
|
|
9
8
|
key: 'mediatype',
|
|
@@ -39,23 +38,16 @@ describe('More facets content', () => {
|
|
|
39
38
|
await el.updateComplete;
|
|
40
39
|
expect(el.shadowRoot?.querySelector('.facets-loader')).to.exist;
|
|
41
40
|
});
|
|
42
|
-
it('should
|
|
41
|
+
it('should render pagination for more facets', async () => {
|
|
43
42
|
const searchService = new MockSearchService();
|
|
44
43
|
const el = await fixture(html `<more-facets-content
|
|
45
44
|
.searchService=${searchService}
|
|
46
45
|
></more-facets-content>`);
|
|
47
46
|
el.facetKey = 'year';
|
|
48
|
-
el.query = 'more-facets'; // Produces a response with
|
|
47
|
+
el.query = 'more-facets'; // Produces a response with 40+ aggregations for multiple pages
|
|
49
48
|
await el.updateComplete;
|
|
50
49
|
await aTimeout(50); // Give it a moment to perform the (mock) search query after the initial update
|
|
51
|
-
|
|
52
|
-
expect(el.shadowRoot?.querySelector('more-facets-pagination')).to.not.exist;
|
|
53
|
-
// Verify horizontal scroll mode CSS class is applied
|
|
54
|
-
expect(el.shadowRoot?.querySelector('.facets-content.horizontal-scroll-mode')).to.exist;
|
|
55
|
-
// Verify footer still exists with buttons
|
|
56
|
-
expect(el.shadowRoot?.querySelector('.footer')).to.exist;
|
|
57
|
-
expect(el.shadowRoot?.querySelector('.btn-cancel')).to.exist;
|
|
58
|
-
expect(el.shadowRoot?.querySelector('.btn-submit')).to.exist;
|
|
50
|
+
expect(el.shadowRoot?.querySelectorAll('more-facets-pagination')).to.exist;
|
|
59
51
|
});
|
|
60
52
|
it('query for more facets content using search service', async () => {
|
|
61
53
|
const searchService = new MockSearchService();
|
|
@@ -163,103 +155,5 @@ describe('More facets content', () => {
|
|
|
163
155
|
expect(mockAnalyticsHandler.callAction).to.equal('applyMoreFacetsModal');
|
|
164
156
|
expect(mockAnalyticsHandler.callLabel).to.equal('collection');
|
|
165
157
|
});
|
|
166
|
-
it('should have horizontal scrolling enabled', async () => {
|
|
167
|
-
const searchService = new MockSearchService();
|
|
168
|
-
const el = await fixture(html `<more-facets-content
|
|
169
|
-
.searchService=${searchService}
|
|
170
|
-
></more-facets-content>`);
|
|
171
|
-
el.facetKey = 'year';
|
|
172
|
-
el.query = 'more-facets';
|
|
173
|
-
await el.updateComplete;
|
|
174
|
-
await aTimeout(50);
|
|
175
|
-
const facetsContent = el.shadowRoot?.querySelector('.facets-content');
|
|
176
|
-
const styles = window.getComputedStyle(facetsContent);
|
|
177
|
-
expect(styles.overflowX).to.equal('auto');
|
|
178
|
-
expect(styles.overflowY).to.equal('hidden');
|
|
179
|
-
});
|
|
180
|
-
it('should have horizontal container wrapper', async () => {
|
|
181
|
-
const searchService = new MockSearchService();
|
|
182
|
-
const el = await fixture(html `<more-facets-content
|
|
183
|
-
.searchService=${searchService}
|
|
184
|
-
></more-facets-content>`);
|
|
185
|
-
el.facetKey = 'year';
|
|
186
|
-
el.query = 'more-facets';
|
|
187
|
-
await el.updateComplete;
|
|
188
|
-
await aTimeout(50);
|
|
189
|
-
const container = el.shadowRoot?.querySelector('.facets-horizontal-container');
|
|
190
|
-
expect(container).to.exist;
|
|
191
|
-
const facetsTemplate = container?.querySelector('facets-template');
|
|
192
|
-
expect(facetsTemplate).to.exist;
|
|
193
|
-
});
|
|
194
|
-
it('should render pagination when facet count >= 1000', async () => {
|
|
195
|
-
// Manually create aggregations with 1000+ facets
|
|
196
|
-
const buckets = [];
|
|
197
|
-
for (let i = 0; i < 1000; i++) {
|
|
198
|
-
buckets.push({ key: `value-${i}`, doc_count: i + 1 });
|
|
199
|
-
}
|
|
200
|
-
const el = await fixture(html `<more-facets-content
|
|
201
|
-
.facetKey=${'subject'}
|
|
202
|
-
.selectedFacets=${{
|
|
203
|
-
mediatype: {},
|
|
204
|
-
lending: {},
|
|
205
|
-
year: {},
|
|
206
|
-
subject: {},
|
|
207
|
-
collection: {},
|
|
208
|
-
creator: {},
|
|
209
|
-
language: {},
|
|
210
|
-
}}
|
|
211
|
-
></more-facets-content>`);
|
|
212
|
-
// @ts-expect-error - accessing private property for testing
|
|
213
|
-
el.aggregations = {
|
|
214
|
-
subject: new Aggregation({ buckets }),
|
|
215
|
-
};
|
|
216
|
-
el.facetsLoading = false;
|
|
217
|
-
await el.updateComplete;
|
|
218
|
-
// Verify pagination component IS present
|
|
219
|
-
expect(el.shadowRoot?.querySelector('more-facets-pagination')).to.exist;
|
|
220
|
-
// Verify pagination mode CSS class is applied
|
|
221
|
-
expect(el.shadowRoot?.querySelector('.facets-content.pagination-mode')).to
|
|
222
|
-
.exist;
|
|
223
|
-
// Verify horizontal container wrapper does NOT exist in pagination mode
|
|
224
|
-
expect(el.shadowRoot?.querySelector('.facets-horizontal-container')).to.not
|
|
225
|
-
.exist;
|
|
226
|
-
});
|
|
227
|
-
it('pagination page change should send analytics event', async () => {
|
|
228
|
-
const mockAnalyticsHandler = new MockAnalyticsHandler();
|
|
229
|
-
// Manually create aggregations with 1000+ facets
|
|
230
|
-
const buckets = [];
|
|
231
|
-
for (let i = 0; i < 1000; i++) {
|
|
232
|
-
buckets.push({ key: `value-${i}`, doc_count: i + 1 });
|
|
233
|
-
}
|
|
234
|
-
const el = await fixture(html `<more-facets-content
|
|
235
|
-
.facetKey=${'subject'}
|
|
236
|
-
.selectedFacets=${{
|
|
237
|
-
mediatype: {},
|
|
238
|
-
lending: {},
|
|
239
|
-
year: {},
|
|
240
|
-
subject: {},
|
|
241
|
-
collection: {},
|
|
242
|
-
creator: {},
|
|
243
|
-
language: {},
|
|
244
|
-
}}
|
|
245
|
-
.analyticsHandler=${mockAnalyticsHandler}
|
|
246
|
-
></more-facets-content>`);
|
|
247
|
-
// @ts-expect-error - accessing private property for testing
|
|
248
|
-
el.aggregations = {
|
|
249
|
-
subject: new Aggregation({ buckets }),
|
|
250
|
-
};
|
|
251
|
-
el.facetsLoading = false;
|
|
252
|
-
await el.updateComplete;
|
|
253
|
-
// Get the pagination component
|
|
254
|
-
const pagination = el.shadowRoot?.querySelector('more-facets-pagination');
|
|
255
|
-
expect(pagination).to.exist;
|
|
256
|
-
// Simulate clicking page 2
|
|
257
|
-
pagination.currentPage = 2;
|
|
258
|
-
await pagination.updateComplete;
|
|
259
|
-
// Verify analytics event was sent
|
|
260
|
-
expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
|
|
261
|
-
expect(mockAnalyticsHandler.callAction).to.equal('moreFacetsPageChange');
|
|
262
|
-
expect(mockAnalyticsHandler.callLabel).to.equal('2');
|
|
263
|
-
});
|
|
264
158
|
});
|
|
265
159
|
//# sourceMappingURL=more-facets-content.test.js.map
|