@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.
Files changed (15) hide show
  1. package/dist/src/collection-facets/facets-template.js +0 -5
  2. package/dist/src/collection-facets/facets-template.js.map +1 -1
  3. package/dist/src/collection-facets/more-facets-content.d.ts +8 -34
  4. package/dist/src/collection-facets/more-facets-content.js +65 -264
  5. package/dist/src/collection-facets/more-facets-content.js.map +1 -1
  6. package/dist/src/tiles/hover/hover-pane-controller.d.ts +8 -0
  7. package/dist/src/tiles/hover/hover-pane-controller.js +13 -1
  8. package/dist/src/tiles/hover/hover-pane-controller.js.map +1 -1
  9. package/dist/test/collection-facets/more-facets-content.test.js +3 -109
  10. package/dist/test/collection-facets/more-facets-content.test.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/collection-facets/facets-template.ts +0 -5
  13. package/src/collection-facets/more-facets-content.ts +70 -284
  14. package/src/tiles/hover/hover-pane-controller.ts +15 -1
  15. package/test/collection-facets/more-facets-content.test.ts +3 -150
package/dist/test/collection-facets/more-facets-content.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"more-facets-content.test.js","sourceRoot":"","sources":["../../../test/collection-facets/more-facets-content.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { aTimeout, expect, fixture } from '@open-wc/testing';\r\nimport { html } from 'lit';\r\nimport type { MoreFacetsContent } from '../../src/collection-facets/more-facets-content';\r\nimport '../../src/collection-facets/more-facets-content';\r\nimport { MockSearchService } from '../mocks/mock-search-service';\r\nimport { MockAnalyticsHandler } from '../mocks/mock-analytics-handler';\r\nimport type { FacetsTemplate } from '../../src/collection-facets/facets-template';\r\nimport type { SelectedFacets } from '../../src/models';\r\nimport { Aggregation, type Bucket } from '@internetarchive/search-service';\r\n\r\nconst selectedFacetsGroup = {\r\n title: 'Media Type',\r\n key: 'mediatype',\r\n buckets: [\r\n { displayText: 'audio', key: 'audio', count: 1001, state: 'none' },\r\n { displayText: 'movies', key: 'movies', count: 901, state: 'none' },\r\n { displayText: 'texts', key: 'texts', count: 2101, state: 'none' },\r\n { displayText: 'data', key: 'data', count: 230, state: 'none' },\r\n { displayText: 'web', key: 'web', count: 453, state: 'none' },\r\n ],\r\n};\r\n\r\nconst yearSelectedFacets: SelectedFacets = {\r\n mediatype: {},\r\n lending: {},\r\n year: {\r\n '2000': { key: '2000', count: 5, state: 'selected' },\r\n },\r\n subject: {},\r\n collection: {},\r\n creator: {},\r\n language: {},\r\n};\r\n\r\ndescribe('More facets content', () => {\r\n it('should render more facets template', async () => {\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content></more-facets-content>`,\r\n );\r\n\r\n el.facetsLoading = false;\r\n await el.updateComplete;\r\n\r\n expect(el.shadowRoot?.querySelector('.facets-content')).to.exist;\r\n });\r\n\r\n it('should render more facets loader template', async () => {\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content></more-facets-content>`,\r\n );\r\n\r\n el.facetsLoading = true;\r\n await el.updateComplete;\r\n\r\n expect(el.shadowRoot?.querySelector('.facets-loader')).to.exist;\r\n });\r\n\r\n it('should NOT render pagination when facet count < 1000', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .searchService=${searchService}\r\n ></more-facets-content>`,\r\n );\r\n\r\n el.facetKey = 'year';\r\n el.query = 'more-facets'; // Produces a response with 45 aggregations (< 1000)\r\n await el.updateComplete;\r\n await aTimeout(50); // Give it a moment to perform the (mock) search query after the initial update\r\n\r\n // Verify pagination component is NOT present (horizontal scroll mode)\r\n expect(el.shadowRoot?.querySelector('more-facets-pagination')).to.not.exist;\r\n\r\n // Verify horizontal scroll mode CSS class is applied\r\n expect(\r\n el.shadowRoot?.querySelector('.facets-content.horizontal-scroll-mode'),\r\n ).to.exist;\r\n\r\n // Verify footer still exists with buttons\r\n expect(el.shadowRoot?.querySelector('.footer')).to.exist;\r\n expect(el.shadowRoot?.querySelector('.btn-cancel')).to.exist;\r\n expect(el.shadowRoot?.querySelector('.btn-submit')).to.exist;\r\n });\r\n\r\n it('query for more facets content using search service', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .searchService=${searchService}\r\n ></more-facets-content>`,\r\n );\r\n\r\n el.facetKey = 'collection';\r\n el.query = 'collection-aggregations';\r\n await el.updateComplete;\r\n\r\n expect(searchService.searchParams?.query).to.equal(\r\n 'collection-aggregations',\r\n );\r\n });\r\n\r\n it('queries for more facets using search service within a collection (no query)', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .searchService=${searchService}\r\n .pageSpecifierParams=${{\r\n pageType: 'collection_details',\r\n pageTarget: 'foobar',\r\n }}\r\n ></more-facets-content>`,\r\n );\r\n\r\n el.facetKey = 'subject';\r\n await el.updateComplete;\r\n\r\n expect(searchService.searchParams?.query).to.be.empty;\r\n expect(searchService.searchParams?.pageTarget).to.equal('foobar');\r\n });\r\n\r\n it('queries for more facets using search service within a collection (with query)', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .searchService=${searchService}\r\n .pageSpecifierParams=${{\r\n pageType: 'collection_details',\r\n pageTarget: 'foobar',\r\n }}\r\n ></more-facets-content>`,\r\n );\r\n\r\n el.facetKey = 'subject';\r\n el.query = 'title:hello';\r\n await el.updateComplete;\r\n\r\n expect(searchService.searchParams?.query).to.equal('title:hello');\r\n expect(searchService.searchParams?.pageTarget).to.equal('foobar');\r\n });\r\n\r\n it('filter raw selectedFacets object', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .searchService=${searchService}\r\n .selectedFacets=${selectedFacetsGroup}\r\n ></more-facets-content>`,\r\n );\r\n\r\n el.facetKey = 'collection';\r\n el.query = 'title:hello';\r\n await el.updateComplete;\r\n\r\n expect(searchService.searchParams?.query).to.equal('title:hello');\r\n });\r\n\r\n it('combines selectedFacets and aggregationFacets and renders on modal', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .facetKey=${'year'}\r\n .query=${'more-facets'}\r\n .searchService=${searchService}\r\n .selectedFacets=${yearSelectedFacets}\r\n ></more-facets-content>`,\r\n );\r\n\r\n const facetsTemplate = el.shadowRoot?.querySelector(\r\n 'facets-template',\r\n ) as FacetsTemplate;\r\n expect(facetsTemplate).to.exist;\r\n\r\n const { facetGroup } = facetsTemplate;\r\n expect(facetGroup?.key).to.equal('year');\r\n expect(facetGroup?.title).to.equal('Year');\r\n\r\n // First bucket is the one that was included in the selected facets\r\n const firstBucket = facetGroup?.buckets[0];\r\n expect(firstBucket?.key).to.equal('2000');\r\n expect(firstBucket?.count).to.equal(5);\r\n\r\n // Second bucket is the most recent year, since year facets default to descending order of year\r\n const secondBucket = facetGroup?.buckets[1];\r\n expect(secondBucket?.key).to.equal('2024');\r\n expect(secondBucket?.count).to.equal(5);\r\n });\r\n\r\n it('cancel button clicked event', async () => {\r\n const searchService = new MockSearchService();\r\n const mockAnalyticsHandler = new MockAnalyticsHandler();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .facetKey=${'collection'}\r\n .query=${'collection-aggregations'}\r\n .searchService=${searchService}\r\n .analyticsHandler=${mockAnalyticsHandler}\r\n ></more-facets-content>`,\r\n );\r\n\r\n // select cancel button\r\n const cancelButton = el.shadowRoot?.querySelector(\r\n '.footer > .btn-cancel',\r\n ) as HTMLButtonElement;\r\n expect(cancelButton).to.exist;\r\n cancelButton?.click();\r\n\r\n expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');\r\n expect(mockAnalyticsHandler.callAction).to.equal('closeMoreFacetsModal');\r\n expect(mockAnalyticsHandler.callLabel).to.equal('collection');\r\n });\r\n\r\n it('facet apply button clicked event', async () => {\r\n const searchService = new MockSearchService();\r\n const mockAnalyticsHandler = new MockAnalyticsHandler();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .facetKey=${'collection'}\r\n .query=${'collection-aggregations'}\r\n .searchService=${searchService}\r\n .analyticsHandler=${mockAnalyticsHandler}\r\n ></more-facets-content>`,\r\n );\r\n\r\n // select submit button\r\n const submitButton = el.shadowRoot?.querySelector(\r\n '.footer > .btn-submit',\r\n ) as HTMLButtonElement;\r\n expect(submitButton).to.exist;\r\n submitButton?.click();\r\n\r\n expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');\r\n expect(mockAnalyticsHandler.callAction).to.equal('applyMoreFacetsModal');\r\n expect(mockAnalyticsHandler.callLabel).to.equal('collection');\r\n });\r\n\r\n it('should have horizontal scrolling enabled', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .searchService=${searchService}\r\n ></more-facets-content>`,\r\n );\r\n\r\n el.facetKey = 'year';\r\n el.query = 'more-facets';\r\n await el.updateComplete;\r\n await aTimeout(50);\r\n\r\n const facetsContent = el.shadowRoot?.querySelector(\r\n '.facets-content',\r\n ) as HTMLElement;\r\n const styles = window.getComputedStyle(facetsContent);\r\n\r\n expect(styles.overflowX).to.equal('auto');\r\n expect(styles.overflowY).to.equal('hidden');\r\n });\r\n\r\n it('should have horizontal container wrapper', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .searchService=${searchService}\r\n ></more-facets-content>`,\r\n );\r\n\r\n el.facetKey = 'year';\r\n el.query = 'more-facets';\r\n await el.updateComplete;\r\n await aTimeout(50);\r\n\r\n const container = el.shadowRoot?.querySelector(\r\n '.facets-horizontal-container',\r\n );\r\n expect(container).to.exist;\r\n\r\n const facetsTemplate = container?.querySelector('facets-template');\r\n expect(facetsTemplate).to.exist;\r\n });\r\n\r\n it('should render pagination when facet count >= 1000', async () => {\r\n // Manually create aggregations with 1000+ facets\r\n const buckets: Bucket[] = [];\r\n for (let i = 0; i < 1000; i++) {\r\n buckets.push({ key: `value-${i}`, doc_count: i + 1 });\r\n }\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .facetKey=${'subject'}\r\n .selectedFacets=${{\r\n mediatype: {},\r\n lending: {},\r\n year: {},\r\n subject: {},\r\n collection: {},\r\n creator: {},\r\n language: {},\r\n }}\r\n ></more-facets-content>`,\r\n );\r\n\r\n // @ts-expect-error - accessing private property for testing\r\n el.aggregations = {\r\n subject: new Aggregation({ buckets }),\r\n };\r\n el.facetsLoading = false;\r\n await el.updateComplete;\r\n\r\n // Verify pagination component IS present\r\n expect(el.shadowRoot?.querySelector('more-facets-pagination')).to.exist;\r\n\r\n // Verify pagination mode CSS class is applied\r\n expect(el.shadowRoot?.querySelector('.facets-content.pagination-mode')).to\r\n .exist;\r\n\r\n // Verify horizontal container wrapper does NOT exist in pagination mode\r\n expect(el.shadowRoot?.querySelector('.facets-horizontal-container')).to.not\r\n .exist;\r\n });\r\n\r\n it('pagination page change should send analytics event', async () => {\r\n const mockAnalyticsHandler = new MockAnalyticsHandler();\r\n\r\n // Manually create aggregations with 1000+ facets\r\n const buckets: Bucket[] = [];\r\n for (let i = 0; i < 1000; i++) {\r\n buckets.push({ key: `value-${i}`, doc_count: i + 1 });\r\n }\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .facetKey=${'subject'}\r\n .selectedFacets=${{\r\n mediatype: {},\r\n lending: {},\r\n year: {},\r\n subject: {},\r\n collection: {},\r\n creator: {},\r\n language: {},\r\n }}\r\n .analyticsHandler=${mockAnalyticsHandler}\r\n ></more-facets-content>`,\r\n );\r\n\r\n // @ts-expect-error - accessing private property for testing\r\n el.aggregations = {\r\n subject: new Aggregation({ buckets }),\r\n };\r\n el.facetsLoading = false;\r\n await el.updateComplete;\r\n\r\n // Get the pagination component\r\n const pagination = el.shadowRoot?.querySelector(\r\n 'more-facets-pagination',\r\n ) as any;\r\n expect(pagination).to.exist;\r\n\r\n // Simulate clicking page 2\r\n pagination.currentPage = 2;\r\n await pagination.updateComplete;\r\n\r\n // Verify analytics event was sent\r\n expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');\r\n expect(mockAnalyticsHandler.callAction).to.equal('moreFacetsPageChange');\r\n expect(mockAnalyticsHandler.callLabel).to.equal('2');\r\n });\r\n});\r\n"]}
1
+ {"version":3,"file":"more-facets-content.test.js","sourceRoot":"","sources":["../../../test/collection-facets/more-facets-content.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { aTimeout, expect, fixture } from '@open-wc/testing';\r\nimport { html } from 'lit';\r\nimport type { MoreFacetsContent } from '../../src/collection-facets/more-facets-content';\r\nimport '../../src/collection-facets/more-facets-content';\r\nimport { MockSearchService } from '../mocks/mock-search-service';\r\nimport { MockAnalyticsHandler } from '../mocks/mock-analytics-handler';\r\nimport type { FacetsTemplate } from '../../src/collection-facets/facets-template';\r\nimport type { SelectedFacets } from '../../src/models';\r\n\r\nconst selectedFacetsGroup = {\r\n title: 'Media Type',\r\n key: 'mediatype',\r\n buckets: [\r\n { displayText: 'audio', key: 'audio', count: 1001, state: 'none' },\r\n { displayText: 'movies', key: 'movies', count: 901, state: 'none' },\r\n { displayText: 'texts', key: 'texts', count: 2101, state: 'none' },\r\n { displayText: 'data', key: 'data', count: 230, state: 'none' },\r\n { displayText: 'web', key: 'web', count: 453, state: 'none' },\r\n ],\r\n};\r\n\r\nconst yearSelectedFacets: SelectedFacets = {\r\n mediatype: {},\r\n lending: {},\r\n year: {\r\n '2000': { key: '2000', count: 5, state: 'selected' },\r\n },\r\n subject: {},\r\n collection: {},\r\n creator: {},\r\n language: {},\r\n};\r\n\r\ndescribe('More facets content', () => {\r\n it('should render more facets template', async () => {\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content></more-facets-content>`,\r\n );\r\n\r\n el.facetsLoading = false;\r\n await el.updateComplete;\r\n\r\n expect(el.shadowRoot?.querySelector('.facets-content')).to.exist;\r\n });\r\n\r\n it('should render more facets loader template', async () => {\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content></more-facets-content>`,\r\n );\r\n\r\n el.facetsLoading = true;\r\n await el.updateComplete;\r\n\r\n expect(el.shadowRoot?.querySelector('.facets-loader')).to.exist;\r\n });\r\n\r\n it('should render pagination for more facets', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .searchService=${searchService}\r\n ></more-facets-content>`,\r\n );\r\n\r\n el.facetKey = 'year';\r\n el.query = 'more-facets'; // Produces a response with 40+ aggregations for multiple pages\r\n await el.updateComplete;\r\n await aTimeout(50); // Give it a moment to perform the (mock) search query after the initial update\r\n\r\n expect(el.shadowRoot?.querySelectorAll('more-facets-pagination')).to.exist;\r\n });\r\n\r\n it('query for more facets content using search service', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .searchService=${searchService}\r\n ></more-facets-content>`,\r\n );\r\n\r\n el.facetKey = 'collection';\r\n el.query = 'collection-aggregations';\r\n await el.updateComplete;\r\n\r\n expect(searchService.searchParams?.query).to.equal(\r\n 'collection-aggregations',\r\n );\r\n });\r\n\r\n it('queries for more facets using search service within a collection (no query)', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .searchService=${searchService}\r\n .pageSpecifierParams=${{\r\n pageType: 'collection_details',\r\n pageTarget: 'foobar',\r\n }}\r\n ></more-facets-content>`,\r\n );\r\n\r\n el.facetKey = 'subject';\r\n await el.updateComplete;\r\n\r\n expect(searchService.searchParams?.query).to.be.empty;\r\n expect(searchService.searchParams?.pageTarget).to.equal('foobar');\r\n });\r\n\r\n it('queries for more facets using search service within a collection (with query)', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .searchService=${searchService}\r\n .pageSpecifierParams=${{\r\n pageType: 'collection_details',\r\n pageTarget: 'foobar',\r\n }}\r\n ></more-facets-content>`,\r\n );\r\n\r\n el.facetKey = 'subject';\r\n el.query = 'title:hello';\r\n await el.updateComplete;\r\n\r\n expect(searchService.searchParams?.query).to.equal('title:hello');\r\n expect(searchService.searchParams?.pageTarget).to.equal('foobar');\r\n });\r\n\r\n it('filter raw selectedFacets object', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .searchService=${searchService}\r\n .selectedFacets=${selectedFacetsGroup}\r\n ></more-facets-content>`,\r\n );\r\n\r\n el.facetKey = 'collection';\r\n el.query = 'title:hello';\r\n await el.updateComplete;\r\n\r\n expect(searchService.searchParams?.query).to.equal('title:hello');\r\n });\r\n\r\n it('combines selectedFacets and aggregationFacets and renders on modal', async () => {\r\n const searchService = new MockSearchService();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .facetKey=${'year'}\r\n .query=${'more-facets'}\r\n .searchService=${searchService}\r\n .selectedFacets=${yearSelectedFacets}\r\n ></more-facets-content>`,\r\n );\r\n\r\n const facetsTemplate = el.shadowRoot?.querySelector(\r\n 'facets-template',\r\n ) as FacetsTemplate;\r\n expect(facetsTemplate).to.exist;\r\n\r\n const { facetGroup } = facetsTemplate;\r\n expect(facetGroup?.key).to.equal('year');\r\n expect(facetGroup?.title).to.equal('Year');\r\n\r\n // First bucket is the one that was included in the selected facets\r\n const firstBucket = facetGroup?.buckets[0];\r\n expect(firstBucket?.key).to.equal('2000');\r\n expect(firstBucket?.count).to.equal(5);\r\n\r\n // Second bucket is the most recent year, since year facets default to descending order of year\r\n const secondBucket = facetGroup?.buckets[1];\r\n expect(secondBucket?.key).to.equal('2024');\r\n expect(secondBucket?.count).to.equal(5);\r\n });\r\n\r\n it('cancel button clicked event', async () => {\r\n const searchService = new MockSearchService();\r\n const mockAnalyticsHandler = new MockAnalyticsHandler();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .facetKey=${'collection'}\r\n .query=${'collection-aggregations'}\r\n .searchService=${searchService}\r\n .analyticsHandler=${mockAnalyticsHandler}\r\n ></more-facets-content>`,\r\n );\r\n\r\n // select cancel button\r\n const cancelButton = el.shadowRoot?.querySelector(\r\n '.footer > .btn-cancel',\r\n ) as HTMLButtonElement;\r\n expect(cancelButton).to.exist;\r\n cancelButton?.click();\r\n\r\n expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');\r\n expect(mockAnalyticsHandler.callAction).to.equal('closeMoreFacetsModal');\r\n expect(mockAnalyticsHandler.callLabel).to.equal('collection');\r\n });\r\n\r\n it('facet apply button clicked event', async () => {\r\n const searchService = new MockSearchService();\r\n const mockAnalyticsHandler = new MockAnalyticsHandler();\r\n\r\n const el = await fixture<MoreFacetsContent>(\r\n html`<more-facets-content\r\n .facetKey=${'collection'}\r\n .query=${'collection-aggregations'}\r\n .searchService=${searchService}\r\n .analyticsHandler=${mockAnalyticsHandler}\r\n ></more-facets-content>`,\r\n );\r\n\r\n // select submit button\r\n const submitButton = el.shadowRoot?.querySelector(\r\n '.footer > .btn-submit',\r\n ) as HTMLButtonElement;\r\n expect(submitButton).to.exist;\r\n submitButton?.click();\r\n\r\n expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');\r\n expect(mockAnalyticsHandler.callAction).to.equal('applyMoreFacetsModal');\r\n expect(mockAnalyticsHandler.callLabel).to.equal('collection');\r\n });\r\n});\r\n"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "The Internet Archive Collection Browser.",
4
4
  "license": "AGPL-3.0-only",
5
5
  "author": "Internet Archive",
6
- "version": "3.5.2-alpha-webdev8164.0",
6
+ "version": "3.5.2-alpha-webdev8093.0",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.js",
9
9
  "scripts": {
package/src/collection-facets/facets-template.ts CHANGED
@@ -63,16 +63,11 @@ export class FacetsTemplate extends LitElement {
63
63
  static get styles(): CSSResultGroup {
64
64
  const columnCount = css`var(--facetsColumnCount, 1)`;
65
65
  const columnGap = css`var(--facetsColumnGap, 15px)`;
66
- const columnWidth = css`var(--facetsColumnWidth, auto)`;
67
- const maxHeight = css`var(--facetsMaxHeight, none)`;
68
66
 
69
67
  return css`
70
68
  .facet-rows {
71
69
  column-count: ${columnCount};
72
70
  column-gap: ${columnGap};
73
- column-width: ${columnWidth};
74
- max-height: ${maxHeight};
75
- column-fill: auto;
76
71
  }
77
72
 
78
73
  a:link,
package/src/collection-facets/more-facets-content.ts CHANGED
@@ -39,13 +39,13 @@ import type {
39
39
  TVChannelAliases,
40
40
  } from '../data-source/models';
41
41
  import '@internetarchive/elements/ia-status-indicator/ia-status-indicator';
42
+ import './more-facets-pagination';
42
43
  import './facets-template';
43
44
  import {
44
45
  analyticsActions,
45
46
  analyticsCategories,
46
47
  } from '../utils/analytics-events';
47
48
  import './toggle-switch';
48
- import './more-facets-pagination';
49
49
  import { srOnlyStyle } from '../styles/sr-only';
50
50
  import {
51
51
  mergeSelectedFacets,
@@ -57,12 +57,6 @@ import {
57
57
  MORE_FACETS__MAX_AGGREGATIONS,
58
58
  } from './models';
59
59
 
60
- /**
61
- * Threshold for switching from horizontal scroll to pagination.
62
- * If facet count >= this value, use pagination. Otherwise use horizontal scroll.
63
- */
64
- const PAGINATION_THRESHOLD = 1000;
65
-
66
60
  @customElement('more-facets-content')
67
61
  export class MoreFacetsContent extends LitElement {
68
62
  @property({ type: String }) facetKey?: FacetOption;
@@ -131,13 +125,7 @@ export class MoreFacetsContent extends LitElement {
131
125
  getDefaultSelectedFacets();
132
126
 
133
127
  /**
134
- * Text entered by the user to filter facet buckets.
135
- * Applied to bucket.key for case-insensitive matching.
136
- */
137
- @state() private filterText = '';
138
-
139
- /**
140
- * Current page number for pagination (when facet count >= PAGINATION_THRESHOLD).
128
+ * Which page of facets we are showing.
141
129
  */
142
130
  @state() private pageNumber = 1;
143
131
 
@@ -153,11 +141,6 @@ export class MoreFacetsContent extends LitElement {
153
141
  // store it for reuse across pages.
154
142
  this.facetGroup = this.mergedFacets;
155
143
  }
156
-
157
- // Reset to page 1 when filter text changes (only matters for pagination mode)
158
- if (changed.has('filterText')) {
159
- this.pageNumber = 1;
160
- }
161
144
  }
162
145
 
163
146
  updated(changed: PropertyValues): void {
@@ -169,7 +152,7 @@ export class MoreFacetsContent extends LitElement {
169
152
  changed.has('filterMap')
170
153
  ) {
171
154
  this.facetsLoading = true;
172
- this.pageNumber = 1; // Reset to page 1 on new search
155
+ this.pageNumber = 1;
173
156
  this.sortedBy = defaultFacetSort[this.facetKey as FacetOption];
174
157
 
175
158
  this.updateSpecificFacets();
@@ -242,6 +225,22 @@ export class MoreFacetsContent extends LitElement {
242
225
  }
243
226
  }
244
227
 
228
+ /**
229
+ * Handler for page number changes from the pagination widget.
230
+ */
231
+ private pageNumberClicked(e: CustomEvent<{ page: number }>) {
232
+ const page = e?.detail?.page;
233
+ if (page) {
234
+ this.pageNumber = Number(page);
235
+ }
236
+
237
+ this.analyticsHandler?.sendEvent({
238
+ category: analyticsCategories.default,
239
+ action: analyticsActions.moreFacetsPageChange,
240
+ label: `${this.pageNumber}`,
241
+ });
242
+ }
243
+
245
244
  /**
246
245
  * Combines the selected facets with the aggregations to create a single list of facets
247
246
  */
@@ -386,78 +385,29 @@ export class MoreFacetsContent extends LitElement {
386
385
  }
387
386
 
388
387
  /**
389
- * Returns the facet group with buckets filtered by the current filter text.
390
- * Filters are applied to the full bucket list before pagination.
388
+ * Returns a FacetGroup representing only the current page of facet buckets to show.
391
389
  */
392
- private get filteredFacetGroup(): FacetGroup | undefined {
393
- const { facetGroup, filterText } = this;
390
+ private get facetGroupForCurrentPage(): FacetGroup | undefined {
391
+ const { facetGroup } = this;
394
392
  if (!facetGroup) return undefined;
395
393
 
396
- // If no filter text, return the full group
397
- if (!filterText.trim()) {
398
- return facetGroup;
399
- }
400
-
401
- // Filter buckets case-insensitively by bucket key
402
- const lowerFilter = filterText.toLowerCase().trim();
403
- const filteredBuckets = facetGroup.buckets.filter(bucket =>
404
- bucket.key.toLowerCase().includes(lowerFilter),
394
+ // Slice out only the current page of facet buckets
395
+ const firstBucketIndexOnPage = (this.pageNumber - 1) * this.facetsPerPage;
396
+ const truncatedBuckets = facetGroup.buckets.slice(
397
+ firstBucketIndexOnPage,
398
+ firstBucketIndexOnPage + this.facetsPerPage,
405
399
  );
406
400
 
407
401
  return {
408
402
  ...facetGroup,
409
- buckets: filteredBuckets,
410
- };
411
- }
412
-
413
- /**
414
- * Determines whether to use pagination based on the number of filtered facets.
415
- * Returns true if facet count >= PAGINATION_THRESHOLD, false otherwise.
416
- */
417
- private get usePagination(): boolean {
418
- const facetCount = this.filteredFacetGroup?.buckets.length ?? 0;
419
- return facetCount >= PAGINATION_THRESHOLD;
420
- }
421
-
422
- /**
423
- * Returns the facet group for the current page.
424
- * If using pagination (>= 1000 facets), slices to show only the current page.
425
- * Otherwise, returns all facets for horizontal scrolling.
426
- */
427
- private get facetGroupForCurrentPage(): FacetGroup | undefined {
428
- const filteredGroup = this.filteredFacetGroup;
429
- if (!filteredGroup) return undefined;
430
-
431
- // If facet count is below threshold, show all facets with horizontal scroll
432
- if (!this.usePagination) {
433
- return filteredGroup;
434
- }
435
-
436
- // Otherwise, use pagination - slice to current page
437
- const startIndex = (this.pageNumber - 1) * this.facetsPerPage;
438
- const endIndex = startIndex + this.facetsPerPage;
439
- const slicedBuckets = filteredGroup.buckets.slice(startIndex, endIndex);
440
-
441
- return {
442
- ...filteredGroup,
443
- buckets: slicedBuckets,
403
+ buckets: truncatedBuckets,
444
404
  };
445
405
  }
446
406
 
447
407
  private get moreFacetsTemplate(): TemplateResult {
448
- const facetGroup = this.facetGroupForCurrentPage;
449
-
450
- // Show empty state if filtering returned no results
451
- if (
452
- this.filterText.trim() &&
453
- (!facetGroup || facetGroup.buckets.length === 0)
454
- ) {
455
- return this.emptyFilterResultsTemplate;
456
- }
457
-
458
408
  return html`
459
409
  <facets-template
460
- .facetGroup=${facetGroup}
410
+ .facetGroup=${this.facetGroupForCurrentPage}
461
411
  .selectedFacets=${this.selectedFacets}
462
412
  .collectionTitles=${this.collectionTitles}
463
413
  @facetClick=${(e: CustomEvent<FacetEventDetails>) => {
@@ -482,52 +432,50 @@ export class MoreFacetsContent extends LitElement {
482
432
  `;
483
433
  }
484
434
 
485
- private get emptyFilterResultsTemplate(): TemplateResult {
486
- return html`
487
- <div class="empty-results">
488
- <p>${msg('No matching values found.')}</p>
489
- <p class="hint">${msg('Try a different search term.')}</p>
490
- </div>
491
- `;
492
- }
493
-
494
435
  /**
495
- * Number of pages for pagination (only used when facet count >= PAGINATION_THRESHOLD).
436
+ * How many pages of facets to show in the modal pagination widget
496
437
  */
497
438
  private get paginationSize(): number {
498
- const filteredBuckets = this.filteredFacetGroup?.buckets ?? [];
499
- return Math.ceil(filteredBuckets.length / this.facetsPerPage);
439
+ if (!this.aggregations || !this.facetKey) return 0;
440
+
441
+ // Calculate the appropriate number of pages to show in the modal pagination widget
442
+ const length = this.aggregations[this.facetKey]?.buckets.length;
443
+ return Math.ceil(length / this.facetsPerPage);
500
444
  }
501
445
 
502
- /**
503
- * Template for pagination component (only shown when facet count >= PAGINATION_THRESHOLD).
504
- */
446
+ // render pagination if more then 1 page
505
447
  private get facetsPaginationTemplate() {
506
- if (!this.usePagination) return nothing;
507
-
508
- return html`<more-facets-pagination
509
- .size=${this.paginationSize}
510
- .currentPage=${this.pageNumber}
511
- @pageNumberClicked=${this.pageNumberClicked}
512
- ></more-facets-pagination>`;
448
+ return this.paginationSize > 1
449
+ ? html`<more-facets-pagination
450
+ .size=${this.paginationSize}
451
+ .currentPage=${1}
452
+ @pageNumberClicked=${this.pageNumberClicked}
453
+ ></more-facets-pagination>`
454
+ : nothing;
513
455
  }
514
456
 
515
457
  private get footerTemplate() {
516
- return html`
517
- ${this.facetsPaginationTemplate}
518
- <div class="footer">
519
- <button class="btn btn-cancel" type="button" @click=${this.cancelClick}>
520
- Cancel
521
- </button>
522
- <button
523
- class="btn btn-submit"
524
- type="button"
525
- @click=${this.applySearchFacetsClicked}
526
- >
527
- Apply filters
528
- </button>
529
- </div>
530
- `;
458
+ if (this.paginationSize > 0) {
459
+ return html`${this.facetsPaginationTemplate}
460
+ <div class="footer">
461
+ <button
462
+ class="btn btn-cancel"
463
+ type="button"
464
+ @click=${this.cancelClick}
465
+ >
466
+ Cancel
467
+ </button>
468
+ <button
469
+ class="btn btn-submit"
470
+ type="button"
471
+ @click=${this.applySearchFacetsClicked}
472
+ >
473
+ Apply filters
474
+ </button>
475
+ </div> `;
476
+ }
477
+
478
+ return nothing;
531
479
  }
532
480
 
533
481
  private sortFacetAggregation(facetSortType: AggregationSortType) {
@@ -537,33 +485,6 @@ export class MoreFacetsContent extends LitElement {
537
485
  );
538
486
  }
539
487
 
540
- /**
541
- * Handler for filter input changes. Updates the filter text and triggers re-render.
542
- */
543
- private handleFilterInput(e: Event): void {
544
- const input = e.target as HTMLInputElement;
545
- this.filterText = input.value;
546
- }
547
-
548
- /**
549
- * Handler for pagination page number clicks.
550
- * Only used when facet count >= PAGINATION_THRESHOLD.
551
- */
552
- private pageNumberClicked(e: CustomEvent<{ page: number }>) {
553
- this.pageNumber = e.detail.page;
554
-
555
- // Track page navigation in analytics
556
- this.analyticsHandler?.sendEvent({
557
- category: analyticsCategories.default,
558
- action: analyticsActions.moreFacetsPageChange,
559
- label: `${this.pageNumber}`,
560
- });
561
-
562
- this.dispatchEvent(
563
- new CustomEvent('pageChanged', { detail: this.pageNumber }),
564
- );
565
- }
566
-
567
488
  private get modalHeaderTemplate(): TemplateResult {
568
489
  const facetSort =
569
490
  this.sortedBy ?? defaultFacetSort[this.facetKey as FacetOption];
@@ -590,43 +511,17 @@ export class MoreFacetsContent extends LitElement {
590
511
  }}
591
512
  ></toggle-switch>`
592
513
  : nothing}
593
-
594
- <label class="filter-label" for="facet-filter"
595
- >${msg('Filter by:')}</label
596
- >
597
- <input
598
- id="facet-filter"
599
- type="text"
600
- class="filter-input"
601
- .value=${this.filterText}
602
- @input=${this.handleFilterInput}
603
- placeholder=${msg('Search...')}
604
- aria-label=${msg('Filter facets')}
605
- />
606
514
  </span>`;
607
515
  }
608
516
 
609
517
  render() {
610
- const contentClass = this.usePagination
611
- ? 'facets-content pagination-mode'
612
- : 'facets-content horizontal-scroll-mode';
613
- const sectionClass = this.usePagination
614
- ? 'pagination-mode'
615
- : 'horizontal-scroll-mode';
616
-
617
518
  return html`
618
519
  ${this.facetsLoading
619
520
  ? this.loaderTemplate
620
521
  : html`
621
- <section id="more-facets" class="${sectionClass}">
522
+ <section id="more-facets">
622
523
  <div class="header-content">${this.modalHeaderTemplate}</div>
623
- <div class="${contentClass}">
624
- ${this.usePagination
625
- ? this.moreFacetsTemplate
626
- : html`<div class="facets-horizontal-container">
627
- ${this.moreFacetsTemplate}
628
- </div>`}
629
- </div>
524
+ <div class="facets-content">${this.moreFacetsTemplate}</div>
630
525
  ${this.footerTemplate}
631
526
  </section>
632
527
  `}
@@ -649,9 +544,6 @@ export class MoreFacetsContent extends LitElement {
649
544
  // Reset the unapplied changes back to default, now that they have been applied
650
545
  this.unappliedFacetChanges = getDefaultSelectedFacets();
651
546
 
652
- // Reset filter text
653
- this.filterText = '';
654
-
655
547
  this.modalManager?.closeModal();
656
548
  this.analyticsHandler?.sendEvent({
657
549
  category: analyticsCategories.default,
@@ -664,9 +556,6 @@ export class MoreFacetsContent extends LitElement {
664
556
  // Reset the unapplied changes back to default
665
557
  this.unappliedFacetChanges = getDefaultSelectedFacets();
666
558
 
667
- // Reset filter text
668
- this.filterText = '';
669
-
670
559
  this.modalManager?.closeModal();
671
560
  this.analyticsHandler?.sendEvent({
672
561
  category: analyticsCategories.default,
@@ -686,18 +575,6 @@ export class MoreFacetsContent extends LitElement {
686
575
  padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
687
576
  --facetsColumnCount: 3;
688
577
  }
689
-
690
- /* Horizontal scroll mode: fixed column height for horizontal overflow */
691
- section#more-facets.horizontal-scroll-mode {
692
- --facetsColumnCount: 3;
693
- --facetsMaxHeight: 280px;
694
- }
695
-
696
- /* Pagination mode: set height for proper column layout with vertical scroll */
697
- section#more-facets.pagination-mode {
698
- --facetsColumnCount: 3;
699
- --facetsMaxHeight: 280px; /* Columns need height constraint to flow properly */
700
- }
701
578
  .header-content .title {
702
579
  display: block;
703
580
  text-align: left;
@@ -715,92 +592,11 @@ export class MoreFacetsContent extends LitElement {
715
592
  font-weight: normal;
716
593
  }
717
594
 
718
- .filter-label {
719
- margin-left: 20px;
720
- font-size: 1.3rem;
721
- }
722
-
723
- .filter-input {
724
- font-size: 1.3rem;
725
- padding: 4px 8px;
726
- border: 1px solid #ccc;
727
- border-radius: 4px;
728
- margin-left: 5px;
729
- width: 150px;
730
- font-family: inherit;
731
- }
732
-
733
- .filter-input:focus {
734
- outline: 2px solid #194880;
735
- outline-offset: 1px;
736
- border-color: #194880;
737
- }
738
-
739
- .empty-results {
740
- text-align: center;
741
- padding: 40px 20px;
742
- color: #666;
743
- }
744
-
745
- .empty-results .hint {
746
- font-size: 1.1rem;
747
- margin-top: 10px;
748
- }
749
-
750
595
  .facets-content {
751
596
  font-size: 1.2rem;
752
597
  max-height: 300px;
598
+ overflow: auto;
753
599
  padding: 10px;
754
- /* Force scrollbar to always be visible */
755
- scrollbar-width: thin; /* Firefox */
756
- scrollbar-color: #888 #f1f1f1; /* Firefox - thumb and track colors */
757
- }
758
-
759
- /* Pagination mode: vertical scrolling, allow taller height for multiple columns */
760
- .facets-content.pagination-mode {
761
- overflow-y: auto;
762
- overflow-x: hidden;
763
- max-height: none; /* Remove height constraint to allow columns to flow properly */
764
- height: 300px; /* Fixed height to enable vertical scroll */
765
- }
766
-
767
- /* Horizontal scroll mode: horizontal scrolling only */
768
- .facets-content.horizontal-scroll-mode {
769
- overflow-x: auto;
770
- overflow-y: hidden;
771
- }
772
-
773
- /* Webkit browsers scrollbar styling - always visible */
774
- .facets-content::-webkit-scrollbar {
775
- width: 12px; /* Vertical scrollbar width */
776
- height: 12px; /* Horizontal scrollbar height */
777
- }
778
-
779
- .facets-content::-webkit-scrollbar-track {
780
- background: #f1f1f1;
781
- border-radius: 6px;
782
- }
783
-
784
- .facets-content::-webkit-scrollbar-thumb {
785
- background: #888;
786
- border-radius: 6px;
787
- min-height: 30px; /* Ensure thumb is always visible when scrolling is possible */
788
- }
789
-
790
- .facets-content::-webkit-scrollbar-thumb:hover {
791
- background: #555;
792
- }
793
-
794
- /* Force corner to match track color */
795
- .facets-content::-webkit-scrollbar-corner {
796
- background: #f1f1f1;
797
- }
798
-
799
- .facets-horizontal-container {
800
- display: inline-block;
801
- min-width: 100%;
802
- /* Allow natural width expansion based on content */
803
- width: fit-content;
804
600
  }
805
601
  .facets-loader {
806
602
  --icon-width: 70px;
@@ -831,24 +627,14 @@ export class MoreFacetsContent extends LitElement {
831
627
  }
832
628
 
833
629
  @media (max-width: 560px) {
834
- section#more-facets.horizontal-scroll-mode,
835
- section#more-facets.pagination-mode {
630
+ section#more-facets {
836
631
  max-height: 450px;
837
- --facetsColumnCount: 1; /* Single column on mobile */
838
- --facetsMaxHeight: none; /* Remove fixed height for vertical scrolling */
632
+ --facetsColumnCount: 1;
839
633
  }
840
- /* On mobile, always use vertical scrolling regardless of mode */
841
- .facets-content,
842
- .facets-content.pagination-mode,
843
- .facets-content.horizontal-scroll-mode {
634
+ .facets-content {
844
635
  overflow-y: auto;
845
- overflow-x: hidden;
846
636
  height: 300px;
847
637
  }
848
- .filter-input {
849
- width: 120px;
850
- font-size: 1.2rem;
851
- }
852
638
  }
853
639
  `,
854
640
  ];
package/src/tiles/hover/hover-pane-controller.ts CHANGED
@@ -157,6 +157,14 @@ export class HoverPaneController implements HoverPaneControllerInterface {
157
157
  /** A record of the last mouse position on the host element, for positioning the hover pane */
158
158
  private lastPointerClientPos = { x: 0, y: 0 };
159
159
 
160
+ /**
161
+ * A flag to track whether the host element is being clicked by a pointer device, so that we
162
+ * don't trigger unnecessary keyboard focus behaviors on click. This is needed, e.g., to prevent
163
+ * the hover pane from appearing immediately at its `host` positioning on click, which can
164
+ * obstruct the host element itself (due to the ordering of events fired).
165
+ */
166
+ private clicking = false;
167
+
160
168
  constructor(
161
169
  /** The host element to which this controller should attach listeners */
162
170
  private readonly host: ReactiveControllerHost &
@@ -352,6 +360,7 @@ export class HoverPaneController implements HoverPaneControllerInterface {
352
360
  // keyboard navigation listeners
353
361
  this.host.addEventListener('focus', this.handleFocus);
354
362
  this.host.addEventListener('blur', this.handleBlur);
363
+ this.host.addEventListener('pointerdown', this.handlePointerDown);
355
364
  this.host.addEventListener('keyup', this.handleKeyUp);
356
365
  this.host.addEventListener('keydown', this.handleKeyDown);
357
366
 
@@ -391,11 +400,12 @@ export class HoverPaneController implements HoverPaneControllerInterface {
391
400
  }
392
401
 
393
402
  private handleFocus = (): void => {
394
- if (this.hoverPaneState === 'hidden') {
403
+ if (!this.clicking && this.hoverPaneState === 'hidden') {
395
404
  this.showHoverPane({
396
405
  anchor: 'host',
397
406
  });
398
407
  }
408
+ this.clicking = false;
399
409
  };
400
410
 
401
411
  private handleBlur = (): void => {
@@ -404,6 +414,10 @@ export class HoverPaneController implements HoverPaneControllerInterface {
404
414
  }
405
415
  };
406
416
 
417
+ private handlePointerDown = (): void => {
418
+ this.clicking = true;
419
+ };
420
+
407
421
  private handleKeyDown = (e: KeyboardEvent): void => {
408
422
  if (
409
423
  (e.key === 'ArrowDown' || e.key === 'ArrowUp') &&