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

Sign up to get free protection for your applications and to get access to all the features.
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
package/dist/src/item-navigator.d.ts CHANGED
@@ -1,41 +1,55 @@
1
- import { LitElement } 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 { SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
4
+ import { SharedResizeObserver, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
5
+ import '@internetarchive/ia-menu-slider';
5
6
  import { ModalManagerInterface } from '@internetarchive/modal-manager';
6
7
  import '@internetarchive/icon-ellipses/icon-ellipses';
7
8
  import './loader';
8
- import { IntOpenModalEvent, IntManageSideMenuEvent, IntSetOpenMenuEvent, IntSetMenuContentsEvent, IntSetMenuShortcutsEvent, IntLoadingStateUpdatedEvent } from './interfaces/event-interfaces';
9
- import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
9
+ import { IntManageSideMenuEvent, IntSetOpenMenuEvent, IntSetMenuContentsEvent, IntSetMenuShortcutsEvent, IntLoadingStateUpdatedEvent, IntManageFullscreenEvent } from './interfaces/event-interfaces';
10
+ import { IntMenuProvider, IntMenuShortcut, MenuId } from './interfaces/menu-interfaces';
11
+ import './no-theater-available';
12
+ export declare enum ItemType {
13
+ BOOK = "bookreader"
14
+ }
10
15
  export declare class ItemNavigator extends LitElement implements SharedResizeObserverResizeHandlerInterface {
11
- item: MetadataResponse | undefined;
12
- itemType: string;
16
+ item?: MetadataResponse;
17
+ itemType?: ItemType;
13
18
  baseHost: string;
14
19
  signedIn: boolean;
15
20
  menuContents: IntMenuProvider[];
16
21
  menuShortcuts: IntMenuShortcut[];
17
- viewportInFullscreen: boolean;
22
+ viewportInFullscreen: boolean | null;
18
23
  menuOpened: boolean;
19
- openMenu: string;
20
- modal: ModalManagerInterface | undefined;
21
- private sharedObserver?;
22
- private loaded;
23
- private openMenuState;
24
+ openMenu: MenuId | '';
25
+ modal?: ModalManagerInterface;
26
+ sharedObserver?: SharedResizeObserver;
27
+ loaded: true | null;
28
+ openMenuState: 'overlay' | 'shift';
24
29
  private frame;
30
+ private headerSlot;
25
31
  disconnectedCallback(): void;
26
- firstUpdated(): void;
32
+ updated(changed: PropertyValues): void;
33
+ /** Shared observer */
27
34
  handleResize(entry: ResizeObserverEntry): void;
28
- private startResizeObserver;
35
+ private setResizeObserver;
36
+ private removeResizeObserver;
37
+ get resizeObserverConfig(): {
38
+ handler: SharedResizeObserverResizeHandlerInterface;
39
+ target: Element;
40
+ };
41
+ /** End shared observer */
42
+ get loaderTitle(): "" | "Internet Archive";
43
+ get readerHeightStyle(): string;
44
+ get loadingArea(): TemplateResult;
29
45
  render(): TemplateResult;
30
- get BooksViewer(): TemplateResult;
46
+ get noTheaterView(): TemplateResult;
47
+ get theaterSlot(): TemplateResult;
48
+ get booksViewer(): TemplateResult;
31
49
  get renderViewport(): TemplateResult | typeof nothing;
32
50
  loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void;
33
- openModal(e: IntOpenModalEvent): void;
34
- closeModal(): void;
35
- /** Creates modal DOM & attaches to `<body>` */
36
- private createModal;
37
51
  /** Fullscreen Management */
38
- manageViewportFullscreen(): void;
52
+ manageViewportFullscreen(e: IntManageFullscreenEvent): void;
39
53
  /** End Fullscreen Management */
40
54
  /** Side menu */
41
55
  get shouldRenderMenu(): boolean;
@@ -50,10 +64,10 @@ export declare class ItemNavigator extends LitElement implements SharedResizeObs
50
64
  get renderSideMenu(): TemplateResult;
51
65
  /** End Side menu */
52
66
  /** Menu Shortcuts */
53
- openShortcut(selectedMenuId?: string): void;
67
+ openShortcut(selectedMenuId?: MenuId): void;
54
68
  get shortcuts(): TemplateResult;
55
69
  /** End Menu Shortcuts */
56
70
  /** Misc Render */
57
71
  get menuClass(): string;
58
- static get styles(): import("lit-element").CSSResult;
72
+ static get styles(): CSSResult;
59
73
  }
package/dist/src/item-navigator.js CHANGED
@@ -2,41 +2,36 @@ import { __decorate } from "tslib";
2
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
- import { PromisedSingleton } from '@internetarchive/promised-singleton';
6
- import { SharedResizeObserver, } from '@internetarchive/shared-resize-observer';
7
- // @ts-ignore
8
- import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
5
+ import '@internetarchive/ia-menu-slider';
9
6
  import '@internetarchive/icon-ellipses/icon-ellipses';
10
7
  import './loader';
8
+ import './no-theater-available';
9
+ export var ItemType;
10
+ (function (ItemType) {
11
+ ItemType["BOOK"] = "bookreader";
12
+ })(ItemType || (ItemType = {}));
11
13
  let ItemNavigator = class ItemNavigator extends LitElement {
12
14
  constructor() {
13
15
  super(...arguments);
14
- this.item = undefined;
15
- this.itemType = '';
16
16
  this.baseHost = 'archive.org';
17
17
  this.signedIn = false;
18
18
  this.menuContents = [];
19
19
  this.menuShortcuts = [];
20
- this.viewportInFullscreen = false;
20
+ this.viewportInFullscreen = null;
21
21
  this.menuOpened = false;
22
22
  this.openMenu = '';
23
- this.modal = undefined;
24
- this.loaded = false;
23
+ this.loaded = null;
25
24
  this.openMenuState = 'shift';
26
25
  }
27
26
  disconnectedCallback() {
28
- var _a;
29
- (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver({
30
- handler: this,
31
- target: this.frame,
32
- });
27
+ this.removeResizeObserver();
33
28
  }
34
- firstUpdated() {
35
- if (!this.modal) {
36
- this.createModal();
29
+ updated(changed) {
30
+ if (changed.has('sharedObserver')) {
31
+ this.setResizeObserver();
37
32
  }
38
- this.startResizeObserver();
39
33
  }
34
+ /** Shared observer */
40
35
  handleResize(entry) {
41
36
  const { width } = entry.contentRect;
42
37
  if (width <= 600) {
@@ -44,43 +39,76 @@ let ItemNavigator = class ItemNavigator extends LitElement {
44
39
  return;
45
40
  }
46
41
  this.openMenuState = 'shift';
47
- console.log('width', width);
48
42
  }
49
- async startResizeObserver() {
43
+ setResizeObserver() {
50
44
  var _a;
51
- const ro = new PromisedSingleton({
52
- generator: async () => {
53
- return new SharedResizeObserver();
54
- },
55
- });
56
- this.sharedObserver = await ro.get();
57
- (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.addObserver({
45
+ this.removeResizeObserver();
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 {
58
54
  handler: this,
59
55
  target: this.frame,
60
- });
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
+ `;
61
75
  }
62
76
  render() {
63
77
  const displayReaderClass = this.loaded ? '' : 'hide';
64
78
  return html `
65
- <div id="frame" class=${this.menuClass}>
66
- <slot name="item-nav-header"></slot>
79
+ <div id="frame" class=${`${this.menuClass}`}>
67
80
  <div class="menu-and-reader">
68
81
  ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
69
- ${!this.loaded
70
- ? html `<div class="loading-view">
71
- <ia-itemnav-loader></ia-itemnav-loader>
72
- </div>`
73
- : nothing}
74
- <div id="reader" class=${displayReaderClass}>
82
+ <slot name="theater-header"></slot>
83
+ <div
84
+ id="reader"
85
+ class=${displayReaderClass}
86
+ style=${this.readerHeightStyle}
87
+ >
75
88
  ${this.renderViewport}
76
89
  </div>
90
+ ${!this.loaded ? this.loadingArea : nothing}
77
91
  </div>
78
92
  </div>
79
93
  `;
80
94
  }
81
- 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;';
82
109
  return html `
83
110
  <book-navigator
111
+ .modal=${this.modal}
84
112
  .baseHost=${this.baseHost}
85
113
  .book=${this.item}
86
114
  ?signedIn=${this.signedIn}
@@ -91,11 +119,9 @@ let ItemNavigator = class ItemNavigator extends LitElement {
91
119
  @updateSideMenu=${this.manageSideMenuEvents}
92
120
  @menuUpdated=${this.setMenuContents}
93
121
  @menuShortcutsUpdated=${this.setMenuShortcuts}
94
- @showItemNavigatorModal=${this.openModal}
95
- @closeItemNavigatorModal=${this.closeModal}
96
122
  >
97
- <div slot="bookreader">
98
- <slot name="bookreader"></slot>
123
+ <div slot="theater-main" style=${slotVisibility}>
124
+ ${this.theaterSlot}
99
125
  </div>
100
126
  </book-navigator>
101
127
  `;
@@ -104,49 +130,23 @@ let ItemNavigator = class ItemNavigator extends LitElement {
104
130
  if (!this.item) {
105
131
  return nothing;
106
132
  }
107
- if (this.itemType === 'bookreader') {
108
- return this.BooksViewer;
133
+ if (this.itemType === ItemType.BOOK) {
134
+ return this.booksViewer;
109
135
  }
110
- return html ` <ia-item-inspector
111
- .itemMD=${this.item}
112
- @updateSideMenu=${this.manageSideMenuEvents}
113
- @menuUpdated=${this.setMenuContents}
114
- @ViewportInFullScreen=${this.manageViewportFullscreen}
115
- @menuShortcutsUpdated=${this.setMenuShortcuts}
116
- @showItemNavigatorModal=${this.openModal}
117
- @closeItemNavigatorModal=${this.closeModal}
118
- @loadingStateUpdated=${this.loadingStateUpdated}
119
- ></ia-item-inspector>`;
136
+ return this.noTheaterView;
120
137
  }
121
138
  loadingStateUpdated(e) {
122
139
  const { loaded } = e.detail;
123
- this.loaded = !!loaded;
124
- }
125
- /* Modal management */
126
- openModal(e) {
127
- var _a;
128
- const { config, customModalContent } = e.detail;
129
- if (!config || !customModalContent) {
130
- return;
131
- }
132
- (_a = this.modal) === null || _a === void 0 ? void 0 : _a.showModal({
133
- config,
134
- customModalContent,
135
- });
140
+ this.loaded = loaded || null;
136
141
  }
137
- closeModal() {
138
- var _a;
139
- (_a = this.modal) === null || _a === void 0 ? void 0 : _a.closeModal();
140
- }
141
- /** Creates modal DOM & attaches to `<body>` */
142
- createModal() {
143
- this.modal = document.createElement('modal-manager');
144
- document.body.appendChild(this.modal);
145
- }
146
- /* End Modal management */
147
142
  /** Fullscreen Management */
148
- manageViewportFullscreen() {
149
- this.viewportInFullscreen = !this.viewportInFullscreen;
143
+ manageViewportFullscreen(e) {
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);
150
150
  }
151
151
  /** End Fullscreen Management */
152
152
  /** Side menu */
@@ -173,18 +173,18 @@ let ItemNavigator = class ItemNavigator extends LitElement {
173
173
  /** Toggles Side Menu & Sets viewable subpanel */
174
174
  manageSideMenuEvents(e) {
175
175
  const { menuId, action } = e.detail;
176
- if (menuId) {
177
- if (action === 'open') {
178
- this.openShortcut(menuId);
179
- }
180
- else if (action === 'toggle') {
181
- this.openMenu = menuId;
182
- this.toggleMenu();
183
- }
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();
184
185
  }
185
186
  }
186
187
  get menuToggleButton() {
187
- // <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
188
188
  return html `
189
189
  <button
190
190
  class="toggle-menu"
@@ -224,11 +224,16 @@ let ItemNavigator = class ItemNavigator extends LitElement {
224
224
  this.menuOpened = true;
225
225
  }
226
226
  get shortcuts() {
227
- const shortcuts = this.menuShortcuts.map(({ icon, id }) => html `
227
+ const shortcuts = this.menuShortcuts.map(({ icon, id }) => {
228
+ if (id === 'fullscreen') {
229
+ return html `${icon}`;
230
+ }
231
+ return html `
228
232
  <button class="shortcut ${id}" @click="${() => this.openShortcut(id)}">
229
233
  ${icon}
230
234
  </button>
231
- `);
235
+ `;
236
+ });
232
237
  return html `<div class="shortcuts">${shortcuts}</div>`;
233
238
  }
234
239
  /** End Menu Shortcuts */
@@ -243,10 +248,10 @@ let ItemNavigator = class ItemNavigator extends LitElement {
243
248
  const transitionTiming = css `var(--animationTiming, 200ms)`;
244
249
  const transitionEffect = css `transform ${transitionTiming} ease-out`;
245
250
  const menuMargin = css `var(--theaterMenuMargin, 42px)`;
251
+ const theaterBg = css `var(--theaterBgColor, #000)`;
246
252
  return css `
247
253
  :host,
248
254
  #frame,
249
- #reader,
250
255
  .menu-and-reader {
251
256
  min-height: inherit;
252
257
  height: inherit;
@@ -255,8 +260,14 @@ let ItemNavigator = class ItemNavigator extends LitElement {
255
260
  display: block;
256
261
  }
257
262
 
263
+ slot {
264
+ display: block;
265
+ overflow: hidden;
266
+ }
267
+
258
268
  #frame {
259
- background-color: var(--menuSliderBg);
269
+ background-color: ${theaterBg};
270
+ color-scheme: dark;
260
271
  }
261
272
 
262
273
  #frame.fullscreen {
@@ -268,9 +279,14 @@ let ItemNavigator = class ItemNavigator extends LitElement {
268
279
  z-index: 9;
269
280
  }
270
281
 
271
- #frame.fullscreen,
272
- #frame.fullscreen #reader {
273
- height: 100vh;
282
+ .loading-area {
283
+ position: absolute;
284
+ top: 0;
285
+ left: 0;
286
+ right: 0;
287
+ bottom: 0;
288
+ height: inherit;
289
+ min-height: inherit;
274
290
  }
275
291
 
276
292
  .loading-view {
@@ -379,6 +395,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
379
395
  transition: ${transitionEffect};
380
396
  }
381
397
 
398
+ .open.shift slot[name='theater-header'],
382
399
  .open.shift #reader {
383
400
  width: calc(100% - var(--menuWidth));
384
401
  float: right;
@@ -415,22 +432,13 @@ __decorate([
415
432
  })
416
433
  ], ItemNavigator.prototype, "signedIn", void 0);
417
434
  __decorate([
418
- property({
419
- type: Array,
420
- hasChanged: (newVal, oldVal) => {
421
- if (newVal !== oldVal) {
422
- return true;
423
- }
424
- return false;
425
- },
426
- }),
427
435
  property({ type: Array })
428
436
  ], ItemNavigator.prototype, "menuContents", void 0);
429
437
  __decorate([
430
438
  property({ type: Array })
431
439
  ], ItemNavigator.prototype, "menuShortcuts", void 0);
432
440
  __decorate([
433
- property({ type: Boolean, reflect: true })
441
+ property({ type: Boolean, reflect: true, attribute: true })
434
442
  ], ItemNavigator.prototype, "viewportInFullscreen", void 0);
435
443
  __decorate([
436
444
  property({ type: Boolean })
@@ -439,13 +447,13 @@ __decorate([
439
447
  property({ type: String })
440
448
  ], ItemNavigator.prototype, "openMenu", void 0);
441
449
  __decorate([
442
- property({ type: Object })
450
+ property({ attribute: false })
443
451
  ], ItemNavigator.prototype, "modal", void 0);
444
452
  __decorate([
445
453
  property({ attribute: false })
446
454
  ], ItemNavigator.prototype, "sharedObserver", void 0);
447
455
  __decorate([
448
- state()
456
+ property({ type: Boolean, reflect: true, attribute: true })
449
457
  ], ItemNavigator.prototype, "loaded", void 0);
450
458
  __decorate([
451
459
  state()
@@ -453,9 +461,11 @@ __decorate([
453
461
  __decorate([
454
462
  query('#frame')
455
463
  ], ItemNavigator.prototype, "frame", void 0);
464
+ __decorate([
465
+ query('slot[name="theater-header"]')
466
+ ], ItemNavigator.prototype, "headerSlot", void 0);
456
467
  ItemNavigator = __decorate([
457
- customElement('item-navigator')
468
+ customElement('ia-item-navigator')
458
469
  ], ItemNavigator);
459
470
  export { ItemNavigator };
460
- customElements.define('ia-menu-slider', IAMenuSlider);
461
471
  //# sourceMappingURL=item-navigator.js.map
package/dist/src/item-navigator.js.map CHANGED
@@ -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 query,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport { PromisedSingleton } from '@internetarchive/promised-singleton';\nimport {\n SharedResizeObserver,\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\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 IntOpenModalEvent,\n IntManageSideMenuEvent,\n IntSetOpenMenuEvent,\n IntSetMenuContentsEvent,\n IntSetMenuShortcutsEvent,\n IntLoadingStateUpdatedEvent,\n} from './interfaces/event-interfaces';\n\nimport { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';\n\n@customElement('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({ type: Object }) modal:\n | ModalManagerInterface\n | undefined = undefined;\n\n @property({ attribute: false }) private sharedObserver?: any; // PromisedSingleton<SharedResizeObserverInterface>;\n\n @state() private loaded: boolean = false;\n\n @state() private 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(): void {\n if (!this.modal) {\n this.createModal();\n }\n\n this.startResizeObserver();\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 console.log('width', width);\n }\n\n private async startResizeObserver(): Promise<void> {\n const ro = new PromisedSingleton<SharedResizeObserverInterface>({\n generator: async (): Promise<SharedResizeObserverInterface> => {\n return new SharedResizeObserver();\n },\n });\n\n this.sharedObserver = await ro.get();\n this.sharedObserver?.addObserver({\n handler: this,\n target: this.frame,\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`<div class=\"loading-view\">\n <ia-itemnav-loader></ia-itemnav-loader>\n </div>`\n : nothing}\n <div id=\"reader\" class=${displayReaderClass}>\n ${this.renderViewport}\n </div>\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 .sharedObserver=${this.sharedObserver}\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 @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @ViewportInFullScreen=${this.manageViewportFullscreen}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n @showItemNavigatorModal=${this.openModal}\n @closeItemNavigatorModal=${this.closeModal}\n @loadingStateUpdated=${this.loadingStateUpdated}\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(): void {\n this.viewportInFullscreen = !this.viewportInFullscreen;\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 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 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(\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} ${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\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: var(--menuSliderBg);\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-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":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EACV,aAAa,EACb,QAAQ,EACR,KAAK,EACL,KAAK,GAGN,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,EAAkB,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAKnE,OAAO,iCAAiC,CAAC;AAGzC,OAAO,8CAA8C,CAAC;AACtD,OAAO,UAAU,CAAC;AAgBlB,OAAO,wBAAwB,CAAC;AAEhC,MAAM,CAAN,IAAY,QAEX;AAFD,WAAY,QAAQ;IAClB,+BAAmB,CAAA;AACrB,CAAC,EAFW,QAAQ,KAAR,QAAQ,QAEnB;AAED,IAAa,aAAa,GAA1B,MAAa,aACX,SAAQ,UAAU;IADpB;;QAgB8B,aAAQ,GAAG,aAAa,CAAC;QAUrD,aAAQ,GAAG,KAAK,CAAC;QAEU,iBAAY,GAAsB,EAAE,CAAC;QAErC,kBAAa,GAAsB,EAAE,CAAC;QAGjE,yBAAoB,GAAmB,IAAI,CAAC;QAEf,eAAU,GAAG,KAAK,CAAC;QAEpB,aAAQ,GAAgB,EAAE,CAAC;QAMM,WAAM,GAExD,IAAI,CAAC;QAEP,kBAAa,GAAwB,OAAO,CAAC;IAmaxD,CAAC;IA7ZC,oBAAoB;QAClB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE;YACjC,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;IACH,CAAC;IAED,sBAAsB;IACtB,YAAY,CAAC,KAA0B;QACrC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC;QACpC,IAAI,KAAK,IAAI,GAAG,EAAE;YAChB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;YAC/B,OAAO;SACR;QACD,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;IAC/B,CAAC;IAEO,iBAAiB;;QACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC9D,CAAC;IAEO,oBAAoB;;QAC1B,MAAA,IAAI,CAAC,cAAc,0CAAE,cAAc,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACjE,CAAC;IAED,IAAI,oBAAoB;QAItB,OAAO;YACL,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC;IACJ,CAAC;IACD,0BAA0B;IAE1B,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7D,CAAC;IAED,IAAI,iBAAiB;;QACnB,MAAM,YAAY,GAAG,gBAAgB,MAAA,IAAI,CAAC,UAAU,0CAAE,YAAY,KAAK,CAAC;QACxE,OAAO,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;;sCAGuB,IAAI,CAAC,WAAW;;;KAGjD,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,kBAAkB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;QACrD,OAAO,IAAI,CAAA;8BACe,GAAG,IAAI,CAAC,SAAS,EAAE;;YAErC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO;;;;oBAI7C,kBAAkB;oBAClB,IAAI,CAAC,iBAAiB;;cAE5B,IAAI,CAAC,cAAc;;YAErB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO;;;KAGhD,CAAC;IACJ,CAAC;IAED,IAAI,aAAa;;QACf,OAAO,IAAI,CAAA;oBACK,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,0CAAE,UAAU;6BACtB,IAAI,CAAC,mBAAmB;gCACrB,CAAC;IAC/B,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;wCACyB,IAAI,CAAC,iBAAiB;KACzD,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC;QAEpE,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;gBACjB,IAAI,CAAC,IAAI;oBACL,IAAI,CAAC,QAAQ;wBACT,IAAI,CAAC,UAAU;0BACb,IAAI,CAAC,cAAc;gCACb,IAAI,CAAC,wBAAwB;+BAC9B,IAAI,CAAC,mBAAmB;0BAC7B,IAAI,CAAC,oBAAoB;uBAC5B,IAAI,CAAC,eAAe;gCACX,IAAI,CAAC,gBAAgB;;yCAEZ,cAAc;YAC3C,IAAI,CAAC,WAAW;;;KAGvB,CAAC;IACJ,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,OAAO,CAAC;SAChB;QACD,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,IAAI,EAAE;YACnC,OAAO,IAAI,CAAC,WAAW,CAAC;SACzB;QACD,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED,mBAAmB,CAAC,CAA8B;QAChD,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC;IAC/B,CAAC;IAED,4BAA4B;IAC5B,wBAAwB,CAAC,CAA2B;QAClD,MAAM,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;QACjD,IAAI,CAAC,oBAAoB,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;QAExE,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,mBAAmB,EAAE;YACjD,MAAM,EAAE,CAAC,CAAC,MAAM;SACjB,CAA6B,CAAC;QAE/B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IACD,gCAAgC;IAEhC,gBAAgB;IAChB,IAAI,gBAAgB;QAClB,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;IACpC,CAAC;IAED,UAAU;QACR,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAED,SAAS;QACP,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED,WAAW,CAAC,CAAsB;QAChC,MAAM,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,QAAQ,GAAG,EAAE,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACjD,CAAC;IAED,eAAe,CAAC,CAA0B;QACxC,MAAM,eAAe,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC;IACtC,CAAC;IAED,gBAAgB,CAAC,CAA2B;QAC1C,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC;IAED,kDAAkD;IAClD,oBAAoB,CAAC,CAAyB;QAC5C,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QACpC,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QAED,IAAI,MAAM,KAAK,MAAM,EAAE;YACrB,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;aAAM,IAAI,MAAM,KAAK,QAAQ,EAAE;YAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;YACvB,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;IACH,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,UAAU;;;;;;;;;KAS3B,CAAC;IACJ,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEpD,OAAO,IAAI,CAAA;;iCAEkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB;+BACzC,WAAW;;qBAErB,IAAI,CAAC,YAAY;4BACV,IAAI,CAAC,QAAQ;gCACT,IAAI,CAAC,WAAW;gCAChB,IAAI,CAAC,SAAS;;;;;;KAMzC,CAAC;IACJ,CAAC;IACD,oBAAoB;IAEpB,qBAAqB;IACrB,YAAY,CAAC,iBAAyB,EAAE;QACtC,IAAI,CAAC,QAAQ,GAAG,cAAc,CAAC;QAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACzB,CAAC;IAED,IAAI,SAAS;QACX,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE;YACxD,IAAI,EAAE,KAAK,YAAY,EAAE;gBACvB,OAAO,IAAI,CAAA,GAAG,IAAI,EAAE,CAAC;aACtB;YAED,OAAO,IAAI,CAAA;kCACiB,EAAE,aAAa,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;YAChE,IAAI;;OAET,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,OAAO,IAAI,CAAA,0BAA0B,SAAS,QAAQ,CAAC;IACzD,CAAC;IACD,yBAAyB;IAEzB,kBAAkB;IAClB,IAAI,SAAS;QACX,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QAClD,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QACtE,OAAO,GAAG,WAAW,IAAI,eAAe,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;IACnE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,WAAW,GAAG,GAAG,CAAA,yBAAyB,CAAC;QACjD,MAAM,gBAAgB,GAAG,GAAG,CAAA,+BAA+B,CAAC;QAC5D,MAAM,gBAAgB,GAAG,GAAG,CAAA,aAAa,gBAAgB,WAAW,CAAC;QACrE,MAAM,UAAU,GAAG,GAAG,CAAA,gCAAgC,CAAC;QACvD,MAAM,SAAS,GAAG,GAAG,CAAA,6BAA6B,CAAC;QAEnD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;4BAiBc,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgEpB,UAAU;;;;;;;;;;;;;;;;;iBAiBV,UAAU;kBACT,UAAU;;;;;;;;;;;;;;;;;;;;;;;iCAuBK,WAAW;iBAC3B,WAAW;qCACS,WAAW;sBAC1B,gBAAgB;;;;;;yBAMb,gBAAgB;;;;;;;;;;iBAUxB,WAAW;;sBAEN,gBAAgB;;;;;;;sBAOhB,gBAAgB;;KAEjC,CAAC;IACJ,CAAC;CACF,CAAA;AAtcC;IATC,QAAQ,CAAC;QACR,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,CAAC,KAAuC,EAAoB,EAAE;YACvE,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBACtC,OAAO,IAAI,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;aACtD;YACD,OAAO,KAAyB,CAAC;QACnC,CAAC;KACF,CAAC;2CACsB;AAEI;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAqB;AAEpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA0B;AAUrD;IARC,QAAQ,CAAC;QACR,SAAS,EAAE,CAAC,GAA4B,EAAE,EAAE;YAC1C,IAAI,OAAO,GAAG,KAAK,SAAS,EAAE;gBAC5B,OAAO,GAAG,CAAC;aACZ;YACD,OAAO,GAAG,KAAK,MAAM,CAAC;QACxB,CAAC;KACF,CAAC;+CACe;AAEU;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;mDAAsC;AAErC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAuC;AAGjE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;2DAChB;AAEf;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoB;AAEpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA4B;AAEvB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CAA+B;AAE9B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDAAuC;AAET;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAE5C;AAEP;IAAR,KAAK,EAAE;oDAA8C;AAErC;IAAhB,KAAK,CAAC,QAAQ,CAAC;4CAAgC;AAEV;IAArC,KAAK,CAAC,6BAA6B,CAAC;iDAAqC;AAnD/D,aAAa;IADzB,aAAa,CAAC,mBAAmB,CAAC;GACtB,aAAa,CAkdzB;SAldY,aAAa","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 { 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 {\n IntMenuProvider,\n IntMenuShortcut,\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: IntMenuProvider[] = [];\n\n @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];\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?: ModalManagerInterface;\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 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.removeResizeObserver();\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 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 .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 ${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: IntLoadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = loaded || null;\n }\n\n /** Fullscreen Management */\n manageViewportFullscreen(e: IntManageFullscreenEvent): 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 IntManageFullscreenEvent;\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: 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 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: 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"]}
package/dist/src/loader.d.ts CHANGED
@@ -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;
package/dist/src/loader.js CHANGED
@@ -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
  `;
package/dist/src/loader.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/loader.ts"],"names":[],"mappings":";AAAA,2CAA2C;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAG/B,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAC7C,IAAI,WAAW;QACb,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,GAAG,CAAA;;;;;;;;;;;UAWJ,IAAI,CAAC,IAAI;;;;;;;;KAQd,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,MAAM;;;KAGhB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCT,CAAC;IACJ,CAAC;CACF,CAAA;AAxFY,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAwF3B;SAxFY,eAAe","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { css, html, LitElement, customElement } from 'lit-element';\nimport { svg } from 'lit-html';\n\n@customElement('ia-itemnav-loader')\nexport class IAItemNavLoader extends LitElement {\n get bookIconSvg() {\n return svg`\n <g class=\"bookIcon\" transform=\"matrix(1 0 0 -1 28 67.362264)\">\n <path d=\"m44.71698 31.6981124v-29.99320678s-18.0956599.30735848-18.6322637-.7171698c-.0633962-.12226414-1.890566-.59207545-2.9745282-.59207545-1.3228302 0-3.5122641 0-4.1286791.74547168-.9707547 1.17452827-18.82811278.71660375-18.82811278.71660375v30.040754l1.83849052.7867924.29094339-28.48188608s15.94981097.15339622 17.09094297-1.10716978c.8145283-.90056602 4.997547-.91641507 5.3450942-.3526415.9611321 1.55716977 14.7101883 1.31716978 17.6077354 1.45981128l.3266038 28.22830118z\"/>\n <path d=\"m40.1129424 33.5957539h-12.8337733c-1.8690565 0-3.1098112-.7545283-3.9299999-1.6279245v-26.70452764l1.2362264-.00792453c.4584906.72962262 3.0922641 1.39415091 3.0922641 1.39415091h10.1298111s1.0381131.01754717 1.5141509.47377357c.5643396.54056602.7913207 1.36981129.7913207 1.36981129z\"/>\n <path d=\"m17.3354713 33.5957539h-12.8337733v-25.37660316s0-.75283017.49358489-1.14113205c.52867924-.41433961 1.3415094-.42849055 1.3415094-.42849055h10.59905631s2.2075471-.52698112 3.0928301-1.39415091l1.2.00792453v26.74245214c-.8201886.8581132-2.0530188 1.59-3.8932074 1.59\"/>\n </g>\n `;\n }\n\n get icon() {\n return this.bookIconSvg;\n }\n\n get loader() {\n return svg`\n <svg\n height=\"100\"\n viewBox=\"0 0 100 100\"\n width=\"100\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby=\"item-loading\"\n >\n <title id=\"item-loading\">Currently loading viewer.</title>\n <desc>Please wait while we load theater.</desc>\n <g fill=\"#333\" fill-rule=\"evenodd\" class=\"book-icon\">\n ${this.icon}\n <path\n class=\"ring\"\n d=\"m17.8618849 11.6970233c18.5864635-15.59603144 45.6875867-15.59603102 64.2740497.000001 1.9271446 1.6170806 2.1785128 4.4902567.5614466 6.4174186-1.6170661 1.9271618-4.4902166 2.1785323-6.4173612.5614517-15.1996922-12.75416882-37.3625282-12.75416916-52.5622206-.000001-15.19969387 12.7541707-19.04823077 34.5805019-9.1273354 51.7641499 9.9208955 17.183646 30.7471499 24.7638499 49.3923323 17.9774983 18.6451823-6.7863521 29.7266014-25.9801026 26.2811129-45.5206248-.436848-2.4775114 1.2174186-4.8400696 3.6949079-5.2769215 2.4774893-.4368518 4.8400264 1.2174296 5.2768744 3.694941 4.2132065 23.8945096-9.3373563 47.3649806-32.137028 55.6634567-22.799672 8.2984758-48.2663986-.9707372-60.39785211-21.9832155-12.1314534-21.012481-7.42539173-47.7021198 11.16107351-63.2981544z\"\n fill-rule=\"nonzero\"\n />\n </g>\n </svg>\n `;\n }\n\n render() {\n return html`\n <div class=\"place-holder\">\n ${this.loader}\n <h3>Loading viewer</h3>\n </div>\n `;\n }\n\n static get styles() {\n return css`\n .place-holder {\n width: 30%;\n margin: auto;\n text-align: center;\n color: var(--primaryTextColor);\n }\n\n .place-holder {\n position: relative;\n }\n\n .place-holder svg {\n display: block;\n width: 60%;\n max-width: 100px;\n height: auto;\n margin: auto;\n }\n\n svg * {\n fill: var(--primaryTextColor);\n }\n\n svg .ring {\n animation: rotate 1.3s infinite linear;\n transform-origin: 50px 50px;\n transform-box: fill-box;\n display: block; // transform won't work on inline style\n }\n\n @keyframes rotate {\n 0% {\n -moz-transform: rotate(-360deg);\n -webkit-transform: rotate(-360deg);\n transform: rotate(-360deg);\n }\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/loader.ts"],"names":[],"mappings":";AAAA,2CAA2C;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAGxC,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,GAAG,CAAA;;;;;;;;;;;UAWJ,IAAI,CAAC,IAAI;;;;;;;;KAQd,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,OAAO,IAAI,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;QAClE,OAAO,IAAI,CAAA;;UAEL,KAAK,IAAI,IAAI,CAAC,MAAM;;;KAGzB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCT,CAAC;IACJ,CAAC;CACF,CAAA;AA/FY,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA+F3B;SA/FY,eAAe","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { css, html, LitElement, customElement } from 'lit-element';\nimport { svg, nothing } from 'lit-html';\n\n@customElement('ia-itemnav-loader')\nexport class IAItemNavLoader extends LitElement {\n static get properties() {\n return {\n title: { type: String },\n };\n }\n\n get bookIconSvg() {\n return svg`\n <g class=\"bookIcon\" transform=\"matrix(1 0 0 -1 28 67.362264)\">\n <path d=\"m44.71698 31.6981124v-29.99320678s-18.0956599.30735848-18.6322637-.7171698c-.0633962-.12226414-1.890566-.59207545-2.9745282-.59207545-1.3228302 0-3.5122641 0-4.1286791.74547168-.9707547 1.17452827-18.82811278.71660375-18.82811278.71660375v30.040754l1.83849052.7867924.29094339-28.48188608s15.94981097.15339622 17.09094297-1.10716978c.8145283-.90056602 4.997547-.91641507 5.3450942-.3526415.9611321 1.55716977 14.7101883 1.31716978 17.6077354 1.45981128l.3266038 28.22830118z\"/>\n <path d=\"m40.1129424 33.5957539h-12.8337733c-1.8690565 0-3.1098112-.7545283-3.9299999-1.6279245v-26.70452764l1.2362264-.00792453c.4584906.72962262 3.0922641 1.39415091 3.0922641 1.39415091h10.1298111s1.0381131.01754717 1.5141509.47377357c.5643396.54056602.7913207 1.36981129.7913207 1.36981129z\"/>\n <path d=\"m17.3354713 33.5957539h-12.8337733v-25.37660316s0-.75283017.49358489-1.14113205c.52867924-.41433961 1.3415094-.42849055 1.3415094-.42849055h10.59905631s2.2075471-.52698112 3.0928301-1.39415091l1.2.00792453v26.74245214c-.8201886.8581132-2.0530188 1.59-3.8932074 1.59\"/>\n </g>\n `;\n }\n\n get icon() {\n return this.bookIconSvg;\n }\n\n get loader() {\n return svg`\n <svg\n height=\"100\"\n viewBox=\"0 0 100 100\"\n width=\"100\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby=\"item-loading\"\n >\n <title id=\"item-loading\">Currently loading viewer.</title>\n <desc>Please wait while we load theater.</desc>\n <g fill=\"#333\" fill-rule=\"evenodd\" class=\"book-icon\">\n ${this.icon}\n <path\n class=\"ring\"\n d=\"m17.8618849 11.6970233c18.5864635-15.59603144 45.6875867-15.59603102 64.2740497.000001 1.9271446 1.6170806 2.1785128 4.4902567.5614466 6.4174186-1.6170661 1.9271618-4.4902166 2.1785323-6.4173612.5614517-15.1996922-12.75416882-37.3625282-12.75416916-52.5622206-.000001-15.19969387 12.7541707-19.04823077 34.5805019-9.1273354 51.7641499 9.9208955 17.183646 30.7471499 24.7638499 49.3923323 17.9774983 18.6451823-6.7863521 29.7266014-25.9801026 26.2811129-45.5206248-.436848-2.4775114 1.2174186-4.8400696 3.6949079-5.2769215 2.4774893-.4368518 4.8400264 1.2174296 5.2768744 3.694941 4.2132065 23.8945096-9.3373563 47.3649806-32.137028 55.6634567-22.799672 8.2984758-48.2663986-.9707372-60.39785211-21.9832155-12.1314534-21.012481-7.42539173-47.7021198 11.16107351-63.2981544z\"\n fill-rule=\"nonzero\"\n />\n </g>\n </svg>\n `;\n }\n\n render() {\n const title = this.title ? html`<h2>${this.title}</h2>` : nothing;\n return html`\n <div class=\"place-holder\">\n ${title} ${this.loader}\n <h3>Loading viewer</h3>\n </div>\n `;\n }\n\n static get styles() {\n return css`\n .place-holder {\n width: 30%;\n margin: auto;\n text-align: center;\n color: var(--primaryTextColor);\n }\n\n .place-holder {\n position: relative;\n }\n\n .place-holder svg {\n display: block;\n width: 60%;\n max-width: 100px;\n height: auto;\n margin: auto;\n }\n\n svg * {\n fill: var(--primaryTextColor);\n }\n\n svg .ring {\n animation: rotate 1.3s infinite linear;\n transform-origin: 50px 50px;\n transform-box: fill-box;\n display: block; // transform won't work on inline style\n }\n\n @keyframes rotate {\n 0% {\n -moz-transform: rotate(-360deg);\n -webkit-transform: rotate(-360deg);\n transform: rotate(-360deg);\n }\n }\n `;\n }\n}\n"]}
package/dist/src/no-theater-available.d.ts ADDED
@@ -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
+ }