@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
@@ -1,67 +1,127 @@
|
|
1
1
|
import { __decorate } from "tslib";
|
2
|
-
import { css, html, LitElement, customElement, property, state, } from 'lit-element';
|
2
|
+
import { css, html, LitElement, customElement, property, state, query, } from 'lit-element';
|
3
3
|
import { nothing } from 'lit-html';
|
4
4
|
import { MetadataResponse } from '@internetarchive/search-service';
|
5
|
-
|
6
|
-
import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
|
5
|
+
import '@internetarchive/ia-menu-slider';
|
7
6
|
import '@internetarchive/icon-ellipses/icon-ellipses';
|
8
7
|
import './loader';
|
8
|
+
import './no-theater-available';
|
9
|
+
export var ItemType;
|
10
|
+
(function (ItemType) {
|
11
|
+
ItemType["BOOK"] = "bookreader";
|
12
|
+
})(ItemType || (ItemType = {}));
|
9
13
|
let ItemNavigator = class ItemNavigator extends LitElement {
|
10
14
|
constructor() {
|
11
15
|
super(...arguments);
|
12
|
-
this.item = undefined;
|
13
|
-
this.itemType = '';
|
14
16
|
this.baseHost = 'archive.org';
|
15
17
|
this.signedIn = false;
|
16
|
-
this.menuShortcuts = [];
|
17
18
|
this.menuContents = [];
|
18
|
-
this.
|
19
|
+
this.menuShortcuts = [];
|
20
|
+
this.viewportInFullscreen = null;
|
19
21
|
this.menuOpened = false;
|
20
|
-
this.
|
21
|
-
this.
|
22
|
-
|
22
|
+
this.loaded = null;
|
23
|
+
this.openMenuState = 'shift';
|
24
|
+
}
|
25
|
+
disconnectedCallback() {
|
26
|
+
this.removeResizeObserver();
|
27
|
+
}
|
28
|
+
updated(changed) {
|
29
|
+
if (changed.has('sharedObserver')) {
|
30
|
+
const oldObserver = changed.get('sharedObserver');
|
31
|
+
oldObserver === null || oldObserver === void 0 ? void 0 : oldObserver.removeObserver(this.resizeObserverConfig);
|
32
|
+
this.setResizeObserver();
|
33
|
+
}
|
23
34
|
}
|
24
|
-
|
25
|
-
|
26
|
-
|
35
|
+
/** Shared observer */
|
36
|
+
handleResize(entry) {
|
37
|
+
const { width } = entry.contentRect;
|
38
|
+
if (width <= 600) {
|
39
|
+
this.openMenuState = 'overlay';
|
40
|
+
return;
|
27
41
|
}
|
42
|
+
this.openMenuState = 'shift';
|
43
|
+
}
|
44
|
+
setResizeObserver() {
|
45
|
+
var _a;
|
46
|
+
(_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.addObserver(this.resizeObserverConfig);
|
47
|
+
}
|
48
|
+
removeResizeObserver() {
|
49
|
+
var _a;
|
50
|
+
(_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver(this.resizeObserverConfig);
|
51
|
+
}
|
52
|
+
get resizeObserverConfig() {
|
53
|
+
return {
|
54
|
+
handler: this,
|
55
|
+
target: this.frame,
|
56
|
+
};
|
57
|
+
}
|
58
|
+
/** End shared observer */
|
59
|
+
get loaderTitle() {
|
60
|
+
return this.viewportInFullscreen ? 'Internet Archive' : '';
|
61
|
+
}
|
62
|
+
get readerHeightStyle() {
|
63
|
+
var _a;
|
64
|
+
const calcFSHeight = `calc(100vh - ${(_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.offsetHeight}px)`;
|
65
|
+
return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
|
66
|
+
}
|
67
|
+
get loadingArea() {
|
68
|
+
return html `
|
69
|
+
<div class="loading-area">
|
70
|
+
<div class="loading-view">
|
71
|
+
<ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>
|
72
|
+
</div>
|
73
|
+
</div>
|
74
|
+
`;
|
28
75
|
}
|
29
76
|
render() {
|
30
|
-
const displayReaderClass = this.loaded ? '' : '
|
77
|
+
const displayReaderClass = this.loaded ? '' : 'hidden';
|
31
78
|
return html `
|
32
|
-
<div id="frame" class=${this.menuClass}>
|
33
|
-
<slot name="item-nav-header"></slot>
|
79
|
+
<div id="frame" class=${`${this.menuClass}`}>
|
34
80
|
<div class="menu-and-reader">
|
35
81
|
${this.shouldRenderMenu ? this.renderSideMenu : nothing}
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
82
|
+
<slot name="theater-header"></slot>
|
83
|
+
<div
|
84
|
+
id="reader"
|
85
|
+
class=${displayReaderClass}
|
86
|
+
style=${this.readerHeightStyle}
|
87
|
+
>
|
88
|
+
${this.renderViewport}
|
89
|
+
</div>
|
90
|
+
${!this.loaded ? this.loadingArea : nothing}
|
44
91
|
</div>
|
45
92
|
</div>
|
46
93
|
`;
|
47
94
|
}
|
48
|
-
get
|
95
|
+
get noTheaterView() {
|
96
|
+
var _a, _b;
|
97
|
+
return html `<ia-no-theater-available
|
98
|
+
.identifier=${(_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.identifier}
|
99
|
+
@loadingStateUpdated=${this.loadingStateUpdated}
|
100
|
+
></ia-no-theater-available>`;
|
101
|
+
}
|
102
|
+
get theaterSlot() {
|
103
|
+
return html `
|
104
|
+
<slot name="theater-main" style=${this.readerHeightStyle}></slot>
|
105
|
+
`;
|
106
|
+
}
|
107
|
+
get booksViewer() {
|
108
|
+
const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
|
49
109
|
return html `
|
50
110
|
<book-navigator
|
111
|
+
.modal=${this.modal}
|
51
112
|
.baseHost=${this.baseHost}
|
52
|
-
.
|
113
|
+
.itemMD=${this.item}
|
53
114
|
?signedIn=${this.signedIn}
|
54
115
|
?sideMenuOpen=${this.menuOpened}
|
116
|
+
.sharedObserver=${this.sharedObserver}
|
55
117
|
@ViewportInFullScreen=${this.manageViewportFullscreen}
|
56
118
|
@loadingStateUpdated=${this.loadingStateUpdated}
|
57
119
|
@updateSideMenu=${this.manageSideMenuEvents}
|
58
120
|
@menuUpdated=${this.setMenuContents}
|
59
121
|
@menuShortcutsUpdated=${this.setMenuShortcuts}
|
60
|
-
@showItemNavigatorModal=${this.openModal}
|
61
|
-
@closeItemNavigatorModal=${this.closeModal}
|
62
122
|
>
|
63
|
-
<div slot="
|
64
|
-
|
123
|
+
<div slot="theater-main" style=${slotVisibility}>
|
124
|
+
${this.theaterSlot}
|
65
125
|
</div>
|
66
126
|
</book-navigator>
|
67
127
|
`;
|
@@ -70,52 +130,28 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
70
130
|
if (!this.item) {
|
71
131
|
return nothing;
|
72
132
|
}
|
73
|
-
if (this.itemType ===
|
74
|
-
return this.
|
133
|
+
if (this.itemType === ItemType.BOOK) {
|
134
|
+
return this.booksViewer;
|
75
135
|
}
|
76
|
-
return
|
77
|
-
.itemMD=${this.item}
|
78
|
-
@loadingStateUpdated=${this.loadingStateUpdated}
|
79
|
-
@updateSideMenu=${this.manageSideMenuEvents}
|
80
|
-
@menuUpdated=${this.setMenuContents}
|
81
|
-
@menuShortcutsUpdated=${this.setMenuShortcuts}
|
82
|
-
></ia-item-inspector>`;
|
136
|
+
return this.noTheaterView;
|
83
137
|
}
|
84
138
|
loadingStateUpdated(e) {
|
85
139
|
const { loaded } = e.detail;
|
86
|
-
this.loaded =
|
87
|
-
}
|
88
|
-
/* Modal management */
|
89
|
-
openModal(e) {
|
90
|
-
var _a;
|
91
|
-
const { config, customModalContent } = e.detail;
|
92
|
-
if (!config || !customModalContent) {
|
93
|
-
return;
|
94
|
-
}
|
95
|
-
(_a = this.modal) === null || _a === void 0 ? void 0 : _a.showModal({
|
96
|
-
config,
|
97
|
-
customModalContent,
|
98
|
-
});
|
99
|
-
}
|
100
|
-
closeModal() {
|
101
|
-
var _a;
|
102
|
-
(_a = this.modal) === null || _a === void 0 ? void 0 : _a.closeModal();
|
103
|
-
}
|
104
|
-
/** Creates modal DOM & attaches to `<body>` */
|
105
|
-
createModal() {
|
106
|
-
this.modal = document.createElement('modal-manager');
|
107
|
-
document.body.appendChild(this.modal);
|
140
|
+
this.loaded = loaded || null;
|
108
141
|
}
|
109
|
-
/* End Modal management */
|
110
142
|
/** Fullscreen Management */
|
111
143
|
manageViewportFullscreen(e) {
|
112
|
-
const
|
113
|
-
this.viewportInFullscreen =
|
144
|
+
const fullscreenStatus = !!e.detail.isFullScreen;
|
145
|
+
this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
|
146
|
+
const event = new CustomEvent('fullscreenToggled', {
|
147
|
+
detail: e.detail,
|
148
|
+
});
|
149
|
+
this.dispatchEvent(event);
|
114
150
|
}
|
115
151
|
/** End Fullscreen Management */
|
116
152
|
/** Side menu */
|
117
153
|
get shouldRenderMenu() {
|
118
|
-
return !!
|
154
|
+
return !!this.menuContents.length;
|
119
155
|
}
|
120
156
|
toggleMenu() {
|
121
157
|
this.menuOpened = !this.menuOpened;
|
@@ -125,25 +161,47 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
125
161
|
}
|
126
162
|
setOpenMenu(e) {
|
127
163
|
const { id } = e.detail;
|
128
|
-
this.openMenu = id
|
164
|
+
this.openMenu = id !== this.openMenu ? id : undefined;
|
129
165
|
}
|
130
166
|
setMenuContents(e) {
|
131
167
|
const updatedContents = [...e.detail];
|
132
168
|
this.menuContents = updatedContents;
|
133
169
|
}
|
170
|
+
setMenuShortcuts(e) {
|
171
|
+
this.menuShortcuts = [...e.detail];
|
172
|
+
}
|
134
173
|
/** Toggles Side Menu & Sets viewable subpanel */
|
135
174
|
manageSideMenuEvents(e) {
|
136
175
|
const { menuId, action } = e.detail;
|
137
|
-
if (menuId) {
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
176
|
+
if (!menuId) {
|
177
|
+
return;
|
178
|
+
}
|
179
|
+
if (action === 'open') {
|
180
|
+
this.openShortcut(menuId);
|
181
|
+
}
|
182
|
+
else if (action === 'toggle') {
|
183
|
+
this.openMenu = menuId;
|
184
|
+
this.toggleMenu();
|
145
185
|
}
|
146
186
|
}
|
187
|
+
get menuToggleButton() {
|
188
|
+
return html `
|
189
|
+
<button
|
190
|
+
class="toggle-menu"
|
191
|
+
@click=${this.toggleMenu}
|
192
|
+
title="Toggle theater side panels"
|
193
|
+
>
|
194
|
+
<div>
|
195
|
+
<ia-icon-ellipses
|
196
|
+
style="width: var(--iconWidth); height: var(--iconHeight);"
|
197
|
+
></ia-icon-ellipses>
|
198
|
+
</div>
|
199
|
+
</button>
|
200
|
+
`;
|
201
|
+
}
|
202
|
+
get selectedMenuId() {
|
203
|
+
return this.openMenu || '';
|
204
|
+
}
|
147
205
|
get renderSideMenu() {
|
148
206
|
const drawerState = this.menuOpened ? '' : 'hidden';
|
149
207
|
return html `
|
@@ -152,7 +210,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
152
210
|
<div id="menu" class=${drawerState}>
|
153
211
|
<ia-menu-slider
|
154
212
|
.menus=${this.menuContents}
|
155
|
-
.selectedMenu=${this.
|
213
|
+
.selectedMenu=${this.selectedMenuId}
|
156
214
|
@menuTypeSelected=${this.setOpenMenu}
|
157
215
|
@menuSliderClosed=${this.closeMenu}
|
158
216
|
manuallyHandleClose
|
@@ -164,19 +222,21 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
164
222
|
}
|
165
223
|
/** End Side menu */
|
166
224
|
/** Menu Shortcuts */
|
167
|
-
setMenuShortcuts(e) {
|
168
|
-
this.menuShortcuts = [...e.detail];
|
169
|
-
}
|
170
225
|
openShortcut(selectedMenuId = '') {
|
171
226
|
this.openMenu = selectedMenuId;
|
172
227
|
this.menuOpened = true;
|
173
228
|
}
|
174
229
|
get shortcuts() {
|
175
|
-
const shortcuts = this.menuShortcuts.map(({ icon, id }) =>
|
230
|
+
const shortcuts = this.menuShortcuts.map(({ icon, id }) => {
|
231
|
+
if (id === 'fullscreen') {
|
232
|
+
return html `${icon}`;
|
233
|
+
}
|
234
|
+
return html `
|
176
235
|
<button class="shortcut ${id}" @click="${() => this.openShortcut(id)}">
|
177
236
|
${icon}
|
178
237
|
</button>
|
179
|
-
|
238
|
+
`;
|
239
|
+
});
|
180
240
|
return html `<div class="shortcuts">${shortcuts}</div>`;
|
181
241
|
}
|
182
242
|
/** End Menu Shortcuts */
|
@@ -184,30 +244,17 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
184
244
|
get menuClass() {
|
185
245
|
const drawerState = this.menuOpened ? 'open' : '';
|
186
246
|
const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
|
187
|
-
return `${drawerState} ${fullscreenState}`;
|
188
|
-
}
|
189
|
-
get menuToggleButton() {
|
190
|
-
return html `
|
191
|
-
<button
|
192
|
-
class="toggle-menu"
|
193
|
-
@click=${() => this.toggleMenu()}
|
194
|
-
title="Toggle theater side panels"
|
195
|
-
>
|
196
|
-
<div><ia-icon-ellipses></ia-icon-ellipses></div>
|
197
|
-
</button>
|
198
|
-
`;
|
247
|
+
return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
|
199
248
|
}
|
200
249
|
static get styles() {
|
201
250
|
const subnavWidth = css `var(--menuWidth, 320px)`;
|
202
|
-
const tabletPlusQuery = css `
|
203
|
-
@media (min-width: 640px);
|
204
|
-
`;
|
205
251
|
const transitionTiming = css `var(--animationTiming, 200ms)`;
|
206
252
|
const transitionEffect = css `transform ${transitionTiming} ease-out`;
|
253
|
+
const menuMargin = css `var(--theaterMenuMargin, 42px)`;
|
254
|
+
const theaterBg = css `var(--theaterBgColor, #000)`;
|
207
255
|
return css `
|
208
256
|
:host,
|
209
257
|
#frame,
|
210
|
-
#reader,
|
211
258
|
.menu-and-reader {
|
212
259
|
min-height: inherit;
|
213
260
|
height: inherit;
|
@@ -215,18 +262,48 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
215
262
|
overflow: hidden;
|
216
263
|
display: block;
|
217
264
|
}
|
265
|
+
|
266
|
+
:host,
|
267
|
+
#frame,
|
268
|
+
.menu-and-reader,
|
269
|
+
.loading-area,
|
270
|
+
.loading-view {
|
271
|
+
min-height: inherit;
|
272
|
+
height: inherit;
|
273
|
+
}
|
274
|
+
|
275
|
+
slot {
|
276
|
+
display: block;
|
277
|
+
overflow: hidden;
|
278
|
+
}
|
279
|
+
|
218
280
|
#frame {
|
219
|
-
|
281
|
+
background-color: ${theaterBg};
|
282
|
+
color-scheme: dark;
|
283
|
+
}
|
284
|
+
|
285
|
+
#frame.fullscreen {
|
286
|
+
position: fixed;
|
287
|
+
top: 0;
|
288
|
+
bottom: 0;
|
289
|
+
left: 0;
|
290
|
+
right: 0;
|
291
|
+
z-index: 9;
|
220
292
|
}
|
221
293
|
|
222
|
-
|
223
|
-
|
224
|
-
|
294
|
+
.loading-view {
|
295
|
+
display: flex;
|
296
|
+
align-items: center;
|
297
|
+
justify-content: center;
|
298
|
+
}
|
299
|
+
|
300
|
+
ia-itemnav-loader {
|
301
|
+
display: block;
|
302
|
+
width: 100%;
|
225
303
|
}
|
226
304
|
|
227
305
|
.hidden {
|
228
|
-
|
229
|
-
width: 1px;
|
306
|
+
display: none;
|
230
307
|
}
|
231
308
|
|
232
309
|
button {
|
@@ -250,17 +327,18 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
250
327
|
|
251
328
|
nav .minimized {
|
252
329
|
background: rgba(0, 0, 0, 0.7);
|
253
|
-
|
330
|
+
padding-top: 6px;
|
254
331
|
position: absolute;
|
255
|
-
|
256
|
-
left: 0;
|
257
|
-
width: 4rem;
|
332
|
+
width: ${menuMargin};
|
258
333
|
z-index: 2;
|
334
|
+
left: 0;
|
335
|
+
border-bottom-right-radius: 5%;
|
259
336
|
}
|
260
337
|
|
261
338
|
nav .minimized button {
|
262
339
|
width: var(--iconWidth);
|
263
340
|
height: var(--iconHeight);
|
341
|
+
margin-bottom: 0.2rem;
|
264
342
|
margin: auto;
|
265
343
|
display: inline-flex;
|
266
344
|
vertical-align: middle;
|
@@ -268,8 +346,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
268
346
|
align-items: center;
|
269
347
|
-webkit-box-pack: center;
|
270
348
|
justify-content: center;
|
271
|
-
width:
|
272
|
-
height:
|
349
|
+
width: ${menuMargin};
|
350
|
+
height: ${menuMargin};
|
273
351
|
}
|
274
352
|
|
275
353
|
nav .minimized button.toggle-menu > * {
|
@@ -301,23 +379,26 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
301
379
|
#reader {
|
302
380
|
position: relative;
|
303
381
|
z-index: 1;
|
304
|
-
transition: ${transitionEffect};
|
382
|
+
/* transition: ${transitionEffect}; */
|
305
383
|
transform: translateX(0);
|
306
384
|
width: 100%;
|
307
385
|
}
|
308
386
|
|
387
|
+
.open.overlay #reader {
|
388
|
+
transition: none;
|
389
|
+
}
|
390
|
+
|
309
391
|
.open #menu {
|
310
392
|
width: ${subnavWidth};
|
311
393
|
transform: translateX(0);
|
312
394
|
transition: ${transitionEffect};
|
313
395
|
}
|
314
396
|
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
}
|
397
|
+
.open.shift slot[name='theater-header'],
|
398
|
+
.open.shift #reader {
|
399
|
+
width: calc(100% - var(--menuWidth));
|
400
|
+
float: right;
|
401
|
+
transition: ${transitionEffect};
|
321
402
|
}
|
322
403
|
`;
|
323
404
|
}
|
@@ -326,7 +407,7 @@ __decorate([
|
|
326
407
|
property({
|
327
408
|
type: Object,
|
328
409
|
converter: (value) => {
|
329
|
-
if (typeof value === 'string') {
|
410
|
+
if (value && typeof value === 'string') {
|
330
411
|
return new MetadataResponse(JSON.parse(atob(value)));
|
331
412
|
}
|
332
413
|
return value;
|
@@ -349,22 +430,14 @@ __decorate([
|
|
349
430
|
},
|
350
431
|
})
|
351
432
|
], ItemNavigator.prototype, "signedIn", void 0);
|
352
|
-
__decorate([
|
353
|
-
property({
|
354
|
-
type: Array,
|
355
|
-
hasChanged: (newVal, oldVal) => {
|
356
|
-
if (newVal !== oldVal) {
|
357
|
-
return true;
|
358
|
-
}
|
359
|
-
return false;
|
360
|
-
},
|
361
|
-
})
|
362
|
-
], ItemNavigator.prototype, "menuShortcuts", void 0);
|
363
433
|
__decorate([
|
364
434
|
property({ type: Array })
|
365
435
|
], ItemNavigator.prototype, "menuContents", void 0);
|
366
436
|
__decorate([
|
367
|
-
property({ type:
|
437
|
+
property({ type: Array })
|
438
|
+
], ItemNavigator.prototype, "menuShortcuts", void 0);
|
439
|
+
__decorate([
|
440
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
368
441
|
], ItemNavigator.prototype, "viewportInFullscreen", void 0);
|
369
442
|
__decorate([
|
370
443
|
property({ type: Boolean })
|
@@ -373,14 +446,25 @@ __decorate([
|
|
373
446
|
property({ type: String })
|
374
447
|
], ItemNavigator.prototype, "openMenu", void 0);
|
375
448
|
__decorate([
|
376
|
-
property({
|
449
|
+
property({ attribute: false })
|
377
450
|
], ItemNavigator.prototype, "modal", void 0);
|
378
451
|
__decorate([
|
379
|
-
|
452
|
+
property({ attribute: false })
|
453
|
+
], ItemNavigator.prototype, "sharedObserver", void 0);
|
454
|
+
__decorate([
|
455
|
+
property({ type: Boolean, reflect: true, attribute: true })
|
380
456
|
], ItemNavigator.prototype, "loaded", void 0);
|
457
|
+
__decorate([
|
458
|
+
state()
|
459
|
+
], ItemNavigator.prototype, "openMenuState", void 0);
|
460
|
+
__decorate([
|
461
|
+
query('#frame')
|
462
|
+
], ItemNavigator.prototype, "frame", void 0);
|
463
|
+
__decorate([
|
464
|
+
query('slot[name="theater-header"]')
|
465
|
+
], ItemNavigator.prototype, "headerSlot", void 0);
|
381
466
|
ItemNavigator = __decorate([
|
382
|
-
customElement('item-navigator')
|
467
|
+
customElement('ia-item-navigator')
|
383
468
|
], ItemNavigator);
|
384
469
|
export { ItemNavigator };
|
385
|
-
customElements.define('ia-menu-slider', IAMenuSlider);
|
386
470
|
//# sourceMappingURL=item-navigator.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EACV,aAAa,EACb,QAAQ,EACR,KAAK,GACN,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,EAAkB,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,aAAa;AACb,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE/D,OAAO,8CAA8C,CAAC;AACtD,OAAO,UAAU,CAAC;AAelB,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAUE,SAAI,GAAiC,SAAS,CAAC;QAEnB,aAAQ,GAAG,EAAE,CAAC;QAEd,aAAQ,GAAG,aAAa,CAAC;QAUrD,aAAQ,GAAG,KAAK,CAAC;QAWjB,kBAAa,GAAsB,EAAE,CAAC;QAEX,iBAAY,GAAsB,EAAE,CAAC;QAEnC,yBAAoB,GAAG,KAAK,CAAC;QAE7B,eAAU,GAAG,KAAK,CAAC;QAEpB,aAAQ,GAAG,EAAE,CAAC;QAEd,UAAK,GAEjB,SAAS,CAAC;QAEjB,WAAM,GAAY,KAAK,CAAC;IAuUnC,CAAC;IArUC,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;IACH,CAAC;IAED,MAAM;QACJ,MAAM,kBAAkB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;QACrD,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,SAAS;;;YAGhC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO;YACrD,CAAC,IAAI,CAAC,MAAM;YACZ,CAAC,CAAC,IAAI,CAAA,yCAAyC;YAC/C,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA,0BAA0B,kBAAkB;kBAC5C,IAAI,CAAC,cAAc;qBAChB;YACT,CAAC,CAAC,OAAO;;;KAGhB,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,QAAQ;gBACjB,IAAI,CAAC,IAAI;oBACL,IAAI,CAAC,QAAQ;wBACT,IAAI,CAAC,UAAU;gCACP,IAAI,CAAC,wBAAwB;+BAC9B,IAAI,CAAC,mBAAmB;0BAC7B,IAAI,CAAC,oBAAoB;uBAC5B,IAAI,CAAC,eAAe;gCACX,IAAI,CAAC,gBAAgB;kCACnB,IAAI,CAAC,SAAS;mCACb,IAAI,CAAC,UAAU;;;;;;KAM7C,CAAC;IACJ,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,OAAO,CAAC;SAChB;QACD,IAAI,IAAI,CAAC,QAAQ,KAAK,YAAY,EAAE;YAClC,OAAO,IAAI,CAAC,WAAW,CAAC;SACzB;QACD,OAAO,IAAI,CAAA;gBACC,IAAI,CAAC,IAAI;6BACI,IAAI,CAAC,mBAAmB;wBAC7B,IAAI,CAAC,oBAAoB;qBAC5B,IAAI,CAAC,eAAe;8BACX,IAAI,CAAC,gBAAgB;0BACzB,CAAC;IACzB,CAAC;IAED,mBAAmB,CAAC,CAA8B;QAChD,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;IACzB,CAAC;IAED,sBAAsB;IACtB,SAAS,CAAC,CAAoB;;QAC5B,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAChD,IAAI,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE;YAClC,OAAO;SACR;QAED,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YACpB,MAAM;YACN,kBAAkB;SACnB,CAAC,CAAC;IACL,CAAC;IAED,UAAU;;QACR,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE,CAAC;IAC3B,CAAC;IAED,+CAA+C;IACvC,WAAW;QACjB,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,aAAa,CACjC,eAAe,CACS,CAAC;QAC3B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IACD,0BAA0B;IAE1B,4BAA4B;IAC5B,wBAAwB,CAAC,CAA2B;QAClD,MAAM,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAClC,IAAI,CAAC,oBAAoB,GAAG,YAAY,CAAC;IAC3C,CAAC;IACD,gCAAgC;IAEhC,gBAAgB;IAChB,IAAI,gBAAgB;QAClB,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACnE,CAAC;IAED,UAAU;QACR,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAED,SAAS;QACP,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED,WAAW,CAAC,CAAsB;QAChC,MAAM,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,QAAQ,GAAG,EAAE,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACjD,CAAC;IAED,eAAe,CAAC,CAA0B;QACxC,MAAM,eAAe,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC;IACtC,CAAC;IAED,kDAAkD;IAClD,oBAAoB,CAAC,CAAyB;QAC5C,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QACpC,IAAI,MAAM,EAAE;YACV,IAAI,MAAM,KAAK,MAAM,EAAE;gBACrB,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;aAC3B;iBAAM,IAAI,MAAM,KAAK,QAAQ,EAAE;gBAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;gBACvB,IAAI,CAAC,UAAU,EAAE,CAAC;aACnB;SACF;IACH,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEpD,OAAO,IAAI,CAAA;;iCAEkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB;+BACzC,WAAW;;qBAErB,IAAI,CAAC,YAAY;4BACV,IAAI,CAAC,QAAQ;gCACT,IAAI,CAAC,WAAW;gCAChB,IAAI,CAAC,SAAS;;;;;;KAMzC,CAAC;IACJ,CAAC;IACD,oBAAoB;IAEpB,qBAAqB;IACrB,gBAAgB,CAAC,CAAsB;QACrC,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC;IAED,YAAY,CAAC,cAAc,GAAG,EAAE;QAC9B,IAAI,CAAC,QAAQ,GAAG,cAAc,CAAC;QAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACzB,CAAC;IAED,IAAI,SAAS;QACX,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CACtC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;kCACM,EAAE,aAAa,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;YAChE,IAAI;;OAET,CACF,CAAC;QACF,OAAO,IAAI,CAAA,0BAA0B,SAAS,QAAQ,CAAC;IACzD,CAAC;IACD,yBAAyB;IAEzB,kBAAkB;IAClB,IAAI,SAAS;QACX,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QAClD,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QACtE,OAAO,GAAG,WAAW,IAAI,eAAe,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAA;;;iBAGE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;;;;;KAKnC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,WAAW,GAAG,GAAG,CAAA,yBAAyB,CAAC;QACjD,MAAM,eAAe,GAAG,GAAG,CAAA;;KAE1B,CAAC;QACF,MAAM,gBAAgB,GAAG,GAAG,CAAA,+BAA+B,CAAC;QAC5D,MAAM,gBAAgB,GAAG,GAAG,CAAA,aAAa,gBAAgB,WAAW,CAAC;QAErE,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAwFmB,WAAW;iBAC3B,WAAW;qCACS,WAAW;sBAC1B,gBAAgB;;;;;;sBAMhB,gBAAgB;;;;;;iBAMrB,WAAW;;sBAEN,gBAAgB;;;QAG9B,eAAe;;wBAEC,gBAAgB;kCACN,WAAW;+BACd,WAAW;;;KAGrC,CAAC;IACJ,CAAC;CACF,CAAA;AA9WC;IATC,QAAQ,CAAC;QACR,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,CAAC,KAAuC,EAAoB,EAAE;YACvE,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBAC7B,OAAO,IAAI,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;aACtD;YACD,OAAO,KAAyB,CAAC;QACnC,CAAC;KACF,CAAC;2CAC6C;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAe;AAEd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA0B;AAUrD;IARC,QAAQ,CAAC;QACR,SAAS,EAAE,CAAC,GAA4B,EAAE,EAAE;YAC1C,IAAI,OAAO,GAAG,KAAK,SAAS,EAAE;gBAC5B,OAAO,GAAG,CAAC;aACZ;YACD,OAAO,GAAG,KAAK,MAAM,CAAC;QACxB,CAAC;KACF,CAAC;+CACe;AAWjB;IATC,QAAQ,CAAC;QACR,IAAI,EAAE,KAAK;QACX,UAAU,EAAE,CAAC,MAAqB,EAAE,MAAqB,EAAE,EAAE;YAC3D,IAAI,MAAM,KAAK,MAAM,EAAE;gBACrB,OAAO,IAAI,CAAC;aACb;YACD,OAAO,KAAK,CAAC;QACf,CAAC;KACF,CAAC;oDACoC;AAEX;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;mDAAsC;AAEnC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DAA8B;AAE7B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoB;AAEpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAe;AAEd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAED;AAEjB;IAAR,KAAK,EAAE;6CAAyB;AAjDtB,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAwXzB;SAxXY,aAAa;AA0X1B,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC","sourcesContent":["import {\n css,\n html,\n LitElement,\n customElement,\n property,\n state,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\n// @ts-ignore\nimport { IAMenuSlider } from '@internetarchive/ia-menu-slider';\nimport { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n IntManageFullscreenEvent,\n IntOpenModalEvent,\n IntManageSideMenuEvent,\n IntSetOpenMenuEvent,\n IntSetMenuContentsEvent,\n IntSetMenuShortcuts,\n IntLoadingStateUpdatedEvent,\n} from './interfaces/event-interfaces';\n\nimport { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';\n\n@customElement('item-navigator')\nexport class ItemNavigator extends LitElement {\n @property({\n type: Object,\n converter: (value: string | MetadataResponse | null): MetadataResponse => {\n if (typeof value === 'string') {\n return new MetadataResponse(JSON.parse(atob(value)));\n }\n return value as MetadataResponse;\n },\n })\n item: MetadataResponse | undefined = undefined;\n\n @property({ type: String }) itemType = '';\n\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({\n converter: (arg: string | boolean | null) => {\n if (typeof arg === 'boolean') {\n return arg;\n }\n return arg === 'true';\n },\n })\n signedIn = false;\n\n @property({\n type: Array,\n hasChanged: (newVal: Array<object>, oldVal: Array<object>) => {\n if (newVal !== oldVal) {\n return true;\n }\n return false;\n },\n })\n menuShortcuts: IntMenuShortcut[] = [];\n\n @property({ type: Array }) menuContents: IntMenuProvider[] = [];\n\n @property({ type: Boolean }) viewportInFullscreen = false;\n\n @property({ type: Boolean }) menuOpened = false;\n\n @property({ type: String }) openMenu = '';\n\n @property({ type: Object }) modal:\n | ModalManagerInterface\n | undefined = undefined;\n\n @state() loaded: boolean = false;\n\n firstUpdated(): void {\n if (!this.modal) {\n this.createModal();\n }\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hide';\n return html`\n <div id=\"frame\" class=${this.menuClass}>\n <slot name=\"item-nav-header\"></slot>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n ${!this.loaded\n ? html`<ia-itemnav-loader></ia-itemnav-loader>`\n : nothing}\n ${this.item\n ? html`<div id=\"reader\" class=${displayReaderClass}>\n ${this.renderViewport}\n </div>`\n : nothing}\n </div>\n </div>\n `;\n }\n\n get BooksViewer(): TemplateResult {\n return html`\n <book-navigator\n .baseHost=${this.baseHost}\n .book=${this.item}\n ?signedIn=${this.signedIn}\n ?sideMenuOpen=${this.menuOpened}\n @ViewportInFullScreen=${this.manageViewportFullscreen}\n @loadingStateUpdated=${this.loadingStateUpdated}\n @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n @showItemNavigatorModal=${this.openModal}\n @closeItemNavigatorModal=${this.closeModal}\n >\n <div slot=\"bookreader\">\n <slot name=\"bookreader\"></slot>\n </div>\n </book-navigator>\n `;\n }\n\n get renderViewport(): TemplateResult | typeof nothing {\n if (!this.item) {\n return nothing;\n }\n if (this.itemType === 'bookreader') {\n return this.BooksViewer;\n }\n return html` <ia-item-inspector\n .itemMD=${this.item}\n @loadingStateUpdated=${this.loadingStateUpdated}\n @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n ></ia-item-inspector>`;\n }\n\n loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = !!loaded;\n }\n\n /* Modal management */\n openModal(e: IntOpenModalEvent): void {\n const { config, customModalContent } = e.detail;\n if (!config || !customModalContent) {\n return;\n }\n\n this.modal?.showModal({\n config,\n customModalContent,\n });\n }\n\n closeModal(): void {\n this.modal?.closeModal();\n }\n\n /** Creates modal DOM & attaches to `<body>` */\n private createModal(): void {\n this.modal = document.createElement(\n 'modal-manager'\n ) as ModalManagerInterface;\n document.body.appendChild(this.modal);\n }\n /* End Modal management */\n\n /** Fullscreen Management */\n manageViewportFullscreen(e: IntManageFullscreenEvent): void {\n const { isFullScreen } = e.detail;\n this.viewportInFullscreen = isFullScreen;\n }\n /** End Fullscreen Management */\n\n /** Side menu */\n get shouldRenderMenu(): boolean {\n return !!(this.menuContents.length || this.menuShortcuts.length);\n }\n\n toggleMenu(): void {\n this.menuOpened = !this.menuOpened;\n }\n\n closeMenu(): void {\n this.menuOpened = false;\n }\n\n setOpenMenu(e: IntSetOpenMenuEvent): void {\n const { id } = e.detail;\n this.openMenu = id === this.openMenu ? '' : id;\n }\n\n setMenuContents(e: IntSetMenuContentsEvent): void {\n const updatedContents = [...e.detail];\n this.menuContents = updatedContents;\n }\n\n /** Toggles Side Menu & Sets viewable subpanel */\n manageSideMenuEvents(e: IntManageSideMenuEvent): void {\n const { menuId, action } = e.detail;\n if (menuId) {\n if (action === 'open') {\n this.openShortcut(menuId);\n } else if (action === 'toggle') {\n this.openMenu = menuId;\n this.toggleMenu();\n }\n }\n }\n\n get renderSideMenu(): TemplateResult {\n const drawerState = this.menuOpened ? '' : 'hidden';\n\n return html`\n <nav>\n <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n <div id=\"menu\" class=${drawerState}>\n <ia-menu-slider\n .menus=${this.menuContents}\n .selectedMenu=${this.openMenu}\n @menuTypeSelected=${this.setOpenMenu}\n @menuSliderClosed=${this.closeMenu}\n manuallyHandleClose\n open\n ></ia-menu-slider>\n </div>\n </nav>\n `;\n }\n /** End Side menu */\n\n /** Menu Shortcuts */\n setMenuShortcuts(e: IntSetMenuShortcuts): void {\n this.menuShortcuts = [...e.detail];\n }\n\n openShortcut(selectedMenuId = ''): void {\n this.openMenu = selectedMenuId;\n this.menuOpened = true;\n }\n\n get shortcuts(): TemplateResult {\n const shortcuts = this.menuShortcuts.map(\n ({ icon, id }) => html`\n <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n ${icon}\n </button>\n `\n );\n return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n }\n /** End Menu Shortcuts */\n\n /** Misc Render */\n get menuClass(): string {\n const drawerState = this.menuOpened ? 'open' : '';\n const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n return `${drawerState} ${fullscreenState}`;\n }\n\n get menuToggleButton(): TemplateResult {\n return html`\n <button\n class=\"toggle-menu\"\n @click=${() => this.toggleMenu()}\n title=\"Toggle theater side panels\"\n >\n <div><ia-icon-ellipses></ia-icon-ellipses></div>\n </button>\n `;\n }\n\n static get styles() {\n const subnavWidth = css`var(--menuWidth, 320px)`;\n const tabletPlusQuery = css`\n @media (min-width: 640px);\n `;\n const transitionTiming = css`var(--animationTiming, 200ms)`;\n const transitionEffect = css`transform ${transitionTiming} ease-out`;\n\n return css`\n :host,\n #frame,\n #reader,\n .menu-and-reader {\n min-height: inherit;\n height: inherit;\n position: relative;\n overflow: hidden;\n display: block;\n }\n #frame {\n border: 1px solid white;\n }\n\n #frame.fullscreen,\n #frame.fullscreen #reader {\n height: 100vh;\n }\n\n .hidden {\n height: 1px;\n width: 1px;\n }\n\n button {\n cursor: pointer;\n padding: 0;\n border: 0;\n }\n\n button:focus,\n button:active {\n outline: none;\n }\n\n .menu-and-reader {\n position: relative;\n }\n\n nav button {\n background: none;\n }\n\n nav .minimized {\n background: rgba(0, 0, 0, 0.7);\n border-bottom-right-radius: 5%;\n position: absolute;\n padding-top: 0.6rem;\n left: 0;\n width: 4rem;\n z-index: 2;\n }\n\n nav .minimized button {\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin: auto;\n display: inline-flex;\n vertical-align: middle;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n width: 4rem;\n height: 4rem;\n }\n\n nav .minimized button.toggle-menu > * {\n border: 2px solid var(--iconStrokeColor);\n border-radius: var(--iconWidth);\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin: auto;\n }\n\n ia-icon-ellipses {\n width: var(--iconWidth);\n height: var(--iconHeight);\n }\n\n #menu {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 3;\n overflow: hidden;\n transform: translateX(-${subnavWidth});\n width: ${subnavWidth};\n transform: translateX(calc(${subnavWidth} * -1));\n transition: ${transitionEffect};\n }\n\n #reader {\n position: relative;\n z-index: 1;\n transition: ${transitionEffect};\n transform: translateX(0);\n width: 100%;\n }\n\n .open #menu {\n width: ${subnavWidth};\n transform: translateX(0);\n transition: ${transitionEffect};\n }\n\n ${tabletPlusQuery} {\n .open #reader {\n transition: ${transitionEffect};\n transform: translateX(${subnavWidth});\n width: calc(100% - ${subnavWidth});\n }\n }\n `;\n }\n}\n\ncustomElements.define('ia-menu-slider', IAMenuSlider);\n"]}
|
1
|
+
{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n customElement,\n property,\n state,\n query,\n PropertyValues,\n CSSResult,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n SharedResizeObserver,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport '@internetarchive/ia-menu-slider';\n\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n ToggleSideMenuOpenEvent,\n ToggleSidePanelOpenEvent,\n SetSideMenuContentsEvent,\n SetSideMenuShortcutsEvent,\n loadingStateUpdatedEvent,\n ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport {\n MenuProviderInterface,\n MenuShortcutInterface,\n MenuId,\n} from './interfaces/menu-interfaces';\nimport './no-theater-available';\n\nexport enum ItemType {\n BOOK = 'bookreader',\n}\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n extends LitElement\n implements SharedResizeObserverResizeHandlerInterface {\n @property({\n type: Object,\n converter: (value: string | MetadataResponse | null): MetadataResponse => {\n if (value && typeof value === 'string') {\n return new MetadataResponse(JSON.parse(atob(value)));\n }\n return value as MetadataResponse;\n },\n })\n item?: MetadataResponse;\n\n @property({ type: String }) itemType?: ItemType;\n\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({\n converter: (arg: string | boolean | null) => {\n if (typeof arg === 'boolean') {\n return arg;\n }\n return arg === 'true';\n },\n })\n signedIn = false;\n\n @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n @property({ type: Boolean, reflect: true, attribute: true })\n viewportInFullscreen: boolean | null = null;\n\n @property({ type: Boolean }) menuOpened = false;\n\n @property({ type: String }) openMenu?: MenuId;\n\n @property({ attribute: false }) modal?: ModalManager;\n\n @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n @property({ type: Boolean, reflect: true, attribute: true }) loaded:\n | true\n | null = null;\n\n @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n @query('#frame') private frame!: HTMLDivElement;\n\n @query('slot[name=\"theater-header\"]') private headerSlot!: HTMLDivElement;\n\n disconnectedCallback() {\n this.removeResizeObserver();\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('sharedObserver')) {\n const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;\n oldObserver?.removeObserver(this.resizeObserverConfig);\n this.setResizeObserver();\n }\n }\n\n /** Shared observer */\n handleResize(entry: ResizeObserverEntry): void {\n const { width } = entry.contentRect;\n if (width <= 600) {\n this.openMenuState = 'overlay';\n return;\n }\n this.openMenuState = 'shift';\n }\n\n private setResizeObserver(): void {\n this.sharedObserver?.addObserver(this.resizeObserverConfig);\n }\n\n private removeResizeObserver(): void {\n this.sharedObserver?.removeObserver(this.resizeObserverConfig);\n }\n\n get resizeObserverConfig(): {\n handler: SharedResizeObserverResizeHandlerInterface;\n target: Element;\n } {\n return {\n handler: this,\n target: this.frame,\n };\n }\n /** End shared observer */\n\n get loaderTitle() {\n return this.viewportInFullscreen ? 'Internet Archive' : '';\n }\n\n get readerHeightStyle(): string {\n const calcFSHeight = `calc(100vh - ${this.headerSlot?.offsetHeight}px)`;\n return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';\n }\n\n get loadingArea() {\n return html`\n <div class=\"loading-area\">\n <div class=\"loading-view\">\n <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>\n </div>\n </div>\n `;\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hidden';\n return html`\n <div id=\"frame\" class=${`${this.menuClass}`}>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n <slot name=\"theater-header\"></slot>\n <div\n id=\"reader\"\n class=${displayReaderClass}\n style=${this.readerHeightStyle}\n >\n ${this.renderViewport}\n </div>\n ${!this.loaded ? this.loadingArea : nothing}\n </div>\n </div>\n `;\n }\n\n get noTheaterView() {\n return html`<ia-no-theater-available\n .identifier=${this.item?.metadata?.identifier}\n @loadingStateUpdated=${this.loadingStateUpdated}\n ></ia-no-theater-available>`;\n }\n\n get theaterSlot() {\n return html`\n <slot name=\"theater-main\" style=${this.readerHeightStyle}></slot>\n `;\n }\n\n get booksViewer(): TemplateResult {\n const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n\n return html`\n <book-navigator\n .modal=${this.modal}\n .baseHost=${this.baseHost}\n .itemMD=${this.item}\n ?signedIn=${this.signedIn}\n ?sideMenuOpen=${this.menuOpened}\n .sharedObserver=${this.sharedObserver}\n @ViewportInFullScreen=${this.manageViewportFullscreen}\n @loadingStateUpdated=${this.loadingStateUpdated}\n @updateSideMenu=${this.manageSideMenuEvents}\n @menuUpdated=${this.setMenuContents}\n @menuShortcutsUpdated=${this.setMenuShortcuts}\n >\n <div slot=\"theater-main\" style=${slotVisibility}>\n ${this.theaterSlot}\n </div>\n </book-navigator>\n `;\n }\n\n get renderViewport(): TemplateResult | typeof nothing {\n if (!this.item) {\n return nothing;\n }\n if (this.itemType === ItemType.BOOK) {\n return this.booksViewer;\n }\n return this.noTheaterView;\n }\n\n loadingStateUpdated(e: loadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = loaded || null;\n }\n\n /** Fullscreen Management */\n manageViewportFullscreen(e: ManageFullscreenEvent): void {\n const fullscreenStatus = !!e.detail.isFullScreen;\n this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n const event = new CustomEvent('fullscreenToggled', {\n detail: e.detail,\n }) as ManageFullscreenEvent;\n\n this.dispatchEvent(event);\n }\n /** End Fullscreen Management */\n\n /** Side menu */\n get shouldRenderMenu(): boolean {\n return !!this.menuContents.length;\n }\n\n toggleMenu(): void {\n this.menuOpened = !this.menuOpened;\n }\n\n closeMenu(): void {\n this.menuOpened = false;\n }\n\n setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n const { id } = e.detail;\n this.openMenu = id !== this.openMenu ? id : undefined;\n }\n\n setMenuContents(e: SetSideMenuContentsEvent): void {\n const updatedContents = [...e.detail];\n this.menuContents = updatedContents;\n }\n\n setMenuShortcuts(e: SetSideMenuShortcutsEvent) {\n this.menuShortcuts = [...e.detail];\n }\n\n /** Toggles Side Menu & Sets viewable subpanel */\n manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n const { menuId, action } = e.detail;\n if (!menuId) {\n return;\n }\n\n if (action === 'open') {\n this.openShortcut(menuId);\n } else if (action === 'toggle') {\n this.openMenu = menuId;\n this.toggleMenu();\n }\n }\n\n get menuToggleButton() {\n return html`\n <button\n class=\"toggle-menu\"\n @click=${this.toggleMenu}\n title=\"Toggle theater side panels\"\n >\n <div>\n <ia-icon-ellipses\n style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n ></ia-icon-ellipses>\n </div>\n </button>\n `;\n }\n\n get selectedMenuId(): MenuId | '' {\n return this.openMenu || '';\n }\n\n get renderSideMenu(): TemplateResult {\n const drawerState = this.menuOpened ? '' : 'hidden';\n return html`\n <nav>\n <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n <div id=\"menu\" class=${drawerState}>\n <ia-menu-slider\n .menus=${this.menuContents}\n .selectedMenu=${this.selectedMenuId}\n @menuTypeSelected=${this.setOpenMenu}\n @menuSliderClosed=${this.closeMenu}\n manuallyHandleClose\n open\n ></ia-menu-slider>\n </div>\n </nav>\n `;\n }\n /** End Side menu */\n\n /** Menu Shortcuts */\n openShortcut(selectedMenuId: MenuId = ''): void {\n this.openMenu = selectedMenuId;\n this.menuOpened = true;\n }\n\n get shortcuts(): TemplateResult {\n const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n if (id === 'fullscreen') {\n return html`${icon}`;\n }\n\n return html`\n <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n ${icon}\n </button>\n `;\n });\n return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n }\n /** End Menu Shortcuts */\n\n /** Misc Render */\n get menuClass(): string {\n const drawerState = this.menuOpened ? 'open' : '';\n const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n }\n\n static get styles(): CSSResult {\n const subnavWidth = css`var(--menuWidth, 320px)`;\n const transitionTiming = css`var(--animationTiming, 200ms)`;\n const transitionEffect = css`transform ${transitionTiming} ease-out`;\n const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n const theaterBg = css`var(--theaterBgColor, #000)`;\n\n return css`\n :host,\n #frame,\n .menu-and-reader {\n min-height: inherit;\n height: inherit;\n position: relative;\n overflow: hidden;\n display: block;\n }\n\n :host,\n #frame,\n .menu-and-reader,\n .loading-area,\n .loading-view {\n min-height: inherit;\n height: inherit;\n }\n\n slot {\n display: block;\n overflow: hidden;\n }\n\n #frame {\n background-color: ${theaterBg};\n color-scheme: dark;\n }\n\n #frame.fullscreen {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 9;\n }\n\n .loading-view {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\n }\n\n .hidden {\n display: none;\n }\n\n button {\n cursor: pointer;\n padding: 0;\n border: 0;\n }\n\n button:focus,\n button:active {\n outline: none;\n }\n\n .menu-and-reader {\n position: relative;\n }\n\n nav button {\n background: none;\n }\n\n nav .minimized {\n background: rgba(0, 0, 0, 0.7);\n padding-top: 6px;\n position: absolute;\n width: ${menuMargin};\n z-index: 2;\n left: 0;\n border-bottom-right-radius: 5%;\n }\n\n nav .minimized button {\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin-bottom: 0.2rem;\n margin: auto;\n display: inline-flex;\n vertical-align: middle;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n width: ${menuMargin};\n height: ${menuMargin};\n }\n\n nav .minimized button.toggle-menu > * {\n border: 2px solid var(--iconStrokeColor);\n border-radius: var(--iconWidth);\n width: var(--iconWidth);\n height: var(--iconHeight);\n margin: auto;\n }\n\n ia-icon-ellipses {\n width: var(--iconWidth);\n height: var(--iconHeight);\n }\n\n #menu {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 3;\n overflow: hidden;\n transform: translateX(-${subnavWidth});\n width: ${subnavWidth};\n transform: translateX(calc(${subnavWidth} * -1));\n transition: ${transitionEffect};\n }\n\n #reader {\n position: relative;\n z-index: 1;\n /* transition: ${transitionEffect}; */\n transform: translateX(0);\n width: 100%;\n }\n\n .open.overlay #reader {\n transition: none;\n }\n\n .open #menu {\n width: ${subnavWidth};\n transform: translateX(0);\n transition: ${transitionEffect};\n }\n\n .open.shift slot[name='theater-header'],\n .open.shift #reader {\n width: calc(100% - var(--menuWidth));\n float: right;\n transition: ${transitionEffect};\n }\n `;\n }\n}\n"]}
|
package/dist/src/loader.d.ts
CHANGED
@@ -1,5 +1,10 @@
|
|
1
1
|
import { LitElement } from 'lit-element';
|
2
2
|
export declare class IAItemNavLoader extends LitElement {
|
3
|
+
static get properties(): {
|
4
|
+
title: {
|
5
|
+
type: StringConstructor;
|
6
|
+
};
|
7
|
+
};
|
3
8
|
get bookIconSvg(): import("lit-element").SVGTemplateResult;
|
4
9
|
get icon(): import("lit-element").SVGTemplateResult;
|
5
10
|
get loader(): import("lit-element").SVGTemplateResult;
|
package/dist/src/loader.js
CHANGED
@@ -1,8 +1,13 @@
|
|
1
1
|
import { __decorate } from "tslib";
|
2
2
|
/* eslint-disable class-methods-use-this */
|
3
3
|
import { css, html, LitElement, customElement } from 'lit-element';
|
4
|
-
import { svg } from 'lit-html';
|
4
|
+
import { svg, nothing } from 'lit-html';
|
5
5
|
let IAItemNavLoader = class IAItemNavLoader extends LitElement {
|
6
|
+
static get properties() {
|
7
|
+
return {
|
8
|
+
title: { type: String },
|
9
|
+
};
|
10
|
+
}
|
6
11
|
get bookIconSvg() {
|
7
12
|
return svg `
|
8
13
|
<g class="bookIcon" transform="matrix(1 0 0 -1 28 67.362264)">
|
@@ -38,9 +43,10 @@ let IAItemNavLoader = class IAItemNavLoader extends LitElement {
|
|
38
43
|
`;
|
39
44
|
}
|
40
45
|
render() {
|
46
|
+
const title = this.title ? html `<h2>${this.title}</h2>` : nothing;
|
41
47
|
return html `
|
42
48
|
<div class="place-holder">
|
43
|
-
${this.loader}
|
49
|
+
${title} ${this.loader}
|
44
50
|
<h3>Loading viewer</h3>
|
45
51
|
</div>
|
46
52
|
`;
|