@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
@@ -1,67 +1,127 @@
1
1
  import { __decorate } from "tslib";
2
- import { css, html, LitElement, customElement, property, state, } from 'lit-element';
2
+ import { css, html, LitElement, customElement, property, state, query, } from 'lit-element';
3
3
  import { nothing } from 'lit-html';
4
4
  import { MetadataResponse } from '@internetarchive/search-service';
5
- // @ts-ignore
6
- import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
5
+ import '@internetarchive/ia-menu-slider';
7
6
  import '@internetarchive/icon-ellipses/icon-ellipses';
8
7
  import './loader';
8
+ import './no-theater-available';
9
+ export var ItemType;
10
+ (function (ItemType) {
11
+ ItemType["BOOK"] = "bookreader";
12
+ })(ItemType || (ItemType = {}));
9
13
  let ItemNavigator = class ItemNavigator extends LitElement {
10
14
  constructor() {
11
15
  super(...arguments);
12
- this.item = undefined;
13
- this.itemType = '';
14
16
  this.baseHost = 'archive.org';
15
17
  this.signedIn = false;
16
- this.menuShortcuts = [];
17
18
  this.menuContents = [];
18
- this.viewportInFullscreen = false;
19
+ this.menuShortcuts = [];
20
+ this.viewportInFullscreen = null;
19
21
  this.menuOpened = false;
20
- this.openMenu = '';
21
- this.modal = undefined;
22
- this.loaded = false;
22
+ this.loaded = null;
23
+ this.openMenuState = 'shift';
24
+ }
25
+ disconnectedCallback() {
26
+ this.removeResizeObserver();
27
+ }
28
+ updated(changed) {
29
+ if (changed.has('sharedObserver')) {
30
+ const oldObserver = changed.get('sharedObserver');
31
+ oldObserver === null || oldObserver === void 0 ? void 0 : oldObserver.removeObserver(this.resizeObserverConfig);
32
+ this.setResizeObserver();
33
+ }
23
34
  }
24
- firstUpdated() {
25
- if (!this.modal) {
26
- this.createModal();
35
+ /** Shared observer */
36
+ handleResize(entry) {
37
+ const { width } = entry.contentRect;
38
+ if (width <= 600) {
39
+ this.openMenuState = 'overlay';
40
+ return;
27
41
  }
42
+ this.openMenuState = 'shift';
43
+ }
44
+ setResizeObserver() {
45
+ var _a;
46
+ (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.addObserver(this.resizeObserverConfig);
47
+ }
48
+ removeResizeObserver() {
49
+ var _a;
50
+ (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver(this.resizeObserverConfig);
51
+ }
52
+ get resizeObserverConfig() {
53
+ return {
54
+ handler: this,
55
+ target: this.frame,
56
+ };
57
+ }
58
+ /** End shared observer */
59
+ get loaderTitle() {
60
+ return this.viewportInFullscreen ? 'Internet Archive' : '';
61
+ }
62
+ get readerHeightStyle() {
63
+ var _a;
64
+ const calcFSHeight = `calc(100vh - ${(_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.offsetHeight}px)`;
65
+ return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
66
+ }
67
+ get loadingArea() {
68
+ return html `
69
+ <div class="loading-area">
70
+ <div class="loading-view">
71
+ <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>
72
+ </div>
73
+ </div>
74
+ `;
28
75
  }
29
76
  render() {
30
- const displayReaderClass = this.loaded ? '' : 'hide';
77
+ const displayReaderClass = this.loaded ? '' : 'hidden';
31
78
  return html `
32
- <div id="frame" class=${this.menuClass}>
33
- <slot name="item-nav-header"></slot>
79
+ <div id="frame" class=${`${this.menuClass}`}>
34
80
  <div class="menu-and-reader">
35
81
  ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
36
- ${!this.loaded
37
- ? html `<ia-itemnav-loader></ia-itemnav-loader>`
38
- : nothing}
39
- ${this.item
40
- ? html `<div id="reader" class=${displayReaderClass}>
41
- ${this.renderViewport}
42
- </div>`
43
- : nothing}
82
+ <slot name="theater-header"></slot>
83
+ <div
84
+ id="reader"
85
+ class=${displayReaderClass}
86
+ style=${this.readerHeightStyle}
87
+ >
88
+ ${this.renderViewport}
89
+ </div>
90
+ ${!this.loaded ? this.loadingArea : nothing}
44
91
  </div>
45
92
  </div>
46
93
  `;
47
94
  }
48
- get BooksViewer() {
95
+ get noTheaterView() {
96
+ var _a, _b;
97
+ return html `<ia-no-theater-available
98
+ .identifier=${(_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.identifier}
99
+ @loadingStateUpdated=${this.loadingStateUpdated}
100
+ ></ia-no-theater-available>`;
101
+ }
102
+ get theaterSlot() {
103
+ return html `
104
+ <slot name="theater-main" style=${this.readerHeightStyle}></slot>
105
+ `;
106
+ }
107
+ get booksViewer() {
108
+ const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
49
109
  return html `
50
110
  <book-navigator
111
+ .modal=${this.modal}
51
112
  .baseHost=${this.baseHost}
52
- .book=${this.item}
113
+ .itemMD=${this.item}
53
114
  ?signedIn=${this.signedIn}
54
115
  ?sideMenuOpen=${this.menuOpened}
116
+ .sharedObserver=${this.sharedObserver}
55
117
  @ViewportInFullScreen=${this.manageViewportFullscreen}
56
118
  @loadingStateUpdated=${this.loadingStateUpdated}
57
119
  @updateSideMenu=${this.manageSideMenuEvents}
58
120
  @menuUpdated=${this.setMenuContents}
59
121
  @menuShortcutsUpdated=${this.setMenuShortcuts}
60
- @showItemNavigatorModal=${this.openModal}
61
- @closeItemNavigatorModal=${this.closeModal}
62
122
  >
63
- <div slot="bookreader">
64
- <slot name="bookreader"></slot>
123
+ <div slot="theater-main" style=${slotVisibility}>
124
+ ${this.theaterSlot}
65
125
  </div>
66
126
  </book-navigator>
67
127
  `;
@@ -70,52 +130,28 @@ let ItemNavigator = class ItemNavigator extends LitElement {
70
130
  if (!this.item) {
71
131
  return nothing;
72
132
  }
73
- if (this.itemType === 'bookreader') {
74
- return this.BooksViewer;
133
+ if (this.itemType === ItemType.BOOK) {
134
+ return this.booksViewer;
75
135
  }
76
- return html ` <ia-item-inspector
77
- .itemMD=${this.item}
78
- @loadingStateUpdated=${this.loadingStateUpdated}
79
- @updateSideMenu=${this.manageSideMenuEvents}
80
- @menuUpdated=${this.setMenuContents}
81
- @menuShortcutsUpdated=${this.setMenuShortcuts}
82
- ></ia-item-inspector>`;
136
+ return this.noTheaterView;
83
137
  }
84
138
  loadingStateUpdated(e) {
85
139
  const { loaded } = e.detail;
86
- this.loaded = !!loaded;
87
- }
88
- /* Modal management */
89
- openModal(e) {
90
- var _a;
91
- const { config, customModalContent } = e.detail;
92
- if (!config || !customModalContent) {
93
- return;
94
- }
95
- (_a = this.modal) === null || _a === void 0 ? void 0 : _a.showModal({
96
- config,
97
- customModalContent,
98
- });
99
- }
100
- closeModal() {
101
- var _a;
102
- (_a = this.modal) === null || _a === void 0 ? void 0 : _a.closeModal();
103
- }
104
- /** Creates modal DOM & attaches to `<body>` */
105
- createModal() {
106
- this.modal = document.createElement('modal-manager');
107
- document.body.appendChild(this.modal);
140
+ this.loaded = loaded || null;
108
141
  }
109
- /* End Modal management */
110
142
  /** Fullscreen Management */
111
143
  manageViewportFullscreen(e) {
112
- const { isFullScreen } = e.detail;
113
- this.viewportInFullscreen = isFullScreen;
144
+ const fullscreenStatus = !!e.detail.isFullScreen;
145
+ this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
146
+ const event = new CustomEvent('fullscreenToggled', {
147
+ detail: e.detail,
148
+ });
149
+ this.dispatchEvent(event);
114
150
  }
115
151
  /** End Fullscreen Management */
116
152
  /** Side menu */
117
153
  get shouldRenderMenu() {
118
- return !!(this.menuContents.length || this.menuShortcuts.length);
154
+ return !!this.menuContents.length;
119
155
  }
120
156
  toggleMenu() {
121
157
  this.menuOpened = !this.menuOpened;
@@ -125,25 +161,47 @@ let ItemNavigator = class ItemNavigator extends LitElement {
125
161
  }
126
162
  setOpenMenu(e) {
127
163
  const { id } = e.detail;
128
- this.openMenu = id === this.openMenu ? '' : id;
164
+ this.openMenu = id !== this.openMenu ? id : undefined;
129
165
  }
130
166
  setMenuContents(e) {
131
167
  const updatedContents = [...e.detail];
132
168
  this.menuContents = updatedContents;
133
169
  }
170
+ setMenuShortcuts(e) {
171
+ this.menuShortcuts = [...e.detail];
172
+ }
134
173
  /** Toggles Side Menu & Sets viewable subpanel */
135
174
  manageSideMenuEvents(e) {
136
175
  const { menuId, action } = e.detail;
137
- if (menuId) {
138
- if (action === 'open') {
139
- this.openShortcut(menuId);
140
- }
141
- else if (action === 'toggle') {
142
- this.openMenu = menuId;
143
- this.toggleMenu();
144
- }
176
+ if (!menuId) {
177
+ return;
178
+ }
179
+ if (action === 'open') {
180
+ this.openShortcut(menuId);
181
+ }
182
+ else if (action === 'toggle') {
183
+ this.openMenu = menuId;
184
+ this.toggleMenu();
145
185
  }
146
186
  }
187
+ get menuToggleButton() {
188
+ return html `
189
+ <button
190
+ class="toggle-menu"
191
+ @click=${this.toggleMenu}
192
+ title="Toggle theater side panels"
193
+ >
194
+ <div>
195
+ <ia-icon-ellipses
196
+ style="width: var(--iconWidth); height: var(--iconHeight);"
197
+ ></ia-icon-ellipses>
198
+ </div>
199
+ </button>
200
+ `;
201
+ }
202
+ get selectedMenuId() {
203
+ return this.openMenu || '';
204
+ }
147
205
  get renderSideMenu() {
148
206
  const drawerState = this.menuOpened ? '' : 'hidden';
149
207
  return html `
@@ -152,7 +210,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
152
210
  <div id="menu" class=${drawerState}>
153
211
  <ia-menu-slider
154
212
  .menus=${this.menuContents}
155
- .selectedMenu=${this.openMenu}
213
+ .selectedMenu=${this.selectedMenuId}
156
214
  @menuTypeSelected=${this.setOpenMenu}
157
215
  @menuSliderClosed=${this.closeMenu}
158
216
  manuallyHandleClose
@@ -164,19 +222,21 @@ let ItemNavigator = class ItemNavigator extends LitElement {
164
222
  }
165
223
  /** End Side menu */
166
224
  /** Menu Shortcuts */
167
- setMenuShortcuts(e) {
168
- this.menuShortcuts = [...e.detail];
169
- }
170
225
  openShortcut(selectedMenuId = '') {
171
226
  this.openMenu = selectedMenuId;
172
227
  this.menuOpened = true;
173
228
  }
174
229
  get shortcuts() {
175
- const shortcuts = this.menuShortcuts.map(({ icon, id }) => html `
230
+ const shortcuts = this.menuShortcuts.map(({ icon, id }) => {
231
+ if (id === 'fullscreen') {
232
+ return html `${icon}`;
233
+ }
234
+ return html `
176
235
  <button class="shortcut ${id}" @click="${() => this.openShortcut(id)}">
177
236
  ${icon}
178
237
  </button>
179
- `);
238
+ `;
239
+ });
180
240
  return html `<div class="shortcuts">${shortcuts}</div>`;
181
241
  }
182
242
  /** End Menu Shortcuts */
@@ -184,30 +244,17 @@ let ItemNavigator = class ItemNavigator extends LitElement {
184
244
  get menuClass() {
185
245
  const drawerState = this.menuOpened ? 'open' : '';
186
246
  const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
187
- return `${drawerState} ${fullscreenState}`;
188
- }
189
- get menuToggleButton() {
190
- return html `
191
- <button
192
- class="toggle-menu"
193
- @click=${() => this.toggleMenu()}
194
- title="Toggle theater side panels"
195
- >
196
- <div><ia-icon-ellipses></ia-icon-ellipses></div>
197
- </button>
198
- `;
247
+ return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
199
248
  }
200
249
  static get styles() {
201
250
  const subnavWidth = css `var(--menuWidth, 320px)`;
202
- const tabletPlusQuery = css `
203
- @media (min-width: 640px);
204
- `;
205
251
  const transitionTiming = css `var(--animationTiming, 200ms)`;
206
252
  const transitionEffect = css `transform ${transitionTiming} ease-out`;
253
+ const menuMargin = css `var(--theaterMenuMargin, 42px)`;
254
+ const theaterBg = css `var(--theaterBgColor, #000)`;
207
255
  return css `
208
256
  :host,
209
257
  #frame,
210
- #reader,
211
258
  .menu-and-reader {
212
259
  min-height: inherit;
213
260
  height: inherit;
@@ -215,18 +262,48 @@ let ItemNavigator = class ItemNavigator extends LitElement {
215
262
  overflow: hidden;
216
263
  display: block;
217
264
  }
265
+
266
+ :host,
267
+ #frame,
268
+ .menu-and-reader,
269
+ .loading-area,
270
+ .loading-view {
271
+ min-height: inherit;
272
+ height: inherit;
273
+ }
274
+
275
+ slot {
276
+ display: block;
277
+ overflow: hidden;
278
+ }
279
+
218
280
  #frame {
219
- border: 1px solid white;
281
+ background-color: ${theaterBg};
282
+ color-scheme: dark;
283
+ }
284
+
285
+ #frame.fullscreen {
286
+ position: fixed;
287
+ top: 0;
288
+ bottom: 0;
289
+ left: 0;
290
+ right: 0;
291
+ z-index: 9;
220
292
  }
221
293
 
222
- #frame.fullscreen,
223
- #frame.fullscreen #reader {
224
- height: 100vh;
294
+ .loading-view {
295
+ display: flex;
296
+ align-items: center;
297
+ justify-content: center;
298
+ }
299
+
300
+ ia-itemnav-loader {
301
+ display: block;
302
+ width: 100%;
225
303
  }
226
304
 
227
305
  .hidden {
228
- height: 1px;
229
- width: 1px;
306
+ display: none;
230
307
  }
231
308
 
232
309
  button {
@@ -250,17 +327,18 @@ let ItemNavigator = class ItemNavigator extends LitElement {
250
327
 
251
328
  nav .minimized {
252
329
  background: rgba(0, 0, 0, 0.7);
253
- border-bottom-right-radius: 5%;
330
+ padding-top: 6px;
254
331
  position: absolute;
255
- padding-top: 0.6rem;
256
- left: 0;
257
- width: 4rem;
332
+ width: ${menuMargin};
258
333
  z-index: 2;
334
+ left: 0;
335
+ border-bottom-right-radius: 5%;
259
336
  }
260
337
 
261
338
  nav .minimized button {
262
339
  width: var(--iconWidth);
263
340
  height: var(--iconHeight);
341
+ margin-bottom: 0.2rem;
264
342
  margin: auto;
265
343
  display: inline-flex;
266
344
  vertical-align: middle;
@@ -268,8 +346,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
268
346
  align-items: center;
269
347
  -webkit-box-pack: center;
270
348
  justify-content: center;
271
- width: 4rem;
272
- height: 4rem;
349
+ width: ${menuMargin};
350
+ height: ${menuMargin};
273
351
  }
274
352
 
275
353
  nav .minimized button.toggle-menu > * {
@@ -301,23 +379,26 @@ let ItemNavigator = class ItemNavigator extends LitElement {
301
379
  #reader {
302
380
  position: relative;
303
381
  z-index: 1;
304
- transition: ${transitionEffect};
382
+ /* transition: ${transitionEffect}; */
305
383
  transform: translateX(0);
306
384
  width: 100%;
307
385
  }
308
386
 
387
+ .open.overlay #reader {
388
+ transition: none;
389
+ }
390
+
309
391
  .open #menu {
310
392
  width: ${subnavWidth};
311
393
  transform: translateX(0);
312
394
  transition: ${transitionEffect};
313
395
  }
314
396
 
315
- ${tabletPlusQuery} {
316
- .open #reader {
317
- transition: ${transitionEffect};
318
- transform: translateX(${subnavWidth});
319
- width: calc(100% - ${subnavWidth});
320
- }
397
+ .open.shift slot[name='theater-header'],
398
+ .open.shift #reader {
399
+ width: calc(100% - var(--menuWidth));
400
+ float: right;
401
+ transition: ${transitionEffect};
321
402
  }
322
403
  `;
323
404
  }
@@ -326,7 +407,7 @@ __decorate([
326
407
  property({
327
408
  type: Object,
328
409
  converter: (value) => {
329
- if (typeof value === 'string') {
410
+ if (value && typeof value === 'string') {
330
411
  return new MetadataResponse(JSON.parse(atob(value)));
331
412
  }
332
413
  return value;
@@ -349,22 +430,14 @@ __decorate([
349
430
  },
350
431
  })
351
432
  ], ItemNavigator.prototype, "signedIn", void 0);
352
- __decorate([
353
- property({
354
- type: Array,
355
- hasChanged: (newVal, oldVal) => {
356
- if (newVal !== oldVal) {
357
- return true;
358
- }
359
- return false;
360
- },
361
- })
362
- ], ItemNavigator.prototype, "menuShortcuts", void 0);
363
433
  __decorate([
364
434
  property({ type: Array })
365
435
  ], ItemNavigator.prototype, "menuContents", void 0);
366
436
  __decorate([
367
- property({ type: Boolean })
437
+ property({ type: Array })
438
+ ], ItemNavigator.prototype, "menuShortcuts", void 0);
439
+ __decorate([
440
+ property({ type: Boolean, reflect: true, attribute: true })
368
441
  ], ItemNavigator.prototype, "viewportInFullscreen", void 0);
369
442
  __decorate([
370
443
  property({ type: Boolean })
@@ -373,14 +446,25 @@ __decorate([
373
446
  property({ type: String })
374
447
  ], ItemNavigator.prototype, "openMenu", void 0);
375
448
  __decorate([
376
- property({ type: Object })
449
+ property({ attribute: false })
377
450
  ], ItemNavigator.prototype, "modal", void 0);
378
451
  __decorate([
379
- state()
452
+ property({ attribute: false })
453
+ ], ItemNavigator.prototype, "sharedObserver", void 0);
454
+ __decorate([
455
+ property({ type: Boolean, reflect: true, attribute: true })
380
456
  ], ItemNavigator.prototype, "loaded", void 0);
457
+ __decorate([
458
+ state()
459
+ ], ItemNavigator.prototype, "openMenuState", void 0);
460
+ __decorate([
461
+ query('#frame')
462
+ ], ItemNavigator.prototype, "frame", void 0);
463
+ __decorate([
464
+ query('slot[name="theater-header"]')
465
+ ], ItemNavigator.prototype, "headerSlot", void 0);
381
466
  ItemNavigator = __decorate([
382
- customElement('item-navigator')
467
+ customElement('ia-item-navigator')
383
468
  ], ItemNavigator);
384
469
  export { ItemNavigator };
385
- customElements.define('ia-menu-slider', IAMenuSlider);
386
470
  //# sourceMappingURL=item-navigator.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n customElement,\n property,\n state,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\n// @ts-ignore\nimport { IAMenuSlider } from '@internetarchive/ia-menu-slider';\nimport { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n IntManageFullscreenEvent,\n IntOpenModalEvent,\n IntManageSideMenuEvent,\n IntSetOpenMenuEvent,\n IntSetMenuContentsEvent,\n IntSetMenuShortcuts,\n IntLoadingStateUpdatedEvent,\n} from './interfaces/event-interfaces';\n\nimport { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';\n\n@customElement('item-navigator')\nexport class ItemNavigator extends LitElement {\n @property({\n type: Object,\n converter: (value: string | MetadataResponse | null): MetadataResponse => {\n if (typeof value === 'string') {\n return new MetadataResponse(JSON.parse(atob(value)));\n }\n return value as MetadataResponse;\n },\n })\n item: MetadataResponse | undefined = undefined;\n\n @property({ type: String }) itemType = '';\n\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({\n converter: (arg: string | boolean | null) => {\n if (typeof arg === 'boolean') {\n return arg;\n }\n return arg === 'true';\n },\n })\n signedIn = false;\n\n @property({\n type: Array,\n hasChanged: (newVal: Array<object>, oldVal: Array<object>) => {\n if (newVal !== oldVal) {\n return true;\n }\n return false;\n },\n })\n menuShortcuts: IntMenuShortcut[] = [];\n\n @property({ type: Array }) menuContents: IntMenuProvider[] = [];\n\n @property({ type: Boolean }) viewportInFullscreen = false;\n\n @property({ type: Boolean }) menuOpened = false;\n\n @property({ type: String }) openMenu = '';\n\n @property({ type: Object }) modal:\n | ModalManagerInterface\n | undefined = undefined;\n\n @state() loaded: boolean = false;\n\n firstUpdated(): void {\n if (!this.modal) {\n this.createModal();\n }\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hide';\n return html`\n <div id=\"frame\" class=${this.menuClass}>\n <slot name=\"item-nav-header\"></slot>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n ${!this.loaded\n ? html`<ia-itemnav-loader></ia-itemnav-loader>`\n : nothing}\n ${this.item\n ? html`<div id=\"reader\" class=${displayReaderClass}>\n ${this.renderViewport}\n </div>`\n : nothing}\n </div>\n </div>\n `;\n }\n\n get BooksViewer(): TemplateResult {\n return html`\n <book-navigator\n .baseHost=${this.baseHost}\n .book=${this.item}\n ?signedIn=${this.signedIn}\n ?sideMenuOpen=${this.menuOpened}\n @ViewportInFullScreen=${this.manageViewportFullscreen}\n @loadingStateUpdated=${this.loadingStateUpdated}\n @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n @showItemNavigatorModal=${this.openModal}\n @closeItemNavigatorModal=${this.closeModal}\n >\n <div slot=\"bookreader\">\n <slot name=\"bookreader\"></slot>\n </div>\n </book-navigator>\n `;\n }\n\n get renderViewport(): TemplateResult | typeof nothing {\n if (!this.item) {\n return nothing;\n }\n if (this.itemType === 'bookreader') {\n return this.BooksViewer;\n }\n return html` <ia-item-inspector\n .itemMD=${this.item}\n @loadingStateUpdated=${this.loadingStateUpdated}\n @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n ></ia-item-inspector>`;\n }\n\n loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = !!loaded;\n }\n\n /* Modal management */\n openModal(e: IntOpenModalEvent): void {\n const { config, customModalContent } = e.detail;\n if (!config || !customModalContent) {\n return;\n }\n\n this.modal?.showModal({\n config,\n customModalContent,\n });\n }\n\n closeModal(): void {\n this.modal?.closeModal();\n }\n\n /** Creates modal DOM & attaches to `<body>` */\n private createModal(): void {\n this.modal = document.createElement(\n 'modal-manager'\n ) as ModalManagerInterface;\n document.body.appendChild(this.modal);\n }\n /* End Modal management */\n\n /** Fullscreen Management */\n manageViewportFullscreen(e: IntManageFullscreenEvent): void {\n const { isFullScreen } = e.detail;\n this.viewportInFullscreen = isFullScreen;\n }\n /** End Fullscreen Management */\n\n /** Side menu */\n get shouldRenderMenu(): boolean {\n return !!(this.menuContents.length || this.menuShortcuts.length);\n }\n\n toggleMenu(): void {\n this.menuOpened = !this.menuOpened;\n }\n\n closeMenu(): void {\n this.menuOpened = false;\n }\n\n setOpenMenu(e: IntSetOpenMenuEvent): void {\n const { id } = e.detail;\n this.openMenu = id === this.openMenu ? '' : id;\n }\n\n setMenuContents(e: IntSetMenuContentsEvent): void {\n const updatedContents = [...e.detail];\n this.menuContents = updatedContents;\n }\n\n /** Toggles Side Menu & Sets viewable subpanel */\n manageSideMenuEvents(e: IntManageSideMenuEvent): void {\n const { menuId, action } = e.detail;\n if (menuId) {\n if (action === 'open') {\n this.openShortcut(menuId);\n } else if (action === 'toggle') {\n this.openMenu = menuId;\n this.toggleMenu();\n }\n }\n }\n\n get renderSideMenu(): TemplateResult {\n const drawerState = this.menuOpened ? '' : 'hidden';\n\n return html`\n <nav>\n <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n <div id=\"menu\" class=${drawerState}>\n <ia-menu-slider\n .menus=${this.menuContents}\n .selectedMenu=${this.openMenu}\n @menuTypeSelected=${this.setOpenMenu}\n @menuSliderClosed=${this.closeMenu}\n manuallyHandleClose\n open\n ></ia-menu-slider>\n </div>\n </nav>\n `;\n }\n /** End Side menu */\n\n /** Menu Shortcuts */\n setMenuShortcuts(e: IntSetMenuShortcuts): void {\n this.menuShortcuts = [...e.detail];\n }\n\n openShortcut(selectedMenuId = ''): void {\n this.openMenu = selectedMenuId;\n this.menuOpened = true;\n }\n\n get shortcuts(): TemplateResult {\n const shortcuts = this.menuShortcuts.map(\n ({ icon, id }) => html`\n <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n ${icon}\n </button>\n `\n );\n return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n }\n /** End Menu Shortcuts */\n\n /** Misc Render */\n get menuClass(): string {\n const drawerState = this.menuOpened ? 'open' : '';\n const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n return `${drawerState} ${fullscreenState}`;\n }\n\n get menuToggleButton(): TemplateResult {\n return html`\n <button\n class=\"toggle-menu\"\n @click=${() => this.toggleMenu()}\n title=\"Toggle theater side panels\"\n >\n <div><ia-icon-ellipses></ia-icon-ellipses></div>\n </button>\n `;\n }\n\n static get styles() {\n const subnavWidth = css`var(--menuWidth, 320px)`;\n const tabletPlusQuery = css`\n @media (min-width: 640px);\n `;\n const transitionTiming = css`var(--animationTiming, 200ms)`;\n const transitionEffect = css`transform ${transitionTiming} ease-out`;\n\n return css`\n :host,\n #frame,\n #reader,\n .menu-and-reader {\n min-height: inherit;\n height: inherit;\n position: relative;\n overflow: hidden;\n display: block;\n }\n #frame {\n border: 1px solid white;\n }\n\n #frame.fullscreen,\n #frame.fullscreen #reader {\n height: 100vh;\n }\n\n .hidden {\n height: 1px;\n width: 1px;\n }\n\n button {\n cursor: pointer;\n padding: 0;\n border: 0;\n }\n\n button:focus,\n button:active {\n outline: none;\n }\n\n .menu-and-reader {\n position: relative;\n }\n\n nav button {\n background: none;\n }\n\n nav .minimized {\n background: rgba(0, 0, 0, 0.7);\n border-bottom-right-radius: 5%;\n position: absolute;\n padding-top: 0.6rem;\n left: 0;\n width: 4rem;\n z-index: 2;\n }\n\n nav .minimized button {\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin: auto;\n display: inline-flex;\n vertical-align: middle;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n width: 4rem;\n height: 4rem;\n }\n\n nav .minimized button.toggle-menu > * {\n border: 2px solid var(--iconStrokeColor);\n border-radius: var(--iconWidth);\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin: auto;\n }\n\n ia-icon-ellipses {\n width: var(--iconWidth);\n height: var(--iconHeight);\n }\n\n #menu {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 3;\n overflow: hidden;\n transform: translateX(-${subnavWidth});\n width: ${subnavWidth};\n transform: translateX(calc(${subnavWidth} * -1));\n transition: ${transitionEffect};\n }\n\n #reader {\n position: relative;\n z-index: 1;\n transition: ${transitionEffect};\n transform: translateX(0);\n width: 100%;\n }\n\n .open #menu {\n width: ${subnavWidth};\n transform: translateX(0);\n transition: ${transitionEffect};\n }\n\n ${tabletPlusQuery} {\n .open #reader {\n transition: ${transitionEffect};\n transform: translateX(${subnavWidth});\n width: calc(100% - ${subnavWidth});\n }\n }\n `;\n }\n}\n\ncustomElements.define('ia-menu-slider', IAMenuSlider);\n"]}
1
+ {"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n customElement,\n property,\n state,\n query,\n PropertyValues,\n CSSResult,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n SharedResizeObserver,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport '@internetarchive/ia-menu-slider';\n\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n ToggleSideMenuOpenEvent,\n ToggleSidePanelOpenEvent,\n SetSideMenuContentsEvent,\n SetSideMenuShortcutsEvent,\n loadingStateUpdatedEvent,\n ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport {\n MenuProviderInterface,\n MenuShortcutInterface,\n MenuId,\n} from './interfaces/menu-interfaces';\nimport './no-theater-available';\n\nexport enum ItemType {\n BOOK = 'bookreader',\n}\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n extends LitElement\n implements SharedResizeObserverResizeHandlerInterface {\n @property({\n type: Object,\n converter: (value: string | MetadataResponse | null): MetadataResponse => {\n if (value && typeof value === 'string') {\n return new MetadataResponse(JSON.parse(atob(value)));\n }\n return value as MetadataResponse;\n },\n })\n item?: MetadataResponse;\n\n @property({ type: String }) itemType?: ItemType;\n\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({\n converter: (arg: string | boolean | null) => {\n if (typeof arg === 'boolean') {\n return arg;\n }\n return arg === 'true';\n },\n })\n signedIn = false;\n\n @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n @property({ type: Boolean, reflect: true, attribute: true })\n viewportInFullscreen: boolean | null = null;\n\n @property({ type: Boolean }) menuOpened = false;\n\n @property({ type: String }) openMenu?: MenuId;\n\n @property({ attribute: false }) modal?: ModalManager;\n\n @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n @property({ type: Boolean, reflect: true, attribute: true }) loaded:\n | true\n | null = null;\n\n @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n @query('#frame') private frame!: HTMLDivElement;\n\n @query('slot[name=\"theater-header\"]') private headerSlot!: HTMLDivElement;\n\n disconnectedCallback() {\n this.removeResizeObserver();\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('sharedObserver')) {\n const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;\n oldObserver?.removeObserver(this.resizeObserverConfig);\n this.setResizeObserver();\n }\n }\n\n /** Shared observer */\n handleResize(entry: ResizeObserverEntry): void {\n const { width } = entry.contentRect;\n if (width <= 600) {\n this.openMenuState = 'overlay';\n return;\n }\n this.openMenuState = 'shift';\n }\n\n private setResizeObserver(): void {\n this.sharedObserver?.addObserver(this.resizeObserverConfig);\n }\n\n private removeResizeObserver(): void {\n this.sharedObserver?.removeObserver(this.resizeObserverConfig);\n }\n\n get resizeObserverConfig(): {\n handler: SharedResizeObserverResizeHandlerInterface;\n target: Element;\n } {\n return {\n handler: this,\n target: this.frame,\n };\n }\n /** End shared observer */\n\n get loaderTitle() {\n return this.viewportInFullscreen ? 'Internet Archive' : '';\n }\n\n get readerHeightStyle(): string {\n const calcFSHeight = `calc(100vh - ${this.headerSlot?.offsetHeight}px)`;\n return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';\n }\n\n get loadingArea() {\n return html`\n <div class=\"loading-area\">\n <div class=\"loading-view\">\n <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>\n </div>\n </div>\n `;\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hidden';\n return html`\n <div id=\"frame\" class=${`${this.menuClass}`}>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n <slot name=\"theater-header\"></slot>\n <div\n id=\"reader\"\n class=${displayReaderClass}\n style=${this.readerHeightStyle}\n >\n ${this.renderViewport}\n </div>\n ${!this.loaded ? this.loadingArea : nothing}\n </div>\n </div>\n `;\n }\n\n get noTheaterView() {\n return html`<ia-no-theater-available\n .identifier=${this.item?.metadata?.identifier}\n @loadingStateUpdated=${this.loadingStateUpdated}\n ></ia-no-theater-available>`;\n }\n\n get theaterSlot() {\n return html`\n <slot name=\"theater-main\" style=${this.readerHeightStyle}></slot>\n `;\n }\n\n get booksViewer(): TemplateResult {\n const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n\n return html`\n <book-navigator\n .modal=${this.modal}\n .baseHost=${this.baseHost}\n .itemMD=${this.item}\n ?signedIn=${this.signedIn}\n ?sideMenuOpen=${this.menuOpened}\n .sharedObserver=${this.sharedObserver}\n @ViewportInFullScreen=${this.manageViewportFullscreen}\n @loadingStateUpdated=${this.loadingStateUpdated}\n @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n >\n <div slot=\"theater-main\" style=${slotVisibility}>\n ${this.theaterSlot}\n </div>\n </book-navigator>\n `;\n }\n\n get renderViewport(): TemplateResult | typeof nothing {\n if (!this.item) {\n return nothing;\n }\n if (this.itemType === ItemType.BOOK) {\n return this.booksViewer;\n }\n return this.noTheaterView;\n }\n\n loadingStateUpdated(e: loadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = loaded || null;\n }\n\n /** Fullscreen Management */\n manageViewportFullscreen(e: ManageFullscreenEvent): void {\n const fullscreenStatus = !!e.detail.isFullScreen;\n this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n const event = new CustomEvent('fullscreenToggled', {\n detail: e.detail,\n }) as ManageFullscreenEvent;\n\n this.dispatchEvent(event);\n }\n /** End Fullscreen Management */\n\n /** Side menu */\n get shouldRenderMenu(): boolean {\n return !!this.menuContents.length;\n }\n\n toggleMenu(): void {\n this.menuOpened = !this.menuOpened;\n }\n\n closeMenu(): void {\n this.menuOpened = false;\n }\n\n setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n const { id } = e.detail;\n this.openMenu = id !== this.openMenu ? id : undefined;\n }\n\n setMenuContents(e: SetSideMenuContentsEvent): void {\n const updatedContents = [...e.detail];\n this.menuContents = updatedContents;\n }\n\n setMenuShortcuts(e: SetSideMenuShortcutsEvent) {\n this.menuShortcuts = [...e.detail];\n }\n\n /** Toggles Side Menu & Sets viewable subpanel */\n manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n const { menuId, action } = e.detail;\n if (!menuId) {\n return;\n }\n\n if (action === 'open') {\n this.openShortcut(menuId);\n } else if (action === 'toggle') {\n this.openMenu = menuId;\n this.toggleMenu();\n }\n }\n\n get menuToggleButton() {\n return html`\n <button\n class=\"toggle-menu\"\n @click=${this.toggleMenu}\n title=\"Toggle theater side panels\"\n >\n <div>\n <ia-icon-ellipses\n style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n ></ia-icon-ellipses>\n </div>\n </button>\n `;\n }\n\n get selectedMenuId(): MenuId | '' {\n return this.openMenu || '';\n }\n\n get renderSideMenu(): TemplateResult {\n const drawerState = this.menuOpened ? '' : 'hidden';\n return html`\n <nav>\n <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n <div id=\"menu\" class=${drawerState}>\n <ia-menu-slider\n .menus=${this.menuContents}\n .selectedMenu=${this.selectedMenuId}\n @menuTypeSelected=${this.setOpenMenu}\n @menuSliderClosed=${this.closeMenu}\n manuallyHandleClose\n open\n ></ia-menu-slider>\n </div>\n </nav>\n `;\n }\n /** End Side menu */\n\n /** Menu Shortcuts */\n openShortcut(selectedMenuId: MenuId = ''): void {\n this.openMenu = selectedMenuId;\n this.menuOpened = true;\n }\n\n get shortcuts(): TemplateResult {\n const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n if (id === 'fullscreen') {\n return html`${icon}`;\n }\n\n return html`\n <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n ${icon}\n </button>\n `;\n });\n return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n }\n /** End Menu Shortcuts */\n\n /** Misc Render */\n get menuClass(): string {\n const drawerState = this.menuOpened ? 'open' : '';\n const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n }\n\n static get styles(): CSSResult {\n const subnavWidth = css`var(--menuWidth, 320px)`;\n const transitionTiming = css`var(--animationTiming, 200ms)`;\n const transitionEffect = css`transform ${transitionTiming} ease-out`;\n const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n const theaterBg = css`var(--theaterBgColor, #000)`;\n\n return css`\n :host,\n #frame,\n .menu-and-reader {\n min-height: inherit;\n height: inherit;\n position: relative;\n overflow: hidden;\n display: block;\n }\n\n :host,\n #frame,\n .menu-and-reader,\n .loading-area,\n .loading-view {\n min-height: inherit;\n height: inherit;\n }\n\n slot {\n display: block;\n overflow: hidden;\n }\n\n #frame {\n background-color: ${theaterBg};\n color-scheme: dark;\n }\n\n #frame.fullscreen {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 9;\n }\n\n .loading-view {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\n }\n\n .hidden {\n display: none;\n }\n\n button {\n cursor: pointer;\n padding: 0;\n border: 0;\n }\n\n button:focus,\n button:active {\n outline: none;\n }\n\n .menu-and-reader {\n position: relative;\n }\n\n nav button {\n background: none;\n }\n\n nav .minimized {\n background: rgba(0, 0, 0, 0.7);\n padding-top: 6px;\n position: absolute;\n width: ${menuMargin};\n z-index: 2;\n left: 0;\n border-bottom-right-radius: 5%;\n }\n\n nav .minimized button {\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin-bottom: 0.2rem;\n margin: auto;\n display: inline-flex;\n vertical-align: middle;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n width: ${menuMargin};\n height: ${menuMargin};\n }\n\n nav .minimized button.toggle-menu > * {\n border: 2px solid var(--iconStrokeColor);\n border-radius: var(--iconWidth);\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin: auto;\n }\n\n ia-icon-ellipses {\n width: var(--iconWidth);\n height: var(--iconHeight);\n }\n\n #menu {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 3;\n overflow: hidden;\n transform: translateX(-${subnavWidth});\n width: ${subnavWidth};\n transform: translateX(calc(${subnavWidth} * -1));\n transition: ${transitionEffect};\n }\n\n #reader {\n position: relative;\n z-index: 1;\n /* transition: ${transitionEffect}; */\n transform: translateX(0);\n width: 100%;\n }\n\n .open.overlay #reader {\n transition: none;\n }\n\n .open #menu {\n width: ${subnavWidth};\n transform: translateX(0);\n transition: ${transitionEffect};\n }\n\n .open.shift slot[name='theater-header'],\n .open.shift #reader {\n width: calc(100% - var(--menuWidth));\n float: right;\n transition: ${transitionEffect};\n }\n `;\n }\n}\n"]}
@@ -1,5 +1,10 @@
1
1
  import { LitElement } from 'lit-element';
2
2
  export declare class IAItemNavLoader extends LitElement {
3
+ static get properties(): {
4
+ title: {
5
+ type: StringConstructor;
6
+ };
7
+ };
3
8
  get bookIconSvg(): import("lit-element").SVGTemplateResult;
4
9
  get icon(): import("lit-element").SVGTemplateResult;
5
10
  get loader(): import("lit-element").SVGTemplateResult;
@@ -1,8 +1,13 @@
1
1
  import { __decorate } from "tslib";
2
2
  /* eslint-disable class-methods-use-this */
3
3
  import { css, html, LitElement, customElement } from 'lit-element';
4
- import { svg } from 'lit-html';
4
+ import { svg, nothing } from 'lit-html';
5
5
  let IAItemNavLoader = class IAItemNavLoader extends LitElement {
6
+ static get properties() {
7
+ return {
8
+ title: { type: String },
9
+ };
10
+ }
6
11
  get bookIconSvg() {
7
12
  return svg `
8
13
  <g class="bookIcon" transform="matrix(1 0 0 -1 28 67.362264)">
@@ -38,9 +43,10 @@ let IAItemNavLoader = class IAItemNavLoader extends LitElement {
38
43
  `;
39
44
  }
40
45
  render() {
46
+ const title = this.title ? html `<h2>${this.title}</h2>` : nothing;
41
47
  return html `
42
48
  <div class="place-holder">
43
- ${this.loader}
49
+ ${title} ${this.loader}
44
50
  <h3>Loading viewer</h3>
45
51
  </div>
46
52
  `;