@internetarchive/ia-item-navigator 0.0.0-a1 → 0.0.0-a14

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 (61) hide show
  1. package/README.md +29 -19
  2. package/demo/app-root.ts +101 -34
  3. package/demo/index.html +9 -1
  4. package/dist/demo/app-root.d.ts +26 -7
  5. package/dist/demo/app-root.js +88 -34
  6. package/dist/demo/app-root.js.map +1 -1
  7. package/dist/src/interfaces/event-interfaces.d.ts +3 -13
  8. package/dist/src/interfaces/event-interfaces.js.map +1 -1
  9. package/dist/src/interfaces/menu-interfaces.d.ts +3 -2
  10. package/dist/src/interfaces/menu-interfaces.js.map +1 -1
  11. package/dist/src/interfaces/nav-controller-interface.d.ts +9 -0
  12. package/dist/src/interfaces/nav-controller-interface.js.map +1 -1
  13. package/dist/src/item-inspector/item-inspector.d.ts +0 -41
  14. package/dist/src/item-inspector/item-inspector.js +253 -215
  15. package/dist/src/item-inspector/item-inspector.js.map +1 -1
  16. package/dist/src/item-inspector/visual-mod-provider.d.ts +2 -0
  17. package/dist/src/item-inspector/visual-mod-provider.js +3 -0
  18. package/dist/src/item-inspector/visual-mod-provider.js.map +1 -1
  19. package/dist/src/item-navigator.d.ts +36 -22
  20. package/dist/src/item-navigator.js +118 -108
  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 +17 -0
  29. package/dist/test/book-nav-stub.js +42 -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 +321 -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/event-interfaces.ts +3 -14
  45. package/src/interfaces/menu-interfaces.ts +3 -2
  46. package/src/interfaces/nav-controller-interface.ts +13 -0
  47. package/src/item-navigator.ts +144 -122
  48. package/src/loader.ts +9 -2
  49. package/src/no-theater-available.ts +85 -0
  50. package/test/book-nav-stub.ts +35 -0
  51. package/test/ia-item-navigator.test.ts +443 -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/item-inspector/files-by-type/files-by-type-provider.ts +0 -43
  56. package/src/item-inspector/files-by-type/ia-files-by-type.ts +0 -100
  57. package/src/item-inspector/item-inspector.ts +0 -235
  58. package/src/item-inspector/share-provider.ts +0 -51
  59. package/src/item-inspector/visual-mod-provider.ts +0 -60
  60. package/src/item-navigator-js.js +0 -372
  61. package/test/your-webcomponent.test.ts +0 -40
@@ -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';
18
+ import '@internetarchive/ia-menu-slider';
19
+
20
20
  import { ModalManagerInterface } from '@internetarchive/modal-manager';
21
21
  import '@internetarchive/icon-ellipses/icon-ellipses';
22
22
  import './loader';
23
23
 
24
24
  import {
25
- IntOpenModalEvent,
26
25
  IntManageSideMenuEvent,
27
26
  IntSetOpenMenuEvent,
28
27
  IntSetMenuContentsEvent,
29
28
  IntSetMenuShortcutsEvent,
30
29
  IntLoadingStateUpdatedEvent,
30
+ IntManageFullscreenEvent,
31
31
  } from './interfaces/event-interfaces';
32
32
 
33
- import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
34
-
35
- @customElement('item-navigator')
33
+ import {
34
+ IntMenuProvider,
35
+ IntMenuShortcut,
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,53 +69,42 @@ 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: IntMenuProvider[] = [];
75
73
 
76
74
  @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];
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({ type: Object }) modal:
85
- | ModalManagerInterface
86
- | undefined = undefined;
83
+ @property({ attribute: false }) modal?: ModalManagerInterface;
87
84
 
88
- @property({ attribute: false }) private sharedObserver?: any; // PromisedSingleton<SharedResizeObserverInterface>;
85
+ @property({ attribute: false }) sharedObserver?: SharedResizeObserver;
89
86
 
90
- @state() private loaded: boolean = false;
87
+ @property({ type: Boolean, reflect: true, attribute: true }) loaded:
88
+ | true
89
+ | null = null;
91
90
 
92
- @state() private openMenuState: 'overlay' | 'shift' = 'shift';
91
+ @state() openMenuState: 'overlay' | 'shift' = 'shift';
93
92
 
94
93
  @query('#frame') private frame!: HTMLDivElement;
95
94
 
95
+ @query('slot[name="theater-header"]') private headerSlot!: HTMLDivElement;
96
+
96
97
  disconnectedCallback() {
97
- this.sharedObserver?.removeObserver({
98
- handler: this,
99
- target: this.frame,
100
- });
98
+ this.removeResizeObserver();
101
99
  }
102
100
 
103
- firstUpdated(): void {
104
- if (!this.modal) {
105
- this.createModal();
101
+ updated(changed: PropertyValues) {
102
+ if (changed.has('sharedObserver')) {
103
+ this.setResizeObserver();
106
104
  }
107
-
108
- this.startResizeObserver();
109
105
  }
110
106
 
107
+ /** Shared observer */
111
108
  handleResize(entry: ResizeObserverEntry): void {
112
109
  const { width } = entry.contentRect;
113
110
  if (width <= 600) {
@@ -115,46 +112,86 @@ export class ItemNavigator
115
112
  return;
116
113
  }
117
114
  this.openMenuState = 'shift';
118
- console.log('width', width);
119
115
  }
120
116
 
121
- private async startResizeObserver(): Promise<void> {
122
- const ro = new PromisedSingleton<SharedResizeObserverInterface>({
123
- generator: async (): Promise<SharedResizeObserverInterface> => {
124
- return new SharedResizeObserver();
125
- },
126
- });
117
+ private setResizeObserver(): void {
118
+ this.removeResizeObserver();
119
+ this.sharedObserver?.addObserver(this.resizeObserverConfig);
120
+ }
121
+
122
+ private removeResizeObserver(): void {
123
+ this.sharedObserver?.removeObserver(this.resizeObserverConfig);
124
+ }
127
125
 
128
- this.sharedObserver = await ro.get();
129
- this.sharedObserver?.addObserver({
126
+ get resizeObserverConfig(): {
127
+ handler: SharedResizeObserverResizeHandlerInterface;
128
+ target: Element;
129
+ } {
130
+ return {
130
131
  handler: this,
131
132
  target: this.frame,
132
- });
133
+ };
134
+ }
135
+ /** End shared observer */
136
+
137
+ get loaderTitle() {
138
+ return this.viewportInFullscreen ? 'Internet Archive' : '';
139
+ }
140
+
141
+ get readerHeightStyle(): string {
142
+ const calcFSHeight = `calc(100vh - ${this.headerSlot?.offsetHeight}px)`;
143
+ return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
144
+ }
145
+
146
+ get loadingArea() {
147
+ return html`
148
+ <div class="loading-area">
149
+ <div class="loading-view">
150
+ <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>
151
+ </div>
152
+ </div>
153
+ `;
133
154
  }
134
155
 
135
156
  render(): TemplateResult {
136
157
  const displayReaderClass = this.loaded ? '' : 'hide';
137
158
  return html`
138
- <div id="frame" class=${this.menuClass}>
139
- <slot name="item-nav-header"></slot>
159
+ <div id="frame" class=${`${this.menuClass}`}>
140
160
  <div class="menu-and-reader">
141
161
  ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
142
- ${!this.loaded
143
- ? html`<div class="loading-view">
144
- <ia-itemnav-loader></ia-itemnav-loader>
145
- </div>`
146
- : nothing}
147
- <div id="reader" class=${displayReaderClass}>
162
+ <slot name="theater-header"></slot>
163
+ <div
164
+ id="reader"
165
+ class=${displayReaderClass}
166
+ style=${this.readerHeightStyle}
167
+ >
148
168
  ${this.renderViewport}
149
169
  </div>
170
+ ${!this.loaded ? this.loadingArea : nothing}
150
171
  </div>
151
172
  </div>
152
173
  `;
153
174
  }
154
175
 
155
- get BooksViewer(): TemplateResult {
176
+ get noTheaterView() {
177
+ return html`<ia-no-theater-available
178
+ .identifier=${this.item?.metadata?.identifier}
179
+ @loadingStateUpdated=${this.loadingStateUpdated}
180
+ ></ia-no-theater-available>`;
181
+ }
182
+
183
+ get theaterSlot() {
184
+ return html`
185
+ <slot name="theater-main" style=${this.readerHeightStyle}></slot>
186
+ `;
187
+ }
188
+
189
+ get booksViewer(): TemplateResult {
190
+ const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
191
+
156
192
  return html`
157
193
  <book-navigator
194
+ .modal=${this.modal}
158
195
  .baseHost=${this.baseHost}
159
196
  .book=${this.item}
160
197
  ?signedIn=${this.signedIn}
@@ -165,11 +202,9 @@ export class ItemNavigator
165
202
  @updateSideMenu=${this.manageSideMenuEvents}
166
203
  @menuUpdated=${this.setMenuContents}
167
204
  @menuShortcutsUpdated=${this.setMenuShortcuts}
168
- @showItemNavigatorModal=${this.openModal}
169
- @closeItemNavigatorModal=${this.closeModal}
170
205
  >
171
- <div slot="bookreader">
172
- <slot name="bookreader"></slot>
206
+ <div slot="theater-main" style=${slotVisibility}>
207
+ ${this.theaterSlot}
173
208
  </div>
174
209
  </book-navigator>
175
210
  `;
@@ -179,55 +214,27 @@ export class ItemNavigator
179
214
  if (!this.item) {
180
215
  return nothing;
181
216
  }
182
- if (this.itemType === 'bookreader') {
183
- return this.BooksViewer;
217
+ if (this.itemType === ItemType.BOOK) {
218
+ return this.booksViewer;
184
219
  }
185
- return html` <ia-item-inspector
186
- .itemMD=${this.item}
187
- @updateSideMenu=${this.manageSideMenuEvents}
188
- @menuUpdated=${this.setMenuContents}
189
- @ViewportInFullScreen=${this.manageViewportFullscreen}
190
- @menuShortcutsUpdated=${this.setMenuShortcuts}
191
- @showItemNavigatorModal=${this.openModal}
192
- @closeItemNavigatorModal=${this.closeModal}
193
- @loadingStateUpdated=${this.loadingStateUpdated}
194
- ></ia-item-inspector>`;
220
+ return this.noTheaterView;
195
221
  }
196
222
 
197
223
  loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {
198
224
  const { loaded } = e.detail;
199
- this.loaded = !!loaded;
225
+ this.loaded = loaded || null;
200
226
  }
201
227
 
202
- /* Modal management */
203
- openModal(e: IntOpenModalEvent): void {
204
- const { config, customModalContent } = e.detail;
205
- if (!config || !customModalContent) {
206
- return;
207
- }
208
-
209
- this.modal?.showModal({
210
- config,
211
- customModalContent,
212
- });
213
- }
214
-
215
- closeModal(): void {
216
- this.modal?.closeModal();
217
- }
228
+ /** Fullscreen Management */
229
+ manageViewportFullscreen(e: IntManageFullscreenEvent): void {
230
+ const fullscreenStatus = !!e.detail.isFullScreen;
231
+ this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
218
232
 
219
- /** Creates modal DOM & attaches to `<body>` */
220
- private createModal(): void {
221
- this.modal = document.createElement(
222
- 'modal-manager'
223
- ) as ModalManagerInterface;
224
- document.body.appendChild(this.modal);
225
- }
226
- /* End Modal management */
233
+ const event = new CustomEvent('fullscreenToggled', {
234
+ detail: e.detail,
235
+ }) as IntManageFullscreenEvent;
227
236
 
228
- /** Fullscreen Management */
229
- manageViewportFullscreen(): void {
230
- this.viewportInFullscreen = !this.viewportInFullscreen;
237
+ this.dispatchEvent(event);
231
238
  }
232
239
  /** End Fullscreen Management */
233
240
 
@@ -261,18 +268,19 @@ export class ItemNavigator
261
268
  /** Toggles Side Menu & Sets viewable subpanel */
262
269
  manageSideMenuEvents(e: IntManageSideMenuEvent): void {
263
270
  const { menuId, action } = e.detail;
264
- if (menuId) {
265
- if (action === 'open') {
266
- this.openShortcut(menuId);
267
- } else if (action === 'toggle') {
268
- this.openMenu = menuId;
269
- this.toggleMenu();
270
- }
271
+ if (!menuId) {
272
+ return;
273
+ }
274
+
275
+ if (action === 'open') {
276
+ this.openShortcut(menuId);
277
+ } else if (action === 'toggle') {
278
+ this.openMenu = menuId;
279
+ this.toggleMenu();
271
280
  }
272
281
  }
273
282
 
274
283
  get menuToggleButton() {
275
- // <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
276
284
  return html`
277
285
  <button
278
286
  class="toggle-menu"
@@ -310,19 +318,23 @@ export class ItemNavigator
310
318
  /** End Side menu */
311
319
 
312
320
  /** Menu Shortcuts */
313
- openShortcut(selectedMenuId = ''): void {
321
+ openShortcut(selectedMenuId: MenuId = ''): void {
314
322
  this.openMenu = selectedMenuId;
315
323
  this.menuOpened = true;
316
324
  }
317
325
 
318
326
  get shortcuts(): TemplateResult {
319
- const shortcuts = this.menuShortcuts.map(
320
- ({ icon, id }) => html`
327
+ const shortcuts = this.menuShortcuts.map(({ icon, id }) => {
328
+ if (id === 'fullscreen') {
329
+ return html`${icon}`;
330
+ }
331
+
332
+ return html`
321
333
  <button class="shortcut ${id}" @click="${() => this.openShortcut(id)}">
322
334
  ${icon}
323
335
  </button>
324
- `
325
- );
336
+ `;
337
+ });
326
338
  return html`<div class="shortcuts">${shortcuts}</div>`;
327
339
  }
328
340
  /** End Menu Shortcuts */
@@ -334,16 +346,16 @@ export class ItemNavigator
334
346
  return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
335
347
  }
336
348
 
337
- static get styles() {
349
+ static get styles(): CSSResult {
338
350
  const subnavWidth = css`var(--menuWidth, 320px)`;
339
351
  const transitionTiming = css`var(--animationTiming, 200ms)`;
340
352
  const transitionEffect = css`transform ${transitionTiming} ease-out`;
341
353
  const menuMargin = css`var(--theaterMenuMargin, 42px)`;
354
+ const theaterBg = css`var(--theaterBgColor, #000)`;
342
355
 
343
356
  return css`
344
357
  :host,
345
358
  #frame,
346
- #reader,
347
359
  .menu-and-reader {
348
360
  min-height: inherit;
349
361
  height: inherit;
@@ -352,8 +364,14 @@ export class ItemNavigator
352
364
  display: block;
353
365
  }
354
366
 
367
+ slot {
368
+ display: block;
369
+ overflow: hidden;
370
+ }
371
+
355
372
  #frame {
356
- background-color: var(--menuSliderBg);
373
+ background-color: ${theaterBg};
374
+ color-scheme: dark;
357
375
  }
358
376
 
359
377
  #frame.fullscreen {
@@ -365,9 +383,14 @@ export class ItemNavigator
365
383
  z-index: 9;
366
384
  }
367
385
 
368
- #frame.fullscreen,
369
- #frame.fullscreen #reader {
370
- height: 100vh;
386
+ .loading-area {
387
+ position: absolute;
388
+ top: 0;
389
+ left: 0;
390
+ right: 0;
391
+ bottom: 0;
392
+ height: inherit;
393
+ min-height: inherit;
371
394
  }
372
395
 
373
396
  .loading-view {
@@ -476,6 +499,7 @@ export class ItemNavigator
476
499
  transition: ${transitionEffect};
477
500
  }
478
501
 
502
+ .open.shift slot[name='theater-header'],
479
503
  .open.shift #reader {
480
504
  width: calc(100% - var(--menuWidth));
481
505
  float: right;
@@ -484,5 +508,3 @@ export class ItemNavigator
484
508
  `;
485
509
  }
486
510
  }
487
-
488
- 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
  `;
@@ -0,0 +1,85 @@
1
+ import {
2
+ LitElement,
3
+ customElement,
4
+ property,
5
+ html,
6
+ TemplateResult,
7
+ PropertyValues,
8
+ CSSResult,
9
+ css,
10
+ } from 'lit-element';
11
+
12
+ @customElement('ia-no-theater-available')
13
+ export class IANoTheaterAvailable extends LitElement {
14
+ @property({ type: String }) identifier?: string = '';
15
+
16
+ emitLoaded(): void {
17
+ this.dispatchEvent(
18
+ new CustomEvent<{ loaded: boolean }>('loadingStateUpdated', {
19
+ detail: { loaded: true },
20
+ })
21
+ );
22
+ }
23
+
24
+ updated(changed: PropertyValues): void {
25
+ if (changed.has('identifier')) {
26
+ this.emitLoaded();
27
+ }
28
+ }
29
+
30
+ get downloadUrl(): string {
31
+ return `/download/${this.identifier}`;
32
+ }
33
+
34
+ render(): TemplateResult {
35
+ return html`
36
+ <section>
37
+ <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>
38
+ <p>
39
+ This item does not appear to have any files that can be experienced on
40
+ Archive.org. <br />
41
+ Please download files in this item to interact with them on your
42
+ computer.
43
+ </p>
44
+ <a href=${this.downloadUrl}>Show all files</a>
45
+ </section>
46
+ `;
47
+ }
48
+
49
+ static get styles(): CSSResult {
50
+ return css`
51
+ :host {
52
+ color: var(--primaryTextColor, #fff);
53
+ text-align: center;
54
+ }
55
+ section {
56
+ margin: 10% auto 0;
57
+ padding: 0 5%;
58
+ }
59
+ p {
60
+ font-size: 1.4rem;
61
+ }
62
+ a {
63
+ color: var(--primaryTextColor, #fff);
64
+ background-color: rgb(25, 72, 128);
65
+ min-height: 35px;
66
+ outline: none;
67
+ cursor: pointer;
68
+ line-height: normal;
69
+ border-radius: 0.4rem;
70
+ text-align: center;
71
+ vertical-align: middle;
72
+ font-size: 1.4rem;
73
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
74
+ display: inline-block;
75
+ padding: 0.85rem 1.2rem;
76
+ border: 1px solid rgb(197, 209, 223);
77
+ white-space: nowrap;
78
+ appearance: auto;
79
+ box-sizing: border-box;
80
+ user-select: none;
81
+ text-decoration: none;
82
+ }
83
+ `;
84
+ }
85
+ }
@@ -0,0 +1,35 @@
1
+ import { ModalManagerInterface } from '@internetarchive/modal-manager';
2
+ import { MetadataResponse } from '@internetarchive/search-service';
3
+ import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
4
+ import { html, customElement, LitElement, property } from 'lit-element';
5
+
6
+ @customElement('book-navigator')
7
+ export class BookNavigator extends LitElement {
8
+ @property({ attribute: false }) modal?: ModalManagerInterface;
9
+
10
+ @property({ type: String }) baseHost?: string;
11
+
12
+ @property({ type: Object }) book?: MetadataResponse;
13
+
14
+ @property({ type: Boolean, reflect: true }) signedIn?: boolean | null = null;
15
+
16
+ @property({ type: Boolean }) sideMenuOpen?: boolean;
17
+
18
+ @property({ attribute: false }) sharedObserver?: SharedResizeObserver;
19
+
20
+ addMenuShortcut(menuId: string) {
21
+ return menuId;
22
+ }
23
+
24
+ removeMenuShortcut(menuId: string) {
25
+ return menuId;
26
+ }
27
+
28
+ sortMenuShortcuts() {}
29
+
30
+ emitMenuShortcutsUpdated() {}
31
+
32
+ render() {
33
+ return html` <p>foo</p> `;
34
+ }
35
+ }