@internetarchive/ia-item-navigator 0.0.0-a9 → 0.0.2-a2
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 +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 -28
- package/dist/src/item-navigator.js +96 -113
- 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 +133 -144
- 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,61 +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 { SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
|
|
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 {
|
|
11
|
-
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
|
+
}
|
|
12
15
|
export declare class ItemNavigator extends LitElement implements SharedResizeObserverResizeHandlerInterface {
|
|
13
|
-
item
|
|
14
|
-
itemType
|
|
16
|
+
item?: MetadataResponse;
|
|
17
|
+
itemType?: ItemType;
|
|
15
18
|
baseHost: string;
|
|
16
19
|
signedIn: boolean;
|
|
17
|
-
menuContents:
|
|
18
|
-
menuShortcuts:
|
|
19
|
-
viewportInFullscreen: boolean;
|
|
20
|
+
menuContents: MenuProviderInterface[];
|
|
21
|
+
menuShortcuts: MenuShortcutInterface[];
|
|
22
|
+
viewportInFullscreen: boolean | null;
|
|
20
23
|
menuOpened: boolean;
|
|
21
|
-
openMenu
|
|
22
|
-
modal?:
|
|
23
|
-
sharedObserver?:
|
|
24
|
-
loaded:
|
|
24
|
+
openMenu?: MenuId;
|
|
25
|
+
modal?: ModalManager;
|
|
26
|
+
sharedObserver?: SharedResizeObserver;
|
|
27
|
+
loaded: true | null;
|
|
25
28
|
openMenuState: 'overlay' | 'shift';
|
|
26
29
|
private frame;
|
|
30
|
+
private headerSlot;
|
|
27
31
|
disconnectedCallback(): void;
|
|
28
|
-
firstUpdated(pp: any): void;
|
|
29
32
|
updated(changed: PropertyValues): void;
|
|
33
|
+
/** Shared observer */
|
|
30
34
|
handleResize(entry: ResizeObserverEntry): void;
|
|
31
|
-
private
|
|
35
|
+
private setResizeObserver;
|
|
36
|
+
private removeResizeObserver;
|
|
37
|
+
get resizeObserverConfig(): {
|
|
38
|
+
handler: SharedResizeObserverResizeHandlerInterface;
|
|
39
|
+
target: Element;
|
|
40
|
+
};
|
|
41
|
+
/** End shared observer */
|
|
32
42
|
get loaderTitle(): "" | "Internet Archive";
|
|
43
|
+
get readerHeightStyle(): string;
|
|
44
|
+
get loadingArea(): TemplateResult;
|
|
33
45
|
render(): TemplateResult;
|
|
34
|
-
get
|
|
46
|
+
get noTheaterView(): TemplateResult;
|
|
47
|
+
get theaterSlot(): TemplateResult;
|
|
48
|
+
get booksViewer(): TemplateResult;
|
|
35
49
|
get renderViewport(): TemplateResult | typeof nothing;
|
|
36
|
-
loadingStateUpdated(e:
|
|
37
|
-
/** Creates modal DOM & attaches to `<body>` */
|
|
38
|
-
private createModal;
|
|
50
|
+
loadingStateUpdated(e: loadingStateUpdatedEvent): void;
|
|
39
51
|
/** Fullscreen Management */
|
|
40
|
-
manageViewportFullscreen(e:
|
|
52
|
+
manageViewportFullscreen(e: ManageFullscreenEvent): void;
|
|
41
53
|
/** End Fullscreen Management */
|
|
42
54
|
/** Side menu */
|
|
43
55
|
get shouldRenderMenu(): boolean;
|
|
44
56
|
toggleMenu(): void;
|
|
45
57
|
closeMenu(): void;
|
|
46
|
-
setOpenMenu(e:
|
|
47
|
-
setMenuContents(e:
|
|
48
|
-
setMenuShortcuts(e:
|
|
58
|
+
setOpenMenu(e: ToggleSidePanelOpenEvent): void;
|
|
59
|
+
setMenuContents(e: SetSideMenuContentsEvent): void;
|
|
60
|
+
setMenuShortcuts(e: SetSideMenuShortcutsEvent): void;
|
|
49
61
|
/** Toggles Side Menu & Sets viewable subpanel */
|
|
50
|
-
manageSideMenuEvents(e:
|
|
62
|
+
manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void;
|
|
51
63
|
get menuToggleButton(): TemplateResult;
|
|
64
|
+
get selectedMenuId(): MenuId | '';
|
|
52
65
|
get renderSideMenu(): TemplateResult;
|
|
53
66
|
/** End Side menu */
|
|
54
67
|
/** Menu Shortcuts */
|
|
55
|
-
openShortcut(selectedMenuId?:
|
|
68
|
+
openShortcut(selectedMenuId?: MenuId): void;
|
|
56
69
|
get shortcuts(): TemplateResult;
|
|
57
70
|
/** End Menu Shortcuts */
|
|
58
71
|
/** Misc Render */
|
|
59
72
|
get menuClass(): string;
|
|
60
|
-
static get styles():
|
|
73
|
+
static get styles(): CSSResult;
|
|
61
74
|
}
|
|
@@ -1,57 +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';
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
import './no-theater-available';
|
|
9
|
+
export var ItemType;
|
|
10
|
+
(function (ItemType) {
|
|
11
|
+
ItemType["BOOK"] = "bookreader";
|
|
12
|
+
})(ItemType || (ItemType = {}));
|
|
14
13
|
let ItemNavigator = class ItemNavigator extends LitElement {
|
|
15
14
|
constructor() {
|
|
16
15
|
super(...arguments);
|
|
17
|
-
this.item = undefined;
|
|
18
|
-
this.itemType = '';
|
|
19
16
|
this.baseHost = 'archive.org';
|
|
20
17
|
this.signedIn = false;
|
|
21
18
|
this.menuContents = [];
|
|
22
19
|
this.menuShortcuts = [];
|
|
23
|
-
this.viewportInFullscreen =
|
|
20
|
+
this.viewportInFullscreen = null;
|
|
24
21
|
this.menuOpened = false;
|
|
25
|
-
this.
|
|
26
|
-
this.loaded = false;
|
|
22
|
+
this.loaded = null;
|
|
27
23
|
this.openMenuState = 'shift';
|
|
28
24
|
}
|
|
29
25
|
disconnectedCallback() {
|
|
30
|
-
|
|
31
|
-
(_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver({
|
|
32
|
-
handler: this,
|
|
33
|
-
target: this.frame,
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
firstUpdated(pp) {
|
|
37
|
-
console.log('first updated item-nav', this.modal, pp);
|
|
38
|
-
if (!this.modal) {
|
|
39
|
-
this.createModal();
|
|
40
|
-
}
|
|
41
|
-
this.startResizeObserver();
|
|
26
|
+
this.removeResizeObserver();
|
|
42
27
|
}
|
|
43
28
|
updated(changed) {
|
|
44
|
-
if (changed.has('modal')) {
|
|
45
|
-
if (!this.modal) {
|
|
46
|
-
this.createModal();
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
29
|
if (changed.has('sharedObserver')) {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
30
|
+
const oldObserver = changed.get('sharedObserver');
|
|
31
|
+
oldObserver === null || oldObserver === void 0 ? void 0 : oldObserver.removeObserver(this.resizeObserverConfig);
|
|
32
|
+
this.setResizeObserver();
|
|
53
33
|
}
|
|
54
34
|
}
|
|
35
|
+
/** Shared observer */
|
|
55
36
|
handleResize(entry) {
|
|
56
37
|
const { width } = entry.contentRect;
|
|
57
38
|
if (width <= 600) {
|
|
@@ -60,48 +41,76 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
60
41
|
}
|
|
61
42
|
this.openMenuState = 'shift';
|
|
62
43
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
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 {
|
|
68
54
|
handler: this,
|
|
69
55
|
target: this.frame,
|
|
70
|
-
}
|
|
56
|
+
};
|
|
71
57
|
}
|
|
58
|
+
/** End shared observer */
|
|
72
59
|
get loaderTitle() {
|
|
73
60
|
return this.viewportInFullscreen ? 'Internet Archive' : '';
|
|
74
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
|
+
}
|
|
75
76
|
render() {
|
|
76
|
-
const displayReaderClass = this.loaded ? '' : '
|
|
77
|
+
const displayReaderClass = this.loaded ? '' : 'hidden';
|
|
77
78
|
return html `
|
|
78
79
|
<div id="frame" class=${`${this.menuClass}`}>
|
|
79
|
-
<slot name="theater-header"></slot>
|
|
80
80
|
<div class="menu-and-reader">
|
|
81
81
|
${this.shouldRenderMenu ? this.renderSideMenu : nothing}
|
|
82
|
-
<
|
|
82
|
+
<slot name="theater-header"></slot>
|
|
83
|
+
<div
|
|
84
|
+
id="reader"
|
|
85
|
+
class=${displayReaderClass}
|
|
86
|
+
style=${this.readerHeightStyle}
|
|
87
|
+
>
|
|
83
88
|
${this.renderViewport}
|
|
84
89
|
</div>
|
|
85
|
-
${!this.loaded
|
|
86
|
-
? html ` <div class="loading-area">
|
|
87
|
-
<div class="loading-view">
|
|
88
|
-
<ia-itemnav-loader
|
|
89
|
-
.title=${this.loaderTitle}
|
|
90
|
-
></ia-itemnav-loader>
|
|
91
|
-
</div>
|
|
92
|
-
</div>`
|
|
93
|
-
: nothing}
|
|
90
|
+
${!this.loaded ? this.loadingArea : nothing}
|
|
94
91
|
</div>
|
|
95
92
|
</div>
|
|
96
93
|
`;
|
|
97
94
|
}
|
|
98
|
-
get
|
|
95
|
+
get noTheaterView() {
|
|
96
|
+
var _a, _b;
|
|
97
|
+
return html `<ia-no-theater-available
|
|
98
|
+
.identifier=${(_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.identifier}
|
|
99
|
+
@loadingStateUpdated=${this.loadingStateUpdated}
|
|
100
|
+
></ia-no-theater-available>`;
|
|
101
|
+
}
|
|
102
|
+
get theaterSlot() {
|
|
103
|
+
return html `
|
|
104
|
+
<slot name="theater-main" style=${this.readerHeightStyle}></slot>
|
|
105
|
+
`;
|
|
106
|
+
}
|
|
107
|
+
get booksViewer() {
|
|
99
108
|
const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
|
|
100
109
|
return html `
|
|
101
110
|
<book-navigator
|
|
102
111
|
.modal=${this.modal}
|
|
103
112
|
.baseHost=${this.baseHost}
|
|
104
|
-
.
|
|
113
|
+
.itemMD=${this.item}
|
|
105
114
|
?signedIn=${this.signedIn}
|
|
106
115
|
?sideMenuOpen=${this.menuOpened}
|
|
107
116
|
.sharedObserver=${this.sharedObserver}
|
|
@@ -112,7 +121,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
112
121
|
@menuShortcutsUpdated=${this.setMenuShortcuts}
|
|
113
122
|
>
|
|
114
123
|
<div slot="theater-main" style=${slotVisibility}>
|
|
115
|
-
|
|
124
|
+
${this.theaterSlot}
|
|
116
125
|
</div>
|
|
117
126
|
</book-navigator>
|
|
118
127
|
`;
|
|
@@ -121,40 +130,23 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
121
130
|
if (!this.item) {
|
|
122
131
|
return nothing;
|
|
123
132
|
}
|
|
124
|
-
if (this.itemType ===
|
|
125
|
-
return this.
|
|
133
|
+
if (this.itemType === ItemType.BOOK) {
|
|
134
|
+
return this.booksViewer;
|
|
126
135
|
}
|
|
127
|
-
return
|
|
128
|
-
class="meow"
|
|
129
|
-
.itemMD=${this.item}
|
|
130
|
-
.modal=${this.modal}
|
|
131
|
-
@updateSideMenu=${this.manageSideMenuEvents}
|
|
132
|
-
@menuUpdated=${this.setMenuContents}
|
|
133
|
-
@ViewportInFullScreen=${this.manageViewportFullscreen}
|
|
134
|
-
@menuShortcutsUpdated=${this.setMenuShortcuts}
|
|
135
|
-
@loadingStateUpdated=${(e) => {
|
|
136
|
-
console.log('loadingStateUpdatedloadingStateUpdatedloadingStateUpdatedloadingStateUpdated');
|
|
137
|
-
this.loadingStateUpdated(e);
|
|
138
|
-
}}
|
|
139
|
-
></ia-item-inspector>`;
|
|
136
|
+
return this.noTheaterView;
|
|
140
137
|
}
|
|
141
138
|
loadingStateUpdated(e) {
|
|
142
139
|
const { loaded } = e.detail;
|
|
143
|
-
this.loaded =
|
|
144
|
-
console.log('******loadingStateUpdated', e.detail);
|
|
140
|
+
this.loaded = loaded || null;
|
|
145
141
|
}
|
|
146
|
-
/** Creates modal DOM & attaches to `<body>` */
|
|
147
|
-
createModal() {
|
|
148
|
-
this.modal = document.createElement('modal-manager');
|
|
149
|
-
document.body.appendChild(this.modal);
|
|
150
|
-
}
|
|
151
|
-
/* End Modal management */
|
|
152
142
|
/** Fullscreen Management */
|
|
153
143
|
manageViewportFullscreen(e) {
|
|
154
|
-
|
|
155
|
-
this.
|
|
144
|
+
const fullscreenStatus = !!e.detail.isFullScreen;
|
|
145
|
+
this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
|
|
146
|
+
const event = new CustomEvent('fullscreenToggled', {
|
|
156
147
|
detail: e.detail,
|
|
157
|
-
})
|
|
148
|
+
});
|
|
149
|
+
this.dispatchEvent(event);
|
|
158
150
|
}
|
|
159
151
|
/** End Fullscreen Management */
|
|
160
152
|
/** Side menu */
|
|
@@ -169,7 +161,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
169
161
|
}
|
|
170
162
|
setOpenMenu(e) {
|
|
171
163
|
const { id } = e.detail;
|
|
172
|
-
this.openMenu = id
|
|
164
|
+
this.openMenu = id !== this.openMenu ? id : undefined;
|
|
173
165
|
}
|
|
174
166
|
setMenuContents(e) {
|
|
175
167
|
const updatedContents = [...e.detail];
|
|
@@ -193,7 +185,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
193
185
|
}
|
|
194
186
|
}
|
|
195
187
|
get menuToggleButton() {
|
|
196
|
-
// <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
|
|
197
188
|
return html `
|
|
198
189
|
<button
|
|
199
190
|
class="toggle-menu"
|
|
@@ -208,6 +199,9 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
208
199
|
</button>
|
|
209
200
|
`;
|
|
210
201
|
}
|
|
202
|
+
get selectedMenuId() {
|
|
203
|
+
return this.openMenu || '';
|
|
204
|
+
}
|
|
211
205
|
get renderSideMenu() {
|
|
212
206
|
const drawerState = this.menuOpened ? '' : 'hidden';
|
|
213
207
|
return html `
|
|
@@ -216,7 +210,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
216
210
|
<div id="menu" class=${drawerState}>
|
|
217
211
|
<ia-menu-slider
|
|
218
212
|
.menus=${this.menuContents}
|
|
219
|
-
.selectedMenu=${this.
|
|
213
|
+
.selectedMenu=${this.selectedMenuId}
|
|
220
214
|
@menuTypeSelected=${this.setOpenMenu}
|
|
221
215
|
@menuSliderClosed=${this.closeMenu}
|
|
222
216
|
manuallyHandleClose
|
|
@@ -261,7 +255,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
261
255
|
return css `
|
|
262
256
|
:host,
|
|
263
257
|
#frame,
|
|
264
|
-
#reader,
|
|
265
258
|
.menu-and-reader {
|
|
266
259
|
min-height: inherit;
|
|
267
260
|
height: inherit;
|
|
@@ -270,6 +263,20 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
270
263
|
display: block;
|
|
271
264
|
}
|
|
272
265
|
|
|
266
|
+
:host,
|
|
267
|
+
#frame,
|
|
268
|
+
.menu-and-reader,
|
|
269
|
+
.loading-area,
|
|
270
|
+
.loading-view {
|
|
271
|
+
min-height: inherit;
|
|
272
|
+
height: inherit;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
slot {
|
|
276
|
+
display: block;
|
|
277
|
+
overflow: hidden;
|
|
278
|
+
}
|
|
279
|
+
|
|
273
280
|
#frame {
|
|
274
281
|
background-color: ${theaterBg};
|
|
275
282
|
color-scheme: dark;
|
|
@@ -284,27 +291,10 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
284
291
|
z-index: 9;
|
|
285
292
|
}
|
|
286
293
|
|
|
287
|
-
#frame.fullscreen,
|
|
288
|
-
#frame.fullscreen #reader {
|
|
289
|
-
height: 100vh;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
.loading-area {
|
|
293
|
-
position: absolute;
|
|
294
|
-
top: 0;
|
|
295
|
-
left: 0;
|
|
296
|
-
right: 0;
|
|
297
|
-
bottom: 0;
|
|
298
|
-
height: inherit;
|
|
299
|
-
min-height: inherit;
|
|
300
|
-
}
|
|
301
|
-
|
|
302
294
|
.loading-view {
|
|
303
295
|
display: flex;
|
|
304
296
|
align-items: center;
|
|
305
297
|
justify-content: center;
|
|
306
|
-
min-height: inherit;
|
|
307
|
-
height: inherit;
|
|
308
298
|
}
|
|
309
299
|
|
|
310
300
|
ia-itemnav-loader {
|
|
@@ -313,8 +303,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
313
303
|
}
|
|
314
304
|
|
|
315
305
|
.hidden {
|
|
316
|
-
|
|
317
|
-
width: 1px;
|
|
306
|
+
display: none;
|
|
318
307
|
}
|
|
319
308
|
|
|
320
309
|
button {
|
|
@@ -405,6 +394,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
|
405
394
|
transition: ${transitionEffect};
|
|
406
395
|
}
|
|
407
396
|
|
|
397
|
+
.open.shift slot[name='theater-header'],
|
|
408
398
|
.open.shift #reader {
|
|
409
399
|
width: calc(100% - var(--menuWidth));
|
|
410
400
|
float: right;
|
|
@@ -441,22 +431,13 @@ __decorate([
|
|
|
441
431
|
})
|
|
442
432
|
], ItemNavigator.prototype, "signedIn", void 0);
|
|
443
433
|
__decorate([
|
|
444
|
-
property({
|
|
445
|
-
type: Array,
|
|
446
|
-
hasChanged: (newVal, oldVal) => {
|
|
447
|
-
if (newVal !== oldVal) {
|
|
448
|
-
return true;
|
|
449
|
-
}
|
|
450
|
-
return false;
|
|
451
|
-
},
|
|
452
|
-
}),
|
|
453
434
|
property({ type: Array })
|
|
454
435
|
], ItemNavigator.prototype, "menuContents", void 0);
|
|
455
436
|
__decorate([
|
|
456
437
|
property({ type: Array })
|
|
457
438
|
], ItemNavigator.prototype, "menuShortcuts", void 0);
|
|
458
439
|
__decorate([
|
|
459
|
-
property({ type: Boolean, reflect: true })
|
|
440
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
|
460
441
|
], ItemNavigator.prototype, "viewportInFullscreen", void 0);
|
|
461
442
|
__decorate([
|
|
462
443
|
property({ type: Boolean })
|
|
@@ -471,7 +452,7 @@ __decorate([
|
|
|
471
452
|
property({ attribute: false })
|
|
472
453
|
], ItemNavigator.prototype, "sharedObserver", void 0);
|
|
473
454
|
__decorate([
|
|
474
|
-
property({ type: Boolean, reflect: true })
|
|
455
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
|
475
456
|
], ItemNavigator.prototype, "loaded", void 0);
|
|
476
457
|
__decorate([
|
|
477
458
|
state()
|
|
@@ -479,9 +460,11 @@ __decorate([
|
|
|
479
460
|
__decorate([
|
|
480
461
|
query('#frame')
|
|
481
462
|
], ItemNavigator.prototype, "frame", void 0);
|
|
463
|
+
__decorate([
|
|
464
|
+
query('slot[name="theater-header"]')
|
|
465
|
+
], ItemNavigator.prototype, "headerSlot", void 0);
|
|
482
466
|
ItemNavigator = __decorate([
|
|
483
467
|
customElement('ia-item-navigator')
|
|
484
468
|
], ItemNavigator);
|
|
485
469
|
export { ItemNavigator };
|
|
486
|
-
customElements.define('ia-menu-slider', IAMenuSlider);
|
|
487
470
|
//# 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// import { IaItemInspector } from './item-inspector/item-inspector';\nimport './item-inspector/item-inspector';\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 }) sharedObserver?: any; // PromisedSingleton<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 html` <ia-item-inspector\n class=\"meow\"\n .itemMD=${this.item}\n .modal=${this.modal}\n @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @ViewportInFullScreen=${this.manageViewportFullscreen}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n @loadingStateUpdated=${(e: IntLoadingStateUpdatedEvent) => {\n console.log(\n 'loadingStateUpdatedloadingStateUpdatedloadingStateUpdatedloadingStateUpdated'\n );\n this.loadingStateUpdated(e);\n }}\n ></ia-item-inspector>`;\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 ? '' : 'hidden';\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 :host,\n #frame,\n .menu-and-reader,\n .loading-area,\n .loading-view {\n min-height: inherit;\n height: inherit;\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-view {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\n }\n\n .hidden {\n display: none;\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
|
+
}
|