@internetarchive/ia-item-navigator 0.0.0-a1 → 0.0.0-a14

package/src/item-navigator.ts

@@ -6,33 +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 '@internetarchive/ia-menu-slider';
+
 import { ModalManagerInterface } from '@internetarchive/modal-manager';
 import '@internetarchive/icon-ellipses/icon-ellipses';
 import './loader';
 
 import {
-  IntOpenModalEvent,
   IntManageSideMenuEvent,
   IntSetOpenMenuEvent,
   IntSetMenuContentsEvent,
   IntSetMenuShortcutsEvent,
   IntLoadingStateUpdatedEvent,
+  IntManageFullscreenEvent,
 } from './interfaces/event-interfaces';
 
-import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
-
-@customElement('item-navigator')
+import {
+  IntMenuProvider,
+  IntMenuShortcut,
+  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 {
@@ -45,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';
 
@@ -61,53 +69,42 @@ 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: IntMenuProvider[] = [];
 
   @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];
 
-  @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?: ModalManagerInterface;
 
-  @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')) {
+      this.setResizeObserver();
     }
-
-    this.startResizeObserver();
   }
 
+  /** Shared observer */
   handleResize(entry: ResizeObserverEntry): void {
     const { width } = entry.contentRect;
     if (width <= 600) {
@@ -115,46 +112,86 @@ export class ItemNavigator
       return;
     }
     this.openMenuState = 'shift';
-    console.log('width', width);
   }
 
-  private async startResizeObserver(): Promise<void> {
-    const ro = new PromisedSingleton<SharedResizeObserverInterface>({
-      generator: async (): Promise<SharedResizeObserverInterface> => {
-        return new SharedResizeObserver();
-      },
-    });
+  private setResizeObserver(): void {
+    this.removeResizeObserver();
+    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}
-          ${!this.loaded
-            ? html`<div class="loading-view">
-                <ia-itemnav-loader></ia-itemnav-loader>
-              </div>`
-            : nothing}
-          <div id="reader" class=${displayReaderClass}>
+          <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(): 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}
         ?signedIn=${this.signedIn}
@@ -165,11 +202,9 @@ export class ItemNavigator
         @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>
     `;
@@ -179,55 +214,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}
-      @showItemNavigatorModal=${this.openModal}
-      @closeItemNavigatorModal=${this.closeModal}
-      @loadingStateUpdated=${this.loadingStateUpdated}
-    ></ia-item-inspector>`;
+    return this.noTheaterView;
   }
 
   loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {
     const { loaded } = e.detail;
-    this.loaded = !!loaded;
+    this.loaded = loaded || null;
   }
 
-  /* Modal management */
-  openModal(e: IntOpenModalEvent): void {
-    const { config, customModalContent } = e.detail;
-    if (!config || !customModalContent) {
-      return;
-    }
-
-    this.modal?.showModal({
-      config,
-      customModalContent,
-    });
-  }
-
-  closeModal(): void {
-    this.modal?.closeModal();
-  }
+  /** Fullscreen Management */
+  manageViewportFullscreen(e: IntManageFullscreenEvent): 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 IntManageFullscreenEvent;
 
-  /** Fullscreen Management */
-  manageViewportFullscreen(): void {
-    this.viewportInFullscreen = !this.viewportInFullscreen;
+    this.dispatchEvent(event);
   }
   /** End Fullscreen Management */
 
@@ -261,18 +268,19 @@ export class ItemNavigator
   /** Toggles Side Menu & Sets viewable subpanel  */
   manageSideMenuEvents(e: IntManageSideMenuEvent): 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"
@@ -310,19 +318,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 */
@@ -334,16 +346,16 @@ 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`;
     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;
@@ -352,8 +364,14 @@ export class ItemNavigator
         display: block;
       }
 
+      slot {
+        display: block;
+        overflow: hidden;
+      }
+
       #frame {
-        background-color: var(--menuSliderBg);
+        background-color: ${theaterBg};
+        color-scheme: dark;
       }
 
       #frame.fullscreen {
@@ -365,9 +383,14 @@ export class ItemNavigator
         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 {
@@ -476,6 +499,7 @@ export class ItemNavigator
         transition: ${transitionEffect};
       }
 
+      .open.shift slot[name='theater-header'],
       .open.shift #reader {
         width: calc(100% - var(--menuWidth));
         float: right;
@@ -484,5 +508,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>
     `;

package/src/no-theater-available.ts

@@ -0,0 +1,85 @@
+import {
+  LitElement,
+  customElement,
+  property,
+  html,
+  TemplateResult,
+  PropertyValues,
+  CSSResult,
+  css,
+} from 'lit-element';
+
+@customElement('ia-no-theater-available')
+export class IANoTheaterAvailable extends LitElement {
+  @property({ type: String }) identifier?: string = '';
+
+  emitLoaded(): void {
+    this.dispatchEvent(
+      new CustomEvent<{ loaded: boolean }>('loadingStateUpdated', {
+        detail: { loaded: true },
+      })
+    );
+  }
+
+  updated(changed: PropertyValues): void {
+    if (changed.has('identifier')) {
+      this.emitLoaded();
+    }
+  }
+
+  get downloadUrl(): string {
+    return `/download/${this.identifier}`;
+  }
+
+  render(): TemplateResult {
+    return html`
+      <section>
+        <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>
+        <p>
+          This item does not appear to have any files that can be experienced on
+          Archive.org. <br />
+          Please download files in this item to interact with them on your
+          computer.
+        </p>
+        <a href=${this.downloadUrl}>Show all files</a>
+      </section>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        color: var(--primaryTextColor, #fff);
+        text-align: center;
+      }
+      section {
+        margin: 10% auto 0;
+        padding: 0 5%;
+      }
+      p {
+        font-size: 1.4rem;
+      }
+      a {
+        color: var(--primaryTextColor, #fff);
+        background-color: rgb(25, 72, 128);
+        min-height: 35px;
+        outline: none;
+        cursor: pointer;
+        line-height: normal;
+        border-radius: 0.4rem;
+        text-align: center;
+        vertical-align: middle;
+        font-size: 1.4rem;
+        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        display: inline-block;
+        padding: 0.85rem 1.2rem;
+        border: 1px solid rgb(197, 209, 223);
+        white-space: nowrap;
+        appearance: auto;
+        box-sizing: border-box;
+        user-select: none;
+        text-decoration: none;
+      }
+    `;
+  }
+}

package/test/book-nav-stub.ts

@@ -0,0 +1,35 @@
+import { ModalManagerInterface } from '@internetarchive/modal-manager';
+import { MetadataResponse } from '@internetarchive/search-service';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { html, customElement, LitElement, property } from 'lit-element';
+
+@customElement('book-navigator')
+export class BookNavigator extends LitElement {
+  @property({ attribute: false }) modal?: ModalManagerInterface;
+
+  @property({ type: String }) baseHost?: string;
+
+  @property({ type: Object }) book?: MetadataResponse;
+
+  @property({ type: Boolean, reflect: true }) signedIn?: boolean | null = null;
+
+  @property({ type: Boolean }) sideMenuOpen?: boolean;
+
+  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;
+
+  addMenuShortcut(menuId: string) {
+    return menuId;
+  }
+
+  removeMenuShortcut(menuId: string) {
+    return menuId;
+  }
+
+  sortMenuShortcuts() {}
+
+  emitMenuShortcutsUpdated() {}
+
+  render() {
+    return html` <p>foo</p> `;
+  }
+}