@internetarchive/collection-browser 0.0.1-alpha.2 → 0.0.1-alpha.22
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/demo/app-root.ts +24 -158
- package/dist/demo/app-root.d.ts +2 -16
- package/dist/demo/app-root.js +23 -141
- package/dist/demo/app-root.js.map +1 -1
- package/dist/src/assets/img/icons/chevron.d.ts +2 -0
- package/dist/src/assets/img/icons/chevron.js +4 -0
- package/dist/src/assets/img/icons/chevron.js.map +1 -0
- package/dist/src/assets/img/icons/eye-closed.d.ts +2 -0
- package/dist/src/assets/img/icons/eye-closed.js +5 -0
- package/dist/src/assets/img/icons/eye-closed.js.map +1 -0
- package/dist/src/assets/img/icons/eye.d.ts +2 -0
- package/dist/src/assets/img/icons/eye.js +5 -0
- package/dist/src/assets/img/icons/eye.js.map +1 -0
- package/dist/src/assets/img/icons/mediatype/account.d.ts +1 -2
- package/dist/src/assets/img/icons/mediatype/account.js +5 -4
- package/dist/src/assets/img/icons/mediatype/account.js.map +1 -1
- package/dist/src/assets/img/icons/mediatype/audio.js +7 -4
- package/dist/src/assets/img/icons/mediatype/audio.js.map +1 -1
- package/dist/src/assets/img/icons/mediatype/collection.js +7 -4
- package/dist/src/assets/img/icons/mediatype/collection.js.map +1 -1
- package/dist/src/assets/img/icons/mediatype/etree.js +10 -5
- package/dist/src/assets/img/icons/mediatype/etree.js.map +1 -1
- package/dist/src/assets/img/icons/mediatype/film.js +2 -1
- package/dist/src/assets/img/icons/mediatype/film.js.map +1 -1
- package/dist/src/assets/img/icons/mediatype/images.js +9 -6
- package/dist/src/assets/img/icons/mediatype/images.js.map +1 -1
- package/dist/src/assets/img/icons/mediatype/software.js +9 -6
- package/dist/src/assets/img/icons/mediatype/software.js.map +1 -1
- package/dist/src/assets/img/icons/mediatype/texts.js +9 -6
- package/dist/src/assets/img/icons/mediatype/texts.js.map +1 -1
- package/dist/src/assets/img/icons/mediatype/tv.js +10 -5
- package/dist/src/assets/img/icons/mediatype/tv.js.map +1 -1
- package/dist/src/assets/img/icons/mediatype/video.js +10 -6
- package/dist/src/assets/img/icons/mediatype/video.js.map +1 -1
- package/dist/src/assets/img/icons/mediatype/web.js +9 -6
- package/dist/src/assets/img/icons/mediatype/web.js.map +1 -1
- package/dist/src/async-collection-name.d.ts +11 -0
- package/dist/src/async-collection-name.js +38 -0
- package/dist/src/async-collection-name.js.map +1 -0
- package/dist/src/collection-browser.d.ts +55 -17
- package/dist/src/collection-browser.js +466 -106
- package/dist/src/collection-browser.js.map +1 -1
- package/dist/src/collection-facets.d.ts +24 -5
- package/dist/src/collection-facets.js +300 -78
- package/dist/src/collection-facets.js.map +1 -1
- package/dist/src/collection-name-cache.d.ts +18 -0
- package/dist/src/collection-name-cache.js +89 -0
- package/dist/src/collection-name-cache.js.map +1 -0
- package/dist/src/mediatype-icon.js +10 -3
- package/dist/src/mediatype-icon.js.map +1 -1
- package/dist/src/models.d.ts +72 -14
- package/dist/src/models.js +57 -1
- package/dist/src/models.js.map +1 -1
- package/dist/src/restoration-state-handler.d.ts +37 -0
- package/dist/src/restoration-state-handler.js +177 -0
- package/dist/src/restoration-state-handler.js.map +1 -0
- package/dist/src/sort-filter-bar/alpha-bar.d.ts +1 -2
- package/dist/src/sort-filter-bar/alpha-bar.js +19 -9
- package/dist/src/sort-filter-bar/alpha-bar.js.map +1 -1
- package/dist/src/sort-filter-bar/img/compact.d.ts +1 -0
- package/dist/src/sort-filter-bar/img/compact.js +5 -0
- package/dist/src/sort-filter-bar/img/compact.js.map +1 -0
- package/dist/src/sort-filter-bar/img/grid.d.ts +1 -0
- package/dist/src/sort-filter-bar/img/grid.js +5 -0
- package/dist/src/sort-filter-bar/img/grid.js.map +1 -0
- package/dist/src/sort-filter-bar/img/list.d.ts +1 -0
- package/dist/src/sort-filter-bar/img/list.js +5 -0
- package/dist/src/sort-filter-bar/img/list.js.map +1 -0
- package/dist/src/sort-filter-bar/img/sort-triangle.d.ts +1 -0
- package/dist/src/sort-filter-bar/img/sort-triangle.js +5 -0
- package/dist/src/sort-filter-bar/img/sort-triangle.js.map +1 -0
- package/dist/src/sort-filter-bar/img/tile.d.ts +1 -0
- package/dist/src/sort-filter-bar/img/tile.js +5 -0
- package/dist/src/sort-filter-bar/img/tile.js.map +1 -0
- package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +65 -11
- package/dist/src/sort-filter-bar/sort-filter-bar.js +453 -142
- package/dist/src/sort-filter-bar/sort-filter-bar.js.map +1 -1
- package/dist/src/tiles/grid/collection-tile.js +1 -2
- package/dist/src/tiles/grid/collection-tile.js.map +1 -1
- package/dist/src/tiles/grid/item-tile.d.ts +4 -0
- package/dist/src/tiles/grid/item-tile.js +134 -45
- package/dist/src/tiles/grid/item-tile.js.map +1 -1
- package/dist/src/tiles/list/tile-list-compact-header.d.ts +11 -0
- package/dist/src/tiles/list/tile-list-compact-header.js +79 -0
- package/dist/src/tiles/list/tile-list-compact-header.js.map +1 -0
- package/dist/src/tiles/list/tile-list-compact.d.ts +1 -0
- package/dist/src/tiles/list/tile-list-compact.js +122 -31
- package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
- package/dist/src/tiles/list/tile-list-detail.d.ts +0 -10
- package/dist/src/tiles/list/tile-list-detail.js +6 -159
- package/dist/src/tiles/list/tile-list-detail.js.map +1 -1
- package/dist/src/tiles/list/tile-list.d.ts +19 -6
- package/dist/src/tiles/list/tile-list.js +240 -108
- package/dist/src/tiles/list/tile-list.js.map +1 -1
- package/dist/src/tiles/tile-dispatcher.d.ts +8 -1
- package/dist/src/tiles/tile-dispatcher.js +46 -11
- package/dist/src/tiles/tile-dispatcher.js.map +1 -1
- package/dist/src/utils/format-date.js +1 -2
- package/dist/src/utils/format-date.js.map +1 -1
- package/dist/test/{utils/format-string.test.d.ts → collection-name-cache.test.d.ts} +0 -0
- package/dist/test/collection-name-cache.test.js +158 -0
- package/dist/test/collection-name-cache.test.js.map +1 -0
- package/dist/test/mocks/mock-search-response.d.ts +5 -0
- package/dist/test/mocks/mock-search-response.js +62 -0
- package/dist/test/mocks/mock-search-response.js.map +1 -0
- package/dist/test/mocks/mock-search-service.d.ts +13 -0
- package/dist/test/mocks/mock-search-service.js +20 -0
- package/dist/test/mocks/mock-search-service.js.map +1 -0
- package/package.json +9 -4
- package/src/assets/img/icons/chevron.ts +4 -0
- package/src/assets/img/icons/eye-closed.ts +5 -0
- package/src/assets/img/icons/eye.ts +5 -0
- package/src/assets/img/icons/mediatype/account.ts +5 -4
- package/src/assets/img/icons/mediatype/audio.ts +7 -4
- package/src/assets/img/icons/mediatype/collection.ts +7 -4
- package/src/assets/img/icons/mediatype/etree.ts +10 -5
- package/src/assets/img/icons/mediatype/film.ts +2 -1
- package/src/assets/img/icons/mediatype/images.ts +9 -6
- package/src/assets/img/icons/mediatype/software.ts +9 -6
- package/src/assets/img/icons/mediatype/texts.ts +9 -6
- package/src/assets/img/icons/mediatype/tv.ts +10 -5
- package/src/assets/img/icons/mediatype/video.ts +10 -6
- package/src/assets/img/icons/mediatype/web.ts +9 -6
- package/src/collection-browser.ts +490 -105
- package/src/collection-facets.ts +325 -109
- package/src/mediatype-icon.ts +10 -3
- package/src/models.ts +139 -14
- package/src/restoration-state-handler.ts +234 -0
- package/src/sort-filter-bar/alpha-bar.ts +19 -9
- package/src/sort-filter-bar/img/compact.ts +5 -0
- package/src/sort-filter-bar/img/list.ts +5 -0
- package/src/sort-filter-bar/img/sort-triangle.ts +5 -0
- package/src/sort-filter-bar/img/tile.ts +5 -0
- package/src/sort-filter-bar/sort-filter-bar.ts +499 -149
- package/src/tiles/grid/collection-tile.ts +1 -2
- package/src/tiles/grid/item-tile.ts +138 -56
- package/src/tiles/list/tile-list-compact-header.ts +75 -0
- package/src/tiles/list/tile-list-compact.ts +209 -0
- package/src/tiles/list/tile-list.ts +261 -110
- package/src/tiles/tile-dispatcher.ts +51 -11
- package/src/utils/format-date.ts +1 -2
- package/dist/src/assets/img/icons/audio.d.ts +0 -1
- package/dist/src/assets/img/icons/audio.js +0 -9
- package/dist/src/assets/img/icons/audio.js.map +0 -1
- package/dist/src/assets/img/icons/collection.d.ts +0 -1
- package/dist/src/assets/img/icons/collection.js +0 -9
- package/dist/src/assets/img/icons/collection.js.map +0 -1
- package/dist/src/assets/img/icons/etree.d.ts +0 -1
- package/dist/src/assets/img/icons/etree.js +0 -9
- package/dist/src/assets/img/icons/etree.js.map +0 -1
- package/dist/src/assets/img/icons/images.d.ts +0 -1
- package/dist/src/assets/img/icons/images.js +0 -10
- package/dist/src/assets/img/icons/images.js.map +0 -1
- package/dist/src/assets/img/icons/mediatype/etree copy.d.ts +0 -1
- package/dist/src/assets/img/icons/mediatype/etree copy.js +0 -9
- package/dist/src/assets/img/icons/mediatype/etree copy.js.map +0 -1
- package/dist/src/assets/img/icons/mediatype/livemusic.d.ts +0 -1
- package/dist/src/assets/img/icons/mediatype/livemusic.js +0 -7
- package/dist/src/assets/img/icons/mediatype/livemusic.js.map +0 -1
- package/dist/src/assets/img/icons/mediatype/photos.d.ts +0 -1
- package/dist/src/assets/img/icons/mediatype/photos.js +0 -7
- package/dist/src/assets/img/icons/mediatype/photos.js.map +0 -1
- package/dist/src/assets/img/icons/software.d.ts +0 -1
- package/dist/src/assets/img/icons/software.js +0 -10
- package/dist/src/assets/img/icons/software.js.map +0 -1
- package/dist/src/assets/img/icons/texts.d.ts +0 -1
- package/dist/src/assets/img/icons/texts.js +0 -10
- package/dist/src/assets/img/icons/texts.js.map +0 -1
- package/dist/src/assets/img/icons/tv.d.ts +0 -1
- package/dist/src/assets/img/icons/tv.js +0 -9
- package/dist/src/assets/img/icons/tv.js.map +0 -1
- package/dist/src/assets/img/icons/video.d.ts +0 -1
- package/dist/src/assets/img/icons/video.js +0 -10
- package/dist/src/assets/img/icons/video.js.map +0 -1
- package/dist/src/assets/img/icons/web.d.ts +0 -1
- package/dist/src/assets/img/icons/web.js +0 -10
- package/dist/src/assets/img/icons/web.js.map +0 -1
- package/dist/src/utils/format-string.d.ts +0 -2
- package/dist/src/utils/format-string.js +0 -7
- package/dist/src/utils/format-string.js.map +0 -1
- package/dist/test/utils/format-string.test.js +0 -17
- package/dist/test/utils/format-string.test.js.map +0 -1
- package/src/assets/img/icons/mediatype/foo.svg +0 -5
package/demo/app-root.ts
CHANGED
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
import { SearchService } from '@internetarchive/search-service';
|
|
2
|
+
import { LocalCache } from '@internetarchive/local-cache';
|
|
2
3
|
import { html, css, LitElement, PropertyValues } from 'lit';
|
|
3
4
|
import { customElement, query, state } from 'lit/decorators.js';
|
|
4
|
-
import {
|
|
5
|
-
SortDirection,
|
|
6
|
-
SortParam,
|
|
7
|
-
} from '@internetarchive/search-service/dist/src/search-params';
|
|
8
5
|
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
|
6
|
+
import { CollectionNameCache } from '@internetarchive/collection-name-cache';
|
|
9
7
|
import type { CollectionBrowser } from '../src/collection-browser';
|
|
10
8
|
import '../src/collection-browser';
|
|
11
|
-
import { CollectionDisplayMode } from '../src/models';
|
|
12
|
-
import { SortFilterBar } from '../src/sort-filter-bar/sort-filter-bar';
|
|
13
9
|
|
|
14
10
|
@customElement('app-root')
|
|
15
11
|
export class AppRoot extends LitElement {
|
|
@@ -17,12 +13,17 @@ export class AppRoot extends LitElement {
|
|
|
17
13
|
|
|
18
14
|
private resizeObserver = new SharedResizeObserver();
|
|
19
15
|
|
|
16
|
+
private localCache = new LocalCache();
|
|
17
|
+
|
|
18
|
+
private collectionNameCache = new CollectionNameCache({
|
|
19
|
+
searchService: this.searchService,
|
|
20
|
+
localCache: this.localCache,
|
|
21
|
+
});
|
|
22
|
+
|
|
20
23
|
@state() private currentPage?: number;
|
|
21
24
|
|
|
22
25
|
@state() private searchQuery?: string;
|
|
23
26
|
|
|
24
|
-
@state() private sortParam?: SortParam;
|
|
25
|
-
|
|
26
27
|
@state() private cellWidth: number = 18;
|
|
27
28
|
|
|
28
29
|
@state() private cellHeight: number = 29;
|
|
@@ -37,8 +38,6 @@ export class AppRoot extends LitElement {
|
|
|
37
38
|
|
|
38
39
|
@query('collection-browser') private collectionBrowser!: CollectionBrowser;
|
|
39
40
|
|
|
40
|
-
@query('sort-filter-bar') private sortFilterBar!: SortFilterBar;
|
|
41
|
-
|
|
42
41
|
private searchPressed(e: Event) {
|
|
43
42
|
e.preventDefault();
|
|
44
43
|
this.searchQuery = this.baseQueryField.value;
|
|
@@ -54,90 +53,18 @@ export class AppRoot extends LitElement {
|
|
|
54
53
|
this.collectionBrowser.goToPage(this.currentPage);
|
|
55
54
|
}
|
|
56
55
|
|
|
57
|
-
protected firstUpdated(): void {
|
|
58
|
-
this.loadStateFromUrl();
|
|
59
|
-
}
|
|
60
|
-
|
|
61
56
|
protected updated(changed: PropertyValues): void {
|
|
62
57
|
if (changed.has('currentPage') && this.currentPage) {
|
|
63
58
|
this.pageNumberInput.value = this.currentPage.toString();
|
|
64
|
-
this.updateUrl();
|
|
65
59
|
}
|
|
66
60
|
|
|
67
61
|
if (changed.has('searchQuery')) {
|
|
68
62
|
this.queryUpdated();
|
|
69
63
|
}
|
|
70
|
-
|
|
71
|
-
if (changed.has('sortParam')) {
|
|
72
|
-
this.sortParamUpdated();
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
private loadStateFromUrl() {
|
|
77
|
-
const url = new URL(window.location.href);
|
|
78
|
-
const pageNumber = url.searchParams.get('page');
|
|
79
|
-
const searchQuery = url.searchParams.get('query');
|
|
80
|
-
const sortQuery = url.searchParams.get('sort');
|
|
81
|
-
if (pageNumber) {
|
|
82
|
-
const parsed = parseInt(pageNumber, 10);
|
|
83
|
-
this.currentPage = parsed;
|
|
84
|
-
if (parsed > 1) {
|
|
85
|
-
this.collectionBrowser.goToPage(parsed);
|
|
86
|
-
}
|
|
87
|
-
} else {
|
|
88
|
-
this.currentPage = 1;
|
|
89
|
-
}
|
|
90
|
-
if (searchQuery) {
|
|
91
|
-
this.searchQuery = searchQuery;
|
|
92
|
-
} else {
|
|
93
|
-
this.searchQuery = 'collection:etree';
|
|
94
|
-
}
|
|
95
|
-
if (sortQuery) {
|
|
96
|
-
const [field, direction] = sortQuery.split(' ');
|
|
97
|
-
this.sortParam = new SortParam(field, direction as SortDirection);
|
|
98
|
-
} else {
|
|
99
|
-
this.sortParam = new SortParam('date', 'desc');
|
|
100
|
-
}
|
|
101
64
|
}
|
|
102
65
|
|
|
103
66
|
private queryUpdated() {
|
|
104
67
|
this.collectionBrowser.baseQuery = this.searchQuery;
|
|
105
|
-
this.updateUrl();
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
private sortParamUpdated() {
|
|
109
|
-
if (!this.sortParam) return;
|
|
110
|
-
this.collectionBrowser.sortParam = this.sortParam;
|
|
111
|
-
this.sortFilterBar.sortDirection = this.sortParam.direction;
|
|
112
|
-
this.updateUrl();
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
private updateUrl() {
|
|
116
|
-
const url = new URL(window.location.href);
|
|
117
|
-
if (this.sortParam) {
|
|
118
|
-
url.searchParams.set('sort', this.sortParam.asString);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
if (this.searchQuery) {
|
|
122
|
-
url.searchParams.set('query', this.searchQuery);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
if (this.currentPage) {
|
|
126
|
-
if (this.currentPage > 1) {
|
|
127
|
-
url.searchParams.set('page', this.currentPage.toString());
|
|
128
|
-
} else {
|
|
129
|
-
url.searchParams.delete('page');
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
window.history.pushState(
|
|
134
|
-
{
|
|
135
|
-
page: this.currentPage,
|
|
136
|
-
query: this.searchQuery,
|
|
137
|
-
},
|
|
138
|
-
'',
|
|
139
|
-
url.toString()
|
|
140
|
-
);
|
|
141
68
|
}
|
|
142
69
|
|
|
143
70
|
render() {
|
|
@@ -145,7 +72,11 @@ export class AppRoot extends LitElement {
|
|
|
145
72
|
<div id="dev-tools">
|
|
146
73
|
<form @submit=${this.searchPressed}>
|
|
147
74
|
Query:
|
|
148
|
-
<input
|
|
75
|
+
<input
|
|
76
|
+
type="text"
|
|
77
|
+
id="base-query-field"
|
|
78
|
+
.value=${this.searchQuery ?? ''}
|
|
79
|
+
/>
|
|
149
80
|
<input type="submit" value="Search" />
|
|
150
81
|
</form>
|
|
151
82
|
|
|
@@ -163,13 +94,6 @@ export class AppRoot extends LitElement {
|
|
|
163
94
|
Toggle Delete Mode
|
|
164
95
|
</button>
|
|
165
96
|
|
|
166
|
-
<sort-filter-bar
|
|
167
|
-
@sortChanged=${this.sortChanged}
|
|
168
|
-
@displayModeChanged=${this.displayModeChanged}
|
|
169
|
-
@titleLetterChanged=${this.titleLetterChanged}
|
|
170
|
-
@creatorLetterChanged=${this.creatorLetterChanged}
|
|
171
|
-
></sort-filter-bar>
|
|
172
|
-
|
|
173
97
|
<div id="cell-controls">
|
|
174
98
|
<div id="cell-size-control">
|
|
175
99
|
<div>
|
|
@@ -238,14 +162,16 @@ export class AppRoot extends LitElement {
|
|
|
238
162
|
</div>
|
|
239
163
|
</div>
|
|
240
164
|
|
|
241
|
-
<collection-browser
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
165
|
+
<div id="collection-browser-container">
|
|
166
|
+
<collection-browser
|
|
167
|
+
.baseNavigationUrl=${'https://archive.org'}
|
|
168
|
+
.searchService=${this.searchService}
|
|
169
|
+
.resizeObserver=${this.resizeObserver}
|
|
170
|
+
.collectionNameCache=${this.collectionNameCache}
|
|
171
|
+
@visiblePageChanged=${this.visiblePageChanged}
|
|
172
|
+
>
|
|
173
|
+
</collection-browser>
|
|
174
|
+
</div>
|
|
249
175
|
`;
|
|
250
176
|
}
|
|
251
177
|
|
|
@@ -263,25 +189,6 @@ export class AppRoot extends LitElement {
|
|
|
263
189
|
}
|
|
264
190
|
}
|
|
265
191
|
|
|
266
|
-
private titleSelectorVisibilityChanged(e: CustomEvent<{ visible: boolean }>) {
|
|
267
|
-
console.debug('titleSelectorVisibleChanged', e.detail);
|
|
268
|
-
if (e.detail.visible) {
|
|
269
|
-
this.sortParam = new SortParam('titleSorter', 'asc');
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
private sortByViewsPressed() {
|
|
274
|
-
this.sortParam = new SortParam('week', 'desc');
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
private creatorSelectorVisibilityChanged(
|
|
278
|
-
e: CustomEvent<{ visible: boolean }>
|
|
279
|
-
) {
|
|
280
|
-
if (e.detail.visible) {
|
|
281
|
-
this.sortParam = new SortParam('creatorSorter', 'asc');
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
|
|
285
192
|
private rowGapChanged(e: Event) {
|
|
286
193
|
const input = e.target as HTMLInputElement;
|
|
287
194
|
this.rowGap = parseFloat(input.value);
|
|
@@ -328,47 +235,6 @@ export class AppRoot extends LitElement {
|
|
|
328
235
|
this.currentPage = pageNumber;
|
|
329
236
|
}
|
|
330
237
|
|
|
331
|
-
private sortChanged(e: CustomEvent<{ sort: SortParam }>) {
|
|
332
|
-
this.sortParam = e.detail.sort;
|
|
333
|
-
if ((this.currentPage ?? 1) > 1) {
|
|
334
|
-
this.collectionBrowser.goToPage(1);
|
|
335
|
-
}
|
|
336
|
-
this.currentPage = 1;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
private displayModeChanged(
|
|
340
|
-
e: CustomEvent<{ displayMode: CollectionDisplayMode }>
|
|
341
|
-
) {
|
|
342
|
-
this.collectionBrowser.displayMode = e.detail.displayMode;
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
@state() titleQuery?: string;
|
|
346
|
-
|
|
347
|
-
@state() creatorQuery?: string;
|
|
348
|
-
|
|
349
|
-
private get sortFilterQueries(): string {
|
|
350
|
-
const queries = [this.titleQuery, this.creatorQuery];
|
|
351
|
-
return queries.filter(q => q).join(' AND ');
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
private titleLetterChanged(e: CustomEvent<{ selectedLetter: string }>) {
|
|
355
|
-
const letter = e.detail.selectedLetter;
|
|
356
|
-
if (letter) {
|
|
357
|
-
this.titleQuery = `firstTitle:${letter}`;
|
|
358
|
-
} else {
|
|
359
|
-
this.titleQuery = undefined;
|
|
360
|
-
}
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
private creatorLetterChanged(e: CustomEvent<{ selectedLetter: string }>) {
|
|
364
|
-
const letter = e.detail.selectedLetter;
|
|
365
|
-
if (letter) {
|
|
366
|
-
this.creatorQuery = `firstCreator:${letter}`;
|
|
367
|
-
} else {
|
|
368
|
-
this.creatorQuery = undefined;
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
|
|
372
238
|
static styles = css`
|
|
373
239
|
:host {
|
|
374
240
|
display: block;
|
package/dist/demo/app-root.d.ts
CHANGED
|
@@ -3,9 +3,10 @@ import '../src/collection-browser';
|
|
|
3
3
|
export declare class AppRoot extends LitElement {
|
|
4
4
|
private searchService;
|
|
5
5
|
private resizeObserver;
|
|
6
|
+
private localCache;
|
|
7
|
+
private collectionNameCache;
|
|
6
8
|
private currentPage?;
|
|
7
9
|
private searchQuery?;
|
|
8
|
-
private sortParam?;
|
|
9
10
|
private cellWidth;
|
|
10
11
|
private cellHeight;
|
|
11
12
|
private rowGap;
|
|
@@ -13,31 +14,16 @@ export declare class AppRoot extends LitElement {
|
|
|
13
14
|
private baseQueryField;
|
|
14
15
|
private pageNumberInput;
|
|
15
16
|
private collectionBrowser;
|
|
16
|
-
private sortFilterBar;
|
|
17
17
|
private searchPressed;
|
|
18
18
|
private changePagePressed;
|
|
19
|
-
protected firstUpdated(): void;
|
|
20
19
|
protected updated(changed: PropertyValues): void;
|
|
21
|
-
private loadStateFromUrl;
|
|
22
20
|
private queryUpdated;
|
|
23
|
-
private sortParamUpdated;
|
|
24
|
-
private updateUrl;
|
|
25
21
|
render(): import("lit-html").TemplateResult<1>;
|
|
26
22
|
private outlineChanged;
|
|
27
|
-
private titleSelectorVisibilityChanged;
|
|
28
|
-
private sortByViewsPressed;
|
|
29
|
-
private creatorSelectorVisibilityChanged;
|
|
30
23
|
private rowGapChanged;
|
|
31
24
|
private colGapChanged;
|
|
32
25
|
private widthChanged;
|
|
33
26
|
private heightChanged;
|
|
34
27
|
private visiblePageChanged;
|
|
35
|
-
private sortChanged;
|
|
36
|
-
private displayModeChanged;
|
|
37
|
-
titleQuery?: string;
|
|
38
|
-
creatorQuery?: string;
|
|
39
|
-
private get sortFilterQueries();
|
|
40
|
-
private titleLetterChanged;
|
|
41
|
-
private creatorLetterChanged;
|
|
42
28
|
static styles: import("lit").CSSResult;
|
|
43
29
|
}
|
package/dist/demo/app-root.js
CHANGED
|
@@ -1,15 +1,21 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { SearchService } from '@internetarchive/search-service';
|
|
3
|
+
import { LocalCache } from '@internetarchive/local-cache';
|
|
3
4
|
import { html, css, LitElement } from 'lit';
|
|
4
5
|
import { customElement, query, state } from 'lit/decorators.js';
|
|
5
|
-
import { SortParam, } from '@internetarchive/search-service/dist/src/search-params';
|
|
6
6
|
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
|
7
|
+
import { CollectionNameCache } from '@internetarchive/collection-name-cache';
|
|
7
8
|
import '../src/collection-browser';
|
|
8
9
|
let AppRoot = class AppRoot extends LitElement {
|
|
9
10
|
constructor() {
|
|
10
11
|
super(...arguments);
|
|
11
12
|
this.searchService = SearchService.default;
|
|
12
13
|
this.resizeObserver = new SharedResizeObserver();
|
|
14
|
+
this.localCache = new LocalCache();
|
|
15
|
+
this.collectionNameCache = new CollectionNameCache({
|
|
16
|
+
searchService: this.searchService,
|
|
17
|
+
localCache: this.localCache,
|
|
18
|
+
});
|
|
13
19
|
this.cellWidth = 18;
|
|
14
20
|
this.cellHeight = 29;
|
|
15
21
|
this.rowGap = 1.7;
|
|
@@ -29,88 +35,28 @@ let AppRoot = class AppRoot extends LitElement {
|
|
|
29
35
|
this.currentPage = this.pageNumberInput.valueAsNumber;
|
|
30
36
|
this.collectionBrowser.goToPage(this.currentPage);
|
|
31
37
|
}
|
|
32
|
-
firstUpdated() {
|
|
33
|
-
this.loadStateFromUrl();
|
|
34
|
-
}
|
|
35
38
|
updated(changed) {
|
|
36
39
|
if (changed.has('currentPage') && this.currentPage) {
|
|
37
40
|
this.pageNumberInput.value = this.currentPage.toString();
|
|
38
|
-
this.updateUrl();
|
|
39
41
|
}
|
|
40
42
|
if (changed.has('searchQuery')) {
|
|
41
43
|
this.queryUpdated();
|
|
42
44
|
}
|
|
43
|
-
if (changed.has('sortParam')) {
|
|
44
|
-
this.sortParamUpdated();
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
loadStateFromUrl() {
|
|
48
|
-
const url = new URL(window.location.href);
|
|
49
|
-
const pageNumber = url.searchParams.get('page');
|
|
50
|
-
const searchQuery = url.searchParams.get('query');
|
|
51
|
-
const sortQuery = url.searchParams.get('sort');
|
|
52
|
-
if (pageNumber) {
|
|
53
|
-
const parsed = parseInt(pageNumber, 10);
|
|
54
|
-
this.currentPage = parsed;
|
|
55
|
-
if (parsed > 1) {
|
|
56
|
-
this.collectionBrowser.goToPage(parsed);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
else {
|
|
60
|
-
this.currentPage = 1;
|
|
61
|
-
}
|
|
62
|
-
if (searchQuery) {
|
|
63
|
-
this.searchQuery = searchQuery;
|
|
64
|
-
}
|
|
65
|
-
else {
|
|
66
|
-
this.searchQuery = 'collection:etree';
|
|
67
|
-
}
|
|
68
|
-
if (sortQuery) {
|
|
69
|
-
const [field, direction] = sortQuery.split(' ');
|
|
70
|
-
this.sortParam = new SortParam(field, direction);
|
|
71
|
-
}
|
|
72
|
-
else {
|
|
73
|
-
this.sortParam = new SortParam('date', 'desc');
|
|
74
|
-
}
|
|
75
45
|
}
|
|
76
46
|
queryUpdated() {
|
|
77
47
|
this.collectionBrowser.baseQuery = this.searchQuery;
|
|
78
|
-
this.updateUrl();
|
|
79
|
-
}
|
|
80
|
-
sortParamUpdated() {
|
|
81
|
-
if (!this.sortParam)
|
|
82
|
-
return;
|
|
83
|
-
this.collectionBrowser.sortParam = this.sortParam;
|
|
84
|
-
this.sortFilterBar.sortDirection = this.sortParam.direction;
|
|
85
|
-
this.updateUrl();
|
|
86
|
-
}
|
|
87
|
-
updateUrl() {
|
|
88
|
-
const url = new URL(window.location.href);
|
|
89
|
-
if (this.sortParam) {
|
|
90
|
-
url.searchParams.set('sort', this.sortParam.asString);
|
|
91
|
-
}
|
|
92
|
-
if (this.searchQuery) {
|
|
93
|
-
url.searchParams.set('query', this.searchQuery);
|
|
94
|
-
}
|
|
95
|
-
if (this.currentPage) {
|
|
96
|
-
if (this.currentPage > 1) {
|
|
97
|
-
url.searchParams.set('page', this.currentPage.toString());
|
|
98
|
-
}
|
|
99
|
-
else {
|
|
100
|
-
url.searchParams.delete('page');
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
window.history.pushState({
|
|
104
|
-
page: this.currentPage,
|
|
105
|
-
query: this.searchQuery,
|
|
106
|
-
}, '', url.toString());
|
|
107
48
|
}
|
|
108
49
|
render() {
|
|
50
|
+
var _a;
|
|
109
51
|
return html `
|
|
110
52
|
<div id="dev-tools">
|
|
111
53
|
<form @submit=${this.searchPressed}>
|
|
112
54
|
Query:
|
|
113
|
-
<input
|
|
55
|
+
<input
|
|
56
|
+
type="text"
|
|
57
|
+
id="base-query-field"
|
|
58
|
+
.value=${(_a = this.searchQuery) !== null && _a !== void 0 ? _a : ''}
|
|
59
|
+
/>
|
|
114
60
|
<input type="submit" value="Search" />
|
|
115
61
|
</form>
|
|
116
62
|
|
|
@@ -128,13 +74,6 @@ let AppRoot = class AppRoot extends LitElement {
|
|
|
128
74
|
Toggle Delete Mode
|
|
129
75
|
</button>
|
|
130
76
|
|
|
131
|
-
<sort-filter-bar
|
|
132
|
-
@sortChanged=${this.sortChanged}
|
|
133
|
-
@displayModeChanged=${this.displayModeChanged}
|
|
134
|
-
@titleLetterChanged=${this.titleLetterChanged}
|
|
135
|
-
@creatorLetterChanged=${this.creatorLetterChanged}
|
|
136
|
-
></sort-filter-bar>
|
|
137
|
-
|
|
138
77
|
<div id="cell-controls">
|
|
139
78
|
<div id="cell-size-control">
|
|
140
79
|
<div>
|
|
@@ -203,14 +142,16 @@ let AppRoot = class AppRoot extends LitElement {
|
|
|
203
142
|
</div>
|
|
204
143
|
</div>
|
|
205
144
|
|
|
206
|
-
<collection-browser
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
145
|
+
<div id="collection-browser-container">
|
|
146
|
+
<collection-browser
|
|
147
|
+
.baseNavigationUrl=${'https://archive.org'}
|
|
148
|
+
.searchService=${this.searchService}
|
|
149
|
+
.resizeObserver=${this.resizeObserver}
|
|
150
|
+
.collectionNameCache=${this.collectionNameCache}
|
|
151
|
+
@visiblePageChanged=${this.visiblePageChanged}
|
|
152
|
+
>
|
|
153
|
+
</collection-browser>
|
|
154
|
+
</div>
|
|
214
155
|
`;
|
|
215
156
|
}
|
|
216
157
|
outlineChanged(e) {
|
|
@@ -222,20 +163,6 @@ let AppRoot = class AppRoot extends LitElement {
|
|
|
222
163
|
this.collectionBrowser.style.removeProperty('--infiniteScrollerCellOutline');
|
|
223
164
|
}
|
|
224
165
|
}
|
|
225
|
-
titleSelectorVisibilityChanged(e) {
|
|
226
|
-
console.debug('titleSelectorVisibleChanged', e.detail);
|
|
227
|
-
if (e.detail.visible) {
|
|
228
|
-
this.sortParam = new SortParam('titleSorter', 'asc');
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
sortByViewsPressed() {
|
|
232
|
-
this.sortParam = new SortParam('week', 'desc');
|
|
233
|
-
}
|
|
234
|
-
creatorSelectorVisibilityChanged(e) {
|
|
235
|
-
if (e.detail.visible) {
|
|
236
|
-
this.sortParam = new SortParam('creatorSorter', 'asc');
|
|
237
|
-
}
|
|
238
|
-
}
|
|
239
166
|
rowGapChanged(e) {
|
|
240
167
|
const input = e.target;
|
|
241
168
|
this.rowGap = parseFloat(input.value);
|
|
@@ -263,39 +190,6 @@ let AppRoot = class AppRoot extends LitElement {
|
|
|
263
190
|
return;
|
|
264
191
|
this.currentPage = pageNumber;
|
|
265
192
|
}
|
|
266
|
-
sortChanged(e) {
|
|
267
|
-
var _a;
|
|
268
|
-
this.sortParam = e.detail.sort;
|
|
269
|
-
if (((_a = this.currentPage) !== null && _a !== void 0 ? _a : 1) > 1) {
|
|
270
|
-
this.collectionBrowser.goToPage(1);
|
|
271
|
-
}
|
|
272
|
-
this.currentPage = 1;
|
|
273
|
-
}
|
|
274
|
-
displayModeChanged(e) {
|
|
275
|
-
this.collectionBrowser.displayMode = e.detail.displayMode;
|
|
276
|
-
}
|
|
277
|
-
get sortFilterQueries() {
|
|
278
|
-
const queries = [this.titleQuery, this.creatorQuery];
|
|
279
|
-
return queries.filter(q => q).join(' AND ');
|
|
280
|
-
}
|
|
281
|
-
titleLetterChanged(e) {
|
|
282
|
-
const letter = e.detail.selectedLetter;
|
|
283
|
-
if (letter) {
|
|
284
|
-
this.titleQuery = `firstTitle:${letter}`;
|
|
285
|
-
}
|
|
286
|
-
else {
|
|
287
|
-
this.titleQuery = undefined;
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
|
-
creatorLetterChanged(e) {
|
|
291
|
-
const letter = e.detail.selectedLetter;
|
|
292
|
-
if (letter) {
|
|
293
|
-
this.creatorQuery = `firstCreator:${letter}`;
|
|
294
|
-
}
|
|
295
|
-
else {
|
|
296
|
-
this.creatorQuery = undefined;
|
|
297
|
-
}
|
|
298
|
-
}
|
|
299
193
|
};
|
|
300
194
|
AppRoot.styles = css `
|
|
301
195
|
:host {
|
|
@@ -345,9 +239,6 @@ __decorate([
|
|
|
345
239
|
__decorate([
|
|
346
240
|
state()
|
|
347
241
|
], AppRoot.prototype, "searchQuery", void 0);
|
|
348
|
-
__decorate([
|
|
349
|
-
state()
|
|
350
|
-
], AppRoot.prototype, "sortParam", void 0);
|
|
351
242
|
__decorate([
|
|
352
243
|
state()
|
|
353
244
|
], AppRoot.prototype, "cellWidth", void 0);
|
|
@@ -369,15 +260,6 @@ __decorate([
|
|
|
369
260
|
__decorate([
|
|
370
261
|
query('collection-browser')
|
|
371
262
|
], AppRoot.prototype, "collectionBrowser", void 0);
|
|
372
|
-
__decorate([
|
|
373
|
-
query('sort-filter-bar')
|
|
374
|
-
], AppRoot.prototype, "sortFilterBar", void 0);
|
|
375
|
-
__decorate([
|
|
376
|
-
state()
|
|
377
|
-
], AppRoot.prototype, "titleQuery", void 0);
|
|
378
|
-
__decorate([
|
|
379
|
-
state()
|
|
380
|
-
], AppRoot.prototype, "creatorQuery", void 0);
|
|
381
263
|
AppRoot = __decorate([
|
|
382
264
|
customElement('app-root')
|
|
383
265
|
], AppRoot);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import { SearchService } from '@internetarchive/search-service';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport {\n SortDirection,\n SortParam,\n} from '@internetarchive/search-service/dist/src/search-params';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport type { CollectionBrowser } from '../src/collection-browser';\nimport '../src/collection-browser';\nimport { CollectionDisplayMode } from '../src/models';\nimport { SortFilterBar } from '../src/sort-filter-bar/sort-filter-bar';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n private searchService = SearchService.default;\n\n private resizeObserver = new SharedResizeObserver();\n\n @state() private currentPage?: number;\n\n @state() private searchQuery?: string;\n\n @state() private sortParam?: SortParam;\n\n @state() private cellWidth: number = 18;\n\n @state() private cellHeight: number = 29;\n\n @state() private rowGap: number = 1.7;\n\n @state() private colGap: number = 1.7;\n\n @query('#base-query-field') private baseQueryField!: HTMLInputElement;\n\n @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\n\n @query('collection-browser') private collectionBrowser!: CollectionBrowser;\n\n @query('sort-filter-bar') private sortFilterBar!: SortFilterBar;\n\n private searchPressed(e: Event) {\n e.preventDefault();\n this.searchQuery = this.baseQueryField.value;\n if ((this.currentPage ?? 1) > 1) {\n this.collectionBrowser.goToPage(this.currentPage ?? 1);\n }\n this.currentPage = 1;\n }\n\n private changePagePressed(e: Event) {\n e.preventDefault();\n this.currentPage = this.pageNumberInput.valueAsNumber;\n this.collectionBrowser.goToPage(this.currentPage);\n }\n\n protected firstUpdated(): void {\n this.loadStateFromUrl();\n }\n\n protected updated(changed: PropertyValues): void {\n if (changed.has('currentPage') && this.currentPage) {\n this.pageNumberInput.value = this.currentPage.toString();\n this.updateUrl();\n }\n\n if (changed.has('searchQuery')) {\n this.queryUpdated();\n }\n\n if (changed.has('sortParam')) {\n this.sortParamUpdated();\n }\n }\n\n private loadStateFromUrl() {\n const url = new URL(window.location.href);\n const pageNumber = url.searchParams.get('page');\n const searchQuery = url.searchParams.get('query');\n const sortQuery = url.searchParams.get('sort');\n if (pageNumber) {\n const parsed = parseInt(pageNumber, 10);\n this.currentPage = parsed;\n if (parsed > 1) {\n this.collectionBrowser.goToPage(parsed);\n }\n } else {\n this.currentPage = 1;\n }\n if (searchQuery) {\n this.searchQuery = searchQuery;\n } else {\n this.searchQuery = 'collection:etree';\n }\n if (sortQuery) {\n const [field, direction] = sortQuery.split(' ');\n this.sortParam = new SortParam(field, direction as SortDirection);\n } else {\n this.sortParam = new SortParam('date', 'desc');\n }\n }\n\n private queryUpdated() {\n this.collectionBrowser.baseQuery = this.searchQuery;\n this.updateUrl();\n }\n\n private sortParamUpdated() {\n if (!this.sortParam) return;\n this.collectionBrowser.sortParam = this.sortParam;\n this.sortFilterBar.sortDirection = this.sortParam.direction;\n this.updateUrl();\n }\n\n private updateUrl() {\n const url = new URL(window.location.href);\n if (this.sortParam) {\n url.searchParams.set('sort', this.sortParam.asString);\n }\n\n if (this.searchQuery) {\n url.searchParams.set('query', this.searchQuery);\n }\n\n if (this.currentPage) {\n if (this.currentPage > 1) {\n url.searchParams.set('page', this.currentPage.toString());\n } else {\n url.searchParams.delete('page');\n }\n }\n\n window.history.pushState(\n {\n page: this.currentPage,\n query: this.searchQuery,\n },\n '',\n url.toString()\n );\n }\n\n render() {\n return html`\n <div id=\"dev-tools\">\n <form @submit=${this.searchPressed}>\n Query:\n <input type=\"text\" id=\"base-query-field\" .value=${this.searchQuery} />\n <input type=\"submit\" value=\"Search\" />\n </form>\n\n <form @submit=${this.changePagePressed}>\n Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n <input type=\"submit\" value=\"Go\" />\n </form>\n\n <button\n @click=${() => {\n this.collectionBrowser.showDeleteButtons =\n !this.collectionBrowser.showDeleteButtons;\n }}\n >\n Toggle Delete Mode\n </button>\n\n <sort-filter-bar\n @sortChanged=${this.sortChanged}\n @displayModeChanged=${this.displayModeChanged}\n @titleLetterChanged=${this.titleLetterChanged}\n @creatorLetterChanged=${this.creatorLetterChanged}\n ></sort-filter-bar>\n\n <div id=\"cell-controls\">\n <div id=\"cell-size-control\">\n <div>\n <label for=\"cell-width-slider\">Minimum cell width:</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"100\"\n value=\"18\"\n step=\"0.1\"\n id=\"cell-width-slider\"\n @input=${this.widthChanged}\n />\n <span>${this.cellWidth}rem</span>\n </div>\n <div>\n <label for=\"cell-height-slider\">Cell height:</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"100\"\n value=\"29\"\n step=\"0.1\"\n id=\"cell-height-slider\"\n @input=${this.heightChanged}\n />\n <span>${this.cellHeight}rem</span>\n </div>\n <div>\n <label for=\"show-outline-check\">Show outlines:</label>\n <input\n type=\"checkbox\"\n id=\"show-outline-check\"\n @click=${this.outlineChanged}\n />\n </div>\n </div>\n <div id=\"cell-gap-control\">\n <div>\n <label for=\"cell-row-gap-slider\">Row gap:</label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"5\"\n value=\"1.7\"\n step=\"0.1\"\n id=\"cell-row-gap-slider\"\n @input=${this.rowGapChanged}\n />\n <span>${this.rowGap}rem</span>\n </div>\n <div>\n <label for=\"cell-col-gap-slider\">Col gap:</label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"5\"\n value=\"1.7\"\n step=\"0.1\"\n id=\"cell-col-gap-slider\"\n @input=${this.colGapChanged}\n />\n <span>${this.colGap}rem</span>\n </div>\n </div>\n </div>\n </div>\n\n <collection-browser\n .baseNavigationUrl=${'https://archive.org'}\n .searchService=${this.searchService}\n .additionalQueryClause=${this.sortFilterQueries}\n .resizeObserver=${this.resizeObserver}\n @visiblePageChanged=${this.visiblePageChanged}\n >\n </collection-browser>\n `;\n }\n\n private outlineChanged(e: Event) {\n const target = e.target as HTMLInputElement;\n if (target.checked) {\n this.collectionBrowser.style.setProperty(\n '--infiniteScrollerCellOutline',\n '1px solid #33D1FF'\n );\n } else {\n this.collectionBrowser.style.removeProperty(\n '--infiniteScrollerCellOutline'\n );\n }\n }\n\n private titleSelectorVisibilityChanged(e: CustomEvent<{ visible: boolean }>) {\n console.debug('titleSelectorVisibleChanged', e.detail);\n if (e.detail.visible) {\n this.sortParam = new SortParam('titleSorter', 'asc');\n }\n }\n\n private sortByViewsPressed() {\n this.sortParam = new SortParam('week', 'desc');\n }\n\n private creatorSelectorVisibilityChanged(\n e: CustomEvent<{ visible: boolean }>\n ) {\n if (e.detail.visible) {\n this.sortParam = new SortParam('creatorSorter', 'asc');\n }\n }\n\n private rowGapChanged(e: Event) {\n const input = e.target as HTMLInputElement;\n this.rowGap = parseFloat(input.value);\n this.collectionBrowser.style.setProperty(\n '--collectionBrowserRowGap',\n `${input.value}rem`\n );\n }\n\n private colGapChanged(e: Event) {\n const input = e.target as HTMLInputElement;\n this.colGap = parseFloat(input.value);\n this.collectionBrowser.style.setProperty(\n '--collectionBrowserColGap',\n `${input.value}rem`\n );\n }\n\n private widthChanged(e: Event) {\n const input = e.target as HTMLInputElement;\n this.cellWidth = parseFloat(input.value);\n this.collectionBrowser.style.setProperty(\n '--collectionBrowserCellMinWidth',\n `${input.value}rem`\n );\n }\n\n private heightChanged(e: Event) {\n const input = e.target as HTMLInputElement;\n this.cellHeight = parseFloat(input.value);\n this.collectionBrowser.style.setProperty(\n '--collectionBrowserCellMinHeight',\n `${input.value}rem`\n );\n this.collectionBrowser.style.setProperty(\n '--collectionBrowserCellMaxHeight',\n `${input.value}rem`\n );\n }\n\n private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\n const { pageNumber } = e.detail;\n if (pageNumber === this.currentPage) return;\n this.currentPage = pageNumber;\n }\n\n private sortChanged(e: CustomEvent<{ sort: SortParam }>) {\n this.sortParam = e.detail.sort;\n if ((this.currentPage ?? 1) > 1) {\n this.collectionBrowser.goToPage(1);\n }\n this.currentPage = 1;\n }\n\n private displayModeChanged(\n e: CustomEvent<{ displayMode: CollectionDisplayMode }>\n ) {\n this.collectionBrowser.displayMode = e.detail.displayMode;\n }\n\n @state() titleQuery?: string;\n\n @state() creatorQuery?: string;\n\n private get sortFilterQueries(): string {\n const queries = [this.titleQuery, this.creatorQuery];\n return queries.filter(q => q).join(' AND ');\n }\n\n private titleLetterChanged(e: CustomEvent<{ selectedLetter: string }>) {\n const letter = e.detail.selectedLetter;\n if (letter) {\n this.titleQuery = `firstTitle:${letter}`;\n } else {\n this.titleQuery = undefined;\n }\n }\n\n private creatorLetterChanged(e: CustomEvent<{ selectedLetter: string }>) {\n const letter = e.detail.selectedLetter;\n if (letter) {\n this.creatorQuery = `firstCreator:${letter}`;\n } else {\n this.creatorQuery = undefined;\n }\n }\n\n static styles = css`\n :host {\n display: block;\n }\n\n input,\n button {\n font-size: 1.6rem;\n }\n\n collection-browser {\n margin-top: 30rem;\n }\n\n #base-query-field {\n width: 300px;\n }\n\n #dev-tools {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 10;\n -webkit-backdrop-filter: blur(10px);\n backdrop-filter: blur(10px);\n padding: 0.5rem 1rem;\n border: 1px solid black;\n }\n\n #cell-controls {\n display: flex;\n }\n\n #cell-controls label {\n display: inline-block;\n width: 10rem;\n }\n\n #cell-gap-control {\n margin-left: 1rem;\n }\n `;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import { SearchService } from '@internetarchive/search-service';\nimport { LocalCache } from '@internetarchive/local-cache';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { CollectionNameCache } from '@internetarchive/collection-name-cache';\nimport type { CollectionBrowser } from '../src/collection-browser';\nimport '../src/collection-browser';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n private searchService = SearchService.default;\n\n private resizeObserver = new SharedResizeObserver();\n\n private localCache = new LocalCache();\n\n private collectionNameCache = new CollectionNameCache({\n searchService: this.searchService,\n localCache: this.localCache,\n });\n\n @state() private currentPage?: number;\n\n @state() private searchQuery?: string;\n\n @state() private cellWidth: number = 18;\n\n @state() private cellHeight: number = 29;\n\n @state() private rowGap: number = 1.7;\n\n @state() private colGap: number = 1.7;\n\n @query('#base-query-field') private baseQueryField!: HTMLInputElement;\n\n @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\n\n @query('collection-browser') private collectionBrowser!: CollectionBrowser;\n\n private searchPressed(e: Event) {\n e.preventDefault();\n this.searchQuery = this.baseQueryField.value;\n if ((this.currentPage ?? 1) > 1) {\n this.collectionBrowser.goToPage(this.currentPage ?? 1);\n }\n this.currentPage = 1;\n }\n\n private changePagePressed(e: Event) {\n e.preventDefault();\n this.currentPage = this.pageNumberInput.valueAsNumber;\n this.collectionBrowser.goToPage(this.currentPage);\n }\n\n protected updated(changed: PropertyValues): void {\n if (changed.has('currentPage') && this.currentPage) {\n this.pageNumberInput.value = this.currentPage.toString();\n }\n\n if (changed.has('searchQuery')) {\n this.queryUpdated();\n }\n }\n\n private queryUpdated() {\n this.collectionBrowser.baseQuery = this.searchQuery;\n }\n\n render() {\n return html`\n <div id=\"dev-tools\">\n <form @submit=${this.searchPressed}>\n Query:\n <input\n type=\"text\"\n id=\"base-query-field\"\n .value=${this.searchQuery ?? ''}\n />\n <input type=\"submit\" value=\"Search\" />\n </form>\n\n <form @submit=${this.changePagePressed}>\n Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n <input type=\"submit\" value=\"Go\" />\n </form>\n\n <button\n @click=${() => {\n this.collectionBrowser.showDeleteButtons =\n !this.collectionBrowser.showDeleteButtons;\n }}\n >\n Toggle Delete Mode\n </button>\n\n <div id=\"cell-controls\">\n <div id=\"cell-size-control\">\n <div>\n <label for=\"cell-width-slider\">Minimum cell width:</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"100\"\n value=\"18\"\n step=\"0.1\"\n id=\"cell-width-slider\"\n @input=${this.widthChanged}\n />\n <span>${this.cellWidth}rem</span>\n </div>\n <div>\n <label for=\"cell-height-slider\">Cell height:</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"100\"\n value=\"29\"\n step=\"0.1\"\n id=\"cell-height-slider\"\n @input=${this.heightChanged}\n />\n <span>${this.cellHeight}rem</span>\n </div>\n <div>\n <label for=\"show-outline-check\">Show outlines:</label>\n <input\n type=\"checkbox\"\n id=\"show-outline-check\"\n @click=${this.outlineChanged}\n />\n </div>\n </div>\n <div id=\"cell-gap-control\">\n <div>\n <label for=\"cell-row-gap-slider\">Row gap:</label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"5\"\n value=\"1.7\"\n step=\"0.1\"\n id=\"cell-row-gap-slider\"\n @input=${this.rowGapChanged}\n />\n <span>${this.rowGap}rem</span>\n </div>\n <div>\n <label for=\"cell-col-gap-slider\">Col gap:</label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"5\"\n value=\"1.7\"\n step=\"0.1\"\n id=\"cell-col-gap-slider\"\n @input=${this.colGapChanged}\n />\n <span>${this.colGap}rem</span>\n </div>\n </div>\n </div>\n </div>\n\n <div id=\"collection-browser-container\">\n <collection-browser\n .baseNavigationUrl=${'https://archive.org'}\n .searchService=${this.searchService}\n .resizeObserver=${this.resizeObserver}\n .collectionNameCache=${this.collectionNameCache}\n @visiblePageChanged=${this.visiblePageChanged}\n >\n </collection-browser>\n </div>\n `;\n }\n\n private outlineChanged(e: Event) {\n const target = e.target as HTMLInputElement;\n if (target.checked) {\n this.collectionBrowser.style.setProperty(\n '--infiniteScrollerCellOutline',\n '1px solid #33D1FF'\n );\n } else {\n this.collectionBrowser.style.removeProperty(\n '--infiniteScrollerCellOutline'\n );\n }\n }\n\n private rowGapChanged(e: Event) {\n const input = e.target as HTMLInputElement;\n this.rowGap = parseFloat(input.value);\n this.collectionBrowser.style.setProperty(\n '--collectionBrowserRowGap',\n `${input.value}rem`\n );\n }\n\n private colGapChanged(e: Event) {\n const input = e.target as HTMLInputElement;\n this.colGap = parseFloat(input.value);\n this.collectionBrowser.style.setProperty(\n '--collectionBrowserColGap',\n `${input.value}rem`\n );\n }\n\n private widthChanged(e: Event) {\n const input = e.target as HTMLInputElement;\n this.cellWidth = parseFloat(input.value);\n this.collectionBrowser.style.setProperty(\n '--collectionBrowserCellMinWidth',\n `${input.value}rem`\n );\n }\n\n private heightChanged(e: Event) {\n const input = e.target as HTMLInputElement;\n this.cellHeight = parseFloat(input.value);\n this.collectionBrowser.style.setProperty(\n '--collectionBrowserCellMinHeight',\n `${input.value}rem`\n );\n this.collectionBrowser.style.setProperty(\n '--collectionBrowserCellMaxHeight',\n `${input.value}rem`\n );\n }\n\n private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\n const { pageNumber } = e.detail;\n if (pageNumber === this.currentPage) return;\n this.currentPage = pageNumber;\n }\n\n static styles = css`\n :host {\n display: block;\n }\n\n input,\n button {\n font-size: 1.6rem;\n }\n\n collection-browser {\n margin-top: 30rem;\n }\n\n #base-query-field {\n width: 300px;\n }\n\n #dev-tools {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 10;\n -webkit-backdrop-filter: blur(10px);\n backdrop-filter: blur(10px);\n padding: 0.5rem 1rem;\n border: 1px solid black;\n }\n\n #cell-controls {\n display: flex;\n }\n\n #cell-controls label {\n display: inline-block;\n width: 10rem;\n }\n\n #cell-gap-control {\n margin-left: 1rem;\n }\n `;\n}\n"]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { svg } from 'lit';
|
|
2
|
+
export default svg `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m79.8883285 50.0035012.1116715-.1085359-43.1159942-46.61088155c-2.401537-2.18938917-4.6902018-3.28408375-6.8659943-3.28408375s-4.1642651.63837733-5.9654178 1.91513199c-1.8011528 1.27675467-3.1520173 2.97248092-4.0525937 5.08717877l39.4020173 42.99768924-39.4020173 42.9976892c.9005764 2.1146979 2.2514409 3.8104241 4.0525937 5.0871788 1.8011527 1.2767547 3.7896253 1.915132 5.9654178 1.915132 2.1013449 0 4.3900096-1.0573489 6.8659943-3.1720468l43.1159942-46.7194174z"/></svg>
|
|
3
|
+
`;
|
|
4
|
+
//# sourceMappingURL=chevron.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chevron.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/chevron.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;CACjB,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport default svg`<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m79.8883285 50.0035012.1116715-.1085359-43.1159942-46.61088155c-2.401537-2.18938917-4.6902018-3.28408375-6.8659943-3.28408375s-4.1642651.63837733-5.9654178 1.91513199c-1.8011528 1.27675467-3.1520173 2.97248092-4.0525937 5.08717877l39.4020173 42.99768924-39.4020173 42.9976892c.9005764 2.1146979 2.2514409 3.8104241 4.0525937 5.0871788 1.8011527 1.2767547 3.7896253 1.915132 5.9654178 1.915132 2.1013449 0 4.3900096-1.0573489 6.8659943-3.1720468l43.1159942-46.7194174z\"/></svg>\n`;\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { svg } from 'lit';
|
|
2
|
+
export default svg `
|
|
3
|
+
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m97.5245976 14.5407294-15.0809624 14.6188347c3.3026825 2.8601369 6.4111526 6.0234269 9.3254105 9.48987 2.9142578 3.4664431 5.0023086 6.2183876 6.2641522 8.2558335l1.9668021 3.1268688c-.291855.4841879-.6920826 1.1386987-1.2006828 1.9635322s-1.6502683 2.4252247-3.4250041 4.8011737c-1.7747358 2.3759489-3.6202894 4.6426342-5.5366607 6.8000558-1.9163713 2.1574217-4.3810437 4.5580085-7.3940172 7.2017606-3.0129735 2.643752-6.0731589 4.9104373-9.180556 6.8000558-3.1073972 1.8896186-6.6643798 3.4900098-10.6709478 4.8011737-4.0065681 1.3111639-8.0249391 1.9656747-12.055113 1.9635322-6.7019347 0-13.2343359-1.6732336-19.5972037-5.019701l-17.1185824 16.6562806-10.27179318-10.6917703 14.93288898-14.5449211c-3.2533247-2.8601369-6.3371159-6.0116436-9.25137378-9.45452-2.91425785-3.4428764-5.02698749-6.1819664-6.33818892-8.2172698l-1.8927654-3.0529552c.29185498-.4841879.69208259-1.1386987 1.20068282-1.9635322.50860022-.8248335 1.65026824-2.437008 3.42500406-4.8365236 1.77473582-2.3995157 3.62028938-4.6908389 5.53666072-6.8739696 1.9163713-2.1831307 4.3810437-4.5955009 7.3940172-7.2371105s6.0731589-4.9200783 9.180556-6.8354059c3.1073972-1.9153277 6.6772558-3.5275022 10.7095757-4.8365237 4.03232-1.3090215 8.0635669-1.9635322 12.0937409-1.9635322 6.5560071 0 13.0637294 1.6968003 19.5231669 5.090401l17.1185824-16.5823669zm-46.478979 24.584323 10.7803934-10.473243c-3.5451796-1.891761-7.3092505-2.8376415-11.2922126-2.8376415-6.6547228 0-12.3609169 2.3641657-17.1185824 7.0924969-4.7576654 4.7283312-7.1375711 10.437893-7.1397171 17.1286852 0 3.8306553.8251341 7.3945787 2.4754024 10.6917703l10.9284669-10.5471566v-.1446137c0-2.9094127 1.0687043-5.4546132 3.2061128-7.6356015 2.1374086-2.1809883 4.6868477-3.2714825 7.6483174-3.2714825h.5086002zm-1.1652739 21.5988543-10.7803935 10.6178566c3.5945375 1.9388943 7.4068932 2.9083415 11.4370672 2.9083415 6.6547228 0 12.3491139-2.375949 17.0831734-7.1278469s7.1021623-10.4486051 7.1043083-17.0901215c0-4.0234736-.874492-7.6356015-2.6234759-10.836384l-10.7095757 10.473243v.363141c0 2.9586884-1.0687042 5.4803223-3.2061128 7.5649015-2.1374085 2.0845792-4.6868476 3.1268688-7.6483173 3.1268688z" fill="#000"/></svg>
|
|
4
|
+
`;
|
|
5
|
+
//# sourceMappingURL=eye-closed.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"eye-closed.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/eye-closed.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;CAEjB,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport default svg`\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m97.5245976 14.5407294-15.0809624 14.6188347c3.3026825 2.8601369 6.4111526 6.0234269 9.3254105 9.48987 2.9142578 3.4664431 5.0023086 6.2183876 6.2641522 8.2558335l1.9668021 3.1268688c-.291855.4841879-.6920826 1.1386987-1.2006828 1.9635322s-1.6502683 2.4252247-3.4250041 4.8011737c-1.7747358 2.3759489-3.6202894 4.6426342-5.5366607 6.8000558-1.9163713 2.1574217-4.3810437 4.5580085-7.3940172 7.2017606-3.0129735 2.643752-6.0731589 4.9104373-9.180556 6.8000558-3.1073972 1.8896186-6.6643798 3.4900098-10.6709478 4.8011737-4.0065681 1.3111639-8.0249391 1.9656747-12.055113 1.9635322-6.7019347 0-13.2343359-1.6732336-19.5972037-5.019701l-17.1185824 16.6562806-10.27179318-10.6917703 14.93288898-14.5449211c-3.2533247-2.8601369-6.3371159-6.0116436-9.25137378-9.45452-2.91425785-3.4428764-5.02698749-6.1819664-6.33818892-8.2172698l-1.8927654-3.0529552c.29185498-.4841879.69208259-1.1386987 1.20068282-1.9635322.50860022-.8248335 1.65026824-2.437008 3.42500406-4.8365236 1.77473582-2.3995157 3.62028938-4.6908389 5.53666072-6.8739696 1.9163713-2.1831307 4.3810437-4.5955009 7.3940172-7.2371105s6.0731589-4.9200783 9.180556-6.8354059c3.1073972-1.9153277 6.6772558-3.5275022 10.7095757-4.8365237 4.03232-1.3090215 8.0635669-1.9635322 12.0937409-1.9635322 6.5560071 0 13.0637294 1.6968003 19.5231669 5.090401l17.1185824-16.5823669zm-46.478979 24.584323 10.7803934-10.473243c-3.5451796-1.891761-7.3092505-2.8376415-11.2922126-2.8376415-6.6547228 0-12.3609169 2.3641657-17.1185824 7.0924969-4.7576654 4.7283312-7.1375711 10.437893-7.1397171 17.1286852 0 3.8306553.8251341 7.3945787 2.4754024 10.6917703l10.9284669-10.5471566v-.1446137c0-2.9094127 1.0687043-5.4546132 3.2061128-7.6356015 2.1374086-2.1809883 4.6868477-3.2714825 7.6483174-3.2714825h.5086002zm-1.1652739 21.5988543-10.7803935 10.6178566c3.5945375 1.9388943 7.4068932 2.9083415 11.4370672 2.9083415 6.6547228 0 12.3491139-2.375949 17.0831734-7.1278469s7.1021623-10.4486051 7.1043083-17.0901215c0-4.0234736-.874492-7.6356015-2.6234759-10.836384l-10.7095757 10.473243v.363141c0 2.9586884-1.0687042 5.4803223-3.2061128 7.5649015-2.1374085 2.0845792-4.6868476 3.1268688-7.6483173 3.1268688z\" fill=\"#000\"/></svg>\n`;\n"]}
|