@internetarchive/ia-item-navigator 0.0.0 → 0.0.2

package/dist/src/item-navigator.js

@@ -1,67 +1,127 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement, customElement, property, state, } from 'lit-element';
+import { css, html, LitElement, customElement, property, state, query, } from 'lit-element';
 import { nothing } from 'lit-html';
 import { MetadataResponse } from '@internetarchive/search-service';
-// @ts-ignore
-import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
+import '@internetarchive/ia-menu-slider';
 import '@internetarchive/icon-ellipses/icon-ellipses';
 import './loader';
+import './no-theater-available';
+export var ItemType;
+(function (ItemType) {
+    ItemType["BOOK"] = "bookreader";
+})(ItemType || (ItemType = {}));
 let ItemNavigator = class ItemNavigator extends LitElement {
     constructor() {
         super(...arguments);
-        this.item = undefined;
-        this.itemType = '';
         this.baseHost = 'archive.org';
         this.signedIn = false;
-        this.menuShortcuts = [];
         this.menuContents = [];
-        this.viewportInFullscreen = false;
+        this.menuShortcuts = [];
+        this.viewportInFullscreen = null;
         this.menuOpened = false;
-        this.openMenu = '';
-        this.modal = undefined;
-        this.loaded = 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();
+        }
     }
-    firstUpdated() {
-        if (!this.modal) {
-            this.createModal();
+    /** Shared observer */
+    handleResize(entry) {
+        const { width } = entry.contentRect;
+        if (width <= 600) {
+            this.openMenuState = 'overlay';
+            return;
         }
+        this.openMenuState = 'shift';
+    }
+    setResizeObserver() {
+        var _a;
+        (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.addObserver(this.resizeObserverConfig);
+    }
+    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 readerHeightStyle() {
+        var _a;
+        const calcFSHeight = `calc(100vh - ${(_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.offsetHeight}px)`;
+        return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
+    }
+    get loadingArea() {
+        return html `
+      <div class="loading-area">
+        <div class="loading-view">
+          <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>
+        </div>
+      </div>
+    `;
     }
     render() {
-        const displayReaderClass = this.loaded ? '' : 'hide';
+        const displayReaderClass = this.loaded ? '' : 'hidden';
         return html `
-      <div id="frame" class=${this.menuClass}>
-        <slot name="item-nav-header"></slot>
+      <div id="frame" class=${`${this.menuClass}`}>
         <div class="menu-and-reader">
           ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
-          ${!this.loaded
-            ? html `<ia-itemnav-loader></ia-itemnav-loader>`
-            : nothing}
-          ${this.item
-            ? html `<div id="reader" class=${displayReaderClass}>
-                ${this.renderViewport}
-              </div>`
-            : nothing}
+          <slot name="theater-header"></slot>
+          <div
+            id="reader"
+            class=${displayReaderClass}
+            style=${this.readerHeightStyle}
+          >
+            ${this.renderViewport}
+          </div>
+          ${!this.loaded ? this.loadingArea : nothing}
         </div>
       </div>
     `;
     }
-    get BooksViewer() {
+    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 theaterSlot() {
+        return html `
+      <slot name="theater-main" style=${this.readerHeightStyle}></slot>
+    `;
+    }
+    get booksViewer() {
+        const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
         return html `
       <book-navigator
+        .modal=${this.modal}
         .baseHost=${this.baseHost}
-        .book=${this.item}
+        .itemMD=${this.item}
         ?signedIn=${this.signedIn}
         ?sideMenuOpen=${this.menuOpened}
+        .sharedObserver=${this.sharedObserver}
         @ViewportInFullScreen=${this.manageViewportFullscreen}
         @loadingStateUpdated=${this.loadingStateUpdated}
         @updateSideMenu=${this.manageSideMenuEvents}
         @menuUpdated=${this.setMenuContents}
         @menuShortcutsUpdated=${this.setMenuShortcuts}
-        @showItemNavigatorModal=${this.openModal}
-        @closeItemNavigatorModal=${this.closeModal}
       >
-        <div slot="bookreader">
-          <slot name="bookreader"></slot>
+        <div slot="theater-main" style=${slotVisibility}>
+          ${this.theaterSlot}
         </div>
       </book-navigator>
     `;
@@ -70,52 +130,28 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         if (!this.item) {
             return nothing;
         }
-        if (this.itemType === 'bookreader') {
-            return this.BooksViewer;
+        if (this.itemType === ItemType.BOOK) {
+            return this.booksViewer;
         }
-        return html ` <ia-item-inspector
-      .itemMD=${this.item}
-      @loadingStateUpdated=${this.loadingStateUpdated}
-      @updateSideMenu=${this.manageSideMenuEvents}
-      @menuUpdated=${this.setMenuContents}
-      @menuShortcutsUpdated=${this.setMenuShortcuts}
-    ></ia-item-inspector>`;
+        return this.noTheaterView;
     }
     loadingStateUpdated(e) {
         const { loaded } = e.detail;
-        this.loaded = !!loaded;
-    }
-    /* Modal management */
-    openModal(e) {
-        var _a;
-        const { config, customModalContent } = e.detail;
-        if (!config || !customModalContent) {
-            return;
-        }
-        (_a = this.modal) === null || _a === void 0 ? void 0 : _a.showModal({
-            config,
-            customModalContent,
-        });
-    }
-    closeModal() {
-        var _a;
-        (_a = this.modal) === null || _a === void 0 ? void 0 : _a.closeModal();
-    }
-    /** Creates modal DOM & attaches to `<body>` */
-    createModal() {
-        this.modal = document.createElement('modal-manager');
-        document.body.appendChild(this.modal);
+        this.loaded = loaded || null;
     }
-    /* End Modal management */
     /** Fullscreen Management */
     manageViewportFullscreen(e) {
-        const { isFullScreen } = e.detail;
-        this.viewportInFullscreen = isFullScreen;
+        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() {
-        return !!(this.menuContents.length || this.menuShortcuts.length);
+        return !!this.menuContents.length;
     }
     toggleMenu() {
         this.menuOpened = !this.menuOpened;
@@ -125,25 +161,47 @@ let ItemNavigator = class ItemNavigator extends LitElement {
     }
     setOpenMenu(e) {
         const { id } = e.detail;
-        this.openMenu = id === this.openMenu ? '' : id;
+        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) {
-            if (action === 'open') {
-                this.openShortcut(menuId);
-            }
-            else if (action === 'toggle') {
-                this.openMenu = menuId;
-                this.toggleMenu();
-            }
+        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"
+        @click=${this.toggleMenu}
+        title="Toggle theater side panels"
+      >
+        <div>
+          <ia-icon-ellipses
+            style="width: var(--iconWidth); height: var(--iconHeight);"
+          ></ia-icon-ellipses>
+        </div>
+      </button>
+    `;
+    }
+    get selectedMenuId() {
+        return this.openMenu || '';
+    }
     get renderSideMenu() {
         const drawerState = this.menuOpened ? '' : 'hidden';
         return html `
@@ -152,7 +210,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         <div id="menu" class=${drawerState}>
           <ia-menu-slider
             .menus=${this.menuContents}
-            .selectedMenu=${this.openMenu}
+            .selectedMenu=${this.selectedMenuId}
             @menuTypeSelected=${this.setOpenMenu}
             @menuSliderClosed=${this.closeMenu}
             manuallyHandleClose
@@ -164,19 +222,21 @@ let ItemNavigator = class ItemNavigator extends LitElement {
     }
     /** End Side menu */
     /** Menu Shortcuts */
-    setMenuShortcuts(e) {
-        this.menuShortcuts = [...e.detail];
-    }
     openShortcut(selectedMenuId = '') {
         this.openMenu = selectedMenuId;
         this.menuOpened = true;
     }
     get shortcuts() {
-        const shortcuts = this.menuShortcuts.map(({ icon, id }) => html `
+        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 */
@@ -184,30 +244,17 @@ let ItemNavigator = class ItemNavigator extends LitElement {
     get menuClass() {
         const drawerState = this.menuOpened ? 'open' : '';
         const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
-        return `${drawerState} ${fullscreenState}`;
-    }
-    get menuToggleButton() {
-        return html `
-      <button
-        class="toggle-menu"
-        @click=${() => this.toggleMenu()}
-        title="Toggle theater side panels"
-      >
-        <div><ia-icon-ellipses></ia-icon-ellipses></div>
-      </button>
-    `;
+        return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
     }
     static get styles() {
         const subnavWidth = css `var(--menuWidth, 320px)`;
-        const tabletPlusQuery = css `
-      @media (min-width: 640px);
-    `;
         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,
-      #reader,
       .menu-and-reader {
         min-height: inherit;
         height: inherit;
@@ -215,18 +262,48 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         overflow: hidden;
         display: block;
       }
+
+      :host,
+      #frame,
+      .menu-and-reader,
+      .loading-area,
+      .loading-view {
+        min-height: inherit;
+        height: inherit;
+      }
+
+      slot {
+        display: block;
+        overflow: hidden;
+      }
+
       #frame {
-        border: 1px solid white;
+        background-color: ${theaterBg};
+        color-scheme: dark;
+      }
+
+      #frame.fullscreen {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 9;
       }
 
-      #frame.fullscreen,
-      #frame.fullscreen #reader {
-        height: 100vh;
+      .loading-view {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      ia-itemnav-loader {
+        display: block;
+        width: 100%;
       }
 
       .hidden {
-        height: 1px;
-        width: 1px;
+        display: none;
       }
 
       button {
@@ -250,17 +327,18 @@ let ItemNavigator = class ItemNavigator extends LitElement {
 
       nav .minimized {
         background: rgba(0, 0, 0, 0.7);
-        border-bottom-right-radius: 5%;
+        padding-top: 6px;
         position: absolute;
-        padding-top: 0.6rem;
-        left: 0;
-        width: 4rem;
+        width: ${menuMargin};
         z-index: 2;
+        left: 0;
+        border-bottom-right-radius: 5%;
       }
 
       nav .minimized button {
         width: var(--iconWidth);
         height: var(--iconHeight);
+        margin-bottom: 0.2rem;
         margin: auto;
         display: inline-flex;
         vertical-align: middle;
@@ -268,8 +346,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         align-items: center;
         -webkit-box-pack: center;
         justify-content: center;
-        width: 4rem;
-        height: 4rem;
+        width: ${menuMargin};
+        height: ${menuMargin};
       }
 
       nav .minimized button.toggle-menu > * {
@@ -301,23 +379,26 @@ let ItemNavigator = class ItemNavigator extends LitElement {
       #reader {
         position: relative;
         z-index: 1;
-        transition: ${transitionEffect};
+        /* transition: ${transitionEffect}; */
         transform: translateX(0);
         width: 100%;
       }
 
+      .open.overlay #reader {
+        transition: none;
+      }
+
       .open #menu {
         width: ${subnavWidth};
         transform: translateX(0);
         transition: ${transitionEffect};
       }
 
-      ${tabletPlusQuery} {
-        .open #reader {
-          transition: ${transitionEffect};
-          transform: translateX(${subnavWidth});
-          width: calc(100% - ${subnavWidth});
-        }
+      .open.shift slot[name='theater-header'],
+      .open.shift #reader {
+        width: calc(100% - var(--menuWidth));
+        float: right;
+        transition: ${transitionEffect};
       }
     `;
     }
@@ -326,7 +407,7 @@ __decorate([
     property({
         type: Object,
         converter: (value) => {
-            if (typeof value === 'string') {
+            if (value && typeof value === 'string') {
                 return new MetadataResponse(JSON.parse(atob(value)));
             }
             return value;
@@ -349,22 +430,14 @@ __decorate([
         },
     })
 ], ItemNavigator.prototype, "signedIn", void 0);
-__decorate([
-    property({
-        type: Array,
-        hasChanged: (newVal, oldVal) => {
-            if (newVal !== oldVal) {
-                return true;
-            }
-            return false;
-        },
-    })
-], ItemNavigator.prototype, "menuShortcuts", void 0);
 __decorate([
     property({ type: Array })
 ], ItemNavigator.prototype, "menuContents", void 0);
 __decorate([
-    property({ type: Boolean })
+    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 })
@@ -373,14 +446,25 @@ __decorate([
     property({ type: String })
 ], ItemNavigator.prototype, "openMenu", void 0);
 __decorate([
-    property({ type: Object })
+    property({ attribute: false })
 ], ItemNavigator.prototype, "modal", void 0);
 __decorate([
-    state()
+    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="theater-header"]')
+], ItemNavigator.prototype, "headerSlot", void 0);
 ItemNavigator = __decorate([
-    customElement('item-navigator')
+    customElement('ia-item-navigator')
 ], ItemNavigator);
 export { ItemNavigator };
-customElements.define('ia-menu-slider', IAMenuSlider);
 //# sourceMappingURL=item-navigator.js.map

package/dist/src/item-navigator.js.map

@@ -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} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\n// @ts-ignore\nimport { IAMenuSlider } from '@internetarchive/ia-menu-slider';\nimport { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n  IntManageFullscreenEvent,\n  IntOpenModalEvent,\n  IntManageSideMenuEvent,\n  IntSetOpenMenuEvent,\n  IntSetMenuContentsEvent,\n  IntSetMenuShortcuts,\n  IntLoadingStateUpdatedEvent,\n} from './interfaces/event-interfaces';\n\nimport { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';\n\n@customElement('item-navigator')\nexport class ItemNavigator extends LitElement {\n  @property({\n    type: Object,\n    converter: (value: string | MetadataResponse | null): MetadataResponse => {\n      if (typeof value === 'string') {\n        return new MetadataResponse(JSON.parse(atob(value)));\n      }\n      return value as MetadataResponse;\n    },\n  })\n  item: MetadataResponse | undefined = undefined;\n\n  @property({ type: String }) itemType = '';\n\n  @property({ type: String }) baseHost = 'archive.org';\n\n  @property({\n    converter: (arg: string | boolean | null) => {\n      if (typeof arg === 'boolean') {\n        return arg;\n      }\n      return arg === 'true';\n    },\n  })\n  signedIn = false;\n\n  @property({\n    type: Array,\n    hasChanged: (newVal: Array<object>, oldVal: Array<object>) => {\n      if (newVal !== oldVal) {\n        return true;\n      }\n      return false;\n    },\n  })\n  menuShortcuts: IntMenuShortcut[] = [];\n\n  @property({ type: Array }) menuContents: IntMenuProvider[] = [];\n\n  @property({ type: Boolean }) viewportInFullscreen = false;\n\n  @property({ type: Boolean }) menuOpened = false;\n\n  @property({ type: String }) openMenu = '';\n\n  @property({ type: Object }) modal:\n    | ModalManagerInterface\n    | undefined = undefined;\n\n  @state() loaded: boolean = false;\n\n  firstUpdated(): void {\n    if (!this.modal) {\n      this.createModal();\n    }\n  }\n\n  render(): TemplateResult {\n    const displayReaderClass = this.loaded ? '' : 'hide';\n    return html`\n      <div id=\"frame\" class=${this.menuClass}>\n        <slot name=\"item-nav-header\"></slot>\n        <div class=\"menu-and-reader\">\n          ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n          ${!this.loaded\n            ? html`<ia-itemnav-loader></ia-itemnav-loader>`\n            : nothing}\n          ${this.item\n            ? html`<div id=\"reader\" class=${displayReaderClass}>\n                ${this.renderViewport}\n              </div>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  get BooksViewer(): TemplateResult {\n    return html`\n      <book-navigator\n        .baseHost=${this.baseHost}\n        .book=${this.item}\n        ?signedIn=${this.signedIn}\n        ?sideMenuOpen=${this.menuOpened}\n        @ViewportInFullScreen=${this.manageViewportFullscreen}\n        @loadingStateUpdated=${this.loadingStateUpdated}\n        @updateSideMenu=${this.manageSideMenuEvents}\n        @menuUpdated=${this.setMenuContents}\n        @menuShortcutsUpdated=${this.setMenuShortcuts}\n        @showItemNavigatorModal=${this.openModal}\n        @closeItemNavigatorModal=${this.closeModal}\n      >\n        <div slot=\"bookreader\">\n          <slot name=\"bookreader\"></slot>\n        </div>\n      </book-navigator>\n    `;\n  }\n\n  get renderViewport(): TemplateResult | typeof nothing {\n    if (!this.item) {\n      return nothing;\n    }\n    if (this.itemType === 'bookreader') {\n      return this.BooksViewer;\n    }\n    return html` <ia-item-inspector\n      .itemMD=${this.item}\n      @loadingStateUpdated=${this.loadingStateUpdated}\n      @updateSideMenu=${this.manageSideMenuEvents}\n      @menuUpdated=${this.setMenuContents}\n      @menuShortcutsUpdated=${this.setMenuShortcuts}\n    ></ia-item-inspector>`;\n  }\n\n  loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {\n    const { loaded } = e.detail;\n    this.loaded = !!loaded;\n  }\n\n  /* Modal management */\n  openModal(e: IntOpenModalEvent): void {\n    const { config, customModalContent } = e.detail;\n    if (!config || !customModalContent) {\n      return;\n    }\n\n    this.modal?.showModal({\n      config,\n      customModalContent,\n    });\n  }\n\n  closeModal(): void {\n    this.modal?.closeModal();\n  }\n\n  /** Creates modal DOM & attaches to `<body>` */\n  private createModal(): void {\n    this.modal = document.createElement(\n      'modal-manager'\n    ) as ModalManagerInterface;\n    document.body.appendChild(this.modal);\n  }\n  /* End Modal management */\n\n  /** Fullscreen Management */\n  manageViewportFullscreen(e: IntManageFullscreenEvent): void {\n    const { isFullScreen } = e.detail;\n    this.viewportInFullscreen = isFullScreen;\n  }\n  /** End Fullscreen Management */\n\n  /** Side menu */\n  get shouldRenderMenu(): boolean {\n    return !!(this.menuContents.length || this.menuShortcuts.length);\n  }\n\n  toggleMenu(): void {\n    this.menuOpened = !this.menuOpened;\n  }\n\n  closeMenu(): void {\n    this.menuOpened = false;\n  }\n\n  setOpenMenu(e: IntSetOpenMenuEvent): void {\n    const { id } = e.detail;\n    this.openMenu = id === this.openMenu ? '' : id;\n  }\n\n  setMenuContents(e: IntSetMenuContentsEvent): void {\n    const updatedContents = [...e.detail];\n    this.menuContents = updatedContents;\n  }\n\n  /** Toggles Side Menu & Sets viewable subpanel  */\n  manageSideMenuEvents(e: IntManageSideMenuEvent): void {\n    const { menuId, action } = e.detail;\n    if (menuId) {\n      if (action === 'open') {\n        this.openShortcut(menuId);\n      } else if (action === 'toggle') {\n        this.openMenu = menuId;\n        this.toggleMenu();\n      }\n    }\n  }\n\n  get renderSideMenu(): TemplateResult {\n    const drawerState = this.menuOpened ? '' : 'hidden';\n\n    return html`\n      <nav>\n        <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n        <div id=\"menu\" class=${drawerState}>\n          <ia-menu-slider\n            .menus=${this.menuContents}\n            .selectedMenu=${this.openMenu}\n            @menuTypeSelected=${this.setOpenMenu}\n            @menuSliderClosed=${this.closeMenu}\n            manuallyHandleClose\n            open\n          ></ia-menu-slider>\n        </div>\n      </nav>\n    `;\n  }\n  /** End Side menu */\n\n  /** Menu Shortcuts */\n  setMenuShortcuts(e: IntSetMenuShortcuts): void {\n    this.menuShortcuts = [...e.detail];\n  }\n\n  openShortcut(selectedMenuId = ''): void {\n    this.openMenu = selectedMenuId;\n    this.menuOpened = true;\n  }\n\n  get shortcuts(): TemplateResult {\n    const shortcuts = this.menuShortcuts.map(\n      ({ icon, id }) => html`\n        <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n          ${icon}\n        </button>\n      `\n    );\n    return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n  }\n  /** End Menu Shortcuts */\n\n  /** Misc Render */\n  get menuClass(): string {\n    const drawerState = this.menuOpened ? 'open' : '';\n    const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n    return `${drawerState} ${fullscreenState}`;\n  }\n\n  get menuToggleButton(): TemplateResult {\n    return html`\n      <button\n        class=\"toggle-menu\"\n        @click=${() => this.toggleMenu()}\n        title=\"Toggle theater side panels\"\n      >\n        <div><ia-icon-ellipses></ia-icon-ellipses></div>\n      </button>\n    `;\n  }\n\n  static get styles() {\n    const subnavWidth = css`var(--menuWidth, 320px)`;\n    const tabletPlusQuery = css`\n      @media (min-width: 640px);\n    `;\n    const transitionTiming = css`var(--animationTiming, 200ms)`;\n    const transitionEffect = css`transform ${transitionTiming} ease-out`;\n\n    return css`\n      :host,\n      #frame,\n      #reader,\n      .menu-and-reader {\n        min-height: inherit;\n        height: inherit;\n        position: relative;\n        overflow: hidden;\n        display: block;\n      }\n      #frame {\n        border: 1px solid white;\n      }\n\n      #frame.fullscreen,\n      #frame.fullscreen #reader {\n        height: 100vh;\n      }\n\n      .hidden {\n        height: 1px;\n        width: 1px;\n      }\n\n      button {\n        cursor: pointer;\n        padding: 0;\n        border: 0;\n      }\n\n      button:focus,\n      button:active {\n        outline: none;\n      }\n\n      .menu-and-reader {\n        position: relative;\n      }\n\n      nav button {\n        background: none;\n      }\n\n      nav .minimized {\n        background: rgba(0, 0, 0, 0.7);\n        border-bottom-right-radius: 5%;\n        position: absolute;\n        padding-top: 0.6rem;\n        left: 0;\n        width: 4rem;\n        z-index: 2;\n      }\n\n      nav .minimized button {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin: auto;\n        display: inline-flex;\n        vertical-align: middle;\n        -webkit-box-align: center;\n        align-items: center;\n        -webkit-box-pack: center;\n        justify-content: center;\n        width: 4rem;\n        height: 4rem;\n      }\n\n      nav .minimized button.toggle-menu > * {\n        border: 2px solid var(--iconStrokeColor);\n        border-radius: var(--iconWidth);\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin: auto;\n      }\n\n      ia-icon-ellipses {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n      }\n\n      #menu {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        z-index: 3;\n        overflow: hidden;\n        transform: translateX(-${subnavWidth});\n        width: ${subnavWidth};\n        transform: translateX(calc(${subnavWidth} * -1));\n        transition: ${transitionEffect};\n      }\n\n      #reader {\n        position: relative;\n        z-index: 1;\n        transition: ${transitionEffect};\n        transform: translateX(0);\n        width: 100%;\n      }\n\n      .open #menu {\n        width: ${subnavWidth};\n        transform: translateX(0);\n        transition: ${transitionEffect};\n      }\n\n      ${tabletPlusQuery} {\n        .open #reader {\n          transition: ${transitionEffect};\n          transform: translateX(${subnavWidth});\n          width: calc(100% - ${subnavWidth});\n        }\n      }\n    `;\n  }\n}\n\ncustomElements.define('ia-menu-slider', IAMenuSlider);\n"]}
+{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  customElement,\n  property,\n  state,\n  query,\n  PropertyValues,\n  CSSResult,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n  SharedResizeObserver,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport '@internetarchive/ia-menu-slider';\n\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n  ToggleSideMenuOpenEvent,\n  ToggleSidePanelOpenEvent,\n  SetSideMenuContentsEvent,\n  SetSideMenuShortcutsEvent,\n  loadingStateUpdatedEvent,\n  ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport {\n  MenuProviderInterface,\n  MenuShortcutInterface,\n  MenuId,\n} from './interfaces/menu-interfaces';\nimport './no-theater-available';\n\nexport enum ItemType {\n  BOOK = 'bookreader',\n}\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface {\n  @property({\n    type: Object,\n    converter: (value: string | MetadataResponse | null): MetadataResponse => {\n      if (value && typeof value === 'string') {\n        return new MetadataResponse(JSON.parse(atob(value)));\n      }\n      return value as MetadataResponse;\n    },\n  })\n  item?: MetadataResponse;\n\n  @property({ type: String }) itemType?: ItemType;\n\n  @property({ type: String }) baseHost = 'archive.org';\n\n  @property({\n    converter: (arg: string | boolean | null) => {\n      if (typeof arg === 'boolean') {\n        return arg;\n      }\n      return arg === 'true';\n    },\n  })\n  signedIn = false;\n\n  @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n  @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n  @property({ type: Boolean, reflect: true, attribute: true })\n  viewportInFullscreen: boolean | null = null;\n\n  @property({ type: Boolean }) menuOpened = false;\n\n  @property({ type: String }) openMenu?: MenuId;\n\n  @property({ attribute: false }) modal?: ModalManager;\n\n  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) loaded:\n    | true\n    | null = null;\n\n  @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n  @query('#frame') private frame!: HTMLDivElement;\n\n  @query('slot[name=\"theater-header\"]') private headerSlot!: HTMLDivElement;\n\n  disconnectedCallback() {\n    this.removeResizeObserver();\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('sharedObserver')) {\n      const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;\n      oldObserver?.removeObserver(this.resizeObserverConfig);\n      this.setResizeObserver();\n    }\n  }\n\n  /** Shared observer */\n  handleResize(entry: ResizeObserverEntry): void {\n    const { width } = entry.contentRect;\n    if (width <= 600) {\n      this.openMenuState = 'overlay';\n      return;\n    }\n    this.openMenuState = 'shift';\n  }\n\n  private setResizeObserver(): void {\n    this.sharedObserver?.addObserver(this.resizeObserverConfig);\n  }\n\n  private removeResizeObserver(): void {\n    this.sharedObserver?.removeObserver(this.resizeObserverConfig);\n  }\n\n  get resizeObserverConfig(): {\n    handler: SharedResizeObserverResizeHandlerInterface;\n    target: Element;\n  } {\n    return {\n      handler: this,\n      target: this.frame,\n    };\n  }\n  /** End shared observer */\n\n  get loaderTitle() {\n    return this.viewportInFullscreen ? 'Internet Archive' : '';\n  }\n\n  get readerHeightStyle(): string {\n    const calcFSHeight = `calc(100vh - ${this.headerSlot?.offsetHeight}px)`;\n    return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';\n  }\n\n  get loadingArea() {\n    return html`\n      <div class=\"loading-area\">\n        <div class=\"loading-view\">\n          <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>\n        </div>\n      </div>\n    `;\n  }\n\n  render(): TemplateResult {\n    const displayReaderClass = this.loaded ? '' : 'hidden';\n    return html`\n      <div id=\"frame\" class=${`${this.menuClass}`}>\n        <div class=\"menu-and-reader\">\n          ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n          <slot name=\"theater-header\"></slot>\n          <div\n            id=\"reader\"\n            class=${displayReaderClass}\n            style=${this.readerHeightStyle}\n          >\n            ${this.renderViewport}\n          </div>\n          ${!this.loaded ? this.loadingArea : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  get noTheaterView() {\n    return html`<ia-no-theater-available\n      .identifier=${this.item?.metadata?.identifier}\n      @loadingStateUpdated=${this.loadingStateUpdated}\n    ></ia-no-theater-available>`;\n  }\n\n  get theaterSlot() {\n    return html`\n      <slot name=\"theater-main\" style=${this.readerHeightStyle}></slot>\n    `;\n  }\n\n  get booksViewer(): TemplateResult {\n    const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n\n    return html`\n      <book-navigator\n        .modal=${this.modal}\n        .baseHost=${this.baseHost}\n        .itemMD=${this.item}\n        ?signedIn=${this.signedIn}\n        ?sideMenuOpen=${this.menuOpened}\n        .sharedObserver=${this.sharedObserver}\n        @ViewportInFullScreen=${this.manageViewportFullscreen}\n        @loadingStateUpdated=${this.loadingStateUpdated}\n        @updateSideMenu=${this.manageSideMenuEvents}\n        @menuUpdated=${this.setMenuContents}\n        @menuShortcutsUpdated=${this.setMenuShortcuts}\n      >\n        <div slot=\"theater-main\" style=${slotVisibility}>\n          ${this.theaterSlot}\n        </div>\n      </book-navigator>\n    `;\n  }\n\n  get renderViewport(): TemplateResult | typeof nothing {\n    if (!this.item) {\n      return nothing;\n    }\n    if (this.itemType === ItemType.BOOK) {\n      return this.booksViewer;\n    }\n    return this.noTheaterView;\n  }\n\n  loadingStateUpdated(e: loadingStateUpdatedEvent): void {\n    const { loaded } = e.detail;\n    this.loaded = loaded || null;\n  }\n\n  /** Fullscreen Management */\n  manageViewportFullscreen(e: ManageFullscreenEvent): void {\n    const fullscreenStatus = !!e.detail.isFullScreen;\n    this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n    const event = new CustomEvent('fullscreenToggled', {\n      detail: e.detail,\n    }) as ManageFullscreenEvent;\n\n    this.dispatchEvent(event);\n  }\n  /** End Fullscreen Management */\n\n  /** Side menu */\n  get shouldRenderMenu(): boolean {\n    return !!this.menuContents.length;\n  }\n\n  toggleMenu(): void {\n    this.menuOpened = !this.menuOpened;\n  }\n\n  closeMenu(): void {\n    this.menuOpened = false;\n  }\n\n  setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n    const { id } = e.detail;\n    this.openMenu = id !== this.openMenu ? id : undefined;\n  }\n\n  setMenuContents(e: SetSideMenuContentsEvent): void {\n    const updatedContents = [...e.detail];\n    this.menuContents = updatedContents;\n  }\n\n  setMenuShortcuts(e: SetSideMenuShortcutsEvent) {\n    this.menuShortcuts = [...e.detail];\n  }\n\n  /** Toggles Side Menu & Sets viewable subpanel  */\n  manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n    const { menuId, action } = e.detail;\n    if (!menuId) {\n      return;\n    }\n\n    if (action === 'open') {\n      this.openShortcut(menuId);\n    } else if (action === 'toggle') {\n      this.openMenu = menuId;\n      this.toggleMenu();\n    }\n  }\n\n  get menuToggleButton() {\n    return html`\n      <button\n        class=\"toggle-menu\"\n        @click=${this.toggleMenu}\n        title=\"Toggle theater side panels\"\n      >\n        <div>\n          <ia-icon-ellipses\n            style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n          ></ia-icon-ellipses>\n        </div>\n      </button>\n    `;\n  }\n\n  get selectedMenuId(): MenuId | '' {\n    return this.openMenu || '';\n  }\n\n  get renderSideMenu(): TemplateResult {\n    const drawerState = this.menuOpened ? '' : 'hidden';\n    return html`\n      <nav>\n        <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n        <div id=\"menu\" class=${drawerState}>\n          <ia-menu-slider\n            .menus=${this.menuContents}\n            .selectedMenu=${this.selectedMenuId}\n            @menuTypeSelected=${this.setOpenMenu}\n            @menuSliderClosed=${this.closeMenu}\n            manuallyHandleClose\n            open\n          ></ia-menu-slider>\n        </div>\n      </nav>\n    `;\n  }\n  /** End Side menu */\n\n  /** Menu Shortcuts */\n  openShortcut(selectedMenuId: MenuId = ''): void {\n    this.openMenu = selectedMenuId;\n    this.menuOpened = true;\n  }\n\n  get shortcuts(): TemplateResult {\n    const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n      if (id === 'fullscreen') {\n        return html`${icon}`;\n      }\n\n      return html`\n        <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n          ${icon}\n        </button>\n      `;\n    });\n    return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n  }\n  /** End Menu Shortcuts */\n\n  /** Misc Render */\n  get menuClass(): string {\n    const drawerState = this.menuOpened ? 'open' : '';\n    const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n    return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n  }\n\n  static get styles(): CSSResult {\n    const subnavWidth = css`var(--menuWidth, 320px)`;\n    const transitionTiming = css`var(--animationTiming, 200ms)`;\n    const transitionEffect = css`transform ${transitionTiming} ease-out`;\n    const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n    const theaterBg = css`var(--theaterBgColor, #000)`;\n\n    return css`\n      :host,\n      #frame,\n      .menu-and-reader {\n        min-height: inherit;\n        height: inherit;\n        position: relative;\n        overflow: hidden;\n        display: block;\n      }\n\n      :host,\n      #frame,\n      .menu-and-reader,\n      .loading-area,\n      .loading-view {\n        min-height: inherit;\n        height: inherit;\n      }\n\n      slot {\n        display: block;\n        overflow: hidden;\n      }\n\n      #frame {\n        background-color: ${theaterBg};\n        color-scheme: dark;\n      }\n\n      #frame.fullscreen {\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 9;\n      }\n\n      .loading-view {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      ia-itemnav-loader {\n        display: block;\n        width: 100%;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      button {\n        cursor: pointer;\n        padding: 0;\n        border: 0;\n      }\n\n      button:focus,\n      button:active {\n        outline: none;\n      }\n\n      .menu-and-reader {\n        position: relative;\n      }\n\n      nav button {\n        background: none;\n      }\n\n      nav .minimized {\n        background: rgba(0, 0, 0, 0.7);\n        padding-top: 6px;\n        position: absolute;\n        width: ${menuMargin};\n        z-index: 2;\n        left: 0;\n        border-bottom-right-radius: 5%;\n      }\n\n      nav .minimized button {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin-bottom: 0.2rem;\n        margin: auto;\n        display: inline-flex;\n        vertical-align: middle;\n        -webkit-box-align: center;\n        align-items: center;\n        -webkit-box-pack: center;\n        justify-content: center;\n        width: ${menuMargin};\n        height: ${menuMargin};\n      }\n\n      nav .minimized button.toggle-menu > * {\n        border: 2px solid var(--iconStrokeColor);\n        border-radius: var(--iconWidth);\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin: auto;\n      }\n\n      ia-icon-ellipses {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n      }\n\n      #menu {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        z-index: 3;\n        overflow: hidden;\n        transform: translateX(-${subnavWidth});\n        width: ${subnavWidth};\n        transform: translateX(calc(${subnavWidth} * -1));\n        transition: ${transitionEffect};\n      }\n\n      #reader {\n        position: relative;\n        z-index: 1;\n        /* transition: ${transitionEffect}; */\n        transform: translateX(0);\n        width: 100%;\n      }\n\n      .open.overlay #reader {\n        transition: none;\n      }\n\n      .open #menu {\n        width: ${subnavWidth};\n        transform: translateX(0);\n        transition: ${transitionEffect};\n      }\n\n      .open.shift slot[name='theater-header'],\n      .open.shift #reader {\n        width: calc(100% - var(--menuWidth));\n        float: right;\n        transition: ${transitionEffect};\n      }\n    `;\n  }\n}\n"]}

package/dist/src/loader.d.ts

@@ -1,5 +1,10 @@
 import { LitElement } from 'lit-element';
 export declare class IAItemNavLoader extends LitElement {
+    static get properties(): {
+        title: {
+            type: StringConstructor;
+        };
+    };
     get bookIconSvg(): import("lit-element").SVGTemplateResult;
     get icon(): import("lit-element").SVGTemplateResult;
     get loader(): import("lit-element").SVGTemplateResult;

package/dist/src/loader.js

@@ -1,8 +1,13 @@
 import { __decorate } from "tslib";
 /* eslint-disable class-methods-use-this */
 import { css, html, LitElement, customElement } from 'lit-element';
-import { svg } from 'lit-html';
+import { svg, nothing } from 'lit-html';
 let IAItemNavLoader = class IAItemNavLoader extends LitElement {
+    static get properties() {
+        return {
+            title: { type: String },
+        };
+    }
     get bookIconSvg() {
         return svg `
       <g class="bookIcon" transform="matrix(1 0 0 -1 28 67.362264)">
@@ -38,9 +43,10 @@ let IAItemNavLoader = class IAItemNavLoader extends LitElement {
     `;
     }
     render() {
+        const title = this.title ? html `<h2>${this.title}</h2>` : nothing;
         return html `
       <div class="place-holder">
-        ${this.loader}
+        ${title} ${this.loader}
         <h3>Loading viewer</h3>
       </div>
     `;