@internetarchive/collection-browser 0.3.1-alpha.2 → 0.3.1

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 (214) hide show
  1. package/.editorconfig +29 -29
  2. package/.github/workflows/ci.yml +26 -26
  3. package/.github/workflows/gh-pages-main.yml +39 -39
  4. package/.github/workflows/npm-publish.yml +39 -39
  5. package/.github/workflows/pr-preview.yml +38 -38
  6. package/.husky/pre-commit +4 -4
  7. package/LICENSE +661 -661
  8. package/README.md +83 -83
  9. package/dist/index.d.ts +9 -9
  10. package/dist/index.js +9 -9
  11. package/dist/src/app-root.d.ts +43 -43
  12. package/dist/src/app-root.js +233 -233
  13. package/dist/src/assets/img/icons/arrow-left.d.ts +2 -2
  14. package/dist/src/assets/img/icons/arrow-left.js +2 -2
  15. package/dist/src/assets/img/icons/arrow-right.d.ts +2 -2
  16. package/dist/src/assets/img/icons/arrow-right.js +2 -2
  17. package/dist/src/assets/img/icons/chevron.d.ts +2 -2
  18. package/dist/src/assets/img/icons/chevron.js +2 -2
  19. package/dist/src/assets/img/icons/empty-query.d.ts +2 -2
  20. package/dist/src/assets/img/icons/empty-query.js +2 -2
  21. package/dist/src/assets/img/icons/eye-closed.d.ts +2 -2
  22. package/dist/src/assets/img/icons/eye-closed.js +2 -2
  23. package/dist/src/assets/img/icons/eye.d.ts +2 -2
  24. package/dist/src/assets/img/icons/eye.js +2 -2
  25. package/dist/src/assets/img/icons/favorite-filled.d.ts +1 -1
  26. package/dist/src/assets/img/icons/favorite-filled.js +2 -2
  27. package/dist/src/assets/img/icons/login-required.d.ts +1 -1
  28. package/dist/src/assets/img/icons/login-required.js +2 -2
  29. package/dist/src/assets/img/icons/mediatype/account.d.ts +1 -1
  30. package/dist/src/assets/img/icons/mediatype/account.js +2 -2
  31. package/dist/src/assets/img/icons/mediatype/audio.d.ts +1 -1
  32. package/dist/src/assets/img/icons/mediatype/audio.js +2 -2
  33. package/dist/src/assets/img/icons/mediatype/collection.d.ts +1 -1
  34. package/dist/src/assets/img/icons/mediatype/collection.js +2 -2
  35. package/dist/src/assets/img/icons/mediatype/data.d.ts +1 -1
  36. package/dist/src/assets/img/icons/mediatype/data.js +2 -2
  37. package/dist/src/assets/img/icons/mediatype/etree.d.ts +1 -1
  38. package/dist/src/assets/img/icons/mediatype/etree.js +2 -2
  39. package/dist/src/assets/img/icons/mediatype/film.d.ts +1 -1
  40. package/dist/src/assets/img/icons/mediatype/film.js +2 -2
  41. package/dist/src/assets/img/icons/mediatype/images.d.ts +1 -1
  42. package/dist/src/assets/img/icons/mediatype/images.js +2 -2
  43. package/dist/src/assets/img/icons/mediatype/radio.d.ts +1 -1
  44. package/dist/src/assets/img/icons/mediatype/radio.js +2 -2
  45. package/dist/src/assets/img/icons/mediatype/software.d.ts +1 -1
  46. package/dist/src/assets/img/icons/mediatype/software.js +2 -2
  47. package/dist/src/assets/img/icons/mediatype/texts.d.ts +1 -1
  48. package/dist/src/assets/img/icons/mediatype/texts.js +2 -2
  49. package/dist/src/assets/img/icons/mediatype/tv.d.ts +1 -1
  50. package/dist/src/assets/img/icons/mediatype/tv.js +2 -2
  51. package/dist/src/assets/img/icons/mediatype/video.d.ts +1 -1
  52. package/dist/src/assets/img/icons/mediatype/video.js +2 -2
  53. package/dist/src/assets/img/icons/mediatype/web.d.ts +1 -1
  54. package/dist/src/assets/img/icons/mediatype/web.js +2 -2
  55. package/dist/src/assets/img/icons/null-result.d.ts +2 -2
  56. package/dist/src/assets/img/icons/null-result.js +2 -2
  57. package/dist/src/assets/img/icons/restricted.d.ts +1 -1
  58. package/dist/src/assets/img/icons/restricted.js +2 -2
  59. package/dist/src/assets/img/icons/reviews.d.ts +1 -1
  60. package/dist/src/assets/img/icons/reviews.js +2 -2
  61. package/dist/src/assets/img/icons/upload.d.ts +1 -1
  62. package/dist/src/assets/img/icons/upload.js +2 -2
  63. package/dist/src/assets/img/icons/views.d.ts +1 -1
  64. package/dist/src/assets/img/icons/views.js +2 -2
  65. package/dist/src/circular-activity-indicator.d.ts +5 -5
  66. package/dist/src/circular-activity-indicator.js +17 -17
  67. package/dist/src/collection-browser.d.ts +236 -236
  68. package/dist/src/collection-browser.js +1406 -1402
  69. package/dist/src/collection-browser.js.map +1 -1
  70. package/dist/src/collection-facets/facets-template.d.ts +16 -16
  71. package/dist/src/collection-facets/facets-template.js +132 -130
  72. package/dist/src/collection-facets/facets-template.js.map +1 -1
  73. package/dist/src/collection-facets/more-facets-content.d.ts +74 -74
  74. package/dist/src/collection-facets/more-facets-content.js +350 -339
  75. package/dist/src/collection-facets/more-facets-content.js.map +1 -1
  76. package/dist/src/collection-facets/more-facets-pagination.d.ts +36 -36
  77. package/dist/src/collection-facets/more-facets-pagination.js +192 -192
  78. package/dist/src/collection-facets.d.ts +71 -71
  79. package/dist/src/collection-facets.js +496 -496
  80. package/dist/src/collection-facets.js.map +1 -1
  81. package/dist/src/empty-placeholder.d.ts +11 -11
  82. package/dist/src/empty-placeholder.js +42 -42
  83. package/dist/src/language-code-handler/language-code-handler.d.ts +37 -37
  84. package/dist/src/language-code-handler/language-code-handler.js +26 -26
  85. package/dist/src/language-code-handler/language-code-mapping.d.ts +1 -1
  86. package/dist/src/language-code-handler/language-code-mapping.js +562 -562
  87. package/dist/src/mediatype/mediatype-config.d.ts +3 -3
  88. package/dist/src/mediatype/mediatype-config.js +85 -85
  89. package/dist/src/models.d.ts +97 -97
  90. package/dist/src/models.js +100 -100
  91. package/dist/src/models.js.map +1 -1
  92. package/dist/src/restoration-state-handler.d.ts +45 -46
  93. package/dist/src/restoration-state-handler.js +220 -231
  94. package/dist/src/restoration-state-handler.js.map +1 -1
  95. package/dist/src/sort-filter-bar/alpha-bar.d.ts +9 -9
  96. package/dist/src/sort-filter-bar/alpha-bar.js +41 -41
  97. package/dist/src/sort-filter-bar/img/compact.d.ts +1 -1
  98. package/dist/src/sort-filter-bar/img/compact.js +2 -2
  99. package/dist/src/sort-filter-bar/img/list.d.ts +1 -1
  100. package/dist/src/sort-filter-bar/img/list.js +2 -2
  101. package/dist/src/sort-filter-bar/img/sort-triangle.d.ts +1 -1
  102. package/dist/src/sort-filter-bar/img/sort-triangle.js +2 -2
  103. package/dist/src/sort-filter-bar/img/tile.d.ts +1 -1
  104. package/dist/src/sort-filter-bar/img/tile.js +2 -2
  105. package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +107 -107
  106. package/dist/src/sort-filter-bar/sort-filter-bar.js +423 -423
  107. package/dist/src/styles/item-image-styles.d.ts +8 -8
  108. package/dist/src/styles/item-image-styles.js +9 -9
  109. package/dist/src/tiles/collection-browser-loading-tile.d.ts +5 -5
  110. package/dist/src/tiles/collection-browser-loading-tile.js +15 -15
  111. package/dist/src/tiles/grid/account-tile.d.ts +8 -8
  112. package/dist/src/tiles/grid/account-tile.js +20 -20
  113. package/dist/src/tiles/grid/collection-tile.d.ts +7 -7
  114. package/dist/src/tiles/grid/collection-tile.js +23 -23
  115. package/dist/src/tiles/grid/item-tile.d.ts +24 -24
  116. package/dist/src/tiles/grid/item-tile.js +87 -87
  117. package/dist/src/tiles/grid/tile-stats.d.ts +10 -10
  118. package/dist/src/tiles/grid/tile-stats.js +35 -35
  119. package/dist/src/tiles/image-block.d.ts +17 -17
  120. package/dist/src/tiles/image-block.js +73 -73
  121. package/dist/src/tiles/item-image.d.ts +31 -31
  122. package/dist/src/tiles/item-image.js +103 -103
  123. package/dist/src/tiles/list/account-label.d.ts +1 -1
  124. package/dist/src/tiles/list/account-label.js +6 -6
  125. package/dist/src/tiles/list/date-label.d.ts +1 -1
  126. package/dist/src/tiles/list/date-label.js +12 -12
  127. package/dist/src/tiles/list/tile-list-compact-header.d.ts +12 -12
  128. package/dist/src/tiles/list/tile-list-compact-header.js +41 -41
  129. package/dist/src/tiles/list/tile-list-compact.d.ts +20 -20
  130. package/dist/src/tiles/list/tile-list-compact.js +87 -87
  131. package/dist/src/tiles/list/tile-list.d.ts +50 -50
  132. package/dist/src/tiles/list/tile-list.js +264 -263
  133. package/dist/src/tiles/list/tile-list.js.map +1 -1
  134. package/dist/src/tiles/mediatype-icon.d.ts +9 -9
  135. package/dist/src/tiles/mediatype-icon.js +47 -47
  136. package/dist/src/tiles/overlay/icon-overlay.d.ts +7 -7
  137. package/dist/src/tiles/overlay/icon-overlay.js +31 -31
  138. package/dist/src/tiles/overlay/text-overlay.d.ts +8 -8
  139. package/dist/src/tiles/overlay/text-overlay.js +31 -31
  140. package/dist/src/tiles/text-snippet-block.d.ts +29 -29
  141. package/dist/src/tiles/text-snippet-block.js +81 -81
  142. package/dist/src/tiles/tile-dispatcher.d.ts +36 -36
  143. package/dist/src/tiles/tile-dispatcher.js +128 -128
  144. package/dist/src/utils/analytics-events.d.ts +18 -18
  145. package/dist/src/utils/analytics-events.js +20 -20
  146. package/dist/src/utils/format-count.d.ts +7 -7
  147. package/dist/src/utils/format-count.js +76 -75
  148. package/dist/src/utils/format-count.js.map +1 -1
  149. package/dist/src/utils/format-date.d.ts +2 -2
  150. package/dist/src/utils/format-date.js +23 -23
  151. package/dist/test/collection-browser.test.d.ts +1 -1
  152. package/dist/test/collection-browser.test.js +344 -344
  153. package/dist/test/collection-browser.test.js.map +1 -1
  154. package/dist/test/collection-facets/facets-template.test.d.ts +1 -1
  155. package/dist/test/collection-facets/facets-template.test.js +62 -62
  156. package/dist/test/collection-facets/more-facets-content.test.d.ts +1 -1
  157. package/dist/test/collection-facets/more-facets-content.test.js +91 -91
  158. package/dist/test/collection-facets/more-facets-pagination.test.d.ts +1 -1
  159. package/dist/test/collection-facets/more-facets-pagination.test.js +117 -117
  160. package/dist/test/collection-facets.test.d.ts +2 -2
  161. package/dist/test/collection-facets.test.js +385 -182
  162. package/dist/test/collection-facets.test.js.map +1 -1
  163. package/dist/test/empty-placeholder.test.d.ts +1 -1
  164. package/dist/test/empty-placeholder.test.js +33 -33
  165. package/dist/test/icon-overlay.test.d.ts +1 -1
  166. package/dist/test/icon-overlay.test.js +24 -24
  167. package/dist/test/item-image.test.d.ts +1 -1
  168. package/dist/test/item-image.test.js +56 -56
  169. package/dist/test/mediatype-config.test.d.ts +1 -1
  170. package/dist/test/mediatype-config.test.js +16 -16
  171. package/dist/test/mocks/mock-analytics-handler.d.ts +10 -10
  172. package/dist/test/mocks/mock-analytics-handler.js +15 -15
  173. package/dist/test/mocks/mock-collection-name-cache.d.ts +7 -7
  174. package/dist/test/mocks/mock-collection-name-cache.js +13 -13
  175. package/dist/test/mocks/mock-search-responses.d.ts +5 -5
  176. package/dist/test/mocks/mock-search-responses.js +103 -103
  177. package/dist/test/mocks/mock-search-service.d.ts +13 -13
  178. package/dist/test/mocks/mock-search-service.js +25 -25
  179. package/dist/test/restoration-state-handler.test.d.ts +1 -1
  180. package/dist/test/restoration-state-handler.test.js +117 -117
  181. package/dist/test/sort-filter-bar/sort-filter-bar.test.d.ts +1 -1
  182. package/dist/test/sort-filter-bar/sort-filter-bar.test.js +113 -113
  183. package/dist/test/text-overlay.test.d.ts +1 -1
  184. package/dist/test/text-overlay.test.js +41 -41
  185. package/dist/test/text-snippet-block.test.d.ts +1 -1
  186. package/dist/test/text-snippet-block.test.js +57 -57
  187. package/dist/test/tile-stats.test.d.ts +1 -1
  188. package/dist/test/tile-stats.test.js +33 -33
  189. package/dist/test/tiles/grid/item-tile.test.d.ts +1 -1
  190. package/dist/test/tiles/grid/item-tile.test.js +107 -107
  191. package/dist/test/tiles/list/tile-list.test.d.ts +1 -1
  192. package/dist/test/tiles/list/tile-list.test.js +36 -36
  193. package/dist/test/utils/format-count.test.d.ts +1 -1
  194. package/dist/test/utils/format-count.test.js +23 -23
  195. package/dist/test/utils/format-date.test.d.ts +1 -1
  196. package/dist/test/utils/format-date.test.js +17 -17
  197. package/index.html +24 -24
  198. package/local.archive.org.cert +86 -86
  199. package/local.archive.org.key +27 -27
  200. package/package.json +115 -115
  201. package/renovate.json +6 -6
  202. package/src/collection-browser.ts +1530 -1526
  203. package/src/collection-facets/facets-template.ts +7 -5
  204. package/src/collection-facets/more-facets-content.ts +21 -10
  205. package/src/collection-facets.ts +569 -569
  206. package/src/models.ts +216 -216
  207. package/src/restoration-state-handler.ts +302 -314
  208. package/src/tiles/list/tile-list.ts +1 -0
  209. package/src/utils/format-count.ts +1 -0
  210. package/test/collection-browser.test.ts +490 -490
  211. package/test/collection-facets.test.ts +264 -1
  212. package/tsconfig.json +21 -21
  213. package/web-dev-server.config.mjs +30 -30
  214. package/web-test-runner.config.mjs +41 -41
@@ -1,253 +1,253 @@
1
- import { __decorate } from "tslib";
2
- /* eslint-disable dot-notation */
3
- /* eslint-disable lit-a11y/click-events-have-key-events */
4
- import { css, html, LitElement, nothing, } from 'lit';
5
- import { customElement, property, state } from 'lit/decorators.js';
6
- import { AggregationSortType, } from '@internetarchive/search-service';
7
- import { facetTitles, } from '../models';
8
- import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
9
- import './more-facets-pagination';
10
- import './facets-template';
11
- let MoreFacetsContent = class MoreFacetsContent extends LitElement {
12
- constructor() {
13
- super(...arguments);
14
- this.sortedBy = 'count'; // count | alpha
15
- this.facetGroup = [];
16
- this.facetGroupTitle = '';
17
- this.pageNumber = 1;
18
- /**
19
- * Facets are loading on popup
20
- */
21
- this.facetsLoading = true;
22
- this.paginationSize = 0;
23
- this.facetsType = 'modal';
24
- this.facetsPerPage = 60; // TODO: Q. how many items we want to have on popup view
25
- }
26
- updated(changed) {
27
- if (changed.has('facetKey')) {
28
- this.facetsLoading = true;
29
- this.pageNumber = 1;
30
- this.updateSpecificFacets();
31
- }
32
- if (changed.has('pageNumber')) {
33
- this.facetGroup = this.aggregationFacetGroups;
34
- }
35
- }
36
- firstUpdated() {
37
- this.setupEscapeListeners();
38
- }
39
- /**
40
- * Close more facets modal on Escape click
41
- */
42
- setupEscapeListeners() {
43
- if (this.modalManager) {
44
- document.addEventListener('keydown', (e) => {
45
- var _a;
46
- if (e.key === 'Escape') {
47
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
48
- }
49
- });
50
- }
51
- else {
52
- document.removeEventListener('keydown', () => { });
53
- }
54
- }
55
- /**
56
- * Get specific facets data from search-service API based of currently query params
57
- * - this.aggregations - hold result of search service and being used for further processing.
58
- */
59
- async updateSpecificFacets() {
60
- var _a, _b;
61
- const aggregations = {
62
- simpleParams: [this.facetAggregationKey],
63
- };
64
- const aggregationsSize = 65535; // todo - do we want to have all the records at once?
65
- const params = {
66
- query: this.fullQuery,
67
- aggregations,
68
- aggregationsSize,
69
- rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
70
- };
71
- const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
72
- this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
73
- this.facetGroup = this.aggregationFacetGroups;
74
- this.facetsLoading = false;
75
- }
76
- pageNumberClicked(e) {
77
- var _a;
78
- const page = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.page;
79
- if (page) {
80
- this.pageNumber = Number(page);
81
- }
82
- }
83
- /**
84
- * Combines the selected facets with the aggregations to create a single list of facets
85
- */
86
- get mergedFacets() {
87
- var _a;
88
- const facetGroups = [];
89
- const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === this.facetKey);
90
- const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === this.facetKey);
91
- // if the user selected a facet, but it's not in the aggregation, we add it as-is
92
- if (selectedFacetGroup && !aggregateFacetGroup) {
93
- facetGroups.push(selectedFacetGroup);
94
- return facetGroups;
95
- }
96
- // if we don't have an aggregate facet group, don't add this to the list
97
- if (!aggregateFacetGroup)
98
- return facetGroups;
99
- // start with either the selected group if we have one, or the aggregate group
100
- const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
101
- // attach the counts to the selected buckets
102
- const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
103
- const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
104
- return selectedBucket
105
- ? {
106
- ...bucket,
107
- count: selectedBucket.count,
108
- }
109
- : bucket;
110
- })) !== null && _a !== void 0 ? _a : [];
111
- // append any additional buckets that were not selected
112
- aggregateFacetGroup.buckets.forEach(bucket => {
113
- const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
114
- if (existingBucket)
115
- return;
116
- bucketsWithCount.push(bucket);
117
- });
118
- facetGroup.buckets = bucketsWithCount;
119
- facetGroups.push(facetGroup);
120
- return facetGroups;
121
- }
122
- /**
123
- * Converts the selected facets to a `FacetGroup` array,
124
- * which is easier to work with
125
- */
126
- get selectedFacetGroups() {
127
- if (!this.selectedFacets)
128
- return [];
129
- const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
130
- const option = key;
131
- const title = facetTitles[option];
132
- const buckets = Object.entries(selectedFacets).map(([value, data]) => {
133
- var _a, _b;
134
- let displayText = value;
135
- // for selected languages, we store the language code instead of the
136
- // display name, so look up the name from the mapping
137
- if (option === 'language') {
138
- displayText =
139
- (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(value)) !== null && _b !== void 0 ? _b : value;
140
- }
141
- return {
142
- displayText,
143
- key: value,
144
- count: data === null || data === void 0 ? void 0 : data.count,
145
- state: data === null || data === void 0 ? void 0 : data.state,
146
- };
147
- });
148
- return {
149
- title,
150
- key: option,
151
- buckets,
152
- };
153
- });
154
- return facetGroups;
155
- }
156
- /**
157
- * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
158
- */
159
- get aggregationFacetGroups() {
160
- var _a;
161
- const facetGroups = [];
162
- Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, aggregation]) => {
163
- // the year_histogram data is in a different format so can't be handled here
164
- if (key === 'year_histogram')
165
- return;
166
- const option = key;
167
- this.facetGroupTitle = facetTitles[option];
168
- // sort facets in specific order
169
- let castedBuckets = aggregation.getSortedBuckets(this.sortedBy === 'alpha'
170
- ? AggregationSortType.ALPHABETICAL
171
- : AggregationSortType.COUNT);
172
- if (option === 'collection') {
173
- // we are not showing fav- collection items in facets
174
- castedBuckets = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.filter(bucket => { var _a; return ((_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString().startsWith('fav-')) === false; });
175
- // asynchronously load the collection name
176
- this.preloadCollectionNames(castedBuckets);
177
- }
178
- // find length and pagination size for modal pagination
179
- const { length } = Object.keys(castedBuckets);
180
- this.paginationSize = Math.ceil(length / this.facetsPerPage);
181
- // render only items which will be visible as per this.facetsPerPage
182
- const bucketsMaxSix = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.slice((this.pageNumber - 1) * this.facetsPerPage, this.pageNumber * this.facetsPerPage);
183
- const facetBucket = bucketsMaxSix.map(bucket => {
184
- var _a, _b;
185
- let bucketKey = bucket.key;
186
- // for languages, we need to search by language code instead of the
187
- // display name, which is what we get from the search engine result
188
- if (option === 'language') {
189
- bucketKey =
190
- (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getCodeStringFromLanguageName(`${bucket.key}`)) !== null && _b !== void 0 ? _b : bucket.key;
191
- }
192
- return {
193
- displayText: `${bucket.key}`,
194
- key: `${bucketKey}`,
195
- count: bucket.doc_count,
196
- state: 'none',
197
- };
198
- });
199
- const group = {
200
- title: this.facetGroupTitle,
201
- key: option,
202
- buckets: facetBucket,
203
- };
204
- facetGroups.push(group);
205
- });
206
- return facetGroups;
207
- }
208
- /**
209
- * for collections, we need to asynchronously load the collection name
210
- * so we use the `async-collection-name` widget and for the rest, we have a static value to use
211
- *
212
- * @param castedBuckets
213
- */
214
- preloadCollectionNames(castedBuckets) {
215
- var _a;
216
- const collectionIds = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.map(option => option.key);
217
- const collectionIdsArray = Array.from(new Set(collectionIds));
218
- (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
219
- }
220
- get getMoreFacetsTemplate() {
221
- var _a;
1
+ import { __decorate } from "tslib";
2
+ /* eslint-disable dot-notation */
3
+ /* eslint-disable lit-a11y/click-events-have-key-events */
4
+ import { css, html, LitElement, nothing, } from 'lit';
5
+ import { customElement, property, state } from 'lit/decorators.js';
6
+ import { AggregationSortType, } from '@internetarchive/search-service';
7
+ import { facetTitles, } from '../models';
8
+ import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
9
+ import './more-facets-pagination';
10
+ import './facets-template';
11
+ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
12
+ constructor() {
13
+ super(...arguments);
14
+ this.sortedBy = 'count'; // count | alpha
15
+ this.facetGroup = [];
16
+ this.facetGroupTitle = '';
17
+ this.pageNumber = 1;
18
+ /**
19
+ * Facets are loading on popup
20
+ */
21
+ this.facetsLoading = true;
22
+ this.paginationSize = 0;
23
+ this.facetsType = 'modal';
24
+ this.facetsPerPage = 35;
25
+ }
26
+ updated(changed) {
27
+ if (changed.has('facetKey')) {
28
+ this.facetsLoading = true;
29
+ this.pageNumber = 1;
30
+ this.updateSpecificFacets();
31
+ }
32
+ if (changed.has('pageNumber')) {
33
+ this.facetGroup = this.aggregationFacetGroups;
34
+ }
35
+ }
36
+ firstUpdated() {
37
+ this.setupEscapeListeners();
38
+ }
39
+ /**
40
+ * Close more facets modal on Escape click
41
+ */
42
+ setupEscapeListeners() {
43
+ if (this.modalManager) {
44
+ document.addEventListener('keydown', (e) => {
45
+ var _a;
46
+ if (e.key === 'Escape') {
47
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
48
+ }
49
+ });
50
+ }
51
+ else {
52
+ document.removeEventListener('keydown', () => { });
53
+ }
54
+ }
55
+ /**
56
+ * Get specific facets data from search-service API based of currently query params
57
+ * - this.aggregations - hold result of search service and being used for further processing.
58
+ */
59
+ async updateSpecificFacets() {
60
+ var _a, _b;
61
+ const aggregations = {
62
+ simpleParams: [this.facetAggregationKey],
63
+ };
64
+ const aggregationsSize = 65535; // todo - do we want to have all the records at once?
65
+ const params = {
66
+ query: this.fullQuery,
67
+ aggregations,
68
+ aggregationsSize,
69
+ rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
70
+ };
71
+ const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
72
+ this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
73
+ this.facetGroup = this.aggregationFacetGroups;
74
+ this.facetsLoading = false;
75
+ }
76
+ pageNumberClicked(e) {
77
+ var _a;
78
+ const page = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.page;
79
+ if (page) {
80
+ this.pageNumber = Number(page);
81
+ }
82
+ }
83
+ /**
84
+ * Combines the selected facets with the aggregations to create a single list of facets
85
+ */
86
+ get mergedFacets() {
87
+ var _a;
88
+ const facetGroups = [];
89
+ const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === this.facetKey);
90
+ const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === this.facetKey);
91
+ // if the user selected a facet, but it's not in the aggregation, we add it as-is
92
+ if (selectedFacetGroup && !aggregateFacetGroup) {
93
+ facetGroups.push(selectedFacetGroup);
94
+ return facetGroups;
95
+ }
96
+ // if we don't have an aggregate facet group, don't add this to the list
97
+ if (!aggregateFacetGroup)
98
+ return facetGroups;
99
+ // start with either the selected group if we have one, or the aggregate group
100
+ const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
101
+ // attach the counts to the selected buckets
102
+ const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
103
+ const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
104
+ return selectedBucket
105
+ ? {
106
+ ...bucket,
107
+ count: selectedBucket.count,
108
+ }
109
+ : bucket;
110
+ })) !== null && _a !== void 0 ? _a : [];
111
+ // append any additional buckets that were not selected
112
+ aggregateFacetGroup.buckets.forEach(bucket => {
113
+ const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
114
+ if (existingBucket)
115
+ return;
116
+ bucketsWithCount.push(bucket);
117
+ });
118
+ facetGroup.buckets = bucketsWithCount;
119
+ facetGroups.push(facetGroup);
120
+ return facetGroups;
121
+ }
122
+ /**
123
+ * Converts the selected facets to a `FacetGroup` array,
124
+ * which is easier to work with
125
+ */
126
+ get selectedFacetGroups() {
127
+ if (!this.selectedFacets)
128
+ return [];
129
+ const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
130
+ const option = key;
131
+ const title = facetTitles[option];
132
+ const buckets = Object.entries(selectedFacets).map(([value, data]) => {
133
+ var _a, _b;
134
+ let displayText = value;
135
+ // for selected languages, we store the language code instead of the
136
+ // display name, so look up the name from the mapping
137
+ if (option === 'language') {
138
+ displayText =
139
+ (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(value)) !== null && _b !== void 0 ? _b : value;
140
+ }
141
+ return {
142
+ displayText,
143
+ key: value,
144
+ count: data === null || data === void 0 ? void 0 : data.count,
145
+ state: data === null || data === void 0 ? void 0 : data.state,
146
+ };
147
+ });
148
+ return {
149
+ title,
150
+ key: option,
151
+ buckets,
152
+ };
153
+ });
154
+ return facetGroups;
155
+ }
156
+ /**
157
+ * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
158
+ */
159
+ get aggregationFacetGroups() {
160
+ var _a;
161
+ const facetGroups = [];
162
+ Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, aggregation]) => {
163
+ // the year_histogram data is in a different format so can't be handled here
164
+ if (key === 'year_histogram')
165
+ return;
166
+ const option = key;
167
+ this.facetGroupTitle = facetTitles[option];
168
+ // sort facets in specific order
169
+ let castedBuckets = aggregation.getSortedBuckets(this.sortedBy === 'alpha'
170
+ ? AggregationSortType.ALPHABETICAL
171
+ : AggregationSortType.COUNT);
172
+ if (option === 'collection') {
173
+ // we are not showing fav- collection items in facets
174
+ castedBuckets = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.filter(bucket => { var _a; return ((_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString().startsWith('fav-')) === false; });
175
+ // asynchronously load the collection name
176
+ this.preloadCollectionNames(castedBuckets);
177
+ }
178
+ // find length and pagination size for modal pagination
179
+ const { length } = Object.keys(castedBuckets);
180
+ this.paginationSize = Math.ceil(length / this.facetsPerPage);
181
+ // render only items which will be visible as per this.facetsPerPage
182
+ const bucketsMaxSix = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.slice((this.pageNumber - 1) * this.facetsPerPage, this.pageNumber * this.facetsPerPage);
183
+ const facetBucket = bucketsMaxSix.map(bucket => {
184
+ var _a, _b;
185
+ let bucketKey = bucket.key;
186
+ // for languages, we need to search by language code instead of the
187
+ // display name, which is what we get from the search engine result
188
+ if (option === 'language') {
189
+ bucketKey =
190
+ (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getCodeStringFromLanguageName(`${bucket.key}`)) !== null && _b !== void 0 ? _b : bucket.key;
191
+ }
192
+ return {
193
+ displayText: `${bucket.key}`,
194
+ key: `${bucketKey}`,
195
+ count: bucket.doc_count,
196
+ state: 'none',
197
+ };
198
+ });
199
+ const group = {
200
+ title: this.facetGroupTitle,
201
+ key: option,
202
+ buckets: facetBucket,
203
+ };
204
+ facetGroups.push(group);
205
+ });
206
+ return facetGroups;
207
+ }
208
+ /**
209
+ * for collections, we need to asynchronously load the collection name
210
+ * so we use the `async-collection-name` widget and for the rest, we have a static value to use
211
+ *
212
+ * @param castedBuckets
213
+ */
214
+ preloadCollectionNames(castedBuckets) {
215
+ var _a;
216
+ const collectionIds = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.map(option => option.key);
217
+ const collectionIdsArray = Array.from(new Set(collectionIds));
218
+ (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
219
+ }
220
+ get getMoreFacetsTemplate() {
221
+ var _a;
222
222
  return html `
223
223
  <facets-template
224
224
  .facetGroup=${(_a = this.mergedFacets) === null || _a === void 0 ? void 0 : _a.shift()}
225
225
  .selectedFacets=${this.selectedFacets}
226
226
  .renderOn=${'modal'}
227
227
  .collectionNameCache=${this.collectionNameCache}
228
- @selectedFacetsChanged=${(e) => {
229
- this.selectedFacets = e.detail;
228
+ @selectedFacetsChanged=${(e) => {
229
+ this.selectedFacets = e.detail;
230
230
  }}
231
231
  ></facets-template>
232
- `;
233
- }
234
- get loaderTemplate() {
232
+ `;
233
+ }
234
+ get loaderTemplate() {
235
235
  return html `<div class="facets-loader">
236
236
  <ia-activity-indicator .mode=${'processing'}></ia-activity-indicator>
237
- </div> `;
238
- }
239
- // render pagination if more then 1 page
240
- get facetsPaginationTemplate() {
241
- return this.paginationSize > 1
237
+ </div> `;
238
+ }
239
+ // render pagination if more then 1 page
240
+ get facetsPaginationTemplate() {
241
+ return this.paginationSize > 1
242
242
  ? html `<more-facets-pagination
243
243
  .size=${this.paginationSize}
244
244
  .currentPage=${1}
245
245
  @pageNumberClicked=${this.pageNumberClicked}
246
- ></more-facets-pagination>`
247
- : nothing;
248
- }
249
- get footerTemplate() {
250
- if (this.paginationSize > 0) {
246
+ ></more-facets-pagination>`
247
+ : nothing;
248
+ }
249
+ get footerTemplate() {
250
+ if (this.paginationSize > 0) {
251
251
  return html `${this.facetsPaginationTemplate}
252
252
  <div class="footer">
253
253
  <button
@@ -264,19 +264,19 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
264
264
  >
265
265
  Apply filters
266
266
  </button>
267
- </div> `;
268
- }
269
- return nothing;
270
- }
271
- sortFacetAggregation() {
272
- this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';
273
- this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
274
- }
275
- get getModalHeaderTemplate() {
276
- const title = this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by alphabetically';
277
- const image = this.sortedBy === 'alpha'
278
- ? 'https://archive.org/images/filter-alpha.png'
279
- : 'https://archive.org/images/filter-count.png';
267
+ </div> `;
268
+ }
269
+ return nothing;
270
+ }
271
+ sortFacetAggregation() {
272
+ this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';
273
+ this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
274
+ }
275
+ get getModalHeaderTemplate() {
276
+ const title = this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by alphabetically';
277
+ const image = this.sortedBy === 'alpha'
278
+ ? 'https://archive.org/images/filter-alpha.png'
279
+ : 'https://archive.org/images/filter-count.png';
280
280
  return html `<span class="sr-only">More facets for:</span>
281
281
  <span class="title">
282
282
  ${this.facetGroupTitle}
@@ -288,38 +288,51 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
288
288
  title=${title}
289
289
  alt="sort facets"
290
290
  />
291
- </span> `;
292
- }
293
- render() {
291
+ </span> `;
292
+ }
293
+ render() {
294
294
  return html `
295
- ${this.facetsLoading
296
- ? this.loaderTemplate
295
+ ${this.facetsLoading
296
+ ? this.loaderTemplate
297
297
  : html `
298
- <div class="header-content">${this.getModalHeaderTemplate}</div>
299
- <div class="scrollable-content">
298
+ <section id="more-facets">
299
+ <div class="header-content">${this.getModalHeaderTemplate}</div>
300
300
  <div class="facets-content">${this.getMoreFacetsTemplate}</div>
301
- </div>
302
- ${this.footerTemplate}
301
+ ${this.footerTemplate}
302
+ </section>
303
303
  `}
304
- `;
305
- }
306
- applySearchFacetsClicked() {
307
- var _a;
308
- const event = new CustomEvent('facetsChanged', {
309
- detail: this.selectedFacets,
310
- bubbles: true,
311
- composed: true,
312
- });
313
- this.dispatchEvent(event);
314
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
315
- }
316
- cancelClick() {
317
- var _a;
318
- (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
319
- }
320
- static get styles() {
321
- const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
304
+ `;
305
+ }
306
+ applySearchFacetsClicked() {
307
+ var _a;
308
+ const event = new CustomEvent('facetsChanged', {
309
+ detail: this.selectedFacets,
310
+ bubbles: true,
311
+ composed: true,
312
+ });
313
+ this.dispatchEvent(event);
314
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
315
+ }
316
+ cancelClick() {
317
+ var _a;
318
+ (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
319
+ }
320
+ static get styles() {
321
+ const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
322
322
  return css `
323
+ @media (max-width: 560px) {
324
+ section#more-facets {
325
+ max-height: 450px;
326
+ }
327
+ .facets-content {
328
+ overflow-y: auto;
329
+ height: 300px;
330
+ }
331
+ }
332
+ section#more-facets {
333
+ overflow: auto;
334
+ padding: 10px; // leaves room for scroll bar to appear without overlaying on content
335
+ }
323
336
  .header-content .title {
324
337
  display: block;
325
338
  text-align: left;
@@ -327,13 +340,11 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
327
340
  padding: 0 10px;
328
341
  font-weight: bold;
329
342
  }
330
- .scrollable-content {
331
- overflow-y: auto;
332
- max-height: 60vh;
333
- }
334
343
  .facets-content {
335
344
  font-size: 1.2rem;
336
- margin: 10px;
345
+ max-height: 300px;
346
+ overflow: auto;
347
+ padding: 10px;
337
348
  }
338
349
  .page-number {
339
350
  background: none;
@@ -393,62 +404,62 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
393
404
  vertical-align: baseline;
394
405
  cursor: pointer;
395
406
  }
396
- `;
397
- }
398
- };
399
- __decorate([
400
- property({ type: String })
401
- ], MoreFacetsContent.prototype, "facetKey", void 0);
402
- __decorate([
403
- property({ type: String })
404
- ], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
405
- __decorate([
406
- property({ type: String })
407
- ], MoreFacetsContent.prototype, "fullQuery", void 0);
408
- __decorate([
409
- property({ type: Object })
410
- ], MoreFacetsContent.prototype, "modalManager", void 0);
411
- __decorate([
412
- property({ type: Object })
413
- ], MoreFacetsContent.prototype, "searchService", void 0);
414
- __decorate([
415
- property({ type: String })
416
- ], MoreFacetsContent.prototype, "searchType", void 0);
417
- __decorate([
418
- property({ type: Object })
419
- ], MoreFacetsContent.prototype, "collectionNameCache", void 0);
420
- __decorate([
421
- property({ type: Object })
422
- ], MoreFacetsContent.prototype, "languageCodeHandler", void 0);
423
- __decorate([
424
- property({ type: Object })
425
- ], MoreFacetsContent.prototype, "selectedFacets", void 0);
426
- __decorate([
427
- property({ type: String })
428
- ], MoreFacetsContent.prototype, "sortedBy", void 0);
429
- __decorate([
430
- state()
431
- ], MoreFacetsContent.prototype, "aggregations", void 0);
432
- __decorate([
433
- state()
434
- ], MoreFacetsContent.prototype, "facetGroup", void 0);
435
- __decorate([
436
- state()
437
- ], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
438
- __decorate([
439
- state()
440
- ], MoreFacetsContent.prototype, "pageNumber", void 0);
441
- __decorate([
442
- state()
443
- ], MoreFacetsContent.prototype, "facetsLoading", void 0);
444
- __decorate([
445
- state()
446
- ], MoreFacetsContent.prototype, "paginationSize", void 0);
447
- __decorate([
448
- state()
449
- ], MoreFacetsContent.prototype, "facetsType", void 0);
450
- MoreFacetsContent = __decorate([
451
- customElement('more-facets-content')
452
- ], MoreFacetsContent);
453
- export { MoreFacetsContent };
407
+ `;
408
+ }
409
+ };
410
+ __decorate([
411
+ property({ type: String })
412
+ ], MoreFacetsContent.prototype, "facetKey", void 0);
413
+ __decorate([
414
+ property({ type: String })
415
+ ], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
416
+ __decorate([
417
+ property({ type: String })
418
+ ], MoreFacetsContent.prototype, "fullQuery", void 0);
419
+ __decorate([
420
+ property({ type: Object })
421
+ ], MoreFacetsContent.prototype, "modalManager", void 0);
422
+ __decorate([
423
+ property({ type: Object })
424
+ ], MoreFacetsContent.prototype, "searchService", void 0);
425
+ __decorate([
426
+ property({ type: String })
427
+ ], MoreFacetsContent.prototype, "searchType", void 0);
428
+ __decorate([
429
+ property({ type: Object })
430
+ ], MoreFacetsContent.prototype, "collectionNameCache", void 0);
431
+ __decorate([
432
+ property({ type: Object })
433
+ ], MoreFacetsContent.prototype, "languageCodeHandler", void 0);
434
+ __decorate([
435
+ property({ type: Object })
436
+ ], MoreFacetsContent.prototype, "selectedFacets", void 0);
437
+ __decorate([
438
+ property({ type: String })
439
+ ], MoreFacetsContent.prototype, "sortedBy", void 0);
440
+ __decorate([
441
+ state()
442
+ ], MoreFacetsContent.prototype, "aggregations", void 0);
443
+ __decorate([
444
+ state()
445
+ ], MoreFacetsContent.prototype, "facetGroup", void 0);
446
+ __decorate([
447
+ state()
448
+ ], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
449
+ __decorate([
450
+ state()
451
+ ], MoreFacetsContent.prototype, "pageNumber", void 0);
452
+ __decorate([
453
+ state()
454
+ ], MoreFacetsContent.prototype, "facetsLoading", void 0);
455
+ __decorate([
456
+ state()
457
+ ], MoreFacetsContent.prototype, "paginationSize", void 0);
458
+ __decorate([
459
+ state()
460
+ ], MoreFacetsContent.prototype, "facetsType", void 0);
461
+ MoreFacetsContent = __decorate([
462
+ customElement('more-facets-content')
463
+ ], MoreFacetsContent);
464
+ export { MoreFacetsContent };
454
465
  //# sourceMappingURL=more-facets-content.js.map