@internetarchive/ia-item-navigator 0.0.0 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/README.md +29 -19
  2. package/demo/app-root.ts +113 -22
  3. package/demo/index.html +12 -4
  4. package/dist/demo/app-root.d.ts +27 -7
  5. package/dist/demo/app-root.js +98 -23
  6. package/dist/demo/app-root.js.map +1 -1
  7. package/dist/src/interfaces/custom-theater-interface.d.ts +20 -0
  8. package/dist/src/interfaces/custom-theater-interface.js +2 -0
  9. package/dist/src/interfaces/custom-theater-interface.js.map +1 -0
  10. package/dist/src/interfaces/event-interfaces.d.ts +13 -23
  11. package/dist/src/interfaces/event-interfaces.js.map +1 -1
  12. package/dist/src/interfaces/menu-interfaces.d.ts +7 -7
  13. package/dist/src/interfaces/menu-interfaces.js.map +1 -1
  14. package/dist/src/interfaces/nav-controller-interface.d.ts +11 -6
  15. package/dist/src/interfaces/nav-controller-interface.js.map +1 -1
  16. package/dist/src/item-inspector/files-by-type/files-by-type-provider.js +5 -3
  17. package/dist/src/item-inspector/files-by-type/files-by-type-provider.js.map +1 -1
  18. package/dist/src/item-inspector/files-by-type/ia-files-by-type.d.ts +1 -0
  19. package/dist/src/item-inspector/files-by-type/ia-files-by-type.js +14 -0
  20. package/dist/src/item-inspector/files-by-type/ia-files-by-type.js.map +1 -1
  21. package/dist/src/item-inspector/item-inspector.d.ts +0 -31
  22. package/dist/src/item-inspector/item-inspector.js +253 -181
  23. package/dist/src/item-inspector/item-inspector.js.map +1 -1
  24. package/dist/src/item-inspector/visual-mod-provider.d.ts +19 -0
  25. package/dist/src/item-inspector/visual-mod-provider.js +46 -0
  26. package/dist/src/item-inspector/visual-mod-provider.js.map +1 -0
  27. package/dist/src/item-navigator.d.ts +50 -28
  28. package/dist/src/item-navigator.js +216 -132
  29. package/dist/src/item-navigator.js.map +1 -1
  30. package/dist/src/loader.d.ts +5 -0
  31. package/dist/src/loader.js +8 -2
  32. package/dist/src/loader.js.map +1 -1
  33. package/dist/src/no-theater-available.d.ts +9 -0
  34. package/dist/src/no-theater-available.js +79 -0
  35. package/dist/src/no-theater-available.js.map +1 -0
  36. package/dist/test/book-nav-stub.d.ts +22 -0
  37. package/dist/test/book-nav-stub.js +49 -0
  38. package/dist/test/book-nav-stub.js.map +1 -0
  39. package/dist/test/ia-item-navigator.test.d.ts +2 -0
  40. package/dist/test/ia-item-navigator.test.js +317 -0
  41. package/dist/test/ia-item-navigator.test.js.map +1 -0
  42. package/dist/test/ia-stub-goody.d.ts +210 -0
  43. package/dist/test/ia-stub-goody.js +276 -0
  44. package/dist/test/ia-stub-goody.js.map +1 -0
  45. package/dist/test/ia-stub.d.ts +22 -0
  46. package/dist/test/ia-stub.js +35 -0
  47. package/dist/test/ia-stub.js.map +1 -0
  48. package/dist/test/no-theater-available.test.d.ts +1 -0
  49. package/dist/test/no-theater-available.test.js +27 -0
  50. package/dist/test/no-theater-available.test.js.map +1 -0
  51. package/package.json +14 -5
  52. package/src/interfaces/custom-theater-interface.ts +28 -0
  53. package/src/interfaces/event-interfaces.ts +17 -24
  54. package/src/interfaces/menu-interfaces.ts +10 -9
  55. package/src/item-navigator.ts +257 -155
  56. package/src/loader.ts +9 -2
  57. package/src/no-theater-available.ts +85 -0
  58. package/test/book-nav-stub.ts +47 -0
  59. package/test/ia-item-navigator.test.ts +438 -0
  60. package/test/ia-stub.ts +79 -0
  61. package/test/no-theater-available.test.ts +32 -0
  62. package/demo/demo-book-manifest.json +0 -1163
  63. package/demo/demo-item-md.json +0 -247
  64. package/src/interfaces/nav-controller-interface.ts +0 -18
  65. package/src/item-inspector/files-by-type/files-by-type-provider.ts +0 -41
  66. package/src/item-inspector/files-by-type/ia-files-by-type.ts +0 -84
  67. package/src/item-inspector/item-inspector.ts +0 -202
  68. package/src/item-inspector/share-provider.ts +0 -51
  69. package/src/item-navigator-js.js +0 -372
  70. package/test/your-webcomponent.test.ts +0 -40
package/README.md CHANGED
@@ -1,21 +1,37 @@
1
- [![Build Status](https://travis-ci.com/internetarchive/iaux-your-webcomponent.svg?branch=master)](https://travis-ci.com/internetarchive/iaux-your-webcomponent) [![codecov](https://codecov.io/gh/internetarchive/iaux-your-webcomponent/branch/master/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-your-webcomponent)
1
+ [![Build Status](https://travis-ci.com/internetarchive/iaux-item-navigator.svg?branch=master)](https://travis-ci.com/internetarchive/iaux-item-navigator) [![codecov](https://codecov.io/gh/internetarchive/iaux-item-navigator/branch/master/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-item-navigator)
2
2
 
3
- # Internet Archive Typescript WebComponent Template
3
+ # Internet Archive Item Navigator - theater menu manager
4
4
 
5
- This is a base template for creating Typescript WebComponents. It is based off of the [Open WebComponents generator](https://open-wc.org/docs/development/generator/) with some IA-specific customizations and some development niceities.
5
+ `<ia-item-navigator>` is a custom web component that makes an item's details theater.
6
+ The Item Navigator helps instantiate all of the components one needs to create an item theater:
7
+ - side menu
8
+ - menu shortcuts
9
+ - fullscreen management
10
+ - receives/creates a shared resize observer
11
+ - receives/shares a `<modal-manager>`
12
+ - slots for custom theater & header loads
6
13
 
7
- ## Usage
14
+ The Item Navigator's primary responsibility is to display the side menus, shortcuts, and the theater in browser window immersion "fullscreen".
8
15
 
9
- 1. Click the "Use this Template" button in GitHub to create a new repository based on this one.
10
- 2. Clone your new repo and update the things below:
16
+ The only business logic that is housed is determining which theater navigator to use given an `itemType`.
17
+ Currently supported:
18
+ - bookreader's `<book-navigator>`
19
+ - no theater available
11
20
 
12
- ### Things to update in your copy
13
- 1. Remove this section
14
- 2. Search for the strings `your-webcomponent` and `YourWebComponent` and those are most of the spots that need to be updated.
15
- 3. `README.md` (this file). Update the readme in general, but also the badge URLs
16
- 4. `package.json` Update the name and description
17
- 5. Rename the `your-webcomponent.ts` and its associated `.test` file
18
- 6. Update `.travis.yml` with the proper secure key. See the [Travis docs](https://blog.travis-ci.com/2014-03-13-slack-notifications/) for more information.
21
+ ## Usage
22
+ Generic:
23
+ ```
24
+ const iaItem = <MetadataResponse>;
25
+ <ia-item-navigator .item=${iaItem}></ia-item-navigator>
26
+ ```
27
+ For `<book-navigator>`:
28
+ ```
29
+ const iaItem = <MetadataResponse>;
30
+ <ia-item-navigator .item=${iaItem} .itemType="bookreader">
31
+ <div slot="theater-header"><p>foo header</p></div>
32
+ <div slot="theater-main"><div id="BookReader"></div></div>
33
+ </ia-item-navigator>
34
+ ```
19
35
 
20
36
  ## Local Demo with `web-dev-server`
21
37
  ```bash
@@ -61,9 +77,3 @@ yarn run format:eslint
61
77
  ```bash
62
78
  yarn run format:prettier
63
79
  ```
64
-
65
- ## Tooling configs
66
-
67
- For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
68
-
69
- If you customize the configuration a lot, you can consider moving them to individual files.
package/demo/app-root.ts CHANGED
@@ -1,33 +1,59 @@
1
- import { html, css, LitElement, customElement, property } from 'lit-element';
2
- import '../src/item-navigator';
3
- import '../src/item-inspector/item-inspector';
1
+ /* eslint-disable no-restricted-globals */
2
+ import {
3
+ html,
4
+ css,
5
+ LitElement,
6
+ customElement,
7
+ property,
8
+ query,
9
+ TemplateResult,
10
+ } from 'lit-element';
4
11
  import {
5
12
  MetadataResponse,
6
13
  SearchService,
7
14
  } from '@internetarchive/search-service';
15
+ import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
16
+ import { ModalManager } from '@internetarchive/modal-manager';
17
+ import '@internetarchive/modal-manager';
18
+ import { ItemNavigator } from '../src/item-navigator';
19
+ import '../src/item-navigator';
8
20
  @customElement('app-root')
9
21
  export class AppRoot extends LitElement {
10
- @property({ type: Object }) itemMD: MetadataResponse | any = {};
11
-
12
- @property({ type: Object }) bookManifest = {};
22
+ /**
23
+ * Example controller to connect to `<ia-item-navigator>`
24
+ */
25
+ @property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;
13
26
 
14
27
  @property({ type: String }) encodedManifest = '';
15
28
 
29
+ @query('ia-item-navigator') private itemNav!: ItemNavigator;
30
+
31
+ @query('modal-manager') modalMgr!: ModalManager;
32
+
33
+ @property({ attribute: false }) sharedObserver = new SharedResizeObserver();
34
+
35
+ @property({ type: Boolean, reflect: true, attribute: true }) fullscreen:
36
+ | boolean
37
+ | null = null;
38
+
16
39
  firstUpdated() {
17
40
  this.fetchItemMD();
18
- // this.fetchDemoBook();
41
+ console.log(
42
+ '<app-root> component has loaded',
43
+ this.modalMgr,
44
+ this.sharedObserver
45
+ );
19
46
  }
20
47
 
21
- async fetchDemoBook() {
22
- const manifest = await fetch('/demo/demo-book-manifest.json');
23
- const theJson = await manifest.json();
24
- this.bookManifest = theJson;
25
- this.encodedManifest = btoa(JSON.stringify(this.bookManifest));
48
+ updated(changed: any) {
49
+ console.log('changed', changed);
50
+ if (changed.has('itemMD')) {
51
+ this.fullscreenCheck();
52
+ }
26
53
  }
27
54
 
28
55
  async fetchItemMD() {
29
56
  const searchService = SearchService.default;
30
-
31
57
  const mdResponse = await searchService.fetchMetadata('ux-team-books');
32
58
 
33
59
  if (mdResponse.error) {
@@ -38,35 +64,100 @@ export class AppRoot extends LitElement {
38
64
  return;
39
65
  }
40
66
 
67
+ console.log('mdResponse.success', JSON.stringify(mdResponse.success));
41
68
  this.itemMD = mdResponse.success;
42
- console.log('** App Root: this.itemMD', this.itemMD);
43
69
  }
44
70
 
45
- render() {
46
- if (!this.itemMD) {
47
- return html`<h2>Please hold as we fetch an item for ya</h2>`;
71
+ get theaterReady(): boolean {
72
+ return this.modalMgr && this.sharedObserver && !!this.itemMD;
73
+ }
74
+
75
+ get urlParams(): URLSearchParams {
76
+ return new URLSearchParams(location.search.slice(1));
77
+ }
78
+
79
+ /** Fullscreen */
80
+ get showFullscreen(): boolean {
81
+ return this.urlParams.get('view') === 'theater';
82
+ }
83
+
84
+ /** sets url query param `view=theater` to toggle fullscreen */
85
+ toggleFS(): void {
86
+ if (this.urlParams.get('view')) {
87
+ location.search = '';
88
+ } else {
89
+ location.search = 'view=theater';
90
+ }
91
+ }
92
+
93
+ /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
94
+ fullscreenCheck(): void {
95
+ if (this.showFullscreen && this.itemNav) {
96
+ this.fullscreen = true;
97
+ // this.itemNav.viewportInFullscreen = true;
48
98
  }
99
+ }
100
+ /** End fullscreen */
49
101
 
102
+ /** Views */
103
+ get theaterBlock(): TemplateResult {
50
104
  return html`
51
- <item-navigator baseHost="https://archive.org" .item=${this.itemMD}>
52
- </item-navigator>
105
+ <ia-item-navigator
106
+ baseHost="https://archive.org"
107
+ .item=${this.itemMD}
108
+ .modal=${this.modalMgr}
109
+ .sharedObserver=${this.sharedObserver}
110
+ @ViewportInFullScreen=${this.toggleFS}
111
+ .viewportInFullscreen=${this.fullscreen}
112
+ ></ia-item-navigator>
113
+ `;
114
+ }
115
+
116
+ get placeholder(): TemplateResult {
117
+ return html`<h2>Please hold as we fetch an item for ya</h2>`;
118
+ }
119
+
120
+ render(): TemplateResult {
121
+ const theater = this.theaterReady ? this.theaterBlock : this.placeholder;
122
+ return html`
123
+ <h1>theater, in page</h1>
124
+ ${theater}
125
+ <modal-manager></modal-manager>
53
126
  `;
54
127
  }
55
128
 
56
129
  static styles = css`
57
130
  :host {
58
- min-height: 64vh;
59
131
  border: 1px solid pink;
132
+ color: #222;
60
133
  }
134
+
135
+ :host([fullscreen]) {
136
+ height: 100vh;
137
+ width: 100vw;
138
+ }
139
+
61
140
  :host,
62
- item-navigator {
141
+ ia-item-navigator {
63
142
  display: block;
64
143
  position: relative;
65
144
  width: 100%;
145
+ min-height: 64vh;
146
+ height: 64vh;
66
147
  }
67
- item-navigator {
148
+ ia-item-navigator {
68
149
  height: inherit;
69
150
  min-height: inherit;
70
151
  }
152
+ div {
153
+ position: relative;
154
+ overflow: hidden;
155
+ height: 100%;
156
+ min-height: inherit;
157
+ }
158
+
159
+ modal-manager[mode='closed'] {
160
+ display: none;
161
+ }
71
162
  `;
72
163
  }
package/demo/index.html CHANGED
@@ -6,10 +6,10 @@
6
6
  html, app-root {
7
7
  font-size: 10px; /* This is to match petabox's base font size */
8
8
  font-family: sans-serif;
9
- --primaryBGColor: var(--black, #000);
9
+ --primaryBGColor: black;
10
10
  --secondaryBGColor: #222;
11
11
  --tertiaryBGColor: #333;
12
- --primaryTextColor: var(--white, #fff);
12
+ --primaryTextColor: white;
13
13
  --primaryCTAFill: #194880;
14
14
  --primaryCTABorder: #c5d1df;
15
15
  --secondaryCTAFill: #333;
@@ -41,21 +41,29 @@
41
41
  }
42
42
 
43
43
  body {
44
- background: black;
45
44
  color: #fff;
45
+ margin: 0;
46
46
  }
47
47
 
48
48
  modal-manager {
49
49
  display: none
50
50
  }
51
51
 
52
+ .fullscreen {
53
+ position: fixed;
54
+ }
52
55
 
53
56
  </style>
54
57
  </head>
55
58
  <body>
56
59
  <app-root></app-root>
57
60
  <script type="module">
58
- import '@internetarchive/modal-manager';
61
+ /* eslint-disable no-restricted-globals */
62
+ const params = new URLSearchParams(location.search.slice(1));
63
+ if (params.get('view') === 'theater') {
64
+ const body = document.querySelector('body');
65
+ body.classList.toggle('fullscreen');
66
+ }
59
67
  </script>
60
68
  <script type="module" src="../dist/demo/app-root.js">
61
69
  </script>
@@ -1,14 +1,34 @@
1
- import { LitElement } from 'lit-element';
2
- import '../src/item-navigator';
3
- import '../src/item-inspector/item-inspector';
1
+ import { LitElement, TemplateResult } from 'lit-element';
4
2
  import { MetadataResponse } from '@internetarchive/search-service';
3
+ import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
4
+ import { ModalManager } from '@internetarchive/modal-manager';
5
+ import '@internetarchive/modal-manager';
6
+ import '../src/item-navigator';
5
7
  export declare class AppRoot extends LitElement {
6
- itemMD: MetadataResponse | any;
7
- bookManifest: {};
8
+ /**
9
+ * Example controller to connect to `<ia-item-navigator>`
10
+ */
11
+ itemMD: MetadataResponse | undefined;
8
12
  encodedManifest: string;
13
+ private itemNav;
14
+ modalMgr: ModalManager;
15
+ sharedObserver: SharedResizeObserver;
16
+ fullscreen: boolean | null;
9
17
  firstUpdated(): void;
10
- fetchDemoBook(): Promise<void>;
18
+ updated(changed: any): void;
11
19
  fetchItemMD(): Promise<void>;
12
- render(): import("lit-element").TemplateResult;
20
+ get theaterReady(): boolean;
21
+ get urlParams(): URLSearchParams;
22
+ /** Fullscreen */
23
+ get showFullscreen(): boolean;
24
+ /** sets url query param `view=theater` to toggle fullscreen */
25
+ toggleFS(): void;
26
+ /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
27
+ fullscreenCheck(): void;
28
+ /** End fullscreen */
29
+ /** Views */
30
+ get theaterBlock(): TemplateResult;
31
+ get placeholder(): TemplateResult;
32
+ render(): TemplateResult;
13
33
  static styles: import("lit-element").CSSResult;
14
34
  }
@@ -1,24 +1,30 @@
1
1
  import { __decorate } from "tslib";
2
- import { html, css, LitElement, customElement, property } from 'lit-element';
3
- import '../src/item-navigator';
4
- import '../src/item-inspector/item-inspector';
2
+ /* eslint-disable no-restricted-globals */
3
+ import { html, css, LitElement, customElement, property, query, } from 'lit-element';
5
4
  import { SearchService, } from '@internetarchive/search-service';
5
+ import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
6
+ import '@internetarchive/modal-manager';
7
+ import '../src/item-navigator';
6
8
  let AppRoot = class AppRoot extends LitElement {
7
9
  constructor() {
8
10
  super(...arguments);
9
- this.itemMD = {};
10
- this.bookManifest = {};
11
+ /**
12
+ * Example controller to connect to `<ia-item-navigator>`
13
+ */
14
+ this.itemMD = undefined;
11
15
  this.encodedManifest = '';
16
+ this.sharedObserver = new SharedResizeObserver();
17
+ this.fullscreen = null;
12
18
  }
13
19
  firstUpdated() {
14
20
  this.fetchItemMD();
15
- // this.fetchDemoBook();
21
+ console.log('<app-root> component has loaded', this.modalMgr, this.sharedObserver);
16
22
  }
17
- async fetchDemoBook() {
18
- const manifest = await fetch('/demo/demo-book-manifest.json');
19
- const theJson = await manifest.json();
20
- this.bookManifest = theJson;
21
- this.encodedManifest = btoa(JSON.stringify(this.bookManifest));
23
+ updated(changed) {
24
+ console.log('changed', changed);
25
+ if (changed.has('itemMD')) {
26
+ this.fullscreenCheck();
27
+ }
22
28
  }
23
29
  async fetchItemMD() {
24
30
  const searchService = SearchService.default;
@@ -28,44 +34,113 @@ let AppRoot = class AppRoot extends LitElement {
28
34
  window.confirm('There was an error fetching response, please check dev console');
29
35
  return;
30
36
  }
37
+ console.log('mdResponse.success', JSON.stringify(mdResponse.success));
31
38
  this.itemMD = mdResponse.success;
32
- console.log('** App Root: this.itemMD', this.itemMD);
33
39
  }
34
- render() {
35
- if (!this.itemMD) {
36
- return html `<h2>Please hold as we fetch an item for ya</h2>`;
40
+ get theaterReady() {
41
+ return this.modalMgr && this.sharedObserver && !!this.itemMD;
42
+ }
43
+ get urlParams() {
44
+ return new URLSearchParams(location.search.slice(1));
45
+ }
46
+ /** Fullscreen */
47
+ get showFullscreen() {
48
+ return this.urlParams.get('view') === 'theater';
49
+ }
50
+ /** sets url query param `view=theater` to toggle fullscreen */
51
+ toggleFS() {
52
+ if (this.urlParams.get('view')) {
53
+ location.search = '';
54
+ }
55
+ else {
56
+ location.search = 'view=theater';
37
57
  }
58
+ }
59
+ /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
60
+ fullscreenCheck() {
61
+ if (this.showFullscreen && this.itemNav) {
62
+ this.fullscreen = true;
63
+ // this.itemNav.viewportInFullscreen = true;
64
+ }
65
+ }
66
+ /** End fullscreen */
67
+ /** Views */
68
+ get theaterBlock() {
38
69
  return html `
39
- <item-navigator baseHost="https://archive.org" .item=${this.itemMD}>
40
- </item-navigator>
70
+ <ia-item-navigator
71
+ baseHost="https://archive.org"
72
+ .item=${this.itemMD}
73
+ .modal=${this.modalMgr}
74
+ .sharedObserver=${this.sharedObserver}
75
+ @ViewportInFullScreen=${this.toggleFS}
76
+ .viewportInFullscreen=${this.fullscreen}
77
+ ></ia-item-navigator>
78
+ `;
79
+ }
80
+ get placeholder() {
81
+ return html `<h2>Please hold as we fetch an item for ya</h2>`;
82
+ }
83
+ render() {
84
+ const theater = this.theaterReady ? this.theaterBlock : this.placeholder;
85
+ return html `
86
+ <h1>theater, in page</h1>
87
+ ${theater}
88
+ <modal-manager></modal-manager>
41
89
  `;
42
90
  }
43
91
  };
44
92
  AppRoot.styles = css `
45
93
  :host {
46
- min-height: 64vh;
47
94
  border: 1px solid pink;
95
+ color: #222;
48
96
  }
97
+
98
+ :host([fullscreen]) {
99
+ height: 100vh;
100
+ width: 100vw;
101
+ }
102
+
49
103
  :host,
50
- item-navigator {
104
+ ia-item-navigator {
51
105
  display: block;
52
106
  position: relative;
53
107
  width: 100%;
108
+ min-height: 64vh;
109
+ height: 64vh;
54
110
  }
55
- item-navigator {
111
+ ia-item-navigator {
56
112
  height: inherit;
57
113
  min-height: inherit;
58
114
  }
115
+ div {
116
+ position: relative;
117
+ overflow: hidden;
118
+ height: 100%;
119
+ min-height: inherit;
120
+ }
121
+
122
+ modal-manager[mode='closed'] {
123
+ display: none;
124
+ }
59
125
  `;
60
126
  __decorate([
61
127
  property({ type: Object })
62
128
  ], AppRoot.prototype, "itemMD", void 0);
63
- __decorate([
64
- property({ type: Object })
65
- ], AppRoot.prototype, "bookManifest", void 0);
66
129
  __decorate([
67
130
  property({ type: String })
68
131
  ], AppRoot.prototype, "encodedManifest", void 0);
132
+ __decorate([
133
+ query('ia-item-navigator')
134
+ ], AppRoot.prototype, "itemNav", void 0);
135
+ __decorate([
136
+ query('modal-manager')
137
+ ], AppRoot.prototype, "modalMgr", void 0);
138
+ __decorate([
139
+ property({ attribute: false })
140
+ ], AppRoot.prototype, "sharedObserver", void 0);
141
+ __decorate([
142
+ property({ type: Boolean, reflect: true, attribute: true })
143
+ ], AppRoot.prototype, "fullscreen", void 0);
69
144
  AppRoot = __decorate([
70
145
  customElement('app-root')
71
146
  ], AppRoot);
@@ -1 +1 @@
1
- {"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAEL,aAAa,GACd,MAAM,iCAAiC,CAAC;AAEzC,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QAC8B,WAAM,GAA2B,EAAE,CAAC;QAEpC,iBAAY,GAAG,EAAE,CAAC;QAElB,oBAAe,GAAG,EAAE,CAAC;IA0DnD,CAAC;IAxDC,YAAY;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,wBAAwB;IAC1B,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,+BAA+B,CAAC,CAAC;QAC9D,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QACtC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACjE,CAAC;IAED,KAAK,CAAC,WAAW;QACf,MAAM,aAAa,GAAG,aAAa,CAAC,OAAO,CAAC;QAE5C,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAEtE,IAAI,UAAU,CAAC,KAAK,EAAE;YACpB,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;YACjD,MAAc,CAAC,OAAO,CACrB,gEAAgE,CACjE,CAAC;YACF,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;QACjC,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,OAAO,IAAI,CAAA,iDAAiD,CAAC;SAC9D;QAED,OAAO,IAAI,CAAA;6DAC8C,IAAI,CAAC,MAAM;;KAEnE,CAAC;IACJ,CAAC;CAkBF,CAAA;AAhBQ,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;GAelB,CAAC;AA7D0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAqC;AAEpC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AALtC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA+DnB;SA/DY,OAAO","sourcesContent":["import { html, css, LitElement, customElement, property } from 'lit-element';\nimport '../src/item-navigator';\nimport '../src/item-inspector/item-inspector';\nimport {\n MetadataResponse,\n SearchService,\n} from '@internetarchive/search-service';\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n @property({ type: Object }) itemMD: MetadataResponse | any = {};\n\n @property({ type: Object }) bookManifest = {};\n\n @property({ type: String }) encodedManifest = '';\n\n firstUpdated() {\n this.fetchItemMD();\n // this.fetchDemoBook();\n }\n\n async fetchDemoBook() {\n const manifest = await fetch('/demo/demo-book-manifest.json');\n const theJson = await manifest.json();\n this.bookManifest = theJson;\n this.encodedManifest = btoa(JSON.stringify(this.bookManifest));\n }\n\n async fetchItemMD() {\n const searchService = SearchService.default;\n\n const mdResponse = await searchService.fetchMetadata('ux-team-books');\n\n if (mdResponse.error) {\n console.log('MD Fetch error: ', mdResponse.error);\n (window as any).confirm(\n 'There was an error fetching response, please check dev console'\n );\n return;\n }\n\n this.itemMD = mdResponse.success;\n console.log('** App Root: this.itemMD', this.itemMD);\n }\n\n render() {\n if (!this.itemMD) {\n return html`<h2>Please hold as we fetch an item for ya</h2>`;\n }\n\n return html`\n <item-navigator baseHost=\"https://archive.org\" .item=${this.itemMD}>\n </item-navigator>\n `;\n }\n\n static styles = css`\n :host {\n min-height: 64vh;\n border: 1px solid pink;\n }\n :host,\n item-navigator {\n display: block;\n position: relative;\n width: 100%;\n }\n item-navigator {\n height: inherit;\n min-height: inherit;\n }\n `;\n}\n"]}
1
+ {"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-restricted-globals */\nimport {\n html,\n css,\n LitElement,\n customElement,\n property,\n query,\n TemplateResult,\n} from 'lit-element';\nimport {\n MetadataResponse,\n SearchService,\n} from '@internetarchive/search-service';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/modal-manager';\nimport { ItemNavigator } from '../src/item-navigator';\nimport '../src/item-navigator';\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n /**\n * Example controller to connect to `<ia-item-navigator>`\n */\n @property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;\n\n @property({ type: String }) encodedManifest = '';\n\n @query('ia-item-navigator') private itemNav!: ItemNavigator;\n\n @query('modal-manager') modalMgr!: ModalManager;\n\n @property({ attribute: false }) sharedObserver = new SharedResizeObserver();\n\n @property({ type: Boolean, reflect: true, attribute: true }) fullscreen:\n | boolean\n | null = null;\n\n firstUpdated() {\n this.fetchItemMD();\n console.log(\n '<app-root> component has loaded',\n this.modalMgr,\n this.sharedObserver\n );\n }\n\n updated(changed: any) {\n console.log('changed', changed);\n if (changed.has('itemMD')) {\n this.fullscreenCheck();\n }\n }\n\n async fetchItemMD() {\n const searchService = SearchService.default;\n const mdResponse = await searchService.fetchMetadata('ux-team-books');\n\n if (mdResponse.error) {\n console.log('MD Fetch error: ', mdResponse.error);\n (window as any).confirm(\n 'There was an error fetching response, please check dev console'\n );\n return;\n }\n\n console.log('mdResponse.success', JSON.stringify(mdResponse.success));\n this.itemMD = mdResponse.success;\n }\n\n get theaterReady(): boolean {\n return this.modalMgr && this.sharedObserver && !!this.itemMD;\n }\n\n get urlParams(): URLSearchParams {\n return new URLSearchParams(location.search.slice(1));\n }\n\n /** Fullscreen */\n get showFullscreen(): boolean {\n return this.urlParams.get('view') === 'theater';\n }\n\n /** sets url query param `view=theater` to toggle fullscreen */\n toggleFS(): void {\n if (this.urlParams.get('view')) {\n location.search = '';\n } else {\n location.search = 'view=theater';\n }\n }\n\n /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */\n fullscreenCheck(): void {\n if (this.showFullscreen && this.itemNav) {\n this.fullscreen = true;\n // this.itemNav.viewportInFullscreen = true;\n }\n }\n /** End fullscreen */\n\n /** Views */\n get theaterBlock(): TemplateResult {\n return html`\n <ia-item-navigator\n baseHost=\"https://archive.org\"\n .item=${this.itemMD}\n .modal=${this.modalMgr}\n .sharedObserver=${this.sharedObserver}\n @ViewportInFullScreen=${this.toggleFS}\n .viewportInFullscreen=${this.fullscreen}\n ></ia-item-navigator>\n `;\n }\n\n get placeholder(): TemplateResult {\n return html`<h2>Please hold as we fetch an item for ya</h2>`;\n }\n\n render(): TemplateResult {\n const theater = this.theaterReady ? this.theaterBlock : this.placeholder;\n return html`\n <h1>theater, in page</h1>\n ${theater}\n <modal-manager></modal-manager>\n `;\n }\n\n static styles = css`\n :host {\n border: 1px solid pink;\n color: #222;\n }\n\n :host([fullscreen]) {\n height: 100vh;\n width: 100vw;\n }\n\n :host,\n ia-item-navigator {\n display: block;\n position: relative;\n width: 100%;\n min-height: 64vh;\n height: 64vh;\n }\n ia-item-navigator {\n height: inherit;\n min-height: inherit;\n }\n div {\n position: relative;\n overflow: hidden;\n height: 100%;\n min-height: inherit;\n }\n\n modal-manager[mode='closed'] {\n display: none;\n }\n `;\n}\n"]}
@@ -0,0 +1,20 @@
1
+ import { LitElement } from 'lit-element';
2
+ import { MetadataResponse } from '@internetarchive/search-service';
3
+ import { ModalManager } from '@internetarchive/modal-manager';
4
+ import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
5
+ import { MenuProviderInterface, MenuShortcutInterface } from './menu-interfaces';
6
+ export interface CustomTheaterInterface extends LitElement {
7
+ baseHost?: string;
8
+ itemMD?: MetadataResponse;
9
+ menuProviders?: MenuProviderInterface[];
10
+ menuShortcuts?: MenuShortcutInterface[];
11
+ sideMenuOpen: boolean;
12
+ signedIn?: boolean | null;
13
+ sharedObserver?: SharedResizeObserver;
14
+ modal?: ModalManager;
15
+ emitLoadingStatusUpdate: (loaded: boolean) => void;
16
+ addMenuShortcut: (menuId: string) => void;
17
+ removeMenuShortcut: (menuId: string) => void;
18
+ sortMenuShortcuts: () => void;
19
+ emitMenuShortcutsUpdated: () => void;
20
+ }
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=custom-theater-interface.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"custom-theater-interface.js","sourceRoot":"","sources":["../../../src/interfaces/custom-theater-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { LitElement } from 'lit-element';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport {\n MenuProviderInterface,\n MenuShortcutInterface,\n} from './menu-interfaces';\n\nexport interface CustomTheaterInterface extends LitElement {\n baseHost?: string;\n itemMD?: MetadataResponse;\n menuProviders?: MenuProviderInterface[];\n menuShortcuts?: MenuShortcutInterface[];\n sideMenuOpen: boolean;\n\n signedIn?: boolean | null;\n\n sharedObserver?: SharedResizeObserver;\n modal?: ModalManager;\n\n emitLoadingStatusUpdate: (loaded: boolean) => void;\n\n addMenuShortcut: (menuId: string) => void;\n removeMenuShortcut: (menuId: string) => void;\n sortMenuShortcuts: () => void;\n emitMenuShortcutsUpdated: () => void;\n}\n"]}
@@ -1,48 +1,38 @@
1
- import { TemplateResult } from 'lit-html';
2
- import { ModalConfig } from '@internetarchive/modal-manager';
3
- import { IntMenuProvider, IntMenuShortcut } from './menu-interfaces';
1
+ import { MenuProviderInterface, MenuShortcutInterface, MenuId } from './menu-interfaces';
4
2
  /** Toggles Menu && Sets open panel */
5
- export interface IntManageSideMenuEvent extends CustomEvent {
3
+ export interface ToggleSideMenuOpenEvent extends CustomEvent {
6
4
  type: 'updateSideMenu';
7
5
  detail: {
8
- menuId: string | undefined | '';
6
+ menuId: MenuId | undefined | '';
9
7
  action: 'open' | 'toggle' | '';
10
8
  };
11
9
  }
12
10
  /** Sets open panel */
13
- export interface IntSetOpenMenuEvent extends CustomEvent {
11
+ export interface ToggleSidePanelOpenEvent extends CustomEvent {
14
12
  type: 'menuTypeSelected';
15
13
  detail: {
16
- id: string /** name of menu to open */;
14
+ id: MenuId | '';
17
15
  };
18
16
  }
19
17
  /** Sets menu order that is displayed */
20
- export interface IntSetMenuContentsEvent extends CustomEvent {
18
+ export interface SetSideMenuContentsEvent extends CustomEvent {
21
19
  type: 'menuUpdated';
22
- detail: IntMenuProvider[];
20
+ detail: MenuProviderInterface[];
23
21
  }
24
- /** list of shortcut configs that displays in minimized menu */
25
- export interface IntSetMenuShortcuts extends CustomEvent {
26
- type: 'menuShortcutsUpdated';
27
- detail: IntMenuShortcut[];
22
+ /** Sets menu shortcuts that is displayed */
23
+ export interface SetSideMenuShortcutsEvent extends CustomEvent {
24
+ type: 'menuUpdated';
25
+ detail: MenuShortcutInterface[];
28
26
  }
29
27
  /** Toggles fullscreen mode */
30
- export interface IntManageFullscreenEvent extends CustomEvent {
28
+ export interface ManageFullscreenEvent extends CustomEvent {
31
29
  type: 'ViewportInFullScreen';
32
30
  detail: {
33
31
  isFullScreen: boolean;
34
32
  };
35
33
  }
36
- /** Toggles modal & sets contents */
37
- export interface IntOpenModalEvent extends CustomEvent {
38
- type: 'showItemNavigatorModal';
39
- detail: {
40
- config: ModalConfig;
41
- customModalContent: TemplateResult;
42
- };
43
- }
44
34
  /** Toggles loading view */
45
- export interface IntLoadingStateUpdatedEvent extends CustomEvent {
35
+ export interface loadingStateUpdatedEvent extends CustomEvent {
46
36
  type: 'loadingStateUpdated';
47
37
  detail: {
48
38
  loaded: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"event-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/event-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { ModalConfig } from '@internetarchive/modal-manager';\nimport { IntMenuProvider, IntMenuShortcut } from './menu-interfaces';\n\n/** Toggles Menu && Sets open panel */\nexport interface IntManageSideMenuEvent extends CustomEvent {\n type: 'updateSideMenu';\n detail: {\n menuId: string | undefined | '';\n action: 'open' | 'toggle' | '';\n };\n}\n\n/** Sets open panel */\nexport interface IntSetOpenMenuEvent extends CustomEvent {\n type: 'menuTypeSelected';\n detail: {\n id: string /** name of menu to open */;\n };\n}\n\n/** Sets menu order that is displayed */\nexport interface IntSetMenuContentsEvent extends CustomEvent {\n type: 'menuUpdated';\n detail: IntMenuProvider[];\n}\n\n/** list of shortcut configs that displays in minimized menu */\nexport interface IntSetMenuShortcuts extends CustomEvent {\n type: 'menuShortcutsUpdated';\n detail: IntMenuShortcut[];\n}\n\n/** Toggles fullscreen mode */\nexport interface IntManageFullscreenEvent extends CustomEvent {\n type: 'ViewportInFullScreen';\n detail: {\n isFullScreen: boolean;\n };\n}\n\n/** Toggles modal & sets contents */\nexport interface IntOpenModalEvent extends CustomEvent {\n type: 'showItemNavigatorModal';\n detail: {\n config: ModalConfig;\n customModalContent: TemplateResult;\n };\n}\n\n/** Toggles loading view */\nexport interface IntLoadingStateUpdatedEvent extends CustomEvent {\n type: 'loadingStateUpdated';\n detail: {\n loaded: boolean;\n };\n}\n"]}
1
+ {"version":3,"file":"event-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/event-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import {\n MenuProviderInterface,\n MenuShortcutInterface,\n MenuId,\n} from './menu-interfaces';\n\n/** Toggles Menu && Sets open panel */\nexport interface ToggleSideMenuOpenEvent extends CustomEvent {\n type: 'updateSideMenu';\n detail: {\n menuId: MenuId | undefined | '';\n action: 'open' | 'toggle' | '';\n };\n}\n\n/** Sets open panel */\nexport interface ToggleSidePanelOpenEvent extends CustomEvent {\n type: 'menuTypeSelected';\n detail: {\n id: MenuId | '';\n };\n}\n\n/** Sets menu order that is displayed */\nexport interface SetSideMenuContentsEvent extends CustomEvent {\n type: 'menuUpdated';\n detail: MenuProviderInterface[];\n}\n\n/** Sets menu shortcuts that is displayed */\nexport interface SetSideMenuShortcutsEvent extends CustomEvent {\n type: 'menuUpdated';\n detail: MenuShortcutInterface[];\n}\n\n/** Toggles fullscreen mode */\nexport interface ManageFullscreenEvent extends CustomEvent {\n type: 'ViewportInFullScreen';\n detail: {\n isFullScreen: boolean;\n };\n}\n\n/** Toggles loading view */\nexport interface loadingStateUpdatedEvent extends CustomEvent {\n type: 'loadingStateUpdated';\n detail: {\n loaded: boolean;\n };\n}\n"]}