@internetarchive/ia-item-navigator 0.0.4-3 → 0.0.5-2

package/src/item-navigator.ts

@@ -37,9 +37,6 @@ import {
 } from './interfaces/menu-interfaces';
 import './no-theater-available';
 
-export enum ItemType {
-  OPEN = 'open',
-}
 @customElement('ia-item-navigator')
 export class ItemNavigator
   extends LitElement
@@ -55,7 +52,7 @@ export class ItemNavigator
   })
   item?: MetadataResponse;
 
-  @property({ type: String }) itemType?: ItemType;
+  @property({ type: Boolean }) viewAvailable: Boolean = true;
 
   @property({ type: String }) baseHost = 'archive.org';
 
@@ -92,9 +89,9 @@ export class ItemNavigator
 
   @query('#frame') private frame!: HTMLDivElement;
 
-  @query('slot[name="theater-header"]') private headerSlot!: HTMLSlotElement;
+  @query('slot[name="header"]') private headerSlot!: HTMLSlotElement;
 
-  @query('slot[name="theater-main"]') private mainSlot!: HTMLSlotElement;
+  @query('slot[name="main"]') private mainSlot!: HTMLSlotElement;
 
   disconnectedCallback() {
     this.removeResizeObserver();
@@ -151,13 +148,6 @@ export class ItemNavigator
     return this.viewportInFullscreen ? 'Internet Archive' : '';
   }
 
-  get readerHeightStyle(): string {
-    const calcFSHeight = `calc(100vh - ${
-      this.headerSlot?.offsetHeight || 0
-    }px)`;
-    return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
-  }
-
   get loadingArea() {
     return html`
       <div class="loading-area">
@@ -181,19 +171,18 @@ export class ItemNavigator
 
   render(): TemplateResult {
     const displayReaderClass = this.loaded ? '' : 'hidden';
+    const headerHeight =
+      (this.headerSlot?.assignedNodes()[0] as HTMLElement)?.offsetHeight || 0;
     return html`
-      <div id="frame" class=${`${this.menuClass}`}>
+      <div id="frame" class=${this.menuClass}>
         <slot
-          name="theater-header"
+          name="header"
+          style=${`height: ${headerHeight}px`}
           @slotchange=${(e: Event) => this.slotChange(e, 'header')}
         ></slot>
         <div class="menu-and-reader">
           ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
-          <div
-            id="reader"
-            class=${displayReaderClass}
-            style=${this.readerHeightStyle}
-          >
+          <div id="reader" class=${displayReaderClass}>
             ${this.renderViewport}
           </div>
           ${!this.loaded ? this.loadingArea : nothing}
@@ -210,19 +199,15 @@ export class ItemNavigator
   }
 
   get renderViewport(): TemplateResult | typeof nothing {
-    if (!this.item) {
-      return nothing;
-    }
-    if (this.itemType !== ItemType.OPEN) {
+    if (!this.viewAvailable) {
       return this.noTheaterView;
     }
 
     const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
     return html`
-      <div slot="theater-main" style=${slotVisibility}>
+      <div slot="main" style=${slotVisibility}>
         <slot
-          name="theater-main"
-          style=${this.readerHeightStyle}
+          name="main"
           @slotchange=${(e: Event) => this.slotChange(e, 'main')}
         ></slot>
       </div>
@@ -353,7 +338,9 @@ export class ItemNavigator
 
   /** Misc Render */
   get menuClass(): string {
-    const drawerState = this.menuOpened ? 'open' : '';
+    const hasMenuOrShortcuts =
+      this.menuContents?.length || this.menuShortcuts?.length;
+    const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';
     const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
     return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
   }
@@ -369,8 +356,6 @@ export class ItemNavigator
       :host,
       #frame,
       .menu-and-reader {
-        min-height: inherit;
-        height: inherit;
         position: relative;
         overflow: hidden;
         display: block;
@@ -378,7 +363,6 @@ export class ItemNavigator
 
       :host,
       #frame,
-      .menu-and-reader,
       .loading-area,
       .loading-view {
         min-height: inherit;
@@ -388,6 +372,7 @@ export class ItemNavigator
       slot {
         display: block;
         overflow: hidden;
+        width: 100%;
       }
 
       slot * {
@@ -398,6 +383,8 @@ export class ItemNavigator
       #frame {
         background-color: ${theaterBg};
         color-scheme: dark;
+        display: flex;
+        flex-direction: column;
       }
 
       #frame.fullscreen {
@@ -410,18 +397,23 @@ export class ItemNavigator
       }
 
       .loading-view {
+        height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
       }
 
+      .loading-area {
+        width: 100%;
+      }
+
       ia-itemnav-loader {
         display: block;
         width: 100%;
       }
 
       .hidden {
-        display: none;
+        display: none !important;
       }
 
       button {
@@ -437,6 +429,8 @@ export class ItemNavigator
 
       .menu-and-reader {
         position: relative;
+        display: flex;
+        flex: 1;
       }
 
       nav button {
@@ -499,6 +493,13 @@ export class ItemNavigator
         z-index: 1;
         transform: translateX(0);
         width: 100%;
+        display: flex;
+      }
+
+      #reader > * {
+        width: 100%;
+        display: flex;
+        flex: 1;
       }
 
       .open.overlay #reader {
@@ -512,8 +513,8 @@ export class ItemNavigator
       }
 
       .open.shift #reader {
-        width: calc(100% - var(--menuWidth));
-        float: right;
+        width: calc(100% - ${subnavWidth});
+        margin-left: ${subnavWidth};
         transition: ${transitionEffect};
       }
     `;

package/src/no-theater-available.ts

@@ -53,7 +53,8 @@ export class IANoTheaterAvailable extends LitElement {
         text-align: center;
       }
       section {
-        margin: 10% auto 0;
+        width: 100%;
+        margin: 5%;
         padding: 0 5%;
       }
       p {

package/test/ia-item-navigator.test.ts

@@ -7,7 +7,6 @@ import { ModalManager } from '@internetarchive/modal-manager';
 import { ItemNavigator } from '../src/item-navigator';
 import '../src/item-navigator';
 
-import '../test/book-nav-stub';
 import { ItemStub, menuProvider, shortcut } from '../test/ia-stub';
 import {
   ManageFullscreenEvent,
@@ -23,12 +22,25 @@ afterEach(() => {
 
 describe('ItemNavigator', () => {
   describe('Theaters', () => {
-    it('shows <ia-no-theater-available> by default', async () => {
+    it('shows <ia-no-theater-available> if told', async () => {
       const el = await fixture<ItemNavigator>(
         html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
       );
+      el.viewAvailable = false;
+      await el.updateComplete;
+      expect(el.viewAvailable).to.be.false;
       expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.exist;
     });
+    it('opens main slot by default', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
+      );
+
+      expect(el.viewAvailable).to.be.true;
+      expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.be
+        .null;
+      expect(el.shadowRoot?.querySelector('slot[name="main"]')).to.exist;
+    });
   });
   describe('`el.loaded`', () => {
     it('toggles the spinning loader', async () => {
@@ -52,14 +64,16 @@ describe('ItemNavigator', () => {
         html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
       );
 
+      el.loaded = true;
+      await el.updateComplete;
       const mainTheaterSection = el.shadowRoot?.querySelector('#reader');
       expect(mainTheaterSection?.classList.contains('hide')).to.be.false;
       expect(el.loaded).to.be.true;
       // `loaded` property is reflected as DOM attribute
       expect(el.hasAttribute('loaded')).to.equal(true);
-      expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.exist;
+      expect(el.shadowRoot?.querySelector('slot[name="main"]')).to.exist;
     });
-    it('listens to `@loadingStateUpdated` to update `loaded`', async () => {
+    it('listens to `@loadingStateUpdated` to update `loaded` for <no-theater-available>', async () => {
       const el = await fixture<ItemNavigator>(
         html`<ia-item-navigator></ia-item-navigator>`
       );
@@ -68,15 +82,12 @@ describe('ItemNavigator', () => {
       const spy = Sinon.spy();
       el.loadingStateUpdated = spy;
       el.loaded = null;
+      el.viewAvailable = false;
       await el.updateComplete;
       // check base properties
       expect(el.loaded).to.equal(null);
       expect(el.item).to.be.undefined;
 
-      // hydrate item
-      el.item = new ItemStub();
-      await el.updateComplete;
-
       // spy fires
       expect(spy.called).to.equal(true);
       expect(spy.callCount).to.equal(1);

package/test/book-nav-stub.ts

@@ -1,47 +0,0 @@
-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> `;
-  }
-}