@internetarchive/ia-item-navigator 0.0.0-a10 → 0.0.0-a12

package/src/item-navigator.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-duplicates */
 import {
   css,
   html,
@@ -8,12 +7,12 @@ 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
@@ -34,7 +33,7 @@ import {
 } from './interfaces/event-interfaces';
 
 import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
-
+import './no-theater-available';
 @customElement('ia-item-navigator')
 export class ItemNavigator
   extends LitElement
@@ -78,7 +77,9 @@ export class ItemNavigator
 
   @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];
 
-  @property({ type: Boolean, reflect: true }) viewportInFullscreen = false;
+  @property({ type: Boolean, reflect: true }) viewportInFullscreen:
+    | boolean
+    | null = null;
 
   @property({ type: Boolean }) menuOpened = false;
 
@@ -87,14 +88,16 @@ export class ItemNavigator
   @property({ attribute: false }) modal?: ModalManagerInterface;
 
   @property({ attribute: false })
-  sharedObserver?: SharedResizeObserverInterface;
+  sharedObserver?: SharedResizeObserver;
 
-  @property({ type: Boolean, reflect: true }) loaded: boolean = false;
+  @property({ reflect: true, attribute: true }) loaded: boolean | null = null;
 
   @state() openMenuState: 'overlay' | 'shift' = 'shift';
 
   @query('#frame') private frame!: HTMLDivElement;
 
+  @query('slot[name="theater-header"]') private headerSlot!: HTMLDivElement;
+
   disconnectedCallback() {
     this.sharedObserver?.removeObserver({
       handler: this,
@@ -102,8 +105,7 @@ export class ItemNavigator
     });
   }
 
-  firstUpdated(pp: any): void {
-    console.log('first updated item-nav', this.modal, pp);
+  firstUpdated(): void {
     if (!this.modal) {
       this.createModal();
     }
@@ -147,30 +149,61 @@ export class ItemNavigator
     return this.viewportInFullscreen ? 'Internet Archive' : '';
   }
 
+  get readerHeightStyle(): string {
+    const calcFSHeight = `calc(100vh - ${this.headerSlot?.offsetHeight}px)`;
+    return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
+  }
+
+  handleHeaderSlotChange(e: Event) {
+    console.log('~~~~ handleHeaderSlotChange', e);
+  }
+
+  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="theater-header"></slot>
         <div class="menu-and-reader">
           ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
-          <div id="reader" class=${displayReaderClass}>
+          <slot
+            name="theater-header"
+            @slotchange=${this.handleHeaderSlotChange}
+          ></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 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;';
 
@@ -189,7 +222,7 @@ export class ItemNavigator
         @menuShortcutsUpdated=${this.setMenuShortcuts}
       >
         <div slot="theater-main" style=${slotVisibility}>
-          <slot name="theater-main"></slot>
+          ${this.theaterSlot}
         </div>
       </book-navigator>
     `;
@@ -202,13 +235,12 @@ export class ItemNavigator
     if (this.itemType === 'bookreader') {
       return this.BooksViewer;
     }
-    return nothing;
+    return this.noTheaterView;
   }
 
   loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {
     const { loaded } = e.detail;
     this.loaded = !!loaded;
-    console.log('******loadingStateUpdated', e.detail);
   }
 
   /** Creates modal DOM & attaches to `<body>` */
@@ -222,12 +254,14 @@ export class ItemNavigator
 
   /** Fullscreen Management */
   manageViewportFullscreen(e: IntManageFullscreenEvent): void {
-    this.viewportInFullscreen = !!e.detail.isFullScreen;
-    this.dispatchEvent(
-      new CustomEvent('ViewportInFullScreen', {
-        detail: e.detail,
-      }) as IntManageFullscreenEvent
-    );
+    const fullscreenStatus = !!e.detail.isFullScreen;
+    this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
+
+    const event = new CustomEvent('fullscreenToggled', {
+      detail: e.detail,
+    }) as IntManageFullscreenEvent;
+
+    this.dispatchEvent(event);
   }
   /** End Fullscreen Management */
 
@@ -274,7 +308,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"
@@ -340,7 +373,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`;
@@ -350,7 +383,6 @@ export class ItemNavigator
     return css`
       :host,
       #frame,
-      #reader,
       .menu-and-reader {
         min-height: inherit;
         height: inherit;
@@ -359,6 +391,11 @@ export class ItemNavigator
         display: block;
       }
 
+      slot {
+        display: block;
+        overflow: hidden;
+      }
+
       #frame {
         background-color: ${theaterBg};
         color-scheme: dark;
@@ -373,11 +410,6 @@ export class ItemNavigator
         z-index: 9;
       }
 
-      #frame.fullscreen,
-      #frame.fullscreen #reader {
-        height: 100vh;
-      }
-
       .loading-area {
         position: absolute;
         top: 0;
@@ -494,6 +526,7 @@ export class ItemNavigator
         transition: ${transitionEffect};
       }
 
+      .open.shift slot[name='theater-header'],
       .open.shift #reader {
         width: calc(100% - var(--menuWidth));
         float: right;

package/src/no-theater-available.ts

@@ -0,0 +1,87 @@
+import {
+  LitElement,
+  customElement,
+  property,
+  html,
+  TemplateResult,
+  PropertyValues,
+  CSSResult,
+  css,
+} from 'lit-element';
+
+import { IntLoadingStateUpdatedEvent } from './interfaces/event-interfaces';
+
+@customElement('ia-no-theater-available')
+export class IANoTheaterAvailable extends LitElement {
+  @property({ type: String }) identifier?: string = '';
+
+  emitLoaded(): void {
+    this.dispatchEvent(
+      new CustomEvent('loadingStateUpdated', {
+        detail: { loaded: true },
+      }) as IntLoadingStateUpdatedEvent
+    );
+  }
+
+  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> `;
+  }
+}