@internetarchive/ia-item-navigator 0.0.0-a1 → 0.0.0-a14
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 +101 -34
- package/demo/index.html +9 -1
- package/dist/demo/app-root.d.ts +26 -7
- package/dist/demo/app-root.js +88 -34
- package/dist/demo/app-root.js.map +1 -1
- package/dist/src/interfaces/event-interfaces.d.ts +3 -13
- package/dist/src/interfaces/event-interfaces.js.map +1 -1
- package/dist/src/interfaces/menu-interfaces.d.ts +3 -2
- package/dist/src/interfaces/menu-interfaces.js.map +1 -1
- package/dist/src/interfaces/nav-controller-interface.d.ts +9 -0
- package/dist/src/interfaces/nav-controller-interface.js.map +1 -1
- package/dist/src/item-inspector/item-inspector.d.ts +0 -41
- package/dist/src/item-inspector/item-inspector.js +253 -215
- package/dist/src/item-inspector/item-inspector.js.map +1 -1
- package/dist/src/item-inspector/visual-mod-provider.d.ts +2 -0
- package/dist/src/item-inspector/visual-mod-provider.js +3 -0
- package/dist/src/item-inspector/visual-mod-provider.js.map +1 -1
- package/dist/src/item-navigator.d.ts +36 -22
- package/dist/src/item-navigator.js +118 -108
- 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 +17 -0
- package/dist/test/book-nav-stub.js +42 -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 +321 -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 +4 -3
- package/src/interfaces/event-interfaces.ts +3 -14
- package/src/interfaces/menu-interfaces.ts +3 -2
- package/src/interfaces/nav-controller-interface.ts +13 -0
- package/src/item-navigator.ts +144 -122
- package/src/loader.ts +9 -2
- package/src/no-theater-available.ts +85 -0
- package/test/book-nav-stub.ts +35 -0
- package/test/ia-item-navigator.test.ts +443 -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/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 -235
- package/src/item-inspector/share-provider.ts +0 -51
- package/src/item-inspector/visual-mod-provider.ts +0 -60
- 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 {
|
22
|
+
/**
|
23
|
+
* Example controller to connect to `<ia-item-navigator>`
|
24
|
+
*/
|
10
25
|
@property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;
|
11
26
|
|
12
|
-
@property({ type: Object }) bookManifest = {};
|
13
|
-
|
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,51 +64,88 @@ 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
|
-
get
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
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';
|
55
90
|
}
|
56
|
-
return html`<dl>${[...x]}</dl>`;
|
57
91
|
}
|
58
92
|
|
59
|
-
|
60
|
-
|
61
|
-
if (
|
62
|
-
|
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;
|
63
98
|
}
|
99
|
+
}
|
100
|
+
/** End fullscreen */
|
101
|
+
|
102
|
+
/** Views */
|
103
|
+
get theaterBlock(): TemplateResult {
|
104
|
+
return html`
|
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
|
+
}
|
64
119
|
|
120
|
+
render(): TemplateResult {
|
121
|
+
const theater = this.theaterReady ? this.theaterBlock : this.placeholder;
|
65
122
|
return html`
|
66
123
|
<h1>theater, in page</h1>
|
67
|
-
|
68
|
-
|
69
|
-
<section>${this.renderMD}</section>
|
124
|
+
${theater}
|
125
|
+
<modal-manager></modal-manager>
|
70
126
|
`;
|
71
127
|
}
|
72
128
|
|
73
129
|
static styles = css`
|
74
130
|
:host {
|
75
|
-
min-height: 64vh;
|
76
131
|
border: 1px solid pink;
|
77
132
|
color: #222;
|
78
133
|
}
|
134
|
+
|
135
|
+
:host([fullscreen]) {
|
136
|
+
height: 100vh;
|
137
|
+
width: 100vw;
|
138
|
+
}
|
139
|
+
|
79
140
|
:host,
|
80
|
-
item-navigator {
|
141
|
+
ia-item-navigator {
|
81
142
|
display: block;
|
82
143
|
position: relative;
|
83
144
|
width: 100%;
|
145
|
+
min-height: 64vh;
|
146
|
+
height: 64vh;
|
84
147
|
}
|
85
|
-
item-navigator {
|
148
|
+
ia-item-navigator {
|
86
149
|
height: inherit;
|
87
150
|
min-height: inherit;
|
88
151
|
}
|
@@ -92,5 +155,9 @@ export class AppRoot extends LitElement {
|
|
92
155
|
height: 100%;
|
93
156
|
min-height: inherit;
|
94
157
|
}
|
158
|
+
|
159
|
+
modal-manager[mode='closed'] {
|
160
|
+
display: none;
|
161
|
+
}
|
95
162
|
`;
|
96
163
|
}
|
package/demo/index.html
CHANGED
@@ -49,13 +49,21 @@
|
|
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,15 +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 {
|
8
|
+
/**
|
9
|
+
* Example controller to connect to `<ia-item-navigator>`
|
10
|
+
*/
|
6
11
|
itemMD: MetadataResponse | undefined;
|
7
|
-
bookManifest: {};
|
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
|
-
get
|
13
|
-
|
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;
|
14
33
|
static styles: import("lit-element").CSSResult;
|
15
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);
|
11
|
+
/**
|
12
|
+
* Example controller to connect to `<ia-item-navigator>`
|
13
|
+
*/
|
9
14
|
this.itemMD = undefined;
|
10
|
-
this.bookManifest = {};
|
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,46 +34,81 @@ 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
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
39
|
+
}
|
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';
|
42
57
|
}
|
43
|
-
return html `<dl>${[...x]}</dl>`;
|
44
58
|
}
|
45
|
-
|
46
|
-
|
47
|
-
if (
|
48
|
-
|
59
|
+
/** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
|
60
|
+
fullscreenCheck() {
|
61
|
+
if (this.showFullscreen && this.itemNav) {
|
62
|
+
this.fullscreen = true;
|
63
|
+
// this.itemNav.viewportInFullscreen = true;
|
49
64
|
}
|
65
|
+
}
|
66
|
+
/** End fullscreen */
|
67
|
+
/** Views */
|
68
|
+
get theaterBlock() {
|
69
|
+
return html `
|
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;
|
50
85
|
return html `
|
51
86
|
<h1>theater, in page</h1>
|
52
|
-
|
53
|
-
|
54
|
-
<section>${this.renderMD}</section>
|
87
|
+
${theater}
|
88
|
+
<modal-manager></modal-manager>
|
55
89
|
`;
|
56
90
|
}
|
57
91
|
};
|
58
92
|
AppRoot.styles = css `
|
59
93
|
:host {
|
60
|
-
min-height: 64vh;
|
61
94
|
border: 1px solid pink;
|
62
95
|
color: #222;
|
63
96
|
}
|
97
|
+
|
98
|
+
:host([fullscreen]) {
|
99
|
+
height: 100vh;
|
100
|
+
width: 100vw;
|
101
|
+
}
|
102
|
+
|
64
103
|
:host,
|
65
|
-
item-navigator {
|
104
|
+
ia-item-navigator {
|
66
105
|
display: block;
|
67
106
|
position: relative;
|
68
107
|
width: 100%;
|
108
|
+
min-height: 64vh;
|
109
|
+
height: 64vh;
|
69
110
|
}
|
70
|
-
item-navigator {
|
111
|
+
ia-item-navigator {
|
71
112
|
height: inherit;
|
72
113
|
min-height: inherit;
|
73
114
|
}
|
@@ -77,16 +118,29 @@ AppRoot.styles = css `
|
|
77
118
|
height: 100%;
|
78
119
|
min-height: inherit;
|
79
120
|
}
|
121
|
+
|
122
|
+
modal-manager[mode='closed'] {
|
123
|
+
display: none;
|
124
|
+
}
|
80
125
|
`;
|
81
126
|
__decorate([
|
82
127
|
property({ type: Object })
|
83
128
|
], AppRoot.prototype, "itemMD", void 0);
|
84
|
-
__decorate([
|
85
|
-
property({ type: Object })
|
86
|
-
], AppRoot.prototype, "bookManifest", void 0);
|
87
129
|
__decorate([
|
88
130
|
property({ type: String })
|
89
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);
|
90
144
|
AppRoot = __decorate([
|
91
145
|
customElement('app-root')
|
92
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"]}
|
@@ -1,11 +1,9 @@
|
|
1
|
-
import {
|
2
|
-
import { ModalConfig } from '@internetarchive/modal-manager';
|
3
|
-
import { IntMenuProvider, IntMenuShortcut } from './menu-interfaces';
|
1
|
+
import { IntMenuProvider, IntMenuShortcut, MenuId } from './menu-interfaces';
|
4
2
|
/** Toggles Menu && Sets open panel */
|
5
3
|
export interface IntManageSideMenuEvent extends CustomEvent {
|
6
4
|
type: 'updateSideMenu';
|
7
5
|
detail: {
|
8
|
-
menuId:
|
6
|
+
menuId: MenuId | undefined | '';
|
9
7
|
action: 'open' | 'toggle' | '';
|
10
8
|
};
|
11
9
|
}
|
@@ -13,7 +11,7 @@ export interface IntManageSideMenuEvent extends CustomEvent {
|
|
13
11
|
export interface IntSetOpenMenuEvent 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 */
|
@@ -33,14 +31,6 @@ export interface IntManageFullscreenEvent extends CustomEvent {
|
|
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
35
|
export interface IntLoadingStateUpdatedEvent extends CustomEvent {
|
46
36
|
type: 'loadingStateUpdated';
|
@@ -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 { IntMenuProvider, IntMenuShortcut, MenuId } from './menu-interfaces';\n\n/** Toggles Menu && Sets open panel */\nexport interface IntManageSideMenuEvent extends CustomEvent {\n type: 'updateSideMenu';\n detail: {\n menuId: MenuId | undefined | '';\n action: 'open' | 'toggle' | '';\n };\n}\n\n/** Sets open panel */\nexport interface IntSetOpenMenuEvent extends CustomEvent {\n type: 'menuTypeSelected';\n detail: {\n id: MenuId | '';\n };\n}\n\n/** Sets menu order that is displayed */\nexport interface IntSetMenuContentsEvent extends CustomEvent {\n type: 'menuUpdated';\n detail: IntMenuProvider[];\n}\n\n/** Sets menu shortcuts that is displayed */\nexport interface IntSetMenuShortcutsEvent extends CustomEvent {\n type: 'menuUpdated';\n detail: IntMenuShortcut[];\n}\n\n/** Toggles fullscreen mode */\nexport interface IntManageFullscreenEvent extends CustomEvent {\n type: 'ViewportInFullScreen';\n detail: {\n isFullScreen: boolean;\n };\n}\n\n/** Toggles loading view */\nexport interface IntLoadingStateUpdatedEvent extends CustomEvent {\n type: 'loadingStateUpdated';\n detail: {\n loaded: boolean;\n };\n}\n"]}
|
@@ -1,12 +1,13 @@
|
|
1
1
|
import { TemplateResult } from 'lit-html';
|
2
2
|
import { MetadataResponse } from '@internetarchive/search-service';
|
3
|
+
export declare type MenuId = string;
|
3
4
|
export interface IntMenuShortcut {
|
4
5
|
icon: TemplateResult;
|
5
|
-
id:
|
6
|
+
id: MenuId;
|
6
7
|
}
|
7
8
|
export interface IntMenuIconAndDetails extends IntMenuShortcut {
|
8
9
|
icon: TemplateResult;
|
9
|
-
id:
|
10
|
+
id: MenuId;
|
10
11
|
label: string;
|
11
12
|
menuDetails?: TemplateResult;
|
12
13
|
selected?: boolean;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"menu-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/menu-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\n\nexport interface IntMenuShortcut {\n icon: TemplateResult;\n id:
|
1
|
+
{"version":3,"file":"menu-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/menu-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\n\nexport type MenuId = string;\nexport interface IntMenuShortcut {\n icon: TemplateResult;\n id: MenuId;\n}\n\nexport interface IntMenuIconAndDetails extends IntMenuShortcut {\n icon: TemplateResult;\n id: MenuId;\n label: string;\n menuDetails?: TemplateResult;\n selected?: boolean;\n followable?: boolean;\n href?: string;\n}\n\nexport interface IntProviderArgs {\n item: MetadataResponse;\n baseHost: string;\n subPrefix: string;\n updated?: any;\n}\nexport interface IntMenuProvider\n extends IntProviderArgs,\n IntMenuIconAndDetails,\n IntMenuShortcut {}\n"]}
|
@@ -1,5 +1,7 @@
|
|
1
1
|
import { LitElement } from 'lit-element';
|
2
2
|
import { MetadataResponse } from '@internetarchive/search-service';
|
3
|
+
import { ModalManager } from '@internetarchive/modal-manager';
|
4
|
+
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
3
5
|
import { IntMenuShortcut } from './menu-interfaces';
|
4
6
|
export interface IntNavController extends LitElement {
|
5
7
|
baseHost: string;
|
@@ -7,9 +9,16 @@ export interface IntNavController extends LitElement {
|
|
7
9
|
menuProviders: object;
|
8
10
|
menuShortcuts: IntMenuShortcut[];
|
9
11
|
sideMenuOpen: boolean;
|
12
|
+
signedIn: boolean;
|
13
|
+
sharedObserver: SharedResizeObserver;
|
14
|
+
modal: ModalManager;
|
10
15
|
emitLoadingStatusUpdate: (loaded: boolean) => void;
|
11
16
|
addMenuShortcut: (menuId: string) => void;
|
12
17
|
removeMenuShortcut: (menuId: string) => void;
|
13
18
|
sortMenuShortcuts: () => void;
|
14
19
|
emitMenuShortcutsUpdated: () => void;
|
20
|
+
book: MetadataResponse;
|
21
|
+
}
|
22
|
+
export interface BookNavigator extends IntNavController {
|
23
|
+
book: MetadataResponse;
|
15
24
|
}
|
@@ -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 IntNavController extends LitElement {\n baseHost: string;\n itemMD: MetadataResponse;\n menuProviders: object;\n menuShortcuts: IntMenuShortcut[];\n sideMenuOpen: boolean;\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
|
+
{"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 { IntMenuShortcut } from './menu-interfaces';\n\nexport interface IntNavController extends LitElement {\n baseHost: string;\n itemMD: MetadataResponse;\n menuProviders: object;\n menuShortcuts: IntMenuShortcut[];\n sideMenuOpen: boolean;\n\n signedIn: boolean;\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 book: MetadataResponse;\n}\n\nexport interface BookNavigator extends IntNavController {\n book: MetadataResponse;\n}\n"]}
|