@internetarchive/ia-item-navigator 0.0.0-a12 → 0.0.0-a13

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.
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
@@ -13,11 +13,10 @@ import {
13
13
  SearchService,
14
14
  } from '@internetarchive/search-service';
15
15
  import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
16
- import '../src/item-navigator';
17
- // import { ItemNavigator } from '../src/item-navigator';
18
-
16
+ import { ModalManager } from '@internetarchive/modal-manager';
19
17
  import '@internetarchive/modal-manager';
20
-
18
+ import { ItemNavigator } from '../src/item-navigator';
19
+ import '../src/item-navigator';
21
20
  @customElement('app-root')
22
21
  export class AppRoot extends LitElement {
23
22
  /**
@@ -25,16 +24,18 @@ export class AppRoot extends LitElement {
25
24
  */
26
25
  @property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;
27
26
 
28
- @property({ type: Object }) bookManifest = {};
29
-
30
27
  @property({ type: String }) encodedManifest = '';
31
28
 
32
- @query('ia-item-navigator') private itemNav!: any;
29
+ @query('ia-item-navigator') private itemNav!: ItemNavigator;
33
30
 
34
- @query('modal-manager') modalMgr!: any;
31
+ @query('modal-manager') modalMgr!: ModalManager;
35
32
 
36
33
  @property({ attribute: false }) sharedObserver = new SharedResizeObserver();
37
34
 
35
+ @property({ type: Boolean, reflect: true, attribute: true }) fullscreen:
36
+ | boolean
37
+ | null = null;
38
+
38
39
  firstUpdated() {
39
40
  this.fetchItemMD();
40
41
  console.log(
@@ -44,9 +45,6 @@ export class AppRoot extends LitElement {
44
45
  );
45
46
  }
46
47
 
47
- /**
48
- * @inheritdoc
49
- */
50
48
  updated(changed: any) {
51
49
  console.log('changed', changed);
52
50
  if (changed.has('itemMD')) {
@@ -54,19 +52,6 @@ export class AppRoot extends LitElement {
54
52
  }
55
53
  }
56
54
 
57
- get theaterReady(): boolean {
58
- return this.modalMgr && this.sharedObserver && this.itemMD;
59
- }
60
-
61
- /**
62
- * toggles attr: `<ia-item-navigator viewportinfullscreen>`
63
- */
64
- fullscreenCheck() {
65
- if (this.showFullscreen && this.itemNav) {
66
- this.itemNav.viewportInFullscreen = true;
67
- }
68
- }
69
-
70
55
  async fetchItemMD() {
71
56
  const searchService = SearchService.default;
72
57
  const mdResponse = await searchService.fetchMetadata('ux-team-books');
@@ -83,17 +68,20 @@ export class AppRoot extends LitElement {
83
68
  this.itemMD = mdResponse.success;
84
69
  }
85
70
 
71
+ get theaterReady(): boolean {
72
+ return this.modalMgr && this.sharedObserver && !!this.itemMD;
73
+ }
74
+
86
75
  get urlParams(): URLSearchParams {
87
76
  return new URLSearchParams(location.search.slice(1));
88
77
  }
89
78
 
79
+ /** Fullscreen */
90
80
  get showFullscreen(): boolean {
91
81
  return this.urlParams.get('view') === 'theater';
92
82
  }
93
83
 
94
- /**
95
- * sets url query param `view=theater` to toggle fullscreen
96
- */
84
+ /** sets url query param `view=theater` to toggle fullscreen */
97
85
  toggleFS(): void {
98
86
  if (this.urlParams.get('view')) {
99
87
  location.search = '';
@@ -102,6 +90,16 @@ export class AppRoot extends LitElement {
102
90
  }
103
91
  }
104
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;
98
+ }
99
+ }
100
+ /** End fullscreen */
101
+
102
+ /** Views */
105
103
  get theaterBlock(): TemplateResult {
106
104
  return html`
107
105
  <ia-item-navigator
@@ -110,6 +108,7 @@ export class AppRoot extends LitElement {
110
108
  .modal=${this.modalMgr}
111
109
  .sharedObserver=${this.sharedObserver}
112
110
  @ViewportInFullScreen=${this.toggleFS}
111
+ .viewportInFullscreen=${this.fullscreen}
113
112
  ></ia-item-navigator>
114
113
  `;
115
114
  }
@@ -133,6 +132,11 @@ export class AppRoot extends LitElement {
133
132
  color: #222;
134
133
  }
135
134
 
135
+ :host([fullscreen]) {
136
+ height: 100vh;
137
+ width: 100vw;
138
+ }
139
+
136
140
  :host,
137
141
  ia-item-navigator {
138
142
  display: block;
package/demo/index.html CHANGED
@@ -58,6 +58,7 @@
58
58
  <body>
59
59
  <app-root></app-root>
60
60
  <script type="module">
61
+ /* eslint-disable no-restricted-globals */
61
62
  const params = new URLSearchParams(location.search.slice(1));
62
63
  if (params.get('view') === 'theater') {
63
64
  const body = document.querySelector('body');
@@ -1,35 +1,32 @@
1
1
  import { LitElement, TemplateResult } from 'lit-element';
2
2
  import { MetadataResponse } from '@internetarchive/search-service';
3
3
  import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
4
- import '../src/item-navigator';
4
+ import { ModalManager } from '@internetarchive/modal-manager';
5
5
  import '@internetarchive/modal-manager';
6
+ import '../src/item-navigator';
6
7
  export declare class AppRoot extends LitElement {
7
8
  /**
8
9
  * Example controller to connect to `<ia-item-navigator>`
9
10
  */
10
11
  itemMD: MetadataResponse | undefined;
11
- bookManifest: {};
12
12
  encodedManifest: string;
13
13
  private itemNav;
14
- modalMgr: any;
14
+ modalMgr: ModalManager;
15
15
  sharedObserver: SharedResizeObserver;
16
+ fullscreen: boolean | null;
16
17
  firstUpdated(): void;
17
- /**
18
- * @inheritdoc
19
- */
20
18
  updated(changed: any): void;
21
- get theaterReady(): boolean;
22
- /**
23
- * toggles attr: `<ia-item-navigator viewportinfullscreen>`
24
- */
25
- fullscreenCheck(): void;
26
19
  fetchItemMD(): Promise<void>;
20
+ get theaterReady(): boolean;
27
21
  get urlParams(): URLSearchParams;
22
+ /** Fullscreen */
28
23
  get showFullscreen(): boolean;
29
- /**
30
- * sets url query param `view=theater` to toggle fullscreen
31
- */
24
+ /** sets url query param `view=theater` to toggle fullscreen */
32
25
  toggleFS(): void;
26
+ /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
27
+ fullscreenCheck(): void;
28
+ /** End fullscreen */
29
+ /** Views */
33
30
  get theaterBlock(): TemplateResult;
34
31
  get placeholder(): TemplateResult;
35
32
  render(): TemplateResult;
@@ -3,9 +3,8 @@ import { __decorate } from "tslib";
3
3
  import { html, css, LitElement, customElement, property, query, } from 'lit-element';
4
4
  import { SearchService, } from '@internetarchive/search-service';
5
5
  import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
6
- import '../src/item-navigator';
7
- // import { ItemNavigator } from '../src/item-navigator';
8
6
  import '@internetarchive/modal-manager';
7
+ import '../src/item-navigator';
9
8
  let AppRoot = class AppRoot extends LitElement {
10
9
  constructor() {
11
10
  super(...arguments);
@@ -13,34 +12,20 @@ let AppRoot = class AppRoot extends LitElement {
13
12
  * Example controller to connect to `<ia-item-navigator>`
14
13
  */
15
14
  this.itemMD = undefined;
16
- this.bookManifest = {};
17
15
  this.encodedManifest = '';
18
16
  this.sharedObserver = new SharedResizeObserver();
17
+ this.fullscreen = null;
19
18
  }
20
19
  firstUpdated() {
21
20
  this.fetchItemMD();
22
21
  console.log('<app-root> component has loaded', this.modalMgr, this.sharedObserver);
23
22
  }
24
- /**
25
- * @inheritdoc
26
- */
27
23
  updated(changed) {
28
24
  console.log('changed', changed);
29
25
  if (changed.has('itemMD')) {
30
26
  this.fullscreenCheck();
31
27
  }
32
28
  }
33
- get theaterReady() {
34
- return this.modalMgr && this.sharedObserver && this.itemMD;
35
- }
36
- /**
37
- * toggles attr: `<ia-item-navigator viewportinfullscreen>`
38
- */
39
- fullscreenCheck() {
40
- if (this.showFullscreen && this.itemNav) {
41
- this.itemNav.viewportInFullscreen = true;
42
- }
43
- }
44
29
  async fetchItemMD() {
45
30
  const searchService = SearchService.default;
46
31
  const mdResponse = await searchService.fetchMetadata('ux-team-books');
@@ -52,15 +37,17 @@ let AppRoot = class AppRoot extends LitElement {
52
37
  console.log('mdResponse.success', JSON.stringify(mdResponse.success));
53
38
  this.itemMD = mdResponse.success;
54
39
  }
40
+ get theaterReady() {
41
+ return this.modalMgr && this.sharedObserver && !!this.itemMD;
42
+ }
55
43
  get urlParams() {
56
44
  return new URLSearchParams(location.search.slice(1));
57
45
  }
46
+ /** Fullscreen */
58
47
  get showFullscreen() {
59
48
  return this.urlParams.get('view') === 'theater';
60
49
  }
61
- /**
62
- * sets url query param `view=theater` to toggle fullscreen
63
- */
50
+ /** sets url query param `view=theater` to toggle fullscreen */
64
51
  toggleFS() {
65
52
  if (this.urlParams.get('view')) {
66
53
  location.search = '';
@@ -69,6 +56,15 @@ let AppRoot = class AppRoot extends LitElement {
69
56
  location.search = 'view=theater';
70
57
  }
71
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 */
72
68
  get theaterBlock() {
73
69
  return html `
74
70
  <ia-item-navigator
@@ -77,6 +73,7 @@ let AppRoot = class AppRoot extends LitElement {
77
73
  .modal=${this.modalMgr}
78
74
  .sharedObserver=${this.sharedObserver}
79
75
  @ViewportInFullScreen=${this.toggleFS}
76
+ .viewportInFullscreen=${this.fullscreen}
80
77
  ></ia-item-navigator>
81
78
  `;
82
79
  }
@@ -98,6 +95,11 @@ AppRoot.styles = css `
98
95
  color: #222;
99
96
  }
100
97
 
98
+ :host([fullscreen]) {
99
+ height: 100vh;
100
+ width: 100vw;
101
+ }
102
+
101
103
  :host,
102
104
  ia-item-navigator {
103
105
  display: block;
@@ -124,9 +126,6 @@ AppRoot.styles = css `
124
126
  __decorate([
125
127
  property({ type: Object })
126
128
  ], AppRoot.prototype, "itemMD", void 0);
127
- __decorate([
128
- property({ type: Object })
129
- ], AppRoot.prototype, "bookManifest", void 0);
130
129
  __decorate([
131
130
  property({ type: String })
132
131
  ], AppRoot.prototype, "encodedManifest", void 0);
@@ -139,6 +138,9 @@ __decorate([
139
138
  __decorate([
140
139
  property({ attribute: false })
141
140
  ], AppRoot.prototype, "sharedObserver", void 0);
141
+ __decorate([
142
+ property({ type: Boolean, reflect: true, attribute: true })
143
+ ], AppRoot.prototype, "fullscreen", void 0);
142
144
  AppRoot = __decorate([
143
145
  customElement('app-root')
144
146
  ], AppRoot);
@@ -1 +1 @@
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 '../src/item-navigator';\n// import { ItemNavigator } from '../src/item-navigator';\n\nimport '@internetarchive/modal-manager';\n\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: Object }) bookManifest = {};\n\n @property({ type: String }) encodedManifest = '';\n\n @query('ia-item-navigator') private itemNav!: any;\n\n @query('modal-manager') modalMgr!: any;\n\n @property({ attribute: false }) sharedObserver = new SharedResizeObserver();\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 /**\n * @inheritdoc\n */\n updated(changed: any) {\n console.log('changed', changed);\n if (changed.has('itemMD')) {\n this.fullscreenCheck();\n }\n }\n\n get theaterReady(): boolean {\n return this.modalMgr && this.sharedObserver && this.itemMD;\n }\n\n /**\n * toggles attr: `<ia-item-navigator viewportinfullscreen>`\n */\n fullscreenCheck() {\n if (this.showFullscreen && this.itemNav) {\n this.itemNav.viewportInFullscreen = true;\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 urlParams(): URLSearchParams {\n return new URLSearchParams(location.search.slice(1));\n }\n\n get showFullscreen(): boolean {\n return this.urlParams.get('view') === 'theater';\n }\n\n /**\n * sets url query param `view=theater` to toggle fullscreen\n */\n toggleFS(): void {\n if (this.urlParams.get('view')) {\n location.search = '';\n } else {\n location.search = 'view=theater';\n }\n }\n\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 ></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,\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"]}
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"]}
@@ -1,12 +1,13 @@
1
1
  import { TemplateResult } from 'lit-html';
2
2
  import { MetadataResponse } from '@internetarchive/search-service';
3
+ export declare type MenuId = string;
3
4
  export interface IntMenuShortcut {
4
5
  icon: TemplateResult;
5
- id: string;
6
+ id: MenuId;
6
7
  }
7
8
  export interface IntMenuIconAndDetails extends IntMenuShortcut {
8
9
  icon: TemplateResult;
9
- id: string;
10
+ id: MenuId;
10
11
  label: string;
11
12
  menuDetails?: TemplateResult;
12
13
  selected?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"menu-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/menu-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\n\nexport interface IntMenuShortcut {\n icon: TemplateResult;\n id: string;\n}\n\nexport interface IntMenuIconAndDetails extends IntMenuShortcut {\n icon: TemplateResult;\n id: string;\n label: string;\n menuDetails?: TemplateResult;\n selected?: boolean;\n followable?: boolean;\n href?: string;\n}\n\nexport interface IntProviderArgs {\n item: MetadataResponse;\n baseHost: string;\n subPrefix: string;\n updated?: any;\n}\nexport interface IntMenuProvider\n extends IntProviderArgs,\n IntMenuIconAndDetails,\n IntMenuShortcut {}\n"]}
1
+ {"version":3,"file":"menu-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/menu-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\n\nexport type MenuId = string;\nexport interface IntMenuShortcut {\n icon: TemplateResult;\n id: MenuId;\n}\n\nexport interface IntMenuIconAndDetails extends IntMenuShortcut {\n icon: TemplateResult;\n id: MenuId;\n label: string;\n menuDetails?: TemplateResult;\n selected?: boolean;\n followable?: boolean;\n href?: string;\n}\n\nexport interface IntProviderArgs {\n item: MetadataResponse;\n baseHost: string;\n subPrefix: string;\n updated?: any;\n}\nexport interface IntMenuProvider\n extends IntProviderArgs,\n IntMenuIconAndDetails,\n IntMenuShortcut {}\n"]}
@@ -7,41 +7,47 @@ import { ModalManagerInterface } from '@internetarchive/modal-manager';
7
7
  import '@internetarchive/icon-ellipses/icon-ellipses';
8
8
  import './loader';
9
9
  import { IntManageSideMenuEvent, IntSetOpenMenuEvent, IntSetMenuContentsEvent, IntSetMenuShortcutsEvent, IntLoadingStateUpdatedEvent, IntManageFullscreenEvent } from './interfaces/event-interfaces';
10
- import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
10
+ import { IntMenuProvider, IntMenuShortcut, MenuId } from './interfaces/menu-interfaces';
11
11
  import './no-theater-available';
12
+ export declare enum ItemType {
13
+ BOOK = "bookreader"
14
+ }
12
15
  export declare class ItemNavigator extends LitElement implements SharedResizeObserverResizeHandlerInterface {
13
16
  item: MetadataResponse | undefined;
14
- itemType: string;
17
+ itemType?: ItemType;
15
18
  baseHost: string;
16
19
  signedIn: boolean;
17
20
  menuContents: IntMenuProvider[];
18
21
  menuShortcuts: IntMenuShortcut[];
19
22
  viewportInFullscreen: boolean | null;
20
23
  menuOpened: boolean;
21
- openMenu: string;
24
+ openMenu: MenuId | '';
22
25
  modal?: ModalManagerInterface;
23
26
  sharedObserver?: SharedResizeObserver;
24
- loaded: boolean | null;
27
+ loaded: true | null;
25
28
  openMenuState: 'overlay' | 'shift';
26
29
  private frame;
27
30
  private headerSlot;
28
31
  disconnectedCallback(): void;
29
- firstUpdated(): void;
30
32
  updated(changed: PropertyValues): void;
33
+ /** Shared observer */
31
34
  handleResize(entry: ResizeObserverEntry): void;
32
- private startResizeObserver;
35
+ private setResizeObserver;
36
+ private removeResizeObserver;
37
+ get resizeObserverConfig(): {
38
+ handler: SharedResizeObserverResizeHandlerInterface;
39
+ target: Element;
40
+ };
41
+ /** End shared observer */
33
42
  get loaderTitle(): "" | "Internet Archive";
34
43
  get readerHeightStyle(): string;
35
- handleHeaderSlotChange(e: Event): void;
36
44
  get loadingArea(): TemplateResult;
37
45
  render(): TemplateResult;
38
46
  get noTheaterView(): TemplateResult;
39
47
  get theaterSlot(): TemplateResult;
40
- get BooksViewer(): TemplateResult;
48
+ get booksViewer(): TemplateResult;
41
49
  get renderViewport(): TemplateResult | typeof nothing;
42
50
  loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void;
43
- /** Creates modal DOM & attaches to `<body>` */
44
- private createModal;
45
51
  /** Fullscreen Management */
46
52
  manageViewportFullscreen(e: IntManageFullscreenEvent): void;
47
53
  /** End Fullscreen Management */
@@ -58,7 +64,7 @@ export declare class ItemNavigator extends LitElement implements SharedResizeObs
58
64
  get renderSideMenu(): TemplateResult;
59
65
  /** End Side menu */
60
66
  /** Menu Shortcuts */
61
- openShortcut(selectedMenuId?: string): void;
67
+ openShortcut(selectedMenuId?: MenuId): void;
62
68
  get shortcuts(): TemplateResult;
63
69
  /** End Menu Shortcuts */
64
70
  /** Misc Render */
@@ -2,18 +2,18 @@ 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 { SharedResizeObserver, } from '@internetarchive/shared-resize-observer';
6
- // @ts-ignore
7
- import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
8
5
  import '@internetarchive/ia-menu-slider';
9
6
  import '@internetarchive/icon-ellipses/icon-ellipses';
10
7
  import './loader';
11
8
  import './no-theater-available';
9
+ export var ItemType;
10
+ (function (ItemType) {
11
+ ItemType["BOOK"] = "bookreader";
12
+ })(ItemType || (ItemType = {}));
12
13
  let ItemNavigator = class ItemNavigator extends LitElement {
13
14
  constructor() {
14
15
  super(...arguments);
15
16
  this.item = undefined;
16
- this.itemType = '';
17
17
  this.baseHost = 'archive.org';
18
18
  this.signedIn = false;
19
19
  this.menuContents = [];
@@ -25,30 +25,14 @@ let ItemNavigator = class ItemNavigator extends LitElement {
25
25
  this.openMenuState = 'shift';
26
26
  }
27
27
  disconnectedCallback() {
28
- var _a;
29
- (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver({
30
- handler: this,
31
- target: this.frame,
32
- });
33
- }
34
- firstUpdated() {
35
- if (!this.modal) {
36
- this.createModal();
37
- }
38
- this.startResizeObserver();
28
+ this.removeResizeObserver();
39
29
  }
40
30
  updated(changed) {
41
- if (changed.has('modal')) {
42
- if (!this.modal) {
43
- this.createModal();
44
- }
45
- }
46
31
  if (changed.has('sharedObserver')) {
47
- if (!this.sharedObserver) {
48
- this.startResizeObserver();
49
- }
32
+ this.setResizeObserver();
50
33
  }
51
34
  }
35
+ /** Shared observer */
52
36
  handleResize(entry) {
53
37
  const { width } = entry.contentRect;
54
38
  if (width <= 600) {
@@ -57,15 +41,22 @@ let ItemNavigator = class ItemNavigator extends LitElement {
57
41
  }
58
42
  this.openMenuState = 'shift';
59
43
  }
60
- startResizeObserver() {
61
- if (!this.sharedObserver) {
62
- this.sharedObserver = new SharedResizeObserver();
63
- }
64
- this.sharedObserver.addObserver({
44
+ setResizeObserver() {
45
+ var _a;
46
+ this.removeResizeObserver();
47
+ (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.addObserver(this.resizeObserverConfig);
48
+ }
49
+ removeResizeObserver() {
50
+ var _a;
51
+ (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver(this.resizeObserverConfig);
52
+ }
53
+ get resizeObserverConfig() {
54
+ return {
65
55
  handler: this,
66
56
  target: this.frame,
67
- });
57
+ };
68
58
  }
59
+ /** End shared observer */
69
60
  get loaderTitle() {
70
61
  return this.viewportInFullscreen ? 'Internet Archive' : '';
71
62
  }
@@ -74,9 +65,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
74
65
  const calcFSHeight = `calc(100vh - ${(_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.offsetHeight}px)`;
75
66
  return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
76
67
  }
77
- handleHeaderSlotChange(e) {
78
- console.log('~~~~ handleHeaderSlotChange', e);
79
- }
80
68
  get loadingArea() {
81
69
  return html `
82
70
  <div class="loading-area">
@@ -92,10 +80,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
92
80
  <div id="frame" class=${`${this.menuClass}`}>
93
81
  <div class="menu-and-reader">
94
82
  ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
95
- <slot
96
- name="theater-header"
97
- @slotchange=${this.handleHeaderSlotChange}
98
- ></slot>
83
+ <slot name="theater-header"></slot>
99
84
  <div
100
85
  id="reader"
101
86
  class=${displayReaderClass}
@@ -120,7 +105,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
120
105
  <slot name="theater-main" style=${this.readerHeightStyle}></slot>
121
106
  `;
122
107
  }
123
- get BooksViewer() {
108
+ get booksViewer() {
124
109
  const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
125
110
  return html `
126
111
  <book-navigator
@@ -146,21 +131,15 @@ let ItemNavigator = class ItemNavigator extends LitElement {
146
131
  if (!this.item) {
147
132
  return nothing;
148
133
  }
149
- if (this.itemType === 'bookreader') {
150
- return this.BooksViewer;
134
+ if (this.itemType === ItemType.BOOK) {
135
+ return this.booksViewer;
151
136
  }
152
137
  return this.noTheaterView;
153
138
  }
154
139
  loadingStateUpdated(e) {
155
140
  const { loaded } = e.detail;
156
- this.loaded = !!loaded;
157
- }
158
- /** Creates modal DOM & attaches to `<body>` */
159
- createModal() {
160
- this.modal = document.createElement('modal-manager');
161
- document.body.appendChild(this.modal);
141
+ this.loaded = loaded || null;
162
142
  }
163
- /* End Modal management */
164
143
  /** Fullscreen Management */
165
144
  manageViewportFullscreen(e) {
166
145
  const fullscreenStatus = !!e.detail.isFullScreen;
@@ -173,7 +152,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
173
152
  /** End Fullscreen Management */
174
153
  /** Side menu */
175
154
  get shouldRenderMenu() {
176
- return !!this.menuContents.length;
155
+ return true;
156
+ // return !!this.menuContents.length;
177
157
  }
178
158
  toggleMenu() {
179
159
  this.menuOpened = !this.menuOpened;
@@ -469,7 +449,7 @@ __decorate([
469
449
  property({ type: Array })
470
450
  ], ItemNavigator.prototype, "menuShortcuts", void 0);
471
451
  __decorate([
472
- property({ type: Boolean, reflect: true })
452
+ property({ type: Boolean, reflect: true, attribute: true })
473
453
  ], ItemNavigator.prototype, "viewportInFullscreen", void 0);
474
454
  __decorate([
475
455
  property({ type: Boolean })
@@ -484,7 +464,7 @@ __decorate([
484
464
  property({ attribute: false })
485
465
  ], ItemNavigator.prototype, "sharedObserver", void 0);
486
466
  __decorate([
487
- property({ reflect: true, attribute: true })
467
+ property({ type: Boolean, reflect: true, attribute: true })
488
468
  ], ItemNavigator.prototype, "loaded", void 0);
489
469
  __decorate([
490
470
  state()
@@ -499,5 +479,4 @@ ItemNavigator = __decorate([
499
479
  customElement('ia-item-navigator')
500
480
  ], ItemNavigator);
501
481
  export { ItemNavigator };
502
- customElements.define('ia-menu-slider', IAMenuSlider);
503
482
  //# sourceMappingURL=item-navigator.js.map