@internetarchive/ia-item-navigator 0.0.0-a1 → 0.0.0-a14
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/README.md +29 -19
- package/demo/app-root.ts +101 -34
- package/demo/index.html +9 -1
- package/dist/demo/app-root.d.ts +26 -7
- package/dist/demo/app-root.js +88 -34
- package/dist/demo/app-root.js.map +1 -1
- package/dist/src/interfaces/event-interfaces.d.ts +3 -13
- package/dist/src/interfaces/event-interfaces.js.map +1 -1
- package/dist/src/interfaces/menu-interfaces.d.ts +3 -2
- package/dist/src/interfaces/menu-interfaces.js.map +1 -1
- package/dist/src/interfaces/nav-controller-interface.d.ts +9 -0
- package/dist/src/interfaces/nav-controller-interface.js.map +1 -1
- package/dist/src/item-inspector/item-inspector.d.ts +0 -41
- package/dist/src/item-inspector/item-inspector.js +253 -215
- package/dist/src/item-inspector/item-inspector.js.map +1 -1
- package/dist/src/item-inspector/visual-mod-provider.d.ts +2 -0
- package/dist/src/item-inspector/visual-mod-provider.js +3 -0
- package/dist/src/item-inspector/visual-mod-provider.js.map +1 -1
- package/dist/src/item-navigator.d.ts +36 -22
- package/dist/src/item-navigator.js +118 -108
- package/dist/src/item-navigator.js.map +1 -1
- package/dist/src/loader.d.ts +5 -0
- package/dist/src/loader.js +8 -2
- package/dist/src/loader.js.map +1 -1
- package/dist/src/no-theater-available.d.ts +9 -0
- package/dist/src/no-theater-available.js +79 -0
- package/dist/src/no-theater-available.js.map +1 -0
- package/dist/test/book-nav-stub.d.ts +17 -0
- package/dist/test/book-nav-stub.js +42 -0
- package/dist/test/book-nav-stub.js.map +1 -0
- package/dist/test/ia-item-navigator.test.d.ts +2 -0
- package/dist/test/ia-item-navigator.test.js +321 -0
- package/dist/test/ia-item-navigator.test.js.map +1 -0
- package/dist/test/ia-stub-goody.d.ts +210 -0
- package/dist/test/ia-stub-goody.js +276 -0
- package/dist/test/ia-stub-goody.js.map +1 -0
- package/dist/test/ia-stub.d.ts +22 -0
- package/dist/test/ia-stub.js +35 -0
- package/dist/test/ia-stub.js.map +1 -0
- package/dist/test/no-theater-available.test.d.ts +1 -0
- package/dist/test/no-theater-available.test.js +27 -0
- package/dist/test/no-theater-available.test.js.map +1 -0
- package/package.json +4 -3
- package/src/interfaces/event-interfaces.ts +3 -14
- package/src/interfaces/menu-interfaces.ts +3 -2
- package/src/interfaces/nav-controller-interface.ts +13 -0
- package/src/item-navigator.ts +144 -122
- package/src/loader.ts +9 -2
- package/src/no-theater-available.ts +85 -0
- package/test/book-nav-stub.ts +35 -0
- package/test/ia-item-navigator.test.ts +443 -0
- package/test/ia-stub.ts +79 -0
- package/test/no-theater-available.test.ts +32 -0
- package/demo/demo-book-manifest.json +0 -1163
- package/src/item-inspector/files-by-type/files-by-type-provider.ts +0 -43
- package/src/item-inspector/files-by-type/ia-files-by-type.ts +0 -100
- package/src/item-inspector/item-inspector.ts +0 -235
- package/src/item-inspector/share-provider.ts +0 -51
- package/src/item-inspector/visual-mod-provider.ts +0 -60
- package/src/item-navigator-js.js +0 -372
- package/test/your-webcomponent.test.ts +0 -40
package/src/item-navigator.ts
CHANGED
@@ -6,33 +6,41 @@ import {
|
|
6
6
|
property,
|
7
7
|
state,
|
8
8
|
query,
|
9
|
+
PropertyValues,
|
10
|
+
CSSResult,
|
9
11
|
} from 'lit-element';
|
10
12
|
import { nothing, TemplateResult } from 'lit-html';
|
11
13
|
import { MetadataResponse } from '@internetarchive/search-service';
|
12
|
-
import { PromisedSingleton } from '@internetarchive/promised-singleton';
|
13
14
|
import {
|
14
15
|
SharedResizeObserver,
|
15
|
-
SharedResizeObserverInterface,
|
16
16
|
SharedResizeObserverResizeHandlerInterface,
|
17
17
|
} from '@internetarchive/shared-resize-observer';
|
18
|
-
|
19
|
-
|
18
|
+
import '@internetarchive/ia-menu-slider';
|
19
|
+
|
20
20
|
import { ModalManagerInterface } from '@internetarchive/modal-manager';
|
21
21
|
import '@internetarchive/icon-ellipses/icon-ellipses';
|
22
22
|
import './loader';
|
23
23
|
|
24
24
|
import {
|
25
|
-
IntOpenModalEvent,
|
26
25
|
IntManageSideMenuEvent,
|
27
26
|
IntSetOpenMenuEvent,
|
28
27
|
IntSetMenuContentsEvent,
|
29
28
|
IntSetMenuShortcutsEvent,
|
30
29
|
IntLoadingStateUpdatedEvent,
|
30
|
+
IntManageFullscreenEvent,
|
31
31
|
} from './interfaces/event-interfaces';
|
32
32
|
|
33
|
-
import {
|
34
|
-
|
35
|
-
|
33
|
+
import {
|
34
|
+
IntMenuProvider,
|
35
|
+
IntMenuShortcut,
|
36
|
+
MenuId,
|
37
|
+
} from './interfaces/menu-interfaces';
|
38
|
+
import './no-theater-available';
|
39
|
+
|
40
|
+
export enum ItemType {
|
41
|
+
BOOK = 'bookreader',
|
42
|
+
}
|
43
|
+
@customElement('ia-item-navigator')
|
36
44
|
export class ItemNavigator
|
37
45
|
extends LitElement
|
38
46
|
implements SharedResizeObserverResizeHandlerInterface {
|
@@ -45,9 +53,9 @@ export class ItemNavigator
|
|
45
53
|
return value as MetadataResponse;
|
46
54
|
},
|
47
55
|
})
|
48
|
-
item
|
56
|
+
item?: MetadataResponse;
|
49
57
|
|
50
|
-
@property({ type: String }) itemType
|
58
|
+
@property({ type: String }) itemType?: ItemType;
|
51
59
|
|
52
60
|
@property({ type: String }) baseHost = 'archive.org';
|
53
61
|
|
@@ -61,53 +69,42 @@ export class ItemNavigator
|
|
61
69
|
})
|
62
70
|
signedIn = false;
|
63
71
|
|
64
|
-
@property({
|
65
|
-
type: Array,
|
66
|
-
hasChanged: (newVal: Array<object>, oldVal: Array<object>) => {
|
67
|
-
if (newVal !== oldVal) {
|
68
|
-
return true;
|
69
|
-
}
|
70
|
-
return false;
|
71
|
-
},
|
72
|
-
})
|
73
|
-
@property({ type: Array })
|
74
|
-
menuContents: IntMenuProvider[] = [];
|
72
|
+
@property({ type: Array }) menuContents: IntMenuProvider[] = [];
|
75
73
|
|
76
74
|
@property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];
|
77
75
|
|
78
|
-
@property({ type: Boolean, reflect: true })
|
76
|
+
@property({ type: Boolean, reflect: true, attribute: true })
|
77
|
+
viewportInFullscreen: boolean | null = null;
|
79
78
|
|
80
79
|
@property({ type: Boolean }) menuOpened = false;
|
81
80
|
|
82
|
-
@property({ type: String }) openMenu = '';
|
81
|
+
@property({ type: String }) openMenu: MenuId | '' = '';
|
83
82
|
|
84
|
-
@property({
|
85
|
-
| ModalManagerInterface
|
86
|
-
| undefined = undefined;
|
83
|
+
@property({ attribute: false }) modal?: ModalManagerInterface;
|
87
84
|
|
88
|
-
@property({ attribute: false })
|
85
|
+
@property({ attribute: false }) sharedObserver?: SharedResizeObserver;
|
89
86
|
|
90
|
-
@
|
87
|
+
@property({ type: Boolean, reflect: true, attribute: true }) loaded:
|
88
|
+
| true
|
89
|
+
| null = null;
|
91
90
|
|
92
|
-
@state()
|
91
|
+
@state() openMenuState: 'overlay' | 'shift' = 'shift';
|
93
92
|
|
94
93
|
@query('#frame') private frame!: HTMLDivElement;
|
95
94
|
|
95
|
+
@query('slot[name="theater-header"]') private headerSlot!: HTMLDivElement;
|
96
|
+
|
96
97
|
disconnectedCallback() {
|
97
|
-
this.
|
98
|
-
handler: this,
|
99
|
-
target: this.frame,
|
100
|
-
});
|
98
|
+
this.removeResizeObserver();
|
101
99
|
}
|
102
100
|
|
103
|
-
|
104
|
-
if (
|
105
|
-
this.
|
101
|
+
updated(changed: PropertyValues) {
|
102
|
+
if (changed.has('sharedObserver')) {
|
103
|
+
this.setResizeObserver();
|
106
104
|
}
|
107
|
-
|
108
|
-
this.startResizeObserver();
|
109
105
|
}
|
110
106
|
|
107
|
+
/** Shared observer */
|
111
108
|
handleResize(entry: ResizeObserverEntry): void {
|
112
109
|
const { width } = entry.contentRect;
|
113
110
|
if (width <= 600) {
|
@@ -115,46 +112,86 @@ export class ItemNavigator
|
|
115
112
|
return;
|
116
113
|
}
|
117
114
|
this.openMenuState = 'shift';
|
118
|
-
console.log('width', width);
|
119
115
|
}
|
120
116
|
|
121
|
-
private
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
117
|
+
private setResizeObserver(): void {
|
118
|
+
this.removeResizeObserver();
|
119
|
+
this.sharedObserver?.addObserver(this.resizeObserverConfig);
|
120
|
+
}
|
121
|
+
|
122
|
+
private removeResizeObserver(): void {
|
123
|
+
this.sharedObserver?.removeObserver(this.resizeObserverConfig);
|
124
|
+
}
|
127
125
|
|
128
|
-
|
129
|
-
|
126
|
+
get resizeObserverConfig(): {
|
127
|
+
handler: SharedResizeObserverResizeHandlerInterface;
|
128
|
+
target: Element;
|
129
|
+
} {
|
130
|
+
return {
|
130
131
|
handler: this,
|
131
132
|
target: this.frame,
|
132
|
-
}
|
133
|
+
};
|
134
|
+
}
|
135
|
+
/** End shared observer */
|
136
|
+
|
137
|
+
get loaderTitle() {
|
138
|
+
return this.viewportInFullscreen ? 'Internet Archive' : '';
|
139
|
+
}
|
140
|
+
|
141
|
+
get readerHeightStyle(): string {
|
142
|
+
const calcFSHeight = `calc(100vh - ${this.headerSlot?.offsetHeight}px)`;
|
143
|
+
return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
|
144
|
+
}
|
145
|
+
|
146
|
+
get loadingArea() {
|
147
|
+
return html`
|
148
|
+
<div class="loading-area">
|
149
|
+
<div class="loading-view">
|
150
|
+
<ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>
|
151
|
+
</div>
|
152
|
+
</div>
|
153
|
+
`;
|
133
154
|
}
|
134
155
|
|
135
156
|
render(): TemplateResult {
|
136
157
|
const displayReaderClass = this.loaded ? '' : 'hide';
|
137
158
|
return html`
|
138
|
-
<div id="frame" class=${this.menuClass}>
|
139
|
-
<slot name="item-nav-header"></slot>
|
159
|
+
<div id="frame" class=${`${this.menuClass}`}>
|
140
160
|
<div class="menu-and-reader">
|
141
161
|
${this.shouldRenderMenu ? this.renderSideMenu : nothing}
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
162
|
+
<slot name="theater-header"></slot>
|
163
|
+
<div
|
164
|
+
id="reader"
|
165
|
+
class=${displayReaderClass}
|
166
|
+
style=${this.readerHeightStyle}
|
167
|
+
>
|
148
168
|
${this.renderViewport}
|
149
169
|
</div>
|
170
|
+
${!this.loaded ? this.loadingArea : nothing}
|
150
171
|
</div>
|
151
172
|
</div>
|
152
173
|
`;
|
153
174
|
}
|
154
175
|
|
155
|
-
get
|
176
|
+
get noTheaterView() {
|
177
|
+
return html`<ia-no-theater-available
|
178
|
+
.identifier=${this.item?.metadata?.identifier}
|
179
|
+
@loadingStateUpdated=${this.loadingStateUpdated}
|
180
|
+
></ia-no-theater-available>`;
|
181
|
+
}
|
182
|
+
|
183
|
+
get theaterSlot() {
|
184
|
+
return html`
|
185
|
+
<slot name="theater-main" style=${this.readerHeightStyle}></slot>
|
186
|
+
`;
|
187
|
+
}
|
188
|
+
|
189
|
+
get booksViewer(): TemplateResult {
|
190
|
+
const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
|
191
|
+
|
156
192
|
return html`
|
157
193
|
<book-navigator
|
194
|
+
.modal=${this.modal}
|
158
195
|
.baseHost=${this.baseHost}
|
159
196
|
.book=${this.item}
|
160
197
|
?signedIn=${this.signedIn}
|
@@ -165,11 +202,9 @@ export class ItemNavigator
|
|
165
202
|
@updateSideMenu=${this.manageSideMenuEvents}
|
166
203
|
@menuUpdated=${this.setMenuContents}
|
167
204
|
@menuShortcutsUpdated=${this.setMenuShortcuts}
|
168
|
-
@showItemNavigatorModal=${this.openModal}
|
169
|
-
@closeItemNavigatorModal=${this.closeModal}
|
170
205
|
>
|
171
|
-
<div slot="
|
172
|
-
|
206
|
+
<div slot="theater-main" style=${slotVisibility}>
|
207
|
+
${this.theaterSlot}
|
173
208
|
</div>
|
174
209
|
</book-navigator>
|
175
210
|
`;
|
@@ -179,55 +214,27 @@ export class ItemNavigator
|
|
179
214
|
if (!this.item) {
|
180
215
|
return nothing;
|
181
216
|
}
|
182
|
-
if (this.itemType ===
|
183
|
-
return this.
|
217
|
+
if (this.itemType === ItemType.BOOK) {
|
218
|
+
return this.booksViewer;
|
184
219
|
}
|
185
|
-
return
|
186
|
-
.itemMD=${this.item}
|
187
|
-
@updateSideMenu=${this.manageSideMenuEvents}
|
188
|
-
@menuUpdated=${this.setMenuContents}
|
189
|
-
@ViewportInFullScreen=${this.manageViewportFullscreen}
|
190
|
-
@menuShortcutsUpdated=${this.setMenuShortcuts}
|
191
|
-
@showItemNavigatorModal=${this.openModal}
|
192
|
-
@closeItemNavigatorModal=${this.closeModal}
|
193
|
-
@loadingStateUpdated=${this.loadingStateUpdated}
|
194
|
-
></ia-item-inspector>`;
|
220
|
+
return this.noTheaterView;
|
195
221
|
}
|
196
222
|
|
197
223
|
loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {
|
198
224
|
const { loaded } = e.detail;
|
199
|
-
this.loaded =
|
225
|
+
this.loaded = loaded || null;
|
200
226
|
}
|
201
227
|
|
202
|
-
|
203
|
-
|
204
|
-
const
|
205
|
-
|
206
|
-
return;
|
207
|
-
}
|
208
|
-
|
209
|
-
this.modal?.showModal({
|
210
|
-
config,
|
211
|
-
customModalContent,
|
212
|
-
});
|
213
|
-
}
|
214
|
-
|
215
|
-
closeModal(): void {
|
216
|
-
this.modal?.closeModal();
|
217
|
-
}
|
228
|
+
/** Fullscreen Management */
|
229
|
+
manageViewportFullscreen(e: IntManageFullscreenEvent): void {
|
230
|
+
const fullscreenStatus = !!e.detail.isFullScreen;
|
231
|
+
this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
|
218
232
|
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
'modal-manager'
|
223
|
-
) as ModalManagerInterface;
|
224
|
-
document.body.appendChild(this.modal);
|
225
|
-
}
|
226
|
-
/* End Modal management */
|
233
|
+
const event = new CustomEvent('fullscreenToggled', {
|
234
|
+
detail: e.detail,
|
235
|
+
}) as IntManageFullscreenEvent;
|
227
236
|
|
228
|
-
|
229
|
-
manageViewportFullscreen(): void {
|
230
|
-
this.viewportInFullscreen = !this.viewportInFullscreen;
|
237
|
+
this.dispatchEvent(event);
|
231
238
|
}
|
232
239
|
/** End Fullscreen Management */
|
233
240
|
|
@@ -261,18 +268,19 @@ export class ItemNavigator
|
|
261
268
|
/** Toggles Side Menu & Sets viewable subpanel */
|
262
269
|
manageSideMenuEvents(e: IntManageSideMenuEvent): void {
|
263
270
|
const { menuId, action } = e.detail;
|
264
|
-
if (menuId) {
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
+
if (!menuId) {
|
272
|
+
return;
|
273
|
+
}
|
274
|
+
|
275
|
+
if (action === 'open') {
|
276
|
+
this.openShortcut(menuId);
|
277
|
+
} else if (action === 'toggle') {
|
278
|
+
this.openMenu = menuId;
|
279
|
+
this.toggleMenu();
|
271
280
|
}
|
272
281
|
}
|
273
282
|
|
274
283
|
get menuToggleButton() {
|
275
|
-
// <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
|
276
284
|
return html`
|
277
285
|
<button
|
278
286
|
class="toggle-menu"
|
@@ -310,19 +318,23 @@ export class ItemNavigator
|
|
310
318
|
/** End Side menu */
|
311
319
|
|
312
320
|
/** Menu Shortcuts */
|
313
|
-
openShortcut(selectedMenuId = ''): void {
|
321
|
+
openShortcut(selectedMenuId: MenuId = ''): void {
|
314
322
|
this.openMenu = selectedMenuId;
|
315
323
|
this.menuOpened = true;
|
316
324
|
}
|
317
325
|
|
318
326
|
get shortcuts(): TemplateResult {
|
319
|
-
const shortcuts = this.menuShortcuts.map(
|
320
|
-
(
|
327
|
+
const shortcuts = this.menuShortcuts.map(({ icon, id }) => {
|
328
|
+
if (id === 'fullscreen') {
|
329
|
+
return html`${icon}`;
|
330
|
+
}
|
331
|
+
|
332
|
+
return html`
|
321
333
|
<button class="shortcut ${id}" @click="${() => this.openShortcut(id)}">
|
322
334
|
${icon}
|
323
335
|
</button>
|
324
|
-
|
325
|
-
);
|
336
|
+
`;
|
337
|
+
});
|
326
338
|
return html`<div class="shortcuts">${shortcuts}</div>`;
|
327
339
|
}
|
328
340
|
/** End Menu Shortcuts */
|
@@ -334,16 +346,16 @@ export class ItemNavigator
|
|
334
346
|
return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
|
335
347
|
}
|
336
348
|
|
337
|
-
static get styles() {
|
349
|
+
static get styles(): CSSResult {
|
338
350
|
const subnavWidth = css`var(--menuWidth, 320px)`;
|
339
351
|
const transitionTiming = css`var(--animationTiming, 200ms)`;
|
340
352
|
const transitionEffect = css`transform ${transitionTiming} ease-out`;
|
341
353
|
const menuMargin = css`var(--theaterMenuMargin, 42px)`;
|
354
|
+
const theaterBg = css`var(--theaterBgColor, #000)`;
|
342
355
|
|
343
356
|
return css`
|
344
357
|
:host,
|
345
358
|
#frame,
|
346
|
-
#reader,
|
347
359
|
.menu-and-reader {
|
348
360
|
min-height: inherit;
|
349
361
|
height: inherit;
|
@@ -352,8 +364,14 @@ export class ItemNavigator
|
|
352
364
|
display: block;
|
353
365
|
}
|
354
366
|
|
367
|
+
slot {
|
368
|
+
display: block;
|
369
|
+
overflow: hidden;
|
370
|
+
}
|
371
|
+
|
355
372
|
#frame {
|
356
|
-
background-color:
|
373
|
+
background-color: ${theaterBg};
|
374
|
+
color-scheme: dark;
|
357
375
|
}
|
358
376
|
|
359
377
|
#frame.fullscreen {
|
@@ -365,9 +383,14 @@ export class ItemNavigator
|
|
365
383
|
z-index: 9;
|
366
384
|
}
|
367
385
|
|
368
|
-
|
369
|
-
|
370
|
-
|
386
|
+
.loading-area {
|
387
|
+
position: absolute;
|
388
|
+
top: 0;
|
389
|
+
left: 0;
|
390
|
+
right: 0;
|
391
|
+
bottom: 0;
|
392
|
+
height: inherit;
|
393
|
+
min-height: inherit;
|
371
394
|
}
|
372
395
|
|
373
396
|
.loading-view {
|
@@ -476,6 +499,7 @@ export class ItemNavigator
|
|
476
499
|
transition: ${transitionEffect};
|
477
500
|
}
|
478
501
|
|
502
|
+
.open.shift slot[name='theater-header'],
|
479
503
|
.open.shift #reader {
|
480
504
|
width: calc(100% - var(--menuWidth));
|
481
505
|
float: right;
|
@@ -484,5 +508,3 @@ export class ItemNavigator
|
|
484
508
|
`;
|
485
509
|
}
|
486
510
|
}
|
487
|
-
|
488
|
-
customElements.define('ia-menu-slider', IAMenuSlider);
|
package/src/loader.ts
CHANGED
@@ -1,9 +1,15 @@
|
|
1
1
|
/* eslint-disable class-methods-use-this */
|
2
2
|
import { css, html, LitElement, customElement } from 'lit-element';
|
3
|
-
import { svg } from 'lit-html';
|
3
|
+
import { svg, nothing } from 'lit-html';
|
4
4
|
|
5
5
|
@customElement('ia-itemnav-loader')
|
6
6
|
export class IAItemNavLoader extends LitElement {
|
7
|
+
static get properties() {
|
8
|
+
return {
|
9
|
+
title: { type: String },
|
10
|
+
};
|
11
|
+
}
|
12
|
+
|
7
13
|
get bookIconSvg() {
|
8
14
|
return svg`
|
9
15
|
<g class="bookIcon" transform="matrix(1 0 0 -1 28 67.362264)">
|
@@ -42,9 +48,10 @@ export class IAItemNavLoader extends LitElement {
|
|
42
48
|
}
|
43
49
|
|
44
50
|
render() {
|
51
|
+
const title = this.title ? html`<h2>${this.title}</h2>` : nothing;
|
45
52
|
return html`
|
46
53
|
<div class="place-holder">
|
47
|
-
${this.loader}
|
54
|
+
${title} ${this.loader}
|
48
55
|
<h3>Loading viewer</h3>
|
49
56
|
</div>
|
50
57
|
`;
|
@@ -0,0 +1,85 @@
|
|
1
|
+
import {
|
2
|
+
LitElement,
|
3
|
+
customElement,
|
4
|
+
property,
|
5
|
+
html,
|
6
|
+
TemplateResult,
|
7
|
+
PropertyValues,
|
8
|
+
CSSResult,
|
9
|
+
css,
|
10
|
+
} from 'lit-element';
|
11
|
+
|
12
|
+
@customElement('ia-no-theater-available')
|
13
|
+
export class IANoTheaterAvailable extends LitElement {
|
14
|
+
@property({ type: String }) identifier?: string = '';
|
15
|
+
|
16
|
+
emitLoaded(): void {
|
17
|
+
this.dispatchEvent(
|
18
|
+
new CustomEvent<{ loaded: boolean }>('loadingStateUpdated', {
|
19
|
+
detail: { loaded: true },
|
20
|
+
})
|
21
|
+
);
|
22
|
+
}
|
23
|
+
|
24
|
+
updated(changed: PropertyValues): void {
|
25
|
+
if (changed.has('identifier')) {
|
26
|
+
this.emitLoaded();
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
get downloadUrl(): string {
|
31
|
+
return `/download/${this.identifier}`;
|
32
|
+
}
|
33
|
+
|
34
|
+
render(): TemplateResult {
|
35
|
+
return html`
|
36
|
+
<section>
|
37
|
+
<h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>
|
38
|
+
<p>
|
39
|
+
This item does not appear to have any files that can be experienced on
|
40
|
+
Archive.org. <br />
|
41
|
+
Please download files in this item to interact with them on your
|
42
|
+
computer.
|
43
|
+
</p>
|
44
|
+
<a href=${this.downloadUrl}>Show all files</a>
|
45
|
+
</section>
|
46
|
+
`;
|
47
|
+
}
|
48
|
+
|
49
|
+
static get styles(): CSSResult {
|
50
|
+
return css`
|
51
|
+
:host {
|
52
|
+
color: var(--primaryTextColor, #fff);
|
53
|
+
text-align: center;
|
54
|
+
}
|
55
|
+
section {
|
56
|
+
margin: 10% auto 0;
|
57
|
+
padding: 0 5%;
|
58
|
+
}
|
59
|
+
p {
|
60
|
+
font-size: 1.4rem;
|
61
|
+
}
|
62
|
+
a {
|
63
|
+
color: var(--primaryTextColor, #fff);
|
64
|
+
background-color: rgb(25, 72, 128);
|
65
|
+
min-height: 35px;
|
66
|
+
outline: none;
|
67
|
+
cursor: pointer;
|
68
|
+
line-height: normal;
|
69
|
+
border-radius: 0.4rem;
|
70
|
+
text-align: center;
|
71
|
+
vertical-align: middle;
|
72
|
+
font-size: 1.4rem;
|
73
|
+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
74
|
+
display: inline-block;
|
75
|
+
padding: 0.85rem 1.2rem;
|
76
|
+
border: 1px solid rgb(197, 209, 223);
|
77
|
+
white-space: nowrap;
|
78
|
+
appearance: auto;
|
79
|
+
box-sizing: border-box;
|
80
|
+
user-select: none;
|
81
|
+
text-decoration: none;
|
82
|
+
}
|
83
|
+
`;
|
84
|
+
}
|
85
|
+
}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import { ModalManagerInterface } from '@internetarchive/modal-manager';
|
2
|
+
import { MetadataResponse } from '@internetarchive/search-service';
|
3
|
+
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
4
|
+
import { html, customElement, LitElement, property } from 'lit-element';
|
5
|
+
|
6
|
+
@customElement('book-navigator')
|
7
|
+
export class BookNavigator extends LitElement {
|
8
|
+
@property({ attribute: false }) modal?: ModalManagerInterface;
|
9
|
+
|
10
|
+
@property({ type: String }) baseHost?: string;
|
11
|
+
|
12
|
+
@property({ type: Object }) book?: MetadataResponse;
|
13
|
+
|
14
|
+
@property({ type: Boolean, reflect: true }) signedIn?: boolean | null = null;
|
15
|
+
|
16
|
+
@property({ type: Boolean }) sideMenuOpen?: boolean;
|
17
|
+
|
18
|
+
@property({ attribute: false }) sharedObserver?: SharedResizeObserver;
|
19
|
+
|
20
|
+
addMenuShortcut(menuId: string) {
|
21
|
+
return menuId;
|
22
|
+
}
|
23
|
+
|
24
|
+
removeMenuShortcut(menuId: string) {
|
25
|
+
return menuId;
|
26
|
+
}
|
27
|
+
|
28
|
+
sortMenuShortcuts() {}
|
29
|
+
|
30
|
+
emitMenuShortcutsUpdated() {}
|
31
|
+
|
32
|
+
render() {
|
33
|
+
return html` <p>foo</p> `;
|
34
|
+
}
|
35
|
+
}
|