@internetarchive/ia-item-navigator 0.0.0-a7 → 0.0.1

package/src/interfaces/event-interfaces.ts

@@ -1,55 +1,48 @@
-import { TemplateResult } from 'lit-html';
-import { ModalConfig } from '@internetarchive/modal-manager';
-import { IntMenuProvider, IntMenuShortcut } from './menu-interfaces';
+import {
+  MenuProviderInterface,
+  MenuShortcutInterface,
+  MenuId,
+} from './menu-interfaces';
 
 /** Toggles Menu && Sets open panel */
-export interface IntManageSideMenuEvent extends CustomEvent {
+export interface ToggleSideMenuOpenEvent extends CustomEvent {
   type: 'updateSideMenu';
   detail: {
-    menuId: string | undefined | '';
+    menuId: MenuId | undefined | '';
     action: 'open' | 'toggle' | '';
   };
 }
 
 /** Sets open panel */
-export interface IntSetOpenMenuEvent extends CustomEvent {
+export interface ToggleSidePanelOpenEvent extends CustomEvent {
   type: 'menuTypeSelected';
   detail: {
-    id: string /** name of menu to open */;
+    id: MenuId | '';
   };
 }
 
 /** Sets menu order that is displayed */
-export interface IntSetMenuContentsEvent extends CustomEvent {
+export interface SetSideMenuContentsEvent extends CustomEvent {
   type: 'menuUpdated';
-  detail: IntMenuProvider[];
+  detail: MenuProviderInterface[];
 }
 
 /** Sets menu shortcuts that is displayed */
-export interface IntSetMenuShortcutsEvent extends CustomEvent {
+export interface SetSideMenuShortcutsEvent extends CustomEvent {
   type: 'menuUpdated';
-  detail: IntMenuShortcut[];
+  detail: MenuShortcutInterface[];
 }
 
 /** Toggles fullscreen mode */
-export interface IntManageFullscreenEvent extends CustomEvent {
+export interface ManageFullscreenEvent extends CustomEvent {
   type: 'ViewportInFullScreen';
   detail: {
     isFullScreen: boolean;
   };
 }
 
-/** Toggles modal & sets contents */
-export interface IntOpenModalEvent extends CustomEvent {
-  type: 'showItemNavigatorModal';
-  detail: {
-    config: ModalConfig;
-    customModalContent: TemplateResult;
-  };
-}
-
 /** Toggles loading view */
-export interface IntLoadingStateUpdatedEvent extends CustomEvent {
+export interface loadingStateUpdatedEvent extends CustomEvent {
   type: 'loadingStateUpdated';
   detail: {
     loaded: boolean;

package/src/interfaces/menu-interfaces.ts

@@ -1,14 +1,13 @@
 import { TemplateResult } from 'lit-html';
 import { MetadataResponse } from '@internetarchive/search-service';
 
-export interface IntMenuShortcut {
+export type MenuId = string;
+export interface MenuShortcutInterface {
   icon: TemplateResult;
-  id: string;
+  id: MenuId;
 }
 
-export interface IntMenuIconAndDetails extends IntMenuShortcut {
-  icon: TemplateResult;
-  id: string;
+export interface MenuDetailsInterface extends MenuShortcutInterface {
   label: string;
   menuDetails?: TemplateResult;
   selected?: boolean;
@@ -16,13 +15,13 @@ export interface IntMenuIconAndDetails extends IntMenuShortcut {
   href?: string;
 }
 
-export interface IntProviderArgs {
+export interface MenuProviderBaseConfigInterface {
   item: MetadataResponse;
   baseHost: string;
   subPrefix: string;
   updated?: any;
 }
-export interface IntMenuProvider
-  extends IntProviderArgs,
-    IntMenuIconAndDetails,
-    IntMenuShortcut {}
+export interface MenuProviderInterface
+  extends MenuProviderBaseConfigInterface,
+    MenuDetailsInterface,
+    MenuShortcutInterface {}

package/src/item-navigator.ts

@@ -6,34 +6,41 @@ import {
   property,
   state,
   query,
+  PropertyValues,
+  CSSResult,
 } from 'lit-element';
 import { nothing, TemplateResult } from 'lit-html';
 import { MetadataResponse } from '@internetarchive/search-service';
-import { PromisedSingleton } from '@internetarchive/promised-singleton';
 import {
   SharedResizeObserver,
-  SharedResizeObserverInterface,
   SharedResizeObserverResizeHandlerInterface,
 } from '@internetarchive/shared-resize-observer';
-// @ts-ignore
-import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
-import { ModalManagerInterface } from '@internetarchive/modal-manager';
+import '@internetarchive/ia-menu-slider';
+
+import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/icon-ellipses/icon-ellipses';
 import './loader';
 
 import {
-  IntOpenModalEvent,
-  IntManageSideMenuEvent,
-  IntSetOpenMenuEvent,
-  IntSetMenuContentsEvent,
-  IntSetMenuShortcutsEvent,
-  IntLoadingStateUpdatedEvent,
-  IntManageFullscreenEvent,
+  ToggleSideMenuOpenEvent,
+  ToggleSidePanelOpenEvent,
+  SetSideMenuContentsEvent,
+  SetSideMenuShortcutsEvent,
+  loadingStateUpdatedEvent,
+  ManageFullscreenEvent,
 } from './interfaces/event-interfaces';
 
-import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
-
-@customElement('item-navigator')
+import {
+  MenuProviderInterface,
+  MenuShortcutInterface,
+  MenuId,
+} from './interfaces/menu-interfaces';
+import './no-theater-available';
+
+export enum ItemType {
+  BOOK = 'bookreader',
+}
+@customElement('ia-item-navigator')
 export class ItemNavigator
   extends LitElement
   implements SharedResizeObserverResizeHandlerInterface {
@@ -46,9 +53,9 @@ export class ItemNavigator
       return value as MetadataResponse;
     },
   })
-  item: MetadataResponse | undefined = undefined;
+  item?: MetadataResponse;
 
-  @property({ type: String }) itemType = '';
+  @property({ type: String }) itemType?: ItemType;
 
   @property({ type: String }) baseHost = 'archive.org';
 
@@ -62,53 +69,44 @@ export class ItemNavigator
   })
   signedIn = false;
 
-  @property({
-    type: Array,
-    hasChanged: (newVal: Array<object>, oldVal: Array<object>) => {
-      if (newVal !== oldVal) {
-        return true;
-      }
-      return false;
-    },
-  })
-  @property({ type: Array })
-  menuContents: IntMenuProvider[] = [];
+  @property({ type: Array }) menuContents: MenuProviderInterface[] = [];
 
-  @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];
+  @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];
 
-  @property({ type: Boolean, reflect: true }) viewportInFullscreen = false;
+  @property({ type: Boolean, reflect: true, attribute: true })
+  viewportInFullscreen: boolean | null = null;
 
   @property({ type: Boolean }) menuOpened = false;
 
-  @property({ type: String }) openMenu = '';
+  @property({ type: String }) openMenu?: MenuId;
 
-  @property({ type: Object }) modal:
-    | ModalManagerInterface
-    | undefined = undefined;
+  @property({ attribute: false }) modal?: ModalManager;
 
-  @property({ attribute: false }) private sharedObserver?: any; // PromisedSingleton<SharedResizeObserverInterface>;
+  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;
 
-  @state() private loaded: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) loaded:
+    | true
+    | null = null;
 
-  @state() private openMenuState: 'overlay' | 'shift' = 'shift';
+  @state() openMenuState: 'overlay' | 'shift' = 'shift';
 
   @query('#frame') private frame!: HTMLDivElement;
 
+  @query('slot[name="theater-header"]') private headerSlot!: HTMLDivElement;
+
   disconnectedCallback() {
-    this.sharedObserver?.removeObserver({
-      handler: this,
-      target: this.frame,
-    });
+    this.removeResizeObserver();
   }
 
-  firstUpdated(): void {
-    if (!this.modal) {
-      this.createModal();
+  updated(changed: PropertyValues) {
+    if (changed.has('sharedObserver')) {
+      const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;
+      oldObserver?.removeObserver(this.resizeObserverConfig);
+      this.setResizeObserver();
     }
-
-    this.startResizeObserver();
   }
 
+  /** Shared observer */
   handleResize(entry: ResizeObserverEntry): void {
     const { width } = entry.contentRect;
     if (width <= 600) {
@@ -118,52 +116,85 @@ export class ItemNavigator
     this.openMenuState = 'shift';
   }
 
-  private async startResizeObserver(): Promise<void> {
-    const ro = new PromisedSingleton<SharedResizeObserverInterface>({
-      generator: async (): Promise<SharedResizeObserverInterface> => {
-        return new SharedResizeObserver();
-      },
-    });
+  private setResizeObserver(): void {
+    this.sharedObserver?.addObserver(this.resizeObserverConfig);
+  }
+
+  private removeResizeObserver(): void {
+    this.sharedObserver?.removeObserver(this.resizeObserverConfig);
+  }
 
-    this.sharedObserver = await ro.get();
-    this.sharedObserver?.addObserver({
+  get resizeObserverConfig(): {
+    handler: SharedResizeObserverResizeHandlerInterface;
+    target: Element;
+  } {
+    return {
       handler: this,
       target: this.frame,
-    });
+    };
+  }
+  /** End shared observer */
+
+  get loaderTitle() {
+    return this.viewportInFullscreen ? 'Internet Archive' : '';
+  }
+
+  get readerHeightStyle(): string {
+    const calcFSHeight = `calc(100vh - ${this.headerSlot?.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(): TemplateResult {
     const displayReaderClass = this.loaded ? '' : 'hide';
     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(): TemplateResult {
+  get noTheaterView() {
+    return html`<ia-no-theater-available
+      .identifier=${this.item?.metadata?.identifier}
+      @loadingStateUpdated=${this.loadingStateUpdated}
+    ></ia-no-theater-available>`;
+  }
+
+  get theaterSlot() {
+    return html`
+      <slot name="theater-main" style=${this.readerHeightStyle}></slot>
+    `;
+  }
+
+  get booksViewer(): TemplateResult {
+    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}
@@ -172,11 +203,9 @@ export class ItemNavigator
         @updateSideMenu=${this.manageSideMenuEvents}
         @menuUpdated=${this.setMenuContents}
         @menuShortcutsUpdated=${this.setMenuShortcuts}
-        @openModal=${this.openModal}
-        @closeModal=${this.closeModal}
       >
-        <div slot="bookreader">
-          <slot name="bookreader"></slot>
+        <div slot="theater-main" style=${slotVisibility}>
+          ${this.theaterSlot}
         </div>
       </book-navigator>
     `;
@@ -186,60 +215,27 @@ export class ItemNavigator
     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}
-      @updateSideMenu=${this.manageSideMenuEvents}
-      @menuUpdated=${this.setMenuContents}
-      @ViewportInFullScreen=${this.manageViewportFullscreen}
-      @menuShortcutsUpdated=${this.setMenuShortcuts}
-      @openModal=${this.openModal}
-      @closeModal=${this.closeModal}
-      @loadingStateUpdated=${this.loadingStateUpdated}
-    ></ia-item-inspector>`;
+    return this.noTheaterView;
   }
 
-  loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {
+  loadingStateUpdated(e: loadingStateUpdatedEvent): void {
     const { loaded } = e.detail;
-    this.loaded = !!loaded;
-  }
-
-  /* Modal management */
-  openModal(e: IntOpenModalEvent): void {
-    const { config, customModalContent } = e.detail;
-    if (!config || !customModalContent) {
-      return;
-    }
-
-    this.modal?.showModal({
-      config,
-      customModalContent,
-    });
+    this.loaded = loaded || null;
   }
 
-  closeModal(): void {
-    this.modal?.closeModal();
-  }
+  /** Fullscreen Management */
+  manageViewportFullscreen(e: ManageFullscreenEvent): void {
+    const fullscreenStatus = !!e.detail.isFullScreen;
+    this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
 
-  /** Creates modal DOM & attaches to `<body>` */
-  private createModal(): void {
-    this.modal = document.createElement(
-      'modal-manager'
-    ) as ModalManagerInterface;
-    document.body.appendChild(this.modal);
-  }
-  /* End Modal management */
+    const event = new CustomEvent('fullscreenToggled', {
+      detail: e.detail,
+    }) as ManageFullscreenEvent;
 
-  /** Fullscreen Management */
-  manageViewportFullscreen(e: IntManageFullscreenEvent): void {
-    this.viewportInFullscreen = !!e.detail.isFullScreen;
-    this.dispatchEvent(
-      new CustomEvent('ViewportInFullScreen', {
-        detail: e.detail,
-      }) as IntManageFullscreenEvent
-    );
+    this.dispatchEvent(event);
   }
   /** End Fullscreen Management */
 
@@ -256,35 +252,36 @@ export class ItemNavigator
     this.menuOpened = false;
   }
 
-  setOpenMenu(e: IntSetOpenMenuEvent): void {
+  setOpenMenu(e: ToggleSidePanelOpenEvent): void {
     const { id } = e.detail;
-    this.openMenu = id === this.openMenu ? '' : id;
+    this.openMenu = id !== this.openMenu ? id : undefined;
   }
 
-  setMenuContents(e: IntSetMenuContentsEvent): void {
+  setMenuContents(e: SetSideMenuContentsEvent): void {
     const updatedContents = [...e.detail];
     this.menuContents = updatedContents;
   }
 
-  setMenuShortcuts(e: IntSetMenuShortcutsEvent) {
+  setMenuShortcuts(e: SetSideMenuShortcutsEvent) {
     this.menuShortcuts = [...e.detail];
   }
 
   /** Toggles Side Menu & Sets viewable subpanel  */
-  manageSideMenuEvents(e: IntManageSideMenuEvent): void {
+  manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {
     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"
@@ -300,16 +297,19 @@ export class ItemNavigator
     `;
   }
 
+  get selectedMenuId(): MenuId | '' {
+    return this.openMenu || '';
+  }
+
   get renderSideMenu(): TemplateResult {
     const drawerState = this.menuOpened ? '' : 'hidden';
-
     return html`
       <nav>
         <div class="minimized">${this.shortcuts} ${this.menuToggleButton}</div>
         <div id="menu" class=${drawerState}>
           <ia-menu-slider
             .menus=${this.menuContents}
-            .selectedMenu=${this.openMenu}
+            .selectedMenu=${this.selectedMenuId}
             @menuTypeSelected=${this.setOpenMenu}
             @menuSliderClosed=${this.closeMenu}
             manuallyHandleClose
@@ -322,19 +322,23 @@ export class ItemNavigator
   /** End Side menu */
 
   /** Menu Shortcuts */
-  openShortcut(selectedMenuId = ''): void {
+  openShortcut(selectedMenuId: MenuId = ''): void {
     this.openMenu = selectedMenuId;
     this.menuOpened = true;
   }
 
   get shortcuts(): TemplateResult {
-    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 */
@@ -346,7 +350,7 @@ export class ItemNavigator
     return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
   }
 
-  static get styles() {
+  static get styles(): CSSResult {
     const subnavWidth = css`var(--menuWidth, 320px)`;
     const transitionTiming = css`var(--animationTiming, 200ms)`;
     const transitionEffect = css`transform ${transitionTiming} ease-out`;
@@ -356,7 +360,6 @@ export class ItemNavigator
     return css`
       :host,
       #frame,
-      #reader,
       .menu-and-reader {
         min-height: inherit;
         height: inherit;
@@ -365,8 +368,14 @@ export class ItemNavigator
         display: block;
       }
 
+      slot {
+        display: block;
+        overflow: hidden;
+      }
+
       #frame {
         background-color: ${theaterBg};
+        color-scheme: dark;
       }
 
       #frame.fullscreen {
@@ -378,11 +387,6 @@ export class ItemNavigator
         z-index: 9;
       }
 
-      #frame.fullscreen,
-      #frame.fullscreen #reader {
-        height: 100vh;
-      }
-
       .loading-area {
         position: absolute;
         top: 0;
@@ -499,6 +503,7 @@ export class ItemNavigator
         transition: ${transitionEffect};
       }
 
+      .open.shift slot[name='theater-header'],
       .open.shift #reader {
         width: calc(100% - var(--menuWidth));
         float: right;
@@ -507,5 +512,3 @@ export class ItemNavigator
     `;
   }
 }
-
-customElements.define('ia-menu-slider', IAMenuSlider);

package/src/loader.ts

@@ -1,9 +1,15 @@
 /* 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';
 
 @customElement('ia-itemnav-loader')
 export 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)">
@@ -42,9 +48,10 @@ export 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>
     `;