@internetarchive/ia-item-navigator 0.0.4-4 → 0.0.5

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,12 +148,6 @@ export class ItemNavigator
     return this.viewportInFullscreen ? 'Internet Archive' : '';
   }
 
-  get readerHeightStyle(): string {
-    const calcFSHeight = `calc(100% - ${this.headerSlot?.offsetHeight || 0}px)`;
-
-    return this.headerSlot?.offsetHeight > 0 ? `height: ${calcFSHeight}` : '';
-  }
-
   get loadingArea() {
     return html`
       <div class="loading-area">
@@ -180,13 +171,16 @@ 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}>
         <slot
-          name="theater-header"
+          name="header"
+          style=${`height: ${headerHeight}px`}
           @slotchange=${(e: Event) => this.slotChange(e, 'header')}
         ></slot>
-        <div class="menu-and-reader" style=${this.readerHeightStyle}>
+        <div class="menu-and-reader">
           ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
           <div id="reader" class=${displayReaderClass}>
             ${this.renderViewport}
@@ -205,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>
@@ -348,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}`;
   }
@@ -364,8 +356,6 @@ export class ItemNavigator
       :host,
       #frame,
       .menu-and-reader {
-        min-height: inherit;
-        height: inherit;
         position: relative;
         overflow: hidden;
         display: block;
@@ -373,7 +363,6 @@ export class ItemNavigator
 
       :host,
       #frame,
-      .menu-and-reader,
       .loading-area,
       .loading-view {
         min-height: inherit;
@@ -382,7 +371,6 @@ export class ItemNavigator
 
       slot {
         display: block;
-        overflow: hidden;
         width: 100%;
       }
 
@@ -394,6 +382,8 @@ export class ItemNavigator
       #frame {
         background-color: ${theaterBg};
         color-scheme: dark;
+        display: flex;
+        flex-direction: column;
       }
 
       #frame.fullscreen {
@@ -406,18 +396,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 {
@@ -433,6 +428,8 @@ export class ItemNavigator
 
       .menu-and-reader {
         position: relative;
+        display: flex;
+        flex: 1;
       }
 
       nav button {
@@ -495,13 +492,13 @@ export class ItemNavigator
         z-index: 1;
         transform: translateX(0);
         width: 100%;
-        height: 100%;
+        display: flex;
       }
 
       #reader > * {
         width: 100%;
         display: flex;
-        height: 100%;
+        flex: 1;
       }
 
       .open.overlay #reader {
@@ -515,8 +512,8 @@ export class ItemNavigator
       }
 
       .open.shift #reader {
-        width: calc(100% - var(--menuWidth));
-        float: right;
+        width: calc(100% - ${subnavWidth});
+        margin-left: ${subnavWidth};
         transition: ${transitionEffect};
       }
     `;

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

@@ -4,7 +4,7 @@ import Sinon from 'sinon';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalManager } from '@internetarchive/modal-manager';
-import { ItemNavigator, ItemType } from '../src/item-navigator';
+import { ItemNavigator } from '../src/item-navigator';
 import '../src/item-navigator';
 
 import { ItemStub, menuProvider, shortcut } from '../test/ia-stub';
@@ -22,25 +22,24 @@ 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;
-      expect(el.itemType).to.not.equal(ItemType.OPEN);
     });
-    it('opens main slot when itemType = open', async () => {
+    it('opens main slot by default', async () => {
       const el = await fixture<ItemNavigator>(
         html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
       );
-      el.itemType = ItemType.OPEN;
-      await el.updateComplete;
 
-      expect(el.itemType).to.equal(ItemType.OPEN);
+      expect(el.viewAvailable).to.be.true;
       expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.be
         .null;
-      expect(el.shadowRoot?.querySelector('slot[name="theater-main"]')).to
-        .exist;
+      expect(el.shadowRoot?.querySelector('slot[name="main"]')).to.exist;
     });
   });
   describe('`el.loaded`', () => {
@@ -65,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>`
       );
@@ -81,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);