@internetarchive/collection-browser 0.4.10-alpha.3 → 0.4.11

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 (237) 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 +50 -50
  12. package/dist/src/app-root.js +278 -278
  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 +279 -279
  68. package/dist/src/collection-browser.js +1156 -1156
  69. package/dist/src/collection-facets/facet-tombstone-row.d.ts +5 -5
  70. package/dist/src/collection-facets/facet-tombstone-row.js +15 -15
  71. package/dist/src/collection-facets/facets-template.d.ts +16 -16
  72. package/dist/src/collection-facets/facets-template.js +125 -125
  73. package/dist/src/collection-facets/more-facets-content.d.ts +75 -75
  74. package/dist/src/collection-facets/more-facets-content.js +340 -340
  75. package/dist/src/collection-facets/more-facets-pagination.d.ts +36 -36
  76. package/dist/src/collection-facets/more-facets-pagination.js +192 -192
  77. package/dist/src/collection-facets.d.ts +81 -81
  78. package/dist/src/collection-facets.js +375 -375
  79. package/dist/src/empty-placeholder.d.ts +11 -11
  80. package/dist/src/empty-placeholder.js +42 -42
  81. package/dist/src/language-code-handler/language-code-handler.d.ts +37 -37
  82. package/dist/src/language-code-handler/language-code-handler.js +26 -26
  83. package/dist/src/language-code-handler/language-code-mapping.d.ts +1 -1
  84. package/dist/src/language-code-handler/language-code-mapping.js +562 -562
  85. package/dist/src/mediatype/mediatype-config.d.ts +3 -3
  86. package/dist/src/mediatype/mediatype-config.js +85 -85
  87. package/dist/src/models.d.ts +115 -115
  88. package/dist/src/models.js +125 -125
  89. package/dist/src/models.js.map +1 -1
  90. package/dist/src/restoration-state-handler.d.ts +45 -45
  91. package/dist/src/restoration-state-handler.js +230 -230
  92. package/dist/src/sort-filter-bar/alpha-bar-tooltip.d.ts +6 -6
  93. package/dist/src/sort-filter-bar/alpha-bar-tooltip.js +24 -24
  94. package/dist/src/sort-filter-bar/alpha-bar.d.ts +20 -20
  95. package/dist/src/sort-filter-bar/alpha-bar.js +136 -128
  96. package/dist/src/sort-filter-bar/alpha-bar.js.map +1 -1
  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 +108 -113
  106. package/dist/src/sort-filter-bar/sort-filter-bar.js +548 -614
  107. package/dist/src/sort-filter-bar/sort-filter-bar.js.map +1 -1
  108. package/dist/src/styles/item-image-styles.d.ts +8 -8
  109. package/dist/src/styles/item-image-styles.js +9 -9
  110. package/dist/src/tiles/collection-browser-loading-tile.d.ts +5 -5
  111. package/dist/src/tiles/collection-browser-loading-tile.js +15 -15
  112. package/dist/src/tiles/grid/account-tile.d.ts +20 -20
  113. package/dist/src/tiles/grid/account-tile.js +64 -64
  114. package/dist/src/tiles/grid/collection-tile.d.ts +17 -17
  115. package/dist/src/tiles/grid/collection-tile.js +71 -71
  116. package/dist/src/tiles/grid/item-tile.d.ts +32 -32
  117. package/dist/src/tiles/grid/item-tile.js +126 -129
  118. package/dist/src/tiles/grid/item-tile.js.map +1 -1
  119. package/dist/src/tiles/grid/styles/tile-grid-shared-styles.d.ts +1 -1
  120. package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js +7 -7
  121. package/dist/src/tiles/grid/tile-stats.d.ts +10 -10
  122. package/dist/src/tiles/grid/tile-stats.js +40 -40
  123. package/dist/src/tiles/hover/hover-pane-controller.d.ts +219 -219
  124. package/dist/src/tiles/hover/hover-pane-controller.js +352 -352
  125. package/dist/src/tiles/hover/tile-hover-pane.d.ts +15 -15
  126. package/dist/src/tiles/hover/tile-hover-pane.js +38 -38
  127. package/dist/src/tiles/image-block.d.ts +17 -17
  128. package/dist/src/tiles/image-block.js +72 -72
  129. package/dist/src/tiles/item-image.d.ts +35 -35
  130. package/dist/src/tiles/item-image.js +117 -117
  131. package/dist/src/tiles/list/account-label.d.ts +1 -1
  132. package/dist/src/tiles/list/account-label.js +6 -6
  133. package/dist/src/tiles/list/date-label.d.ts +1 -1
  134. package/dist/src/tiles/list/date-label.js +12 -12
  135. package/dist/src/tiles/list/tile-list-compact-header.d.ts +12 -12
  136. package/dist/src/tiles/list/tile-list-compact-header.js +41 -41
  137. package/dist/src/tiles/list/tile-list-compact.d.ts +21 -21
  138. package/dist/src/tiles/list/tile-list-compact.js +99 -99
  139. package/dist/src/tiles/list/tile-list.d.ts +55 -55
  140. package/dist/src/tiles/list/tile-list.js +301 -301
  141. package/dist/src/tiles/mediatype-icon.d.ts +9 -9
  142. package/dist/src/tiles/mediatype-icon.js +47 -47
  143. package/dist/src/tiles/overlay/icon-overlay.d.ts +10 -10
  144. package/dist/src/tiles/overlay/icon-overlay.js +40 -40
  145. package/dist/src/tiles/overlay/icon-text-overlay.d.ts +9 -9
  146. package/dist/src/tiles/overlay/icon-text-overlay.js +38 -38
  147. package/dist/src/tiles/overlay/text-overlay.d.ts +10 -10
  148. package/dist/src/tiles/overlay/text-overlay.js +42 -42
  149. package/dist/src/tiles/text-snippet-block.d.ts +27 -27
  150. package/dist/src/tiles/text-snippet-block.js +73 -73
  151. package/dist/src/tiles/tile-dispatcher.d.ts +58 -58
  152. package/dist/src/tiles/tile-dispatcher.js +194 -194
  153. package/dist/src/utils/analytics-events.d.ts +22 -22
  154. package/dist/src/utils/analytics-events.js +24 -24
  155. package/dist/src/utils/format-count.d.ts +7 -7
  156. package/dist/src/utils/format-count.js +76 -76
  157. package/dist/src/utils/format-date.d.ts +2 -2
  158. package/dist/src/utils/format-date.js +23 -23
  159. package/dist/src/utils/format-unit-size.d.ts +2 -2
  160. package/dist/src/utils/format-unit-size.js +33 -33
  161. package/dist/test/collection-browser.test.d.ts +1 -1
  162. package/dist/test/collection-browser.test.js +584 -584
  163. package/dist/test/collection-facets/facets-template.test.d.ts +1 -1
  164. package/dist/test/collection-facets/facets-template.test.js +62 -62
  165. package/dist/test/collection-facets/more-facets-content.test.d.ts +1 -1
  166. package/dist/test/collection-facets/more-facets-content.test.js +114 -114
  167. package/dist/test/collection-facets/more-facets-pagination.test.d.ts +1 -1
  168. package/dist/test/collection-facets/more-facets-pagination.test.js +117 -117
  169. package/dist/test/collection-facets.test.d.ts +2 -2
  170. package/dist/test/collection-facets.test.js +460 -460
  171. package/dist/test/empty-placeholder.test.d.ts +1 -1
  172. package/dist/test/empty-placeholder.test.js +33 -33
  173. package/dist/test/icon-overlay.test.d.ts +1 -1
  174. package/dist/test/icon-overlay.test.js +24 -24
  175. package/dist/test/image-block.test.d.ts +1 -1
  176. package/dist/test/image-block.test.js +48 -48
  177. package/dist/test/item-image.test.d.ts +1 -1
  178. package/dist/test/item-image.test.js +84 -84
  179. package/dist/test/mediatype-config.test.d.ts +1 -1
  180. package/dist/test/mediatype-config.test.js +16 -16
  181. package/dist/test/mocks/mock-analytics-handler.d.ts +10 -10
  182. package/dist/test/mocks/mock-analytics-handler.js +15 -15
  183. package/dist/test/mocks/mock-collection-name-cache.d.ts +7 -7
  184. package/dist/test/mocks/mock-collection-name-cache.js +13 -13
  185. package/dist/test/mocks/mock-search-responses.d.ts +12 -12
  186. package/dist/test/mocks/mock-search-responses.js +341 -341
  187. package/dist/test/mocks/mock-search-service.d.ts +13 -13
  188. package/dist/test/mocks/mock-search-service.js +40 -40
  189. package/dist/test/restoration-state-handler.test.d.ts +1 -1
  190. package/dist/test/restoration-state-handler.test.js +125 -125
  191. package/dist/test/sort-filter-bar/alpha-bar-tooltip.test.d.ts +1 -1
  192. package/dist/test/sort-filter-bar/alpha-bar-tooltip.test.js +12 -12
  193. package/dist/test/sort-filter-bar/alpha-bar.test.d.ts +1 -1
  194. package/dist/test/sort-filter-bar/alpha-bar.test.js +73 -73
  195. package/dist/test/sort-filter-bar/sort-filter-bar.test.d.ts +1 -1
  196. package/dist/test/sort-filter-bar/sort-filter-bar.test.js +197 -208
  197. package/dist/test/sort-filter-bar/sort-filter-bar.test.js.map +1 -1
  198. package/dist/test/text-overlay.test.d.ts +1 -1
  199. package/dist/test/text-overlay.test.js +48 -48
  200. package/dist/test/text-snippet-block.test.d.ts +1 -1
  201. package/dist/test/text-snippet-block.test.js +57 -57
  202. package/dist/test/tile-stats.test.d.ts +1 -1
  203. package/dist/test/tile-stats.test.js +33 -33
  204. package/dist/test/tiles/grid/account-tile.test.d.ts +1 -1
  205. package/dist/test/tiles/grid/account-tile.test.js +76 -76
  206. package/dist/test/tiles/grid/collection-tile.test.d.ts +1 -1
  207. package/dist/test/tiles/grid/collection-tile.test.js +73 -73
  208. package/dist/test/tiles/grid/item-tile.test.d.ts +1 -1
  209. package/dist/test/tiles/grid/item-tile.test.js +158 -158
  210. package/dist/test/tiles/hover/hover-pane-controller.test.d.ts +1 -1
  211. package/dist/test/tiles/hover/hover-pane-controller.test.js +257 -257
  212. package/dist/test/tiles/hover/tile-hover-pane.test.d.ts +1 -1
  213. package/dist/test/tiles/hover/tile-hover-pane.test.js +13 -13
  214. package/dist/test/tiles/list/tile-list-compact.test.d.ts +1 -1
  215. package/dist/test/tiles/list/tile-list-compact.test.js +92 -92
  216. package/dist/test/tiles/list/tile-list.test.d.ts +1 -1
  217. package/dist/test/tiles/list/tile-list.test.js +163 -163
  218. package/dist/test/tiles/tile-dispatcher.test.d.ts +1 -1
  219. package/dist/test/tiles/tile-dispatcher.test.js +67 -67
  220. package/dist/test/utils/format-count.test.d.ts +1 -1
  221. package/dist/test/utils/format-count.test.js +23 -23
  222. package/dist/test/utils/format-date.test.d.ts +1 -1
  223. package/dist/test/utils/format-date.test.js +17 -17
  224. package/dist/test/utils/format-unit-size.test.d.ts +1 -1
  225. package/dist/test/utils/format-unit-size.test.js +17 -17
  226. package/local.archive.org.cert +86 -86
  227. package/local.archive.org.key +27 -27
  228. package/package.json +3 -4
  229. package/renovate.json +6 -6
  230. package/src/models.ts +6 -6
  231. package/src/sort-filter-bar/alpha-bar.ts +8 -0
  232. package/src/sort-filter-bar/sort-filter-bar.ts +197 -283
  233. package/src/tiles/grid/item-tile.ts +1 -5
  234. package/test/sort-filter-bar/sort-filter-bar.test.ts +39 -56
  235. package/tsconfig.json +21 -21
  236. package/web-dev-server.config.mjs +30 -30
  237. package/web-test-runner.config.mjs +41 -41
@@ -1,36 +1,36 @@
1
- import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
2
- export declare class MoreFacetsPagination extends LitElement {
3
- /**
4
- * Total number of pages
5
- */
6
- size: number;
7
- /**
8
- * Number of pages can be moved in back/forward
9
- */
10
- step: number;
11
- currentPage: number;
12
- pages?: number[];
13
- firstUpdated(): void;
14
- updated(changed: Map<string, any>): void;
15
- /** creates `this.pages` array that notes which pages to draw
16
- * - `0` is elipses marker
17
- * - rule: selected page is centered between -2/+2 pages
18
- * - outlier: first page selected, show _1_ 2 3 ... N
19
- * - outlier: second page selected, show 1 _2_ 3 4 ... N
20
- * - outlier: last page selected, show 1 ... N-2 N-1 _N_
21
- * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages
22
- */
23
- observePageCount(): void;
24
- private createFirstNode;
25
- private createMiddelNode;
26
- private createLastNode;
27
- private get getEllipsisTemplate();
28
- emitPageClick(): void;
29
- private onRewind;
30
- private onForward;
31
- private onChange;
32
- private getPageTemplate;
33
- private get getPagesTemplate();
34
- render(): TemplateResult<1>;
35
- static get styles(): CSSResultGroup;
36
- }
1
+ import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
2
+ export declare class MoreFacetsPagination extends LitElement {
3
+ /**
4
+ * Total number of pages
5
+ */
6
+ size: number;
7
+ /**
8
+ * Number of pages can be moved in back/forward
9
+ */
10
+ step: number;
11
+ currentPage: number;
12
+ pages?: number[];
13
+ firstUpdated(): void;
14
+ updated(changed: Map<string, any>): void;
15
+ /** creates `this.pages` array that notes which pages to draw
16
+ * - `0` is elipses marker
17
+ * - rule: selected page is centered between -2/+2 pages
18
+ * - outlier: first page selected, show _1_ 2 3 ... N
19
+ * - outlier: second page selected, show 1 _2_ 3 4 ... N
20
+ * - outlier: last page selected, show 1 ... N-2 N-1 _N_
21
+ * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages
22
+ */
23
+ observePageCount(): void;
24
+ private createFirstNode;
25
+ private createMiddelNode;
26
+ private createLastNode;
27
+ private get getEllipsisTemplate();
28
+ emitPageClick(): void;
29
+ private onRewind;
30
+ private onForward;
31
+ private onChange;
32
+ private getPageTemplate;
33
+ private get getPagesTemplate();
34
+ render(): TemplateResult<1>;
35
+ static get styles(): CSSResultGroup;
36
+ }
@@ -1,161 +1,161 @@
1
- import { __decorate } from "tslib";
2
- import { css, html, LitElement, nothing, } from 'lit';
3
- import { customElement, property, state } from 'lit/decorators.js';
4
- import arrowLeftIcon from '../assets/img/icons/arrow-left';
5
- import arrowRightIcon from '../assets/img/icons/arrow-right';
6
- let MoreFacetsPagination = class MoreFacetsPagination extends LitElement {
7
- constructor() {
8
- super(...arguments);
9
- /**
10
- * Number of pages can be moved in back/forward
11
- */
12
- this.step = 2;
13
- this.currentPage = 1;
14
- this.pages = [];
15
- }
16
- firstUpdated() {
17
- this.observePageCount();
18
- }
19
- updated(changed) {
20
- if (changed.has('size')) {
21
- this.observePageCount();
22
- }
23
- if (changed.has('currentPage')) {
24
- this.observePageCount();
25
- this.emitPageClick();
26
- }
27
- }
28
- /** creates `this.pages` array that notes which pages to draw
29
- * - `0` is elipses marker
30
- * - rule: selected page is centered between -2/+2 pages
31
- * - outlier: first page selected, show _1_ 2 3 ... N
32
- * - outlier: second page selected, show 1 _2_ 3 4 ... N
33
- * - outlier: last page selected, show 1 ... N-2 N-1 _N_
34
- * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages
35
- */
36
- observePageCount() {
37
- this.pages = []; /* `0` is elipses marker */
38
- const paginatorMaxPagesToShow = 7;
39
- const atMinThreshold = this.size <= paginatorMaxPagesToShow;
40
- /** Display outliers */
41
- if (this.size <= 5) {
42
- // display all pages
43
- this.pages = [...Array(this.size).keys()].map(i => i + 1);
44
- return;
45
- }
46
- if (this.size === paginatorMaxPagesToShow) {
47
- // edge: 7 pages
48
- if (this.currentPage === 2) {
49
- this.pages = [1, 2, 3, 4, 0, this.size];
50
- return;
51
- }
52
- if (this.currentPage === this.size - 1) {
53
- this.pages = [1, 0, 4, 5, this.size - 1, this.size];
54
- return;
55
- }
56
- }
57
- if (this.currentPage === 1) {
58
- // first page
59
- this.pages = [1, 2, 3, 0, this.size];
60
- return;
61
- }
62
- if (this.currentPage === this.size) {
63
- // last page
64
- this.pages = [1, 0, this.size - 2, this.size - 1, this.size];
65
- return;
66
- }
67
- if (this.currentPage === this.size - 1) {
68
- // second last page
69
- this.pages = [
70
- 1,
71
- 0,
72
- this.size - 3,
73
- this.size - 2,
74
- this.size - 1,
75
- this.size,
76
- ];
77
- return;
78
- }
79
- if (atMinThreshold &&
80
- this.currentPage > 1 &&
81
- this.currentPage < paginatorMaxPagesToShow) {
82
- this.pages = [...Array(this.size).keys()].map(i => i + 1);
83
- return;
84
- }
85
- /* The rest here calculates the range to display in "page window" */
86
- let startPage = this.currentPage - this.step;
87
- let endPage = this.currentPage + this.step;
88
- if (startPage <= 0) {
89
- endPage += -startPage + 1;
90
- startPage = 1;
91
- }
92
- if (endPage >= this.size) {
93
- startPage = Math.max(startPage - (endPage - this.size), 1);
94
- endPage = this.size;
95
- }
96
- if (startPage === 2) {
97
- endPage -= 1;
98
- }
99
- if (endPage === this.size - 1) {
100
- startPage += 1;
101
- }
102
- // create first page node
103
- this.createFirstNode(startPage);
104
- // create middle pages node
105
- this.createMiddelNode(startPage, endPage);
106
- // create last page node
107
- this.createLastNode(endPage);
108
- }
109
- createFirstNode(startPage) {
110
- var _a, _b;
111
- if (startPage > 1) {
112
- (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(1);
113
- }
114
- if (startPage > 2) {
115
- (_b = this.pages) === null || _b === void 0 ? void 0 : _b.push(0); // let's asssume 0 is for ellipsis template
116
- }
117
- }
118
- createMiddelNode(startPage, endPage) {
119
- var _a;
120
- for (let page = startPage; page <= endPage; page += 1) {
121
- (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(page);
122
- }
123
- }
124
- createLastNode(endPage) {
125
- var _a, _b;
126
- if (endPage < this.size - 1) {
127
- (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(0); // let's asssume 0 is for ellipsis template
128
- }
129
- if (endPage < this.size) {
130
- (_b = this.pages) === null || _b === void 0 ? void 0 : _b.push(this.size);
131
- }
132
- }
133
- get getEllipsisTemplate() {
134
- return html `<i class="ellipses">...</i>`;
135
- }
136
- emitPageClick() {
137
- this.dispatchEvent(new CustomEvent('pageNumberClicked', {
138
- detail: { page: this.currentPage },
139
- bubbles: true,
140
- composed: true,
141
- }));
142
- }
143
- onRewind() {
144
- this.currentPage -= 1;
145
- if (this.currentPage < 1) {
146
- this.currentPage = 1;
147
- }
148
- }
149
- onForward() {
150
- this.currentPage += 1;
151
- if (this.currentPage > this.size) {
152
- this.currentPage = this.size;
153
- }
154
- }
155
- onChange(page) {
156
- this.currentPage = page;
157
- }
158
- getPageTemplate(page) {
1
+ import { __decorate } from "tslib";
2
+ import { css, html, LitElement, nothing, } from 'lit';
3
+ import { customElement, property, state } from 'lit/decorators.js';
4
+ import arrowLeftIcon from '../assets/img/icons/arrow-left';
5
+ import arrowRightIcon from '../assets/img/icons/arrow-right';
6
+ let MoreFacetsPagination = class MoreFacetsPagination extends LitElement {
7
+ constructor() {
8
+ super(...arguments);
9
+ /**
10
+ * Number of pages can be moved in back/forward
11
+ */
12
+ this.step = 2;
13
+ this.currentPage = 1;
14
+ this.pages = [];
15
+ }
16
+ firstUpdated() {
17
+ this.observePageCount();
18
+ }
19
+ updated(changed) {
20
+ if (changed.has('size')) {
21
+ this.observePageCount();
22
+ }
23
+ if (changed.has('currentPage')) {
24
+ this.observePageCount();
25
+ this.emitPageClick();
26
+ }
27
+ }
28
+ /** creates `this.pages` array that notes which pages to draw
29
+ * - `0` is elipses marker
30
+ * - rule: selected page is centered between -2/+2 pages
31
+ * - outlier: first page selected, show _1_ 2 3 ... N
32
+ * - outlier: second page selected, show 1 _2_ 3 4 ... N
33
+ * - outlier: last page selected, show 1 ... N-2 N-1 _N_
34
+ * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages
35
+ */
36
+ observePageCount() {
37
+ this.pages = []; /* `0` is elipses marker */
38
+ const paginatorMaxPagesToShow = 7;
39
+ const atMinThreshold = this.size <= paginatorMaxPagesToShow;
40
+ /** Display outliers */
41
+ if (this.size <= 5) {
42
+ // display all pages
43
+ this.pages = [...Array(this.size).keys()].map(i => i + 1);
44
+ return;
45
+ }
46
+ if (this.size === paginatorMaxPagesToShow) {
47
+ // edge: 7 pages
48
+ if (this.currentPage === 2) {
49
+ this.pages = [1, 2, 3, 4, 0, this.size];
50
+ return;
51
+ }
52
+ if (this.currentPage === this.size - 1) {
53
+ this.pages = [1, 0, 4, 5, this.size - 1, this.size];
54
+ return;
55
+ }
56
+ }
57
+ if (this.currentPage === 1) {
58
+ // first page
59
+ this.pages = [1, 2, 3, 0, this.size];
60
+ return;
61
+ }
62
+ if (this.currentPage === this.size) {
63
+ // last page
64
+ this.pages = [1, 0, this.size - 2, this.size - 1, this.size];
65
+ return;
66
+ }
67
+ if (this.currentPage === this.size - 1) {
68
+ // second last page
69
+ this.pages = [
70
+ 1,
71
+ 0,
72
+ this.size - 3,
73
+ this.size - 2,
74
+ this.size - 1,
75
+ this.size,
76
+ ];
77
+ return;
78
+ }
79
+ if (atMinThreshold &&
80
+ this.currentPage > 1 &&
81
+ this.currentPage < paginatorMaxPagesToShow) {
82
+ this.pages = [...Array(this.size).keys()].map(i => i + 1);
83
+ return;
84
+ }
85
+ /* The rest here calculates the range to display in "page window" */
86
+ let startPage = this.currentPage - this.step;
87
+ let endPage = this.currentPage + this.step;
88
+ if (startPage <= 0) {
89
+ endPage += -startPage + 1;
90
+ startPage = 1;
91
+ }
92
+ if (endPage >= this.size) {
93
+ startPage = Math.max(startPage - (endPage - this.size), 1);
94
+ endPage = this.size;
95
+ }
96
+ if (startPage === 2) {
97
+ endPage -= 1;
98
+ }
99
+ if (endPage === this.size - 1) {
100
+ startPage += 1;
101
+ }
102
+ // create first page node
103
+ this.createFirstNode(startPage);
104
+ // create middle pages node
105
+ this.createMiddelNode(startPage, endPage);
106
+ // create last page node
107
+ this.createLastNode(endPage);
108
+ }
109
+ createFirstNode(startPage) {
110
+ var _a, _b;
111
+ if (startPage > 1) {
112
+ (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(1);
113
+ }
114
+ if (startPage > 2) {
115
+ (_b = this.pages) === null || _b === void 0 ? void 0 : _b.push(0); // let's asssume 0 is for ellipsis template
116
+ }
117
+ }
118
+ createMiddelNode(startPage, endPage) {
119
+ var _a;
120
+ for (let page = startPage; page <= endPage; page += 1) {
121
+ (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(page);
122
+ }
123
+ }
124
+ createLastNode(endPage) {
125
+ var _a, _b;
126
+ if (endPage < this.size - 1) {
127
+ (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(0); // let's asssume 0 is for ellipsis template
128
+ }
129
+ if (endPage < this.size) {
130
+ (_b = this.pages) === null || _b === void 0 ? void 0 : _b.push(this.size);
131
+ }
132
+ }
133
+ get getEllipsisTemplate() {
134
+ return html `<i class="ellipses">...</i>`;
135
+ }
136
+ emitPageClick() {
137
+ this.dispatchEvent(new CustomEvent('pageNumberClicked', {
138
+ detail: { page: this.currentPage },
139
+ bubbles: true,
140
+ composed: true,
141
+ }));
142
+ }
143
+ onRewind() {
144
+ this.currentPage -= 1;
145
+ if (this.currentPage < 1) {
146
+ this.currentPage = 1;
147
+ }
148
+ }
149
+ onForward() {
150
+ this.currentPage += 1;
151
+ if (this.currentPage > this.size) {
152
+ this.currentPage = this.size;
153
+ }
154
+ }
155
+ onChange(page) {
156
+ this.currentPage = page;
157
+ }
158
+ getPageTemplate(page) {
159
159
  return html `
160
160
  <button
161
161
  @click=${() => this.onChange(page)}
@@ -164,20 +164,20 @@ let MoreFacetsPagination = class MoreFacetsPagination extends LitElement {
164
164
  >
165
165
  ${page}
166
166
  </button>
167
- `;
168
- }
169
- get getPagesTemplate() {
170
- var _a;
171
- if (!this.pages || !this.pages.length) {
172
- return nothing;
173
- }
167
+ `;
168
+ }
169
+ get getPagesTemplate() {
170
+ var _a;
171
+ if (!this.pages || !this.pages.length) {
172
+ return nothing;
173
+ }
174
174
  return html `
175
- ${(_a = this.pages) === null || _a === void 0 ? void 0 : _a.map(page => html `${page !== 0
176
- ? this.getPageTemplate(page)
175
+ ${(_a = this.pages) === null || _a === void 0 ? void 0 : _a.map(page => html `${page !== 0
176
+ ? this.getPageTemplate(page)
177
177
  : this.getEllipsisTemplate}`)}
178
- `;
179
- }
180
- render() {
178
+ `;
179
+ }
180
+ render() {
181
181
  return html `
182
182
  <div class="facets-pagination">
183
183
  <button class="arrow-icon rewind" @click=${this.onRewind}>
@@ -190,9 +190,9 @@ let MoreFacetsPagination = class MoreFacetsPagination extends LitElement {
190
190
  ${arrowRightIcon}
191
191
  </button>
192
192
  </div>
193
- `;
194
- }
195
- static get styles() {
193
+ `;
194
+ }
195
+ static get styles() {
196
196
  return css `
197
197
  .facets-pagination {
198
198
  user-select: none;
@@ -245,23 +245,23 @@ let MoreFacetsPagination = class MoreFacetsPagination extends LitElement {
245
245
  clip: rect(0, 0, 0, 0);
246
246
  border: 0;
247
247
  }
248
- `;
249
- }
250
- };
251
- __decorate([
252
- property({ type: Number })
253
- ], MoreFacetsPagination.prototype, "size", void 0);
254
- __decorate([
255
- property({ type: Number })
256
- ], MoreFacetsPagination.prototype, "step", void 0);
257
- __decorate([
258
- property({ type: Number })
259
- ], MoreFacetsPagination.prototype, "currentPage", void 0);
260
- __decorate([
261
- state()
262
- ], MoreFacetsPagination.prototype, "pages", void 0);
263
- MoreFacetsPagination = __decorate([
264
- customElement('more-facets-pagination')
265
- ], MoreFacetsPagination);
266
- export { MoreFacetsPagination };
248
+ `;
249
+ }
250
+ };
251
+ __decorate([
252
+ property({ type: Number })
253
+ ], MoreFacetsPagination.prototype, "size", void 0);
254
+ __decorate([
255
+ property({ type: Number })
256
+ ], MoreFacetsPagination.prototype, "step", void 0);
257
+ __decorate([
258
+ property({ type: Number })
259
+ ], MoreFacetsPagination.prototype, "currentPage", void 0);
260
+ __decorate([
261
+ state()
262
+ ], MoreFacetsPagination.prototype, "pages", void 0);
263
+ MoreFacetsPagination = __decorate([
264
+ customElement('more-facets-pagination')
265
+ ], MoreFacetsPagination);
266
+ export { MoreFacetsPagination };
267
267
  //# sourceMappingURL=more-facets-pagination.js.map
@@ -1,81 +1,81 @@
1
- import { LitElement, PropertyValues, TemplateResult } from 'lit';
2
- import type { Aggregation, FilterMap, SearchServiceInterface, SearchType } from '@internetarchive/search-service';
3
- import '@internetarchive/histogram-date-range';
4
- import '@internetarchive/feature-feedback';
5
- import '@internetarchive/collection-name-cache';
6
- import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
7
- import { ModalManagerInterface } from '@internetarchive/modal-manager';
8
- import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';
9
- import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
10
- import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
11
- import type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
12
- import { FacetOption, SelectedFacets, FacetGroup } from './models';
13
- import './collection-facets/more-facets-content';
14
- import './collection-facets/facets-template';
15
- import './collection-facets/facet-tombstone-row';
16
- export declare class CollectionFacets extends LitElement {
17
- searchService?: SearchServiceInterface;
18
- searchType?: SearchType;
19
- aggregations?: Record<string, Aggregation>;
20
- fullYearsHistogramAggregation?: Aggregation;
21
- minSelectedDate?: string;
22
- maxSelectedDate?: string;
23
- moreLinksVisible: boolean;
24
- facetsLoading: boolean;
25
- fullYearAggregationLoading: boolean;
26
- selectedFacets?: SelectedFacets;
27
- collapsableFacets: boolean;
28
- showHistogramDatePicker: boolean;
29
- query?: string;
30
- filterMap?: FilterMap;
31
- modalManager?: ModalManagerInterface;
32
- resizeObserver?: SharedResizeObserverInterface;
33
- featureFeedbackService?: FeatureFeedbackServiceInterface;
34
- recaptchaManager?: RecaptchaManagerInterface;
35
- analyticsHandler?: AnalyticsManagerInterface;
36
- collectionNameCache?: CollectionNameCacheInterface;
37
- /** Fires when a facet is clicked */
38
- onFacetClick?: (name: FacetOption, facetChecked: boolean, negative: boolean) => void;
39
- openFacets: Record<FacetOption, boolean>;
40
- /**
41
- * Maximum # of facet buckets to render per facet group
42
- */
43
- private allowedFacetCount;
44
- render(): TemplateResult<1>;
45
- updated(changed: PropertyValues): void;
46
- private dispatchFacetsChangedEvent;
47
- private get currentYearsHistogramAggregation();
48
- private get histogramTemplate();
49
- private histogramDateRangeUpdated;
50
- /**
51
- * Combines the selected facets with the aggregations to create a single list of facets
52
- */
53
- private get mergedFacets();
54
- /**
55
- * Converts the selected facets to a `FacetGroup` array,
56
- * which is easier to work with
57
- */
58
- private get selectedFacetGroups();
59
- /**
60
- * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
61
- */
62
- private get aggregationFacetGroups();
63
- /**
64
- * Generate the template for a facet group with a header and the collapsible
65
- * chevron for the mobile view
66
- */
67
- private getFacetGroupTemplate;
68
- private getTombstoneFacetGroupTemplate;
69
- /**
70
- * Generate the More... link button just below the facets group
71
- *
72
- * TODO: want to fire analytics?
73
- */
74
- private searchMoreFacetsLink;
75
- showMoreFacetsModal(facetGroup: FacetGroup, sortedBy: string): Promise<void>;
76
- /**
77
- * Generate the list template for each bucket in a facet group
78
- */
79
- private getFacetTemplate;
80
- static get styles(): import("lit").CSSResult;
81
- }
1
+ import { LitElement, PropertyValues, TemplateResult } from 'lit';
2
+ import type { Aggregation, FilterMap, SearchServiceInterface, SearchType } from '@internetarchive/search-service';
3
+ import '@internetarchive/histogram-date-range';
4
+ import '@internetarchive/feature-feedback';
5
+ import '@internetarchive/collection-name-cache';
6
+ import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
7
+ import { ModalManagerInterface } from '@internetarchive/modal-manager';
8
+ import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';
9
+ import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
10
+ import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
11
+ import type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
12
+ import { FacetOption, SelectedFacets, FacetGroup } from './models';
13
+ import './collection-facets/more-facets-content';
14
+ import './collection-facets/facets-template';
15
+ import './collection-facets/facet-tombstone-row';
16
+ export declare class CollectionFacets extends LitElement {
17
+ searchService?: SearchServiceInterface;
18
+ searchType?: SearchType;
19
+ aggregations?: Record<string, Aggregation>;
20
+ fullYearsHistogramAggregation?: Aggregation;
21
+ minSelectedDate?: string;
22
+ maxSelectedDate?: string;
23
+ moreLinksVisible: boolean;
24
+ facetsLoading: boolean;
25
+ fullYearAggregationLoading: boolean;
26
+ selectedFacets?: SelectedFacets;
27
+ collapsableFacets: boolean;
28
+ showHistogramDatePicker: boolean;
29
+ query?: string;
30
+ filterMap?: FilterMap;
31
+ modalManager?: ModalManagerInterface;
32
+ resizeObserver?: SharedResizeObserverInterface;
33
+ featureFeedbackService?: FeatureFeedbackServiceInterface;
34
+ recaptchaManager?: RecaptchaManagerInterface;
35
+ analyticsHandler?: AnalyticsManagerInterface;
36
+ collectionNameCache?: CollectionNameCacheInterface;
37
+ /** Fires when a facet is clicked */
38
+ onFacetClick?: (name: FacetOption, facetChecked: boolean, negative: boolean) => void;
39
+ openFacets: Record<FacetOption, boolean>;
40
+ /**
41
+ * Maximum # of facet buckets to render per facet group
42
+ */
43
+ private allowedFacetCount;
44
+ render(): TemplateResult<1>;
45
+ updated(changed: PropertyValues): void;
46
+ private dispatchFacetsChangedEvent;
47
+ private get currentYearsHistogramAggregation();
48
+ private get histogramTemplate();
49
+ private histogramDateRangeUpdated;
50
+ /**
51
+ * Combines the selected facets with the aggregations to create a single list of facets
52
+ */
53
+ private get mergedFacets();
54
+ /**
55
+ * Converts the selected facets to a `FacetGroup` array,
56
+ * which is easier to work with
57
+ */
58
+ private get selectedFacetGroups();
59
+ /**
60
+ * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
61
+ */
62
+ private get aggregationFacetGroups();
63
+ /**
64
+ * Generate the template for a facet group with a header and the collapsible
65
+ * chevron for the mobile view
66
+ */
67
+ private getFacetGroupTemplate;
68
+ private getTombstoneFacetGroupTemplate;
69
+ /**
70
+ * Generate the More... link button just below the facets group
71
+ *
72
+ * TODO: want to fire analytics?
73
+ */
74
+ private searchMoreFacetsLink;
75
+ showMoreFacetsModal(facetGroup: FacetGroup, sortedBy: string): Promise<void>;
76
+ /**
77
+ * Generate the list template for each bucket in a facet group
78
+ */
79
+ private getFacetTemplate;
80
+ static get styles(): import("lit").CSSResult;
81
+ }