@internetarchive/ia-item-navigator 0.0.4 → 0.1.1
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 +175 -28
- package/demo/index.html +4 -0
- package/dist/demo/app-root.d.ts +18 -6
- package/dist/demo/app-root.js +159 -27
- package/dist/demo/app-root.js.map +1 -1
- package/dist/src/interfaces/custom-theater-interface.d.ts +1 -1
- package/dist/src/interfaces/custom-theater-interface.js.map +1 -1
- package/dist/src/interfaces/menu-interfaces.d.ts +1 -1
- package/dist/src/interfaces/menu-interfaces.js.map +1 -1
- package/dist/src/item-navigator.d.ts +4 -6
- package/dist/src/item-navigator.js +23 -19
- package/dist/src/item-navigator.js.map +1 -1
- package/dist/src/loader.d.ts +6 -6
- package/dist/src/loader.js +2 -2
- package/dist/src/loader.js.map +1 -1
- package/dist/src/no-theater-available.d.ts +1 -1
- package/dist/src/no-theater-available.js +2 -1
- package/dist/src/no-theater-available.js.map +1 -1
- package/dist/test/ia-stub.js +1 -1
- package/dist/test/ia-stub.js.map +1 -1
- package/package.json +10 -6
- package/src/interfaces/custom-theater-interface.ts +1 -1
- package/src/interfaces/menu-interfaces.ts +1 -1
- package/src/item-navigator.ts +25 -24
- package/src/loader.ts +2 -2
- package/src/no-theater-available.ts +2 -3
- package/test/ia-stub.ts +1 -1
@@ -1,5 +1,4 @@
|
|
1
|
-
import { LitElement, PropertyValues, CSSResult } from 'lit
|
2
|
-
import { nothing, TemplateResult } from 'lit-html';
|
1
|
+
import { LitElement, PropertyValues, CSSResult, TemplateResult, nothing } from 'lit';
|
3
2
|
import { MetadataResponse } from '@internetarchive/search-service';
|
4
3
|
import { SharedResizeObserver, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
|
5
4
|
import '@internetarchive/ia-menu-slider';
|
@@ -38,11 +37,10 @@ export declare class ItemNavigator extends LitElement implements SharedResizeObs
|
|
38
37
|
};
|
39
38
|
/** End shared observer */
|
40
39
|
get loaderTitle(): "" | "Internet Archive";
|
41
|
-
get
|
42
|
-
get loadingArea(): TemplateResult;
|
40
|
+
get loadingArea(): TemplateResult<1>;
|
43
41
|
slotChange(e: Event, type: 'header' | 'main'): void;
|
44
42
|
render(): TemplateResult;
|
45
|
-
get noTheaterView(): TemplateResult
|
43
|
+
get noTheaterView(): TemplateResult<1>;
|
46
44
|
get renderViewport(): TemplateResult | typeof nothing;
|
47
45
|
loadingStateUpdated(e: loadingStateUpdatedEvent): void;
|
48
46
|
/** Fullscreen Management */
|
@@ -57,7 +55,7 @@ export declare class ItemNavigator extends LitElement implements SharedResizeObs
|
|
57
55
|
setMenuShortcuts(e: SetSideMenuShortcutsEvent): void;
|
58
56
|
/** Toggles Side Menu & Sets viewable subpanel */
|
59
57
|
manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void;
|
60
|
-
get menuToggleButton(): TemplateResult
|
58
|
+
get menuToggleButton(): TemplateResult<1>;
|
61
59
|
get selectedMenuId(): MenuId | '';
|
62
60
|
get renderSideMenu(): TemplateResult;
|
63
61
|
/** End Side menu */
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { __decorate } from "tslib";
|
2
|
-
import { css, html, LitElement,
|
3
|
-
import {
|
2
|
+
import { css, html, LitElement, nothing, } from 'lit';
|
3
|
+
import { customElement, property, state, query } from 'lit/decorators.js';
|
4
4
|
import { MetadataResponse } from '@internetarchive/search-service';
|
5
5
|
import '@internetarchive/ia-menu-slider';
|
6
6
|
import '@internetarchive/icon-ellipses/icon-ellipses';
|
@@ -66,11 +66,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
66
66
|
get loaderTitle() {
|
67
67
|
return this.viewportInFullscreen ? 'Internet Archive' : '';
|
68
68
|
}
|
69
|
-
get readerHeightStyle() {
|
70
|
-
var _a, _b;
|
71
|
-
const calcFSHeight = `calc(100% - ${((_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0}px)`;
|
72
|
-
return ((_b = this.headerSlot) === null || _b === void 0 ? void 0 : _b.offsetHeight) > 0 ? `height: ${calcFSHeight}` : '';
|
73
|
-
}
|
74
69
|
get loadingArea() {
|
75
70
|
return html `
|
76
71
|
<div class="loading-area">
|
@@ -89,14 +84,17 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
89
84
|
this.requestUpdate();
|
90
85
|
}
|
91
86
|
render() {
|
87
|
+
var _a, _b;
|
92
88
|
const displayReaderClass = this.loaded ? '' : 'hidden';
|
89
|
+
const headerHeight = ((_b = (_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.assignedNodes()[0]) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
|
93
90
|
return html `
|
94
91
|
<div id="frame" class=${this.menuClass}>
|
95
92
|
<slot
|
96
93
|
name="header"
|
94
|
+
style=${`height: ${headerHeight}px`}
|
97
95
|
@slotchange=${(e) => this.slotChange(e, 'header')}
|
98
96
|
></slot>
|
99
|
-
<div class="menu-and-reader"
|
97
|
+
<div class="menu-and-reader">
|
100
98
|
${this.shouldRenderMenu ? this.renderSideMenu : nothing}
|
101
99
|
<div id="reader" class=${displayReaderClass}>
|
102
100
|
${this.renderViewport}
|
@@ -122,7 +120,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
122
120
|
<div slot="main" style=${slotVisibility}>
|
123
121
|
<slot
|
124
122
|
name="main"
|
125
|
-
style=${this.readerHeightStyle}
|
126
123
|
@slotchange=${(e) => this.slotChange(e, 'main')}
|
127
124
|
></slot>
|
128
125
|
</div>
|
@@ -236,7 +233,9 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
236
233
|
/** End Menu Shortcuts */
|
237
234
|
/** Misc Render */
|
238
235
|
get menuClass() {
|
239
|
-
|
236
|
+
var _a, _b;
|
237
|
+
const hasMenuOrShortcuts = ((_a = this.menuContents) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.menuShortcuts) === null || _b === void 0 ? void 0 : _b.length);
|
238
|
+
const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';
|
240
239
|
const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
|
241
240
|
return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
|
242
241
|
}
|
@@ -250,8 +249,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
250
249
|
:host,
|
251
250
|
#frame,
|
252
251
|
.menu-and-reader {
|
253
|
-
min-height: inherit;
|
254
|
-
height: inherit;
|
255
252
|
position: relative;
|
256
253
|
overflow: hidden;
|
257
254
|
display: block;
|
@@ -259,7 +256,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
259
256
|
|
260
257
|
:host,
|
261
258
|
#frame,
|
262
|
-
.menu-and-reader,
|
263
259
|
.loading-area,
|
264
260
|
.loading-view {
|
265
261
|
min-height: inherit;
|
@@ -268,7 +264,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
268
264
|
|
269
265
|
slot {
|
270
266
|
display: block;
|
271
|
-
overflow: hidden;
|
272
267
|
width: 100%;
|
273
268
|
}
|
274
269
|
|
@@ -280,6 +275,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
280
275
|
#frame {
|
281
276
|
background-color: ${theaterBg};
|
282
277
|
color-scheme: dark;
|
278
|
+
display: flex;
|
279
|
+
flex-direction: column;
|
283
280
|
}
|
284
281
|
|
285
282
|
#frame.fullscreen {
|
@@ -292,18 +289,23 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
292
289
|
}
|
293
290
|
|
294
291
|
.loading-view {
|
292
|
+
height: 100%;
|
295
293
|
display: flex;
|
296
294
|
align-items: center;
|
297
295
|
justify-content: center;
|
298
296
|
}
|
299
297
|
|
298
|
+
.loading-area {
|
299
|
+
width: 100%;
|
300
|
+
}
|
301
|
+
|
300
302
|
ia-itemnav-loader {
|
301
303
|
display: block;
|
302
304
|
width: 100%;
|
303
305
|
}
|
304
306
|
|
305
307
|
.hidden {
|
306
|
-
display: none;
|
308
|
+
display: none !important;
|
307
309
|
}
|
308
310
|
|
309
311
|
button {
|
@@ -319,6 +321,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
319
321
|
|
320
322
|
.menu-and-reader {
|
321
323
|
position: relative;
|
324
|
+
display: flex;
|
325
|
+
flex: 1;
|
322
326
|
}
|
323
327
|
|
324
328
|
nav button {
|
@@ -381,13 +385,13 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
381
385
|
z-index: 1;
|
382
386
|
transform: translateX(0);
|
383
387
|
width: 100%;
|
384
|
-
|
388
|
+
display: flex;
|
385
389
|
}
|
386
390
|
|
387
391
|
#reader > * {
|
388
392
|
width: 100%;
|
389
393
|
display: flex;
|
390
|
-
|
394
|
+
flex: 1;
|
391
395
|
}
|
392
396
|
|
393
397
|
.open.overlay #reader {
|
@@ -401,8 +405,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
|
|
401
405
|
}
|
402
406
|
|
403
407
|
.open.shift #reader {
|
404
|
-
width: calc(100% -
|
405
|
-
|
408
|
+
width: calc(100% - ${subnavWidth});
|
409
|
+
margin-left: ${subnavWidth};
|
406
410
|
transition: ${transitionEffect};
|
407
411
|
}
|
408
412
|
`;
|
@@ -1 +1 @@
|
|
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\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: Boolean }) viewAvailable: Boolean = true;\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=\"header\"]') private headerSlot!: HTMLSlotElement;\n\n @query('slot[name=\"main\"]') private mainSlot!: HTMLSlotElement;\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 this.sharedObserver?.addObserver({\n target: this.headerSlot,\n handler: {\n handleResize: ({ contentRect }) => {\n if (contentRect.height) {\n this.requestUpdate();\n }\n },\n },\n });\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(100% - ${this.headerSlot?.offsetHeight || 0}px)`;\n\n return this.headerSlot?.offsetHeight > 0 ? `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 slotChange(e: Event, type: 'header' | 'main'): void {\n const slottedContent = (e.target as HTMLSlotElement).assignedNodes()?.[0] as HTMLElement;\n\n this.dispatchEvent(\n new CustomEvent('slotChange', {\n detail: { slot: slottedContent, type },\n })\n );\n this.requestUpdate();\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hidden';\n return html`\n <div id=\"frame\" class=${this.menuClass}>\n <slot\n name=\"header\"\n @slotchange=${(e: Event) => this.slotChange(e, 'header')}\n ></slot>\n <div class=\"menu-and-reader\" style=${this.readerHeightStyle}>\n ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n <div id=\"reader\" class=${displayReaderClass}>\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 renderViewport(): TemplateResult | typeof nothing {\n if (!this.viewAvailable) {\n return this.noTheaterView;\n }\n\n const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n return html`\n <div slot=\"main\" style=${slotVisibility}>\n <slot\n name=\"main\"\n style=${this.readerHeightStyle}\n @slotchange=${(e: Event) => this.slotChange(e, 'main')}\n ></slot>\n </div>\n `;\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 width: 100%;\n }\n\n slot * {\n display: block;\n height: inherit;\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 transform: translateX(0);\n width: 100%;\n height: 100%;\n }\n\n #reader > * {\n width: 100%;\n display: flex;\n height: 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"]}
|
1
|
+
{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EAIV,OAAO,GACR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAKnE,OAAO,iCAAiC,CAAC;AAGzC,OAAO,8CAA8C,CAAC;AACtD,OAAO,UAAU,CAAC;AAgBlB,OAAO,wBAAwB,CAAC;AAGhC,IAAa,aAAa,GAA1B,MAAa,aACX,SAAQ,UAAU;IADpB;;QAc+B,kBAAa,GAAY,IAAI,CAAC;QAE/B,aAAQ,GAAG,aAAa,CAAC;QAUrD,aAAQ,GAAG,KAAK,CAAC;QAEU,iBAAY,GAA4B,EAAE,CAAC;QAE3C,kBAAa,GAA4B,EAAE,CAAC;QAGvE,yBAAoB,GAAmB,IAAI,CAAC;QAEf,eAAU,GAAG,KAAK,CAAC;QAQa,WAAM,GAExD,IAAI,CAAC;QAEP,kBAAa,GAAwB,OAAO,CAAC;IAibxD,CAAC;IAzaC,oBAAoB;QAClB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE;YACjC,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAyB,CAAC;YAC1E,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;YACvD,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;IACH,CAAC;IAED,sBAAsB;IACtB,YAAY,CAAC,KAA0B;QACrC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC;QACpC,IAAI,KAAK,IAAI,GAAG,EAAE;YAChB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;YAC/B,OAAO;SACR;QACD,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;IAC/B,CAAC;IAEO,iBAAiB;;QACvB,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC5D,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,CAAC;YAC/B,MAAM,EAAE,IAAI,CAAC,UAAU;YACvB,OAAO,EAAE;gBACP,YAAY,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;oBAChC,IAAI,WAAW,CAAC,MAAM,EAAE;wBACtB,IAAI,CAAC,aAAa,EAAE,CAAC;qBACtB;gBACH,CAAC;aACF;SACF,CAAC,CAAC;IACL,CAAC;IAEO,oBAAoB;;QAC1B,MAAA,IAAI,CAAC,cAAc,0CAAE,cAAc,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACjE,CAAC;IAED,IAAI,oBAAoB;QAItB,OAAO;YACL,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC;IACJ,CAAC;IACD,0BAA0B;IAE1B,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7D,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;;sCAGuB,IAAI,CAAC,WAAW;;;KAGjD,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,CAAQ,EAAE,IAAuB;;QAC1C,MAAM,cAAc,GAAG,MAAC,CAAC,CAAC,MAA0B,CAAC,aAAa,EAAE,0CAAG,CAAC,CAAgB,CAAC;QAEzF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,MAAM,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE;SACvC,CAAC,CACH,CAAC;QACF,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;;QACJ,MAAM,kBAAkB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;QACvD,MAAM,YAAY,GAChB,CAAA,MAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,GAAG,CAAC,CAAiB,0CAAE,YAAY,KAAI,CAAC,CAAC;QAC1E,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,SAAS;;;kBAG1B,WAAW,YAAY,IAAI;wBACrB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,QAAQ,CAAC;;;YAGtD,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO;mCAC9B,kBAAkB;cACvC,IAAI,CAAC,cAAc;;YAErB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO;;;KAGhD,CAAC;IACJ,CAAC;IAED,IAAI,aAAa;;QACf,OAAO,IAAI,CAAA;oBACK,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,0CAAE,UAAU;6BACtB,IAAI,CAAC,mBAAmB;gCACrB,CAAC;IAC/B,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,IAAI,CAAC,aAAa,CAAC;SAC3B;QAED,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC;QACpE,OAAO,IAAI,CAAA;+BACgB,cAAc;;;wBAGrB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,CAAC;;;KAG3D,CAAC;IACJ,CAAC;IAED,mBAAmB,CAAC,CAA2B;QAC7C,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC;IAC/B,CAAC;IAED,4BAA4B;IAC5B,wBAAwB,CAAC,CAAwB;QAC/C,MAAM,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;QACjD,IAAI,CAAC,oBAAoB,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC;QAExE,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,mBAAmB,EAAE;YACjD,MAAM,EAAE,CAAC,CAAC,MAAM;SACjB,CAA0B,CAAC;QAE5B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IACD,gCAAgC;IAEhC,gBAAgB;IAChB,IAAI,gBAAgB;;QAClB,OAAO,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,CAAA,CAAC;IACrC,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,CAA2B;QACrC,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,SAAS,CAAC;IACxD,CAAC;IAED,eAAe,CAAC,CAA2B;QACzC,MAAM,eAAe,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC;IACtC,CAAC;IAED,gBAAgB,CAAC,CAA4B;QAC3C,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC;IAED,kDAAkD;IAClD,oBAAoB,CAAC,CAA0B;QAC7C,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QACpC,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QAED,IAAI,MAAM,KAAK,MAAM,EAAE;YACrB,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;aAAM,IAAI,MAAM,KAAK,QAAQ,EAAE;YAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;YACvB,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;IACH,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,UAAU;;;;;;;;;KAS3B,CAAC;IACJ,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC;IAC7B,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;QACpD,OAAO,IAAI,CAAA;;iCAEkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB;+BACzC,WAAW;;qBAErB,IAAI,CAAC,YAAY;4BACV,IAAI,CAAC,cAAc;gCACf,IAAI,CAAC,WAAW;gCAChB,IAAI,CAAC,SAAS;;;;;;KAMzC,CAAC;IACJ,CAAC;IACD,oBAAoB;IAEpB,qBAAqB;IACrB,YAAY,CAAC,iBAAyB,EAAE;QACtC,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,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE;YACxD,IAAI,EAAE,KAAK,YAAY,EAAE;gBACvB,OAAO,IAAI,CAAA,GAAG,IAAI,EAAE,CAAC;aACtB;YAED,OAAO,IAAI,CAAA;kCACiB,EAAE,aAAa,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;YAChE,IAAI;;OAET,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,OAAO,IAAI,CAAA,0BAA0B,SAAS,QAAQ,CAAC;IACzD,CAAC;IACD,yBAAyB;IAEzB,kBAAkB;IAClB,IAAI,SAAS;;QACX,MAAM,kBAAkB,GACtB,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,MAAI,MAAA,IAAI,CAAC,aAAa,0CAAE,MAAM,CAAA,CAAC;QAC1D,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,IAAI,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QACxE,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QACtE,OAAO,GAAG,WAAW,IAAI,eAAe,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;IACnE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,WAAW,GAAG,GAAG,CAAA,yBAAyB,CAAC;QACjD,MAAM,gBAAgB,GAAG,GAAG,CAAA,+BAA+B,CAAC;QAC5D,MAAM,gBAAgB,GAAG,GAAG,CAAA,aAAa,gBAAgB,WAAW,CAAC;QACrE,MAAM,UAAU,GAAG,GAAG,CAAA,gCAAgC,CAAC;QACvD,MAAM,SAAS,GAAG,GAAG,CAAA,6BAA6B,CAAC;QAEnD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BA4Bc,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4DpB,UAAU;;;;;;;;;;;;;;;;;iBAiBV,UAAU;kBACT,UAAU;;;;;;;;;;;;;;;;;;;;;;;iCAuBK,WAAW;iBAC3B,WAAW;qCACS,WAAW;sBAC1B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;iBAsBrB,WAAW;;sBAEN,gBAAgB;;;;6BAIT,WAAW;uBACjB,WAAW;sBACZ,gBAAgB;;KAEjC,CAAC;IACJ,CAAC;CACF,CAAA;AApdC;IATC,QAAQ,CAAC;QACR,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,CAAC,KAAuC,EAAoB,EAAE;YACvE,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBACtC,OAAO,IAAI,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;aACtD;YACD,OAAO,KAAyB,CAAC;QACnC,CAAC;KACF,CAAC;2CACsB;AAEK;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAA+B;AAE/B;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;AAEU;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;mDAA4C;AAE3C;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAA6C;AAGvE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;2DAChB;AAEf;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoB;AAEpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmB;AAEd;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CAAsB;AAErB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDAAuC;AAET;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAE5C;AAEP;IAAR,KAAK,EAAE;oDAA8C;AAErC;IAAhB,KAAK,CAAC,QAAQ,CAAC;4CAAgC;AAElB;IAA7B,KAAK,CAAC,qBAAqB,CAAC;iDAAsC;AAEvC;IAA3B,KAAK,CAAC,mBAAmB,CAAC;+CAAoC;AArDpD,aAAa;IADzB,aAAa,CAAC,mBAAmB,CAAC;GACtB,aAAa,CAgezB;SAheY,aAAa","sourcesContent":["import {\n css,\n html,\n LitElement,\n PropertyValues,\n CSSResult,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\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\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: Boolean }) viewAvailable: Boolean = true;\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=\"header\"]') private headerSlot!: HTMLSlotElement;\n\n @query('slot[name=\"main\"]') private mainSlot!: HTMLSlotElement;\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 this.sharedObserver?.addObserver({\n target: this.headerSlot,\n handler: {\n handleResize: ({ contentRect }) => {\n if (contentRect.height) {\n this.requestUpdate();\n }\n },\n },\n });\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 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 slotChange(e: Event, type: 'header' | 'main'): void {\n const slottedContent = (e.target as HTMLSlotElement).assignedNodes()?.[0] as HTMLElement;\n\n this.dispatchEvent(\n new CustomEvent('slotChange', {\n detail: { slot: slottedContent, type },\n })\n );\n this.requestUpdate();\n }\n\n render(): TemplateResult {\n const displayReaderClass = this.loaded ? '' : 'hidden';\n const headerHeight =\n (this.headerSlot?.assignedNodes()[0] as HTMLElement)?.offsetHeight || 0;\n return html`\n <div id=\"frame\" class=${this.menuClass}>\n <slot\n name=\"header\"\n style=${`height: ${headerHeight}px`}\n @slotchange=${(e: Event) => this.slotChange(e, 'header')}\n ></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 ? 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 renderViewport(): TemplateResult | typeof nothing {\n if (!this.viewAvailable) {\n return this.noTheaterView;\n }\n\n const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n return html`\n <div slot=\"main\" style=${slotVisibility}>\n <slot\n name=\"main\"\n @slotchange=${(e: Event) => this.slotChange(e, 'main')}\n ></slot>\n </div>\n `;\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 hasMenuOrShortcuts =\n this.menuContents?.length || this.menuShortcuts?.length;\n const drawerState = this.menuOpened && hasMenuOrShortcuts ? '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 position: relative;\n overflow: hidden;\n display: block;\n }\n\n :host,\n #frame,\n .loading-area,\n .loading-view {\n min-height: inherit;\n height: inherit;\n }\n\n slot {\n display: block;\n width: 100%;\n }\n\n slot * {\n display: block;\n height: inherit;\n }\n\n #frame {\n background-color: ${theaterBg};\n color-scheme: dark;\n display: flex;\n flex-direction: column;\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 height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .loading-area {\n width: 100%;\n }\n\n ia-itemnav-loader {\n display: block;\n width: 100%;\n }\n\n .hidden {\n display: none !important;\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 display: flex;\n flex: 1;\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 transform: translateX(0);\n width: 100%;\n display: flex;\n }\n\n #reader > * {\n width: 100%;\n display: flex;\n flex: 1;\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% - ${subnavWidth});\n margin-left: ${subnavWidth};\n transition: ${transitionEffect};\n }\n `;\n }\n}\n"]}
|
package/dist/src/loader.d.ts
CHANGED
@@ -1,13 +1,13 @@
|
|
1
|
-
import { LitElement } from 'lit
|
1
|
+
import { LitElement } from 'lit';
|
2
2
|
export declare class IAItemNavLoader extends LitElement {
|
3
3
|
static get properties(): {
|
4
4
|
title: {
|
5
5
|
type: StringConstructor;
|
6
6
|
};
|
7
7
|
};
|
8
|
-
get bookIconSvg(): import("lit
|
9
|
-
get icon(): import("lit
|
10
|
-
get loader(): import("lit
|
11
|
-
render(): import("lit
|
12
|
-
static get styles(): import("lit
|
8
|
+
get bookIconSvg(): import("lit").TemplateResult<2>;
|
9
|
+
get icon(): import("lit").TemplateResult<2>;
|
10
|
+
get loader(): import("lit").TemplateResult<2>;
|
11
|
+
render(): import("lit").TemplateResult<1>;
|
12
|
+
static get styles(): import("lit").CSSResult;
|
13
13
|
}
|
package/dist/src/loader.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { __decorate } from "tslib";
|
2
2
|
/* eslint-disable class-methods-use-this */
|
3
|
-
import { css, html, LitElement,
|
4
|
-
import {
|
3
|
+
import { css, html, LitElement, svg, nothing } from 'lit';
|
4
|
+
import { customElement } from 'lit/decorators.js';
|
5
5
|
let IAItemNavLoader = class IAItemNavLoader extends LitElement {
|
6
6
|
static get properties() {
|
7
7
|
return {
|
package/dist/src/loader.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/loader.ts"],"names":[],"mappings":";AAAA,2CAA2C;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,
|
1
|
+
{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/loader.ts"],"names":[],"mappings":";AAAA,2CAA2C;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,GAAG,CAAA;;;;;;;;;;;UAWJ,IAAI,CAAC,IAAI;;;;;;;;KAQd,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,OAAO,IAAI,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;QAClE,OAAO,IAAI,CAAA;;UAEL,KAAK,IAAI,IAAI,CAAC,MAAM;;;KAGzB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCT,CAAC;IACJ,CAAC;CACF,CAAA;AA/FY,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA+F3B;SA/FY,eAAe","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { css, html, LitElement, svg, nothing } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('ia-itemnav-loader')\nexport class IAItemNavLoader extends LitElement {\n static get properties() {\n return {\n title: { type: String },\n };\n }\n\n get bookIconSvg() {\n return svg`\n <g class=\"bookIcon\" transform=\"matrix(1 0 0 -1 28 67.362264)\">\n <path d=\"m44.71698 31.6981124v-29.99320678s-18.0956599.30735848-18.6322637-.7171698c-.0633962-.12226414-1.890566-.59207545-2.9745282-.59207545-1.3228302 0-3.5122641 0-4.1286791.74547168-.9707547 1.17452827-18.82811278.71660375-18.82811278.71660375v30.040754l1.83849052.7867924.29094339-28.48188608s15.94981097.15339622 17.09094297-1.10716978c.8145283-.90056602 4.997547-.91641507 5.3450942-.3526415.9611321 1.55716977 14.7101883 1.31716978 17.6077354 1.45981128l.3266038 28.22830118z\"/>\n <path d=\"m40.1129424 33.5957539h-12.8337733c-1.8690565 0-3.1098112-.7545283-3.9299999-1.6279245v-26.70452764l1.2362264-.00792453c.4584906.72962262 3.0922641 1.39415091 3.0922641 1.39415091h10.1298111s1.0381131.01754717 1.5141509.47377357c.5643396.54056602.7913207 1.36981129.7913207 1.36981129z\"/>\n <path d=\"m17.3354713 33.5957539h-12.8337733v-25.37660316s0-.75283017.49358489-1.14113205c.52867924-.41433961 1.3415094-.42849055 1.3415094-.42849055h10.59905631s2.2075471-.52698112 3.0928301-1.39415091l1.2.00792453v26.74245214c-.8201886.8581132-2.0530188 1.59-3.8932074 1.59\"/>\n </g>\n `;\n }\n\n get icon() {\n return this.bookIconSvg;\n }\n\n get loader() {\n return svg`\n <svg\n height=\"100\"\n viewBox=\"0 0 100 100\"\n width=\"100\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby=\"item-loading\"\n >\n <title id=\"item-loading\">Currently loading viewer.</title>\n <desc>Please wait while we load theater.</desc>\n <g fill=\"#333\" fill-rule=\"evenodd\" class=\"book-icon\">\n ${this.icon}\n <path\n class=\"ring\"\n d=\"m17.8618849 11.6970233c18.5864635-15.59603144 45.6875867-15.59603102 64.2740497.000001 1.9271446 1.6170806 2.1785128 4.4902567.5614466 6.4174186-1.6170661 1.9271618-4.4902166 2.1785323-6.4173612.5614517-15.1996922-12.75416882-37.3625282-12.75416916-52.5622206-.000001-15.19969387 12.7541707-19.04823077 34.5805019-9.1273354 51.7641499 9.9208955 17.183646 30.7471499 24.7638499 49.3923323 17.9774983 18.6451823-6.7863521 29.7266014-25.9801026 26.2811129-45.5206248-.436848-2.4775114 1.2174186-4.8400696 3.6949079-5.2769215 2.4774893-.4368518 4.8400264 1.2174296 5.2768744 3.694941 4.2132065 23.8945096-9.3373563 47.3649806-32.137028 55.6634567-22.799672 8.2984758-48.2663986-.9707372-60.39785211-21.9832155-12.1314534-21.012481-7.42539173-47.7021198 11.16107351-63.2981544z\"\n fill-rule=\"nonzero\"\n />\n </g>\n </svg>\n `;\n }\n\n render() {\n const title = this.title ? html`<h2>${this.title}</h2>` : nothing;\n return html`\n <div class=\"place-holder\">\n ${title} ${this.loader}\n <h3>Loading viewer</h3>\n </div>\n `;\n }\n\n static get styles() {\n return css`\n .place-holder {\n width: 30%;\n margin: auto;\n text-align: center;\n color: var(--primaryTextColor);\n }\n\n .place-holder {\n position: relative;\n }\n\n .place-holder svg {\n display: block;\n width: 60%;\n max-width: 100px;\n height: auto;\n margin: auto;\n }\n\n svg * {\n fill: var(--primaryTextColor);\n }\n\n svg .ring {\n animation: rotate 1.3s infinite linear;\n transform-origin: 50px 50px;\n transform-box: fill-box;\n display: block; // transform won't work on inline style\n }\n\n @keyframes rotate {\n 0% {\n -moz-transform: rotate(-360deg);\n -webkit-transform: rotate(-360deg);\n transform: rotate(-360deg);\n }\n }\n `;\n }\n}\n"]}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit
|
1
|
+
import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit';
|
2
2
|
export declare class IANoTheaterAvailable extends LitElement {
|
3
3
|
identifier?: string;
|
4
4
|
emitLoaded(): void;
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { __decorate } from "tslib";
|
2
|
-
import { LitElement,
|
2
|
+
import { LitElement, html, css, } from 'lit';
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
3
4
|
let IANoTheaterAvailable = class IANoTheaterAvailable extends LitElement {
|
4
5
|
constructor() {
|
5
6
|
super(...arguments);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"no-theater-available.js","sourceRoot":"","sources":["../../src/no-theater-available.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,
|
1
|
+
{"version":3,"file":"no-theater-available.js","sourceRoot":"","sources":["../../src/no-theater-available.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EAIJ,GAAG,GACJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,UAAU;IAApD;;QAC8B,eAAU,GAAY,EAAE,CAAC;IAwEvD,CAAC;IAtEC,UAAU;QACR,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,qBAAqB,EAAE;YAC1D,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;SACzB,CAAC,CACH,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCT,CAAC;IACJ,CAAC;CACF,CAAA;AAxE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA0B;AAD1C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAyEhC;SAzEY,oBAAoB","sourcesContent":["import {\n LitElement,\n html,\n TemplateResult,\n PropertyValues,\n CSSResult,\n css,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\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<{ loaded: boolean }>('loadingStateUpdated', {\n detail: { loaded: true },\n })\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 width: 100%;\n margin: 5%;\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"]}
|
package/dist/test/ia-stub.js
CHANGED
package/dist/test/ia-stub.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ia-stub.js","sourceRoot":"","sources":["../../test/ia-stub.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,IAAI,EAAE,MAAM,
|
1
|
+
{"version":3,"file":"ia-stub.js","sourceRoot":"","sources":["../../test/ia-stub.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAM3B,MAAM,OAAO,QAAQ;IACnB;QACE,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QACjB,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC;QAClB,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;QACjB,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,EAAE,UAAU,EAAE,KAAK,EAAc,CAAC;QAClD,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;QAC3B,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QACd,IAAI,CAAC,gBAAgB,GAAG,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;CA+BF;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,EAAE,EAAE,YAAY;IAChB,IAAI,EAAE,IAAI,CAAA,qCAAqC;CACvB,CAAC;AAE3B,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,GAAG,QAAQ;IACX,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,IAAI,CAAA,gBAAgB;IACjC,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,KAAK;IACjB,IAAI,EAAE,qBAAqB;IAC3B,IAAI,EAAE,IAAI,QAAQ,EAAE;IACpB,QAAQ,EAAE,qBAAqB;IAC/B,SAAS,EAAE,KAAK;IAChB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;CACO,CAAC","sourcesContent":["/* eslint-disable camelcase */\nimport {\n MetadataResponse,\n Metadata,\n File,\n Review,\n SpeechMusicASREntry,\n} from '@internetarchive/search-service';\nimport { html } from 'lit';\nimport {\n MenuShortcutInterface,\n MenuProviderInterface,\n} from '../src/interfaces/menu-interfaces';\n\nexport class ItemStub implements MetadataResponse {\n constructor() {\n this.rawResponse = '';\n this.created = 1;\n this.d1 = 'hello';\n this.d2 = 'boop';\n this.dir = 'whee';\n this.files = [];\n this.files_count = 0;\n this.item_last_updated = 2020;\n this.item_size = 111;\n this.metadata = { identifier: 'foo' } as Metadata;\n this.server = 'foo-server';\n this.uniq = 2;\n this.workable_servers = ['abc'];\n }\n\n rawResponse: any;\n\n created: number;\n\n d1: string;\n\n d2: string;\n\n dir: string;\n\n files: File[];\n\n files_count: number;\n\n item_last_updated: number;\n\n item_size: number;\n\n metadata: Metadata;\n\n server: string;\n\n uniq: number;\n\n workable_servers: string[];\n\n speech_vs_music_asr?: SpeechMusicASREntry[] | undefined;\n\n reviews?: Review[] | undefined;\n}\n\nexport const shortcut = {\n id: 'fullscreen',\n icon: html`<i class=\"fas fullscreen-test\"></i>`,\n} as MenuShortcutInterface;\n\nexport const menuProvider = {\n ...shortcut,\n label: 'foo',\n menuDetails: html`<div>foo</div>`,\n selected: true,\n followable: false,\n href: 'https://archive.foo',\n item: new ItemStub(),\n baseHost: 'https://archive.foo',\n subPrefix: 'bar',\n updated: () => {},\n} as MenuProviderInterface;\n"]}
|
package/package.json
CHANGED
@@ -1,7 +1,11 @@
|
|
1
1
|
{
|
2
2
|
"name": "@internetarchive/ia-item-navigator",
|
3
|
-
"version": "0.
|
4
|
-
"description": "Internet Archive's Item Navigator, visually
|
3
|
+
"version": "0.1.1",
|
4
|
+
"description": "Internet Archive's Item Navigator, visually explore an item's contents.",
|
5
|
+
"repository": {
|
6
|
+
"type": "git",
|
7
|
+
"url": "git+https://github.com/internetarchive/iaux-item-navigator.git"
|
8
|
+
},
|
5
9
|
"author": "Internet Archive",
|
6
10
|
"license": "AGPL-3.0-only",
|
7
11
|
"main": "dist/index.js",
|
@@ -21,7 +25,7 @@
|
|
21
25
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
22
26
|
},
|
23
27
|
"dependencies": {
|
24
|
-
"@internetarchive/ia-menu-slider": "^
|
28
|
+
"@internetarchive/ia-menu-slider": "^2.0.0",
|
25
29
|
"@internetarchive/ia-sharing-options": "^0.1.4",
|
26
30
|
"@internetarchive/icon-ellipses": "^1.1.3",
|
27
31
|
"@internetarchive/icon-share": "^1.1.3",
|
@@ -30,12 +34,12 @@
|
|
30
34
|
"@internetarchive/search-service": "^0.1.2",
|
31
35
|
"@internetarchive/shared-resize-observer": "^0.0.1",
|
32
36
|
"@types/resize-observer-browser": "^0.1.6",
|
33
|
-
"lit
|
34
|
-
"lit-html": "^1.1.2"
|
37
|
+
"lit": "^2.1.4"
|
35
38
|
},
|
36
39
|
"devDependencies": {
|
37
40
|
"@open-wc/eslint-config": "^4.2.0",
|
38
|
-
"@open-wc/testing": "^
|
41
|
+
"@open-wc/testing": "^3.0.4",
|
42
|
+
"@types/mocha": "^9.1.0",
|
39
43
|
"@typescript-eslint/eslint-plugin": "^4.16.1",
|
40
44
|
"@typescript-eslint/parser": "^4.16.1",
|
41
45
|
"@web/dev-server": "^0.1.1",
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { LitElement } from 'lit
|
1
|
+
import { LitElement } from 'lit';
|
2
2
|
import { MetadataResponse } from '@internetarchive/search-service';
|
3
3
|
import { ModalManager } from '@internetarchive/modal-manager';
|
4
4
|
import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
|
package/src/item-navigator.ts
CHANGED
@@ -2,14 +2,12 @@ import {
|
|
2
2
|
css,
|
3
3
|
html,
|
4
4
|
LitElement,
|
5
|
-
customElement,
|
6
|
-
property,
|
7
|
-
state,
|
8
|
-
query,
|
9
5
|
PropertyValues,
|
10
6
|
CSSResult,
|
11
|
-
|
12
|
-
|
7
|
+
TemplateResult,
|
8
|
+
nothing,
|
9
|
+
} from 'lit';
|
10
|
+
import { customElement, property, state, query } from 'lit/decorators.js';
|
13
11
|
import { MetadataResponse } from '@internetarchive/search-service';
|
14
12
|
import {
|
15
13
|
SharedResizeObserver,
|
@@ -148,12 +146,6 @@ export class ItemNavigator
|
|
148
146
|
return this.viewportInFullscreen ? 'Internet Archive' : '';
|
149
147
|
}
|
150
148
|
|
151
|
-
get readerHeightStyle(): string {
|
152
|
-
const calcFSHeight = `calc(100% - ${this.headerSlot?.offsetHeight || 0}px)`;
|
153
|
-
|
154
|
-
return this.headerSlot?.offsetHeight > 0 ? `height: ${calcFSHeight}` : '';
|
155
|
-
}
|
156
|
-
|
157
149
|
get loadingArea() {
|
158
150
|
return html`
|
159
151
|
<div class="loading-area">
|
@@ -177,13 +169,16 @@ export class ItemNavigator
|
|
177
169
|
|
178
170
|
render(): TemplateResult {
|
179
171
|
const displayReaderClass = this.loaded ? '' : 'hidden';
|
172
|
+
const headerHeight =
|
173
|
+
(this.headerSlot?.assignedNodes()[0] as HTMLElement)?.offsetHeight || 0;
|
180
174
|
return html`
|
181
175
|
<div id="frame" class=${this.menuClass}>
|
182
176
|
<slot
|
183
177
|
name="header"
|
178
|
+
style=${`height: ${headerHeight}px`}
|
184
179
|
@slotchange=${(e: Event) => this.slotChange(e, 'header')}
|
185
180
|
></slot>
|
186
|
-
<div class="menu-and-reader"
|
181
|
+
<div class="menu-and-reader">
|
187
182
|
${this.shouldRenderMenu ? this.renderSideMenu : nothing}
|
188
183
|
<div id="reader" class=${displayReaderClass}>
|
189
184
|
${this.renderViewport}
|
@@ -211,7 +206,6 @@ export class ItemNavigator
|
|
211
206
|
<div slot="main" style=${slotVisibility}>
|
212
207
|
<slot
|
213
208
|
name="main"
|
214
|
-
style=${this.readerHeightStyle}
|
215
209
|
@slotchange=${(e: Event) => this.slotChange(e, 'main')}
|
216
210
|
></slot>
|
217
211
|
</div>
|
@@ -342,7 +336,9 @@ export class ItemNavigator
|
|
342
336
|
|
343
337
|
/** Misc Render */
|
344
338
|
get menuClass(): string {
|
345
|
-
const
|
339
|
+
const hasMenuOrShortcuts =
|
340
|
+
this.menuContents?.length || this.menuShortcuts?.length;
|
341
|
+
const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';
|
346
342
|
const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
|
347
343
|
return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
|
348
344
|
}
|
@@ -358,8 +354,6 @@ export class ItemNavigator
|
|
358
354
|
:host,
|
359
355
|
#frame,
|
360
356
|
.menu-and-reader {
|
361
|
-
min-height: inherit;
|
362
|
-
height: inherit;
|
363
357
|
position: relative;
|
364
358
|
overflow: hidden;
|
365
359
|
display: block;
|
@@ -367,7 +361,6 @@ export class ItemNavigator
|
|
367
361
|
|
368
362
|
:host,
|
369
363
|
#frame,
|
370
|
-
.menu-and-reader,
|
371
364
|
.loading-area,
|
372
365
|
.loading-view {
|
373
366
|
min-height: inherit;
|
@@ -376,7 +369,6 @@ export class ItemNavigator
|
|
376
369
|
|
377
370
|
slot {
|
378
371
|
display: block;
|
379
|
-
overflow: hidden;
|
380
372
|
width: 100%;
|
381
373
|
}
|
382
374
|
|
@@ -388,6 +380,8 @@ export class ItemNavigator
|
|
388
380
|
#frame {
|
389
381
|
background-color: ${theaterBg};
|
390
382
|
color-scheme: dark;
|
383
|
+
display: flex;
|
384
|
+
flex-direction: column;
|
391
385
|
}
|
392
386
|
|
393
387
|
#frame.fullscreen {
|
@@ -400,18 +394,23 @@ export class ItemNavigator
|
|
400
394
|
}
|
401
395
|
|
402
396
|
.loading-view {
|
397
|
+
height: 100%;
|
403
398
|
display: flex;
|
404
399
|
align-items: center;
|
405
400
|
justify-content: center;
|
406
401
|
}
|
407
402
|
|
403
|
+
.loading-area {
|
404
|
+
width: 100%;
|
405
|
+
}
|
406
|
+
|
408
407
|
ia-itemnav-loader {
|
409
408
|
display: block;
|
410
409
|
width: 100%;
|
411
410
|
}
|
412
411
|
|
413
412
|
.hidden {
|
414
|
-
display: none;
|
413
|
+
display: none !important;
|
415
414
|
}
|
416
415
|
|
417
416
|
button {
|
@@ -427,6 +426,8 @@ export class ItemNavigator
|
|
427
426
|
|
428
427
|
.menu-and-reader {
|
429
428
|
position: relative;
|
429
|
+
display: flex;
|
430
|
+
flex: 1;
|
430
431
|
}
|
431
432
|
|
432
433
|
nav button {
|
@@ -489,13 +490,13 @@ export class ItemNavigator
|
|
489
490
|
z-index: 1;
|
490
491
|
transform: translateX(0);
|
491
492
|
width: 100%;
|
492
|
-
|
493
|
+
display: flex;
|
493
494
|
}
|
494
495
|
|
495
496
|
#reader > * {
|
496
497
|
width: 100%;
|
497
498
|
display: flex;
|
498
|
-
|
499
|
+
flex: 1;
|
499
500
|
}
|
500
501
|
|
501
502
|
.open.overlay #reader {
|
@@ -509,8 +510,8 @@ export class ItemNavigator
|
|
509
510
|
}
|
510
511
|
|
511
512
|
.open.shift #reader {
|
512
|
-
width: calc(100% -
|
513
|
-
|
513
|
+
width: calc(100% - ${subnavWidth});
|
514
|
+
margin-left: ${subnavWidth};
|
514
515
|
transition: ${transitionEffect};
|
515
516
|
}
|
516
517
|
`;
|
package/src/loader.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
/* eslint-disable class-methods-use-this */
|
2
|
-
import { css, html, LitElement,
|
3
|
-
import {
|
2
|
+
import { css, html, LitElement, svg, nothing } from 'lit';
|
3
|
+
import { customElement } from 'lit/decorators.js';
|
4
4
|
|
5
5
|
@customElement('ia-itemnav-loader')
|
6
6
|
export class IAItemNavLoader extends LitElement {
|
@@ -1,13 +1,12 @@
|
|
1
1
|
import {
|
2
2
|
LitElement,
|
3
|
-
customElement,
|
4
|
-
property,
|
5
3
|
html,
|
6
4
|
TemplateResult,
|
7
5
|
PropertyValues,
|
8
6
|
CSSResult,
|
9
7
|
css,
|
10
|
-
} from 'lit
|
8
|
+
} from 'lit';
|
9
|
+
import { customElement, property } from 'lit/decorators.js';
|
11
10
|
|
12
11
|
@customElement('ia-no-theater-available')
|
13
12
|
export class IANoTheaterAvailable extends LitElement {
|