@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.
Files changed (70) hide show
  1. package/README.md +29 -19
  2. package/demo/app-root.ts +113 -22
  3. package/demo/index.html +12 -4
  4. package/dist/demo/app-root.d.ts +27 -7
  5. package/dist/demo/app-root.js +98 -23
  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 +13 -23
  11. package/dist/src/interfaces/event-interfaces.js.map +1 -1
  12. package/dist/src/interfaces/menu-interfaces.d.ts +7 -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/files-by-type/files-by-type-provider.js +5 -3
  17. package/dist/src/item-inspector/files-by-type/files-by-type-provider.js.map +1 -1
  18. package/dist/src/item-inspector/files-by-type/ia-files-by-type.d.ts +1 -0
  19. package/dist/src/item-inspector/files-by-type/ia-files-by-type.js +14 -0
  20. package/dist/src/item-inspector/files-by-type/ia-files-by-type.js.map +1 -1
  21. package/dist/src/item-inspector/item-inspector.d.ts +0 -31
  22. package/dist/src/item-inspector/item-inspector.js +253 -181
  23. package/dist/src/item-inspector/item-inspector.js.map +1 -1
  24. package/dist/src/item-inspector/visual-mod-provider.d.ts +19 -0
  25. package/dist/src/item-inspector/visual-mod-provider.js +46 -0
  26. package/dist/src/item-inspector/visual-mod-provider.js.map +1 -0
  27. package/dist/src/item-navigator.d.ts +50 -28
  28. package/dist/src/item-navigator.js +216 -132
  29. package/dist/src/item-navigator.js.map +1 -1
  30. package/dist/src/loader.d.ts +5 -0
  31. package/dist/src/loader.js +8 -2
  32. package/dist/src/loader.js.map +1 -1
  33. package/dist/src/no-theater-available.d.ts +9 -0
  34. package/dist/src/no-theater-available.js +79 -0
  35. package/dist/src/no-theater-available.js.map +1 -0
  36. package/dist/test/book-nav-stub.d.ts +22 -0
  37. package/dist/test/book-nav-stub.js +49 -0
  38. package/dist/test/book-nav-stub.js.map +1 -0
  39. package/dist/test/ia-item-navigator.test.d.ts +2 -0
  40. package/dist/test/ia-item-navigator.test.js +317 -0
  41. package/dist/test/ia-item-navigator.test.js.map +1 -0
  42. package/dist/test/ia-stub-goody.d.ts +210 -0
  43. package/dist/test/ia-stub-goody.js +276 -0
  44. package/dist/test/ia-stub-goody.js.map +1 -0
  45. package/dist/test/ia-stub.d.ts +22 -0
  46. package/dist/test/ia-stub.js +35 -0
  47. package/dist/test/ia-stub.js.map +1 -0
  48. package/dist/test/no-theater-available.test.d.ts +1 -0
  49. package/dist/test/no-theater-available.test.js +27 -0
  50. package/dist/test/no-theater-available.test.js.map +1 -0
  51. package/package.json +14 -5
  52. package/src/interfaces/custom-theater-interface.ts +28 -0
  53. package/src/interfaces/event-interfaces.ts +17 -24
  54. package/src/interfaces/menu-interfaces.ts +10 -9
  55. package/src/item-navigator.ts +257 -155
  56. package/src/loader.ts +9 -2
  57. package/src/no-theater-available.ts +85 -0
  58. package/test/book-nav-stub.ts +47 -0
  59. package/test/ia-item-navigator.test.ts +438 -0
  60. package/test/ia-stub.ts +79 -0
  61. package/test/no-theater-available.test.ts +32 -0
  62. package/demo/demo-book-manifest.json +0 -1163
  63. package/demo/demo-item-md.json +0 -247
  64. package/src/interfaces/nav-controller-interface.ts +0 -18
  65. package/src/item-inspector/files-by-type/files-by-type-provider.ts +0 -41
  66. package/src/item-inspector/files-by-type/ia-files-by-type.ts +0 -84
  67. package/src/item-inspector/item-inspector.ts +0 -202
  68. package/src/item-inspector/share-provider.ts +0 -51
  69. package/src/item-navigator-js.js +0 -372
  70. package/test/your-webcomponent.test.ts +0 -40
@@ -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
- // @ts-ignore
12
- import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
13
- import { ModalManagerInterface } from '@internetarchive/modal-manager';
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
- IntManageFullscreenEvent,
19
- IntOpenModalEvent,
20
- IntManageSideMenuEvent,
21
- IntSetOpenMenuEvent,
22
- IntSetMenuContentsEvent,
23
- IntSetMenuShortcuts,
24
- IntLoadingStateUpdatedEvent,
25
+ ToggleSideMenuOpenEvent,
26
+ ToggleSidePanelOpenEvent,
27
+ SetSideMenuContentsEvent,
28
+ SetSideMenuShortcutsEvent,
29
+ loadingStateUpdatedEvent,
30
+ ManageFullscreenEvent,
25
31
  } from './interfaces/event-interfaces';
26
32
 
27
- import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
28
-
29
- @customElement('item-navigator')
30
- export class ItemNavigator extends LitElement {
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: MetadataResponse | undefined = undefined;
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 }) menuContents: IntMenuProvider[] = [];
74
+ @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];
68
75
 
69
- @property({ type: Boolean }) viewportInFullscreen = false;
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
- @property({ type: Object }) modal:
76
- | ModalManagerInterface
77
- | undefined = undefined;
91
+ @state() openMenuState: 'overlay' | 'shift' = 'shift';
78
92
 
79
- @state() loaded: boolean = false;
93
+ @query('#frame') private frame!: HTMLDivElement;
80
94
 
81
- firstUpdated(): void {
82
- if (!this.modal) {
83
- this.createModal();
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 ? '' : 'hide';
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
- ${!this.loaded
95
- ? html`<ia-itemnav-loader></ia-itemnav-loader>`
96
- : nothing}
97
- ${this.item
98
- ? html`<div id="reader" class=${displayReaderClass}>
99
- ${this.renderViewport}
100
- </div>`
101
- : nothing}
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 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
+
108
193
  return html`
109
194
  <book-navigator
195
+ .modal=${this.modal}
110
196
  .baseHost=${this.baseHost}
111
- .book=${this.item}
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="bookreader">
123
- <slot name="bookreader"></slot>
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 === 'bookreader') {
134
- return this.BooksViewer;
218
+ if (this.itemType === ItemType.BOOK) {
219
+ return this.booksViewer;
135
220
  }
136
- return html` <ia-item-inspector
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: IntLoadingStateUpdatedEvent): void {
224
+ loadingStateUpdated(e: loadingStateUpdatedEvent): void {
146
225
  const { loaded } = e.detail;
147
- this.loaded = !!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
- closeModal(): void {
164
- this.modal?.closeModal();
165
- }
229
+ /** Fullscreen Management */
230
+ manageViewportFullscreen(e: ManageFullscreenEvent): void {
231
+ const fullscreenStatus = !!e.detail.isFullScreen;
232
+ this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
166
233
 
167
- /** Creates modal DOM & attaches to `<body>` */
168
- private createModal(): void {
169
- this.modal = document.createElement(
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
- /** Fullscreen Management */
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 !!(this.menuContents.length || this.menuShortcuts.length);
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: IntSetOpenMenuEvent): void {
255
+ setOpenMenu(e: ToggleSidePanelOpenEvent): void {
197
256
  const { id } = e.detail;
198
- this.openMenu = id === this.openMenu ? '' : id;
257
+ this.openMenu = id !== this.openMenu ? id : undefined;
199
258
  }
200
259
 
201
- setMenuContents(e: IntSetMenuContentsEvent): void {
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: IntManageSideMenuEvent): void {
270
+ manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {
208
271
  const { menuId, action } = e.detail;
209
- if (menuId) {
210
- if (action === 'open') {
211
- this.openShortcut(menuId);
212
- } else if (action === 'toggle') {
213
- this.openMenu = menuId;
214
- this.toggleMenu();
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.openMenu}
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
- setMenuShortcuts(e: IntSetMenuShortcuts): void {
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
- ({ icon, id }) => html`
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 menuToggleButton(): TemplateResult {
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
- border: 1px solid white;
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
- #frame.fullscreen,
305
- #frame.fullscreen #reader {
306
- height: 100vh;
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
- height: 1px;
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
- border-bottom-right-radius: 5%;
435
+ padding-top: 6px;
336
436
  position: absolute;
337
- padding-top: 0.6rem;
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: 4rem;
354
- height: 4rem;
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
- ${tabletPlusQuery} {
398
- .open #reader {
399
- transition: ${transitionEffect};
400
- transform: translateX(${subnavWidth});
401
- width: calc(100% - ${subnavWidth});
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
  `;