@internetarchive/ia-item-navigator 0.0.0 → 0.0.2

package/src/item-navigator.ts

@@ -5,41 +5,57 @@ import {
   customElement,
   property,
   state,
+  query,
+  PropertyValues,
+  CSSResult,
 } from 'lit-element';
 import { nothing, TemplateResult } from 'lit-html';
 import { MetadataResponse } from '@internetarchive/search-service';
-// @ts-ignore
-import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
-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 {
-  IntManageFullscreenEvent,
-  IntOpenModalEvent,
-  IntManageSideMenuEvent,
-  IntSetOpenMenuEvent,
-  IntSetMenuContentsEvent,
-  IntSetMenuShortcuts,
-  IntLoadingStateUpdatedEvent,
+  ToggleSideMenuOpenEvent,
+  ToggleSidePanelOpenEvent,
+  SetSideMenuContentsEvent,
+  SetSideMenuShortcutsEvent,
+  loadingStateUpdatedEvent,
+  ManageFullscreenEvent,
 } from './interfaces/event-interfaces';
 
-import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
-
-@customElement('item-navigator')
-export class ItemNavigator extends LitElement {
+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 {
   @property({
     type: Object,
     converter: (value: string | MetadataResponse | null): MetadataResponse => {
-      if (typeof value === 'string') {
+      if (value && typeof value === 'string') {
         return new MetadataResponse(JSON.parse(atob(value)));
       }
       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';
 
@@ -53,74 +69,143 @@ export class ItemNavigator extends LitElement {
   })
   signedIn = false;
 
-  @property({
-    type: Array,
-    hasChanged: (newVal: Array<object>, oldVal: Array<object>) => {
-      if (newVal !== oldVal) {
-        return true;
-      }
-      return false;
-    },
-  })
-  menuShortcuts: IntMenuShortcut[] = [];
+  @property({ type: Array }) menuContents: MenuProviderInterface[] = [];
 
-  @property({ type: Array }) menuContents: IntMenuProvider[] = [];
+  @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];
 
-  @property({ type: Boolean }) 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?: ModalManager;
+
+  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) loaded:
+    | true
+    | null = null;
 
-  @property({ type: Object }) modal:
-    | ModalManagerInterface
-    | undefined = undefined;
+  @state() openMenuState: 'overlay' | 'shift' = 'shift';
 
-  @state() loaded: boolean = false;
+  @query('#frame') private frame!: HTMLDivElement;
 
-  firstUpdated(): void {
-    if (!this.modal) {
-      this.createModal();
+  @query('slot[name="theater-header"]') private headerSlot!: HTMLDivElement;
+
+  disconnectedCallback() {
+    this.removeResizeObserver();
+  }
+
+  updated(changed: PropertyValues) {
+    if (changed.has('sharedObserver')) {
+      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) {
+      this.openMenuState = 'overlay';
+      return;
+    }
+    this.openMenuState = 'shift';
+  }
+
+  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="item-nav-header"></slot>
+      <div id="frame" class=${`${this.menuClass}`}>
         <div class="menu-and-reader">
           ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
-          ${!this.loaded
-            ? html`<ia-itemnav-loader></ia-itemnav-loader>`
-            : nothing}
-          ${this.item
-            ? html`<div id="reader" class=${displayReaderClass}>
-                ${this.renderViewport}
-              </div>`
-            : nothing}
+          <slot name="theater-header"></slot>
+          <div
+            id="reader"
+            class=${displayReaderClass}
+            style=${this.readerHeightStyle}
+          >
+            ${this.renderViewport}
+          </div>
+          ${!this.loaded ? this.loadingArea : nothing}
         </div>
       </div>
     `;
   }
 
-  get BooksViewer(): 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}
         @ViewportInFullScreen=${this.manageViewportFullscreen}
         @loadingStateUpdated=${this.loadingStateUpdated}
         @updateSideMenu=${this.manageSideMenuEvents}
         @menuUpdated=${this.setMenuContents}
         @menuShortcutsUpdated=${this.setMenuShortcuts}
-        @showItemNavigatorModal=${this.openModal}
-        @closeItemNavigatorModal=${this.closeModal}
       >
-        <div slot="bookreader">
-          <slot name="bookreader"></slot>
+        <div slot="theater-main" style=${slotVisibility}>
+          ${this.theaterSlot}
         </div>
       </book-navigator>
     `;
@@ -130,59 +215,33 @@ export class ItemNavigator extends LitElement {
     if (!this.item) {
       return nothing;
     }
-    if (this.itemType === 'bookreader') {
-      return this.BooksViewer;
+    if (this.itemType === ItemType.BOOK) {
+      return this.booksViewer;
     }
-    return html` <ia-item-inspector
-      .itemMD=${this.item}
-      @loadingStateUpdated=${this.loadingStateUpdated}
-      @updateSideMenu=${this.manageSideMenuEvents}
-      @menuUpdated=${this.setMenuContents}
-      @menuShortcutsUpdated=${this.setMenuShortcuts}
-    ></ia-item-inspector>`;
+    return this.noTheaterView;
   }
 
-  loadingStateUpdated(e: 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 {
-    const { isFullScreen } = e.detail;
-    this.viewportInFullscreen = isFullScreen;
+    this.dispatchEvent(event);
   }
   /** End Fullscreen Management */
 
   /** Side menu */
   get shouldRenderMenu(): boolean {
-    return !!(this.menuContents.length || this.menuShortcuts.length);
+    return !!this.menuContents.length;
   }
 
   toggleMenu(): void {
@@ -193,39 +252,64 @@ export class ItemNavigator extends LitElement {
     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: 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() {
+    return html`
+      <button
+        class="toggle-menu"
+        @click=${this.toggleMenu}
+        title="Toggle theater side panels"
+      >
+        <div>
+          <ia-icon-ellipses
+            style="width: var(--iconWidth); height: var(--iconHeight);"
+          ></ia-icon-ellipses>
+        </div>
+      </button>
+    `;
+  }
+
+  get selectedMenuId(): 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
@@ -238,23 +322,23 @@ export class ItemNavigator extends LitElement {
   /** End Side menu */
 
   /** Menu Shortcuts */
-  setMenuShortcuts(e: IntSetMenuShortcuts): void {
-    this.menuShortcuts = [...e.detail];
-  }
-
-  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 */
@@ -263,33 +347,19 @@ export class ItemNavigator extends LitElement {
   get menuClass(): string {
     const drawerState = this.menuOpened ? 'open' : '';
     const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
-    return `${drawerState} ${fullscreenState}`;
+    return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
   }
 
-  get menuToggleButton(): TemplateResult {
-    return html`
-      <button
-        class="toggle-menu"
-        @click=${() => this.toggleMenu()}
-        title="Toggle theater side panels"
-      >
-        <div><ia-icon-ellipses></ia-icon-ellipses></div>
-      </button>
-    `;
-  }
-
-  static get styles() {
+  static get styles(): CSSResult {
     const subnavWidth = css`var(--menuWidth, 320px)`;
-    const tabletPlusQuery = css`
-      @media (min-width: 640px);
-    `;
     const transitionTiming = css`var(--animationTiming, 200ms)`;
     const transitionEffect = css`transform ${transitionTiming} ease-out`;
+    const menuMargin = css`var(--theaterMenuMargin, 42px)`;
+    const theaterBg = css`var(--theaterBgColor, #000)`;
 
     return css`
       :host,
       #frame,
-      #reader,
       .menu-and-reader {
         min-height: inherit;
         height: inherit;
@@ -297,18 +367,48 @@ export class ItemNavigator extends LitElement {
         overflow: hidden;
         display: block;
       }
+
+      :host,
+      #frame,
+      .menu-and-reader,
+      .loading-area,
+      .loading-view {
+        min-height: inherit;
+        height: inherit;
+      }
+
+      slot {
+        display: block;
+        overflow: hidden;
+      }
+
       #frame {
-        border: 1px solid white;
+        background-color: ${theaterBg};
+        color-scheme: dark;
+      }
+
+      #frame.fullscreen {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 9;
       }
 
-      #frame.fullscreen,
-      #frame.fullscreen #reader {
-        height: 100vh;
+      .loading-view {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      ia-itemnav-loader {
+        display: block;
+        width: 100%;
       }
 
       .hidden {
-        height: 1px;
-        width: 1px;
+        display: none;
       }
 
       button {
@@ -332,17 +432,18 @@ export class ItemNavigator extends LitElement {
 
       nav .minimized {
         background: rgba(0, 0, 0, 0.7);
-        border-bottom-right-radius: 5%;
+        padding-top: 6px;
         position: absolute;
-        padding-top: 0.6rem;
-        left: 0;
-        width: 4rem;
+        width: ${menuMargin};
         z-index: 2;
+        left: 0;
+        border-bottom-right-radius: 5%;
       }
 
       nav .minimized button {
         width: var(--iconWidth);
         height: var(--iconHeight);
+        margin-bottom: 0.2rem;
         margin: auto;
         display: inline-flex;
         vertical-align: middle;
@@ -350,8 +451,8 @@ export class ItemNavigator extends LitElement {
         align-items: center;
         -webkit-box-pack: center;
         justify-content: center;
-        width: 4rem;
-        height: 4rem;
+        width: ${menuMargin};
+        height: ${menuMargin};
       }
 
       nav .minimized button.toggle-menu > * {
@@ -383,26 +484,27 @@ export class ItemNavigator extends LitElement {
       #reader {
         position: relative;
         z-index: 1;
-        transition: ${transitionEffect};
+        /* transition: ${transitionEffect}; */
         transform: translateX(0);
         width: 100%;
       }
 
+      .open.overlay #reader {
+        transition: none;
+      }
+
       .open #menu {
         width: ${subnavWidth};
         transform: translateX(0);
         transition: ${transitionEffect};
       }
 
-      ${tabletPlusQuery} {
-        .open #reader {
-          transition: ${transitionEffect};
-          transform: translateX(${subnavWidth});
-          width: calc(100% - ${subnavWidth});
-        }
+      .open.shift slot[name='theater-header'],
+      .open.shift #reader {
+        width: calc(100% - var(--menuWidth));
+        float: right;
+        transition: ${transitionEffect};
       }
     `;
   }
 }
-
-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>
     `;