@internetarchive/ia-item-navigator 0.0.0 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -19
- package/demo/app-root.ts +113 -22
- package/demo/index.html +12 -4
- package/dist/demo/app-root.d.ts +27 -7
- package/dist/demo/app-root.js +98 -23
- 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 +13 -23
- package/dist/src/interfaces/event-interfaces.js.map +1 -1
- package/dist/src/interfaces/menu-interfaces.d.ts +7 -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/files-by-type/files-by-type-provider.js +5 -3
- package/dist/src/item-inspector/files-by-type/files-by-type-provider.js.map +1 -1
- package/dist/src/item-inspector/files-by-type/ia-files-by-type.d.ts +1 -0
- package/dist/src/item-inspector/files-by-type/ia-files-by-type.js +14 -0
- package/dist/src/item-inspector/files-by-type/ia-files-by-type.js.map +1 -1
- package/dist/src/item-inspector/item-inspector.d.ts +0 -31
- package/dist/src/item-inspector/item-inspector.js +253 -181
- package/dist/src/item-inspector/item-inspector.js.map +1 -1
- package/dist/src/item-inspector/visual-mod-provider.d.ts +19 -0
- package/dist/src/item-inspector/visual-mod-provider.js +46 -0
- package/dist/src/item-inspector/visual-mod-provider.js.map +1 -0
- package/dist/src/item-navigator.d.ts +50 -28
- package/dist/src/item-navigator.js +216 -132
- package/dist/src/item-navigator.js.map +1 -1
- package/dist/src/loader.d.ts +5 -0
- package/dist/src/loader.js +8 -2
- package/dist/src/loader.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 +2 -0
- package/dist/test/ia-item-navigator.test.js +317 -0
- package/dist/test/ia-item-navigator.test.js.map +1 -0
- package/dist/test/ia-stub-goody.d.ts +210 -0
- package/dist/test/ia-stub-goody.js +276 -0
- package/dist/test/ia-stub-goody.js.map +1 -0
- package/dist/test/ia-stub.d.ts +22 -0
- package/dist/test/ia-stub.js +35 -0
- package/dist/test/ia-stub.js.map +1 -0
- 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 +14 -5
- package/src/interfaces/custom-theater-interface.ts +28 -0
- package/src/interfaces/event-interfaces.ts +17 -24
- package/src/interfaces/menu-interfaces.ts +10 -9
- package/src/item-navigator.ts +257 -155
- package/src/loader.ts +9 -2
- package/src/no-theater-available.ts +85 -0
- package/test/book-nav-stub.ts +47 -0
- package/test/ia-item-navigator.test.ts +438 -0
- package/test/ia-stub.ts +79 -0
- package/test/no-theater-available.test.ts +32 -0
- package/demo/demo-book-manifest.json +0 -1163
- package/demo/demo-item-md.json +0 -247
- package/src/interfaces/nav-controller-interface.ts +0 -18
- package/src/item-inspector/files-by-type/files-by-type-provider.ts +0 -41
- package/src/item-inspector/files-by-type/ia-files-by-type.ts +0 -84
- package/src/item-inspector/item-inspector.ts +0 -202
- package/src/item-inspector/share-provider.ts +0 -51
- package/src/item-navigator-js.js +0 -372
- package/test/your-webcomponent.test.ts +0 -40
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
@@ -1,33 +1,59 @@
|
|
1
|
-
|
2
|
-
import
|
3
|
-
|
1
|
+
/* eslint-disable no-restricted-globals */
|
2
|
+
import {
|
3
|
+
html,
|
4
|
+
css,
|
5
|
+
LitElement,
|
6
|
+
customElement,
|
7
|
+
property,
|
8
|
+
query,
|
9
|
+
TemplateResult,
|
10
|
+
} from 'lit-element';
|
4
11
|
import {
|
5
12
|
MetadataResponse,
|
6
13
|
SearchService,
|
7
14
|
} from '@internetarchive/search-service';
|
15
|
+
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
16
|
+
import { ModalManager } from '@internetarchive/modal-manager';
|
17
|
+
import '@internetarchive/modal-manager';
|
18
|
+
import { ItemNavigator } from '../src/item-navigator';
|
19
|
+
import '../src/item-navigator';
|
8
20
|
@customElement('app-root')
|
9
21
|
export class AppRoot extends LitElement {
|
10
|
-
|
11
|
-
|
12
|
-
|
22
|
+
/**
|
23
|
+
* Example controller to connect to `<ia-item-navigator>`
|
24
|
+
*/
|
25
|
+
@property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;
|
13
26
|
|
14
27
|
@property({ type: String }) encodedManifest = '';
|
15
28
|
|
29
|
+
@query('ia-item-navigator') private itemNav!: ItemNavigator;
|
30
|
+
|
31
|
+
@query('modal-manager') modalMgr!: ModalManager;
|
32
|
+
|
33
|
+
@property({ attribute: false }) sharedObserver = new SharedResizeObserver();
|
34
|
+
|
35
|
+
@property({ type: Boolean, reflect: true, attribute: true }) fullscreen:
|
36
|
+
| boolean
|
37
|
+
| null = null;
|
38
|
+
|
16
39
|
firstUpdated() {
|
17
40
|
this.fetchItemMD();
|
18
|
-
|
41
|
+
console.log(
|
42
|
+
'<app-root> component has loaded',
|
43
|
+
this.modalMgr,
|
44
|
+
this.sharedObserver
|
45
|
+
);
|
19
46
|
}
|
20
47
|
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
48
|
+
updated(changed: any) {
|
49
|
+
console.log('changed', changed);
|
50
|
+
if (changed.has('itemMD')) {
|
51
|
+
this.fullscreenCheck();
|
52
|
+
}
|
26
53
|
}
|
27
54
|
|
28
55
|
async fetchItemMD() {
|
29
56
|
const searchService = SearchService.default;
|
30
|
-
|
31
57
|
const mdResponse = await searchService.fetchMetadata('ux-team-books');
|
32
58
|
|
33
59
|
if (mdResponse.error) {
|
@@ -38,35 +64,100 @@ export class AppRoot extends LitElement {
|
|
38
64
|
return;
|
39
65
|
}
|
40
66
|
|
67
|
+
console.log('mdResponse.success', JSON.stringify(mdResponse.success));
|
41
68
|
this.itemMD = mdResponse.success;
|
42
|
-
console.log('** App Root: this.itemMD', this.itemMD);
|
43
69
|
}
|
44
70
|
|
45
|
-
|
46
|
-
|
47
|
-
|
71
|
+
get theaterReady(): boolean {
|
72
|
+
return this.modalMgr && this.sharedObserver && !!this.itemMD;
|
73
|
+
}
|
74
|
+
|
75
|
+
get urlParams(): URLSearchParams {
|
76
|
+
return new URLSearchParams(location.search.slice(1));
|
77
|
+
}
|
78
|
+
|
79
|
+
/** Fullscreen */
|
80
|
+
get showFullscreen(): boolean {
|
81
|
+
return this.urlParams.get('view') === 'theater';
|
82
|
+
}
|
83
|
+
|
84
|
+
/** sets url query param `view=theater` to toggle fullscreen */
|
85
|
+
toggleFS(): void {
|
86
|
+
if (this.urlParams.get('view')) {
|
87
|
+
location.search = '';
|
88
|
+
} else {
|
89
|
+
location.search = 'view=theater';
|
90
|
+
}
|
91
|
+
}
|
92
|
+
|
93
|
+
/** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
|
94
|
+
fullscreenCheck(): void {
|
95
|
+
if (this.showFullscreen && this.itemNav) {
|
96
|
+
this.fullscreen = true;
|
97
|
+
// this.itemNav.viewportInFullscreen = true;
|
48
98
|
}
|
99
|
+
}
|
100
|
+
/** End fullscreen */
|
49
101
|
|
102
|
+
/** Views */
|
103
|
+
get theaterBlock(): TemplateResult {
|
50
104
|
return html`
|
51
|
-
<item-navigator
|
52
|
-
|
105
|
+
<ia-item-navigator
|
106
|
+
baseHost="https://archive.org"
|
107
|
+
.item=${this.itemMD}
|
108
|
+
.modal=${this.modalMgr}
|
109
|
+
.sharedObserver=${this.sharedObserver}
|
110
|
+
@ViewportInFullScreen=${this.toggleFS}
|
111
|
+
.viewportInFullscreen=${this.fullscreen}
|
112
|
+
></ia-item-navigator>
|
113
|
+
`;
|
114
|
+
}
|
115
|
+
|
116
|
+
get placeholder(): TemplateResult {
|
117
|
+
return html`<h2>Please hold as we fetch an item for ya</h2>`;
|
118
|
+
}
|
119
|
+
|
120
|
+
render(): TemplateResult {
|
121
|
+
const theater = this.theaterReady ? this.theaterBlock : this.placeholder;
|
122
|
+
return html`
|
123
|
+
<h1>theater, in page</h1>
|
124
|
+
${theater}
|
125
|
+
<modal-manager></modal-manager>
|
53
126
|
`;
|
54
127
|
}
|
55
128
|
|
56
129
|
static styles = css`
|
57
130
|
:host {
|
58
|
-
min-height: 64vh;
|
59
131
|
border: 1px solid pink;
|
132
|
+
color: #222;
|
60
133
|
}
|
134
|
+
|
135
|
+
:host([fullscreen]) {
|
136
|
+
height: 100vh;
|
137
|
+
width: 100vw;
|
138
|
+
}
|
139
|
+
|
61
140
|
:host,
|
62
|
-
item-navigator {
|
141
|
+
ia-item-navigator {
|
63
142
|
display: block;
|
64
143
|
position: relative;
|
65
144
|
width: 100%;
|
145
|
+
min-height: 64vh;
|
146
|
+
height: 64vh;
|
66
147
|
}
|
67
|
-
item-navigator {
|
148
|
+
ia-item-navigator {
|
68
149
|
height: inherit;
|
69
150
|
min-height: inherit;
|
70
151
|
}
|
152
|
+
div {
|
153
|
+
position: relative;
|
154
|
+
overflow: hidden;
|
155
|
+
height: 100%;
|
156
|
+
min-height: inherit;
|
157
|
+
}
|
158
|
+
|
159
|
+
modal-manager[mode='closed'] {
|
160
|
+
display: none;
|
161
|
+
}
|
71
162
|
`;
|
72
163
|
}
|
package/demo/index.html
CHANGED
@@ -6,10 +6,10 @@
|
|
6
6
|
html, app-root {
|
7
7
|
font-size: 10px; /* This is to match petabox's base font size */
|
8
8
|
font-family: sans-serif;
|
9
|
-
--primaryBGColor:
|
9
|
+
--primaryBGColor: black;
|
10
10
|
--secondaryBGColor: #222;
|
11
11
|
--tertiaryBGColor: #333;
|
12
|
-
--primaryTextColor:
|
12
|
+
--primaryTextColor: white;
|
13
13
|
--primaryCTAFill: #194880;
|
14
14
|
--primaryCTABorder: #c5d1df;
|
15
15
|
--secondaryCTAFill: #333;
|
@@ -41,21 +41,29 @@
|
|
41
41
|
}
|
42
42
|
|
43
43
|
body {
|
44
|
-
background: black;
|
45
44
|
color: #fff;
|
45
|
+
margin: 0;
|
46
46
|
}
|
47
47
|
|
48
48
|
modal-manager {
|
49
49
|
display: none
|
50
50
|
}
|
51
51
|
|
52
|
+
.fullscreen {
|
53
|
+
position: fixed;
|
54
|
+
}
|
52
55
|
|
53
56
|
</style>
|
54
57
|
</head>
|
55
58
|
<body>
|
56
59
|
<app-root></app-root>
|
57
60
|
<script type="module">
|
58
|
-
|
61
|
+
/* eslint-disable no-restricted-globals */
|
62
|
+
const params = new URLSearchParams(location.search.slice(1));
|
63
|
+
if (params.get('view') === 'theater') {
|
64
|
+
const body = document.querySelector('body');
|
65
|
+
body.classList.toggle('fullscreen');
|
66
|
+
}
|
59
67
|
</script>
|
60
68
|
<script type="module" src="../dist/demo/app-root.js">
|
61
69
|
</script>
|
package/dist/demo/app-root.d.ts
CHANGED
@@ -1,14 +1,34 @@
|
|
1
|
-
import { LitElement } from 'lit-element';
|
2
|
-
import '../src/item-navigator';
|
3
|
-
import '../src/item-inspector/item-inspector';
|
1
|
+
import { LitElement, TemplateResult } from 'lit-element';
|
4
2
|
import { MetadataResponse } from '@internetarchive/search-service';
|
3
|
+
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
4
|
+
import { ModalManager } from '@internetarchive/modal-manager';
|
5
|
+
import '@internetarchive/modal-manager';
|
6
|
+
import '../src/item-navigator';
|
5
7
|
export declare class AppRoot extends LitElement {
|
6
|
-
|
7
|
-
|
8
|
+
/**
|
9
|
+
* Example controller to connect to `<ia-item-navigator>`
|
10
|
+
*/
|
11
|
+
itemMD: MetadataResponse | undefined;
|
8
12
|
encodedManifest: string;
|
13
|
+
private itemNav;
|
14
|
+
modalMgr: ModalManager;
|
15
|
+
sharedObserver: SharedResizeObserver;
|
16
|
+
fullscreen: boolean | null;
|
9
17
|
firstUpdated(): void;
|
10
|
-
|
18
|
+
updated(changed: any): void;
|
11
19
|
fetchItemMD(): Promise<void>;
|
12
|
-
|
20
|
+
get theaterReady(): boolean;
|
21
|
+
get urlParams(): URLSearchParams;
|
22
|
+
/** Fullscreen */
|
23
|
+
get showFullscreen(): boolean;
|
24
|
+
/** sets url query param `view=theater` to toggle fullscreen */
|
25
|
+
toggleFS(): void;
|
26
|
+
/** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
|
27
|
+
fullscreenCheck(): void;
|
28
|
+
/** End fullscreen */
|
29
|
+
/** Views */
|
30
|
+
get theaterBlock(): TemplateResult;
|
31
|
+
get placeholder(): TemplateResult;
|
32
|
+
render(): TemplateResult;
|
13
33
|
static styles: import("lit-element").CSSResult;
|
14
34
|
}
|
package/dist/demo/app-root.js
CHANGED
@@ -1,24 +1,30 @@
|
|
1
1
|
import { __decorate } from "tslib";
|
2
|
-
|
3
|
-
import '
|
4
|
-
import '../src/item-inspector/item-inspector';
|
2
|
+
/* eslint-disable no-restricted-globals */
|
3
|
+
import { html, css, LitElement, customElement, property, query, } from 'lit-element';
|
5
4
|
import { SearchService, } from '@internetarchive/search-service';
|
5
|
+
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
6
|
+
import '@internetarchive/modal-manager';
|
7
|
+
import '../src/item-navigator';
|
6
8
|
let AppRoot = class AppRoot extends LitElement {
|
7
9
|
constructor() {
|
8
10
|
super(...arguments);
|
9
|
-
|
10
|
-
|
11
|
+
/**
|
12
|
+
* Example controller to connect to `<ia-item-navigator>`
|
13
|
+
*/
|
14
|
+
this.itemMD = undefined;
|
11
15
|
this.encodedManifest = '';
|
16
|
+
this.sharedObserver = new SharedResizeObserver();
|
17
|
+
this.fullscreen = null;
|
12
18
|
}
|
13
19
|
firstUpdated() {
|
14
20
|
this.fetchItemMD();
|
15
|
-
|
21
|
+
console.log('<app-root> component has loaded', this.modalMgr, this.sharedObserver);
|
16
22
|
}
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
23
|
+
updated(changed) {
|
24
|
+
console.log('changed', changed);
|
25
|
+
if (changed.has('itemMD')) {
|
26
|
+
this.fullscreenCheck();
|
27
|
+
}
|
22
28
|
}
|
23
29
|
async fetchItemMD() {
|
24
30
|
const searchService = SearchService.default;
|
@@ -28,44 +34,113 @@ let AppRoot = class AppRoot extends LitElement {
|
|
28
34
|
window.confirm('There was an error fetching response, please check dev console');
|
29
35
|
return;
|
30
36
|
}
|
37
|
+
console.log('mdResponse.success', JSON.stringify(mdResponse.success));
|
31
38
|
this.itemMD = mdResponse.success;
|
32
|
-
console.log('** App Root: this.itemMD', this.itemMD);
|
33
39
|
}
|
34
|
-
|
35
|
-
|
36
|
-
|
40
|
+
get theaterReady() {
|
41
|
+
return this.modalMgr && this.sharedObserver && !!this.itemMD;
|
42
|
+
}
|
43
|
+
get urlParams() {
|
44
|
+
return new URLSearchParams(location.search.slice(1));
|
45
|
+
}
|
46
|
+
/** Fullscreen */
|
47
|
+
get showFullscreen() {
|
48
|
+
return this.urlParams.get('view') === 'theater';
|
49
|
+
}
|
50
|
+
/** sets url query param `view=theater` to toggle fullscreen */
|
51
|
+
toggleFS() {
|
52
|
+
if (this.urlParams.get('view')) {
|
53
|
+
location.search = '';
|
54
|
+
}
|
55
|
+
else {
|
56
|
+
location.search = 'view=theater';
|
37
57
|
}
|
58
|
+
}
|
59
|
+
/** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
|
60
|
+
fullscreenCheck() {
|
61
|
+
if (this.showFullscreen && this.itemNav) {
|
62
|
+
this.fullscreen = true;
|
63
|
+
// this.itemNav.viewportInFullscreen = true;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
/** End fullscreen */
|
67
|
+
/** Views */
|
68
|
+
get theaterBlock() {
|
38
69
|
return html `
|
39
|
-
<item-navigator
|
40
|
-
|
70
|
+
<ia-item-navigator
|
71
|
+
baseHost="https://archive.org"
|
72
|
+
.item=${this.itemMD}
|
73
|
+
.modal=${this.modalMgr}
|
74
|
+
.sharedObserver=${this.sharedObserver}
|
75
|
+
@ViewportInFullScreen=${this.toggleFS}
|
76
|
+
.viewportInFullscreen=${this.fullscreen}
|
77
|
+
></ia-item-navigator>
|
78
|
+
`;
|
79
|
+
}
|
80
|
+
get placeholder() {
|
81
|
+
return html `<h2>Please hold as we fetch an item for ya</h2>`;
|
82
|
+
}
|
83
|
+
render() {
|
84
|
+
const theater = this.theaterReady ? this.theaterBlock : this.placeholder;
|
85
|
+
return html `
|
86
|
+
<h1>theater, in page</h1>
|
87
|
+
${theater}
|
88
|
+
<modal-manager></modal-manager>
|
41
89
|
`;
|
42
90
|
}
|
43
91
|
};
|
44
92
|
AppRoot.styles = css `
|
45
93
|
:host {
|
46
|
-
min-height: 64vh;
|
47
94
|
border: 1px solid pink;
|
95
|
+
color: #222;
|
48
96
|
}
|
97
|
+
|
98
|
+
:host([fullscreen]) {
|
99
|
+
height: 100vh;
|
100
|
+
width: 100vw;
|
101
|
+
}
|
102
|
+
|
49
103
|
:host,
|
50
|
-
item-navigator {
|
104
|
+
ia-item-navigator {
|
51
105
|
display: block;
|
52
106
|
position: relative;
|
53
107
|
width: 100%;
|
108
|
+
min-height: 64vh;
|
109
|
+
height: 64vh;
|
54
110
|
}
|
55
|
-
item-navigator {
|
111
|
+
ia-item-navigator {
|
56
112
|
height: inherit;
|
57
113
|
min-height: inherit;
|
58
114
|
}
|
115
|
+
div {
|
116
|
+
position: relative;
|
117
|
+
overflow: hidden;
|
118
|
+
height: 100%;
|
119
|
+
min-height: inherit;
|
120
|
+
}
|
121
|
+
|
122
|
+
modal-manager[mode='closed'] {
|
123
|
+
display: none;
|
124
|
+
}
|
59
125
|
`;
|
60
126
|
__decorate([
|
61
127
|
property({ type: Object })
|
62
128
|
], AppRoot.prototype, "itemMD", void 0);
|
63
|
-
__decorate([
|
64
|
-
property({ type: Object })
|
65
|
-
], AppRoot.prototype, "bookManifest", void 0);
|
66
129
|
__decorate([
|
67
130
|
property({ type: String })
|
68
131
|
], AppRoot.prototype, "encodedManifest", void 0);
|
132
|
+
__decorate([
|
133
|
+
query('ia-item-navigator')
|
134
|
+
], AppRoot.prototype, "itemNav", void 0);
|
135
|
+
__decorate([
|
136
|
+
query('modal-manager')
|
137
|
+
], AppRoot.prototype, "modalMgr", void 0);
|
138
|
+
__decorate([
|
139
|
+
property({ attribute: false })
|
140
|
+
], AppRoot.prototype, "sharedObserver", void 0);
|
141
|
+
__decorate([
|
142
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
143
|
+
], AppRoot.prototype, "fullscreen", void 0);
|
69
144
|
AppRoot = __decorate([
|
70
145
|
customElement('app-root')
|
71
146
|
], AppRoot);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":";AAAA,OAAO,
|
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,48 +1,38 @@
|
|
1
|
-
import {
|
2
|
-
import { ModalConfig } from '@internetarchive/modal-manager';
|
3
|
-
import { IntMenuProvider, IntMenuShortcut } from './menu-interfaces';
|
1
|
+
import { MenuProviderInterface, MenuShortcutInterface, MenuId } from './menu-interfaces';
|
4
2
|
/** Toggles Menu && Sets open panel */
|
5
|
-
export interface
|
3
|
+
export interface ToggleSideMenuOpenEvent extends CustomEvent {
|
6
4
|
type: 'updateSideMenu';
|
7
5
|
detail: {
|
8
|
-
menuId:
|
6
|
+
menuId: MenuId | undefined | '';
|
9
7
|
action: 'open' | 'toggle' | '';
|
10
8
|
};
|
11
9
|
}
|
12
10
|
/** Sets open panel */
|
13
|
-
export interface
|
11
|
+
export interface ToggleSidePanelOpenEvent extends CustomEvent {
|
14
12
|
type: 'menuTypeSelected';
|
15
13
|
detail: {
|
16
|
-
id:
|
14
|
+
id: MenuId | '';
|
17
15
|
};
|
18
16
|
}
|
19
17
|
/** Sets menu order that is displayed */
|
20
|
-
export interface
|
18
|
+
export interface SetSideMenuContentsEvent extends CustomEvent {
|
21
19
|
type: 'menuUpdated';
|
22
|
-
detail:
|
20
|
+
detail: MenuProviderInterface[];
|
23
21
|
}
|
24
|
-
/**
|
25
|
-
export interface
|
26
|
-
type: '
|
27
|
-
detail:
|
22
|
+
/** Sets menu shortcuts that is displayed */
|
23
|
+
export interface SetSideMenuShortcutsEvent extends CustomEvent {
|
24
|
+
type: 'menuUpdated';
|
25
|
+
detail: MenuShortcutInterface[];
|
28
26
|
}
|
29
27
|
/** Toggles fullscreen mode */
|
30
|
-
export interface
|
28
|
+
export interface ManageFullscreenEvent extends CustomEvent {
|
31
29
|
type: 'ViewportInFullScreen';
|
32
30
|
detail: {
|
33
31
|
isFullScreen: boolean;
|
34
32
|
};
|
35
33
|
}
|
36
|
-
/** Toggles modal & sets contents */
|
37
|
-
export interface IntOpenModalEvent extends CustomEvent {
|
38
|
-
type: 'showItemNavigatorModal';
|
39
|
-
detail: {
|
40
|
-
config: ModalConfig;
|
41
|
-
customModalContent: TemplateResult;
|
42
|
-
};
|
43
|
-
}
|
44
34
|
/** Toggles loading view */
|
45
|
-
export interface
|
35
|
+
export interface loadingStateUpdatedEvent extends CustomEvent {
|
46
36
|
type: 'loadingStateUpdated';
|
47
37
|
detail: {
|
48
38
|
loaded: boolean;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"event-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/event-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import {
|
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"]}
|