@internetarchive/ia-item-navigator 0.0.0-a9 → 0.0.2-a2
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
-
[![Build Status](https://travis-ci.com/internetarchive/iaux-
|
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
|
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 {};
|