@internetarchive/ia-item-navigator 0.0.0-a10 → 0.0.0-a16
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +29 -19
- package/demo/app-root.ts +37 -31
- package/demo/index.html +1 -0
- package/dist/demo/app-root.d.ts +11 -15
- package/dist/demo/app-root.js +26 -26
- package/dist/demo/app-root.js.map +1 -1
- package/dist/src/interfaces/custom-theater-interface.d.ts +20 -0
- package/dist/src/interfaces/custom-theater-interface.js +2 -0
- package/dist/src/interfaces/custom-theater-interface.js.map +1 -0
- package/dist/src/interfaces/event-interfaces.d.ts +11 -11
- package/dist/src/interfaces/event-interfaces.js.map +1 -1
- package/dist/src/interfaces/menu-interfaces.d.ts +6 -7
- package/dist/src/interfaces/menu-interfaces.js.map +1 -1
- package/dist/src/interfaces/nav-controller-interface.d.ts +11 -6
- package/dist/src/interfaces/nav-controller-interface.js.map +1 -1
- package/dist/src/item-inspector/item-inspector.d.ts +0 -47
- package/dist/src/item-inspector/item-inspector.js +253 -271
- package/dist/src/item-inspector/item-inspector.js.map +1 -1
- package/dist/src/item-navigator.d.ts +41 -27
- package/dist/src/item-navigator.js +87 -84
- package/dist/src/item-navigator.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 +22 -0
- package/dist/test/book-nav-stub.js +49 -0
- package/dist/test/book-nav-stub.js.map +1 -0
- package/dist/test/ia-item-navigator.test.d.ts +1 -0
- package/dist/test/ia-item-navigator.test.js +279 -131
- package/dist/test/ia-item-navigator.test.js.map +1 -1
- package/dist/test/ia-stub.d.ts +22 -0
- package/dist/test/ia-stub.js +34 -3
- package/dist/test/ia-stub.js.map +1 -1
- 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/custom-theater-interface.ts +28 -0
- package/src/interfaces/event-interfaces.ts +15 -11
- package/src/interfaces/menu-interfaces.ts +9 -10
- package/src/item-navigator.ts +124 -114
- package/src/no-theater-available.ts +85 -0
- package/test/book-nav-stub.ts +47 -0
- package/test/ia-item-navigator.test.ts +365 -156
- package/test/ia-stub.ts +78 -2
- package/test/no-theater-available.test.ts +32 -0
- package/demo/demo-book-manifest.json +0 -1163
- package/src/interfaces/nav-controller-interface.ts +0 -18
- 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 -296
- package/src/item-inspector/share-provider.ts +0 -51
- package/src/item-inspector/visual-mod-provider.ts +0 -65
- package/src/item-navigator-js.js +0 -372
@@ -1,60 +1,74 @@
|
|
1
|
-
import { LitElement, PropertyValues } from 'lit-element';
|
1
|
+
import { LitElement, PropertyValues, CSSResult } from 'lit-element';
|
2
2
|
import { nothing, TemplateResult } from 'lit-html';
|
3
3
|
import { MetadataResponse } from '@internetarchive/search-service';
|
4
|
-
import {
|
4
|
+
import { SharedResizeObserver, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
|
5
5
|
import '@internetarchive/ia-menu-slider';
|
6
|
-
import {
|
6
|
+
import { ModalManager } from '@internetarchive/modal-manager';
|
7
7
|
import '@internetarchive/icon-ellipses/icon-ellipses';
|
8
8
|
import './loader';
|
9
|
-
import {
|
10
|
-
import {
|
9
|
+
import { ToggleSideMenuOpenEvent, ToggleSidePanelOpenEvent, SetSideMenuContentsEvent, SetSideMenuShortcutsEvent, loadingStateUpdatedEvent, ManageFullscreenEvent } from './interfaces/event-interfaces';
|
10
|
+
import { MenuProviderInterface, MenuShortcutInterface, MenuId } from './interfaces/menu-interfaces';
|
11
|
+
import './no-theater-available';
|
12
|
+
export declare enum ItemType {
|
13
|
+
BOOK = "bookreader"
|
14
|
+
}
|
11
15
|
export declare class ItemNavigator extends LitElement implements SharedResizeObserverResizeHandlerInterface {
|
12
|
-
item
|
13
|
-
itemType
|
16
|
+
item?: MetadataResponse;
|
17
|
+
itemType?: ItemType;
|
14
18
|
baseHost: string;
|
15
19
|
signedIn: boolean;
|
16
|
-
menuContents:
|
17
|
-
menuShortcuts:
|
18
|
-
viewportInFullscreen: boolean;
|
20
|
+
menuContents: MenuProviderInterface[];
|
21
|
+
menuShortcuts: MenuShortcutInterface[];
|
22
|
+
viewportInFullscreen: boolean | null;
|
19
23
|
menuOpened: boolean;
|
20
|
-
openMenu
|
21
|
-
modal?:
|
22
|
-
sharedObserver?:
|
23
|
-
loaded:
|
24
|
+
openMenu?: MenuId;
|
25
|
+
modal?: ModalManager;
|
26
|
+
sharedObserver?: SharedResizeObserver;
|
27
|
+
loaded: true | null;
|
24
28
|
openMenuState: 'overlay' | 'shift';
|
25
29
|
private frame;
|
30
|
+
private headerSlot;
|
26
31
|
disconnectedCallback(): void;
|
27
|
-
firstUpdated(pp: any): void;
|
28
32
|
updated(changed: PropertyValues): void;
|
33
|
+
/** Shared observer */
|
29
34
|
handleResize(entry: ResizeObserverEntry): void;
|
30
|
-
private
|
35
|
+
private setResizeObserver;
|
36
|
+
private removeResizeObserver;
|
37
|
+
get resizeObserverConfig(): {
|
38
|
+
handler: SharedResizeObserverResizeHandlerInterface;
|
39
|
+
target: Element;
|
40
|
+
};
|
41
|
+
/** End shared observer */
|
31
42
|
get loaderTitle(): "" | "Internet Archive";
|
43
|
+
get readerHeightStyle(): string;
|
44
|
+
get loadingArea(): TemplateResult;
|
32
45
|
render(): TemplateResult;
|
33
|
-
get
|
46
|
+
get noTheaterView(): TemplateResult;
|
47
|
+
get theaterSlot(): TemplateResult;
|
48
|
+
get booksViewer(): TemplateResult;
|
34
49
|
get renderViewport(): TemplateResult | typeof nothing;
|
35
|
-
loadingStateUpdated(e:
|
36
|
-
/** Creates modal DOM & attaches to `<body>` */
|
37
|
-
private createModal;
|
50
|
+
loadingStateUpdated(e: loadingStateUpdatedEvent): void;
|
38
51
|
/** Fullscreen Management */
|
39
|
-
manageViewportFullscreen(e:
|
52
|
+
manageViewportFullscreen(e: ManageFullscreenEvent): void;
|
40
53
|
/** End Fullscreen Management */
|
41
54
|
/** Side menu */
|
42
55
|
get shouldRenderMenu(): boolean;
|
43
56
|
toggleMenu(): void;
|
44
57
|
closeMenu(): void;
|
45
|
-
setOpenMenu(e:
|
46
|
-
setMenuContents(e:
|
47
|
-
setMenuShortcuts(e:
|
58
|
+
setOpenMenu(e: ToggleSidePanelOpenEvent): void;
|
59
|
+
setMenuContents(e: SetSideMenuContentsEvent): void;
|
60
|
+
setMenuShortcuts(e: SetSideMenuShortcutsEvent): void;
|
48
61
|
/** Toggles Side Menu & Sets viewable subpanel */
|
49
|
-
manageSideMenuEvents(e:
|
62
|
+
manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void;
|
50
63
|
get menuToggleButton(): TemplateResult;
|
64
|
+
get selectedMenuId(): MenuId | '';
|
51
65
|
get renderSideMenu(): TemplateResult;
|
52
66
|
/** End Side menu */
|
53
67
|
/** Menu Shortcuts */
|
54
|
-
openShortcut(selectedMenuId?:
|
68
|
+
openShortcut(selectedMenuId?: MenuId): void;
|
55
69
|
get shortcuts(): TemplateResult;
|
56
70
|
/** End Menu Shortcuts */
|
57
71
|
/** Misc Render */
|
58
72
|
get menuClass(): string;
|
59
|
-
static get styles():
|
73
|
+
static get styles(): CSSResult;
|
60
74
|
}
|
@@ -1,55 +1,38 @@
|
|
1
1
|
import { __decorate } from "tslib";
|
2
|
-
/* eslint-disable import/no-duplicates */
|
3
2
|
import { css, html, LitElement, customElement, property, state, query, } from 'lit-element';
|
4
3
|
import { nothing } from 'lit-html';
|
5
4
|
import { MetadataResponse } from '@internetarchive/search-service';
|
6
|
-
import { SharedResizeObserver, } from '@internetarchive/shared-resize-observer';
|
7
|
-
// @ts-ignore
|
8
|
-
import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
|
9
5
|
import '@internetarchive/ia-menu-slider';
|
10
6
|
import '@internetarchive/icon-ellipses/icon-ellipses';
|
11
7
|
import './loader';
|
8
|
+
import './no-theater-available';
|
9
|
+
export var ItemType;
|
10
|
+
(function (ItemType) {
|
11
|
+
ItemType["BOOK"] = "bookreader";
|
12
|
+
})(ItemType || (ItemType = {}));
|
12
13
|
let ItemNavigator = class ItemNavigator extends LitElement {
|
13
14
|
constructor() {
|
14
15
|
super(...arguments);
|
15
|
-
this.item = undefined;
|
16
|
-
this.itemType = '';
|
17
16
|
this.baseHost = 'archive.org';
|
18
17
|
this.signedIn = false;
|
19
18
|
this.menuContents = [];
|
20
19
|
this.menuShortcuts = [];
|
21
|
-
this.viewportInFullscreen =
|
20
|
+
this.viewportInFullscreen = null;
|
22
21
|
this.menuOpened = false;
|
23
|
-
this.
|
24
|
-
this.loaded = false;
|
22
|
+
this.loaded = null;
|
25
23
|
this.openMenuState = 'shift';
|
26
24
|
}
|
27
25
|
disconnectedCallback() {
|
28
|
-
|
29
|
-
(_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver({
|
30
|
-
handler: this,
|
31
|
-
target: this.frame,
|
32
|
-
});
|
33
|
-
}
|
34
|
-
firstUpdated(pp) {
|
35
|
-
console.log('first updated item-nav', this.modal, pp);
|
36
|
-
if (!this.modal) {
|
37
|
-
this.createModal();
|
38
|
-
}
|
39
|
-
this.startResizeObserver();
|
26
|
+
this.removeResizeObserver();
|
40
27
|
}
|
41
28
|
updated(changed) {
|
42
|
-
if (changed.has('modal')) {
|
43
|
-
if (!this.modal) {
|
44
|
-
this.createModal();
|
45
|
-
}
|
46
|
-
}
|
47
29
|
if (changed.has('sharedObserver')) {
|
48
|
-
|
49
|
-
|
50
|
-
|
30
|
+
const oldObserver = changed.get('sharedObserver');
|
31
|
+
oldObserver === null || oldObserver === void 0 ? void 0 : oldObserver.removeObserver(this.resizeObserverConfig);
|
32
|
+
this.setResizeObserver();
|
51
33
|
}
|
52
34
|
}
|
35
|
+
/** Shared observer */
|
53
36
|
handleResize(entry) {
|
54
37
|
const { width } = entry.contentRect;
|
55
38
|
if (width <= 600) {
|
@@ -58,48 +41,78 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
58
41
|
}
|
59
42
|
this.openMenuState = 'shift';
|
60
43
|
}
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
44
|
+
setResizeObserver() {
|
45
|
+
var _a;
|
46
|
+
(_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.addObserver(this.resizeObserverConfig);
|
47
|
+
}
|
48
|
+
removeResizeObserver() {
|
49
|
+
var _a;
|
50
|
+
(_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver(this.resizeObserverConfig);
|
51
|
+
}
|
52
|
+
get resizeObserverConfig() {
|
53
|
+
return {
|
66
54
|
handler: this,
|
67
55
|
target: this.frame,
|
68
|
-
}
|
56
|
+
};
|
69
57
|
}
|
58
|
+
/** End shared observer */
|
70
59
|
get loaderTitle() {
|
71
60
|
return this.viewportInFullscreen ? 'Internet Archive' : '';
|
72
61
|
}
|
62
|
+
get readerHeightStyle() {
|
63
|
+
var _a;
|
64
|
+
const calcFSHeight = `calc(100vh - ${(_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.offsetHeight}px)`;
|
65
|
+
return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
|
66
|
+
}
|
67
|
+
get loadingArea() {
|
68
|
+
return html `
|
69
|
+
<div class="loading-area">
|
70
|
+
<div class="loading-view">
|
71
|
+
<ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>
|
72
|
+
</div>
|
73
|
+
</div>
|
74
|
+
`;
|
75
|
+
}
|
73
76
|
render() {
|
74
77
|
const displayReaderClass = this.loaded ? '' : 'hide';
|
78
|
+
console.log('render selectedMenuId', this.selectedMenuId);
|
79
|
+
console.log('render openMenu', this.openMenu);
|
75
80
|
return html `
|
76
81
|
<div id="frame" class=${`${this.menuClass}`}>
|
77
|
-
<slot name="theater-header"></slot>
|
78
82
|
<div class="menu-and-reader">
|
79
83
|
${this.shouldRenderMenu ? this.renderSideMenu : nothing}
|
80
|
-
<
|
84
|
+
<slot name="theater-header"></slot>
|
85
|
+
<div
|
86
|
+
id="reader"
|
87
|
+
class=${displayReaderClass}
|
88
|
+
style=${this.readerHeightStyle}
|
89
|
+
>
|
81
90
|
${this.renderViewport}
|
82
91
|
</div>
|
83
|
-
${!this.loaded
|
84
|
-
? html ` <div class="loading-area">
|
85
|
-
<div class="loading-view">
|
86
|
-
<ia-itemnav-loader
|
87
|
-
.title=${this.loaderTitle}
|
88
|
-
></ia-itemnav-loader>
|
89
|
-
</div>
|
90
|
-
</div>`
|
91
|
-
: nothing}
|
92
|
+
${!this.loaded ? this.loadingArea : nothing}
|
92
93
|
</div>
|
93
94
|
</div>
|
94
95
|
`;
|
95
96
|
}
|
96
|
-
get
|
97
|
+
get noTheaterView() {
|
98
|
+
var _a, _b;
|
99
|
+
return html `<ia-no-theater-available
|
100
|
+
.identifier=${(_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.identifier}
|
101
|
+
@loadingStateUpdated=${this.loadingStateUpdated}
|
102
|
+
></ia-no-theater-available>`;
|
103
|
+
}
|
104
|
+
get theaterSlot() {
|
105
|
+
return html `
|
106
|
+
<slot name="theater-main" style=${this.readerHeightStyle}></slot>
|
107
|
+
`;
|
108
|
+
}
|
109
|
+
get booksViewer() {
|
97
110
|
const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
|
98
111
|
return html `
|
99
112
|
<book-navigator
|
100
113
|
.modal=${this.modal}
|
101
114
|
.baseHost=${this.baseHost}
|
102
|
-
.
|
115
|
+
.itemMD=${this.item}
|
103
116
|
?signedIn=${this.signedIn}
|
104
117
|
?sideMenuOpen=${this.menuOpened}
|
105
118
|
.sharedObserver=${this.sharedObserver}
|
@@ -110,7 +123,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
110
123
|
@menuShortcutsUpdated=${this.setMenuShortcuts}
|
111
124
|
>
|
112
125
|
<div slot="theater-main" style=${slotVisibility}>
|
113
|
-
|
126
|
+
${this.theaterSlot}
|
114
127
|
</div>
|
115
128
|
</book-navigator>
|
116
129
|
`;
|
@@ -119,28 +132,23 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
119
132
|
if (!this.item) {
|
120
133
|
return nothing;
|
121
134
|
}
|
122
|
-
if (this.itemType ===
|
123
|
-
return this.
|
135
|
+
if (this.itemType === ItemType.BOOK) {
|
136
|
+
return this.booksViewer;
|
124
137
|
}
|
125
|
-
return
|
138
|
+
return this.noTheaterView;
|
126
139
|
}
|
127
140
|
loadingStateUpdated(e) {
|
128
141
|
const { loaded } = e.detail;
|
129
|
-
this.loaded =
|
130
|
-
console.log('******loadingStateUpdated', e.detail);
|
131
|
-
}
|
132
|
-
/** Creates modal DOM & attaches to `<body>` */
|
133
|
-
createModal() {
|
134
|
-
this.modal = document.createElement('modal-manager');
|
135
|
-
document.body.appendChild(this.modal);
|
142
|
+
this.loaded = loaded || null;
|
136
143
|
}
|
137
|
-
/* End Modal management */
|
138
144
|
/** Fullscreen Management */
|
139
145
|
manageViewportFullscreen(e) {
|
140
|
-
|
141
|
-
this.
|
146
|
+
const fullscreenStatus = !!e.detail.isFullScreen;
|
147
|
+
this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
|
148
|
+
const event = new CustomEvent('fullscreenToggled', {
|
142
149
|
detail: e.detail,
|
143
|
-
})
|
150
|
+
});
|
151
|
+
this.dispatchEvent(event);
|
144
152
|
}
|
145
153
|
/** End Fullscreen Management */
|
146
154
|
/** Side menu */
|
@@ -155,7 +163,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
155
163
|
}
|
156
164
|
setOpenMenu(e) {
|
157
165
|
const { id } = e.detail;
|
158
|
-
this.openMenu = id
|
166
|
+
this.openMenu = id !== this.openMenu ? id : undefined;
|
159
167
|
}
|
160
168
|
setMenuContents(e) {
|
161
169
|
const updatedContents = [...e.detail];
|
@@ -179,7 +187,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
179
187
|
}
|
180
188
|
}
|
181
189
|
get menuToggleButton() {
|
182
|
-
// <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
|
183
190
|
return html `
|
184
191
|
<button
|
185
192
|
class="toggle-menu"
|
@@ -194,6 +201,9 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
194
201
|
</button>
|
195
202
|
`;
|
196
203
|
}
|
204
|
+
get selectedMenuId() {
|
205
|
+
return this.openMenu || '';
|
206
|
+
}
|
197
207
|
get renderSideMenu() {
|
198
208
|
const drawerState = this.menuOpened ? '' : 'hidden';
|
199
209
|
return html `
|
@@ -202,7 +212,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
202
212
|
<div id="menu" class=${drawerState}>
|
203
213
|
<ia-menu-slider
|
204
214
|
.menus=${this.menuContents}
|
205
|
-
.selectedMenu=${this.
|
215
|
+
.selectedMenu=${this.selectedMenuId}
|
206
216
|
@menuTypeSelected=${this.setOpenMenu}
|
207
217
|
@menuSliderClosed=${this.closeMenu}
|
208
218
|
manuallyHandleClose
|
@@ -247,7 +257,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
247
257
|
return css `
|
248
258
|
:host,
|
249
259
|
#frame,
|
250
|
-
#reader,
|
251
260
|
.menu-and-reader {
|
252
261
|
min-height: inherit;
|
253
262
|
height: inherit;
|
@@ -256,6 +265,11 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
256
265
|
display: block;
|
257
266
|
}
|
258
267
|
|
268
|
+
slot {
|
269
|
+
display: block;
|
270
|
+
overflow: hidden;
|
271
|
+
}
|
272
|
+
|
259
273
|
#frame {
|
260
274
|
background-color: ${theaterBg};
|
261
275
|
color-scheme: dark;
|
@@ -270,11 +284,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
270
284
|
z-index: 9;
|
271
285
|
}
|
272
286
|
|
273
|
-
#frame.fullscreen,
|
274
|
-
#frame.fullscreen #reader {
|
275
|
-
height: 100vh;
|
276
|
-
}
|
277
|
-
|
278
287
|
.loading-area {
|
279
288
|
position: absolute;
|
280
289
|
top: 0;
|
@@ -391,6 +400,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
391
400
|
transition: ${transitionEffect};
|
392
401
|
}
|
393
402
|
|
403
|
+
.open.shift slot[name='theater-header'],
|
394
404
|
.open.shift #reader {
|
395
405
|
width: calc(100% - var(--menuWidth));
|
396
406
|
float: right;
|
@@ -427,22 +437,13 @@ __decorate([
|
|
427
437
|
})
|
428
438
|
], ItemNavigator.prototype, "signedIn", void 0);
|
429
439
|
__decorate([
|
430
|
-
property({
|
431
|
-
type: Array,
|
432
|
-
hasChanged: (newVal, oldVal) => {
|
433
|
-
if (newVal !== oldVal) {
|
434
|
-
return true;
|
435
|
-
}
|
436
|
-
return false;
|
437
|
-
},
|
438
|
-
}),
|
439
440
|
property({ type: Array })
|
440
441
|
], ItemNavigator.prototype, "menuContents", void 0);
|
441
442
|
__decorate([
|
442
443
|
property({ type: Array })
|
443
444
|
], ItemNavigator.prototype, "menuShortcuts", void 0);
|
444
445
|
__decorate([
|
445
|
-
property({ type: Boolean, reflect: true })
|
446
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
446
447
|
], ItemNavigator.prototype, "viewportInFullscreen", void 0);
|
447
448
|
__decorate([
|
448
449
|
property({ type: Boolean })
|
@@ -457,7 +458,7 @@ __decorate([
|
|
457
458
|
property({ attribute: false })
|
458
459
|
], ItemNavigator.prototype, "sharedObserver", void 0);
|
459
460
|
__decorate([
|
460
|
-
property({ type: Boolean, reflect: true })
|
461
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
461
462
|
], ItemNavigator.prototype, "loaded", void 0);
|
462
463
|
__decorate([
|
463
464
|
state()
|
@@ -465,9 +466,11 @@ __decorate([
|
|
465
466
|
__decorate([
|
466
467
|
query('#frame')
|
467
468
|
], ItemNavigator.prototype, "frame", void 0);
|
469
|
+
__decorate([
|
470
|
+
query('slot[name="theater-header"]')
|
471
|
+
], ItemNavigator.prototype, "headerSlot", void 0);
|
468
472
|
ItemNavigator = __decorate([
|
469
473
|
customElement('ia-item-navigator')
|
470
474
|
], ItemNavigator);
|
471
475
|
export { ItemNavigator };
|
472
|
-
customElements.define('ia-menu-slider', IAMenuSlider);
|
473
476
|
//# sourceMappingURL=item-navigator.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n css,\n html,\n LitElement,\n customElement,\n property,\n state,\n query,\n PropertyValues,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n SharedResizeObserver,\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\n// @ts-ignore\nimport { IAMenuSlider } from '@internetarchive/ia-menu-slider';\nimport '@internetarchive/ia-menu-slider';\n\nimport { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n IntManageSideMenuEvent,\n IntSetOpenMenuEvent,\n IntSetMenuContentsEvent,\n IntSetMenuShortcutsEvent,\n IntLoadingStateUpdatedEvent,\n IntManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';\n\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n extends LitElement\n implements SharedResizeObserverResizeHandlerInterface {\n @property({\n type: Object,\n converter: (value: string | MetadataResponse | null): MetadataResponse => {\n if (value && typeof value === 'string') {\n return new MetadataResponse(JSON.parse(atob(value)));\n }\n return value as MetadataResponse;\n },\n })\n item: MetadataResponse | undefined = undefined;\n\n @property({ type: String }) itemType = '';\n\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({\n converter: (arg: string | boolean | null) => {\n if (typeof arg === 'boolean') {\n return arg;\n }\n return arg === 'true';\n },\n })\n signedIn = false;\n\n @property({\n type: Array,\n hasChanged: (newVal: Array<object>, oldVal: Array<object>) => {\n if (newVal !== oldVal) {\n return true;\n }\n return false;\n },\n })\n @property({ type: Array })\n menuContents: IntMenuProvider[] = [];\n\n @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];\n\n @property({ type: Boolean, reflect: true }) viewportInFullscreen = false;\n\n @property({ type: Boolean }) menuOpened = false;\n\n @property({ type: String }) openMenu = '';\n\n @property({ attribute: false }) modal?: ModalManagerInterface;\n\n @property({ attribute: false })\n sharedObserver?: SharedResizeObserverInterface;\n\n @property({ type: Boolean, reflect: true }) loaded: boolean = false;\n\n @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n @query('#frame') private frame!: HTMLDivElement;\n\n disconnectedCallback() {\n this.sharedObserver?.removeObserver({\n handler: this,\n target: this.frame,\n });\n }\n\n firstUpdated(pp: any): void {\n console.log('first updated item-nav', this.modal, pp);\n if (!this.modal) {\n this.createModal();\n }\n\n this.startResizeObserver();\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('modal')) {\n if (!this.modal) {\n this.createModal();\n }\n }\n if (changed.has('sharedObserver')) {\n if (!this.sharedObserver) {\n this.startResizeObserver();\n }\n }\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n const { width } = entry.contentRect;\n if (width <= 600) {\n this.openMenuState = 'overlay';\n return;\n }\n this.openMenuState = 'shift';\n }\n\n private startResizeObserver(): void {\n if (!this.sharedObserver) {\n this.sharedObserver = new SharedResizeObserver();\n }\n this.sharedObserver.addObserver({\n handler: this,\n target: this.frame,\n });\n }\n\n get loaderTitle() {\n return this.viewportInFullscreen ? 'Internet Archive' : '';\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hide';\n return html`\n <div id=\"frame\" class=${`${this.menuClass}`}>\n <slot name=\"theater-header\"></slot>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n <div id=\"reader\" class=${displayReaderClass}>\n ${this.renderViewport}\n </div>\n ${!this.loaded\n ? html` <div class=\"loading-area\">\n <div class=\"loading-view\">\n <ia-itemnav-loader\n .title=${this.loaderTitle}\n ></ia-itemnav-loader>\n </div>\n </div>`\n : nothing}\n </div>\n </div>\n `;\n }\n\n get BooksViewer(): TemplateResult {\n const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n\n return html`\n <book-navigator\n .modal=${this.modal}\n .baseHost=${this.baseHost}\n .book=${this.item}\n ?signedIn=${this.signedIn}\n ?sideMenuOpen=${this.menuOpened}\n .sharedObserver=${this.sharedObserver}\n @ViewportInFullScreen=${this.manageViewportFullscreen}\n @loadingStateUpdated=${this.loadingStateUpdated}\n @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n >\n <div slot=\"theater-main\" style=${slotVisibility}>\n <slot name=\"theater-main\"></slot>\n </div>\n </book-navigator>\n `;\n }\n\n get renderViewport(): TemplateResult | typeof nothing {\n if (!this.item) {\n return nothing;\n }\n if (this.itemType === 'bookreader') {\n return this.BooksViewer;\n }\n return nothing;\n }\n\n loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = !!loaded;\n console.log('******loadingStateUpdated', e.detail);\n }\n\n /** Creates modal DOM & attaches to `<body>` */\n private createModal(): void {\n this.modal = document.createElement(\n 'modal-manager'\n ) as ModalManagerInterface;\n document.body.appendChild(this.modal);\n }\n /* End Modal management */\n\n /** Fullscreen Management */\n manageViewportFullscreen(e: IntManageFullscreenEvent): void {\n this.viewportInFullscreen = !!e.detail.isFullScreen;\n this.dispatchEvent(\n new CustomEvent('ViewportInFullScreen', {\n detail: e.detail,\n }) as IntManageFullscreenEvent\n );\n }\n /** End Fullscreen Management */\n\n /** Side menu */\n get shouldRenderMenu(): boolean {\n return !!this.menuContents.length;\n }\n\n toggleMenu(): void {\n this.menuOpened = !this.menuOpened;\n }\n\n closeMenu(): void {\n this.menuOpened = false;\n }\n\n setOpenMenu(e: IntSetOpenMenuEvent): void {\n const { id } = e.detail;\n this.openMenu = id === this.openMenu ? '' : id;\n }\n\n setMenuContents(e: IntSetMenuContentsEvent): void {\n const updatedContents = [...e.detail];\n this.menuContents = updatedContents;\n }\n\n setMenuShortcuts(e: IntSetMenuShortcutsEvent) {\n this.menuShortcuts = [...e.detail];\n }\n\n /** Toggles Side Menu & Sets viewable subpanel */\n manageSideMenuEvents(e: IntManageSideMenuEvent): void {\n const { menuId, action } = e.detail;\n if (!menuId) {\n return;\n }\n\n if (action === 'open') {\n this.openShortcut(menuId);\n } else if (action === 'toggle') {\n this.openMenu = menuId;\n this.toggleMenu();\n }\n }\n\n get menuToggleButton() {\n // <ia-icon icon=\"ellipses\" style=\"width: var(--iconWidth); height: var(--iconHeight);\"></ia-icon>\n return html`\n <button\n class=\"toggle-menu\"\n @click=${this.toggleMenu}\n title=\"Toggle theater side panels\"\n >\n <div>\n <ia-icon-ellipses\n style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n ></ia-icon-ellipses>\n </div>\n </button>\n `;\n }\n\n get renderSideMenu(): TemplateResult {\n const drawerState = this.menuOpened ? '' : 'hidden';\n\n return html`\n <nav>\n <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n <div id=\"menu\" class=${drawerState}>\n <ia-menu-slider\n .menus=${this.menuContents}\n .selectedMenu=${this.openMenu}\n @menuTypeSelected=${this.setOpenMenu}\n @menuSliderClosed=${this.closeMenu}\n manuallyHandleClose\n open\n ></ia-menu-slider>\n </div>\n </nav>\n `;\n }\n /** End Side menu */\n\n /** Menu Shortcuts */\n openShortcut(selectedMenuId = ''): void {\n this.openMenu = selectedMenuId;\n this.menuOpened = true;\n }\n\n get shortcuts(): TemplateResult {\n const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n if (id === 'fullscreen') {\n return html`${icon}`;\n }\n\n return html`\n <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n ${icon}\n </button>\n `;\n });\n return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n }\n /** End Menu Shortcuts */\n\n /** Misc Render */\n get menuClass(): string {\n const drawerState = this.menuOpened ? 'open' : '';\n const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n }\n\n static get styles() {\n const subnavWidth = css`var(--menuWidth, 320px)`;\n const transitionTiming = css`var(--animationTiming, 200ms)`;\n const transitionEffect = css`transform ${transitionTiming} ease-out`;\n const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n const theaterBg = css`var(--theaterBgColor, #000)`;\n\n return css`\n :host,\n #frame,\n #reader,\n .menu-and-reader {\n min-height: inherit;\n height: inherit;\n position: relative;\n overflow: hidden;\n display: block;\n }\n\n #frame {\n background-color: ${theaterBg};\n color-scheme: dark;\n }\n\n #frame.fullscreen {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 9;\n }\n\n #frame.fullscreen,\n #frame.fullscreen #reader {\n height: 100vh;\n }\n\n .loading-area {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: inherit;\n min-height: inherit;\n }\n\n .loading-view {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: inherit;\n height: inherit;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\n }\n\n .hidden {\n height: 1px;\n width: 1px;\n }\n\n button {\n cursor: pointer;\n padding: 0;\n border: 0;\n }\n\n button:focus,\n button:active {\n outline: none;\n }\n\n .menu-and-reader {\n position: relative;\n }\n\n nav button {\n background: none;\n }\n\n nav .minimized {\n background: rgba(0, 0, 0, 0.7);\n padding-top: 6px;\n position: absolute;\n width: ${menuMargin};\n z-index: 2;\n left: 0;\n border-bottom-right-radius: 5%;\n }\n\n nav .minimized button {\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin-bottom: 0.2rem;\n margin: auto;\n display: inline-flex;\n vertical-align: middle;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n width: ${menuMargin};\n height: ${menuMargin};\n }\n\n nav .minimized button.toggle-menu > * {\n border: 2px solid var(--iconStrokeColor);\n border-radius: var(--iconWidth);\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin: auto;\n }\n\n ia-icon-ellipses {\n width: var(--iconWidth);\n height: var(--iconHeight);\n }\n\n #menu {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 3;\n overflow: hidden;\n transform: translateX(-${subnavWidth});\n width: ${subnavWidth};\n transform: translateX(calc(${subnavWidth} * -1));\n transition: ${transitionEffect};\n }\n\n #reader {\n position: relative;\n z-index: 1;\n /* transition: ${transitionEffect}; */\n transform: translateX(0);\n width: 100%;\n }\n\n .open.overlay #reader {\n transition: none;\n }\n\n .open #menu {\n width: ${subnavWidth};\n transform: translateX(0);\n transition: ${transitionEffect};\n }\n\n .open.shift #reader {\n width: calc(100% - var(--menuWidth));\n float: right;\n transition: ${transitionEffect};\n }\n `;\n }\n}\n\ncustomElements.define('ia-menu-slider', IAMenuSlider);\n"]}
|
1
|
+
{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n customElement,\n property,\n state,\n query,\n PropertyValues,\n CSSResult,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n SharedResizeObserver,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport '@internetarchive/ia-menu-slider';\n\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n ToggleSideMenuOpenEvent,\n ToggleSidePanelOpenEvent,\n SetSideMenuContentsEvent,\n SetSideMenuShortcutsEvent,\n loadingStateUpdatedEvent,\n ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport {\n MenuProviderInterface,\n MenuShortcutInterface,\n MenuId,\n} from './interfaces/menu-interfaces';\nimport './no-theater-available';\n\nexport enum ItemType {\n BOOK = 'bookreader',\n}\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n extends LitElement\n implements SharedResizeObserverResizeHandlerInterface {\n @property({\n type: Object,\n converter: (value: string | MetadataResponse | null): MetadataResponse => {\n if (value && typeof value === 'string') {\n return new MetadataResponse(JSON.parse(atob(value)));\n }\n return value as MetadataResponse;\n },\n })\n item?: MetadataResponse;\n\n @property({ type: String }) itemType?: ItemType;\n\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({\n converter: (arg: string | boolean | null) => {\n if (typeof arg === 'boolean') {\n return arg;\n }\n return arg === 'true';\n },\n })\n signedIn = false;\n\n @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n @property({ type: Boolean, reflect: true, attribute: true })\n viewportInFullscreen: boolean | null = null;\n\n @property({ type: Boolean }) menuOpened = false;\n\n @property({ type: String }) openMenu?: MenuId;\n\n @property({ attribute: false }) modal?: ModalManager;\n\n @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n @property({ type: Boolean, reflect: true, attribute: true }) loaded:\n | true\n | null = null;\n\n @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n @query('#frame') private frame!: HTMLDivElement;\n\n @query('slot[name=\"theater-header\"]') private headerSlot!: HTMLDivElement;\n\n disconnectedCallback() {\n this.removeResizeObserver();\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('sharedObserver')) {\n const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;\n oldObserver?.removeObserver(this.resizeObserverConfig);\n this.setResizeObserver();\n }\n }\n\n /** Shared observer */\n handleResize(entry: ResizeObserverEntry): void {\n const { width } = entry.contentRect;\n if (width <= 600) {\n this.openMenuState = 'overlay';\n return;\n }\n this.openMenuState = 'shift';\n }\n\n private setResizeObserver(): void {\n this.sharedObserver?.addObserver(this.resizeObserverConfig);\n }\n\n private removeResizeObserver(): void {\n this.sharedObserver?.removeObserver(this.resizeObserverConfig);\n }\n\n get resizeObserverConfig(): {\n handler: SharedResizeObserverResizeHandlerInterface;\n target: Element;\n } {\n return {\n handler: this,\n target: this.frame,\n };\n }\n /** End shared observer */\n\n get loaderTitle() {\n return this.viewportInFullscreen ? 'Internet Archive' : '';\n }\n\n get readerHeightStyle(): string {\n const calcFSHeight = `calc(100vh - ${this.headerSlot?.offsetHeight}px)`;\n return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';\n }\n\n get loadingArea() {\n return html`\n <div class=\"loading-area\">\n <div class=\"loading-view\">\n <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>\n </div>\n </div>\n `;\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hide';\n console.log('render selectedMenuId', this.selectedMenuId);\n console.log('render openMenu', this.openMenu);\n return html`\n <div id=\"frame\" class=${`${this.menuClass}`}>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n <slot name=\"theater-header\"></slot>\n <div\n id=\"reader\"\n class=${displayReaderClass}\n style=${this.readerHeightStyle}\n >\n ${this.renderViewport}\n </div>\n ${!this.loaded ? this.loadingArea : nothing}\n </div>\n </div>\n `;\n }\n\n get noTheaterView() {\n return html`<ia-no-theater-available\n .identifier=${this.item?.metadata?.identifier}\n @loadingStateUpdated=${this.loadingStateUpdated}\n ></ia-no-theater-available>`;\n }\n\n get theaterSlot() {\n return html`\n <slot name=\"theater-main\" style=${this.readerHeightStyle}></slot>\n `;\n }\n\n get booksViewer(): TemplateResult {\n const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n\n return html`\n <book-navigator\n .modal=${this.modal}\n .baseHost=${this.baseHost}\n .itemMD=${this.item}\n ?signedIn=${this.signedIn}\n ?sideMenuOpen=${this.menuOpened}\n .sharedObserver=${this.sharedObserver}\n @ViewportInFullScreen=${this.manageViewportFullscreen}\n @loadingStateUpdated=${this.loadingStateUpdated}\n @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n >\n <div slot=\"theater-main\" style=${slotVisibility}>\n ${this.theaterSlot}\n </div>\n </book-navigator>\n `;\n }\n\n get renderViewport(): TemplateResult | typeof nothing {\n if (!this.item) {\n return nothing;\n }\n if (this.itemType === ItemType.BOOK) {\n return this.booksViewer;\n }\n return this.noTheaterView;\n }\n\n loadingStateUpdated(e: loadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = loaded || null;\n }\n\n /** Fullscreen Management */\n manageViewportFullscreen(e: ManageFullscreenEvent): void {\n const fullscreenStatus = !!e.detail.isFullScreen;\n this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n const event = new CustomEvent('fullscreenToggled', {\n detail: e.detail,\n }) as ManageFullscreenEvent;\n\n this.dispatchEvent(event);\n }\n /** End Fullscreen Management */\n\n /** Side menu */\n get shouldRenderMenu(): boolean {\n return !!this.menuContents.length;\n }\n\n toggleMenu(): void {\n this.menuOpened = !this.menuOpened;\n }\n\n closeMenu(): void {\n this.menuOpened = false;\n }\n\n setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n const { id } = e.detail;\n this.openMenu = id !== this.openMenu ? id : undefined;\n }\n\n setMenuContents(e: SetSideMenuContentsEvent): void {\n const updatedContents = [...e.detail];\n this.menuContents = updatedContents;\n }\n\n setMenuShortcuts(e: SetSideMenuShortcutsEvent) {\n this.menuShortcuts = [...e.detail];\n }\n\n /** Toggles Side Menu & Sets viewable subpanel */\n manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n const { menuId, action } = e.detail;\n if (!menuId) {\n return;\n }\n\n if (action === 'open') {\n this.openShortcut(menuId);\n } else if (action === 'toggle') {\n this.openMenu = menuId;\n this.toggleMenu();\n }\n }\n\n get menuToggleButton() {\n return html`\n <button\n class=\"toggle-menu\"\n @click=${this.toggleMenu}\n title=\"Toggle theater side panels\"\n >\n <div>\n <ia-icon-ellipses\n style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n ></ia-icon-ellipses>\n </div>\n </button>\n `;\n }\n\n get selectedMenuId(): MenuId | '' {\n return this.openMenu || '';\n }\n\n get renderSideMenu(): TemplateResult {\n const drawerState = this.menuOpened ? '' : 'hidden';\n return html`\n <nav>\n <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n <div id=\"menu\" class=${drawerState}>\n <ia-menu-slider\n .menus=${this.menuContents}\n .selectedMenu=${this.selectedMenuId}\n @menuTypeSelected=${this.setOpenMenu}\n @menuSliderClosed=${this.closeMenu}\n manuallyHandleClose\n open\n ></ia-menu-slider>\n </div>\n </nav>\n `;\n }\n /** End Side menu */\n\n /** Menu Shortcuts */\n openShortcut(selectedMenuId: MenuId = ''): void {\n this.openMenu = selectedMenuId;\n this.menuOpened = true;\n }\n\n get shortcuts(): TemplateResult {\n const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n if (id === 'fullscreen') {\n return html`${icon}`;\n }\n\n return html`\n <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n ${icon}\n </button>\n `;\n });\n return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n }\n /** End Menu Shortcuts */\n\n /** Misc Render */\n get menuClass(): string {\n const drawerState = this.menuOpened ? 'open' : '';\n const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n }\n\n static get styles(): CSSResult {\n const subnavWidth = css`var(--menuWidth, 320px)`;\n const transitionTiming = css`var(--animationTiming, 200ms)`;\n const transitionEffect = css`transform ${transitionTiming} ease-out`;\n const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n const theaterBg = css`var(--theaterBgColor, #000)`;\n\n return css`\n :host,\n #frame,\n .menu-and-reader {\n min-height: inherit;\n height: inherit;\n position: relative;\n overflow: hidden;\n display: block;\n }\n\n slot {\n display: block;\n overflow: hidden;\n }\n\n #frame {\n background-color: ${theaterBg};\n color-scheme: dark;\n }\n\n #frame.fullscreen {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 9;\n }\n\n .loading-area {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: inherit;\n min-height: inherit;\n }\n\n .loading-view {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: inherit;\n height: inherit;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\n }\n\n .hidden {\n height: 1px;\n width: 1px;\n }\n\n button {\n cursor: pointer;\n padding: 0;\n border: 0;\n }\n\n button:focus,\n button:active {\n outline: none;\n }\n\n .menu-and-reader {\n position: relative;\n }\n\n nav button {\n background: none;\n }\n\n nav .minimized {\n background: rgba(0, 0, 0, 0.7);\n padding-top: 6px;\n position: absolute;\n width: ${menuMargin};\n z-index: 2;\n left: 0;\n border-bottom-right-radius: 5%;\n }\n\n nav .minimized button {\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin-bottom: 0.2rem;\n margin: auto;\n display: inline-flex;\n vertical-align: middle;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n width: ${menuMargin};\n height: ${menuMargin};\n }\n\n nav .minimized button.toggle-menu > * {\n border: 2px solid var(--iconStrokeColor);\n border-radius: var(--iconWidth);\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin: auto;\n }\n\n ia-icon-ellipses {\n width: var(--iconWidth);\n height: var(--iconHeight);\n }\n\n #menu {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 3;\n overflow: hidden;\n transform: translateX(-${subnavWidth});\n width: ${subnavWidth};\n transform: translateX(calc(${subnavWidth} * -1));\n transition: ${transitionEffect};\n }\n\n #reader {\n position: relative;\n z-index: 1;\n /* transition: ${transitionEffect}; */\n transform: translateX(0);\n width: 100%;\n }\n\n .open.overlay #reader {\n transition: none;\n }\n\n .open #menu {\n width: ${subnavWidth};\n transform: translateX(0);\n transition: ${transitionEffect};\n }\n\n .open.shift slot[name='theater-header'],\n .open.shift #reader {\n width: calc(100% - var(--menuWidth));\n float: right;\n transition: ${transitionEffect};\n }\n `;\n }\n}\n"]}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit-element';
|
2
|
+
export declare class IANoTheaterAvailable extends LitElement {
|
3
|
+
identifier?: string;
|
4
|
+
emitLoaded(): void;
|
5
|
+
updated(changed: PropertyValues): void;
|
6
|
+
get downloadUrl(): string;
|
7
|
+
render(): TemplateResult;
|
8
|
+
static get styles(): CSSResult;
|
9
|
+
}
|
@@ -0,0 +1,79 @@
|
|
1
|
+
import { __decorate } from "tslib";
|
2
|
+
import { LitElement, customElement, property, html, css, } from 'lit-element';
|
3
|
+
let IANoTheaterAvailable = class IANoTheaterAvailable extends LitElement {
|
4
|
+
constructor() {
|
5
|
+
super(...arguments);
|
6
|
+
this.identifier = '';
|
7
|
+
}
|
8
|
+
emitLoaded() {
|
9
|
+
this.dispatchEvent(new CustomEvent('loadingStateUpdated', {
|
10
|
+
detail: { loaded: true },
|
11
|
+
}));
|
12
|
+
}
|
13
|
+
updated(changed) {
|
14
|
+
if (changed.has('identifier')) {
|
15
|
+
this.emitLoaded();
|
16
|
+
}
|
17
|
+
}
|
18
|
+
get downloadUrl() {
|
19
|
+
return `/download/${this.identifier}`;
|
20
|
+
}
|
21
|
+
render() {
|
22
|
+
return html `
|
23
|
+
<section>
|
24
|
+
<h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>
|
25
|
+
<p>
|
26
|
+
This item does not appear to have any files that can be experienced on
|
27
|
+
Archive.org. <br />
|
28
|
+
Please download files in this item to interact with them on your
|
29
|
+
computer.
|
30
|
+
</p>
|
31
|
+
<a href=${this.downloadUrl}>Show all files</a>
|
32
|
+
</section>
|
33
|
+
`;
|
34
|
+
}
|
35
|
+
static get styles() {
|
36
|
+
return css `
|
37
|
+
:host {
|
38
|
+
color: var(--primaryTextColor, #fff);
|
39
|
+
text-align: center;
|
40
|
+
}
|
41
|
+
section {
|
42
|
+
margin: 10% auto 0;
|
43
|
+
padding: 0 5%;
|
44
|
+
}
|
45
|
+
p {
|
46
|
+
font-size: 1.4rem;
|
47
|
+
}
|
48
|
+
a {
|
49
|
+
color: var(--primaryTextColor, #fff);
|
50
|
+
background-color: rgb(25, 72, 128);
|
51
|
+
min-height: 35px;
|
52
|
+
outline: none;
|
53
|
+
cursor: pointer;
|
54
|
+
line-height: normal;
|
55
|
+
border-radius: 0.4rem;
|
56
|
+
text-align: center;
|
57
|
+
vertical-align: middle;
|
58
|
+
font-size: 1.4rem;
|
59
|
+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
60
|
+
display: inline-block;
|
61
|
+
padding: 0.85rem 1.2rem;
|
62
|
+
border: 1px solid rgb(197, 209, 223);
|
63
|
+
white-space: nowrap;
|
64
|
+
appearance: auto;
|
65
|
+
box-sizing: border-box;
|
66
|
+
user-select: none;
|
67
|
+
text-decoration: none;
|
68
|
+
}
|
69
|
+
`;
|
70
|
+
}
|
71
|
+
};
|
72
|
+
__decorate([
|
73
|
+
property({ type: String })
|
74
|
+
], IANoTheaterAvailable.prototype, "identifier", void 0);
|
75
|
+
IANoTheaterAvailable = __decorate([
|
76
|
+
customElement('ia-no-theater-available')
|
77
|
+
], IANoTheaterAvailable);
|
78
|
+
export { IANoTheaterAvailable };
|
79
|
+
//# sourceMappingURL=no-theater-available.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"no-theater-available.js","sourceRoot":"","sources":["../../src/no-theater-available.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,aAAa,EACb,QAAQ,EACR,IAAI,EAIJ,GAAG,GACJ,MAAM,aAAa,CAAC;AAGrB,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,UAAU;IAApD;;QAC8B,eAAU,GAAY,EAAE,CAAC;IAuEvD,CAAC;IArEC,UAAU;QACR,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,qBAAqB,EAAE;YAC1D,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;SACzB,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;YAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;kBASG,IAAI,CAAC,WAAW;;KAE7B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCT,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA0B;AAD1C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAwEhC;SAxEY,oBAAoB","sourcesContent":["import {\n LitElement,\n customElement,\n property,\n html,\n TemplateResult,\n PropertyValues,\n CSSResult,\n css,\n} from 'lit-element';\n\n@customElement('ia-no-theater-available')\nexport class IANoTheaterAvailable extends LitElement {\n @property({ type: String }) identifier?: string = '';\n\n emitLoaded(): void {\n this.dispatchEvent(\n new CustomEvent<{ loaded: boolean }>('loadingStateUpdated', {\n detail: { loaded: true },\n })\n );\n }\n\n updated(changed: PropertyValues): void {\n if (changed.has('identifier')) {\n this.emitLoaded();\n }\n }\n\n get downloadUrl(): string {\n return `/download/${this.identifier}`;\n }\n\n render(): TemplateResult {\n return html`\n <section>\n <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>\n <p>\n This item does not appear to have any files that can be experienced on\n Archive.org. <br />\n Please download files in this item to interact with them on your\n computer.\n </p>\n <a href=${this.downloadUrl}>Show all files</a>\n </section>\n `;\n }\n\n static get styles(): CSSResult {\n return css`\n :host {\n color: var(--primaryTextColor, #fff);\n text-align: center;\n }\n section {\n margin: 10% auto 0;\n padding: 0 5%;\n }\n p {\n font-size: 1.4rem;\n }\n a {\n color: var(--primaryTextColor, #fff);\n background-color: rgb(25, 72, 128);\n min-height: 35px;\n outline: none;\n cursor: pointer;\n line-height: normal;\n border-radius: 0.4rem;\n text-align: center;\n vertical-align: middle;\n font-size: 1.4rem;\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n display: inline-block;\n padding: 0.85rem 1.2rem;\n border: 1px solid rgb(197, 209, 223);\n white-space: nowrap;\n appearance: auto;\n box-sizing: border-box;\n user-select: none;\n text-decoration: none;\n }\n `;\n }\n}\n"]}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import { ModalManager } from '@internetarchive/modal-manager';
|
2
|
+
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
3
|
+
import { LitElement } from 'lit-element';
|
4
|
+
import { MetadataResponse } from '@internetarchive/search-service';
|
5
|
+
import { MenuProviderInterface, MenuShortcutInterface } from '../src/interfaces/menu-interfaces';
|
6
|
+
import { CustomTheaterInterface } from '../src/interfaces/custom-theater-interface';
|
7
|
+
export declare class BookNavigator extends LitElement implements CustomTheaterInterface {
|
8
|
+
modal?: ModalManager;
|
9
|
+
itemMD?: MetadataResponse;
|
10
|
+
baseHost?: string;
|
11
|
+
signedIn?: boolean | null;
|
12
|
+
sideMenuOpen: boolean;
|
13
|
+
sharedObserver?: SharedResizeObserver;
|
14
|
+
menuProviders?: MenuProviderInterface[];
|
15
|
+
menuShortcuts?: MenuShortcutInterface[];
|
16
|
+
emitLoadingStatusUpdate(): void;
|
17
|
+
addMenuShortcut(menuId: string): string;
|
18
|
+
removeMenuShortcut(menuId: string): string;
|
19
|
+
sortMenuShortcuts(): void;
|
20
|
+
emitMenuShortcutsUpdated(): void;
|
21
|
+
render(): import("lit-element").TemplateResult;
|
22
|
+
}
|