@internetarchive/ia-item-navigator 0.0.0-a9 → 0.0.2-a2

package/src/item-navigator.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-duplicates */
 import {
   css,
   html,
@@ -8,35 +7,39 @@ import {
   state,
   query,
   PropertyValues,
+  CSSResult,
 } from 'lit-element';
 import { nothing, TemplateResult } from 'lit-html';
 import { MetadataResponse } from '@internetarchive/search-service';
 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 { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/icon-ellipses/icon-ellipses';
 import './loader';
-// import { IaItemInspector } from './item-inspector/item-inspector';
-import './item-inspector/item-inspector';
 
 import {
-  IntManageSideMenuEvent,
-  IntSetOpenMenuEvent,
-  IntSetMenuContentsEvent,
-  IntSetMenuShortcutsEvent,
-  IntLoadingStateUpdatedEvent,
-  IntManageFullscreenEvent,
+  ToggleSideMenuOpenEvent,
+  ToggleSidePanelOpenEvent,
+  SetSideMenuContentsEvent,
+  SetSideMenuShortcutsEvent,
+  loadingStateUpdatedEvent,
+  ManageFullscreenEvent,
 } from './interfaces/event-interfaces';
 
-import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
-
+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
@@ -50,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';
 
@@ -66,65 +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({ attribute: false }) modal?: ModalManagerInterface;
+  @property({ attribute: false }) modal?: ModalManager;
 
-  @property({ attribute: false }) sharedObserver?: any; // PromisedSingleton<SharedResizeObserverInterface>;
+  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;
 
-  @property({ type: Boolean, reflect: true }) loaded: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) loaded:
+    | true
+    | null = null;
 
   @state() openMenuState: 'overlay' | 'shift' = 'shift';
 
   @query('#frame') private frame!: HTMLDivElement;
 
-  disconnectedCallback() {
-    this.sharedObserver?.removeObserver({
-      handler: this,
-      target: this.frame,
-    });
-  }
-
-  firstUpdated(pp: any): void {
-    console.log('first updated item-nav', this.modal, pp);
-    if (!this.modal) {
-      this.createModal();
-    }
+  @query('slot[name="theater-header"]') private headerSlot!: HTMLDivElement;
 
-    this.startResizeObserver();
+  disconnectedCallback() {
+    this.removeResizeObserver();
   }
 
   updated(changed: PropertyValues) {
-    if (changed.has('modal')) {
-      if (!this.modal) {
-        this.createModal();
-      }
-    }
     if (changed.has('sharedObserver')) {
-      if (!this.sharedObserver) {
-        this.startResizeObserver();
-      }
+      const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;
+      oldObserver?.removeObserver(this.resizeObserverConfig);
+      this.setResizeObserver();
     }
   }
 
+  /** Shared observer */
   handleResize(entry: ResizeObserverEntry): void {
     const { width } = entry.contentRect;
     if (width <= 600) {
@@ -134,52 +116,85 @@ export class ItemNavigator
     this.openMenuState = 'shift';
   }
 
-  private startResizeObserver(): void {
-    if (!this.sharedObserver) {
-      this.sharedObserver = new SharedResizeObserver();
-    }
-    this.sharedObserver.addObserver({
+  private setResizeObserver(): void {
+    this.sharedObserver?.addObserver(this.resizeObserverConfig);
+  }
+
+  private removeResizeObserver(): void {
+    this.sharedObserver?.removeObserver(this.resizeObserverConfig);
+  }
+
+  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';
+    const displayReaderClass = this.loaded ? '' : 'hidden';
     return html`
       <div id="frame" class=${`${this.menuClass}`}>
-        <slot name="theater-header"></slot>
         <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>
-          ${!this.loaded
-            ? html` <div class="loading-area">
-                <div class="loading-view">
-                  <ia-itemnav-loader
-                    .title=${this.loaderTitle}
-                  ></ia-itemnav-loader>
-                </div>
-              </div>`
-            : nothing}
+          ${!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}
+        .itemMD=${this.item}
         ?signedIn=${this.signedIn}
         ?sideMenuOpen=${this.menuOpened}
         .sharedObserver=${this.sharedObserver}
@@ -190,7 +205,7 @@ export class ItemNavigator
         @menuShortcutsUpdated=${this.setMenuShortcuts}
       >
         <div slot="theater-main" style=${slotVisibility}>
-          <slot name="theater-main"></slot>
+          ${this.theaterSlot}
         </div>
       </book-navigator>
     `;
@@ -200,49 +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
-      class="meow"
-      .itemMD=${this.item}
-      .modal=${this.modal}
-      @updateSideMenu=${this.manageSideMenuEvents}
-      @menuUpdated=${this.setMenuContents}
-      @ViewportInFullScreen=${this.manageViewportFullscreen}
-      @menuShortcutsUpdated=${this.setMenuShortcuts}
-      @loadingStateUpdated=${(e: IntLoadingStateUpdatedEvent) => {
-        console.log(
-          'loadingStateUpdatedloadingStateUpdatedloadingStateUpdatedloadingStateUpdated'
-        );
-        this.loadingStateUpdated(e);
-      }}
-    ></ia-item-inspector>`;
+    return this.noTheaterView;
   }
 
-  loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {
+  loadingStateUpdated(e: loadingStateUpdatedEvent): void {
     const { loaded } = e.detail;
-    this.loaded = !!loaded;
-    console.log('******loadingStateUpdated', e.detail);
-  }
-
-  /** Creates modal DOM & attaches to `<body>` */
-  private createModal(): void {
-    this.modal = document.createElement(
-      'modal-manager'
-    ) as ModalManagerInterface;
-    document.body.appendChild(this.modal);
+    this.loaded = loaded || null;
   }
-  /* End Modal management */
 
   /** Fullscreen Management */
-  manageViewportFullscreen(e: IntManageFullscreenEvent): void {
-    this.viewportInFullscreen = !!e.detail.isFullScreen;
-    this.dispatchEvent(
-      new CustomEvent('ViewportInFullScreen', {
-        detail: e.detail,
-      }) as IntManageFullscreenEvent
-    );
+  manageViewportFullscreen(e: ManageFullscreenEvent): void {
+    const fullscreenStatus = !!e.detail.isFullScreen;
+    this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
+
+    const event = new CustomEvent('fullscreenToggled', {
+      detail: e.detail,
+    }) as ManageFullscreenEvent;
+
+    this.dispatchEvent(event);
   }
   /** End Fullscreen Management */
 
@@ -259,22 +252,22 @@ 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) {
       return;
@@ -289,7 +282,6 @@ export class ItemNavigator
   }
 
   get menuToggleButton() {
-    // <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
     return html`
       <button
         class="toggle-menu"
@@ -305,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
@@ -327,7 +322,7 @@ export class ItemNavigator
   /** End Side menu */
 
   /** Menu Shortcuts */
-  openShortcut(selectedMenuId = ''): void {
+  openShortcut(selectedMenuId: MenuId = ''): void {
     this.openMenu = selectedMenuId;
     this.menuOpened = true;
   }
@@ -355,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`;
@@ -365,7 +360,6 @@ export class ItemNavigator
     return css`
       :host,
       #frame,
-      #reader,
       .menu-and-reader {
         min-height: inherit;
         height: inherit;
@@ -374,6 +368,20 @@ export class ItemNavigator
         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;
@@ -388,27 +396,10 @@ 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 {
         display: flex;
         align-items: center;
         justify-content: center;
-        min-height: inherit;
-        height: inherit;
       }
 
       ia-itemnav-loader {
@@ -417,8 +408,7 @@ export class ItemNavigator
       }
 
       .hidden {
-        height: 1px;
-        width: 1px;
+        display: none;
       }
 
       button {
@@ -509,6 +499,7 @@ export class ItemNavigator
         transition: ${transitionEffect};
       }
 
+      .open.shift slot[name='theater-header'],
       .open.shift #reader {
         width: calc(100% - var(--menuWidth));
         float: right;
@@ -517,5 +508,3 @@ export class ItemNavigator
     `;
   }
 }
-
-customElements.define('ia-menu-slider', IAMenuSlider);

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,47 @@
+import { ModalManager } from '@internetarchive/modal-manager';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { html, customElement, LitElement, property } from 'lit-element';
+import { MetadataResponse } from '@internetarchive/search-service';
+import {
+  MenuProviderInterface,
+  MenuShortcutInterface,
+} from '../src/interfaces/menu-interfaces';
+import { CustomTheaterInterface } from '../src/interfaces/custom-theater-interface';
+@customElement('book-navigator')
+export class BookNavigator
+  extends LitElement
+  implements CustomTheaterInterface {
+  @property({ attribute: false }) modal?: ModalManager;
+
+  @property({ type: Object }) itemMD?: MetadataResponse;
+
+  @property({ type: String }) baseHost?: string;
+
+  @property({ type: Boolean, reflect: true }) signedIn?: boolean | null = null;
+
+  @property({ type: Boolean }) sideMenuOpen!: boolean;
+
+  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;
+
+  @property({ type: Array }) menuProviders?: MenuProviderInterface[];
+
+  @property({ type: Array }) menuShortcuts?: MenuShortcutInterface[];
+
+  emitLoadingStatusUpdate() {}
+
+  addMenuShortcut(menuId: string) {
+    return menuId;
+  }
+
+  removeMenuShortcut(menuId: string) {
+    return menuId;
+  }
+
+  sortMenuShortcuts() {}
+
+  emitMenuShortcutsUpdated() {}
+
+  render() {
+    return html` <p>foo</p> `;
+  }
+}