@internetarchive/ia-item-navigator 0.0.0-a8 → 0.0.2-a1
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 +50 -50
- package/demo/index.html +1 -0
- package/dist/demo/app-root.d.ts +19 -15
- package/dist/demo/app-root.js +36 -39
- 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 -270
- package/dist/src/item-inspector/item-inspector.js.map +1 -1
- package/dist/src/item-navigator.d.ts +45 -28
- package/dist/src/item-navigator.js +122 -115
- package/dist/src/item-navigator.js.map +1 -1
- package/dist/src/loader.d.ts +5 -0
- package/dist/src/loader.js +8 -2
- package/dist/src/loader.js.map +1 -1
- package/dist/src/no-theater-available.d.ts +9 -0
- package/dist/src/no-theater-available.js +79 -0
- package/dist/src/no-theater-available.js.map +1 -0
- package/dist/test/book-nav-stub.d.ts +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 +2 -0
- package/dist/test/ia-item-navigator.test.js +317 -0
- package/dist/test/ia-item-navigator.test.js.map +1 -0
- package/dist/test/ia-stub-goody.d.ts +210 -0
- package/dist/test/ia-stub-goody.js +276 -0
- package/dist/test/ia-stub-goody.js.map +1 -0
- package/dist/test/ia-stub.d.ts +22 -0
- package/dist/test/ia-stub.js +35 -0
- package/dist/test/ia-stub.js.map +1 -0
- package/dist/test/no-theater-available.test.d.ts +1 -0
- package/dist/test/no-theater-available.test.js +27 -0
- package/dist/test/no-theater-available.test.js.map +1 -0
- package/package.json +4 -3
- package/src/interfaces/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 +165 -145
- package/src/loader.ts +9 -2
- package/src/no-theater-available.ts +85 -0
- package/test/book-nav-stub.ts +47 -0
- package/test/ia-item-navigator.test.ts +438 -0
- package/test/ia-stub.ts +79 -0
- package/test/no-theater-available.test.ts +32 -0
- package/demo/demo-book-manifest.json +0 -1163
- package/src/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 -295
- 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
- package/test/your-webcomponent.test.ts +0 -40
@@ -1,36 +1,40 @@
|
|
1
|
-
import {
|
1
|
+
import {
|
2
|
+
MenuProviderInterface,
|
3
|
+
MenuShortcutInterface,
|
4
|
+
MenuId,
|
5
|
+
} from './menu-interfaces';
|
2
6
|
|
3
7
|
/** Toggles Menu && Sets open panel */
|
4
|
-
export interface
|
8
|
+
export interface ToggleSideMenuOpenEvent extends CustomEvent {
|
5
9
|
type: 'updateSideMenu';
|
6
10
|
detail: {
|
7
|
-
menuId:
|
11
|
+
menuId: MenuId | undefined | '';
|
8
12
|
action: 'open' | 'toggle' | '';
|
9
13
|
};
|
10
14
|
}
|
11
15
|
|
12
16
|
/** Sets open panel */
|
13
|
-
export interface
|
17
|
+
export interface ToggleSidePanelOpenEvent extends CustomEvent {
|
14
18
|
type: 'menuTypeSelected';
|
15
19
|
detail: {
|
16
|
-
id:
|
20
|
+
id: MenuId | '';
|
17
21
|
};
|
18
22
|
}
|
19
23
|
|
20
24
|
/** Sets menu order that is displayed */
|
21
|
-
export interface
|
25
|
+
export interface SetSideMenuContentsEvent extends CustomEvent {
|
22
26
|
type: 'menuUpdated';
|
23
|
-
detail:
|
27
|
+
detail: MenuProviderInterface[];
|
24
28
|
}
|
25
29
|
|
26
30
|
/** Sets menu shortcuts that is displayed */
|
27
|
-
export interface
|
31
|
+
export interface SetSideMenuShortcutsEvent extends CustomEvent {
|
28
32
|
type: 'menuUpdated';
|
29
|
-
detail:
|
33
|
+
detail: MenuShortcutInterface[];
|
30
34
|
}
|
31
35
|
|
32
36
|
/** Toggles fullscreen mode */
|
33
|
-
export interface
|
37
|
+
export interface ManageFullscreenEvent extends CustomEvent {
|
34
38
|
type: 'ViewportInFullScreen';
|
35
39
|
detail: {
|
36
40
|
isFullScreen: boolean;
|
@@ -38,7 +42,7 @@ export interface IntManageFullscreenEvent extends CustomEvent {
|
|
38
42
|
}
|
39
43
|
|
40
44
|
/** Toggles loading view */
|
41
|
-
export interface
|
45
|
+
export interface loadingStateUpdatedEvent extends CustomEvent {
|
42
46
|
type: 'loadingStateUpdated';
|
43
47
|
detail: {
|
44
48
|
loaded: boolean;
|
@@ -1,14 +1,13 @@
|
|
1
1
|
import { TemplateResult } from 'lit-html';
|
2
2
|
import { MetadataResponse } from '@internetarchive/search-service';
|
3
3
|
|
4
|
-
export
|
4
|
+
export type MenuId = string;
|
5
|
+
export interface MenuShortcutInterface {
|
5
6
|
icon: TemplateResult;
|
6
|
-
id:
|
7
|
+
id: MenuId;
|
7
8
|
}
|
8
9
|
|
9
|
-
export interface
|
10
|
-
icon: TemplateResult;
|
11
|
-
id: string;
|
10
|
+
export interface MenuDetailsInterface extends MenuShortcutInterface {
|
12
11
|
label: string;
|
13
12
|
menuDetails?: TemplateResult;
|
14
13
|
selected?: boolean;
|
@@ -16,13 +15,13 @@ export interface IntMenuIconAndDetails extends IntMenuShortcut {
|
|
16
15
|
href?: string;
|
17
16
|
}
|
18
17
|
|
19
|
-
export interface
|
18
|
+
export interface MenuProviderBaseConfigInterface {
|
20
19
|
item: MetadataResponse;
|
21
20
|
baseHost: string;
|
22
21
|
subPrefix: string;
|
23
22
|
updated?: any;
|
24
23
|
}
|
25
|
-
export interface
|
26
|
-
extends
|
27
|
-
|
28
|
-
|
24
|
+
export interface MenuProviderInterface
|
25
|
+
extends MenuProviderBaseConfigInterface,
|
26
|
+
MenuDetailsInterface,
|
27
|
+
MenuShortcutInterface {}
|
package/src/item-navigator.ts
CHANGED
@@ -6,33 +6,41 @@ import {
|
|
6
6
|
property,
|
7
7
|
state,
|
8
8
|
query,
|
9
|
+
PropertyValues,
|
10
|
+
CSSResult,
|
9
11
|
} from 'lit-element';
|
10
12
|
import { nothing, TemplateResult } from 'lit-html';
|
11
13
|
import { MetadataResponse } from '@internetarchive/search-service';
|
12
|
-
import { PromisedSingleton } from '@internetarchive/promised-singleton';
|
13
14
|
import {
|
14
15
|
SharedResizeObserver,
|
15
|
-
SharedResizeObserverInterface,
|
16
16
|
SharedResizeObserverResizeHandlerInterface,
|
17
17
|
} from '@internetarchive/shared-resize-observer';
|
18
|
-
|
19
|
-
|
20
|
-
import {
|
18
|
+
import '@internetarchive/ia-menu-slider';
|
19
|
+
|
20
|
+
import { ModalManager } from '@internetarchive/modal-manager';
|
21
21
|
import '@internetarchive/icon-ellipses/icon-ellipses';
|
22
22
|
import './loader';
|
23
23
|
|
24
24
|
import {
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
25
|
+
ToggleSideMenuOpenEvent,
|
26
|
+
ToggleSidePanelOpenEvent,
|
27
|
+
SetSideMenuContentsEvent,
|
28
|
+
SetSideMenuShortcutsEvent,
|
29
|
+
loadingStateUpdatedEvent,
|
30
|
+
ManageFullscreenEvent,
|
31
31
|
} from './interfaces/event-interfaces';
|
32
32
|
|
33
|
-
import {
|
34
|
-
|
35
|
-
|
33
|
+
import {
|
34
|
+
MenuProviderInterface,
|
35
|
+
MenuShortcutInterface,
|
36
|
+
MenuId,
|
37
|
+
} from './interfaces/menu-interfaces';
|
38
|
+
import './no-theater-available';
|
39
|
+
|
40
|
+
export enum ItemType {
|
41
|
+
BOOK = 'bookreader',
|
42
|
+
}
|
43
|
+
@customElement('ia-item-navigator')
|
36
44
|
export class ItemNavigator
|
37
45
|
extends LitElement
|
38
46
|
implements SharedResizeObserverResizeHandlerInterface {
|
@@ -45,9 +53,9 @@ export class ItemNavigator
|
|
45
53
|
return value as MetadataResponse;
|
46
54
|
},
|
47
55
|
})
|
48
|
-
item
|
56
|
+
item?: MetadataResponse;
|
49
57
|
|
50
|
-
@property({ type: String }) itemType
|
58
|
+
@property({ type: String }) itemType?: ItemType;
|
51
59
|
|
52
60
|
@property({ type: String }) baseHost = 'archive.org';
|
53
61
|
|
@@ -61,52 +69,44 @@ export class ItemNavigator
|
|
61
69
|
})
|
62
70
|
signedIn = false;
|
63
71
|
|
64
|
-
@property({
|
65
|
-
type: Array,
|
66
|
-
hasChanged: (newVal: Array<object>, oldVal: Array<object>) => {
|
67
|
-
if (newVal !== oldVal) {
|
68
|
-
return true;
|
69
|
-
}
|
70
|
-
return false;
|
71
|
-
},
|
72
|
-
})
|
73
|
-
@property({ type: Array })
|
74
|
-
menuContents: IntMenuProvider[] = [];
|
72
|
+
@property({ type: Array }) menuContents: MenuProviderInterface[] = [];
|
75
73
|
|
76
|
-
@property({ type: Array }) menuShortcuts:
|
74
|
+
@property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];
|
77
75
|
|
78
|
-
@property({ type: Boolean, reflect: true })
|
76
|
+
@property({ type: Boolean, reflect: true, attribute: true })
|
77
|
+
viewportInFullscreen: boolean | null = null;
|
79
78
|
|
80
79
|
@property({ type: Boolean }) menuOpened = false;
|
81
80
|
|
82
|
-
@property({ type: String }) openMenu
|
81
|
+
@property({ type: String }) openMenu?: MenuId;
|
83
82
|
|
84
|
-
@property({ attribute: false }) modal?:
|
83
|
+
@property({ attribute: false }) modal?: ModalManager;
|
85
84
|
|
86
|
-
@property({ attribute: false }) sharedObserver?:
|
85
|
+
@property({ attribute: false }) sharedObserver?: SharedResizeObserver;
|
87
86
|
|
88
|
-
@
|
87
|
+
@property({ type: Boolean, reflect: true, attribute: true }) loaded:
|
88
|
+
| true
|
89
|
+
| null = null;
|
89
90
|
|
90
|
-
@state()
|
91
|
+
@state() openMenuState: 'overlay' | 'shift' = 'shift';
|
91
92
|
|
92
93
|
@query('#frame') private frame!: HTMLDivElement;
|
93
94
|
|
95
|
+
@query('slot[name="theater-header"]') private headerSlot!: HTMLDivElement;
|
96
|
+
|
94
97
|
disconnectedCallback() {
|
95
|
-
this.
|
96
|
-
handler: this,
|
97
|
-
target: this.frame,
|
98
|
-
});
|
98
|
+
this.removeResizeObserver();
|
99
99
|
}
|
100
100
|
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
this.
|
101
|
+
updated(changed: PropertyValues) {
|
102
|
+
if (changed.has('sharedObserver')) {
|
103
|
+
const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;
|
104
|
+
oldObserver?.removeObserver(this.resizeObserverConfig);
|
105
|
+
this.setResizeObserver();
|
105
106
|
}
|
106
|
-
|
107
|
-
this.startResizeObserver();
|
108
107
|
}
|
109
108
|
|
109
|
+
/** Shared observer */
|
110
110
|
handleResize(entry: ResizeObserverEntry): void {
|
111
111
|
const { width } = entry.contentRect;
|
112
112
|
if (width <= 600) {
|
@@ -116,53 +116,85 @@ export class ItemNavigator
|
|
116
116
|
this.openMenuState = 'shift';
|
117
117
|
}
|
118
118
|
|
119
|
-
private
|
120
|
-
|
121
|
-
|
122
|
-
return new SharedResizeObserver();
|
123
|
-
},
|
124
|
-
});
|
119
|
+
private setResizeObserver(): void {
|
120
|
+
this.sharedObserver?.addObserver(this.resizeObserverConfig);
|
121
|
+
}
|
125
122
|
|
126
|
-
|
127
|
-
this.sharedObserver?.
|
123
|
+
private removeResizeObserver(): void {
|
124
|
+
this.sharedObserver?.removeObserver(this.resizeObserverConfig);
|
125
|
+
}
|
126
|
+
|
127
|
+
get resizeObserverConfig(): {
|
128
|
+
handler: SharedResizeObserverResizeHandlerInterface;
|
129
|
+
target: Element;
|
130
|
+
} {
|
131
|
+
return {
|
128
132
|
handler: this,
|
129
133
|
target: this.frame,
|
130
|
-
}
|
134
|
+
};
|
135
|
+
}
|
136
|
+
/** End shared observer */
|
137
|
+
|
138
|
+
get loaderTitle() {
|
139
|
+
return this.viewportInFullscreen ? 'Internet Archive' : '';
|
140
|
+
}
|
141
|
+
|
142
|
+
get readerHeightStyle(): string {
|
143
|
+
const calcFSHeight = `calc(100vh - ${this.headerSlot?.offsetHeight}px)`;
|
144
|
+
return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
|
145
|
+
}
|
146
|
+
|
147
|
+
get loadingArea() {
|
148
|
+
return html`
|
149
|
+
<div class="loading-area">
|
150
|
+
<div class="loading-view">
|
151
|
+
<ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>
|
152
|
+
</div>
|
153
|
+
</div>
|
154
|
+
`;
|
131
155
|
}
|
132
156
|
|
133
157
|
render(): TemplateResult {
|
134
|
-
const displayReaderClass = this.loaded ? '' : '
|
158
|
+
const displayReaderClass = this.loaded ? '' : 'hidden';
|
135
159
|
return html`
|
136
|
-
<div id="frame" class=${this.menuClass}>
|
137
|
-
<slot name="item-nav-header"></slot>
|
160
|
+
<div id="frame" class=${`${this.menuClass}`}>
|
138
161
|
<div class="menu-and-reader">
|
139
162
|
${this.shouldRenderMenu ? this.renderSideMenu : nothing}
|
140
|
-
<
|
163
|
+
<slot name="theater-header"></slot>
|
164
|
+
<div
|
165
|
+
id="reader"
|
166
|
+
class=${displayReaderClass}
|
167
|
+
style=${this.readerHeightStyle}
|
168
|
+
>
|
141
169
|
${this.renderViewport}
|
142
170
|
</div>
|
143
|
-
|
144
|
-
<div class="loading-view">
|
145
|
-
<ia-itemnav-loader></ia-itemnav-loader>
|
146
|
-
</div>
|
147
|
-
</div>
|
171
|
+
${!this.loaded ? this.loadingArea : nothing}
|
148
172
|
</div>
|
149
|
-
${!this.loaded
|
150
|
-
? html` <div class="loading-area">
|
151
|
-
<div class="loading-view">
|
152
|
-
<ia-itemnav-loader></ia-itemnav-loader>
|
153
|
-
</div>
|
154
|
-
</div>`
|
155
|
-
: nothing}
|
156
173
|
</div>
|
157
174
|
`;
|
158
175
|
}
|
159
176
|
|
160
|
-
get
|
177
|
+
get noTheaterView() {
|
178
|
+
return html`<ia-no-theater-available
|
179
|
+
.identifier=${this.item?.metadata?.identifier}
|
180
|
+
@loadingStateUpdated=${this.loadingStateUpdated}
|
181
|
+
></ia-no-theater-available>`;
|
182
|
+
}
|
183
|
+
|
184
|
+
get theaterSlot() {
|
185
|
+
return html`
|
186
|
+
<slot name="theater-main" style=${this.readerHeightStyle}></slot>
|
187
|
+
`;
|
188
|
+
}
|
189
|
+
|
190
|
+
get booksViewer(): TemplateResult {
|
191
|
+
const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
|
192
|
+
|
161
193
|
return html`
|
162
194
|
<book-navigator
|
163
195
|
.modal=${this.modal}
|
164
196
|
.baseHost=${this.baseHost}
|
165
|
-
.
|
197
|
+
.itemMD=${this.item}
|
166
198
|
?signedIn=${this.signedIn}
|
167
199
|
?sideMenuOpen=${this.menuOpened}
|
168
200
|
.sharedObserver=${this.sharedObserver}
|
@@ -172,8 +204,8 @@ export class ItemNavigator
|
|
172
204
|
@menuUpdated=${this.setMenuContents}
|
173
205
|
@menuShortcutsUpdated=${this.setMenuShortcuts}
|
174
206
|
>
|
175
|
-
<div slot="
|
176
|
-
|
207
|
+
<div slot="theater-main" style=${slotVisibility}>
|
208
|
+
${this.theaterSlot}
|
177
209
|
</div>
|
178
210
|
</book-navigator>
|
179
211
|
`;
|
@@ -183,42 +215,27 @@ export class ItemNavigator
|
|
183
215
|
if (!this.item) {
|
184
216
|
return nothing;
|
185
217
|
}
|
186
|
-
if (this.itemType ===
|
187
|
-
return this.
|
218
|
+
if (this.itemType === ItemType.BOOK) {
|
219
|
+
return this.booksViewer;
|
188
220
|
}
|
189
|
-
return
|
190
|
-
.itemMD=${this.item}
|
191
|
-
.modal=${this.modal}
|
192
|
-
@updateSideMenu=${this.manageSideMenuEvents}
|
193
|
-
@menuUpdated=${this.setMenuContents}
|
194
|
-
@ViewportInFullScreen=${this.manageViewportFullscreen}
|
195
|
-
@menuShortcutsUpdated=${this.setMenuShortcuts}
|
196
|
-
@loadingStateUpdated=${this.loadingStateUpdated}
|
197
|
-
></ia-item-inspector>`;
|
221
|
+
return this.noTheaterView;
|
198
222
|
}
|
199
223
|
|
200
|
-
loadingStateUpdated(e:
|
224
|
+
loadingStateUpdated(e: loadingStateUpdatedEvent): void {
|
201
225
|
const { loaded } = e.detail;
|
202
|
-
this.loaded =
|
226
|
+
this.loaded = loaded || null;
|
203
227
|
}
|
204
228
|
|
205
|
-
/** Creates modal DOM & attaches to `<body>` */
|
206
|
-
private createModal(): void {
|
207
|
-
this.modal = document.createElement(
|
208
|
-
'modal-manager'
|
209
|
-
) as ModalManagerInterface;
|
210
|
-
document.body.appendChild(this.modal);
|
211
|
-
}
|
212
|
-
/* End Modal management */
|
213
|
-
|
214
229
|
/** Fullscreen Management */
|
215
|
-
manageViewportFullscreen(e:
|
216
|
-
|
217
|
-
this.
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
);
|
230
|
+
manageViewportFullscreen(e: ManageFullscreenEvent): void {
|
231
|
+
const fullscreenStatus = !!e.detail.isFullScreen;
|
232
|
+
this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
|
233
|
+
|
234
|
+
const event = new CustomEvent('fullscreenToggled', {
|
235
|
+
detail: e.detail,
|
236
|
+
}) as ManageFullscreenEvent;
|
237
|
+
|
238
|
+
this.dispatchEvent(event);
|
222
239
|
}
|
223
240
|
/** End Fullscreen Management */
|
224
241
|
|
@@ -235,35 +252,36 @@ export class ItemNavigator
|
|
235
252
|
this.menuOpened = false;
|
236
253
|
}
|
237
254
|
|
238
|
-
setOpenMenu(e:
|
255
|
+
setOpenMenu(e: ToggleSidePanelOpenEvent): void {
|
239
256
|
const { id } = e.detail;
|
240
|
-
this.openMenu = id
|
257
|
+
this.openMenu = id !== this.openMenu ? id : undefined;
|
241
258
|
}
|
242
259
|
|
243
|
-
setMenuContents(e:
|
260
|
+
setMenuContents(e: SetSideMenuContentsEvent): void {
|
244
261
|
const updatedContents = [...e.detail];
|
245
262
|
this.menuContents = updatedContents;
|
246
263
|
}
|
247
264
|
|
248
|
-
setMenuShortcuts(e:
|
265
|
+
setMenuShortcuts(e: SetSideMenuShortcutsEvent) {
|
249
266
|
this.menuShortcuts = [...e.detail];
|
250
267
|
}
|
251
268
|
|
252
269
|
/** Toggles Side Menu & Sets viewable subpanel */
|
253
|
-
manageSideMenuEvents(e:
|
270
|
+
manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {
|
254
271
|
const { menuId, action } = e.detail;
|
255
|
-
if (menuId) {
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
272
|
+
if (!menuId) {
|
273
|
+
return;
|
274
|
+
}
|
275
|
+
|
276
|
+
if (action === 'open') {
|
277
|
+
this.openShortcut(menuId);
|
278
|
+
} else if (action === 'toggle') {
|
279
|
+
this.openMenu = menuId;
|
280
|
+
this.toggleMenu();
|
262
281
|
}
|
263
282
|
}
|
264
283
|
|
265
284
|
get menuToggleButton() {
|
266
|
-
// <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
|
267
285
|
return html`
|
268
286
|
<button
|
269
287
|
class="toggle-menu"
|
@@ -279,16 +297,19 @@ export class ItemNavigator
|
|
279
297
|
`;
|
280
298
|
}
|
281
299
|
|
300
|
+
get selectedMenuId(): MenuId | '' {
|
301
|
+
return this.openMenu || '';
|
302
|
+
}
|
303
|
+
|
282
304
|
get renderSideMenu(): TemplateResult {
|
283
305
|
const drawerState = this.menuOpened ? '' : 'hidden';
|
284
|
-
|
285
306
|
return html`
|
286
307
|
<nav>
|
287
308
|
<div class="minimized">${this.shortcuts} ${this.menuToggleButton}</div>
|
288
309
|
<div id="menu" class=${drawerState}>
|
289
310
|
<ia-menu-slider
|
290
311
|
.menus=${this.menuContents}
|
291
|
-
.selectedMenu=${this.
|
312
|
+
.selectedMenu=${this.selectedMenuId}
|
292
313
|
@menuTypeSelected=${this.setOpenMenu}
|
293
314
|
@menuSliderClosed=${this.closeMenu}
|
294
315
|
manuallyHandleClose
|
@@ -301,19 +322,23 @@ export class ItemNavigator
|
|
301
322
|
/** End Side menu */
|
302
323
|
|
303
324
|
/** Menu Shortcuts */
|
304
|
-
openShortcut(selectedMenuId = ''): void {
|
325
|
+
openShortcut(selectedMenuId: MenuId = ''): void {
|
305
326
|
this.openMenu = selectedMenuId;
|
306
327
|
this.menuOpened = true;
|
307
328
|
}
|
308
329
|
|
309
330
|
get shortcuts(): TemplateResult {
|
310
|
-
const shortcuts = this.menuShortcuts.map(
|
311
|
-
(
|
331
|
+
const shortcuts = this.menuShortcuts.map(({ icon, id }) => {
|
332
|
+
if (id === 'fullscreen') {
|
333
|
+
return html`${icon}`;
|
334
|
+
}
|
335
|
+
|
336
|
+
return html`
|
312
337
|
<button class="shortcut ${id}" @click="${() => this.openShortcut(id)}">
|
313
338
|
${icon}
|
314
339
|
</button>
|
315
|
-
|
316
|
-
);
|
340
|
+
`;
|
341
|
+
});
|
317
342
|
return html`<div class="shortcuts">${shortcuts}</div>`;
|
318
343
|
}
|
319
344
|
/** End Menu Shortcuts */
|
@@ -325,7 +350,7 @@ export class ItemNavigator
|
|
325
350
|
return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
|
326
351
|
}
|
327
352
|
|
328
|
-
static get styles() {
|
353
|
+
static get styles(): CSSResult {
|
329
354
|
const subnavWidth = css`var(--menuWidth, 320px)`;
|
330
355
|
const transitionTiming = css`var(--animationTiming, 200ms)`;
|
331
356
|
const transitionEffect = css`transform ${transitionTiming} ease-out`;
|
@@ -335,7 +360,6 @@ export class ItemNavigator
|
|
335
360
|
return css`
|
336
361
|
:host,
|
337
362
|
#frame,
|
338
|
-
#reader,
|
339
363
|
.menu-and-reader {
|
340
364
|
min-height: inherit;
|
341
365
|
height: inherit;
|
@@ -344,8 +368,23 @@ export class ItemNavigator
|
|
344
368
|
display: block;
|
345
369
|
}
|
346
370
|
|
371
|
+
:host,
|
372
|
+
#frame,
|
373
|
+
.menu-and-reader,
|
374
|
+
.loading-area,
|
375
|
+
.loading-view {
|
376
|
+
min-height: inherit;
|
377
|
+
height: inherit;
|
378
|
+
}
|
379
|
+
|
380
|
+
slot {
|
381
|
+
display: block;
|
382
|
+
overflow: hidden;
|
383
|
+
}
|
384
|
+
|
347
385
|
#frame {
|
348
386
|
background-color: ${theaterBg};
|
387
|
+
color-scheme: dark;
|
349
388
|
}
|
350
389
|
|
351
390
|
#frame.fullscreen {
|
@@ -357,27 +396,10 @@ export class ItemNavigator
|
|
357
396
|
z-index: 9;
|
358
397
|
}
|
359
398
|
|
360
|
-
#frame.fullscreen,
|
361
|
-
#frame.fullscreen #reader {
|
362
|
-
height: 100vh;
|
363
|
-
}
|
364
|
-
|
365
|
-
.loading-area {
|
366
|
-
position: absolute;
|
367
|
-
top: 0;
|
368
|
-
left: 0;
|
369
|
-
right: 0;
|
370
|
-
bottom: 0;
|
371
|
-
height: inherit;
|
372
|
-
min-height: inherit;
|
373
|
-
}
|
374
|
-
|
375
399
|
.loading-view {
|
376
400
|
display: flex;
|
377
401
|
align-items: center;
|
378
402
|
justify-content: center;
|
379
|
-
min-height: inherit;
|
380
|
-
height: inherit;
|
381
403
|
}
|
382
404
|
|
383
405
|
ia-itemnav-loader {
|
@@ -386,8 +408,7 @@ export class ItemNavigator
|
|
386
408
|
}
|
387
409
|
|
388
410
|
.hidden {
|
389
|
-
|
390
|
-
width: 1px;
|
411
|
+
display: none;
|
391
412
|
}
|
392
413
|
|
393
414
|
button {
|
@@ -478,6 +499,7 @@ export class ItemNavigator
|
|
478
499
|
transition: ${transitionEffect};
|
479
500
|
}
|
480
501
|
|
502
|
+
.open.shift slot[name='theater-header'],
|
481
503
|
.open.shift #reader {
|
482
504
|
width: calc(100% - var(--menuWidth));
|
483
505
|
float: right;
|
@@ -486,5 +508,3 @@ export class ItemNavigator
|
|
486
508
|
`;
|
487
509
|
}
|
488
510
|
}
|
489
|
-
|
490
|
-
customElements.define('ia-menu-slider', IAMenuSlider);
|
package/src/loader.ts
CHANGED
@@ -1,9 +1,15 @@
|
|
1
1
|
/* eslint-disable class-methods-use-this */
|
2
2
|
import { css, html, LitElement, customElement } from 'lit-element';
|
3
|
-
import { svg } from 'lit-html';
|
3
|
+
import { svg, nothing } from 'lit-html';
|
4
4
|
|
5
5
|
@customElement('ia-itemnav-loader')
|
6
6
|
export class IAItemNavLoader extends LitElement {
|
7
|
+
static get properties() {
|
8
|
+
return {
|
9
|
+
title: { type: String },
|
10
|
+
};
|
11
|
+
}
|
12
|
+
|
7
13
|
get bookIconSvg() {
|
8
14
|
return svg`
|
9
15
|
<g class="bookIcon" transform="matrix(1 0 0 -1 28 67.362264)">
|
@@ -42,9 +48,10 @@ export class IAItemNavLoader extends LitElement {
|
|
42
48
|
}
|
43
49
|
|
44
50
|
render() {
|
51
|
+
const title = this.title ? html`<h2>${this.title}</h2>` : nothing;
|
45
52
|
return html`
|
46
53
|
<div class="place-holder">
|
47
|
-
${this.loader}
|
54
|
+
${title} ${this.loader}
|
48
55
|
<h3>Loading viewer</h3>
|
49
56
|
</div>
|
50
57
|
`;
|