@internetarchive/ia-item-navigator 1.0.4 → 1.1.0

package/dist/src/item-navigator.js

@@ -1,92 +1,94 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property, state, query } from 'lit/decorators.js';
-import { MetadataResponse } from '@internetarchive/search-service';
-import '@internetarchive/icon-ellipses/icon-ellipses';
-import './menu-slider/ia-menu-slider';
-import './loader';
-import './no-theater-available';
-let ItemNavigator = class ItemNavigator extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.viewAvailable = true;
-        this.baseHost = 'archive.org';
-        this.signedIn = false;
-        this.menuContents = [];
-        this.menuShortcuts = [];
-        this.viewportInFullscreen = null;
-        this.menuOpened = false;
-        this.loaded = null;
-        this.openMenuState = 'shift';
-    }
-    disconnectedCallback() {
-        this.removeResizeObserver();
-    }
-    updated(changed) {
-        if (changed.has('sharedObserver')) {
-            const oldObserver = changed.get('sharedObserver');
-            oldObserver === null || oldObserver === void 0 ? void 0 : oldObserver.removeObserver(this.resizeObserverConfig);
-            this.setResizeObserver();
-        }
-    }
-    /** Shared observer */
-    handleResize(entry) {
-        const { width } = entry.contentRect;
-        if (width <= 600) {
-            this.openMenuState = 'overlay';
-            return;
-        }
-        this.openMenuState = 'shift';
-    }
-    setResizeObserver() {
-        var _a, _b;
-        (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.addObserver(this.resizeObserverConfig);
-        (_b = this.sharedObserver) === null || _b === void 0 ? void 0 : _b.addObserver({
-            target: this.headerSlot,
-            handler: {
-                handleResize: ({ contentRect }) => {
-                    if (contentRect.height) {
-                        this.requestUpdate();
-                    }
-                },
-            },
-        });
-    }
-    removeResizeObserver() {
-        var _a;
-        (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver(this.resizeObserverConfig);
-    }
-    get resizeObserverConfig() {
-        return {
-            handler: this,
-            target: this.frame,
-        };
-    }
-    /** End shared observer */
-    get loaderTitle() {
-        return this.viewportInFullscreen ? 'Internet Archive' : '';
-    }
-    get loadingArea() {
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { MetadataResponse } from '@internetarchive/search-service';
+import '@internetarchive/icon-ellipses/icon-ellipses';
+import './menu-slider/ia-menu-slider';
+import './loader';
+import './no-theater-available';
+let ItemNavigator = class ItemNavigator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.viewAvailable = true;
+        this.baseHost = 'archive.org';
+        this.signedIn = false;
+        this.menuContents = [];
+        this.menuShortcuts = [];
+        this.viewportInFullscreen = null;
+        this.menuOpened = false;
+        this.loaded = null;
+        this.openMenuState = 'shift';
+    }
+    disconnectedCallback() {
+        this.removeResizeObserver();
+    }
+    updated(changed) {
+        if (changed.has('sharedObserver')) {
+            const oldObserver = changed.get('sharedObserver');
+            oldObserver === null || oldObserver === void 0 ? void 0 : oldObserver.removeObserver(this.resizeObserverConfig);
+            this.setResizeObserver();
+        }
+    }
+    /** Shared observer */
+    handleResize(entry) {
+        const { width } = entry.contentRect;
+        if (width <= 600) {
+            this.openMenuState = 'overlay';
+            return;
+        }
+        this.openMenuState = 'shift';
+    }
+    setResizeObserver() {
+        var _a, _b;
+        (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.addObserver(this.resizeObserverConfig);
+        (_b = this.sharedObserver) === null || _b === void 0 ? void 0 : _b.addObserver({
+            target: this.headerSlot,
+            handler: {
+                handleResize: ({ contentRect }) => {
+                    if (contentRect.height) {
+                        this.requestUpdate();
+                    }
+                },
+            },
+        });
+    }
+    removeResizeObserver() {
+        var _a;
+        (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver(this.resizeObserverConfig);
+    }
+    get resizeObserverConfig() {
+        return {
+            handler: this,
+            target: this.frame,
+        };
+    }
+    /** End shared observer */
+    get loaderTitle() {
+        return this.viewportInFullscreen ? 'Internet Archive' : '';
+    }
+    get loadingArea() {
         return html `
       <div class="loading-area">
         <div class="loading-view">
-          <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>
+          <ia-itemnav-loader
+            .loaderMessage=${this.loaderTitle}
+          ></ia-itemnav-loader>
         </div>
       </div>
-    `;
-    }
-    slotChange(e, type) {
-        var _a;
-        const slottedContent = (_a = e.target.assignedNodes()) === null || _a === void 0 ? void 0 : _a[0];
-        this.dispatchEvent(new CustomEvent('slotChange', {
-            detail: { slot: slottedContent, type },
-        }));
-        this.requestUpdate();
-    }
-    render() {
-        var _a, _b;
-        const displayReaderClass = this.loaded ? '' : 'hidden';
-        const headerHeight = ((_b = (_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.assignedNodes()[0]) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
+    `;
+    }
+    slotChange(e, type) {
+        var _a;
+        const slottedContent = (_a = e.target.assignedNodes()) === null || _a === void 0 ? void 0 : _a[0];
+        this.dispatchEvent(new CustomEvent('slotChange', {
+            detail: { slot: slottedContent, type },
+        }));
+        this.requestUpdate();
+    }
+    render() {
+        var _a, _b;
+        const displayReaderClass = this.loaded ? '' : 'hidden';
+        const headerHeight = ((_b = (_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.assignedNodes()[0]) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
         return html `
       <div id="frame" class=${this.menuClass}>
         <slot
@@ -102,20 +104,20 @@ let ItemNavigator = class ItemNavigator extends LitElement {
           ${!this.loaded ? this.loadingArea : nothing}
         </div>
       </div>
-    `;
-    }
-    get noTheaterView() {
-        var _a, _b;
+    `;
+    }
+    get noTheaterView() {
+        var _a, _b;
         return html `<ia-no-theater-available
       .identifier=${(_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.identifier}
       @loadingStateUpdated=${this.loadingStateUpdated}
-    ></ia-no-theater-available>`;
-    }
-    get renderViewport() {
-        if (!this.viewAvailable) {
-            return this.noTheaterView;
-        }
-        const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
+    ></ia-no-theater-available>`;
+    }
+    get renderViewport() {
+        if (!this.viewAvailable) {
+            return this.noTheaterView;
+        }
+        const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
         return html `
       <div slot="main" style=${slotVisibility}>
         <slot
@@ -123,59 +125,59 @@ let ItemNavigator = class ItemNavigator extends LitElement {
           @slotchange=${(e) => this.slotChange(e, 'main')}
         ></slot>
       </div>
-    `;
-    }
-    loadingStateUpdated(e) {
-        const { loaded } = e.detail;
-        this.loaded = loaded || null;
-    }
-    /** Fullscreen Management */
-    manageViewportFullscreen(e) {
-        const fullscreenStatus = !!e.detail.isFullScreen;
-        this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
-        const event = new CustomEvent('fullscreenToggled', {
-            detail: e.detail,
-        });
-        this.dispatchEvent(event);
-    }
-    /** End Fullscreen Management */
-    /** Side menu */
-    get shouldRenderMenu() {
-        var _a;
-        return !!((_a = this.menuContents) === null || _a === void 0 ? void 0 : _a.length);
-    }
-    toggleMenu() {
-        this.menuOpened = !this.menuOpened;
-    }
-    closeMenu() {
-        this.menuOpened = false;
-    }
-    setOpenMenu(e) {
-        const { id } = e.detail;
-        this.openMenu = id !== this.openMenu ? id : undefined;
-    }
-    setMenuContents(e) {
-        const updatedContents = [...e.detail];
-        this.menuContents = updatedContents;
-    }
-    setMenuShortcuts(e) {
-        this.menuShortcuts = [...e.detail];
-    }
-    /** Toggles Side Menu & Sets viewable subpanel  */
-    manageSideMenuEvents(e) {
-        const { menuId, action } = e.detail;
-        if (!menuId) {
-            return;
-        }
-        if (action === 'open') {
-            this.openShortcut(menuId);
-        }
-        else if (action === 'toggle') {
-            this.openMenu = menuId;
-            this.toggleMenu();
-        }
-    }
-    get menuToggleButton() {
+    `;
+    }
+    loadingStateUpdated(e) {
+        const { loaded } = e.detail;
+        this.loaded = loaded || null;
+    }
+    /** Fullscreen Management */
+    manageViewportFullscreen(e) {
+        const fullscreenStatus = !!e.detail.isFullScreen;
+        this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
+        const event = new CustomEvent('fullscreenToggled', {
+            detail: e.detail,
+        });
+        this.dispatchEvent(event);
+    }
+    /** End Fullscreen Management */
+    /** Side menu */
+    get shouldRenderMenu() {
+        var _a;
+        return !!((_a = this.menuContents) === null || _a === void 0 ? void 0 : _a.length);
+    }
+    toggleMenu() {
+        this.menuOpened = !this.menuOpened;
+    }
+    closeMenu() {
+        this.menuOpened = false;
+    }
+    setOpenMenu(e) {
+        const { id } = e.detail;
+        this.openMenu = id !== this.openMenu ? id : undefined;
+    }
+    setMenuContents(e) {
+        const updatedContents = [...e.detail];
+        this.menuContents = updatedContents;
+    }
+    setMenuShortcuts(e) {
+        this.menuShortcuts = [...e.detail];
+    }
+    /** Toggles Side Menu & Sets viewable subpanel  */
+    manageSideMenuEvents(e) {
+        const { menuId, action } = e.detail;
+        if (!menuId) {
+            return;
+        }
+        if (action === 'open') {
+            this.openShortcut(menuId);
+        }
+        else if (action === 'toggle') {
+            this.openMenu = menuId;
+            this.toggleMenu();
+        }
+    }
+    get menuToggleButton() {
         return html `
       <button
         class="toggle-menu"
@@ -188,13 +190,13 @@ let ItemNavigator = class ItemNavigator extends LitElement {
           ></ia-icon-ellipses>
         </div>
       </button>
-    `;
-    }
-    get selectedMenuId() {
-        return this.openMenu || '';
-    }
-    get renderSideMenu() {
-        const drawerState = this.menuOpened ? '' : 'hidden';
+    `;
+    }
+    get selectedMenuId() {
+        return this.openMenu || '';
+    }
+    get renderSideMenu() {
+        const drawerState = this.menuOpened ? '' : 'hidden';
         return html `
       <nav>
         <div class="minimized">${this.shortcuts} ${this.menuToggleButton}</div>
@@ -209,42 +211,42 @@ let ItemNavigator = class ItemNavigator extends LitElement {
           ></ia-menu-slider>
         </div>
       </nav>
-    `;
-    }
-    /** End Side menu */
-    /** Menu Shortcuts */
-    openShortcut(selectedMenuId = '') {
-        this.openMenu = selectedMenuId;
-        this.menuOpened = true;
-    }
-    get shortcuts() {
-        const shortcuts = this.menuShortcuts.map(({ icon, id }) => {
-            if (id === 'fullscreen') {
-                return html `${icon}`;
-            }
+    `;
+    }
+    /** End Side menu */
+    /** Menu Shortcuts */
+    openShortcut(selectedMenuId = '') {
+        this.openMenu = selectedMenuId;
+        this.menuOpened = true;
+    }
+    get shortcuts() {
+        const shortcuts = this.menuShortcuts.map(({ icon, id }) => {
+            if (id === 'fullscreen') {
+                return html `${icon}`;
+            }
             return html `
         <button class="shortcut ${id}" @click="${() => this.openShortcut(id)}">
           ${icon}
         </button>
-      `;
-        });
-        return html `<div class="shortcuts">${shortcuts}</div>`;
-    }
-    /** End Menu Shortcuts */
-    /** Misc Render */
-    get menuClass() {
-        var _a, _b;
-        const hasMenuOrShortcuts = ((_a = this.menuContents) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.menuShortcuts) === null || _b === void 0 ? void 0 : _b.length);
-        const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';
-        const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
-        return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
-    }
-    static get styles() {
-        const subnavWidth = css `var(--menuWidth, 320px)`;
-        const transitionTiming = css `var(--animationTiming, 200ms)`;
-        const transitionEffect = css `transform ${transitionTiming} ease-out`;
-        const menuMargin = css `var(--theaterMenuMargin, 42px)`;
-        const theaterBg = css `var(--theaterBgColor, #000)`;
+      `;
+        });
+        return html `<div class="shortcuts">${shortcuts}</div>`;
+    }
+    /** End Menu Shortcuts */
+    /** Misc Render */
+    get menuClass() {
+        var _a, _b;
+        const hasMenuOrShortcuts = ((_a = this.menuContents) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.menuShortcuts) === null || _b === void 0 ? void 0 : _b.length);
+        const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';
+        const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
+        return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
+    }
+    static get styles() {
+        const subnavWidth = css `var(--menuWidth, 320px)`;
+        const transitionTiming = css `var(--animationTiming, 200ms)`;
+        const transitionEffect = css `transform ${transitionTiming} ease-out`;
+        const menuMargin = css `var(--theaterMenuMargin, 42px)`;
+        const theaterBg = css `var(--theaterBgColor, #000)`;
         return css `
       :host,
       #frame,
@@ -409,74 +411,74 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         margin-left: ${subnavWidth};
         transition: ${transitionEffect};
       }
-    `;
-    }
-};
-__decorate([
-    property({
-        type: Object,
-        converter: (value) => {
-            if (value && typeof value === 'string') {
-                return new MetadataResponse(JSON.parse(atob(value)));
-            }
-            return value;
-        },
-    })
-], ItemNavigator.prototype, "item", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemNavigator.prototype, "viewAvailable", void 0);
-__decorate([
-    property({ type: String })
-], ItemNavigator.prototype, "baseHost", void 0);
-__decorate([
-    property({
-        converter: (arg) => {
-            if (typeof arg === 'boolean') {
-                return arg;
-            }
-            return arg === 'true';
-        },
-    })
-], ItemNavigator.prototype, "signedIn", void 0);
-__decorate([
-    property({ type: Array })
-], ItemNavigator.prototype, "menuContents", void 0);
-__decorate([
-    property({ type: Array })
-], ItemNavigator.prototype, "menuShortcuts", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: true })
-], ItemNavigator.prototype, "viewportInFullscreen", void 0);
-__decorate([
-    property({ type: Boolean })
-], ItemNavigator.prototype, "menuOpened", void 0);
-__decorate([
-    property({ type: String })
-], ItemNavigator.prototype, "openMenu", void 0);
-__decorate([
-    property({ attribute: false })
-], ItemNavigator.prototype, "modal", void 0);
-__decorate([
-    property({ attribute: false })
-], ItemNavigator.prototype, "sharedObserver", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: true })
-], ItemNavigator.prototype, "loaded", void 0);
-__decorate([
-    state()
-], ItemNavigator.prototype, "openMenuState", void 0);
-__decorate([
-    query('#frame')
-], ItemNavigator.prototype, "frame", void 0);
-__decorate([
-    query('slot[name="header"]')
-], ItemNavigator.prototype, "headerSlot", void 0);
-__decorate([
-    query('slot[name="main"]')
-], ItemNavigator.prototype, "mainSlot", void 0);
-ItemNavigator = __decorate([
-    customElement('ia-item-navigator')
-], ItemNavigator);
-export { ItemNavigator };
+    `;
+    }
+};
+__decorate([
+    property({
+        type: Object,
+        converter: (value) => {
+            if (value && typeof value === 'string') {
+                return new MetadataResponse(JSON.parse(atob(value)));
+            }
+            return value;
+        },
+    })
+], ItemNavigator.prototype, "item", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemNavigator.prototype, "viewAvailable", void 0);
+__decorate([
+    property({ type: String })
+], ItemNavigator.prototype, "baseHost", void 0);
+__decorate([
+    property({
+        converter: (arg) => {
+            if (typeof arg === 'boolean') {
+                return arg;
+            }
+            return arg === 'true';
+        },
+    })
+], ItemNavigator.prototype, "signedIn", void 0);
+__decorate([
+    property({ type: Array })
+], ItemNavigator.prototype, "menuContents", void 0);
+__decorate([
+    property({ type: Array })
+], ItemNavigator.prototype, "menuShortcuts", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], ItemNavigator.prototype, "viewportInFullscreen", void 0);
+__decorate([
+    property({ type: Boolean })
+], ItemNavigator.prototype, "menuOpened", void 0);
+__decorate([
+    property({ type: String })
+], ItemNavigator.prototype, "openMenu", void 0);
+__decorate([
+    property({ attribute: false })
+], ItemNavigator.prototype, "modal", void 0);
+__decorate([
+    property({ attribute: false })
+], ItemNavigator.prototype, "sharedObserver", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], ItemNavigator.prototype, "loaded", void 0);
+__decorate([
+    state()
+], ItemNavigator.prototype, "openMenuState", void 0);
+__decorate([
+    query('#frame')
+], ItemNavigator.prototype, "frame", void 0);
+__decorate([
+    query('slot[name="header"]')
+], ItemNavigator.prototype, "headerSlot", void 0);
+__decorate([
+    query('slot[name="main"]')
+], ItemNavigator.prototype, "mainSlot", void 0);
+ItemNavigator = __decorate([
+    customElement('ia-item-navigator')
+], ItemNavigator);
+export { ItemNavigator };
 //# sourceMappingURL=item-navigator.js.map