@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.
Files changed (62) hide show
  1. package/README.md +29 -19
  2. package/demo/app-root.ts +50 -50
  3. package/demo/index.html +1 -0
  4. package/dist/demo/app-root.d.ts +19 -15
  5. package/dist/demo/app-root.js +36 -39
  6. package/dist/demo/app-root.js.map +1 -1
  7. package/dist/src/interfaces/custom-theater-interface.d.ts +20 -0
  8. package/dist/src/interfaces/custom-theater-interface.js +2 -0
  9. package/dist/src/interfaces/custom-theater-interface.js.map +1 -0
  10. package/dist/src/interfaces/event-interfaces.d.ts +11 -11
  11. package/dist/src/interfaces/event-interfaces.js.map +1 -1
  12. package/dist/src/interfaces/menu-interfaces.d.ts +6 -7
  13. package/dist/src/interfaces/menu-interfaces.js.map +1 -1
  14. package/dist/src/interfaces/nav-controller-interface.d.ts +11 -6
  15. package/dist/src/interfaces/nav-controller-interface.js.map +1 -1
  16. package/dist/src/item-inspector/item-inspector.d.ts +0 -47
  17. package/dist/src/item-inspector/item-inspector.js +253 -270
  18. package/dist/src/item-inspector/item-inspector.js.map +1 -1
  19. package/dist/src/item-navigator.d.ts +45 -28
  20. package/dist/src/item-navigator.js +122 -115
  21. package/dist/src/item-navigator.js.map +1 -1
  22. package/dist/src/loader.d.ts +5 -0
  23. package/dist/src/loader.js +8 -2
  24. package/dist/src/loader.js.map +1 -1
  25. package/dist/src/no-theater-available.d.ts +9 -0
  26. package/dist/src/no-theater-available.js +79 -0
  27. package/dist/src/no-theater-available.js.map +1 -0
  28. package/dist/test/book-nav-stub.d.ts +22 -0
  29. package/dist/test/book-nav-stub.js +49 -0
  30. package/dist/test/book-nav-stub.js.map +1 -0
  31. package/dist/test/ia-item-navigator.test.d.ts +2 -0
  32. package/dist/test/ia-item-navigator.test.js +317 -0
  33. package/dist/test/ia-item-navigator.test.js.map +1 -0
  34. package/dist/test/ia-stub-goody.d.ts +210 -0
  35. package/dist/test/ia-stub-goody.js +276 -0
  36. package/dist/test/ia-stub-goody.js.map +1 -0
  37. package/dist/test/ia-stub.d.ts +22 -0
  38. package/dist/test/ia-stub.js +35 -0
  39. package/dist/test/ia-stub.js.map +1 -0
  40. package/dist/test/no-theater-available.test.d.ts +1 -0
  41. package/dist/test/no-theater-available.test.js +27 -0
  42. package/dist/test/no-theater-available.test.js.map +1 -0
  43. package/package.json +4 -3
  44. package/src/interfaces/custom-theater-interface.ts +28 -0
  45. package/src/interfaces/event-interfaces.ts +15 -11
  46. package/src/interfaces/menu-interfaces.ts +9 -10
  47. package/src/item-navigator.ts +165 -145
  48. package/src/loader.ts +9 -2
  49. package/src/no-theater-available.ts +85 -0
  50. package/test/book-nav-stub.ts +47 -0
  51. package/test/ia-item-navigator.test.ts +438 -0
  52. package/test/ia-stub.ts +79 -0
  53. package/test/no-theater-available.test.ts +32 -0
  54. package/demo/demo-book-manifest.json +0 -1163
  55. package/src/interfaces/nav-controller-interface.ts +0 -18
  56. package/src/item-inspector/files-by-type/files-by-type-provider.ts +0 -43
  57. package/src/item-inspector/files-by-type/ia-files-by-type.ts +0 -100
  58. package/src/item-inspector/item-inspector.ts +0 -295
  59. package/src/item-inspector/share-provider.ts +0 -51
  60. package/src/item-inspector/visual-mod-provider.ts +0 -65
  61. package/src/item-navigator-js.js +0 -372
  62. package/test/your-webcomponent.test.ts +0 -40
@@ -1,36 +1,40 @@
1
- import { IntMenuProvider, IntMenuShortcut } from './menu-interfaces';
1
+ import {
2
+ MenuProviderInterface,
3
+ MenuShortcutInterface,
4
+ MenuId,
5
+ } from './menu-interfaces';
2
6
 
3
7
  /** Toggles Menu && Sets open panel */
4
- export interface IntManageSideMenuEvent extends CustomEvent {
8
+ export interface ToggleSideMenuOpenEvent extends CustomEvent {
5
9
  type: 'updateSideMenu';
6
10
  detail: {
7
- menuId: string | undefined | '';
11
+ menuId: MenuId | undefined | '';
8
12
  action: 'open' | 'toggle' | '';
9
13
  };
10
14
  }
11
15
 
12
16
  /** Sets open panel */
13
- export interface IntSetOpenMenuEvent extends CustomEvent {
17
+ export interface ToggleSidePanelOpenEvent extends CustomEvent {
14
18
  type: 'menuTypeSelected';
15
19
  detail: {
16
- id: string /** name of menu to open */;
20
+ id: MenuId | '';
17
21
  };
18
22
  }
19
23
 
20
24
  /** Sets menu order that is displayed */
21
- export interface IntSetMenuContentsEvent extends CustomEvent {
25
+ export interface SetSideMenuContentsEvent extends CustomEvent {
22
26
  type: 'menuUpdated';
23
- detail: IntMenuProvider[];
27
+ detail: MenuProviderInterface[];
24
28
  }
25
29
 
26
30
  /** Sets menu shortcuts that is displayed */
27
- export interface IntSetMenuShortcutsEvent extends CustomEvent {
31
+ export interface SetSideMenuShortcutsEvent extends CustomEvent {
28
32
  type: 'menuUpdated';
29
- detail: IntMenuShortcut[];
33
+ detail: MenuShortcutInterface[];
30
34
  }
31
35
 
32
36
  /** Toggles fullscreen mode */
33
- export interface IntManageFullscreenEvent extends CustomEvent {
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 IntLoadingStateUpdatedEvent extends CustomEvent {
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 interface IntMenuShortcut {
4
+ export type MenuId = string;
5
+ export interface MenuShortcutInterface {
5
6
  icon: TemplateResult;
6
- id: string;
7
+ id: MenuId;
7
8
  }
8
9
 
9
- export interface IntMenuIconAndDetails extends IntMenuShortcut {
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 IntProviderArgs {
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 IntMenuProvider
26
- extends IntProviderArgs,
27
- IntMenuIconAndDetails,
28
- IntMenuShortcut {}
24
+ export interface MenuProviderInterface
25
+ extends MenuProviderBaseConfigInterface,
26
+ MenuDetailsInterface,
27
+ MenuShortcutInterface {}
@@ -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
- // @ts-ignore
19
- import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
20
- import { ModalManagerInterface } from '@internetarchive/modal-manager';
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
- IntManageSideMenuEvent,
26
- IntSetOpenMenuEvent,
27
- IntSetMenuContentsEvent,
28
- IntSetMenuShortcutsEvent,
29
- IntLoadingStateUpdatedEvent,
30
- IntManageFullscreenEvent,
25
+ ToggleSideMenuOpenEvent,
26
+ ToggleSidePanelOpenEvent,
27
+ SetSideMenuContentsEvent,
28
+ SetSideMenuShortcutsEvent,
29
+ loadingStateUpdatedEvent,
30
+ ManageFullscreenEvent,
31
31
  } from './interfaces/event-interfaces';
32
32
 
33
- import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
34
-
35
- @customElement('item-navigator')
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: MetadataResponse | undefined = undefined;
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: IntMenuShortcut[] = [];
74
+ @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];
77
75
 
78
- @property({ type: Boolean, reflect: true }) viewportInFullscreen = false;
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?: ModalManagerInterface;
83
+ @property({ attribute: false }) modal?: ModalManager;
85
84
 
86
- @property({ attribute: false }) sharedObserver?: any; // PromisedSingleton<SharedResizeObserverInterface>;
85
+ @property({ attribute: false }) sharedObserver?: SharedResizeObserver;
87
86
 
88
- @state() private loaded: boolean = false;
87
+ @property({ type: Boolean, reflect: true, attribute: true }) loaded:
88
+ | true
89
+ | null = null;
89
90
 
90
- @state() private openMenuState: 'overlay' | 'shift' = 'shift';
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.sharedObserver?.removeObserver({
96
- handler: this,
97
- target: this.frame,
98
- });
98
+ this.removeResizeObserver();
99
99
  }
100
100
 
101
- firstUpdated(pp: any): void {
102
- console.log('first updated item-nav', this.modal, pp);
103
- if (!this.modal) {
104
- this.createModal();
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 async startResizeObserver(): Promise<void> {
120
- const ro = new PromisedSingleton<SharedResizeObserverInterface>({
121
- generator: async (): Promise<SharedResizeObserverInterface> => {
122
- return new SharedResizeObserver();
123
- },
124
- });
119
+ private setResizeObserver(): void {
120
+ this.sharedObserver?.addObserver(this.resizeObserverConfig);
121
+ }
125
122
 
126
- this.sharedObserver = await ro.get();
127
- this.sharedObserver?.addObserver({
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 ? '' : 'hide';
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
- <div id="reader" class=${displayReaderClass}>
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
- <div class="loading-area">
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 BooksViewer(): TemplateResult {
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
- .book=${this.item}
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="bookreader">
176
- <slot name="bookreader"></slot>
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 === 'bookreader') {
187
- return this.BooksViewer;
218
+ if (this.itemType === ItemType.BOOK) {
219
+ return this.booksViewer;
188
220
  }
189
- return html` <ia-item-inspector
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: IntLoadingStateUpdatedEvent): void {
224
+ loadingStateUpdated(e: loadingStateUpdatedEvent): void {
201
225
  const { loaded } = e.detail;
202
- this.loaded = !!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: IntManageFullscreenEvent): void {
216
- this.viewportInFullscreen = !!e.detail.isFullScreen;
217
- this.dispatchEvent(
218
- new CustomEvent('ViewportInFullScreen', {
219
- detail: e.detail,
220
- }) as IntManageFullscreenEvent
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: IntSetOpenMenuEvent): void {
255
+ setOpenMenu(e: ToggleSidePanelOpenEvent): void {
239
256
  const { id } = e.detail;
240
- this.openMenu = id === this.openMenu ? '' : id;
257
+ this.openMenu = id !== this.openMenu ? id : undefined;
241
258
  }
242
259
 
243
- setMenuContents(e: IntSetMenuContentsEvent): void {
260
+ setMenuContents(e: SetSideMenuContentsEvent): void {
244
261
  const updatedContents = [...e.detail];
245
262
  this.menuContents = updatedContents;
246
263
  }
247
264
 
248
- setMenuShortcuts(e: IntSetMenuShortcutsEvent) {
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: IntManageSideMenuEvent): void {
270
+ manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {
254
271
  const { menuId, action } = e.detail;
255
- if (menuId) {
256
- if (action === 'open') {
257
- this.openShortcut(menuId);
258
- } else if (action === 'toggle') {
259
- this.openMenu = menuId;
260
- this.toggleMenu();
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.openMenu}
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
- ({ icon, id }) => html`
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
- height: 1px;
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
  `;