@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 +29 -19
- package/demo/app-root.ts +31 -27
- package/demo/index.html +1 -0
- package/dist/demo/app-root.d.ts +11 -14
- package/dist/demo/app-root.js +25 -23
- package/dist/demo/app-root.js.map +1 -1
- package/dist/src/interfaces/menu-interfaces.d.ts +3 -2
- package/dist/src/interfaces/menu-interfaces.js.map +1 -1
- package/dist/src/item-navigator.d.ts +17 -11
- package/dist/src/item-navigator.js +29 -50
- package/dist/src/item-navigator.js.map +1 -1
- package/dist/src/no-theater-available.js.map +1 -1
- package/dist/test/ia-item-navigator.test.js +32 -23
- package/dist/test/ia-item-navigator.test.js.map +1 -1
- package/package.json +2 -2
- package/src/interfaces/menu-interfaces.ts +3 -2
- package/src/item-navigator.ts +44 -62
- package/src/no-theater-available.ts +2 -4
- package/test/ia-item-navigator.test.ts +42 -31
- package/demo/demo-book-manifest.json +0 -1163
- package/src/item-inspector/files-by-type/files-by-type-provider.ts +0 -43
- package/src/item-inspector/files-by-type/ia-files-by-type.ts +0 -100
- package/src/item-inspector/share-provider.ts +0 -51
- package/src/item-inspector/visual-mod-provider.ts +0 -65
- package/src/item-navigator-js.js +0 -372
package/README.md
CHANGED
@@ -1,21 +1,37 @@
|
|
1
|
-
[](https://travis-ci.com/internetarchive/iaux-item-navigator) [](https://codecov.io/gh/internetarchive/iaux-item-navigator)
|
2
2
|
|
3
|
-
# Internet Archive
|
3
|
+
# Internet Archive Item Navigator - theater menu manager
|
4
4
|
|
5
|
-
|
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
|
-
|
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
|
-
|
10
|
-
|
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
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
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 '
|
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!:
|
29
|
+
@query('ia-item-navigator') private itemNav!: ItemNavigator;
|
33
30
|
|
34
|
-
@query('modal-manager') modalMgr!:
|
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');
|
package/dist/demo/app-root.d.ts
CHANGED
@@ -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 '
|
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:
|
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;
|
package/dist/demo/app-root.js
CHANGED
@@ -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":";AAAA,0CAA0C;AAC1C,OAAO,EACL,IAAI,EACJ,GAAG,EACH,UAAU,EACV,aAAa,EACb,QAAQ,EACR,KAAK,GAEN,MAAM,aAAa,CAAC;AACrB,OAAO,EAEL,aAAa,GACd,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;
|
1
|
+
{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":";AAAA,0CAA0C;AAC1C,OAAO,EACL,IAAI,EACJ,GAAG,EACH,UAAU,EACV,aAAa,EACb,QAAQ,EACR,KAAK,GAEN,MAAM,aAAa,CAAC;AACrB,OAAO,EAEL,aAAa,GACd,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAE/E,OAAO,gCAAgC,CAAC;AAExC,OAAO,uBAAuB,CAAC;AAE/B,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QACE;;WAEG;QACyB,WAAM,GAAiC,SAAS,CAAC;QAEjD,oBAAe,GAAG,EAAE,CAAC;QAMjB,mBAAc,GAAG,IAAI,oBAAoB,EAAE,CAAC;QAEf,eAAU,GAE5D,IAAI,CAAC;IA8HlB,CAAC;IA5HC,YAAY;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,OAAO,CAAC,GAAG,CACT,iCAAiC,EACjC,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,cAAc,CACpB,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAY;QAClB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAChC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;IACH,CAAC;IAED,KAAK,CAAC,WAAW;QACf,MAAM,aAAa,GAAG,aAAa,CAAC,OAAO,CAAC;QAC5C,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,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;IACnC,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;IAC/D,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,iBAAiB;IACjB,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAClD,CAAC;IAED,+DAA+D;IAC/D,QAAQ;QACN,IAAI,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC9B,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC;SACtB;aAAM;YACL,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;SAClC;IACH,CAAC;IAED,+DAA+D;IAC/D,eAAe;QACb,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,EAAE;YACvC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,4CAA4C;SAC7C;IACH,CAAC;IACD,qBAAqB;IAErB,YAAY;IACZ,IAAI,YAAY;QACd,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,MAAM;iBACV,IAAI,CAAC,QAAQ;0BACJ,IAAI,CAAC,cAAc;gCACb,IAAI,CAAC,QAAQ;gCACb,IAAI,CAAC,UAAU;;KAE1C,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA,iDAAiD,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;QACzE,OAAO,IAAI,CAAA;;QAEP,OAAO;;KAEV,CAAC;IACJ,CAAC;CAoCF,CAAA;AAlCQ,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiClB,CAAC;AAzI0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAkD;AAEjD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AAErB;IAA3B,KAAK,CAAC,mBAAmB,CAAC;wCAAiC;AAEpC;IAAvB,KAAK,CAAC,eAAe,CAAC;yCAAyB;AAEhB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CAA6C;AAEf;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;2CAE5C;AAhBL,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA8InB;SA9IY,OAAO","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:
|
6
|
+
id: MenuId;
|
6
7
|
}
|
7
8
|
export interface IntMenuIconAndDetails extends IntMenuShortcut {
|
8
9
|
icon: TemplateResult;
|
9
|
-
id:
|
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:
|
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
|
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:
|
24
|
+
openMenu: MenuId | '';
|
22
25
|
modal?: ModalManagerInterface;
|
23
26
|
sharedObserver?: SharedResizeObserver;
|
24
|
-
loaded:
|
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
|
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
|
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?:
|
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
|
-
|
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
|
-
|
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
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
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
|
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 ===
|
150
|
-
return this.
|
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 =
|
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
|
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
|