@internetarchive/ia-item-navigator 0.0.0-a9 → 0.0.2-a2
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 +37 -31
- package/demo/index.html +1 -0
- package/dist/demo/app-root.d.ts +11 -15
- package/dist/demo/app-root.js +26 -26
- package/dist/demo/app-root.js.map +1 -1
- package/dist/src/interfaces/custom-theater-interface.d.ts +20 -0
- package/dist/src/interfaces/custom-theater-interface.js +2 -0
- package/dist/src/interfaces/custom-theater-interface.js.map +1 -0
- package/dist/src/interfaces/event-interfaces.d.ts +11 -11
- package/dist/src/interfaces/event-interfaces.js.map +1 -1
- package/dist/src/interfaces/menu-interfaces.d.ts +6 -7
- package/dist/src/interfaces/menu-interfaces.js.map +1 -1
- package/dist/src/interfaces/nav-controller-interface.d.ts +11 -6
- package/dist/src/interfaces/nav-controller-interface.js.map +1 -1
- package/dist/src/item-inspector/item-inspector.d.ts +0 -47
- package/dist/src/item-inspector/item-inspector.js +253 -271
- package/dist/src/item-inspector/item-inspector.js.map +1 -1
- package/dist/src/item-navigator.d.ts +41 -28
- package/dist/src/item-navigator.js +96 -113
- package/dist/src/item-navigator.js.map +1 -1
- package/dist/src/no-theater-available.d.ts +9 -0
- package/dist/src/no-theater-available.js +79 -0
- package/dist/src/no-theater-available.js.map +1 -0
- package/dist/test/book-nav-stub.d.ts +22 -0
- package/dist/test/book-nav-stub.js +49 -0
- package/dist/test/book-nav-stub.js.map +1 -0
- package/dist/test/ia-item-navigator.test.d.ts +1 -0
- package/dist/test/ia-item-navigator.test.js +279 -131
- package/dist/test/ia-item-navigator.test.js.map +1 -1
- package/dist/test/ia-stub.d.ts +22 -0
- package/dist/test/ia-stub.js +34 -3
- package/dist/test/ia-stub.js.map +1 -1
- package/dist/test/no-theater-available.test.d.ts +1 -0
- package/dist/test/no-theater-available.test.js +27 -0
- package/dist/test/no-theater-available.test.js.map +1 -0
- package/package.json +4 -3
- package/src/interfaces/custom-theater-interface.ts +28 -0
- package/src/interfaces/event-interfaces.ts +15 -11
- package/src/interfaces/menu-interfaces.ts +9 -10
- package/src/item-navigator.ts +133 -144
- package/src/no-theater-available.ts +85 -0
- package/test/book-nav-stub.ts +47 -0
- package/test/ia-item-navigator.test.ts +365 -156
- package/test/ia-stub.ts +78 -2
- package/test/no-theater-available.test.ts +32 -0
- package/demo/demo-book-manifest.json +0 -1163
- package/src/interfaces/nav-controller-interface.ts +0 -18
- 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/item-inspector.ts +0 -296
- 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
@@ -8,17 +8,15 @@ import {
|
|
8
8
|
query,
|
9
9
|
TemplateResult,
|
10
10
|
} from 'lit-element';
|
11
|
-
import '../src/item-inspector/item-inspector';
|
12
11
|
import {
|
13
12
|
MetadataResponse,
|
14
13
|
SearchService,
|
15
14
|
} from '@internetarchive/search-service';
|
16
15
|
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
17
|
-
import '
|
18
|
-
// import { ItemNavigator } from '../src/item-navigator';
|
19
|
-
|
16
|
+
import { ModalManager } from '@internetarchive/modal-manager';
|
20
17
|
import '@internetarchive/modal-manager';
|
21
|
-
|
18
|
+
import { ItemNavigator } from '../src/item-navigator';
|
19
|
+
import '../src/item-navigator';
|
22
20
|
@customElement('app-root')
|
23
21
|
export class AppRoot extends LitElement {
|
24
22
|
/**
|
@@ -26,24 +24,27 @@ export class AppRoot extends LitElement {
|
|
26
24
|
*/
|
27
25
|
@property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;
|
28
26
|
|
29
|
-
@property({ type: Object }) bookManifest = {};
|
30
|
-
|
31
27
|
@property({ type: String }) encodedManifest = '';
|
32
28
|
|
33
|
-
@query('ia-item-navigator') private itemNav!:
|
29
|
+
@query('ia-item-navigator') private itemNav!: ItemNavigator;
|
34
30
|
|
35
|
-
@query('modal-manager') modalMgr!:
|
31
|
+
@query('modal-manager') modalMgr!: ModalManager;
|
36
32
|
|
37
33
|
@property({ attribute: false }) sharedObserver = new SharedResizeObserver();
|
38
34
|
|
35
|
+
@property({ type: Boolean, reflect: true, attribute: true }) fullscreen:
|
36
|
+
| boolean
|
37
|
+
| null = null;
|
38
|
+
|
39
39
|
firstUpdated() {
|
40
40
|
this.fetchItemMD();
|
41
|
-
console.log(
|
41
|
+
console.log(
|
42
|
+
'<app-root> component has loaded',
|
43
|
+
this.modalMgr,
|
44
|
+
this.sharedObserver
|
45
|
+
);
|
42
46
|
}
|
43
47
|
|
44
|
-
/**
|
45
|
-
* @inheritdoc
|
46
|
-
*/
|
47
48
|
updated(changed: any) {
|
48
49
|
console.log('changed', changed);
|
49
50
|
if (changed.has('itemMD')) {
|
@@ -51,23 +52,9 @@ export class AppRoot extends LitElement {
|
|
51
52
|
}
|
52
53
|
}
|
53
54
|
|
54
|
-
get theaterReady(): boolean {
|
55
|
-
return this.modalMgr && this.sharedObserver && this.itemMD;
|
56
|
-
}
|
57
|
-
|
58
|
-
/**
|
59
|
-
* toggles attr: `<ia-item-navigator viewportinfullscreen>`
|
60
|
-
*/
|
61
|
-
fullscreenCheck() {
|
62
|
-
if (this.showFullscreen && this.itemNav) {
|
63
|
-
this.itemNav.viewportInFullscreen = true;
|
64
|
-
}
|
65
|
-
}
|
66
|
-
|
67
55
|
async fetchItemMD() {
|
68
56
|
const searchService = SearchService.default;
|
69
|
-
|
70
|
-
const mdResponse = await searchService.fetchMetadata('goody');
|
57
|
+
const mdResponse = await searchService.fetchMetadata('ux-team-books');
|
71
58
|
|
72
59
|
if (mdResponse.error) {
|
73
60
|
console.log('MD Fetch error: ', mdResponse.error);
|
@@ -81,17 +68,20 @@ export class AppRoot extends LitElement {
|
|
81
68
|
this.itemMD = mdResponse.success;
|
82
69
|
}
|
83
70
|
|
71
|
+
get theaterReady(): boolean {
|
72
|
+
return this.modalMgr && this.sharedObserver && !!this.itemMD;
|
73
|
+
}
|
74
|
+
|
84
75
|
get urlParams(): URLSearchParams {
|
85
76
|
return new URLSearchParams(location.search.slice(1));
|
86
77
|
}
|
87
78
|
|
79
|
+
/** Fullscreen */
|
88
80
|
get showFullscreen(): boolean {
|
89
81
|
return this.urlParams.get('view') === 'theater';
|
90
82
|
}
|
91
83
|
|
92
|
-
/**
|
93
|
-
* sets url query param `view=theater` to toggle fullscreen
|
94
|
-
*/
|
84
|
+
/** sets url query param `view=theater` to toggle fullscreen */
|
95
85
|
toggleFS(): void {
|
96
86
|
if (this.urlParams.get('view')) {
|
97
87
|
location.search = '';
|
@@ -100,6 +90,16 @@ export class AppRoot extends LitElement {
|
|
100
90
|
}
|
101
91
|
}
|
102
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 */
|
103
103
|
get theaterBlock(): TemplateResult {
|
104
104
|
return html`
|
105
105
|
<ia-item-navigator
|
@@ -108,6 +108,7 @@ export class AppRoot extends LitElement {
|
|
108
108
|
.modal=${this.modalMgr}
|
109
109
|
.sharedObserver=${this.sharedObserver}
|
110
110
|
@ViewportInFullScreen=${this.toggleFS}
|
111
|
+
.viewportInFullscreen=${this.fullscreen}
|
111
112
|
></ia-item-navigator>
|
112
113
|
`;
|
113
114
|
}
|
@@ -131,6 +132,11 @@ export class AppRoot extends LitElement {
|
|
131
132
|
color: #222;
|
132
133
|
}
|
133
134
|
|
135
|
+
:host([fullscreen]) {
|
136
|
+
height: 100vh;
|
137
|
+
width: 100vw;
|
138
|
+
}
|
139
|
+
|
134
140
|
:host,
|
135
141
|
ia-item-navigator {
|
136
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,36 +1,32 @@
|
|
1
1
|
import { LitElement, TemplateResult } from 'lit-element';
|
2
|
-
import '../src/item-inspector/item-inspector';
|
3
2
|
import { MetadataResponse } from '@internetarchive/search-service';
|
4
3
|
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
5
|
-
import '
|
4
|
+
import { ModalManager } from '@internetarchive/modal-manager';
|
6
5
|
import '@internetarchive/modal-manager';
|
6
|
+
import '../src/item-navigator';
|
7
7
|
export declare class AppRoot extends LitElement {
|
8
8
|
/**
|
9
9
|
* Example controller to connect to `<ia-item-navigator>`
|
10
10
|
*/
|
11
11
|
itemMD: MetadataResponse | undefined;
|
12
|
-
bookManifest: {};
|
13
12
|
encodedManifest: string;
|
14
13
|
private itemNav;
|
15
|
-
modalMgr:
|
14
|
+
modalMgr: ModalManager;
|
16
15
|
sharedObserver: SharedResizeObserver;
|
16
|
+
fullscreen: boolean | null;
|
17
17
|
firstUpdated(): void;
|
18
|
-
/**
|
19
|
-
* @inheritdoc
|
20
|
-
*/
|
21
18
|
updated(changed: any): void;
|
22
|
-
get theaterReady(): boolean;
|
23
|
-
/**
|
24
|
-
* toggles attr: `<ia-item-navigator viewportinfullscreen>`
|
25
|
-
*/
|
26
|
-
fullscreenCheck(): void;
|
27
19
|
fetchItemMD(): Promise<void>;
|
20
|
+
get theaterReady(): boolean;
|
28
21
|
get urlParams(): URLSearchParams;
|
22
|
+
/** Fullscreen */
|
29
23
|
get showFullscreen(): boolean;
|
30
|
-
/**
|
31
|
-
* sets url query param `view=theater` to toggle fullscreen
|
32
|
-
*/
|
24
|
+
/** sets url query param `view=theater` to toggle fullscreen */
|
33
25
|
toggleFS(): void;
|
26
|
+
/** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
|
27
|
+
fullscreenCheck(): void;
|
28
|
+
/** End fullscreen */
|
29
|
+
/** Views */
|
34
30
|
get theaterBlock(): TemplateResult;
|
35
31
|
get placeholder(): TemplateResult;
|
36
32
|
render(): TemplateResult;
|
package/dist/demo/app-root.js
CHANGED
@@ -1,12 +1,10 @@
|
|
1
1
|
import { __decorate } from "tslib";
|
2
2
|
/* eslint-disable no-restricted-globals */
|
3
3
|
import { html, css, LitElement, customElement, property, query, } from 'lit-element';
|
4
|
-
import '../src/item-inspector/item-inspector';
|
5
4
|
import { SearchService, } from '@internetarchive/search-service';
|
6
5
|
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
7
|
-
import '../src/item-navigator';
|
8
|
-
// import { ItemNavigator } from '../src/item-navigator';
|
9
6
|
import '@internetarchive/modal-manager';
|
7
|
+
import '../src/item-navigator';
|
10
8
|
let AppRoot = class AppRoot extends LitElement {
|
11
9
|
constructor() {
|
12
10
|
super(...arguments);
|
@@ -14,38 +12,23 @@ let AppRoot = class AppRoot extends LitElement {
|
|
14
12
|
* Example controller to connect to `<ia-item-navigator>`
|
15
13
|
*/
|
16
14
|
this.itemMD = undefined;
|
17
|
-
this.bookManifest = {};
|
18
15
|
this.encodedManifest = '';
|
19
16
|
this.sharedObserver = new SharedResizeObserver();
|
17
|
+
this.fullscreen = null;
|
20
18
|
}
|
21
19
|
firstUpdated() {
|
22
20
|
this.fetchItemMD();
|
23
21
|
console.log('<app-root> component has loaded', this.modalMgr, this.sharedObserver);
|
24
22
|
}
|
25
|
-
/**
|
26
|
-
* @inheritdoc
|
27
|
-
*/
|
28
23
|
updated(changed) {
|
29
24
|
console.log('changed', changed);
|
30
25
|
if (changed.has('itemMD')) {
|
31
26
|
this.fullscreenCheck();
|
32
27
|
}
|
33
28
|
}
|
34
|
-
get theaterReady() {
|
35
|
-
return this.modalMgr && this.sharedObserver && this.itemMD;
|
36
|
-
}
|
37
|
-
/**
|
38
|
-
* toggles attr: `<ia-item-navigator viewportinfullscreen>`
|
39
|
-
*/
|
40
|
-
fullscreenCheck() {
|
41
|
-
if (this.showFullscreen && this.itemNav) {
|
42
|
-
this.itemNav.viewportInFullscreen = true;
|
43
|
-
}
|
44
|
-
}
|
45
29
|
async fetchItemMD() {
|
46
30
|
const searchService = SearchService.default;
|
47
|
-
|
48
|
-
const mdResponse = await searchService.fetchMetadata('goody');
|
31
|
+
const mdResponse = await searchService.fetchMetadata('ux-team-books');
|
49
32
|
if (mdResponse.error) {
|
50
33
|
console.log('MD Fetch error: ', mdResponse.error);
|
51
34
|
window.confirm('There was an error fetching response, please check dev console');
|
@@ -54,15 +37,17 @@ let AppRoot = class AppRoot extends LitElement {
|
|
54
37
|
console.log('mdResponse.success', JSON.stringify(mdResponse.success));
|
55
38
|
this.itemMD = mdResponse.success;
|
56
39
|
}
|
40
|
+
get theaterReady() {
|
41
|
+
return this.modalMgr && this.sharedObserver && !!this.itemMD;
|
42
|
+
}
|
57
43
|
get urlParams() {
|
58
44
|
return new URLSearchParams(location.search.slice(1));
|
59
45
|
}
|
46
|
+
/** Fullscreen */
|
60
47
|
get showFullscreen() {
|
61
48
|
return this.urlParams.get('view') === 'theater';
|
62
49
|
}
|
63
|
-
/**
|
64
|
-
* sets url query param `view=theater` to toggle fullscreen
|
65
|
-
*/
|
50
|
+
/** sets url query param `view=theater` to toggle fullscreen */
|
66
51
|
toggleFS() {
|
67
52
|
if (this.urlParams.get('view')) {
|
68
53
|
location.search = '';
|
@@ -71,6 +56,15 @@ let AppRoot = class AppRoot extends LitElement {
|
|
71
56
|
location.search = 'view=theater';
|
72
57
|
}
|
73
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 */
|
74
68
|
get theaterBlock() {
|
75
69
|
return html `
|
76
70
|
<ia-item-navigator
|
@@ -79,6 +73,7 @@ let AppRoot = class AppRoot extends LitElement {
|
|
79
73
|
.modal=${this.modalMgr}
|
80
74
|
.sharedObserver=${this.sharedObserver}
|
81
75
|
@ViewportInFullScreen=${this.toggleFS}
|
76
|
+
.viewportInFullscreen=${this.fullscreen}
|
82
77
|
></ia-item-navigator>
|
83
78
|
`;
|
84
79
|
}
|
@@ -100,6 +95,11 @@ AppRoot.styles = css `
|
|
100
95
|
color: #222;
|
101
96
|
}
|
102
97
|
|
98
|
+
:host([fullscreen]) {
|
99
|
+
height: 100vh;
|
100
|
+
width: 100vw;
|
101
|
+
}
|
102
|
+
|
103
103
|
:host,
|
104
104
|
ia-item-navigator {
|
105
105
|
display: block;
|
@@ -126,9 +126,6 @@ AppRoot.styles = css `
|
|
126
126
|
__decorate([
|
127
127
|
property({ type: Object })
|
128
128
|
], AppRoot.prototype, "itemMD", void 0);
|
129
|
-
__decorate([
|
130
|
-
property({ type: Object })
|
131
|
-
], AppRoot.prototype, "bookManifest", void 0);
|
132
129
|
__decorate([
|
133
130
|
property({ type: String })
|
134
131
|
], AppRoot.prototype, "encodedManifest", void 0);
|
@@ -141,6 +138,9 @@ __decorate([
|
|
141
138
|
__decorate([
|
142
139
|
property({ attribute: false })
|
143
140
|
], AppRoot.prototype, "sharedObserver", void 0);
|
141
|
+
__decorate([
|
142
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
143
|
+
], AppRoot.prototype, "fullscreen", void 0);
|
144
144
|
AppRoot = __decorate([
|
145
145
|
customElement('app-root')
|
146
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,
|
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 @@
|
|
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,38 +1,38 @@
|
|
1
|
-
import {
|
1
|
+
import { MenuProviderInterface, MenuShortcutInterface, MenuId } from './menu-interfaces';
|
2
2
|
/** Toggles Menu && Sets open panel */
|
3
|
-
export interface
|
3
|
+
export interface ToggleSideMenuOpenEvent extends CustomEvent {
|
4
4
|
type: 'updateSideMenu';
|
5
5
|
detail: {
|
6
|
-
menuId:
|
6
|
+
menuId: MenuId | undefined | '';
|
7
7
|
action: 'open' | 'toggle' | '';
|
8
8
|
};
|
9
9
|
}
|
10
10
|
/** Sets open panel */
|
11
|
-
export interface
|
11
|
+
export interface ToggleSidePanelOpenEvent extends CustomEvent {
|
12
12
|
type: 'menuTypeSelected';
|
13
13
|
detail: {
|
14
|
-
id:
|
14
|
+
id: MenuId | '';
|
15
15
|
};
|
16
16
|
}
|
17
17
|
/** Sets menu order that is displayed */
|
18
|
-
export interface
|
18
|
+
export interface SetSideMenuContentsEvent extends CustomEvent {
|
19
19
|
type: 'menuUpdated';
|
20
|
-
detail:
|
20
|
+
detail: MenuProviderInterface[];
|
21
21
|
}
|
22
22
|
/** Sets menu shortcuts that is displayed */
|
23
|
-
export interface
|
23
|
+
export interface SetSideMenuShortcutsEvent extends CustomEvent {
|
24
24
|
type: 'menuUpdated';
|
25
|
-
detail:
|
25
|
+
detail: MenuShortcutInterface[];
|
26
26
|
}
|
27
27
|
/** Toggles fullscreen mode */
|
28
|
-
export interface
|
28
|
+
export interface ManageFullscreenEvent extends CustomEvent {
|
29
29
|
type: 'ViewportInFullScreen';
|
30
30
|
detail: {
|
31
31
|
isFullScreen: boolean;
|
32
32
|
};
|
33
33
|
}
|
34
34
|
/** Toggles loading view */
|
35
|
-
export interface
|
35
|
+
export interface loadingStateUpdatedEvent extends CustomEvent {
|
36
36
|
type: 'loadingStateUpdated';
|
37
37
|
detail: {
|
38
38
|
loaded: boolean;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"event-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/event-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import {
|
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"]}
|
@@ -1,23 +1,22 @@
|
|
1
1
|
import { TemplateResult } from 'lit-html';
|
2
2
|
import { MetadataResponse } from '@internetarchive/search-service';
|
3
|
-
export
|
3
|
+
export declare type MenuId = string;
|
4
|
+
export interface MenuShortcutInterface {
|
4
5
|
icon: TemplateResult;
|
5
|
-
id:
|
6
|
+
id: MenuId;
|
6
7
|
}
|
7
|
-
export interface
|
8
|
-
icon: TemplateResult;
|
9
|
-
id: string;
|
8
|
+
export interface MenuDetailsInterface extends MenuShortcutInterface {
|
10
9
|
label: string;
|
11
10
|
menuDetails?: TemplateResult;
|
12
11
|
selected?: boolean;
|
13
12
|
followable?: boolean;
|
14
13
|
href?: string;
|
15
14
|
}
|
16
|
-
export interface
|
15
|
+
export interface MenuProviderBaseConfigInterface {
|
17
16
|
item: MetadataResponse;
|
18
17
|
baseHost: string;
|
19
18
|
subPrefix: string;
|
20
19
|
updated?: any;
|
21
20
|
}
|
22
|
-
export interface
|
21
|
+
export interface MenuProviderInterface extends MenuProviderBaseConfigInterface, MenuDetailsInterface, MenuShortcutInterface {
|
23
22
|
}
|
@@ -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
|
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 MenuShortcutInterface {\n icon: TemplateResult;\n id: MenuId;\n}\n\nexport interface MenuDetailsInterface extends MenuShortcutInterface {\n label: string;\n menuDetails?: TemplateResult;\n selected?: boolean;\n followable?: boolean;\n href?: string;\n}\n\nexport interface MenuProviderBaseConfigInterface {\n item: MetadataResponse;\n baseHost: string;\n subPrefix: string;\n updated?: any;\n}\nexport interface MenuProviderInterface\n extends MenuProviderBaseConfigInterface,\n MenuDetailsInterface,\n MenuShortcutInterface {}\n"]}
|
@@ -1,12 +1,17 @@
|
|
1
1
|
import { LitElement } from 'lit-element';
|
2
2
|
import { MetadataResponse } from '@internetarchive/search-service';
|
3
|
-
import {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
3
|
+
import { ModalManager } from '@internetarchive/modal-manager';
|
4
|
+
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
5
|
+
import { IntMenuProvider, IntMenuShortcut } from './menu-interfaces';
|
6
|
+
export interface CustomTheaterInterface extends LitElement {
|
7
|
+
baseHost?: string;
|
8
|
+
itemMD?: MetadataResponse;
|
9
|
+
menuProviders?: IntMenuProvider[];
|
10
|
+
menuShortcuts?: IntMenuShortcut[];
|
9
11
|
sideMenuOpen: boolean;
|
12
|
+
signedIn?: boolean | null;
|
13
|
+
sharedObserver?: SharedResizeObserver;
|
14
|
+
modal?: ModalManager;
|
10
15
|
emitLoadingStatusUpdate: (loaded: boolean) => void;
|
11
16
|
addMenuShortcut: (menuId: string) => void;
|
12
17
|
removeMenuShortcut: (menuId: string) => void;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nav-controller-interface.js","sourceRoot":"","sources":["../../../src/interfaces/nav-controller-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { LitElement } from 'lit-element';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport { IntMenuShortcut } from './menu-interfaces';\n\nexport interface
|
1
|
+
{"version":3,"file":"nav-controller-interface.js","sourceRoot":"","sources":["../../../src/interfaces/nav-controller-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 { IntMenuProvider, IntMenuShortcut } from './menu-interfaces';\n\nexport interface CustomTheaterInterface extends LitElement {\n baseHost?: string;\n itemMD?: MetadataResponse;\n menuProviders?: IntMenuProvider[];\n menuShortcuts?: IntMenuShortcut[];\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,47 +0,0 @@
|
|
1
|
-
import { LitElement } from 'lit-element';
|
2
|
-
import { MetadataResponse } from '@internetarchive/search-service';
|
3
|
-
import { ModalManagerInterface } from '@internetarchive/modal-manager';
|
4
|
-
import { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
|
5
|
-
import { IntNavController } from '../interfaces/nav-controller-interface';
|
6
|
-
import { IntMenuProvider, IntMenuShortcut } from '../interfaces/menu-interfaces';
|
7
|
-
interface menuProvidersInt {
|
8
|
-
[menuId: string]: IntMenuProvider;
|
9
|
-
}
|
10
|
-
export declare class IaItemInspector extends LitElement implements IntNavController {
|
11
|
-
itemMD: MetadataResponse;
|
12
|
-
baseHost: string;
|
13
|
-
menuProviders: menuProvidersInt;
|
14
|
-
menuShortcuts: IntMenuShortcut[];
|
15
|
-
sideMenuOpen: boolean;
|
16
|
-
fullscreenState: boolean;
|
17
|
-
modal: ModalManagerInterface;
|
18
|
-
sharedRO: SharedResizeObserverInterface;
|
19
|
-
fileCount: number;
|
20
|
-
loaded: boolean;
|
21
|
-
private shortcutOrder;
|
22
|
-
firstUpdated(): void;
|
23
|
-
updated(changed: any): void;
|
24
|
-
modalClosedCallback(): void;
|
25
|
-
openModal(): void;
|
26
|
-
render(): import("lit-element").TemplateResult;
|
27
|
-
addMenuShortcut(menuId: keyof menuProvidersInt): void;
|
28
|
-
/**
|
29
|
-
* Removes a provider object from the menuShortcuts array and emits a
|
30
|
-
* menuShortcutsUpdated event.
|
31
|
-
*/
|
32
|
-
removeMenuShortcut(menuId: string): void;
|
33
|
-
/**
|
34
|
-
* Sorts the menuShortcuts property by comparing each provider's id to
|
35
|
-
* the id in each iteration over the shortcutOrder array.
|
36
|
-
*/
|
37
|
-
sortMenuShortcuts(): void;
|
38
|
-
emitMenuShortcutsUpdated(): void;
|
39
|
-
setMenu(): void;
|
40
|
-
updateFullscreenState(): void;
|
41
|
-
updateMenuContents(): void;
|
42
|
-
emitLoadingStatusUpdate(loaded: boolean): void;
|
43
|
-
parseItemInfo(): void;
|
44
|
-
get imageUrl(): string;
|
45
|
-
static get styles(): import("lit-element").CSSResult[];
|
46
|
-
}
|
47
|
-
export {};
|