@internetarchive/ia-item-navigator 0.0.0-a8 → 0.0.2-a1

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

@@ -1 +1 @@
-{"version":3,"file":"item-inspector.js","sourceRoot":"","sources":["../../../src/item-inspector/item-inspector.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-console */\nimport {\n  css,\n  html,\n  LitElement,\n  customElement,\n  property,\n  state,\n} from 'lit-element';\nimport { MetadataResponse } from '@internetarchive/search-service';\n\nimport {\n  ModalManagerInterface,\n  ModalConfig,\n} from '@internetarchive/modal-manager';\nimport { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';\nimport { IntNavController } from '../interfaces/nav-controller-interface';\nimport {\n  IntMenuProvider,\n  IntMenuShortcut,\n} from '../interfaces/menu-interfaces';\nimport { IntManageFullscreenEvent } from '../interfaces/event-interfaces';\n\nimport { ShareProvider } from './share-provider';\nimport { FilesByTypeProvider } from './files-by-type/files-by-type-provider';\nimport { VisualModsProvider } from './visual-mod-provider';\n\n// eslint-disable-next-line no-shadow\nenum ItemInspectorEvents {\n  menuUpdated = 'menuUpdated',\n  updateSideMenu = 'updateSideMenu',\n  PostInit = 'PostInit',\n  ViewportInFullScreen = 'ViewportInFullScreen',\n}\n\ninterface menuProvidersInt {\n  [menuId: string]: IntMenuProvider;\n}\n\n@customElement('ia-item-inspector')\nexport class IaItemInspector extends LitElement implements IntNavController {\n  @property({ type: Object }) itemMD: MetadataResponse = {\n    metadata: {},\n  } as MetadataResponse;\n\n  @property({ type: String }) baseHost = 'https://archive.org';\n\n  @property({ type: Object }) menuProviders: menuProvidersInt = {};\n\n  @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];\n\n  @property({ type: Boolean }) sideMenuOpen = false;\n\n  @property({ type: Boolean }) fullscreenState = false;\n\n  @property({ attribute: false }) modal!: ModalManagerInterface;\n\n  @property({ attribute: false }) sharedRO!: SharedResizeObserverInterface;\n\n  @state() fileCount: number = 0;\n\n  @state() loaded: boolean = false;\n\n  @state() private shortcutOrder = ['visualMods'];\n\n  firstUpdated() {\n    this.loaded = true;\n    console.log('modal', this.modal);\n  }\n\n  updated(changed: any) {\n    if (changed.has('loaded')) {\n      setTimeout(() => this.emitLoadingStatusUpdate(this.loaded), 1000);\n    }\n\n    if (changed.has('itemMD') && this.itemMD) {\n      this.parseItemInfo();\n      this.setMenu();\n    }\n\n    if (changed.has('menuProviders') || changed.has('menuShortcuts')) {\n      this.updateMenuContents();\n    }\n  }\n\n  modalClosedCallback() {\n    console.log('item-inspector, modal closed');\n  }\n\n  openModal() {\n    const config = new ModalConfig();\n    const customModalContent = html`\n      Can contain any markup, including web components. Event listeners also\n      work. Try clicking on the picture.\n      <div style=\"text-align: center\">\n        <a href=\"https://fillmurray.com\" style=\"display: block\">Fill Murray</a>\n        <img src=\"100x100.jpg\" alt=\"foo\" />\n      </div>\n    `;\n\n    this.modal.showModal({\n      config,\n      customModalContent,\n      userClosedModalCallback: this.modalClosedCallback,\n    });\n  }\n\n  render() {\n    const { identifier = '' } = this.itemMD?.metadata;\n    return html`\n      <section>\n        <div>\n          <h2>${identifier}</h2>\n        </div>\n        <img src=${this.imageUrl} alt=${`${identifier} thumbnail`} />\n        <button @click=${() => this.openModal()}>open modal</button>\n        <p style=\"font-size: 20px;\">\n          Bacon ipsum dolor amet flank chicken leberkas sausage, meatball pork\n          belly jowl. Chislic bacon salami frankfurter shankle drumstick\n          andouille ball tip alcatra. Fatback beef ribs chicken, jerky ground\n          round hamburger pork chop biltong. Shoulder short loin rump jerky\n          kielbasa pork porchetta fatback ribeye pork belly sirloin chislic\n          turducken corned beef tri-tip. Chuck pancetta meatball tail, spare\n          ribs ham hock capicola pig. Ham hock hamburger chicken tri-tip venison\n          swine burgdoggen boudin meatloaf pastrami chuck. Tri-tip spare ribs\n          drumstick, tail rump hamburger burgdoggen swine t-bone tongue\n          andouille chislic alcatra. Pork loin jowl frankfurter, doner meatball\n          short loin ham hock filet mignon hamburger rump turkey bresaola\n          shoulder sirloin flank. Ribeye sausage pig t-bone bacon frankfurter\n          cupim capicola fatback pastrami ball tip pork belly. Picanha pancetta\n          andouille flank shankle venison tri-tip tail, kevin turkey turducken\n          chicken. Bacon picanha swine frankfurter, prosciutto chislic doner\n          alcatra pork loin corned beef jowl biltong meatball chuck. Bacon\n          burgdoggen pig fatback cupim t-bone. Cow pork loin bresaola brisket\n          shoulder filet mignon chicken. Sirloin bresaola porchetta beef\n          capicola meatloaf brisket shankle jerky turkey pork tri-tip swine\n          kevin salami. Meatball t-bone doner venison. Pig tri-tip chuck, shank\n          chicken pork chop landjaeger spare ribs jerky swine ham hock buffalo\n          sirloin. Leberkas pancetta tenderloin, meatloaf buffalo rump pastrami\n          chuck. Jerky cupim porchetta, tenderloin chuck andouille venison pork\n          salami. Chuck strip steak cupim, turducken ham hock kielbasa shoulder\n          porchetta chislic short loin tri-tip biltong cow corned beef.\n        </p>\n      </section>\n    `;\n  }\n\n  addMenuShortcut(menuId: keyof menuProvidersInt) {\n    if (this.menuShortcuts.find(m => m.id === menuId)) {\n      return;\n    }\n\n    const shortcut = this.menuProviders[menuId];\n    this.menuShortcuts.push(shortcut);\n    this.sortMenuShortcuts();\n    this.emitMenuShortcutsUpdated();\n  }\n\n  /**\n   * Removes a provider object from the menuShortcuts array and emits a\n   * menuShortcutsUpdated event.\n   */\n  removeMenuShortcut(menuId: string) {\n    this.menuShortcuts = this.menuShortcuts.filter(m => m.id !== menuId);\n    this.emitMenuShortcutsUpdated();\n  }\n\n  /**\n   * Sorts the menuShortcuts property by comparing each provider's id to\n   * the id in each iteration over the shortcutOrder array.\n   */\n  sortMenuShortcuts() {\n    this.menuShortcuts = this.shortcutOrder.reduce(\n      (shortcuts: IntMenuShortcut[], id) => {\n        const menu = this.menuShortcuts.find(m => m.id === id);\n\n        // eslint-disable-next-line no-param-reassign\n        if (menu) {\n          const newShortcuts = [...shortcuts, menu];\n          // eslint-disable-next-line no-param-reassign\n          shortcuts = newShortcuts;\n        }\n        return shortcuts;\n      },\n      []\n    );\n  }\n\n  emitMenuShortcutsUpdated() {\n    const event = new CustomEvent('menuShortcutsUpdated', {\n      detail: this.menuShortcuts,\n    });\n    this.dispatchEvent(event);\n  }\n\n  setMenu() {\n    const menuProviders = {\n      share: new ShareProvider({\n        item: this.itemMD,\n        baseHost: this.baseHost,\n        subPrefix: '',\n      }),\n      filesByType: new FilesByTypeProvider({\n        item: this.itemMD,\n        baseHost: this.baseHost,\n        subPrefix: '',\n      }),\n      visualMods: new VisualModsProvider({\n        updated: (modType: string) => {\n          if (modType === 'toggleFullscreen') {\n            this.updateFullscreenState();\n          }\n        },\n        item: this.itemMD,\n        baseHost: this.baseHost,\n        subPrefix: '',\n        // maybe DOM root for class configs?\n      }),\n    };\n\n    this.menuProviders = menuProviders;\n    this.addMenuShortcut('visualMods');\n  }\n\n  updateFullscreenState() {\n    const isFullScreen = !this.fullscreenState;\n    this.fullscreenState = isFullScreen;\n\n    const event = new CustomEvent('ViewportInFullScreen', {\n      detail: { isFullScreen },\n    } as IntManageFullscreenEvent);\n    this.dispatchEvent(event);\n  }\n\n  updateMenuContents() {\n    const { share, filesByType, visualMods } = this.menuProviders;\n    const availableMenus = [filesByType, share, visualMods].filter(\n      menu => !!menu\n    );\n\n    const event = new CustomEvent(ItemInspectorEvents.menuUpdated, {\n      detail: availableMenus,\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  emitLoadingStatusUpdate(loaded: boolean) {\n    const event = new CustomEvent('loadingStateUpdated', {\n      detail: { loaded },\n    });\n    this.dispatchEvent(event);\n  }\n\n  parseItemInfo() {\n    this.fileCount = this.itemMD?.files?.length || 0;\n  }\n\n  get imageUrl() {\n    const { metadata = {} } = this.itemMD;\n    const url = `${this.baseHost}/download/${metadata?.identifier}/__ia_thumb.jpg`;\n    return url;\n  }\n\n  static get styles() {\n    const main = css`\n      :host {\n        display: block;\n        width: 100%;\n        margin: 0 auto;\n        position: relative;\n        overflow: auto;\n        background-color: black;\n        color: var(--primaryTextColor, #fff);\n      }\n\n      :host,\n      section {\n        min-height: inherit;\n        height: inherit;\n      }\n\n      section {\n        margin: auto;\n        width: 100%;\n        text-align: center;\n      }\n\n      img {\n        border: 1px solid var(--primaryTextColor, #fff);\n      }\n    `;\n    return [main];\n  }\n}\n"]}
+{"version":3,"file":"item-inspector.js","sourceRoot":"","sources":["../../../src/item-inspector/item-inspector.ts"],"names":[],"mappings":"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","sourcesContent":["// /* eslint-disable no-console */\n// import {\n//   css,\n//   html,\n//   LitElement,\n//   customElement,\n//   property,\n//   state,\n// } from 'lit-element';\n// import { MetadataResponse } from '@internetarchive/search-service';\n\n// import {\n//   ModalManagerInterface,\n//   ModalConfig,\n// } from '@internetarchive/modal-manager';\n// import { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';\n// import { IntNavController } from '../interfaces/nav-controller-interface';\n// import {\n//   IntMenuProvider,\n//   IntMenuShortcut,\n// } from '../interfaces/menu-interfaces';\n// import { IntManageFullscreenEvent } from '../interfaces/event-interfaces';\n\n// import { ShareProvider } from './share-provider';\n// import { FilesByTypeProvider } from './files-by-type/files-by-type-provider';\n// import { VisualModsProvider } from './visual-mod-provider';\n\n// // eslint-disable-next-line no-shadow\n// enum ItemInspectorEvents {\n//   menuUpdated = 'menuUpdated',\n//   updateSideMenu = 'updateSideMenu',\n//   PostInit = 'PostInit',\n//   ViewportInFullScreen = 'ViewportInFullScreen',\n// }\n\n// interface menuProvidersInt {\n//   [menuId: string]: IntMenuProvider;\n// }\n\n// @customElement('ia-item-inspector')\n// export class IaItemInspector extends LitElement implements IntNavController {\n//   @property({ type: Object }) itemMD: MetadataResponse = {\n//     metadata: {},\n//   } as MetadataResponse;\n\n//   @property({ type: String }) baseHost = 'https://archive.org';\n\n//   @property({ type: Object }) menuProviders: menuProvidersInt = {};\n\n//   @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];\n\n//   @property({ type: Boolean }) sideMenuOpen = false;\n\n//   @property({ type: Boolean }) fullscreenState = false;\n\n//   @property({ attribute: false }) modal!: ModalManagerInterface;\n\n//   @property({ attribute: false }) sharedRO!: SharedResizeObserverInterface;\n\n//   @state() fileCount: number = 0;\n\n//   @state() loaded: boolean = false;\n\n//   @state() private shortcutOrder = ['visualMods'];\n\n//   firstUpdated() {\n//     this.loaded = true;\n//     console.log('modal', this.modal);\n//   }\n\n//   updated(changed: any) {\n//     if (changed.has('loaded')) {\n//       setTimeout(() => this.emitLoadingStatusUpdate(this.loaded), 1000);\n//     }\n\n//     if (changed.has('itemMD') && this.itemMD) {\n//       this.parseItemInfo();\n//       this.setMenu();\n//     }\n\n//     if (changed.has('menuProviders') || changed.has('menuShortcuts')) {\n//       this.updateMenuContents();\n//     }\n//   }\n\n//   modalClosedCallback() {\n//     console.log('item-inspector, modal closed');\n//   }\n\n//   openModal() {\n//     const config = new ModalConfig();\n//     const customModalContent = html`\n//       Can contain any markup, including web components. Event listeners also\n//       work. Try clicking on the picture.\n//       <div style=\"text-align: center\">\n//         <a href=\"https://fillmurray.com\" style=\"display: block\">Fill Murray</a>\n//         <img src=\"100x100.jpg\" alt=\"foo\" />\n//       </div>\n//     `;\n\n//     this.modal.showModal({\n//       config,\n//       customModalContent,\n//       userClosedModalCallback: this.modalClosedCallback,\n//     });\n//   }\n\n//   render() {\n//     const { identifier = '' } = this.itemMD?.metadata;\n//     return html`\n//       <section>\n//         <div>\n//           <h2>${identifier}</h2>\n//         </div>\n//         <img src=${this.imageUrl} alt=${`${identifier} thumbnail`} />\n//         <button @click=${() => this.openModal()}>open modal</button>\n//         <p style=\"font-size: 20px;\">\n//           Bacon ipsum dolor amet flank chicken leberkas sausage, meatball pork\n//           belly jowl. Chislic bacon salami frankfurter shankle drumstick\n//           andouille ball tip alcatra. Fatback beef ribs chicken, jerky ground\n//           round hamburger pork chop biltong. Shoulder short loin rump jerky\n//           kielbasa pork porchetta fatback ribeye pork belly sirloin chislic\n//           turducken corned beef tri-tip. Chuck pancetta meatball tail, spare\n//           ribs ham hock capicola pig. Ham hock hamburger chicken tri-tip venison\n//           swine burgdoggen boudin meatloaf pastrami chuck. Tri-tip spare ribs\n//           drumstick, tail rump hamburger burgdoggen swine t-bone tongue\n//           andouille chislic alcatra. Pork loin jowl frankfurter, doner meatball\n//           short loin ham hock filet mignon hamburger rump turkey bresaola\n//           shoulder sirloin flank. Ribeye sausage pig t-bone bacon frankfurter\n//           cupim capicola fatback pastrami ball tip pork belly. Picanha pancetta\n//           andouille flank shankle venison tri-tip tail, kevin turkey turducken\n//           chicken. Bacon picanha swine frankfurter, prosciutto chislic doner\n//           alcatra pork loin corned beef jowl biltong meatball chuck. Bacon\n//           burgdoggen pig fatback cupim t-bone. Cow pork loin bresaola brisket\n//           shoulder filet mignon chicken. Sirloin bresaola porchetta beef\n//           capicola meatloaf brisket shankle jerky turkey pork tri-tip swine\n//           kevin salami. Meatball t-bone doner venison. Pig tri-tip chuck, shank\n//           chicken pork chop landjaeger spare ribs jerky swine ham hock buffalo\n//           sirloin. Leberkas pancetta tenderloin, meatloaf buffalo rump pastrami\n//           chuck. Jerky cupim porchetta, tenderloin chuck andouille venison pork\n//           salami. Chuck strip steak cupim, turducken ham hock kielbasa shoulder\n//           porchetta chislic short loin tri-tip biltong cow corned beef.\n//         </p>\n//       </section>\n//     `;\n//   }\n\n//   addMenuShortcut(menuId: keyof menuProvidersInt) {\n//     if (this.menuShortcuts.find(m => m.id === menuId)) {\n//       return;\n//     }\n\n//     const shortcut = this.menuProviders[menuId];\n//     this.menuShortcuts.push(shortcut);\n//     this.sortMenuShortcuts();\n//     this.emitMenuShortcutsUpdated();\n//   }\n\n//   /**\n//    * Removes a provider object from the menuShortcuts array and emits a\n//    * menuShortcutsUpdated event.\n//    */\n//   removeMenuShortcut(menuId: string) {\n//     this.menuShortcuts = this.menuShortcuts.filter(m => m.id !== menuId);\n//     this.emitMenuShortcutsUpdated();\n//   }\n\n//   /**\n//    * Sorts the menuShortcuts property by comparing each provider's id to\n//    * the id in each iteration over the shortcutOrder array.\n//    */\n//   sortMenuShortcuts() {\n//     this.menuShortcuts = this.shortcutOrder.reduce(\n//       (shortcuts: IntMenuShortcut[], id) => {\n//         const menu = this.menuShortcuts.find(m => m.id === id);\n\n//         // eslint-disable-next-line no-param-reassign\n//         if (menu) {\n//           const newShortcuts = [...shortcuts, menu];\n//           // eslint-disable-next-line no-param-reassign\n//           shortcuts = newShortcuts;\n//         }\n//         return shortcuts;\n//       },\n//       []\n//     );\n//   }\n\n//   emitMenuShortcutsUpdated() {\n//     const event = new CustomEvent('menuShortcutsUpdated', {\n//       detail: this.menuShortcuts,\n//     });\n//     this.dispatchEvent(event);\n//   }\n\n//   setMenu() {\n//     const menuProviders = {\n//       share: new ShareProvider({\n//         item: this.itemMD,\n//         baseHost: this.baseHost,\n//         subPrefix: '',\n//       }),\n//       filesByType: new FilesByTypeProvider({\n//         item: this.itemMD,\n//         baseHost: this.baseHost,\n//         subPrefix: '',\n//       }),\n//       visualMods: new VisualModsProvider({\n//         updated: (modType: string) => {\n//           if (modType === 'toggleFullscreen') {\n//             this.updateFullscreenState();\n//           }\n//         },\n//         item: this.itemMD,\n//         baseHost: this.baseHost,\n//         subPrefix: '',\n//         // maybe DOM root for class configs?\n//       }),\n//     };\n\n//     this.menuProviders = menuProviders;\n//     this.addMenuShortcut('visualMods');\n//   }\n\n//   updateFullscreenState() {\n//     const isFullScreen = !this.fullscreenState;\n//     this.fullscreenState = isFullScreen;\n\n//     const event = new CustomEvent('ViewportInFullScreen', {\n//       detail: { isFullScreen },\n//     } as IntManageFullscreenEvent);\n//     this.dispatchEvent(event);\n//   }\n\n//   updateMenuContents() {\n//     const { share, filesByType, visualMods } = this.menuProviders;\n//     const availableMenus = [filesByType, share, visualMods].filter(\n//       menu => !!menu\n//     );\n\n//     const event = new CustomEvent(ItemInspectorEvents.menuUpdated, {\n//       detail: availableMenus,\n//     });\n\n//     this.dispatchEvent(event);\n//   }\n\n//   emitLoadingStatusUpdate(loaded: boolean) {\n//     const event = new CustomEvent('loadingStateUpdated', {\n//       detail: { loaded },\n//     });\n//     this.dispatchEvent(event);\n//   }\n\n//   parseItemInfo() {\n//     this.fileCount = this.itemMD?.files?.length || 0;\n//   }\n\n//   get imageUrl() {\n//     const { metadata = {} } = this.itemMD;\n//     const url = `${this.baseHost}/download/${metadata?.identifier}/__ia_thumb.jpg`;\n//     return url;\n//   }\n\n//   static get styles() {\n//     const main = css`\n//       :host {\n//         display: block;\n//         width: 100%;\n//         margin: 0 auto;\n//         position: relative;\n//         overflow: auto;\n//         background-color: black;\n//         color: var(--primaryTextColor, #fff);\n//       }\n\n//       :host,\n//       section {\n//         min-height: inherit;\n//         height: inherit;\n//       }\n\n//       section {\n//         margin: auto;\n//         width: 100%;\n//         text-align: center;\n//       }\n\n//       img {\n//         border: 1px solid var(--primaryTextColor, #fff);\n//       }\n//     `;\n//     return [main];\n//   }\n// }\n"]}

package/dist/src/item-navigator.d.ts

@@ -1,57 +1,74 @@
-import { LitElement } from 'lit-element';
+import { LitElement, PropertyValues, CSSResult } from 'lit-element';
 import { nothing, TemplateResult } from 'lit-html';
 import { MetadataResponse } from '@internetarchive/search-service';
-import { SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
-import { ModalManagerInterface } from '@internetarchive/modal-manager';
+import { SharedResizeObserver, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
+import '@internetarchive/ia-menu-slider';
+import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/icon-ellipses/icon-ellipses';
 import './loader';
-import { IntManageSideMenuEvent, IntSetOpenMenuEvent, IntSetMenuContentsEvent, IntSetMenuShortcutsEvent, IntLoadingStateUpdatedEvent, IntManageFullscreenEvent } from './interfaces/event-interfaces';
-import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
+import { ToggleSideMenuOpenEvent, ToggleSidePanelOpenEvent, SetSideMenuContentsEvent, SetSideMenuShortcutsEvent, loadingStateUpdatedEvent, ManageFullscreenEvent } from './interfaces/event-interfaces';
+import { MenuProviderInterface, MenuShortcutInterface, MenuId } from './interfaces/menu-interfaces';
+import './no-theater-available';
+export declare enum ItemType {
+    BOOK = "bookreader"
+}
 export declare class ItemNavigator extends LitElement implements SharedResizeObserverResizeHandlerInterface {
-    item: MetadataResponse | undefined;
-    itemType: string;
+    item?: MetadataResponse;
+    itemType?: ItemType;
     baseHost: string;
     signedIn: boolean;
-    menuContents: IntMenuProvider[];
-    menuShortcuts: IntMenuShortcut[];
-    viewportInFullscreen: boolean;
+    menuContents: MenuProviderInterface[];
+    menuShortcuts: MenuShortcutInterface[];
+    viewportInFullscreen: boolean | null;
     menuOpened: boolean;
-    openMenu: string;
-    modal?: ModalManagerInterface;
-    sharedObserver?: any;
-    private loaded;
-    private openMenuState;
+    openMenu?: MenuId;
+    modal?: ModalManager;
+    sharedObserver?: SharedResizeObserver;
+    loaded: true | null;
+    openMenuState: 'overlay' | 'shift';
     private frame;
+    private headerSlot;
     disconnectedCallback(): void;
-    firstUpdated(pp: any): void;
+    updated(changed: PropertyValues): void;
+    /** Shared observer */
     handleResize(entry: ResizeObserverEntry): void;
-    private startResizeObserver;
+    private setResizeObserver;
+    private removeResizeObserver;
+    get resizeObserverConfig(): {
+        handler: SharedResizeObserverResizeHandlerInterface;
+        target: Element;
+    };
+    /** End shared observer */
+    get loaderTitle(): "" | "Internet Archive";
+    get readerHeightStyle(): string;
+    get loadingArea(): TemplateResult;
     render(): TemplateResult;
-    get BooksViewer(): TemplateResult;
+    get noTheaterView(): TemplateResult;
+    get theaterSlot(): TemplateResult;
+    get booksViewer(): TemplateResult;
     get renderViewport(): TemplateResult | typeof nothing;
-    loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void;
-    /** Creates modal DOM & attaches to `<body>` */
-    private createModal;
+    loadingStateUpdated(e: loadingStateUpdatedEvent): void;
     /** Fullscreen Management */
-    manageViewportFullscreen(e: IntManageFullscreenEvent): void;
+    manageViewportFullscreen(e: ManageFullscreenEvent): void;
     /** End Fullscreen Management */
     /** Side menu */
     get shouldRenderMenu(): boolean;
     toggleMenu(): void;
     closeMenu(): void;
-    setOpenMenu(e: IntSetOpenMenuEvent): void;
-    setMenuContents(e: IntSetMenuContentsEvent): void;
-    setMenuShortcuts(e: IntSetMenuShortcutsEvent): void;
+    setOpenMenu(e: ToggleSidePanelOpenEvent): void;
+    setMenuContents(e: SetSideMenuContentsEvent): void;
+    setMenuShortcuts(e: SetSideMenuShortcutsEvent): void;
     /** Toggles Side Menu & Sets viewable subpanel  */
-    manageSideMenuEvents(e: IntManageSideMenuEvent): void;
+    manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void;
     get menuToggleButton(): TemplateResult;
+    get selectedMenuId(): MenuId | '';
     get renderSideMenu(): TemplateResult;
     /** End Side menu */
     /** Menu Shortcuts */
-    openShortcut(selectedMenuId?: string): void;
+    openShortcut(selectedMenuId?: MenuId): void;
     get shortcuts(): TemplateResult;
     /** End Menu Shortcuts */
     /** Misc Render */
     get menuClass(): string;
-    static get styles(): import("lit-element").CSSResult;
+    static get styles(): CSSResult;
 }

package/dist/src/item-navigator.js

@@ -2,41 +2,37 @@ import { __decorate } from "tslib";
 import { css, html, LitElement, customElement, property, state, query, } from 'lit-element';
 import { nothing } from 'lit-html';
 import { MetadataResponse } from '@internetarchive/search-service';
-import { PromisedSingleton } from '@internetarchive/promised-singleton';
-import { SharedResizeObserver, } from '@internetarchive/shared-resize-observer';
-// @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.menuContents = [];
         this.menuShortcuts = [];
-        this.viewportInFullscreen = false;
+        this.viewportInFullscreen = null;
         this.menuOpened = false;
-        this.openMenu = '';
-        this.loaded = false;
+        this.loaded = null;
         this.openMenuState = 'shift';
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver({
-            handler: this,
-            target: this.frame,
-        });
+        this.removeResizeObserver();
     }
-    firstUpdated(pp) {
-        console.log('first updated item-nav', this.modal, pp);
-        if (!this.modal) {
-            this.createModal();
+    updated(changed) {
+        if (changed.has('sharedObserver')) {
+            const oldObserver = changed.get('sharedObserver');
+            oldObserver === null || oldObserver === void 0 ? void 0 : oldObserver.removeObserver(this.resizeObserverConfig);
+            this.setResizeObserver();
         }
-        this.startResizeObserver();
     }
+    /** Shared observer */
     handleResize(entry) {
         const { width } = entry.contentRect;
         if (width <= 600) {
@@ -45,51 +41,76 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         }
         this.openMenuState = 'shift';
     }
-    async startResizeObserver() {
+    setResizeObserver() {
         var _a;
-        const ro = new PromisedSingleton({
-            generator: async () => {
-                return new SharedResizeObserver();
-            },
-        });
-        this.sharedObserver = await ro.get();
-        (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.addObserver({
+        (_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}
-          <div id="reader" class=${displayReaderClass}>
+          <slot name="theater-header"></slot>
+          <div
+            id="reader"
+            class=${displayReaderClass}
+            style=${this.readerHeightStyle}
+          >
             ${this.renderViewport}
           </div>
-          <div class="loading-area">
-            <div class="loading-view">
-              <ia-itemnav-loader></ia-itemnav-loader>
-            </div>
-          </div>
+          ${!this.loaded ? this.loadingArea : nothing}
         </div>
-        ${!this.loaded
-            ? html ` <div class="loading-area">
-              <div class="loading-view">
-                <ia-itemnav-loader></ia-itemnav-loader>
-              </div>
-            </div>`
-            : nothing}
       </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}
@@ -99,8 +120,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         @menuUpdated=${this.setMenuContents}
         @menuShortcutsUpdated=${this.setMenuShortcuts}
       >
-        <div slot="bookreader">
-          <slot name="bookreader"></slot>
+        <div slot="theater-main" style=${slotVisibility}>
+          ${this.theaterSlot}
         </div>
       </book-navigator>
     `;
@@ -109,35 +130,23 @@ 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}
-      .modal=${this.modal}
-      @updateSideMenu=${this.manageSideMenuEvents}
-      @menuUpdated=${this.setMenuContents}
-      @ViewportInFullScreen=${this.manageViewportFullscreen}
-      @menuShortcutsUpdated=${this.setMenuShortcuts}
-      @loadingStateUpdated=${this.loadingStateUpdated}
-    ></ia-item-inspector>`;
+        return this.noTheaterView;
     }
     loadingStateUpdated(e) {
         const { loaded } = e.detail;
-        this.loaded = !!loaded;
+        this.loaded = loaded || null;
     }
-    /** Creates modal DOM & attaches to `<body>` */
-    createModal() {
-        this.modal = document.createElement('modal-manager');
-        document.body.appendChild(this.modal);
-    }
-    /* End Modal management */
     /** Fullscreen Management */
     manageViewportFullscreen(e) {
-        this.viewportInFullscreen = !!e.detail.isFullScreen;
-        this.dispatchEvent(new CustomEvent('ViewportInFullScreen', {
+        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 */
@@ -152,7 +161,7 @@ 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];
@@ -164,18 +173,18 @@ let ItemNavigator = class ItemNavigator extends LitElement {
     /** 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() {
-        // <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
         return html `
       <button
         class="toggle-menu"
@@ -190,6 +199,9 @@ let ItemNavigator = class ItemNavigator extends LitElement {
       </button>
     `;
     }
+    get selectedMenuId() {
+        return this.openMenu || '';
+    }
     get renderSideMenu() {
         const drawerState = this.menuOpened ? '' : 'hidden';
         return html `
@@ -198,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
@@ -215,11 +227,16 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         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 */
@@ -238,7 +255,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         return css `
       :host,
       #frame,
-      #reader,
       .menu-and-reader {
         min-height: inherit;
         height: inherit;
@@ -247,8 +263,23 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         display: block;
       }
 
+      :host,
+      #frame,
+      .menu-and-reader,
+      .loading-area,
+      .loading-view {
+        min-height: inherit;
+        height: inherit;
+      }
+
+      slot {
+        display: block;
+        overflow: hidden;
+      }
+
       #frame {
         background-color: ${theaterBg};
+        color-scheme: dark;
       }
 
       #frame.fullscreen {
@@ -260,27 +291,10 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         z-index: 9;
       }
 
-      #frame.fullscreen,
-      #frame.fullscreen #reader {
-        height: 100vh;
-      }
-
-      .loading-area {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: inherit;
-        min-height: inherit;
-      }
-
       .loading-view {
         display: flex;
         align-items: center;
         justify-content: center;
-        min-height: inherit;
-        height: inherit;
       }
 
       ia-itemnav-loader {
@@ -289,8 +303,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
       }
 
       .hidden {
-        height: 1px;
-        width: 1px;
+        display: none;
       }
 
       button {
@@ -381,6 +394,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         transition: ${transitionEffect};
       }
 
+      .open.shift slot[name='theater-header'],
       .open.shift #reader {
         width: calc(100% - var(--menuWidth));
         float: right;
@@ -417,22 +431,13 @@ __decorate([
     })
 ], ItemNavigator.prototype, "signedIn", void 0);
 __decorate([
-    property({
-        type: Array,
-        hasChanged: (newVal, oldVal) => {
-            if (newVal !== oldVal) {
-                return true;
-            }
-            return false;
-        },
-    }),
     property({ type: Array })
 ], ItemNavigator.prototype, "menuContents", void 0);
 __decorate([
     property({ type: Array })
 ], ItemNavigator.prototype, "menuShortcuts", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ type: Boolean, reflect: true, attribute: true })
 ], ItemNavigator.prototype, "viewportInFullscreen", void 0);
 __decorate([
     property({ type: Boolean })
@@ -447,7 +452,7 @@ __decorate([
     property({ attribute: false })
 ], ItemNavigator.prototype, "sharedObserver", void 0);
 __decorate([
-    state()
+    property({ type: Boolean, reflect: true, attribute: true })
 ], ItemNavigator.prototype, "loaded", void 0);
 __decorate([
     state()
@@ -455,9 +460,11 @@ __decorate([
 __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