@internetarchive/collection-browser 0.3.8 → 0.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.editorconfig +29 -29
- package/.github/workflows/ci.yml +26 -26
- package/.github/workflows/gh-pages-main.yml +39 -39
- package/.github/workflows/npm-publish.yml +39 -39
- package/.github/workflows/pr-preview.yml +38 -38
- package/.husky/pre-commit +4 -4
- package/LICENSE +661 -661
- package/README.md +83 -83
- package/dist/index.d.ts +9 -9
- package/dist/index.js +9 -9
- package/dist/src/app-root.d.ts +48 -48
- package/dist/src/app-root.js +258 -258
- package/dist/src/assets/img/icons/arrow-left.d.ts +2 -2
- package/dist/src/assets/img/icons/arrow-left.js +2 -2
- package/dist/src/assets/img/icons/arrow-right.d.ts +2 -2
- package/dist/src/assets/img/icons/arrow-right.js +2 -2
- package/dist/src/assets/img/icons/chevron.d.ts +2 -2
- package/dist/src/assets/img/icons/chevron.js +2 -2
- package/dist/src/assets/img/icons/empty-query.d.ts +2 -2
- package/dist/src/assets/img/icons/empty-query.js +2 -2
- package/dist/src/assets/img/icons/eye-closed.d.ts +2 -2
- package/dist/src/assets/img/icons/eye-closed.js +2 -2
- package/dist/src/assets/img/icons/eye.d.ts +2 -2
- package/dist/src/assets/img/icons/eye.js +2 -2
- package/dist/src/assets/img/icons/favorite-filled.d.ts +1 -1
- package/dist/src/assets/img/icons/favorite-filled.js +2 -2
- package/dist/src/assets/img/icons/login-required.d.ts +1 -1
- package/dist/src/assets/img/icons/login-required.js +2 -2
- package/dist/src/assets/img/icons/mediatype/account.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/account.js +2 -2
- package/dist/src/assets/img/icons/mediatype/audio.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/audio.js +2 -2
- package/dist/src/assets/img/icons/mediatype/collection.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/collection.js +2 -2
- package/dist/src/assets/img/icons/mediatype/data.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/data.js +2 -2
- package/dist/src/assets/img/icons/mediatype/etree.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/etree.js +2 -2
- package/dist/src/assets/img/icons/mediatype/film.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/film.js +2 -2
- package/dist/src/assets/img/icons/mediatype/images.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/images.js +2 -2
- package/dist/src/assets/img/icons/mediatype/radio.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/radio.js +2 -2
- package/dist/src/assets/img/icons/mediatype/software.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/software.js +2 -2
- package/dist/src/assets/img/icons/mediatype/texts.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/texts.js +2 -2
- package/dist/src/assets/img/icons/mediatype/tv.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/tv.js +2 -2
- package/dist/src/assets/img/icons/mediatype/video.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/video.js +2 -2
- package/dist/src/assets/img/icons/mediatype/web.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/web.js +2 -2
- package/dist/src/assets/img/icons/null-result.d.ts +2 -2
- package/dist/src/assets/img/icons/null-result.js +2 -2
- package/dist/src/assets/img/icons/restricted.d.ts +1 -1
- package/dist/src/assets/img/icons/restricted.js +2 -2
- package/dist/src/assets/img/icons/reviews.d.ts +1 -1
- package/dist/src/assets/img/icons/reviews.js +2 -2
- package/dist/src/assets/img/icons/upload.d.ts +1 -1
- package/dist/src/assets/img/icons/upload.js +2 -2
- package/dist/src/assets/img/icons/views.d.ts +1 -1
- package/dist/src/assets/img/icons/views.js +2 -2
- package/dist/src/circular-activity-indicator.d.ts +5 -5
- package/dist/src/circular-activity-indicator.js +17 -17
- package/dist/src/collection-browser.d.ts +278 -278
- package/dist/src/collection-browser.js +1105 -1105
- package/dist/src/collection-facets/facet-tombstone-row.d.ts +5 -5
- package/dist/src/collection-facets/facet-tombstone-row.js +15 -15
- package/dist/src/collection-facets/facets-template.d.ts +16 -16
- package/dist/src/collection-facets/facets-template.js +125 -125
- package/dist/src/collection-facets/more-facets-content.d.ts +76 -76
- package/dist/src/collection-facets/more-facets-content.js +353 -353
- package/dist/src/collection-facets/more-facets-pagination.d.ts +36 -36
- package/dist/src/collection-facets/more-facets-pagination.js +192 -192
- package/dist/src/collection-facets.d.ts +77 -77
- package/dist/src/collection-facets.js +388 -388
- package/dist/src/empty-placeholder.d.ts +11 -11
- package/dist/src/empty-placeholder.js +42 -42
- package/dist/src/language-code-handler/language-code-handler.d.ts +37 -37
- package/dist/src/language-code-handler/language-code-handler.js +26 -26
- package/dist/src/language-code-handler/language-code-mapping.d.ts +1 -1
- package/dist/src/language-code-handler/language-code-mapping.js +562 -562
- package/dist/src/mediatype/mediatype-config.d.ts +3 -3
- package/dist/src/mediatype/mediatype-config.js +85 -85
- package/dist/src/models.d.ts +103 -103
- package/dist/src/models.js +117 -117
- package/dist/src/restoration-state-handler.d.ts +46 -46
- package/dist/src/restoration-state-handler.js +230 -230
- package/dist/src/sort-filter-bar/alpha-bar.d.ts +9 -9
- package/dist/src/sort-filter-bar/alpha-bar.js +41 -41
- package/dist/src/sort-filter-bar/img/compact.d.ts +1 -1
- package/dist/src/sort-filter-bar/img/compact.js +2 -2
- package/dist/src/sort-filter-bar/img/list.d.ts +1 -1
- package/dist/src/sort-filter-bar/img/list.js +2 -2
- package/dist/src/sort-filter-bar/img/sort-triangle.d.ts +1 -1
- package/dist/src/sort-filter-bar/img/sort-triangle.js +2 -2
- package/dist/src/sort-filter-bar/img/tile.d.ts +1 -1
- package/dist/src/sort-filter-bar/img/tile.js +2 -2
- package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +107 -107
- package/dist/src/sort-filter-bar/sort-filter-bar.js +423 -423
- package/dist/src/styles/item-image-styles.d.ts +8 -8
- package/dist/src/styles/item-image-styles.js +9 -9
- package/dist/src/tiles/collection-browser-loading-tile.d.ts +5 -5
- package/dist/src/tiles/collection-browser-loading-tile.js +15 -15
- package/dist/src/tiles/grid/account-tile.d.ts +8 -8
- package/dist/src/tiles/grid/account-tile.js +20 -20
- package/dist/src/tiles/grid/collection-tile.d.ts +7 -7
- package/dist/src/tiles/grid/collection-tile.js +23 -23
- package/dist/src/tiles/grid/item-tile.d.ts +24 -24
- package/dist/src/tiles/grid/item-tile.js +87 -87
- package/dist/src/tiles/grid/tile-stats.d.ts +10 -10
- package/dist/src/tiles/grid/tile-stats.js +40 -40
- package/dist/src/tiles/image-block.d.ts +17 -17
- package/dist/src/tiles/image-block.js +69 -69
- package/dist/src/tiles/item-image.d.ts +31 -31
- package/dist/src/tiles/item-image.js +103 -103
- package/dist/src/tiles/list/account-label.d.ts +1 -1
- package/dist/src/tiles/list/account-label.js +6 -6
- package/dist/src/tiles/list/date-label.d.ts +1 -1
- package/dist/src/tiles/list/date-label.js +12 -12
- package/dist/src/tiles/list/tile-list-compact-header.d.ts +12 -12
- package/dist/src/tiles/list/tile-list-compact-header.js +41 -41
- package/dist/src/tiles/list/tile-list-compact.d.ts +21 -21
- package/dist/src/tiles/list/tile-list-compact.js +93 -93
- package/dist/src/tiles/list/tile-list.d.ts +50 -50
- package/dist/src/tiles/list/tile-list.js +280 -275
- package/dist/src/tiles/list/tile-list.js.map +1 -1
- package/dist/src/tiles/mediatype-icon.d.ts +9 -9
- package/dist/src/tiles/mediatype-icon.js +47 -47
- package/dist/src/tiles/overlay/icon-overlay.d.ts +7 -7
- package/dist/src/tiles/overlay/icon-overlay.js +30 -30
- package/dist/src/tiles/overlay/text-overlay.d.ts +8 -8
- package/dist/src/tiles/overlay/text-overlay.js +31 -31
- package/dist/src/tiles/text-snippet-block.d.ts +29 -29
- package/dist/src/tiles/text-snippet-block.js +81 -81
- package/dist/src/tiles/tile-dispatcher.d.ts +36 -36
- package/dist/src/tiles/tile-dispatcher.js +128 -128
- package/dist/src/utils/analytics-events.d.ts +22 -22
- package/dist/src/utils/analytics-events.js +24 -24
- package/dist/src/utils/format-count.d.ts +7 -7
- package/dist/src/utils/format-count.js +76 -76
- package/dist/src/utils/format-date.d.ts +2 -2
- package/dist/src/utils/format-date.js +23 -23
- package/dist/test/collection-browser.test.d.ts +1 -1
- package/dist/test/collection-browser.test.js +575 -575
- package/dist/test/collection-facets/facets-template.test.d.ts +1 -1
- package/dist/test/collection-facets/facets-template.test.js +62 -62
- package/dist/test/collection-facets/more-facets-content.test.d.ts +1 -1
- package/dist/test/collection-facets/more-facets-content.test.js +114 -114
- package/dist/test/collection-facets/more-facets-pagination.test.d.ts +1 -1
- package/dist/test/collection-facets/more-facets-pagination.test.js +117 -117
- package/dist/test/collection-facets.test.d.ts +2 -2
- package/dist/test/collection-facets.test.js +544 -544
- package/dist/test/empty-placeholder.test.d.ts +1 -1
- package/dist/test/empty-placeholder.test.js +33 -33
- package/dist/test/icon-overlay.test.d.ts +1 -1
- package/dist/test/icon-overlay.test.js +24 -24
- package/dist/test/image-block.test.d.ts +1 -1
- package/dist/test/image-block.test.js +48 -48
- package/dist/test/item-image.test.d.ts +1 -1
- package/dist/test/item-image.test.js +56 -56
- package/dist/test/mediatype-config.test.d.ts +1 -1
- package/dist/test/mediatype-config.test.js +16 -16
- package/dist/test/mocks/mock-analytics-handler.d.ts +10 -10
- package/dist/test/mocks/mock-analytics-handler.js +15 -15
- package/dist/test/mocks/mock-collection-name-cache.d.ts +7 -7
- package/dist/test/mocks/mock-collection-name-cache.js +13 -13
- package/dist/test/mocks/mock-search-responses.d.ts +10 -10
- package/dist/test/mocks/mock-search-responses.js +271 -271
- package/dist/test/mocks/mock-search-service.d.ts +13 -13
- package/dist/test/mocks/mock-search-service.js +36 -36
- package/dist/test/restoration-state-handler.test.d.ts +1 -1
- package/dist/test/restoration-state-handler.test.js +126 -126
- package/dist/test/sort-filter-bar/sort-filter-bar.test.d.ts +1 -1
- package/dist/test/sort-filter-bar/sort-filter-bar.test.js +113 -113
- package/dist/test/text-overlay.test.d.ts +1 -1
- package/dist/test/text-overlay.test.js +41 -41
- package/dist/test/text-snippet-block.test.d.ts +1 -1
- package/dist/test/text-snippet-block.test.js +57 -57
- package/dist/test/tile-stats.test.d.ts +1 -1
- package/dist/test/tile-stats.test.js +33 -33
- package/dist/test/tiles/grid/item-tile.test.d.ts +1 -1
- package/dist/test/tiles/grid/item-tile.test.js +107 -107
- package/dist/test/tiles/list/tile-list-compact.test.d.ts +1 -1
- package/dist/test/tiles/list/tile-list-compact.test.js +92 -92
- package/dist/test/tiles/list/tile-list.test.d.ts +1 -1
- package/dist/test/tiles/list/tile-list.test.js +136 -92
- package/dist/test/tiles/list/tile-list.test.js.map +1 -1
- package/dist/test/utils/format-count.test.d.ts +1 -1
- package/dist/test/utils/format-count.test.js +23 -23
- package/dist/test/utils/format-date.test.d.ts +1 -1
- package/dist/test/utils/format-date.test.js +17 -17
- package/index.html +24 -24
- package/local.archive.org.cert +86 -86
- package/local.archive.org.key +27 -27
- package/package.json +1 -1
- package/renovate.json +6 -6
- package/src/tiles/list/tile-list.ts +12 -5
- package/test/tiles/list/tile-list.test.ts +51 -0
- package/tsconfig.json +21 -21
- package/web-dev-server.config.mjs +30 -30
- 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,77 +1,77 @@
|
|
|
1
|
-
import { LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
2
|
-
import type { Aggregation, 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 { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
|
|
9
|
-
import { FacetOption, SelectedFacets, FacetGroup } from './models';
|
|
10
|
-
import type { LanguageCodeHandlerInterface } from './language-code-handler/language-code-handler';
|
|
11
|
-
import './collection-facets/more-facets-content';
|
|
12
|
-
import './collection-facets/facets-template';
|
|
13
|
-
import './collection-facets/facet-tombstone-row';
|
|
14
|
-
export declare class CollectionFacets extends LitElement {
|
|
15
|
-
searchService?: SearchServiceInterface;
|
|
16
|
-
searchType?: SearchType;
|
|
17
|
-
aggregations?: Record<string, Aggregation>;
|
|
18
|
-
fullYearsHistogramAggregation?: Aggregation;
|
|
19
|
-
minSelectedDate?: string;
|
|
20
|
-
maxSelectedDate?: string;
|
|
21
|
-
moreLinksVisible: boolean;
|
|
22
|
-
facetsLoading: boolean;
|
|
23
|
-
fullYearAggregationLoading: boolean;
|
|
24
|
-
selectedFacets?: SelectedFacets;
|
|
25
|
-
collapsableFacets: boolean;
|
|
26
|
-
showHistogramDatePicker: boolean;
|
|
27
|
-
fullQuery?: string;
|
|
28
|
-
modalManager?: ModalManagerInterface;
|
|
29
|
-
analyticsHandler?: AnalyticsManagerInterface;
|
|
30
|
-
languageCodeHandler?: LanguageCodeHandlerInterface;
|
|
31
|
-
collectionNameCache?: CollectionNameCacheInterface;
|
|
32
|
-
/** Fires when a facet is clicked */
|
|
33
|
-
onFacetClick?: (name: FacetOption, facetChecked: boolean, negative: boolean) => void;
|
|
34
|
-
openFacets: Record<FacetOption, boolean>;
|
|
35
|
-
/**
|
|
36
|
-
* render number of facet items
|
|
37
|
-
*/
|
|
38
|
-
private allowedFacetCount;
|
|
39
|
-
render(): TemplateResult<1>;
|
|
40
|
-
updated(changed: PropertyValues): void;
|
|
41
|
-
private dispatchFacetsChangedEvent;
|
|
42
|
-
private get currentYearsHistogramAggregation();
|
|
43
|
-
private get histogramTemplate();
|
|
44
|
-
private histogramDateRangeUpdated;
|
|
45
|
-
/**
|
|
46
|
-
* Combines the selected facets with the aggregations to create a single list of facets
|
|
47
|
-
*/
|
|
48
|
-
private get mergedFacets();
|
|
49
|
-
/**
|
|
50
|
-
* Converts the selected facets to a `FacetGroup` array,
|
|
51
|
-
* which is easier to work with
|
|
52
|
-
*/
|
|
53
|
-
private get selectedFacetGroups();
|
|
54
|
-
/**
|
|
55
|
-
* Converts the raw `aggregations` to `FacetGroups`, which are easier to use
|
|
56
|
-
*/
|
|
57
|
-
private get aggregationFacetGroups();
|
|
58
|
-
/**
|
|
59
|
-
* Generate the template for a facet group with a header and the collapsible
|
|
60
|
-
* chevron for the mobile view
|
|
61
|
-
*/
|
|
62
|
-
private getFacetGroupTemplate;
|
|
63
|
-
private getTombstoneFacetGroupTemplate;
|
|
64
|
-
private moreFacetsSortingIcon;
|
|
65
|
-
/**
|
|
66
|
-
* Generate the More... link button just below the facets group
|
|
67
|
-
*
|
|
68
|
-
* TODO: want to fire analytics?
|
|
69
|
-
*/
|
|
70
|
-
private searchMoreFacetsLink;
|
|
71
|
-
showMoreFacetsModal(facetGroup: FacetGroup, sortedBy: string): Promise<void>;
|
|
72
|
-
/**
|
|
73
|
-
* Generate the list template for each bucket in a facet group
|
|
74
|
-
*/
|
|
75
|
-
private getFacetTemplate;
|
|
76
|
-
static get styles(): import("lit").CSSResult;
|
|
77
|
-
}
|
|
1
|
+
import { LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
2
|
+
import type { Aggregation, 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 { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
|
|
9
|
+
import { FacetOption, SelectedFacets, FacetGroup } from './models';
|
|
10
|
+
import type { LanguageCodeHandlerInterface } from './language-code-handler/language-code-handler';
|
|
11
|
+
import './collection-facets/more-facets-content';
|
|
12
|
+
import './collection-facets/facets-template';
|
|
13
|
+
import './collection-facets/facet-tombstone-row';
|
|
14
|
+
export declare class CollectionFacets extends LitElement {
|
|
15
|
+
searchService?: SearchServiceInterface;
|
|
16
|
+
searchType?: SearchType;
|
|
17
|
+
aggregations?: Record<string, Aggregation>;
|
|
18
|
+
fullYearsHistogramAggregation?: Aggregation;
|
|
19
|
+
minSelectedDate?: string;
|
|
20
|
+
maxSelectedDate?: string;
|
|
21
|
+
moreLinksVisible: boolean;
|
|
22
|
+
facetsLoading: boolean;
|
|
23
|
+
fullYearAggregationLoading: boolean;
|
|
24
|
+
selectedFacets?: SelectedFacets;
|
|
25
|
+
collapsableFacets: boolean;
|
|
26
|
+
showHistogramDatePicker: boolean;
|
|
27
|
+
fullQuery?: string;
|
|
28
|
+
modalManager?: ModalManagerInterface;
|
|
29
|
+
analyticsHandler?: AnalyticsManagerInterface;
|
|
30
|
+
languageCodeHandler?: LanguageCodeHandlerInterface;
|
|
31
|
+
collectionNameCache?: CollectionNameCacheInterface;
|
|
32
|
+
/** Fires when a facet is clicked */
|
|
33
|
+
onFacetClick?: (name: FacetOption, facetChecked: boolean, negative: boolean) => void;
|
|
34
|
+
openFacets: Record<FacetOption, boolean>;
|
|
35
|
+
/**
|
|
36
|
+
* render number of facet items
|
|
37
|
+
*/
|
|
38
|
+
private allowedFacetCount;
|
|
39
|
+
render(): TemplateResult<1>;
|
|
40
|
+
updated(changed: PropertyValues): void;
|
|
41
|
+
private dispatchFacetsChangedEvent;
|
|
42
|
+
private get currentYearsHistogramAggregation();
|
|
43
|
+
private get histogramTemplate();
|
|
44
|
+
private histogramDateRangeUpdated;
|
|
45
|
+
/**
|
|
46
|
+
* Combines the selected facets with the aggregations to create a single list of facets
|
|
47
|
+
*/
|
|
48
|
+
private get mergedFacets();
|
|
49
|
+
/**
|
|
50
|
+
* Converts the selected facets to a `FacetGroup` array,
|
|
51
|
+
* which is easier to work with
|
|
52
|
+
*/
|
|
53
|
+
private get selectedFacetGroups();
|
|
54
|
+
/**
|
|
55
|
+
* Converts the raw `aggregations` to `FacetGroups`, which are easier to use
|
|
56
|
+
*/
|
|
57
|
+
private get aggregationFacetGroups();
|
|
58
|
+
/**
|
|
59
|
+
* Generate the template for a facet group with a header and the collapsible
|
|
60
|
+
* chevron for the mobile view
|
|
61
|
+
*/
|
|
62
|
+
private getFacetGroupTemplate;
|
|
63
|
+
private getTombstoneFacetGroupTemplate;
|
|
64
|
+
private moreFacetsSortingIcon;
|
|
65
|
+
/**
|
|
66
|
+
* Generate the More... link button just below the facets group
|
|
67
|
+
*
|
|
68
|
+
* TODO: want to fire analytics?
|
|
69
|
+
*/
|
|
70
|
+
private searchMoreFacetsLink;
|
|
71
|
+
showMoreFacetsModal(facetGroup: FacetGroup, sortedBy: string): Promise<void>;
|
|
72
|
+
/**
|
|
73
|
+
* Generate the list template for each bucket in a facet group
|
|
74
|
+
*/
|
|
75
|
+
private getFacetTemplate;
|
|
76
|
+
static get styles(): import("lit").CSSResult;
|
|
77
|
+
}
|