@internetarchive/ia-item-navigator 0.0.0 → 0.0.2
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 +113 -22
- package/demo/index.html +12 -4
- package/dist/demo/app-root.d.ts +27 -7
- package/dist/demo/app-root.js +98 -23
- 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 +13 -23
- package/dist/src/interfaces/event-interfaces.js.map +1 -1
- package/dist/src/interfaces/menu-interfaces.d.ts +7 -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/files-by-type/files-by-type-provider.js +5 -3
- package/dist/src/item-inspector/files-by-type/files-by-type-provider.js.map +1 -1
- package/dist/src/item-inspector/files-by-type/ia-files-by-type.d.ts +1 -0
- package/dist/src/item-inspector/files-by-type/ia-files-by-type.js +14 -0
- package/dist/src/item-inspector/files-by-type/ia-files-by-type.js.map +1 -1
- package/dist/src/item-inspector/item-inspector.d.ts +0 -31
- package/dist/src/item-inspector/item-inspector.js +253 -181
- package/dist/src/item-inspector/item-inspector.js.map +1 -1
- package/dist/src/item-inspector/visual-mod-provider.d.ts +19 -0
- package/dist/src/item-inspector/visual-mod-provider.js +46 -0
- package/dist/src/item-inspector/visual-mod-provider.js.map +1 -0
- package/dist/src/item-navigator.d.ts +50 -28
- package/dist/src/item-navigator.js +216 -132
- 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 +14 -5
- package/src/interfaces/custom-theater-interface.ts +28 -0
- package/src/interfaces/event-interfaces.ts +17 -24
- package/src/interfaces/menu-interfaces.ts +10 -9
- package/src/item-navigator.ts +257 -155
- 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/demo/demo-item-md.json +0 -247
- package/src/interfaces/nav-controller-interface.ts +0 -18
- package/src/item-inspector/files-by-type/files-by-type-provider.ts +0 -41
- package/src/item-inspector/files-by-type/ia-files-by-type.ts +0 -84
- package/src/item-inspector/item-inspector.ts +0 -202
- package/src/item-inspector/share-provider.ts +0 -51
- package/src/item-navigator-js.js +0 -372
- package/test/your-webcomponent.test.ts +0 -40
package/src/item-navigator.ts
CHANGED
@@ -5,41 +5,57 @@ import {
|
|
5
5
|
customElement,
|
6
6
|
property,
|
7
7
|
state,
|
8
|
+
query,
|
9
|
+
PropertyValues,
|
10
|
+
CSSResult,
|
8
11
|
} from 'lit-element';
|
9
12
|
import { nothing, TemplateResult } from 'lit-html';
|
10
13
|
import { MetadataResponse } from '@internetarchive/search-service';
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
+
import {
|
15
|
+
SharedResizeObserver,
|
16
|
+
SharedResizeObserverResizeHandlerInterface,
|
17
|
+
} from '@internetarchive/shared-resize-observer';
|
18
|
+
import '@internetarchive/ia-menu-slider';
|
19
|
+
|
20
|
+
import { ModalManager } from '@internetarchive/modal-manager';
|
14
21
|
import '@internetarchive/icon-ellipses/icon-ellipses';
|
15
22
|
import './loader';
|
16
23
|
|
17
24
|
import {
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
IntLoadingStateUpdatedEvent,
|
25
|
+
ToggleSideMenuOpenEvent,
|
26
|
+
ToggleSidePanelOpenEvent,
|
27
|
+
SetSideMenuContentsEvent,
|
28
|
+
SetSideMenuShortcutsEvent,
|
29
|
+
loadingStateUpdatedEvent,
|
30
|
+
ManageFullscreenEvent,
|
25
31
|
} from './interfaces/event-interfaces';
|
26
32
|
|
27
|
-
import {
|
28
|
-
|
29
|
-
|
30
|
-
|
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')
|
44
|
+
export class ItemNavigator
|
45
|
+
extends LitElement
|
46
|
+
implements SharedResizeObserverResizeHandlerInterface {
|
31
47
|
@property({
|
32
48
|
type: Object,
|
33
49
|
converter: (value: string | MetadataResponse | null): MetadataResponse => {
|
34
|
-
if (typeof value === 'string') {
|
50
|
+
if (value && typeof value === 'string') {
|
35
51
|
return new MetadataResponse(JSON.parse(atob(value)));
|
36
52
|
}
|
37
53
|
return value as MetadataResponse;
|
38
54
|
},
|
39
55
|
})
|
40
|
-
item
|
56
|
+
item?: MetadataResponse;
|
41
57
|
|
42
|
-
@property({ type: String }) itemType
|
58
|
+
@property({ type: String }) itemType?: ItemType;
|
43
59
|
|
44
60
|
@property({ type: String }) baseHost = 'archive.org';
|
45
61
|
|
@@ -53,74 +69,143 @@ export class ItemNavigator extends LitElement {
|
|
53
69
|
})
|
54
70
|
signedIn = false;
|
55
71
|
|
56
|
-
@property({
|
57
|
-
type: Array,
|
58
|
-
hasChanged: (newVal: Array<object>, oldVal: Array<object>) => {
|
59
|
-
if (newVal !== oldVal) {
|
60
|
-
return true;
|
61
|
-
}
|
62
|
-
return false;
|
63
|
-
},
|
64
|
-
})
|
65
|
-
menuShortcuts: IntMenuShortcut[] = [];
|
72
|
+
@property({ type: Array }) menuContents: MenuProviderInterface[] = [];
|
66
73
|
|
67
|
-
@property({ type: Array })
|
74
|
+
@property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];
|
68
75
|
|
69
|
-
@property({ type: Boolean
|
76
|
+
@property({ type: Boolean, reflect: true, attribute: true })
|
77
|
+
viewportInFullscreen: boolean | null = null;
|
70
78
|
|
71
79
|
@property({ type: Boolean }) menuOpened = false;
|
72
80
|
|
73
|
-
@property({ type: String }) openMenu
|
81
|
+
@property({ type: String }) openMenu?: MenuId;
|
82
|
+
|
83
|
+
@property({ attribute: false }) modal?: ModalManager;
|
84
|
+
|
85
|
+
@property({ attribute: false }) sharedObserver?: SharedResizeObserver;
|
86
|
+
|
87
|
+
@property({ type: Boolean, reflect: true, attribute: true }) loaded:
|
88
|
+
| true
|
89
|
+
| null = null;
|
74
90
|
|
75
|
-
@
|
76
|
-
| ModalManagerInterface
|
77
|
-
| undefined = undefined;
|
91
|
+
@state() openMenuState: 'overlay' | 'shift' = 'shift';
|
78
92
|
|
79
|
-
@
|
93
|
+
@query('#frame') private frame!: HTMLDivElement;
|
80
94
|
|
81
|
-
|
82
|
-
|
83
|
-
|
95
|
+
@query('slot[name="theater-header"]') private headerSlot!: HTMLDivElement;
|
96
|
+
|
97
|
+
disconnectedCallback() {
|
98
|
+
this.removeResizeObserver();
|
99
|
+
}
|
100
|
+
|
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();
|
84
106
|
}
|
85
107
|
}
|
86
108
|
|
109
|
+
/** Shared observer */
|
110
|
+
handleResize(entry: ResizeObserverEntry): void {
|
111
|
+
const { width } = entry.contentRect;
|
112
|
+
if (width <= 600) {
|
113
|
+
this.openMenuState = 'overlay';
|
114
|
+
return;
|
115
|
+
}
|
116
|
+
this.openMenuState = 'shift';
|
117
|
+
}
|
118
|
+
|
119
|
+
private setResizeObserver(): void {
|
120
|
+
this.sharedObserver?.addObserver(this.resizeObserverConfig);
|
121
|
+
}
|
122
|
+
|
123
|
+
private removeResizeObserver(): void {
|
124
|
+
this.sharedObserver?.removeObserver(this.resizeObserverConfig);
|
125
|
+
}
|
126
|
+
|
127
|
+
get resizeObserverConfig(): {
|
128
|
+
handler: SharedResizeObserverResizeHandlerInterface;
|
129
|
+
target: Element;
|
130
|
+
} {
|
131
|
+
return {
|
132
|
+
handler: this,
|
133
|
+
target: this.frame,
|
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
|
+
`;
|
155
|
+
}
|
156
|
+
|
87
157
|
render(): TemplateResult {
|
88
|
-
const displayReaderClass = this.loaded ? '' : '
|
158
|
+
const displayReaderClass = this.loaded ? '' : 'hidden';
|
89
159
|
return html`
|
90
|
-
<div id="frame" class=${this.menuClass}>
|
91
|
-
<slot name="item-nav-header"></slot>
|
160
|
+
<div id="frame" class=${`${this.menuClass}`}>
|
92
161
|
<div class="menu-and-reader">
|
93
162
|
${this.shouldRenderMenu ? this.renderSideMenu : nothing}
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
163
|
+
<slot name="theater-header"></slot>
|
164
|
+
<div
|
165
|
+
id="reader"
|
166
|
+
class=${displayReaderClass}
|
167
|
+
style=${this.readerHeightStyle}
|
168
|
+
>
|
169
|
+
${this.renderViewport}
|
170
|
+
</div>
|
171
|
+
${!this.loaded ? this.loadingArea : nothing}
|
102
172
|
</div>
|
103
173
|
</div>
|
104
174
|
`;
|
105
175
|
}
|
106
176
|
|
107
|
-
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
|
+
|
108
193
|
return html`
|
109
194
|
<book-navigator
|
195
|
+
.modal=${this.modal}
|
110
196
|
.baseHost=${this.baseHost}
|
111
|
-
.
|
197
|
+
.itemMD=${this.item}
|
112
198
|
?signedIn=${this.signedIn}
|
113
199
|
?sideMenuOpen=${this.menuOpened}
|
200
|
+
.sharedObserver=${this.sharedObserver}
|
114
201
|
@ViewportInFullScreen=${this.manageViewportFullscreen}
|
115
202
|
@loadingStateUpdated=${this.loadingStateUpdated}
|
116
203
|
@updateSideMenu=${this.manageSideMenuEvents}
|
117
204
|
@menuUpdated=${this.setMenuContents}
|
118
205
|
@menuShortcutsUpdated=${this.setMenuShortcuts}
|
119
|
-
@showItemNavigatorModal=${this.openModal}
|
120
|
-
@closeItemNavigatorModal=${this.closeModal}
|
121
206
|
>
|
122
|
-
<div slot="
|
123
|
-
|
207
|
+
<div slot="theater-main" style=${slotVisibility}>
|
208
|
+
${this.theaterSlot}
|
124
209
|
</div>
|
125
210
|
</book-navigator>
|
126
211
|
`;
|
@@ -130,59 +215,33 @@ export class ItemNavigator extends LitElement {
|
|
130
215
|
if (!this.item) {
|
131
216
|
return nothing;
|
132
217
|
}
|
133
|
-
if (this.itemType ===
|
134
|
-
return this.
|
218
|
+
if (this.itemType === ItemType.BOOK) {
|
219
|
+
return this.booksViewer;
|
135
220
|
}
|
136
|
-
return
|
137
|
-
.itemMD=${this.item}
|
138
|
-
@loadingStateUpdated=${this.loadingStateUpdated}
|
139
|
-
@updateSideMenu=${this.manageSideMenuEvents}
|
140
|
-
@menuUpdated=${this.setMenuContents}
|
141
|
-
@menuShortcutsUpdated=${this.setMenuShortcuts}
|
142
|
-
></ia-item-inspector>`;
|
221
|
+
return this.noTheaterView;
|
143
222
|
}
|
144
223
|
|
145
|
-
loadingStateUpdated(e:
|
224
|
+
loadingStateUpdated(e: loadingStateUpdatedEvent): void {
|
146
225
|
const { loaded } = e.detail;
|
147
|
-
this.loaded =
|
148
|
-
}
|
149
|
-
|
150
|
-
/* Modal management */
|
151
|
-
openModal(e: IntOpenModalEvent): void {
|
152
|
-
const { config, customModalContent } = e.detail;
|
153
|
-
if (!config || !customModalContent) {
|
154
|
-
return;
|
155
|
-
}
|
156
|
-
|
157
|
-
this.modal?.showModal({
|
158
|
-
config,
|
159
|
-
customModalContent,
|
160
|
-
});
|
226
|
+
this.loaded = loaded || null;
|
161
227
|
}
|
162
228
|
|
163
|
-
|
164
|
-
|
165
|
-
|
229
|
+
/** Fullscreen Management */
|
230
|
+
manageViewportFullscreen(e: ManageFullscreenEvent): void {
|
231
|
+
const fullscreenStatus = !!e.detail.isFullScreen;
|
232
|
+
this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
|
166
233
|
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
'modal-manager'
|
171
|
-
) as ModalManagerInterface;
|
172
|
-
document.body.appendChild(this.modal);
|
173
|
-
}
|
174
|
-
/* End Modal management */
|
234
|
+
const event = new CustomEvent('fullscreenToggled', {
|
235
|
+
detail: e.detail,
|
236
|
+
}) as ManageFullscreenEvent;
|
175
237
|
|
176
|
-
|
177
|
-
manageViewportFullscreen(e: IntManageFullscreenEvent): void {
|
178
|
-
const { isFullScreen } = e.detail;
|
179
|
-
this.viewportInFullscreen = isFullScreen;
|
238
|
+
this.dispatchEvent(event);
|
180
239
|
}
|
181
240
|
/** End Fullscreen Management */
|
182
241
|
|
183
242
|
/** Side menu */
|
184
243
|
get shouldRenderMenu(): boolean {
|
185
|
-
return !!
|
244
|
+
return !!this.menuContents.length;
|
186
245
|
}
|
187
246
|
|
188
247
|
toggleMenu(): void {
|
@@ -193,39 +252,64 @@ export class ItemNavigator extends LitElement {
|
|
193
252
|
this.menuOpened = false;
|
194
253
|
}
|
195
254
|
|
196
|
-
setOpenMenu(e:
|
255
|
+
setOpenMenu(e: ToggleSidePanelOpenEvent): void {
|
197
256
|
const { id } = e.detail;
|
198
|
-
this.openMenu = id
|
257
|
+
this.openMenu = id !== this.openMenu ? id : undefined;
|
199
258
|
}
|
200
259
|
|
201
|
-
setMenuContents(e:
|
260
|
+
setMenuContents(e: SetSideMenuContentsEvent): void {
|
202
261
|
const updatedContents = [...e.detail];
|
203
262
|
this.menuContents = updatedContents;
|
204
263
|
}
|
205
264
|
|
265
|
+
setMenuShortcuts(e: SetSideMenuShortcutsEvent) {
|
266
|
+
this.menuShortcuts = [...e.detail];
|
267
|
+
}
|
268
|
+
|
206
269
|
/** Toggles Side Menu & Sets viewable subpanel */
|
207
|
-
manageSideMenuEvents(e:
|
270
|
+
manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {
|
208
271
|
const { menuId, action } = e.detail;
|
209
|
-
if (menuId) {
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
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();
|
216
281
|
}
|
217
282
|
}
|
218
283
|
|
284
|
+
get menuToggleButton() {
|
285
|
+
return html`
|
286
|
+
<button
|
287
|
+
class="toggle-menu"
|
288
|
+
@click=${this.toggleMenu}
|
289
|
+
title="Toggle theater side panels"
|
290
|
+
>
|
291
|
+
<div>
|
292
|
+
<ia-icon-ellipses
|
293
|
+
style="width: var(--iconWidth); height: var(--iconHeight);"
|
294
|
+
></ia-icon-ellipses>
|
295
|
+
</div>
|
296
|
+
</button>
|
297
|
+
`;
|
298
|
+
}
|
299
|
+
|
300
|
+
get selectedMenuId(): MenuId | '' {
|
301
|
+
return this.openMenu || '';
|
302
|
+
}
|
303
|
+
|
219
304
|
get renderSideMenu(): TemplateResult {
|
220
305
|
const drawerState = this.menuOpened ? '' : 'hidden';
|
221
|
-
|
222
306
|
return html`
|
223
307
|
<nav>
|
224
308
|
<div class="minimized">${this.shortcuts} ${this.menuToggleButton}</div>
|
225
309
|
<div id="menu" class=${drawerState}>
|
226
310
|
<ia-menu-slider
|
227
311
|
.menus=${this.menuContents}
|
228
|
-
.selectedMenu=${this.
|
312
|
+
.selectedMenu=${this.selectedMenuId}
|
229
313
|
@menuTypeSelected=${this.setOpenMenu}
|
230
314
|
@menuSliderClosed=${this.closeMenu}
|
231
315
|
manuallyHandleClose
|
@@ -238,23 +322,23 @@ export class ItemNavigator extends LitElement {
|
|
238
322
|
/** End Side menu */
|
239
323
|
|
240
324
|
/** Menu Shortcuts */
|
241
|
-
|
242
|
-
this.menuShortcuts = [...e.detail];
|
243
|
-
}
|
244
|
-
|
245
|
-
openShortcut(selectedMenuId = ''): void {
|
325
|
+
openShortcut(selectedMenuId: MenuId = ''): void {
|
246
326
|
this.openMenu = selectedMenuId;
|
247
327
|
this.menuOpened = true;
|
248
328
|
}
|
249
329
|
|
250
330
|
get shortcuts(): TemplateResult {
|
251
|
-
const shortcuts = this.menuShortcuts.map(
|
252
|
-
(
|
331
|
+
const shortcuts = this.menuShortcuts.map(({ icon, id }) => {
|
332
|
+
if (id === 'fullscreen') {
|
333
|
+
return html`${icon}`;
|
334
|
+
}
|
335
|
+
|
336
|
+
return html`
|
253
337
|
<button class="shortcut ${id}" @click="${() => this.openShortcut(id)}">
|
254
338
|
${icon}
|
255
339
|
</button>
|
256
|
-
|
257
|
-
);
|
340
|
+
`;
|
341
|
+
});
|
258
342
|
return html`<div class="shortcuts">${shortcuts}</div>`;
|
259
343
|
}
|
260
344
|
/** End Menu Shortcuts */
|
@@ -263,33 +347,19 @@ export class ItemNavigator extends LitElement {
|
|
263
347
|
get menuClass(): string {
|
264
348
|
const drawerState = this.menuOpened ? 'open' : '';
|
265
349
|
const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
|
266
|
-
return `${drawerState} ${fullscreenState}`;
|
350
|
+
return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
|
267
351
|
}
|
268
352
|
|
269
|
-
get
|
270
|
-
return html`
|
271
|
-
<button
|
272
|
-
class="toggle-menu"
|
273
|
-
@click=${() => this.toggleMenu()}
|
274
|
-
title="Toggle theater side panels"
|
275
|
-
>
|
276
|
-
<div><ia-icon-ellipses></ia-icon-ellipses></div>
|
277
|
-
</button>
|
278
|
-
`;
|
279
|
-
}
|
280
|
-
|
281
|
-
static get styles() {
|
353
|
+
static get styles(): CSSResult {
|
282
354
|
const subnavWidth = css`var(--menuWidth, 320px)`;
|
283
|
-
const tabletPlusQuery = css`
|
284
|
-
@media (min-width: 640px);
|
285
|
-
`;
|
286
355
|
const transitionTiming = css`var(--animationTiming, 200ms)`;
|
287
356
|
const transitionEffect = css`transform ${transitionTiming} ease-out`;
|
357
|
+
const menuMargin = css`var(--theaterMenuMargin, 42px)`;
|
358
|
+
const theaterBg = css`var(--theaterBgColor, #000)`;
|
288
359
|
|
289
360
|
return css`
|
290
361
|
:host,
|
291
362
|
#frame,
|
292
|
-
#reader,
|
293
363
|
.menu-and-reader {
|
294
364
|
min-height: inherit;
|
295
365
|
height: inherit;
|
@@ -297,18 +367,48 @@ export class ItemNavigator extends LitElement {
|
|
297
367
|
overflow: hidden;
|
298
368
|
display: block;
|
299
369
|
}
|
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
|
+
|
300
385
|
#frame {
|
301
|
-
|
386
|
+
background-color: ${theaterBg};
|
387
|
+
color-scheme: dark;
|
388
|
+
}
|
389
|
+
|
390
|
+
#frame.fullscreen {
|
391
|
+
position: fixed;
|
392
|
+
top: 0;
|
393
|
+
bottom: 0;
|
394
|
+
left: 0;
|
395
|
+
right: 0;
|
396
|
+
z-index: 9;
|
302
397
|
}
|
303
398
|
|
304
|
-
|
305
|
-
|
306
|
-
|
399
|
+
.loading-view {
|
400
|
+
display: flex;
|
401
|
+
align-items: center;
|
402
|
+
justify-content: center;
|
403
|
+
}
|
404
|
+
|
405
|
+
ia-itemnav-loader {
|
406
|
+
display: block;
|
407
|
+
width: 100%;
|
307
408
|
}
|
308
409
|
|
309
410
|
.hidden {
|
310
|
-
|
311
|
-
width: 1px;
|
411
|
+
display: none;
|
312
412
|
}
|
313
413
|
|
314
414
|
button {
|
@@ -332,17 +432,18 @@ export class ItemNavigator extends LitElement {
|
|
332
432
|
|
333
433
|
nav .minimized {
|
334
434
|
background: rgba(0, 0, 0, 0.7);
|
335
|
-
|
435
|
+
padding-top: 6px;
|
336
436
|
position: absolute;
|
337
|
-
|
338
|
-
left: 0;
|
339
|
-
width: 4rem;
|
437
|
+
width: ${menuMargin};
|
340
438
|
z-index: 2;
|
439
|
+
left: 0;
|
440
|
+
border-bottom-right-radius: 5%;
|
341
441
|
}
|
342
442
|
|
343
443
|
nav .minimized button {
|
344
444
|
width: var(--iconWidth);
|
345
445
|
height: var(--iconHeight);
|
446
|
+
margin-bottom: 0.2rem;
|
346
447
|
margin: auto;
|
347
448
|
display: inline-flex;
|
348
449
|
vertical-align: middle;
|
@@ -350,8 +451,8 @@ export class ItemNavigator extends LitElement {
|
|
350
451
|
align-items: center;
|
351
452
|
-webkit-box-pack: center;
|
352
453
|
justify-content: center;
|
353
|
-
width:
|
354
|
-
height:
|
454
|
+
width: ${menuMargin};
|
455
|
+
height: ${menuMargin};
|
355
456
|
}
|
356
457
|
|
357
458
|
nav .minimized button.toggle-menu > * {
|
@@ -383,26 +484,27 @@ export class ItemNavigator extends LitElement {
|
|
383
484
|
#reader {
|
384
485
|
position: relative;
|
385
486
|
z-index: 1;
|
386
|
-
transition: ${transitionEffect};
|
487
|
+
/* transition: ${transitionEffect}; */
|
387
488
|
transform: translateX(0);
|
388
489
|
width: 100%;
|
389
490
|
}
|
390
491
|
|
492
|
+
.open.overlay #reader {
|
493
|
+
transition: none;
|
494
|
+
}
|
495
|
+
|
391
496
|
.open #menu {
|
392
497
|
width: ${subnavWidth};
|
393
498
|
transform: translateX(0);
|
394
499
|
transition: ${transitionEffect};
|
395
500
|
}
|
396
501
|
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
}
|
502
|
+
.open.shift slot[name='theater-header'],
|
503
|
+
.open.shift #reader {
|
504
|
+
width: calc(100% - var(--menuWidth));
|
505
|
+
float: right;
|
506
|
+
transition: ${transitionEffect};
|
403
507
|
}
|
404
508
|
`;
|
405
509
|
}
|
406
510
|
}
|
407
|
-
|
408
|
-
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
|
`;
|