@internetarchive/ia-item-navigator 0.0.0-a10 → 0.0.0-a16

Sign up to get free protection for your applications and to get access to all the features.
Files changed (54) hide show
  1. package/README.md +29 -19
  2. package/demo/app-root.ts +37 -31
  3. package/demo/index.html +1 -0
  4. package/dist/demo/app-root.d.ts +11 -15
  5. package/dist/demo/app-root.js +26 -26
  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 -271
  18. package/dist/src/item-inspector/item-inspector.js.map +1 -1
  19. package/dist/src/item-navigator.d.ts +41 -27
  20. package/dist/src/item-navigator.js +87 -84
  21. package/dist/src/item-navigator.js.map +1 -1
  22. package/dist/src/no-theater-available.d.ts +9 -0
  23. package/dist/src/no-theater-available.js +79 -0
  24. package/dist/src/no-theater-available.js.map +1 -0
  25. package/dist/test/book-nav-stub.d.ts +22 -0
  26. package/dist/test/book-nav-stub.js +49 -0
  27. package/dist/test/book-nav-stub.js.map +1 -0
  28. package/dist/test/ia-item-navigator.test.d.ts +1 -0
  29. package/dist/test/ia-item-navigator.test.js +279 -131
  30. package/dist/test/ia-item-navigator.test.js.map +1 -1
  31. package/dist/test/ia-stub.d.ts +22 -0
  32. package/dist/test/ia-stub.js +34 -3
  33. package/dist/test/ia-stub.js.map +1 -1
  34. package/dist/test/no-theater-available.test.d.ts +1 -0
  35. package/dist/test/no-theater-available.test.js +27 -0
  36. package/dist/test/no-theater-available.test.js.map +1 -0
  37. package/package.json +4 -3
  38. package/src/interfaces/custom-theater-interface.ts +28 -0
  39. package/src/interfaces/event-interfaces.ts +15 -11
  40. package/src/interfaces/menu-interfaces.ts +9 -10
  41. package/src/item-navigator.ts +124 -114
  42. package/src/no-theater-available.ts +85 -0
  43. package/test/book-nav-stub.ts +47 -0
  44. package/test/ia-item-navigator.test.ts +365 -156
  45. package/test/ia-stub.ts +78 -2
  46. package/test/no-theater-available.test.ts +32 -0
  47. package/demo/demo-book-manifest.json +0 -1163
  48. package/src/interfaces/nav-controller-interface.ts +0 -18
  49. package/src/item-inspector/files-by-type/files-by-type-provider.ts +0 -43
  50. package/src/item-inspector/files-by-type/ia-files-by-type.ts +0 -100
  51. package/src/item-inspector/item-inspector.ts +0 -296
  52. package/src/item-inspector/share-provider.ts +0 -51
  53. package/src/item-inspector/visual-mod-provider.ts +0 -65
  54. package/src/item-navigator-js.js +0 -372
@@ -1,60 +1,74 @@
1
- import { LitElement, PropertyValues } from 'lit-element';
1
+ import { LitElement, PropertyValues, CSSResult } from 'lit-element';
2
2
  import { nothing, TemplateResult } from 'lit-html';
3
3
  import { MetadataResponse } from '@internetarchive/search-service';
4
- import { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
4
+ import { SharedResizeObserver, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
5
5
  import '@internetarchive/ia-menu-slider';
6
- import { ModalManagerInterface } from '@internetarchive/modal-manager';
6
+ import { ModalManager } from '@internetarchive/modal-manager';
7
7
  import '@internetarchive/icon-ellipses/icon-ellipses';
8
8
  import './loader';
9
- import { IntManageSideMenuEvent, IntSetOpenMenuEvent, IntSetMenuContentsEvent, IntSetMenuShortcutsEvent, IntLoadingStateUpdatedEvent, IntManageFullscreenEvent } from './interfaces/event-interfaces';
10
- import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
9
+ import { ToggleSideMenuOpenEvent, ToggleSidePanelOpenEvent, SetSideMenuContentsEvent, SetSideMenuShortcutsEvent, loadingStateUpdatedEvent, ManageFullscreenEvent } from './interfaces/event-interfaces';
10
+ import { MenuProviderInterface, MenuShortcutInterface, MenuId } from './interfaces/menu-interfaces';
11
+ import './no-theater-available';
12
+ export declare enum ItemType {
13
+ BOOK = "bookreader"
14
+ }
11
15
  export declare class ItemNavigator extends LitElement implements SharedResizeObserverResizeHandlerInterface {
12
- item: MetadataResponse | undefined;
13
- itemType: string;
16
+ item?: MetadataResponse;
17
+ itemType?: ItemType;
14
18
  baseHost: string;
15
19
  signedIn: boolean;
16
- menuContents: IntMenuProvider[];
17
- menuShortcuts: IntMenuShortcut[];
18
- viewportInFullscreen: boolean;
20
+ menuContents: MenuProviderInterface[];
21
+ menuShortcuts: MenuShortcutInterface[];
22
+ viewportInFullscreen: boolean | null;
19
23
  menuOpened: boolean;
20
- openMenu: string;
21
- modal?: ModalManagerInterface;
22
- sharedObserver?: SharedResizeObserverInterface;
23
- loaded: boolean;
24
+ openMenu?: MenuId;
25
+ modal?: ModalManager;
26
+ sharedObserver?: SharedResizeObserver;
27
+ loaded: true | null;
24
28
  openMenuState: 'overlay' | 'shift';
25
29
  private frame;
30
+ private headerSlot;
26
31
  disconnectedCallback(): void;
27
- firstUpdated(pp: any): void;
28
32
  updated(changed: PropertyValues): void;
33
+ /** Shared observer */
29
34
  handleResize(entry: ResizeObserverEntry): void;
30
- private startResizeObserver;
35
+ private setResizeObserver;
36
+ private removeResizeObserver;
37
+ get resizeObserverConfig(): {
38
+ handler: SharedResizeObserverResizeHandlerInterface;
39
+ target: Element;
40
+ };
41
+ /** End shared observer */
31
42
  get loaderTitle(): "" | "Internet Archive";
43
+ get readerHeightStyle(): string;
44
+ get loadingArea(): TemplateResult;
32
45
  render(): TemplateResult;
33
- get BooksViewer(): TemplateResult;
46
+ get noTheaterView(): TemplateResult;
47
+ get theaterSlot(): TemplateResult;
48
+ get booksViewer(): TemplateResult;
34
49
  get renderViewport(): TemplateResult | typeof nothing;
35
- loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void;
36
- /** Creates modal DOM & attaches to `<body>` */
37
- private createModal;
50
+ loadingStateUpdated(e: loadingStateUpdatedEvent): void;
38
51
  /** Fullscreen Management */
39
- manageViewportFullscreen(e: IntManageFullscreenEvent): void;
52
+ manageViewportFullscreen(e: ManageFullscreenEvent): void;
40
53
  /** End Fullscreen Management */
41
54
  /** Side menu */
42
55
  get shouldRenderMenu(): boolean;
43
56
  toggleMenu(): void;
44
57
  closeMenu(): void;
45
- setOpenMenu(e: IntSetOpenMenuEvent): void;
46
- setMenuContents(e: IntSetMenuContentsEvent): void;
47
- setMenuShortcuts(e: IntSetMenuShortcutsEvent): void;
58
+ setOpenMenu(e: ToggleSidePanelOpenEvent): void;
59
+ setMenuContents(e: SetSideMenuContentsEvent): void;
60
+ setMenuShortcuts(e: SetSideMenuShortcutsEvent): void;
48
61
  /** Toggles Side Menu & Sets viewable subpanel */
49
- manageSideMenuEvents(e: IntManageSideMenuEvent): void;
62
+ manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void;
50
63
  get menuToggleButton(): TemplateResult;
64
+ get selectedMenuId(): MenuId | '';
51
65
  get renderSideMenu(): TemplateResult;
52
66
  /** End Side menu */
53
67
  /** Menu Shortcuts */
54
- openShortcut(selectedMenuId?: string): void;
68
+ openShortcut(selectedMenuId?: MenuId): void;
55
69
  get shortcuts(): TemplateResult;
56
70
  /** End Menu Shortcuts */
57
71
  /** Misc Render */
58
72
  get menuClass(): string;
59
- static get styles(): import("lit-element").CSSResult;
73
+ static get styles(): CSSResult;
60
74
  }
@@ -1,55 +1,38 @@
1
1
  import { __decorate } from "tslib";
2
- /* eslint-disable import/no-duplicates */
3
2
  import { css, html, LitElement, customElement, property, state, query, } from 'lit-element';
4
3
  import { nothing } from 'lit-html';
5
4
  import { MetadataResponse } from '@internetarchive/search-service';
6
- import { SharedResizeObserver, } from '@internetarchive/shared-resize-observer';
7
- // @ts-ignore
8
- import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
9
5
  import '@internetarchive/ia-menu-slider';
10
6
  import '@internetarchive/icon-ellipses/icon-ellipses';
11
7
  import './loader';
8
+ import './no-theater-available';
9
+ export var ItemType;
10
+ (function (ItemType) {
11
+ ItemType["BOOK"] = "bookreader";
12
+ })(ItemType || (ItemType = {}));
12
13
  let ItemNavigator = class ItemNavigator extends LitElement {
13
14
  constructor() {
14
15
  super(...arguments);
15
- this.item = undefined;
16
- this.itemType = '';
17
16
  this.baseHost = 'archive.org';
18
17
  this.signedIn = false;
19
18
  this.menuContents = [];
20
19
  this.menuShortcuts = [];
21
- this.viewportInFullscreen = false;
20
+ this.viewportInFullscreen = null;
22
21
  this.menuOpened = false;
23
- this.openMenu = '';
24
- this.loaded = false;
22
+ this.loaded = null;
25
23
  this.openMenuState = 'shift';
26
24
  }
27
25
  disconnectedCallback() {
28
- var _a;
29
- (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver({
30
- handler: this,
31
- target: this.frame,
32
- });
33
- }
34
- firstUpdated(pp) {
35
- console.log('first updated item-nav', this.modal, pp);
36
- if (!this.modal) {
37
- this.createModal();
38
- }
39
- this.startResizeObserver();
26
+ this.removeResizeObserver();
40
27
  }
41
28
  updated(changed) {
42
- if (changed.has('modal')) {
43
- if (!this.modal) {
44
- this.createModal();
45
- }
46
- }
47
29
  if (changed.has('sharedObserver')) {
48
- if (!this.sharedObserver) {
49
- this.startResizeObserver();
50
- }
30
+ const oldObserver = changed.get('sharedObserver');
31
+ oldObserver === null || oldObserver === void 0 ? void 0 : oldObserver.removeObserver(this.resizeObserverConfig);
32
+ this.setResizeObserver();
51
33
  }
52
34
  }
35
+ /** Shared observer */
53
36
  handleResize(entry) {
54
37
  const { width } = entry.contentRect;
55
38
  if (width <= 600) {
@@ -58,48 +41,78 @@ let ItemNavigator = class ItemNavigator extends LitElement {
58
41
  }
59
42
  this.openMenuState = 'shift';
60
43
  }
61
- startResizeObserver() {
62
- if (!this.sharedObserver) {
63
- this.sharedObserver = new SharedResizeObserver();
64
- }
65
- this.sharedObserver.addObserver({
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 {
66
54
  handler: this,
67
55
  target: this.frame,
68
- });
56
+ };
69
57
  }
58
+ /** End shared observer */
70
59
  get loaderTitle() {
71
60
  return this.viewportInFullscreen ? 'Internet Archive' : '';
72
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
+ `;
75
+ }
73
76
  render() {
74
77
  const displayReaderClass = this.loaded ? '' : 'hide';
78
+ console.log('render selectedMenuId', this.selectedMenuId);
79
+ console.log('render openMenu', this.openMenu);
75
80
  return html `
76
81
  <div id="frame" class=${`${this.menuClass}`}>
77
- <slot name="theater-header"></slot>
78
82
  <div class="menu-and-reader">
79
83
  ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
80
- <div id="reader" class=${displayReaderClass}>
84
+ <slot name="theater-header"></slot>
85
+ <div
86
+ id="reader"
87
+ class=${displayReaderClass}
88
+ style=${this.readerHeightStyle}
89
+ >
81
90
  ${this.renderViewport}
82
91
  </div>
83
- ${!this.loaded
84
- ? html ` <div class="loading-area">
85
- <div class="loading-view">
86
- <ia-itemnav-loader
87
- .title=${this.loaderTitle}
88
- ></ia-itemnav-loader>
89
- </div>
90
- </div>`
91
- : nothing}
92
+ ${!this.loaded ? this.loadingArea : nothing}
92
93
  </div>
93
94
  </div>
94
95
  `;
95
96
  }
96
- get BooksViewer() {
97
+ get noTheaterView() {
98
+ var _a, _b;
99
+ return html `<ia-no-theater-available
100
+ .identifier=${(_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.identifier}
101
+ @loadingStateUpdated=${this.loadingStateUpdated}
102
+ ></ia-no-theater-available>`;
103
+ }
104
+ get theaterSlot() {
105
+ return html `
106
+ <slot name="theater-main" style=${this.readerHeightStyle}></slot>
107
+ `;
108
+ }
109
+ get booksViewer() {
97
110
  const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
98
111
  return html `
99
112
  <book-navigator
100
113
  .modal=${this.modal}
101
114
  .baseHost=${this.baseHost}
102
- .book=${this.item}
115
+ .itemMD=${this.item}
103
116
  ?signedIn=${this.signedIn}
104
117
  ?sideMenuOpen=${this.menuOpened}
105
118
  .sharedObserver=${this.sharedObserver}
@@ -110,7 +123,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
110
123
  @menuShortcutsUpdated=${this.setMenuShortcuts}
111
124
  >
112
125
  <div slot="theater-main" style=${slotVisibility}>
113
- <slot name="theater-main"></slot>
126
+ ${this.theaterSlot}
114
127
  </div>
115
128
  </book-navigator>
116
129
  `;
@@ -119,28 +132,23 @@ let ItemNavigator = class ItemNavigator extends LitElement {
119
132
  if (!this.item) {
120
133
  return nothing;
121
134
  }
122
- if (this.itemType === 'bookreader') {
123
- return this.BooksViewer;
135
+ if (this.itemType === ItemType.BOOK) {
136
+ return this.booksViewer;
124
137
  }
125
- return nothing;
138
+ return this.noTheaterView;
126
139
  }
127
140
  loadingStateUpdated(e) {
128
141
  const { loaded } = e.detail;
129
- this.loaded = !!loaded;
130
- console.log('******loadingStateUpdated', e.detail);
131
- }
132
- /** Creates modal DOM & attaches to `<body>` */
133
- createModal() {
134
- this.modal = document.createElement('modal-manager');
135
- document.body.appendChild(this.modal);
142
+ this.loaded = loaded || null;
136
143
  }
137
- /* End Modal management */
138
144
  /** Fullscreen Management */
139
145
  manageViewportFullscreen(e) {
140
- this.viewportInFullscreen = !!e.detail.isFullScreen;
141
- this.dispatchEvent(new CustomEvent('ViewportInFullScreen', {
146
+ const fullscreenStatus = !!e.detail.isFullScreen;
147
+ this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
148
+ const event = new CustomEvent('fullscreenToggled', {
142
149
  detail: e.detail,
143
- }));
150
+ });
151
+ this.dispatchEvent(event);
144
152
  }
145
153
  /** End Fullscreen Management */
146
154
  /** Side menu */
@@ -155,7 +163,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
155
163
  }
156
164
  setOpenMenu(e) {
157
165
  const { id } = e.detail;
158
- this.openMenu = id === this.openMenu ? '' : id;
166
+ this.openMenu = id !== this.openMenu ? id : undefined;
159
167
  }
160
168
  setMenuContents(e) {
161
169
  const updatedContents = [...e.detail];
@@ -179,7 +187,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
179
187
  }
180
188
  }
181
189
  get menuToggleButton() {
182
- // <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
183
190
  return html `
184
191
  <button
185
192
  class="toggle-menu"
@@ -194,6 +201,9 @@ let ItemNavigator = class ItemNavigator extends LitElement {
194
201
  </button>
195
202
  `;
196
203
  }
204
+ get selectedMenuId() {
205
+ return this.openMenu || '';
206
+ }
197
207
  get renderSideMenu() {
198
208
  const drawerState = this.menuOpened ? '' : 'hidden';
199
209
  return html `
@@ -202,7 +212,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
202
212
  <div id="menu" class=${drawerState}>
203
213
  <ia-menu-slider
204
214
  .menus=${this.menuContents}
205
- .selectedMenu=${this.openMenu}
215
+ .selectedMenu=${this.selectedMenuId}
206
216
  @menuTypeSelected=${this.setOpenMenu}
207
217
  @menuSliderClosed=${this.closeMenu}
208
218
  manuallyHandleClose
@@ -247,7 +257,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
247
257
  return css `
248
258
  :host,
249
259
  #frame,
250
- #reader,
251
260
  .menu-and-reader {
252
261
  min-height: inherit;
253
262
  height: inherit;
@@ -256,6 +265,11 @@ let ItemNavigator = class ItemNavigator extends LitElement {
256
265
  display: block;
257
266
  }
258
267
 
268
+ slot {
269
+ display: block;
270
+ overflow: hidden;
271
+ }
272
+
259
273
  #frame {
260
274
  background-color: ${theaterBg};
261
275
  color-scheme: dark;
@@ -270,11 +284,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
270
284
  z-index: 9;
271
285
  }
272
286
 
273
- #frame.fullscreen,
274
- #frame.fullscreen #reader {
275
- height: 100vh;
276
- }
277
-
278
287
  .loading-area {
279
288
  position: absolute;
280
289
  top: 0;
@@ -391,6 +400,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
391
400
  transition: ${transitionEffect};
392
401
  }
393
402
 
403
+ .open.shift slot[name='theater-header'],
394
404
  .open.shift #reader {
395
405
  width: calc(100% - var(--menuWidth));
396
406
  float: right;
@@ -427,22 +437,13 @@ __decorate([
427
437
  })
428
438
  ], ItemNavigator.prototype, "signedIn", void 0);
429
439
  __decorate([
430
- property({
431
- type: Array,
432
- hasChanged: (newVal, oldVal) => {
433
- if (newVal !== oldVal) {
434
- return true;
435
- }
436
- return false;
437
- },
438
- }),
439
440
  property({ type: Array })
440
441
  ], ItemNavigator.prototype, "menuContents", void 0);
441
442
  __decorate([
442
443
  property({ type: Array })
443
444
  ], ItemNavigator.prototype, "menuShortcuts", void 0);
444
445
  __decorate([
445
- property({ type: Boolean, reflect: true })
446
+ property({ type: Boolean, reflect: true, attribute: true })
446
447
  ], ItemNavigator.prototype, "viewportInFullscreen", void 0);
447
448
  __decorate([
448
449
  property({ type: Boolean })
@@ -457,7 +458,7 @@ __decorate([
457
458
  property({ attribute: false })
458
459
  ], ItemNavigator.prototype, "sharedObserver", void 0);
459
460
  __decorate([
460
- property({ type: Boolean, reflect: true })
461
+ property({ type: Boolean, reflect: true, attribute: true })
461
462
  ], ItemNavigator.prototype, "loaded", void 0);
462
463
  __decorate([
463
464
  state()
@@ -465,9 +466,11 @@ __decorate([
465
466
  __decorate([
466
467
  query('#frame')
467
468
  ], ItemNavigator.prototype, "frame", void 0);
469
+ __decorate([
470
+ query('slot[name="theater-header"]')
471
+ ], ItemNavigator.prototype, "headerSlot", void 0);
468
472
  ItemNavigator = __decorate([
469
473
  customElement('ia-item-navigator')
470
474
  ], ItemNavigator);
471
475
  export { ItemNavigator };
472
- customElements.define('ia-menu-slider', IAMenuSlider);
473
476
  //# 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":["/* eslint-disable import/no-duplicates */\nimport {\n css,\n html,\n LitElement,\n customElement,\n property,\n state,\n query,\n PropertyValues,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n SharedResizeObserver,\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\n// @ts-ignore\nimport { IAMenuSlider } from '@internetarchive/ia-menu-slider';\nimport '@internetarchive/ia-menu-slider';\n\nimport { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n IntManageSideMenuEvent,\n IntSetOpenMenuEvent,\n IntSetMenuContentsEvent,\n IntSetMenuShortcutsEvent,\n IntLoadingStateUpdatedEvent,\n IntManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';\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 | 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 @property({ type: Array })\n menuContents: IntMenuProvider[] = [];\n\n @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];\n\n @property({ type: Boolean, reflect: true }) viewportInFullscreen = false;\n\n @property({ type: Boolean }) menuOpened = false;\n\n @property({ type: String }) openMenu = '';\n\n @property({ attribute: false }) modal?: ModalManagerInterface;\n\n @property({ attribute: false })\n sharedObserver?: SharedResizeObserverInterface;\n\n @property({ type: Boolean, reflect: true }) loaded: boolean = false;\n\n @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n @query('#frame') private frame!: HTMLDivElement;\n\n disconnectedCallback() {\n this.sharedObserver?.removeObserver({\n handler: this,\n target: this.frame,\n });\n }\n\n firstUpdated(pp: any): void {\n console.log('first updated item-nav', this.modal, pp);\n if (!this.modal) {\n this.createModal();\n }\n\n this.startResizeObserver();\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('modal')) {\n if (!this.modal) {\n this.createModal();\n }\n }\n if (changed.has('sharedObserver')) {\n if (!this.sharedObserver) {\n this.startResizeObserver();\n }\n }\n }\n\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 startResizeObserver(): void {\n if (!this.sharedObserver) {\n this.sharedObserver = new SharedResizeObserver();\n }\n this.sharedObserver.addObserver({\n handler: this,\n target: this.frame,\n });\n }\n\n get loaderTitle() {\n return this.viewportInFullscreen ? 'Internet Archive' : '';\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hide';\n return html`\n <div id=\"frame\" class=${`${this.menuClass}`}>\n <slot name=\"theater-header\"></slot>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n <div id=\"reader\" class=${displayReaderClass}>\n ${this.renderViewport}\n </div>\n ${!this.loaded\n ? html` <div class=\"loading-area\">\n <div class=\"loading-view\">\n <ia-itemnav-loader\n .title=${this.loaderTitle}\n ></ia-itemnav-loader>\n </div>\n </div>`\n : nothing}\n </div>\n </div>\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 .book=${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 <slot name=\"theater-main\"></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 nothing;\n }\n\n loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = !!loaded;\n console.log('******loadingStateUpdated', e.detail);\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 this.viewportInFullscreen = !!e.detail.isFullScreen;\n this.dispatchEvent(\n new CustomEvent('ViewportInFullScreen', {\n detail: e.detail,\n }) as IntManageFullscreenEvent\n );\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: 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 setMenuShortcuts(e: IntSetMenuShortcutsEvent) {\n this.menuShortcuts = [...e.detail];\n }\n\n /** Toggles Side Menu & Sets viewable subpanel */\n manageSideMenuEvents(e: IntManageSideMenuEvent): 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 // <ia-icon icon=\"ellipses\" style=\"width: var(--iconWidth); height: var(--iconHeight);\"></ia-icon>\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 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 openShortcut(selectedMenuId = ''): 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() {\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 #reader,\n .menu-and-reader {\n min-height: inherit;\n height: inherit;\n position: relative;\n overflow: hidden;\n display: block;\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 #frame.fullscreen,\n #frame.fullscreen #reader {\n height: 100vh;\n }\n\n .loading-area {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: inherit;\n min-height: inherit;\n }\n\n .loading-view {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: inherit;\n height: inherit;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\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 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 #reader {\n width: calc(100% - var(--menuWidth));\n float: right;\n transition: ${transitionEffect};\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 ? '' : 'hide';\n console.log('render selectedMenuId', this.selectedMenuId);\n console.log('render openMenu', this.openMenu);\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 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-area {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: inherit;\n min-height: inherit;\n }\n\n .loading-view {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: inherit;\n height: inherit;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\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 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"]}
@@ -0,0 +1,9 @@
1
+ import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit-element';
2
+ export declare class IANoTheaterAvailable extends LitElement {
3
+ identifier?: string;
4
+ emitLoaded(): void;
5
+ updated(changed: PropertyValues): void;
6
+ get downloadUrl(): string;
7
+ render(): TemplateResult;
8
+ static get styles(): CSSResult;
9
+ }
@@ -0,0 +1,79 @@
1
+ import { __decorate } from "tslib";
2
+ import { LitElement, customElement, property, html, css, } from 'lit-element';
3
+ let IANoTheaterAvailable = class IANoTheaterAvailable extends LitElement {
4
+ constructor() {
5
+ super(...arguments);
6
+ this.identifier = '';
7
+ }
8
+ emitLoaded() {
9
+ this.dispatchEvent(new CustomEvent('loadingStateUpdated', {
10
+ detail: { loaded: true },
11
+ }));
12
+ }
13
+ updated(changed) {
14
+ if (changed.has('identifier')) {
15
+ this.emitLoaded();
16
+ }
17
+ }
18
+ get downloadUrl() {
19
+ return `/download/${this.identifier}`;
20
+ }
21
+ render() {
22
+ return html `
23
+ <section>
24
+ <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>
25
+ <p>
26
+ This item does not appear to have any files that can be experienced on
27
+ Archive.org. <br />
28
+ Please download files in this item to interact with them on your
29
+ computer.
30
+ </p>
31
+ <a href=${this.downloadUrl}>Show all files</a>
32
+ </section>
33
+ `;
34
+ }
35
+ static get styles() {
36
+ return css `
37
+ :host {
38
+ color: var(--primaryTextColor, #fff);
39
+ text-align: center;
40
+ }
41
+ section {
42
+ margin: 10% auto 0;
43
+ padding: 0 5%;
44
+ }
45
+ p {
46
+ font-size: 1.4rem;
47
+ }
48
+ a {
49
+ color: var(--primaryTextColor, #fff);
50
+ background-color: rgb(25, 72, 128);
51
+ min-height: 35px;
52
+ outline: none;
53
+ cursor: pointer;
54
+ line-height: normal;
55
+ border-radius: 0.4rem;
56
+ text-align: center;
57
+ vertical-align: middle;
58
+ font-size: 1.4rem;
59
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
60
+ display: inline-block;
61
+ padding: 0.85rem 1.2rem;
62
+ border: 1px solid rgb(197, 209, 223);
63
+ white-space: nowrap;
64
+ appearance: auto;
65
+ box-sizing: border-box;
66
+ user-select: none;
67
+ text-decoration: none;
68
+ }
69
+ `;
70
+ }
71
+ };
72
+ __decorate([
73
+ property({ type: String })
74
+ ], IANoTheaterAvailable.prototype, "identifier", void 0);
75
+ IANoTheaterAvailable = __decorate([
76
+ customElement('ia-no-theater-available')
77
+ ], IANoTheaterAvailable);
78
+ export { IANoTheaterAvailable };
79
+ //# sourceMappingURL=no-theater-available.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"no-theater-available.js","sourceRoot":"","sources":["../../src/no-theater-available.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,aAAa,EACb,QAAQ,EACR,IAAI,EAIJ,GAAG,GACJ,MAAM,aAAa,CAAC;AAGrB,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,UAAU;IAApD;;QAC8B,eAAU,GAAY,EAAE,CAAC;IAuEvD,CAAC;IArEC,UAAU;QACR,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,qBAAqB,EAAE;YAC1D,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;SACzB,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;YAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;kBASG,IAAI,CAAC,WAAW;;KAE7B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCT,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA0B;AAD1C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAwEhC;SAxEY,oBAAoB","sourcesContent":["import {\n LitElement,\n customElement,\n property,\n html,\n TemplateResult,\n PropertyValues,\n CSSResult,\n css,\n} from 'lit-element';\n\n@customElement('ia-no-theater-available')\nexport class IANoTheaterAvailable extends LitElement {\n @property({ type: String }) identifier?: string = '';\n\n emitLoaded(): void {\n this.dispatchEvent(\n new CustomEvent<{ loaded: boolean }>('loadingStateUpdated', {\n detail: { loaded: true },\n })\n );\n }\n\n updated(changed: PropertyValues): void {\n if (changed.has('identifier')) {\n this.emitLoaded();\n }\n }\n\n get downloadUrl(): string {\n return `/download/${this.identifier}`;\n }\n\n render(): TemplateResult {\n return html`\n <section>\n <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>\n <p>\n This item does not appear to have any files that can be experienced on\n Archive.org. <br />\n Please download files in this item to interact with them on your\n computer.\n </p>\n <a href=${this.downloadUrl}>Show all files</a>\n </section>\n `;\n }\n\n static get styles(): CSSResult {\n return css`\n :host {\n color: var(--primaryTextColor, #fff);\n text-align: center;\n }\n section {\n margin: 10% auto 0;\n padding: 0 5%;\n }\n p {\n font-size: 1.4rem;\n }\n a {\n color: var(--primaryTextColor, #fff);\n background-color: rgb(25, 72, 128);\n min-height: 35px;\n outline: none;\n cursor: pointer;\n line-height: normal;\n border-radius: 0.4rem;\n text-align: center;\n vertical-align: middle;\n font-size: 1.4rem;\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n display: inline-block;\n padding: 0.85rem 1.2rem;\n border: 1px solid rgb(197, 209, 223);\n white-space: nowrap;\n appearance: auto;\n box-sizing: border-box;\n user-select: none;\n text-decoration: none;\n }\n `;\n }\n}\n"]}
@@ -0,0 +1,22 @@
1
+ import { ModalManager } from '@internetarchive/modal-manager';
2
+ import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
3
+ import { LitElement } from 'lit-element';
4
+ import { MetadataResponse } from '@internetarchive/search-service';
5
+ import { MenuProviderInterface, MenuShortcutInterface } from '../src/interfaces/menu-interfaces';
6
+ import { CustomTheaterInterface } from '../src/interfaces/custom-theater-interface';
7
+ export declare class BookNavigator extends LitElement implements CustomTheaterInterface {
8
+ modal?: ModalManager;
9
+ itemMD?: MetadataResponse;
10
+ baseHost?: string;
11
+ signedIn?: boolean | null;
12
+ sideMenuOpen: boolean;
13
+ sharedObserver?: SharedResizeObserver;
14
+ menuProviders?: MenuProviderInterface[];
15
+ menuShortcuts?: MenuShortcutInterface[];
16
+ emitLoadingStatusUpdate(): void;
17
+ addMenuShortcut(menuId: string): string;
18
+ removeMenuShortcut(menuId: string): string;
19
+ sortMenuShortcuts(): void;
20
+ emitMenuShortcutsUpdated(): void;
21
+ render(): import("lit-element").TemplateResult;
22
+ }