@internetarchive/ia-item-navigator 0.0.0-a10 → 0.0.0-a12
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/demo/app-root.ts +6 -4
- package/dist/demo/app-root.d.ts +0 -1
- package/dist/demo/app-root.js +1 -3
- package/dist/demo/app-root.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 -47
- package/dist/src/item-inspector/item-inspector.js +253 -271
- package/dist/src/item-inspector/item-inspector.js.map +1 -1
- package/dist/src/item-navigator.d.ts +14 -7
- package/dist/src/item-navigator.js +60 -30
- package/dist/src/item-navigator.js.map +1 -1
- package/dist/src/no-theater-available.d.ts +9 -0
- package/dist/src/no-theater-available.js +79 -0
- package/dist/src/no-theater-available.js.map +1 -0
- package/dist/test/book-nav-stub.d.ts +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 +1 -0
- package/dist/test/ia-item-navigator.test.js +146 -114
- package/dist/test/ia-item-navigator.test.js.map +1 -1
- package/dist/test/ia-stub.d.ts +22 -0
- package/dist/test/ia-stub.js +34 -3
- package/dist/test/ia-stub.js.map +1 -1
- package/dist/test/no-theater-available.test.d.ts +1 -0
- package/dist/test/no-theater-available.test.js +27 -0
- package/dist/test/no-theater-available.test.js.map +1 -0
- package/package.json +3 -2
- package/src/interfaces/nav-controller-interface.ts +13 -0
- package/src/item-navigator.ts +69 -36
- package/src/no-theater-available.ts +87 -0
- package/test/book-nav-stub.ts +35 -0
- package/test/ia-item-navigator.test.ts +191 -143
- package/test/ia-stub.ts +78 -2
- package/test/no-theater-available.test.ts +32 -0
- package/src/item-inspector/item-inspector.ts +0 -296
@@ -1,13 +1,14 @@
|
|
1
|
-
import { LitElement, PropertyValues } from 'lit-element';
|
1
|
+
import { LitElement, PropertyValues, CSSResult } from 'lit-element';
|
2
2
|
import { nothing, TemplateResult } from 'lit-html';
|
3
3
|
import { MetadataResponse } from '@internetarchive/search-service';
|
4
|
-
import {
|
4
|
+
import { SharedResizeObserver, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
|
5
5
|
import '@internetarchive/ia-menu-slider';
|
6
6
|
import { ModalManagerInterface } from '@internetarchive/modal-manager';
|
7
7
|
import '@internetarchive/icon-ellipses/icon-ellipses';
|
8
8
|
import './loader';
|
9
9
|
import { IntManageSideMenuEvent, IntSetOpenMenuEvent, IntSetMenuContentsEvent, IntSetMenuShortcutsEvent, IntLoadingStateUpdatedEvent, IntManageFullscreenEvent } from './interfaces/event-interfaces';
|
10
10
|
import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
|
11
|
+
import './no-theater-available';
|
11
12
|
export declare class ItemNavigator extends LitElement implements SharedResizeObserverResizeHandlerInterface {
|
12
13
|
item: MetadataResponse | undefined;
|
13
14
|
itemType: string;
|
@@ -15,21 +16,27 @@ export declare class ItemNavigator extends LitElement implements SharedResizeObs
|
|
15
16
|
signedIn: boolean;
|
16
17
|
menuContents: IntMenuProvider[];
|
17
18
|
menuShortcuts: IntMenuShortcut[];
|
18
|
-
viewportInFullscreen: boolean;
|
19
|
+
viewportInFullscreen: boolean | null;
|
19
20
|
menuOpened: boolean;
|
20
21
|
openMenu: string;
|
21
22
|
modal?: ModalManagerInterface;
|
22
|
-
sharedObserver?:
|
23
|
-
loaded: boolean;
|
23
|
+
sharedObserver?: SharedResizeObserver;
|
24
|
+
loaded: boolean | null;
|
24
25
|
openMenuState: 'overlay' | 'shift';
|
25
26
|
private frame;
|
27
|
+
private headerSlot;
|
26
28
|
disconnectedCallback(): void;
|
27
|
-
firstUpdated(
|
29
|
+
firstUpdated(): void;
|
28
30
|
updated(changed: PropertyValues): void;
|
29
31
|
handleResize(entry: ResizeObserverEntry): void;
|
30
32
|
private startResizeObserver;
|
31
33
|
get loaderTitle(): "" | "Internet Archive";
|
34
|
+
get readerHeightStyle(): string;
|
35
|
+
handleHeaderSlotChange(e: Event): void;
|
36
|
+
get loadingArea(): TemplateResult;
|
32
37
|
render(): TemplateResult;
|
38
|
+
get noTheaterView(): TemplateResult;
|
39
|
+
get theaterSlot(): TemplateResult;
|
33
40
|
get BooksViewer(): TemplateResult;
|
34
41
|
get renderViewport(): TemplateResult | typeof nothing;
|
35
42
|
loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void;
|
@@ -56,5 +63,5 @@ export declare class ItemNavigator extends LitElement implements SharedResizeObs
|
|
56
63
|
/** End Menu Shortcuts */
|
57
64
|
/** Misc Render */
|
58
65
|
get menuClass(): string;
|
59
|
-
static get styles():
|
66
|
+
static get styles(): CSSResult;
|
60
67
|
}
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import { __decorate } from "tslib";
|
2
|
-
/* eslint-disable import/no-duplicates */
|
3
2
|
import { css, html, LitElement, customElement, property, state, query, } from 'lit-element';
|
4
3
|
import { nothing } from 'lit-html';
|
5
4
|
import { MetadataResponse } from '@internetarchive/search-service';
|
@@ -9,6 +8,7 @@ import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
|
|
9
8
|
import '@internetarchive/ia-menu-slider';
|
10
9
|
import '@internetarchive/icon-ellipses/icon-ellipses';
|
11
10
|
import './loader';
|
11
|
+
import './no-theater-available';
|
12
12
|
let ItemNavigator = class ItemNavigator extends LitElement {
|
13
13
|
constructor() {
|
14
14
|
super(...arguments);
|
@@ -18,10 +18,10 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
18
18
|
this.signedIn = false;
|
19
19
|
this.menuContents = [];
|
20
20
|
this.menuShortcuts = [];
|
21
|
-
this.viewportInFullscreen =
|
21
|
+
this.viewportInFullscreen = null;
|
22
22
|
this.menuOpened = false;
|
23
23
|
this.openMenu = '';
|
24
|
-
this.loaded =
|
24
|
+
this.loaded = null;
|
25
25
|
this.openMenuState = 'shift';
|
26
26
|
}
|
27
27
|
disconnectedCallback() {
|
@@ -31,8 +31,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
31
31
|
target: this.frame,
|
32
32
|
});
|
33
33
|
}
|
34
|
-
firstUpdated(
|
35
|
-
console.log('first updated item-nav', this.modal, pp);
|
34
|
+
firstUpdated() {
|
36
35
|
if (!this.modal) {
|
37
36
|
this.createModal();
|
38
37
|
}
|
@@ -70,29 +69,57 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
70
69
|
get loaderTitle() {
|
71
70
|
return this.viewportInFullscreen ? 'Internet Archive' : '';
|
72
71
|
}
|
72
|
+
get readerHeightStyle() {
|
73
|
+
var _a;
|
74
|
+
const calcFSHeight = `calc(100vh - ${(_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.offsetHeight}px)`;
|
75
|
+
return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
|
76
|
+
}
|
77
|
+
handleHeaderSlotChange(e) {
|
78
|
+
console.log('~~~~ handleHeaderSlotChange', e);
|
79
|
+
}
|
80
|
+
get loadingArea() {
|
81
|
+
return html `
|
82
|
+
<div class="loading-area">
|
83
|
+
<div class="loading-view">
|
84
|
+
<ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>
|
85
|
+
</div>
|
86
|
+
</div>
|
87
|
+
`;
|
88
|
+
}
|
73
89
|
render() {
|
74
90
|
const displayReaderClass = this.loaded ? '' : 'hide';
|
75
91
|
return html `
|
76
92
|
<div id="frame" class=${`${this.menuClass}`}>
|
77
|
-
<slot name="theater-header"></slot>
|
78
93
|
<div class="menu-and-reader">
|
79
94
|
${this.shouldRenderMenu ? this.renderSideMenu : nothing}
|
80
|
-
<
|
95
|
+
<slot
|
96
|
+
name="theater-header"
|
97
|
+
@slotchange=${this.handleHeaderSlotChange}
|
98
|
+
></slot>
|
99
|
+
<div
|
100
|
+
id="reader"
|
101
|
+
class=${displayReaderClass}
|
102
|
+
style=${this.readerHeightStyle}
|
103
|
+
>
|
81
104
|
${this.renderViewport}
|
82
105
|
</div>
|
83
|
-
${!this.loaded
|
84
|
-
? html ` <div class="loading-area">
|
85
|
-
<div class="loading-view">
|
86
|
-
<ia-itemnav-loader
|
87
|
-
.title=${this.loaderTitle}
|
88
|
-
></ia-itemnav-loader>
|
89
|
-
</div>
|
90
|
-
</div>`
|
91
|
-
: nothing}
|
106
|
+
${!this.loaded ? this.loadingArea : nothing}
|
92
107
|
</div>
|
93
108
|
</div>
|
94
109
|
`;
|
95
110
|
}
|
111
|
+
get noTheaterView() {
|
112
|
+
var _a, _b;
|
113
|
+
return html `<ia-no-theater-available
|
114
|
+
.identifier=${(_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.identifier}
|
115
|
+
@loadingStateUpdated=${this.loadingStateUpdated}
|
116
|
+
></ia-no-theater-available>`;
|
117
|
+
}
|
118
|
+
get theaterSlot() {
|
119
|
+
return html `
|
120
|
+
<slot name="theater-main" style=${this.readerHeightStyle}></slot>
|
121
|
+
`;
|
122
|
+
}
|
96
123
|
get BooksViewer() {
|
97
124
|
const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
|
98
125
|
return html `
|
@@ -110,7 +137,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
110
137
|
@menuShortcutsUpdated=${this.setMenuShortcuts}
|
111
138
|
>
|
112
139
|
<div slot="theater-main" style=${slotVisibility}>
|
113
|
-
|
140
|
+
${this.theaterSlot}
|
114
141
|
</div>
|
115
142
|
</book-navigator>
|
116
143
|
`;
|
@@ -122,12 +149,11 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
122
149
|
if (this.itemType === 'bookreader') {
|
123
150
|
return this.BooksViewer;
|
124
151
|
}
|
125
|
-
return
|
152
|
+
return this.noTheaterView;
|
126
153
|
}
|
127
154
|
loadingStateUpdated(e) {
|
128
155
|
const { loaded } = e.detail;
|
129
156
|
this.loaded = !!loaded;
|
130
|
-
console.log('******loadingStateUpdated', e.detail);
|
131
157
|
}
|
132
158
|
/** Creates modal DOM & attaches to `<body>` */
|
133
159
|
createModal() {
|
@@ -137,10 +163,12 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
137
163
|
/* End Modal management */
|
138
164
|
/** Fullscreen Management */
|
139
165
|
manageViewportFullscreen(e) {
|
140
|
-
|
141
|
-
this.
|
166
|
+
const fullscreenStatus = !!e.detail.isFullScreen;
|
167
|
+
this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
|
168
|
+
const event = new CustomEvent('fullscreenToggled', {
|
142
169
|
detail: e.detail,
|
143
|
-
})
|
170
|
+
});
|
171
|
+
this.dispatchEvent(event);
|
144
172
|
}
|
145
173
|
/** End Fullscreen Management */
|
146
174
|
/** Side menu */
|
@@ -179,7 +207,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
179
207
|
}
|
180
208
|
}
|
181
209
|
get menuToggleButton() {
|
182
|
-
// <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
|
183
210
|
return html `
|
184
211
|
<button
|
185
212
|
class="toggle-menu"
|
@@ -247,7 +274,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
247
274
|
return css `
|
248
275
|
:host,
|
249
276
|
#frame,
|
250
|
-
#reader,
|
251
277
|
.menu-and-reader {
|
252
278
|
min-height: inherit;
|
253
279
|
height: inherit;
|
@@ -256,6 +282,11 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
256
282
|
display: block;
|
257
283
|
}
|
258
284
|
|
285
|
+
slot {
|
286
|
+
display: block;
|
287
|
+
overflow: hidden;
|
288
|
+
}
|
289
|
+
|
259
290
|
#frame {
|
260
291
|
background-color: ${theaterBg};
|
261
292
|
color-scheme: dark;
|
@@ -270,11 +301,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
270
301
|
z-index: 9;
|
271
302
|
}
|
272
303
|
|
273
|
-
#frame.fullscreen,
|
274
|
-
#frame.fullscreen #reader {
|
275
|
-
height: 100vh;
|
276
|
-
}
|
277
|
-
|
278
304
|
.loading-area {
|
279
305
|
position: absolute;
|
280
306
|
top: 0;
|
@@ -391,6 +417,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
391
417
|
transition: ${transitionEffect};
|
392
418
|
}
|
393
419
|
|
420
|
+
.open.shift slot[name='theater-header'],
|
394
421
|
.open.shift #reader {
|
395
422
|
width: calc(100% - var(--menuWidth));
|
396
423
|
float: right;
|
@@ -457,7 +484,7 @@ __decorate([
|
|
457
484
|
property({ attribute: false })
|
458
485
|
], ItemNavigator.prototype, "sharedObserver", void 0);
|
459
486
|
__decorate([
|
460
|
-
property({
|
487
|
+
property({ reflect: true, attribute: true })
|
461
488
|
], ItemNavigator.prototype, "loaded", void 0);
|
462
489
|
__decorate([
|
463
490
|
state()
|
@@ -465,6 +492,9 @@ __decorate([
|
|
465
492
|
__decorate([
|
466
493
|
query('#frame')
|
467
494
|
], ItemNavigator.prototype, "frame", void 0);
|
495
|
+
__decorate([
|
496
|
+
query('slot[name="theater-header"]')
|
497
|
+
], ItemNavigator.prototype, "headerSlot", void 0);
|
468
498
|
ItemNavigator = __decorate([
|
469
499
|
customElement('ia-item-navigator')
|
470
500
|
], ItemNavigator);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n css,\n html,\n LitElement,\n customElement,\n property,\n state,\n query,\n PropertyValues,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n SharedResizeObserver,\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\n// @ts-ignore\nimport { IAMenuSlider } from '@internetarchive/ia-menu-slider';\nimport '@internetarchive/ia-menu-slider';\n\nimport { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n IntManageSideMenuEvent,\n IntSetOpenMenuEvent,\n IntSetMenuContentsEvent,\n IntSetMenuShortcutsEvent,\n IntLoadingStateUpdatedEvent,\n IntManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';\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 | 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 @property({ type: Array })\n menuContents: IntMenuProvider[] = [];\n\n @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];\n\n @property({ type: Boolean, reflect: true }) viewportInFullscreen = false;\n\n @property({ type: Boolean }) menuOpened = false;\n\n @property({ type: String }) openMenu = '';\n\n @property({ attribute: false }) modal?: ModalManagerInterface;\n\n @property({ attribute: false })\n sharedObserver?: SharedResizeObserverInterface;\n\n @property({ type: Boolean, reflect: true }) loaded: boolean = false;\n\n @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n @query('#frame') private frame!: HTMLDivElement;\n\n disconnectedCallback() {\n this.sharedObserver?.removeObserver({\n handler: this,\n target: this.frame,\n });\n }\n\n firstUpdated(pp: any): void {\n console.log('first updated item-nav', this.modal, pp);\n if (!this.modal) {\n this.createModal();\n }\n\n this.startResizeObserver();\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('modal')) {\n if (!this.modal) {\n this.createModal();\n }\n }\n if (changed.has('sharedObserver')) {\n if (!this.sharedObserver) {\n this.startResizeObserver();\n }\n }\n }\n\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 startResizeObserver(): void {\n if (!this.sharedObserver) {\n this.sharedObserver = new SharedResizeObserver();\n }\n this.sharedObserver.addObserver({\n handler: this,\n target: this.frame,\n });\n }\n\n get loaderTitle() {\n return this.viewportInFullscreen ? 'Internet Archive' : '';\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hide';\n return html`\n <div id=\"frame\" class=${`${this.menuClass}`}>\n <slot name=\"theater-header\"></slot>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n <div id=\"reader\" class=${displayReaderClass}>\n ${this.renderViewport}\n </div>\n ${!this.loaded\n ? html` <div class=\"loading-area\">\n <div class=\"loading-view\">\n <ia-itemnav-loader\n .title=${this.loaderTitle}\n ></ia-itemnav-loader>\n </div>\n </div>`\n : nothing}\n </div>\n </div>\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 .book=${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 <slot name=\"theater-main\"></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 nothing;\n }\n\n loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = !!loaded;\n console.log('******loadingStateUpdated', e.detail);\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 this.viewportInFullscreen = !!e.detail.isFullScreen;\n this.dispatchEvent(\n new CustomEvent('ViewportInFullScreen', {\n detail: e.detail,\n }) as IntManageFullscreenEvent\n );\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: 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 setMenuShortcuts(e: IntSetMenuShortcutsEvent) {\n this.menuShortcuts = [...e.detail];\n }\n\n /** Toggles Side Menu & Sets viewable subpanel */\n manageSideMenuEvents(e: IntManageSideMenuEvent): 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 // <ia-icon icon=\"ellipses\" style=\"width: var(--iconWidth); height: var(--iconHeight);\"></ia-icon>\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 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 openShortcut(selectedMenuId = ''): 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() {\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 #reader,\n .menu-and-reader {\n min-height: inherit;\n height: inherit;\n position: relative;\n overflow: hidden;\n display: block;\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 #frame.fullscreen,\n #frame.fullscreen #reader {\n height: 100vh;\n }\n\n .loading-area {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: inherit;\n min-height: inherit;\n }\n\n .loading-view {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: inherit;\n height: inherit;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\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 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 #reader {\n width: calc(100% - var(--menuWidth));\n float: right;\n transition: ${transitionEffect};\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';\n// @ts-ignore\nimport { IAMenuSlider } from '@internetarchive/ia-menu-slider';\nimport '@internetarchive/ia-menu-slider';\n\nimport { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n IntManageSideMenuEvent,\n IntSetOpenMenuEvent,\n IntSetMenuContentsEvent,\n IntSetMenuShortcutsEvent,\n IntLoadingStateUpdatedEvent,\n IntManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';\nimport './no-theater-available';\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 | 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 @property({ type: Array })\n menuContents: IntMenuProvider[] = [];\n\n @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];\n\n @property({ type: Boolean, reflect: true }) viewportInFullscreen:\n | boolean\n | null = null;\n\n @property({ type: Boolean }) menuOpened = false;\n\n @property({ type: String }) openMenu = '';\n\n @property({ attribute: false }) modal?: ModalManagerInterface;\n\n @property({ attribute: false })\n sharedObserver?: SharedResizeObserver;\n\n @property({ reflect: true, attribute: true }) loaded: boolean | 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.sharedObserver?.removeObserver({\n handler: this,\n target: this.frame,\n });\n }\n\n firstUpdated(): void {\n if (!this.modal) {\n this.createModal();\n }\n\n this.startResizeObserver();\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('modal')) {\n if (!this.modal) {\n this.createModal();\n }\n }\n if (changed.has('sharedObserver')) {\n if (!this.sharedObserver) {\n this.startResizeObserver();\n }\n }\n }\n\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 startResizeObserver(): void {\n if (!this.sharedObserver) {\n this.sharedObserver = new SharedResizeObserver();\n }\n this.sharedObserver.addObserver({\n handler: this,\n target: this.frame,\n });\n }\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 handleHeaderSlotChange(e: Event) {\n console.log('~~~~ handleHeaderSlotChange', e);\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 ? '' : 'hide';\n return html`\n <div id=\"frame\" class=${`${this.menuClass}`}>\n <div class=\"menu-and-reader\">\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n <slot\n name=\"theater-header\"\n @slotchange=${this.handleHeaderSlotChange}\n ></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 .book=${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 === 'bookreader') {\n return this.BooksViewer;\n }\n return this.noTheaterView;\n }\n\n loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {\n const { loaded } = e.detail;\n this.loaded = !!loaded;\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 fullscreenStatus = !!e.detail.isFullScreen;\n this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n const event = new CustomEvent('fullscreenToggled', {\n detail: e.detail,\n }) as IntManageFullscreenEvent;\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: 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 setMenuShortcuts(e: IntSetMenuShortcutsEvent) {\n this.menuShortcuts = [...e.detail];\n }\n\n /** Toggles Side Menu & Sets viewable subpanel */\n manageSideMenuEvents(e: IntManageSideMenuEvent): 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 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 openShortcut(selectedMenuId = ''): 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 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-area {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: inherit;\n min-height: inherit;\n }\n\n .loading-view {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: inherit;\n height: inherit;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\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 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\ncustomElements.define('ia-menu-slider', IAMenuSlider);\n"]}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit-element';
|
2
|
+
export declare class IANoTheaterAvailable extends LitElement {
|
3
|
+
identifier?: string;
|
4
|
+
emitLoaded(): void;
|
5
|
+
updated(changed: PropertyValues): void;
|
6
|
+
get downloadUrl(): string;
|
7
|
+
render(): TemplateResult;
|
8
|
+
static get styles(): CSSResult;
|
9
|
+
}
|
@@ -0,0 +1,79 @@
|
|
1
|
+
import { __decorate } from "tslib";
|
2
|
+
import { LitElement, customElement, property, html, css, } from 'lit-element';
|
3
|
+
let IANoTheaterAvailable = class IANoTheaterAvailable extends LitElement {
|
4
|
+
constructor() {
|
5
|
+
super(...arguments);
|
6
|
+
this.identifier = '';
|
7
|
+
}
|
8
|
+
emitLoaded() {
|
9
|
+
this.dispatchEvent(new CustomEvent('loadingStateUpdated', {
|
10
|
+
detail: { loaded: true },
|
11
|
+
}));
|
12
|
+
}
|
13
|
+
updated(changed) {
|
14
|
+
if (changed.has('identifier')) {
|
15
|
+
this.emitLoaded();
|
16
|
+
}
|
17
|
+
}
|
18
|
+
get downloadUrl() {
|
19
|
+
return `/download/${this.identifier}`;
|
20
|
+
}
|
21
|
+
render() {
|
22
|
+
return html `
|
23
|
+
<section>
|
24
|
+
<h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>
|
25
|
+
<p>
|
26
|
+
This item does not appear to have any files that can be experienced on
|
27
|
+
Archive.org. <br />
|
28
|
+
Please download files in this item to interact with them on your
|
29
|
+
computer.
|
30
|
+
</p>
|
31
|
+
<a href=${this.downloadUrl}>Show all files</a>
|
32
|
+
</section>
|
33
|
+
`;
|
34
|
+
}
|
35
|
+
static get styles() {
|
36
|
+
return css `
|
37
|
+
:host {
|
38
|
+
color: var(--primaryTextColor, #fff);
|
39
|
+
text-align: center;
|
40
|
+
}
|
41
|
+
section {
|
42
|
+
margin: 10% auto 0;
|
43
|
+
padding: 0 5%;
|
44
|
+
}
|
45
|
+
p {
|
46
|
+
font-size: 1.4rem;
|
47
|
+
}
|
48
|
+
a {
|
49
|
+
color: var(--primaryTextColor, #fff);
|
50
|
+
background-color: rgb(25, 72, 128);
|
51
|
+
min-height: 35px;
|
52
|
+
outline: none;
|
53
|
+
cursor: pointer;
|
54
|
+
line-height: normal;
|
55
|
+
border-radius: 0.4rem;
|
56
|
+
text-align: center;
|
57
|
+
vertical-align: middle;
|
58
|
+
font-size: 1.4rem;
|
59
|
+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
60
|
+
display: inline-block;
|
61
|
+
padding: 0.85rem 1.2rem;
|
62
|
+
border: 1px solid rgb(197, 209, 223);
|
63
|
+
white-space: nowrap;
|
64
|
+
appearance: auto;
|
65
|
+
box-sizing: border-box;
|
66
|
+
user-select: none;
|
67
|
+
text-decoration: none;
|
68
|
+
}
|
69
|
+
`;
|
70
|
+
}
|
71
|
+
};
|
72
|
+
__decorate([
|
73
|
+
property({ type: String })
|
74
|
+
], IANoTheaterAvailable.prototype, "identifier", void 0);
|
75
|
+
IANoTheaterAvailable = __decorate([
|
76
|
+
customElement('ia-no-theater-available')
|
77
|
+
], IANoTheaterAvailable);
|
78
|
+
export { IANoTheaterAvailable };
|
79
|
+
//# sourceMappingURL=no-theater-available.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"no-theater-available.js","sourceRoot":"","sources":["../../src/no-theater-available.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,aAAa,EACb,QAAQ,EACR,IAAI,EAIJ,GAAG,GACJ,MAAM,aAAa,CAAC;AAKrB,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,UAAU;IAApD;;QAC8B,eAAU,GAAY,EAAE,CAAC;IAuEvD,CAAC;IArEC,UAAU;QACR,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;YACrC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;SACzB,CAAgC,CAClC,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;YAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;kBASG,IAAI,CAAC,WAAW;;KAE7B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCT,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA0B;AAD1C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAwEhC;SAxEY,oBAAoB","sourcesContent":["import {\n LitElement,\n customElement,\n property,\n html,\n TemplateResult,\n PropertyValues,\n CSSResult,\n css,\n} from 'lit-element';\n\nimport { IntLoadingStateUpdatedEvent } from './interfaces/event-interfaces';\n\n@customElement('ia-no-theater-available')\nexport class IANoTheaterAvailable extends LitElement {\n @property({ type: String }) identifier?: string = '';\n\n emitLoaded(): void {\n this.dispatchEvent(\n new CustomEvent('loadingStateUpdated', {\n detail: { loaded: true },\n }) as IntLoadingStateUpdatedEvent\n );\n }\n\n updated(changed: PropertyValues): void {\n if (changed.has('identifier')) {\n this.emitLoaded();\n }\n }\n\n get downloadUrl(): string {\n return `/download/${this.identifier}`;\n }\n\n render(): TemplateResult {\n return html`\n <section>\n <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>\n <p>\n This item does not appear to have any files that can be experienced on\n Archive.org. <br />\n Please download files in this item to interact with them on your\n computer.\n </p>\n <a href=${this.downloadUrl}>Show all files</a>\n </section>\n `;\n }\n\n static get styles(): CSSResult {\n return css`\n :host {\n color: var(--primaryTextColor, #fff);\n text-align: center;\n }\n section {\n margin: 10% auto 0;\n padding: 0 5%;\n }\n p {\n font-size: 1.4rem;\n }\n a {\n color: var(--primaryTextColor, #fff);\n background-color: rgb(25, 72, 128);\n min-height: 35px;\n outline: none;\n cursor: pointer;\n line-height: normal;\n border-radius: 0.4rem;\n text-align: center;\n vertical-align: middle;\n font-size: 1.4rem;\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n display: inline-block;\n padding: 0.85rem 1.2rem;\n border: 1px solid rgb(197, 209, 223);\n white-space: nowrap;\n appearance: auto;\n box-sizing: border-box;\n user-select: none;\n text-decoration: none;\n }\n `;\n }\n}\n"]}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import { ModalManagerInterface } from '@internetarchive/modal-manager';
|
2
|
+
import { MetadataResponse } from '@internetarchive/search-service';
|
3
|
+
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
4
|
+
import { LitElement } from 'lit-element';
|
5
|
+
export declare class BookNavigator extends LitElement {
|
6
|
+
modal?: ModalManagerInterface;
|
7
|
+
baseHost?: string;
|
8
|
+
book?: MetadataResponse;
|
9
|
+
signedIn?: boolean | null;
|
10
|
+
sideMenuOpen?: boolean;
|
11
|
+
sharedObserver?: SharedResizeObserver;
|
12
|
+
addMenuShortcut(menuId: string): string;
|
13
|
+
removeMenuShortcut(menuId: string): string;
|
14
|
+
sortMenuShortcuts(): void;
|
15
|
+
emitMenuShortcutsUpdated(): void;
|
16
|
+
render(): import("lit-element").TemplateResult;
|
17
|
+
}
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import { __decorate } from "tslib";
|
2
|
+
import { html, customElement, LitElement, property } from 'lit-element';
|
3
|
+
let BookNavigator = class BookNavigator extends LitElement {
|
4
|
+
constructor() {
|
5
|
+
super(...arguments);
|
6
|
+
this.signedIn = null;
|
7
|
+
}
|
8
|
+
addMenuShortcut(menuId) {
|
9
|
+
return menuId;
|
10
|
+
}
|
11
|
+
removeMenuShortcut(menuId) {
|
12
|
+
return menuId;
|
13
|
+
}
|
14
|
+
sortMenuShortcuts() { }
|
15
|
+
emitMenuShortcutsUpdated() { }
|
16
|
+
render() {
|
17
|
+
return html ` <p>foo</p> `;
|
18
|
+
}
|
19
|
+
};
|
20
|
+
__decorate([
|
21
|
+
property({ attribute: false })
|
22
|
+
], BookNavigator.prototype, "modal", void 0);
|
23
|
+
__decorate([
|
24
|
+
property({ type: String })
|
25
|
+
], BookNavigator.prototype, "baseHost", void 0);
|
26
|
+
__decorate([
|
27
|
+
property({ type: Object })
|
28
|
+
], BookNavigator.prototype, "book", void 0);
|
29
|
+
__decorate([
|
30
|
+
property({ type: Boolean, reflect: true })
|
31
|
+
], BookNavigator.prototype, "signedIn", void 0);
|
32
|
+
__decorate([
|
33
|
+
property({ type: Boolean })
|
34
|
+
], BookNavigator.prototype, "sideMenuOpen", void 0);
|
35
|
+
__decorate([
|
36
|
+
property({ attribute: false })
|
37
|
+
], BookNavigator.prototype, "sharedObserver", void 0);
|
38
|
+
BookNavigator = __decorate([
|
39
|
+
customElement('book-navigator')
|
40
|
+
], BookNavigator);
|
41
|
+
export { BookNavigator };
|
42
|
+
//# sourceMappingURL=book-nav-stub.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"book-nav-stub.js","sourceRoot":"","sources":["../../test/book-nav-stub.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGxE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAO8C,aAAQ,GAAoB,IAAI,CAAC;IAqB/E,CAAC;IAfC,eAAe,CAAC,MAAc;QAC5B,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,kBAAkB,CAAC,MAAc;QAC/B,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,iBAAiB,KAAI,CAAC;IAEtB,wBAAwB,KAAI,CAAC;IAE7B,MAAM;QACJ,OAAO,IAAI,CAAA,cAAc,CAAC;IAC5B,CAAC;CACF,CAAA;AA3BiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CAA+B;AAElC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAyB;AAER;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkC;AAEhD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAwB;AAEpB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDAAuC;AAX3D,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA4BzB;SA5BY,aAAa","sourcesContent":["import { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { html, customElement, LitElement, property } from 'lit-element';\n\n@customElement('book-navigator')\nexport class BookNavigator extends LitElement {\n @property({ attribute: false }) modal?: ModalManagerInterface;\n\n @property({ type: String }) baseHost?: string;\n\n @property({ type: Object }) book?: MetadataResponse;\n\n @property({ type: Boolean, reflect: true }) signedIn?: boolean | null = null;\n\n @property({ type: Boolean }) sideMenuOpen?: boolean;\n\n @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n addMenuShortcut(menuId: string) {\n return menuId;\n }\n\n removeMenuShortcut(menuId: string) {\n return menuId;\n }\n\n sortMenuShortcuts() {}\n\n emitMenuShortcutsUpdated() {}\n\n render() {\n return html` <p>foo</p> `;\n }\n}\n"]}
|