@internetarchive/ia-item-navigator 0.0.2 → 0.0.4-2

package/demo/app-root.ts

@@ -36,6 +36,8 @@ export class AppRoot extends LitElement {
     | boolean
     | null = null;
 
+  @property({ type: Boolean, reflect: true, attribute: true }) headerOn = false;
+
   firstUpdated() {
     this.fetchItemMD();
     console.log(
@@ -94,56 +96,80 @@ export class AppRoot extends LitElement {
   fullscreenCheck(): void {
     if (this.showFullscreen && this.itemNav) {
       this.fullscreen = true;
-      // this.itemNav.viewportInFullscreen = true;
     }
   }
   /** End fullscreen */
 
+  toggleHeader() {
+    this.headerOn = !this.headerOn;
+  }
+
   /** Views */
-  get theaterBlock(): TemplateResult {
+  get headerExample(): TemplateResult {
     return html`
-      <ia-item-navigator
-        baseHost="https://archive.org"
-        .item=${this.itemMD}
-        .modal=${this.modalMgr}
-        .sharedObserver=${this.sharedObserver}
-        @ViewportInFullScreen=${this.toggleFS}
-        .viewportInFullscreen=${this.fullscreen}
-      ></ia-item-navigator>
+      <div slot="theater-header">
+        <div class="embed-link">
+          <img
+            src="https://archive.org/images/glogo-jw.png"
+            alt="glowing ia logo"
+          />
+          <a href="/details/goody"
+            >The history of Little Goody Two-Shoes : otherwise called Mrs.
+            Margery Two-Shoes ... [1766 edition]</a
+          >
+        </div>
+      </div>
     `;
   }
 
-  get placeholder(): TemplateResult {
-    return html`<h2>Please hold as we fetch an item for ya</h2>`;
-  }
-
   render(): TemplateResult {
-    const theater = this.theaterReady ? this.theaterBlock : this.placeholder;
     return html`
       <h1>theater, in page</h1>
-      ${theater}
+      <section>
+        <ia-item-navigator
+          baseHost="https://archive.org"
+          .item=${this.itemMD}
+          .modal=${this.modalMgr}
+          .sharedObserver=${this.sharedObserver}
+          @fullscreenToggled=${this.toggleFS}
+        >
+          ${this.headerOn ? this.headerExample : ''}
+        </ia-item-navigator>
+      </section>
+      <div>
+        <button @click=${this.toggleHeader}>toggle header</button>
+      </div>
       <modal-manager></modal-manager>
     `;
   }
 
   static styles = css`
-    :host {
-      border: 1px solid pink;
-      color: #222;
-    }
-
-    :host([fullscreen]) {
+    :host([fullscreen]),
+    :host([fullscreen]) section {
       height: 100vh;
       width: 100vw;
     }
 
+    :host([fullscreen]) h1 {
+      display: none;
+    }
+
+    h1 {
+      color: black;
+    }
+
+    section {
+      border: 1px solid pink;
+      color: #222;
+      height: calc(100vh - 200px);
+    }
+
     :host,
     ia-item-navigator {
       display: block;
       position: relative;
       width: 100%;
-      min-height: 64vh;
-      height: 64vh;
+      height: inherit;
     }
     ia-item-navigator {
       height: inherit;
@@ -156,6 +182,11 @@ export class AppRoot extends LitElement {
       min-height: inherit;
     }
 
+    .embed-link {
+      height: 55px;
+      border: 1px solid yellow;
+    }
+
     modal-manager[mode='closed'] {
       display: none;
     }

package/dist/demo/app-root.d.ts

@@ -14,6 +14,7 @@ export declare class AppRoot extends LitElement {
     modalMgr: ModalManager;
     sharedObserver: SharedResizeObserver;
     fullscreen: boolean | null;
+    headerOn: boolean;
     firstUpdated(): void;
     updated(changed: any): void;
     fetchItemMD(): Promise<void>;
@@ -26,9 +27,9 @@ export declare class AppRoot extends LitElement {
     /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
     fullscreenCheck(): void;
     /** End fullscreen */
+    toggleHeader(): void;
     /** Views */
-    get theaterBlock(): TemplateResult;
-    get placeholder(): TemplateResult;
+    get headerExample(): TemplateResult;
     render(): TemplateResult;
     static styles: import("lit-element").CSSResult;
 }

package/dist/demo/app-root.js

@@ -15,6 +15,7 @@ let AppRoot = class AppRoot extends LitElement {
         this.encodedManifest = '';
         this.sharedObserver = new SharedResizeObserver();
         this.fullscreen = null;
+        this.headerOn = false;
     }
     firstUpdated() {
         this.fetchItemMD();
@@ -60,53 +61,77 @@ let AppRoot = class AppRoot extends LitElement {
     fullscreenCheck() {
         if (this.showFullscreen && this.itemNav) {
             this.fullscreen = true;
-            // this.itemNav.viewportInFullscreen = true;
         }
     }
     /** End fullscreen */
+    toggleHeader() {
+        this.headerOn = !this.headerOn;
+    }
     /** Views */
-    get theaterBlock() {
+    get headerExample() {
         return html `
-      <ia-item-navigator
-        baseHost="https://archive.org"
-        .item=${this.itemMD}
-        .modal=${this.modalMgr}
-        .sharedObserver=${this.sharedObserver}
-        @ViewportInFullScreen=${this.toggleFS}
-        .viewportInFullscreen=${this.fullscreen}
-      ></ia-item-navigator>
+      <div slot="theater-header">
+        <div class="embed-link">
+          <img
+            src="https://archive.org/images/glogo-jw.png"
+            alt="glowing ia logo"
+          />
+          <a href="/details/goody"
+            >The history of Little Goody Two-Shoes : otherwise called Mrs.
+            Margery Two-Shoes ... [1766 edition]</a
+          >
+        </div>
+      </div>
     `;
     }
-    get placeholder() {
-        return html `<h2>Please hold as we fetch an item for ya</h2>`;
-    }
     render() {
-        const theater = this.theaterReady ? this.theaterBlock : this.placeholder;
         return html `
       <h1>theater, in page</h1>
-      ${theater}
+      <section>
+        <ia-item-navigator
+          baseHost="https://archive.org"
+          .item=${this.itemMD}
+          .modal=${this.modalMgr}
+          .sharedObserver=${this.sharedObserver}
+          @fullscreenToggled=${this.toggleFS}
+        >
+          ${this.headerOn ? this.headerExample : ''}
+        </ia-item-navigator>
+      </section>
+      <div>
+        <button @click=${this.toggleHeader}>toggle header</button>
+      </div>
       <modal-manager></modal-manager>
     `;
     }
 };
 AppRoot.styles = css `
-    :host {
-      border: 1px solid pink;
-      color: #222;
-    }
-
-    :host([fullscreen]) {
+    :host([fullscreen]),
+    :host([fullscreen]) section {
       height: 100vh;
       width: 100vw;
     }
 
+    :host([fullscreen]) h1 {
+      display: none;
+    }
+
+    h1 {
+      color: black;
+    }
+
+    section {
+      border: 1px solid pink;
+      color: #222;
+      height: calc(100vh - 200px);
+    }
+
     :host,
     ia-item-navigator {
       display: block;
       position: relative;
       width: 100%;
-      min-height: 64vh;
-      height: 64vh;
+      height: inherit;
     }
     ia-item-navigator {
       height: inherit;
@@ -119,6 +144,11 @@ AppRoot.styles = css `
       min-height: inherit;
     }
 
+    .embed-link {
+      height: 55px;
+      border: 1px solid yellow;
+    }
+
     modal-manager[mode='closed'] {
       display: none;
     }
@@ -141,6 +171,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], AppRoot.prototype, "fullscreen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], AppRoot.prototype, "headerOn", void 0);
 AppRoot = __decorate([
     customElement('app-root')
 ], AppRoot);

package/dist/demo/app-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-restricted-globals */\nimport {\n  html,\n  css,\n  LitElement,\n  customElement,\n  property,\n  query,\n  TemplateResult,\n} from 'lit-element';\nimport {\n  MetadataResponse,\n  SearchService,\n} from '@internetarchive/search-service';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/modal-manager';\nimport { ItemNavigator } from '../src/item-navigator';\nimport '../src/item-navigator';\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  /**\n   * Example controller to connect to `<ia-item-navigator>`\n   */\n  @property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;\n\n  @property({ type: String }) encodedManifest = '';\n\n  @query('ia-item-navigator') private itemNav!: ItemNavigator;\n\n  @query('modal-manager') modalMgr!: ModalManager;\n\n  @property({ attribute: false }) sharedObserver = new SharedResizeObserver();\n\n  @property({ type: Boolean, reflect: true, attribute: true }) fullscreen:\n    | boolean\n    | null = null;\n\n  firstUpdated() {\n    this.fetchItemMD();\n    console.log(\n      '<app-root> component has loaded',\n      this.modalMgr,\n      this.sharedObserver\n    );\n  }\n\n  updated(changed: any) {\n    console.log('changed', changed);\n    if (changed.has('itemMD')) {\n      this.fullscreenCheck();\n    }\n  }\n\n  async fetchItemMD() {\n    const searchService = SearchService.default;\n    const mdResponse = await searchService.fetchMetadata('ux-team-books');\n\n    if (mdResponse.error) {\n      console.log('MD Fetch error: ', mdResponse.error);\n      (window as any).confirm(\n        'There was an error fetching response, please check dev console'\n      );\n      return;\n    }\n\n    console.log('mdResponse.success', JSON.stringify(mdResponse.success));\n    this.itemMD = mdResponse.success;\n  }\n\n  get theaterReady(): boolean {\n    return this.modalMgr && this.sharedObserver && !!this.itemMD;\n  }\n\n  get urlParams(): URLSearchParams {\n    return new URLSearchParams(location.search.slice(1));\n  }\n\n  /** Fullscreen */\n  get showFullscreen(): boolean {\n    return this.urlParams.get('view') === 'theater';\n  }\n\n  /** sets url query param `view=theater` to toggle fullscreen */\n  toggleFS(): void {\n    if (this.urlParams.get('view')) {\n      location.search = '';\n    } else {\n      location.search = 'view=theater';\n    }\n  }\n\n  /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */\n  fullscreenCheck(): void {\n    if (this.showFullscreen && this.itemNav) {\n      this.fullscreen = true;\n      // this.itemNav.viewportInFullscreen = true;\n    }\n  }\n  /** End fullscreen */\n\n  /** Views */\n  get theaterBlock(): TemplateResult {\n    return html`\n      <ia-item-navigator\n        baseHost=\"https://archive.org\"\n        .item=${this.itemMD}\n        .modal=${this.modalMgr}\n        .sharedObserver=${this.sharedObserver}\n        @ViewportInFullScreen=${this.toggleFS}\n        .viewportInFullscreen=${this.fullscreen}\n      ></ia-item-navigator>\n    `;\n  }\n\n  get placeholder(): TemplateResult {\n    return html`<h2>Please hold as we fetch an item for ya</h2>`;\n  }\n\n  render(): TemplateResult {\n    const theater = this.theaterReady ? this.theaterBlock : this.placeholder;\n    return html`\n      <h1>theater, in page</h1>\n      ${theater}\n      <modal-manager></modal-manager>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      border: 1px solid pink;\n      color: #222;\n    }\n\n    :host([fullscreen]) {\n      height: 100vh;\n      width: 100vw;\n    }\n\n    :host,\n    ia-item-navigator {\n      display: block;\n      position: relative;\n      width: 100%;\n      min-height: 64vh;\n      height: 64vh;\n    }\n    ia-item-navigator {\n      height: inherit;\n      min-height: inherit;\n    }\n    div {\n      position: relative;\n      overflow: hidden;\n      height: 100%;\n      min-height: inherit;\n    }\n\n    modal-manager[mode='closed'] {\n      display: none;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-restricted-globals */\nimport {\n  html,\n  css,\n  LitElement,\n  customElement,\n  property,\n  query,\n  TemplateResult,\n} from 'lit-element';\nimport {\n  MetadataResponse,\n  SearchService,\n} from '@internetarchive/search-service';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/modal-manager';\nimport { ItemNavigator } from '../src/item-navigator';\nimport '../src/item-navigator';\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  /**\n   * Example controller to connect to `<ia-item-navigator>`\n   */\n  @property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;\n\n  @property({ type: String }) encodedManifest = '';\n\n  @query('ia-item-navigator') private itemNav!: ItemNavigator;\n\n  @query('modal-manager') modalMgr!: ModalManager;\n\n  @property({ attribute: false }) sharedObserver = new SharedResizeObserver();\n\n  @property({ type: Boolean, reflect: true, attribute: true }) fullscreen:\n    | boolean\n    | null = null;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) headerOn = false;\n\n  firstUpdated() {\n    this.fetchItemMD();\n    console.log(\n      '<app-root> component has loaded',\n      this.modalMgr,\n      this.sharedObserver\n    );\n  }\n\n  updated(changed: any) {\n    console.log('changed', changed);\n    if (changed.has('itemMD')) {\n      this.fullscreenCheck();\n    }\n  }\n\n  async fetchItemMD() {\n    const searchService = SearchService.default;\n    const mdResponse = await searchService.fetchMetadata('ux-team-books');\n\n    if (mdResponse.error) {\n      console.log('MD Fetch error: ', mdResponse.error);\n      (window as any).confirm(\n        'There was an error fetching response, please check dev console'\n      );\n      return;\n    }\n\n    console.log('mdResponse.success', JSON.stringify(mdResponse.success));\n    this.itemMD = mdResponse.success;\n  }\n\n  get theaterReady(): boolean {\n    return this.modalMgr && this.sharedObserver && !!this.itemMD;\n  }\n\n  get urlParams(): URLSearchParams {\n    return new URLSearchParams(location.search.slice(1));\n  }\n\n  /** Fullscreen */\n  get showFullscreen(): boolean {\n    return this.urlParams.get('view') === 'theater';\n  }\n\n  /** sets url query param `view=theater` to toggle fullscreen */\n  toggleFS(): void {\n    if (this.urlParams.get('view')) {\n      location.search = '';\n    } else {\n      location.search = 'view=theater';\n    }\n  }\n\n  /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */\n  fullscreenCheck(): void {\n    if (this.showFullscreen && this.itemNav) {\n      this.fullscreen = true;\n    }\n  }\n  /** End fullscreen */\n\n  toggleHeader() {\n    this.headerOn = !this.headerOn;\n  }\n\n  /** Views */\n  get headerExample(): TemplateResult {\n    return html`\n      <div slot=\"theater-header\">\n        <div class=\"embed-link\">\n          <img\n            src=\"https://archive.org/images/glogo-jw.png\"\n            alt=\"glowing ia logo\"\n          />\n          <a href=\"/details/goody\"\n            >The history of Little Goody Two-Shoes : otherwise called Mrs.\n            Margery Two-Shoes ... [1766 edition]</a\n          >\n        </div>\n      </div>\n    `;\n  }\n\n  render(): TemplateResult {\n    return html`\n      <h1>theater, in page</h1>\n      <section>\n        <ia-item-navigator\n          baseHost=\"https://archive.org\"\n          .item=${this.itemMD}\n          .modal=${this.modalMgr}\n          .sharedObserver=${this.sharedObserver}\n          @fullscreenToggled=${this.toggleFS}\n        >\n          ${this.headerOn ? this.headerExample : ''}\n        </ia-item-navigator>\n      </section>\n      <div>\n        <button @click=${this.toggleHeader}>toggle header</button>\n      </div>\n      <modal-manager></modal-manager>\n    `;\n  }\n\n  static styles = css`\n    :host([fullscreen]),\n    :host([fullscreen]) section {\n      height: 100vh;\n      width: 100vw;\n    }\n\n    :host([fullscreen]) h1 {\n      display: none;\n    }\n\n    h1 {\n      color: black;\n    }\n\n    section {\n      border: 1px solid pink;\n      color: #222;\n      height: calc(100vh - 200px);\n    }\n\n    :host,\n    ia-item-navigator {\n      display: block;\n      position: relative;\n      width: 100%;\n      height: inherit;\n    }\n    ia-item-navigator {\n      height: inherit;\n      min-height: inherit;\n    }\n    div {\n      position: relative;\n      overflow: hidden;\n      height: 100%;\n      min-height: inherit;\n    }\n\n    .embed-link {\n      height: 55px;\n      border: 1px solid yellow;\n    }\n\n    modal-manager[mode='closed'] {\n      display: none;\n    }\n  `;\n}\n"]}

package/dist/src/item-navigator.d.ts

@@ -10,7 +10,7 @@ import { ToggleSideMenuOpenEvent, ToggleSidePanelOpenEvent, SetSideMenuContentsE
 import { MenuProviderInterface, MenuShortcutInterface, MenuId } from './interfaces/menu-interfaces';
 import './no-theater-available';
 export declare enum ItemType {
-    BOOK = "bookreader"
+    OPEN = "open"
 }
 export declare class ItemNavigator extends LitElement implements SharedResizeObserverResizeHandlerInterface {
     item?: MetadataResponse;
@@ -28,6 +28,7 @@ export declare class ItemNavigator extends LitElement implements SharedResizeObs
     openMenuState: 'overlay' | 'shift';
     private frame;
     private headerSlot;
+    private mainSlot;
     disconnectedCallback(): void;
     updated(changed: PropertyValues): void;
     /** Shared observer */
@@ -42,10 +43,9 @@ export declare class ItemNavigator extends LitElement implements SharedResizeObs
     get loaderTitle(): "" | "Internet Archive";
     get readerHeightStyle(): string;
     get loadingArea(): TemplateResult;
+    slotChange(e: Event, type: 'header' | 'main'): void;
     render(): TemplateResult;
     get noTheaterView(): TemplateResult;
-    get theaterSlot(): TemplateResult;
-    get booksViewer(): TemplateResult;
     get renderViewport(): TemplateResult | typeof nothing;
     loadingStateUpdated(e: loadingStateUpdatedEvent): void;
     /** Fullscreen Management */

package/dist/src/item-navigator.js

@@ -8,7 +8,7 @@ import './loader';
 import './no-theater-available';
 export var ItemType;
 (function (ItemType) {
-    ItemType["BOOK"] = "bookreader";
+    ItemType["OPEN"] = "open";
 })(ItemType || (ItemType = {}));
 let ItemNavigator = class ItemNavigator extends LitElement {
     constructor() {
@@ -42,8 +42,18 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         this.openMenuState = 'shift';
     }
     setResizeObserver() {
-        var _a;
+        var _a, _b;
         (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.addObserver(this.resizeObserverConfig);
+        (_b = this.sharedObserver) === null || _b === void 0 ? void 0 : _b.addObserver({
+            target: this.headerSlot,
+            handler: {
+                handleResize: ({ contentRect }) => {
+                    if (contentRect.height) {
+                        this.requestUpdate();
+                    }
+                },
+            },
+        });
     }
     removeResizeObserver() {
         var _a;
@@ -61,7 +71,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
     }
     get readerHeightStyle() {
         var _a;
-        const calcFSHeight = `calc(100vh - ${(_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.offsetHeight}px)`;
+        const calcFSHeight = `calc(100vh - ${((_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0}px)`;
         return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
     }
     get loadingArea() {
@@ -73,13 +83,24 @@ let ItemNavigator = class ItemNavigator extends LitElement {
       </div>
     `;
     }
+    slotChange(e, type) {
+        var _a;
+        const slottedContent = (_a = e.target.assignedNodes()) === null || _a === void 0 ? void 0 : _a[0];
+        this.dispatchEvent(new CustomEvent('slotChange', {
+            detail: { slot: slottedContent, type },
+        }));
+        this.requestUpdate();
+    }
     render() {
         const displayReaderClass = this.loaded ? '' : 'hidden';
         return html `
       <div id="frame" class=${`${this.menuClass}`}>
+        <slot
+          name="theater-header"
+          @slotchange=${(e) => this.slotChange(e, 'header')}
+        ></slot>
         <div class="menu-and-reader">
           ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
-          <slot name="theater-header"></slot>
           <div
             id="reader"
             class=${displayReaderClass}
@@ -99,41 +120,23 @@ let ItemNavigator = class ItemNavigator extends LitElement {
       @loadingStateUpdated=${this.loadingStateUpdated}
     ></ia-no-theater-available>`;
     }
-    get theaterSlot() {
-        return html `
-      <slot name="theater-main" style=${this.readerHeightStyle}></slot>
-    `;
-    }
-    get booksViewer() {
-        const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
-        return html `
-      <book-navigator
-        .modal=${this.modal}
-        .baseHost=${this.baseHost}
-        .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}
-      >
-        <div slot="theater-main" style=${slotVisibility}>
-          ${this.theaterSlot}
-        </div>
-      </book-navigator>
-    `;
-    }
     get renderViewport() {
         if (!this.item) {
             return nothing;
         }
-        if (this.itemType === ItemType.BOOK) {
-            return this.booksViewer;
+        if (this.itemType !== ItemType.OPEN) {
+            return this.noTheaterView;
         }
-        return this.noTheaterView;
+        const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
+        return html `
+      <div slot="theater-main" style=${slotVisibility}>
+        <slot
+          name="theater-main"
+          style=${this.readerHeightStyle}
+          @slotchange=${(e) => this.slotChange(e, 'main')}
+        ></slot>
+      </div>
+    `;
     }
     loadingStateUpdated(e) {
         const { loaded } = e.detail;
@@ -151,7 +154,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
     /** End Fullscreen Management */
     /** Side menu */
     get shouldRenderMenu() {
-        return !!this.menuContents.length;
+        var _a;
+        return !!((_a = this.menuContents) === null || _a === void 0 ? void 0 : _a.length);
     }
     toggleMenu() {
         this.menuOpened = !this.menuOpened;
@@ -277,6 +281,11 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         overflow: hidden;
       }
 
+      slot * {
+        display: block;
+        height: inherit;
+      }
+
       #frame {
         background-color: ${theaterBg};
         color-scheme: dark;
@@ -379,7 +388,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
       #reader {
         position: relative;
         z-index: 1;
-        /* transition: ${transitionEffect}; */
         transform: translateX(0);
         width: 100%;
       }
@@ -394,7 +402,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         transition: ${transitionEffect};
       }
 
-      .open.shift slot[name='theater-header'],
       .open.shift #reader {
         width: calc(100% - var(--menuWidth));
         float: right;
@@ -463,6 +470,9 @@ __decorate([
 __decorate([
     query('slot[name="theater-header"]')
 ], ItemNavigator.prototype, "headerSlot", void 0);
+__decorate([
+    query('slot[name="theater-main"]')
+], ItemNavigator.prototype, "mainSlot", void 0);
 ItemNavigator = __decorate([
     customElement('ia-item-navigator')
 ], ItemNavigator);

package/dist/src/item-navigator.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  customElement,\n  property,\n  state,\n  query,\n  PropertyValues,\n  CSSResult,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n  SharedResizeObserver,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport '@internetarchive/ia-menu-slider';\n\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n  ToggleSideMenuOpenEvent,\n  ToggleSidePanelOpenEvent,\n  SetSideMenuContentsEvent,\n  SetSideMenuShortcutsEvent,\n  loadingStateUpdatedEvent,\n  ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport {\n  MenuProviderInterface,\n  MenuShortcutInterface,\n  MenuId,\n} from './interfaces/menu-interfaces';\nimport './no-theater-available';\n\nexport enum ItemType {\n  BOOK = 'bookreader',\n}\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface {\n  @property({\n    type: Object,\n    converter: (value: string | MetadataResponse | null): MetadataResponse => {\n      if (value && typeof value === 'string') {\n        return new MetadataResponse(JSON.parse(atob(value)));\n      }\n      return value as MetadataResponse;\n    },\n  })\n  item?: MetadataResponse;\n\n  @property({ type: String }) itemType?: ItemType;\n\n  @property({ type: String }) baseHost = 'archive.org';\n\n  @property({\n    converter: (arg: string | boolean | null) => {\n      if (typeof arg === 'boolean') {\n        return arg;\n      }\n      return arg === 'true';\n    },\n  })\n  signedIn = false;\n\n  @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n  @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n  @property({ type: Boolean, reflect: true, attribute: true })\n  viewportInFullscreen: boolean | null = null;\n\n  @property({ type: Boolean }) menuOpened = false;\n\n  @property({ type: String }) openMenu?: MenuId;\n\n  @property({ attribute: false }) modal?: ModalManager;\n\n  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) loaded:\n    | true\n    | null = null;\n\n  @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n  @query('#frame') private frame!: HTMLDivElement;\n\n  @query('slot[name=\"theater-header\"]') private headerSlot!: HTMLDivElement;\n\n  disconnectedCallback() {\n    this.removeResizeObserver();\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('sharedObserver')) {\n      const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;\n      oldObserver?.removeObserver(this.resizeObserverConfig);\n      this.setResizeObserver();\n    }\n  }\n\n  /** Shared observer */\n  handleResize(entry: ResizeObserverEntry): void {\n    const { width } = entry.contentRect;\n    if (width <= 600) {\n      this.openMenuState = 'overlay';\n      return;\n    }\n    this.openMenuState = 'shift';\n  }\n\n  private setResizeObserver(): void {\n    this.sharedObserver?.addObserver(this.resizeObserverConfig);\n  }\n\n  private removeResizeObserver(): void {\n    this.sharedObserver?.removeObserver(this.resizeObserverConfig);\n  }\n\n  get resizeObserverConfig(): {\n    handler: SharedResizeObserverResizeHandlerInterface;\n    target: Element;\n  } {\n    return {\n      handler: this,\n      target: this.frame,\n    };\n  }\n  /** End shared observer */\n\n  get loaderTitle() {\n    return this.viewportInFullscreen ? 'Internet Archive' : '';\n  }\n\n  get readerHeightStyle(): string {\n    const calcFSHeight = `calc(100vh - ${this.headerSlot?.offsetHeight}px)`;\n    return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';\n  }\n\n  get loadingArea() {\n    return html`\n      <div class=\"loading-area\">\n        <div class=\"loading-view\">\n          <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>\n        </div>\n      </div>\n    `;\n  }\n\n  render(): TemplateResult {\n    const displayReaderClass = this.loaded ? '' : 'hidden';\n    return html`\n      <div id=\"frame\" class=${`${this.menuClass}`}>\n        <div class=\"menu-and-reader\">\n          ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n          <slot name=\"theater-header\"></slot>\n          <div\n            id=\"reader\"\n            class=${displayReaderClass}\n            style=${this.readerHeightStyle}\n          >\n            ${this.renderViewport}\n          </div>\n          ${!this.loaded ? this.loadingArea : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  get noTheaterView() {\n    return html`<ia-no-theater-available\n      .identifier=${this.item?.metadata?.identifier}\n      @loadingStateUpdated=${this.loadingStateUpdated}\n    ></ia-no-theater-available>`;\n  }\n\n  get theaterSlot() {\n    return html`\n      <slot name=\"theater-main\" style=${this.readerHeightStyle}></slot>\n    `;\n  }\n\n  get booksViewer(): TemplateResult {\n    const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n\n    return html`\n      <book-navigator\n        .modal=${this.modal}\n        .baseHost=${this.baseHost}\n        .itemMD=${this.item}\n        ?signedIn=${this.signedIn}\n        ?sideMenuOpen=${this.menuOpened}\n        .sharedObserver=${this.sharedObserver}\n        @ViewportInFullScreen=${this.manageViewportFullscreen}\n        @loadingStateUpdated=${this.loadingStateUpdated}\n        @updateSideMenu=${this.manageSideMenuEvents}\n        @menuUpdated=${this.setMenuContents}\n        @menuShortcutsUpdated=${this.setMenuShortcuts}\n      >\n        <div slot=\"theater-main\" style=${slotVisibility}>\n          ${this.theaterSlot}\n        </div>\n      </book-navigator>\n    `;\n  }\n\n  get renderViewport(): TemplateResult | typeof nothing {\n    if (!this.item) {\n      return nothing;\n    }\n    if (this.itemType === ItemType.BOOK) {\n      return this.booksViewer;\n    }\n    return this.noTheaterView;\n  }\n\n  loadingStateUpdated(e: loadingStateUpdatedEvent): void {\n    const { loaded } = e.detail;\n    this.loaded = loaded || null;\n  }\n\n  /** Fullscreen Management */\n  manageViewportFullscreen(e: ManageFullscreenEvent): void {\n    const fullscreenStatus = !!e.detail.isFullScreen;\n    this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n    const event = new CustomEvent('fullscreenToggled', {\n      detail: e.detail,\n    }) as ManageFullscreenEvent;\n\n    this.dispatchEvent(event);\n  }\n  /** End Fullscreen Management */\n\n  /** Side menu */\n  get shouldRenderMenu(): boolean {\n    return !!this.menuContents.length;\n  }\n\n  toggleMenu(): void {\n    this.menuOpened = !this.menuOpened;\n  }\n\n  closeMenu(): void {\n    this.menuOpened = false;\n  }\n\n  setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n    const { id } = e.detail;\n    this.openMenu = id !== this.openMenu ? id : undefined;\n  }\n\n  setMenuContents(e: SetSideMenuContentsEvent): void {\n    const updatedContents = [...e.detail];\n    this.menuContents = updatedContents;\n  }\n\n  setMenuShortcuts(e: SetSideMenuShortcutsEvent) {\n    this.menuShortcuts = [...e.detail];\n  }\n\n  /** Toggles Side Menu & Sets viewable subpanel  */\n  manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n    const { menuId, action } = e.detail;\n    if (!menuId) {\n      return;\n    }\n\n    if (action === 'open') {\n      this.openShortcut(menuId);\n    } else if (action === 'toggle') {\n      this.openMenu = menuId;\n      this.toggleMenu();\n    }\n  }\n\n  get menuToggleButton() {\n    return html`\n      <button\n        class=\"toggle-menu\"\n        @click=${this.toggleMenu}\n        title=\"Toggle theater side panels\"\n      >\n        <div>\n          <ia-icon-ellipses\n            style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n          ></ia-icon-ellipses>\n        </div>\n      </button>\n    `;\n  }\n\n  get selectedMenuId(): MenuId | '' {\n    return this.openMenu || '';\n  }\n\n  get renderSideMenu(): TemplateResult {\n    const drawerState = this.menuOpened ? '' : 'hidden';\n    return html`\n      <nav>\n        <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n        <div id=\"menu\" class=${drawerState}>\n          <ia-menu-slider\n            .menus=${this.menuContents}\n            .selectedMenu=${this.selectedMenuId}\n            @menuTypeSelected=${this.setOpenMenu}\n            @menuSliderClosed=${this.closeMenu}\n            manuallyHandleClose\n            open\n          ></ia-menu-slider>\n        </div>\n      </nav>\n    `;\n  }\n  /** End Side menu */\n\n  /** Menu Shortcuts */\n  openShortcut(selectedMenuId: MenuId = ''): void {\n    this.openMenu = selectedMenuId;\n    this.menuOpened = true;\n  }\n\n  get shortcuts(): TemplateResult {\n    const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n      if (id === 'fullscreen') {\n        return html`${icon}`;\n      }\n\n      return html`\n        <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n          ${icon}\n        </button>\n      `;\n    });\n    return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n  }\n  /** End Menu Shortcuts */\n\n  /** Misc Render */\n  get menuClass(): string {\n    const drawerState = this.menuOpened ? 'open' : '';\n    const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n    return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n  }\n\n  static get styles(): CSSResult {\n    const subnavWidth = css`var(--menuWidth, 320px)`;\n    const transitionTiming = css`var(--animationTiming, 200ms)`;\n    const transitionEffect = css`transform ${transitionTiming} ease-out`;\n    const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n    const theaterBg = css`var(--theaterBgColor, #000)`;\n\n    return css`\n      :host,\n      #frame,\n      .menu-and-reader {\n        min-height: inherit;\n        height: inherit;\n        position: relative;\n        overflow: hidden;\n        display: block;\n      }\n\n      :host,\n      #frame,\n      .menu-and-reader,\n      .loading-area,\n      .loading-view {\n        min-height: inherit;\n        height: inherit;\n      }\n\n      slot {\n        display: block;\n        overflow: hidden;\n      }\n\n      #frame {\n        background-color: ${theaterBg};\n        color-scheme: dark;\n      }\n\n      #frame.fullscreen {\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 9;\n      }\n\n      .loading-view {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      ia-itemnav-loader {\n        display: block;\n        width: 100%;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      button {\n        cursor: pointer;\n        padding: 0;\n        border: 0;\n      }\n\n      button:focus,\n      button:active {\n        outline: none;\n      }\n\n      .menu-and-reader {\n        position: relative;\n      }\n\n      nav button {\n        background: none;\n      }\n\n      nav .minimized {\n        background: rgba(0, 0, 0, 0.7);\n        padding-top: 6px;\n        position: absolute;\n        width: ${menuMargin};\n        z-index: 2;\n        left: 0;\n        border-bottom-right-radius: 5%;\n      }\n\n      nav .minimized button {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin-bottom: 0.2rem;\n        margin: auto;\n        display: inline-flex;\n        vertical-align: middle;\n        -webkit-box-align: center;\n        align-items: center;\n        -webkit-box-pack: center;\n        justify-content: center;\n        width: ${menuMargin};\n        height: ${menuMargin};\n      }\n\n      nav .minimized button.toggle-menu > * {\n        border: 2px solid var(--iconStrokeColor);\n        border-radius: var(--iconWidth);\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin: auto;\n      }\n\n      ia-icon-ellipses {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n      }\n\n      #menu {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        z-index: 3;\n        overflow: hidden;\n        transform: translateX(-${subnavWidth});\n        width: ${subnavWidth};\n        transform: translateX(calc(${subnavWidth} * -1));\n        transition: ${transitionEffect};\n      }\n\n      #reader {\n        position: relative;\n        z-index: 1;\n        /* transition: ${transitionEffect}; */\n        transform: translateX(0);\n        width: 100%;\n      }\n\n      .open.overlay #reader {\n        transition: none;\n      }\n\n      .open #menu {\n        width: ${subnavWidth};\n        transform: translateX(0);\n        transition: ${transitionEffect};\n      }\n\n      .open.shift slot[name='theater-header'],\n      .open.shift #reader {\n        width: calc(100% - var(--menuWidth));\n        float: right;\n        transition: ${transitionEffect};\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  customElement,\n  property,\n  state,\n  query,\n  PropertyValues,\n  CSSResult,\n} from 'lit-element';\nimport { nothing, TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n  SharedResizeObserver,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport '@internetarchive/ia-menu-slider';\n\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\nimport './loader';\n\nimport {\n  ToggleSideMenuOpenEvent,\n  ToggleSidePanelOpenEvent,\n  SetSideMenuContentsEvent,\n  SetSideMenuShortcutsEvent,\n  loadingStateUpdatedEvent,\n  ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport {\n  MenuProviderInterface,\n  MenuShortcutInterface,\n  MenuId,\n} from './interfaces/menu-interfaces';\nimport './no-theater-available';\n\nexport enum ItemType {\n  OPEN = 'open',\n}\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface {\n  @property({\n    type: Object,\n    converter: (value: string | MetadataResponse | null): MetadataResponse => {\n      if (value && typeof value === 'string') {\n        return new MetadataResponse(JSON.parse(atob(value)));\n      }\n      return value as MetadataResponse;\n    },\n  })\n  item?: MetadataResponse;\n\n  @property({ type: String }) itemType?: ItemType;\n\n  @property({ type: String }) baseHost = 'archive.org';\n\n  @property({\n    converter: (arg: string | boolean | null) => {\n      if (typeof arg === 'boolean') {\n        return arg;\n      }\n      return arg === 'true';\n    },\n  })\n  signedIn = false;\n\n  @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n  @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n  @property({ type: Boolean, reflect: true, attribute: true })\n  viewportInFullscreen: boolean | null = null;\n\n  @property({ type: Boolean }) menuOpened = false;\n\n  @property({ type: String }) openMenu?: MenuId;\n\n  @property({ attribute: false }) modal?: ModalManager;\n\n  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) loaded:\n    | true\n    | null = null;\n\n  @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n  @query('#frame') private frame!: HTMLDivElement;\n\n  @query('slot[name=\"theater-header\"]') private headerSlot!: HTMLSlotElement;\n\n  @query('slot[name=\"theater-main\"]') private mainSlot!: HTMLSlotElement;\n\n  disconnectedCallback() {\n    this.removeResizeObserver();\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('sharedObserver')) {\n      const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;\n      oldObserver?.removeObserver(this.resizeObserverConfig);\n      this.setResizeObserver();\n    }\n  }\n\n  /** Shared observer */\n  handleResize(entry: ResizeObserverEntry): void {\n    const { width } = entry.contentRect;\n    if (width <= 600) {\n      this.openMenuState = 'overlay';\n      return;\n    }\n    this.openMenuState = 'shift';\n  }\n\n  private setResizeObserver(): void {\n    this.sharedObserver?.addObserver(this.resizeObserverConfig);\n    this.sharedObserver?.addObserver({\n      target: this.headerSlot,\n      handler: {\n        handleResize: ({ contentRect }) => {\n          if (contentRect.height) {\n            this.requestUpdate();\n          }\n        },\n      },\n    });\n  }\n\n  private removeResizeObserver(): void {\n    this.sharedObserver?.removeObserver(this.resizeObserverConfig);\n  }\n\n  get resizeObserverConfig(): {\n    handler: SharedResizeObserverResizeHandlerInterface;\n    target: Element;\n  } {\n    return {\n      handler: this,\n      target: this.frame,\n    };\n  }\n  /** End shared observer */\n\n  get loaderTitle() {\n    return this.viewportInFullscreen ? 'Internet Archive' : '';\n  }\n\n  get readerHeightStyle(): string {\n    const calcFSHeight = `calc(100vh - ${\n      this.headerSlot?.offsetHeight || 0\n    }px)`;\n    return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';\n  }\n\n  get loadingArea() {\n    return html`\n      <div class=\"loading-area\">\n        <div class=\"loading-view\">\n          <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>\n        </div>\n      </div>\n    `;\n  }\n\n  slotChange(e: Event, type: 'header' | 'main'): void {\n    const slottedContent = (e.target as HTMLSlotElement).assignedNodes()?.[0] as HTMLElement;\n\n    this.dispatchEvent(\n      new CustomEvent('slotChange', {\n        detail: { slot: slottedContent, type },\n      })\n    );\n    this.requestUpdate();\n  }\n\n  render(): TemplateResult {\n    const displayReaderClass = this.loaded ? '' : 'hidden';\n    return html`\n      <div id=\"frame\" class=${`${this.menuClass}`}>\n        <slot\n          name=\"theater-header\"\n          @slotchange=${(e: Event) => this.slotChange(e, 'header')}\n        ></slot>\n        <div class=\"menu-and-reader\">\n          ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n          <div\n            id=\"reader\"\n            class=${displayReaderClass}\n            style=${this.readerHeightStyle}\n          >\n            ${this.renderViewport}\n          </div>\n          ${!this.loaded ? this.loadingArea : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  get noTheaterView() {\n    return html`<ia-no-theater-available\n      .identifier=${this.item?.metadata?.identifier}\n      @loadingStateUpdated=${this.loadingStateUpdated}\n    ></ia-no-theater-available>`;\n  }\n\n  get renderViewport(): TemplateResult | typeof nothing {\n    if (!this.item) {\n      return nothing;\n    }\n    if (this.itemType !== ItemType.OPEN) {\n      return this.noTheaterView;\n    }\n\n    const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n    return html`\n      <div slot=\"theater-main\" style=${slotVisibility}>\n        <slot\n          name=\"theater-main\"\n          style=${this.readerHeightStyle}\n          @slotchange=${(e: Event) => this.slotChange(e, 'main')}\n        ></slot>\n      </div>\n    `;\n  }\n\n  loadingStateUpdated(e: loadingStateUpdatedEvent): void {\n    const { loaded } = e.detail;\n    this.loaded = loaded || null;\n  }\n\n  /** Fullscreen Management */\n  manageViewportFullscreen(e: ManageFullscreenEvent): void {\n    const fullscreenStatus = !!e.detail.isFullScreen;\n    this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n    const event = new CustomEvent('fullscreenToggled', {\n      detail: e.detail,\n    }) as ManageFullscreenEvent;\n\n    this.dispatchEvent(event);\n  }\n  /** End Fullscreen Management */\n\n  /** Side menu */\n  get shouldRenderMenu(): boolean {\n    return !!this.menuContents?.length;\n  }\n\n  toggleMenu(): void {\n    this.menuOpened = !this.menuOpened;\n  }\n\n  closeMenu(): void {\n    this.menuOpened = false;\n  }\n\n  setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n    const { id } = e.detail;\n    this.openMenu = id !== this.openMenu ? id : undefined;\n  }\n\n  setMenuContents(e: SetSideMenuContentsEvent): void {\n    const updatedContents = [...e.detail];\n    this.menuContents = updatedContents;\n  }\n\n  setMenuShortcuts(e: SetSideMenuShortcutsEvent) {\n    this.menuShortcuts = [...e.detail];\n  }\n\n  /** Toggles Side Menu & Sets viewable subpanel  */\n  manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n    const { menuId, action } = e.detail;\n    if (!menuId) {\n      return;\n    }\n\n    if (action === 'open') {\n      this.openShortcut(menuId);\n    } else if (action === 'toggle') {\n      this.openMenu = menuId;\n      this.toggleMenu();\n    }\n  }\n\n  get menuToggleButton() {\n    return html`\n      <button\n        class=\"toggle-menu\"\n        @click=${this.toggleMenu}\n        title=\"Toggle theater side panels\"\n      >\n        <div>\n          <ia-icon-ellipses\n            style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n          ></ia-icon-ellipses>\n        </div>\n      </button>\n    `;\n  }\n\n  get selectedMenuId(): MenuId | '' {\n    return this.openMenu || '';\n  }\n\n  get renderSideMenu(): TemplateResult {\n    const drawerState = this.menuOpened ? '' : 'hidden';\n    return html`\n      <nav>\n        <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n        <div id=\"menu\" class=${drawerState}>\n          <ia-menu-slider\n            .menus=${this.menuContents}\n            .selectedMenu=${this.selectedMenuId}\n            @menuTypeSelected=${this.setOpenMenu}\n            @menuSliderClosed=${this.closeMenu}\n            manuallyHandleClose\n            open\n          ></ia-menu-slider>\n        </div>\n      </nav>\n    `;\n  }\n  /** End Side menu */\n\n  /** Menu Shortcuts */\n  openShortcut(selectedMenuId: MenuId = ''): void {\n    this.openMenu = selectedMenuId;\n    this.menuOpened = true;\n  }\n\n  get shortcuts(): TemplateResult {\n    const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n      if (id === 'fullscreen') {\n        return html`${icon}`;\n      }\n\n      return html`\n        <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n          ${icon}\n        </button>\n      `;\n    });\n    return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n  }\n  /** End Menu Shortcuts */\n\n  /** Misc Render */\n  get menuClass(): string {\n    const drawerState = this.menuOpened ? 'open' : '';\n    const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n    return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n  }\n\n  static get styles(): CSSResult {\n    const subnavWidth = css`var(--menuWidth, 320px)`;\n    const transitionTiming = css`var(--animationTiming, 200ms)`;\n    const transitionEffect = css`transform ${transitionTiming} ease-out`;\n    const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n    const theaterBg = css`var(--theaterBgColor, #000)`;\n\n    return css`\n      :host,\n      #frame,\n      .menu-and-reader {\n        min-height: inherit;\n        height: inherit;\n        position: relative;\n        overflow: hidden;\n        display: block;\n      }\n\n      :host,\n      #frame,\n      .menu-and-reader,\n      .loading-area,\n      .loading-view {\n        min-height: inherit;\n        height: inherit;\n      }\n\n      slot {\n        display: block;\n        overflow: hidden;\n      }\n\n      slot * {\n        display: block;\n        height: inherit;\n      }\n\n      #frame {\n        background-color: ${theaterBg};\n        color-scheme: dark;\n      }\n\n      #frame.fullscreen {\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 9;\n      }\n\n      .loading-view {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      ia-itemnav-loader {\n        display: block;\n        width: 100%;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      button {\n        cursor: pointer;\n        padding: 0;\n        border: 0;\n      }\n\n      button:focus,\n      button:active {\n        outline: none;\n      }\n\n      .menu-and-reader {\n        position: relative;\n      }\n\n      nav button {\n        background: none;\n      }\n\n      nav .minimized {\n        background: rgba(0, 0, 0, 0.7);\n        padding-top: 6px;\n        position: absolute;\n        width: ${menuMargin};\n        z-index: 2;\n        left: 0;\n        border-bottom-right-radius: 5%;\n      }\n\n      nav .minimized button {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin-bottom: 0.2rem;\n        margin: auto;\n        display: inline-flex;\n        vertical-align: middle;\n        -webkit-box-align: center;\n        align-items: center;\n        -webkit-box-pack: center;\n        justify-content: center;\n        width: ${menuMargin};\n        height: ${menuMargin};\n      }\n\n      nav .minimized button.toggle-menu > * {\n        border: 2px solid var(--iconStrokeColor);\n        border-radius: var(--iconWidth);\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin: auto;\n      }\n\n      ia-icon-ellipses {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n      }\n\n      #menu {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        z-index: 3;\n        overflow: hidden;\n        transform: translateX(-${subnavWidth});\n        width: ${subnavWidth};\n        transform: translateX(calc(${subnavWidth} * -1));\n        transition: ${transitionEffect};\n      }\n\n      #reader {\n        position: relative;\n        z-index: 1;\n        transform: translateX(0);\n        width: 100%;\n      }\n\n      .open.overlay #reader {\n        transition: none;\n      }\n\n      .open #menu {\n        width: ${subnavWidth};\n        transform: translateX(0);\n        transition: ${transitionEffect};\n      }\n\n      .open.shift #reader {\n        width: calc(100% - var(--menuWidth));\n        float: right;\n        transition: ${transitionEffect};\n      }\n    `;\n  }\n}\n"]}

package/dist/test/ia-item-navigator.test.js

@@ -3,7 +3,6 @@ import { html, fixture, expect } from '@open-wc/testing';
 import Sinon from 'sinon';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalManager } from '@internetarchive/modal-manager';
-import { ItemType } from '../src/item-navigator';
 import '../src/item-navigator';
 import '../test/book-nav-stub';
 import { ItemStub, menuProvider, shortcut } from '../test/ia-stub';
@@ -17,29 +16,6 @@ describe('ItemNavigator', () => {
             const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
             expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-no-theater-available')).to.exist;
         });
-        it('shows <book-navigator> if `this.itemType = "bookreader"`', async () => {
-            var _a;
-            const el = await fixture(html `<ia-item-navigator
-          .itemType=${ItemType.BOOK}
-          .item=${new ItemStub()}
-          .modal=${new ModalManager()}
-          .sharedObserver=${new SharedResizeObserver()}
-        ></ia-item-navigator>`);
-            await el.updateComplete;
-            el.toggleMenu();
-            await el.updateComplete;
-            const bookNavigator = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('book-navigator');
-            await bookNavigator.updateComplete;
-            console.log('132234234324324324');
-            // TODO: add BookNavigator type & import via @internetarchive/bookreader
-            // For now, let's check that the BookNavigator element and its properties exist w/ stub
-            expect(bookNavigator).to.exist;
-            expect(bookNavigator === null || bookNavigator === void 0 ? void 0 : bookNavigator.modal).to.exist;
-            expect(bookNavigator === null || bookNavigator === void 0 ? void 0 : bookNavigator.baseHost).to.exist;
-            expect(bookNavigator === null || bookNavigator === void 0 ? void 0 : bookNavigator.signedIn).to.be.null;
-            expect(bookNavigator === null || bookNavigator === void 0 ? void 0 : bookNavigator.sharedObserver).to.exist;
-            expect(bookNavigator === null || bookNavigator === void 0 ? void 0 : bookNavigator.sideMenuOpen).to.exist;
-        });
     });
     describe('`el.loaded`', () => {
         it('toggles the spinning loader', async () => {
@@ -51,7 +27,7 @@ describe('ItemNavigator', () => {
         it('hides reader section if `!loaded`', async () => {
             var _a, _b;
             const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
-            expect((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#reader')) === null || _b === void 0 ? void 0 : _b.getAttribute('class')).to.contain('hide');
+            expect((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#reader')) === null || _b === void 0 ? void 0 : _b.getAttribute('class')).to.contain('hidden');
         });
         it('shows reader when `loaded` ', async () => {
             var _a, _b;
@@ -90,13 +66,13 @@ describe('ItemNavigator', () => {
             expect(el.sharedObserver).to.equal(sharedObserver);
             expect(typeof el.handleResize).to.equal('function');
         });
-        it('freshly registers handler', async () => {
+        it('freshly registers handlers', async () => {
             const sharedObserver = new SharedResizeObserver();
             const addObserverSpy = Sinon.spy(sharedObserver, 'addObserver');
             await fixture(html `<ia-item-navigator
           .sharedObserver=${sharedObserver}
         ></ia-item-navigator>`);
-            expect(addObserverSpy.callCount).to.equal(1);
+            expect(addObserverSpy.callCount).to.equal(2);
         });
         it('removes handler when component disconnects', async () => {
             const sharedObserver = new SharedResizeObserver();

package/dist/test/ia-item-navigator.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-item-navigator.test.js","sourceRoot":"","sources":["../../test/ia-item-navigator.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable camelcase */\nimport { html, fixture, expect } from '@open-wc/testing';\nimport Sinon from 'sinon';\n\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport { CustomTheaterInterface } from '../src/interfaces/custom-theater-interface';\nimport { ItemNavigator, ItemType } from '../src/item-navigator';\nimport '../src/item-navigator';\n\nimport '../test/book-nav-stub';\nimport { ItemStub, menuProvider, shortcut } from '../test/ia-stub';\nimport {\n  ManageFullscreenEvent,\n  ToggleSideMenuOpenEvent,\n  SetSideMenuContentsEvent,\n  SetSideMenuShortcutsEvent,\n  ToggleSidePanelOpenEvent,\n} from '../src/interfaces/event-interfaces';\n\nafterEach(() => {\n  Sinon.restore();\n});\n\ndescribe('ItemNavigator', () => {\n  describe('Theaters', () => {\n    it('shows <ia-no-theater-available> by default', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n      expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.exist;\n    });\n\n    it('shows <book-navigator> if `this.itemType = \"bookreader\"`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator\n          .itemType=${ItemType.BOOK}\n          .item=${new ItemStub()}\n          .modal=${new ModalManager()}\n          .sharedObserver=${new SharedResizeObserver()}\n        ></ia-item-navigator>`\n      );\n\n      await el.updateComplete;\n\n      el.toggleMenu();\n      await el.updateComplete;\n\n      const bookNavigator = el.shadowRoot?.querySelector(\n        'book-navigator'\n      ) as CustomTheaterInterface;\n      await bookNavigator.updateComplete;\n\n      console.log('132234234324324324');\n      // TODO: add BookNavigator type & import via @internetarchive/bookreader\n      // For now, let's check that the BookNavigator element and its properties exist w/ stub\n      expect(bookNavigator).to.exist;\n      expect(bookNavigator?.modal).to.exist;\n      expect(bookNavigator?.baseHost).to.exist;\n      expect(bookNavigator?.signedIn).to.be.null;\n      expect(bookNavigator?.sharedObserver).to.exist;\n      expect(bookNavigator?.sideMenuOpen).to.exist;\n    });\n  });\n  describe('`el.loaded`', () => {\n    it('toggles the spinning loader', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator></ia-item-navigator>`\n      );\n      expect(el.loaded).to.be.null; // initial load\n      expect(el.shadowRoot?.querySelector('ia-itemnav-loader')).to.exist;\n    });\n    it('hides reader section if `!loaded`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator></ia-item-navigator>`\n      );\n\n      expect(\n        el.shadowRoot?.querySelector('#reader')?.getAttribute('class')\n      ).to.contain('hide');\n    });\n    it('shows reader when `loaded` ', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n\n      const mainTheaterSection = el.shadowRoot?.querySelector('#reader');\n      expect(mainTheaterSection?.classList.contains('hide')).to.be.false;\n      expect(el.loaded).to.be.true;\n      // `loaded` property is reflected as DOM attribute\n      expect(el.hasAttribute('loaded')).to.equal(true);\n      expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.exist;\n    });\n    it('listens to `@loadingStateUpdated` to update `loaded`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator></ia-item-navigator>`\n      );\n\n      await el.updateComplete;\n      const spy = Sinon.spy();\n      el.loadingStateUpdated = spy;\n      el.loaded = null;\n      await el.updateComplete;\n      // check base properties\n      expect(el.loaded).to.equal(null);\n      expect(el.item).to.be.undefined;\n\n      // hydrate item\n      el.item = new ItemStub();\n      await el.updateComplete;\n\n      // spy fires\n      expect(spy.called).to.equal(true);\n      expect(spy.callCount).to.equal(1);\n    });\n  });\n\n  describe('`el.sharedObserver`', () => {\n    it('uses one', async () => {\n      const sharedObserver = new SharedResizeObserver();\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator\n          .sharedObserver=${sharedObserver}\n        ></ia-item-navigator>`\n      );\n\n      expect(el.sharedObserver).to.equal(sharedObserver);\n      expect(typeof el.handleResize).to.equal('function');\n    });\n    it('freshly registers handler', async () => {\n      const sharedObserver = new SharedResizeObserver();\n      const addObserverSpy = Sinon.spy(sharedObserver, 'addObserver');\n\n      await fixture<ItemNavigator>(\n        html`<ia-item-navigator\n          .sharedObserver=${sharedObserver}\n        ></ia-item-navigator>`\n      );\n\n      expect(addObserverSpy.callCount).to.equal(1);\n    });\n    it('removes handler when component disconnects', async () => {\n      const sharedObserver = new SharedResizeObserver();\n      const removeObserverSpy = Sinon.spy(sharedObserver, 'removeObserver');\n\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator\n          .sharedObserver=${sharedObserver}\n        ></ia-item-navigator>`\n      );\n\n      el.disconnectedCallback();\n      await el.updateComplete;\n\n      expect(removeObserverSpy.callCount).to.equal(1);\n    });\n    it('sets menu to overlay if container width is <= 600px', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator></ia-item-navigator>`\n      );\n\n      expect(el.openMenuState).to.equal('shift'); // as starting point\n\n      const overlaySize = {\n        contentRect: { width: 600 },\n      } as ResizeObserverEntry;\n      el.handleResize(overlaySize);\n      await el.updateComplete;\n\n      expect(el.openMenuState).to.equal('overlay'); // changes open menu display to an overlay\n\n      const shiftSize = {\n        contentRect: { width: 601 },\n      } as ResizeObserverEntry;\n      el.handleResize(shiftSize);\n      await el.updateComplete;\n\n      expect(el.openMenuState).to.equal('shift');\n    });\n  });\n\n  describe('`el.modal`', () => {\n    it('uses one', async () => {\n      const modal = new ModalManager();\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .modal=${modal}></ia-item-navigator>`\n      );\n      expect(el.modal).to.equal(modal);\n    });\n  });\n\n  describe('full browser window immersion \"fullscreen\"', () => {\n    it('creates reflected attribute `viewportinfullscreen`', async () => {\n      /** to help with external styling adjustmnents */\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator></ia-item-navigator>`\n      );\n      expect(el.getAttribute('viewportinfullscreen')).to.be.null;\n\n      el.viewportInFullscreen = true;\n      await el.updateComplete;\n\n      expect(el.getAttribute('viewportinfullscreen')).to.exist;\n    });\n    it('@ViewportInFullScreen', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator></ia-item-navigator>`\n      );\n      expect(el.viewportInFullscreen).to.be.null;\n\n      const yesFullscreenEvent = {\n        detail: {\n          isFullScreen: true,\n        },\n      } as ManageFullscreenEvent;\n      el.manageViewportFullscreen(yesFullscreenEvent);\n      await el.updateComplete;\n      expect(el.viewportInFullscreen).to.be.true;\n\n      const noFullscreenEvent = {\n        detail: {\n          isFullScreen: false,\n        },\n      } as ManageFullscreenEvent;\n      el.manageViewportFullscreen(noFullscreenEvent);\n      await el.updateComplete;\n      expect(el.viewportInFullscreen).to.be.null;\n    });\n  });\n\n  /* Side menu & shortcuts tests */\n  describe('el.menuOpened', () => {\n    it('toggles side menu open', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n\n      el.menuContents = [menuProvider];\n      await el.updateComplete;\n\n      const nav = el.shadowRoot?.querySelector('nav');\n\n      expect(nav?.querySelector('#menu')).to.exist;\n      // side menu starts closed\n      expect(el.menuOpened).to.be.false;\n      expect(nav?.querySelector('#menu')?.getAttribute('class')).to.contain(\n        'hidden'\n      );\n\n      // let's open menu\n      el.toggleMenu();\n      await el.updateComplete;\n\n      expect(el.menuOpened).to.be.true;\n      expect(nav?.querySelector('#menu')?.getAttribute('class')).to.not.contain(\n        'hidden'\n      );\n    });\n\n    it('opens menu shortcut with `@manageSideMenuEvents`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n      const detail = {\n        menuId: 'fullscreen',\n        action: 'open',\n      };\n\n      el.menuContents = [menuProvider];\n      await el.updateComplete;\n      const frame = el.shadowRoot?.querySelector('#frame');\n      // default menu open behavior is to side menu open, not overlay\n      expect(frame?.getAttribute('class')).to.contain('shift');\n\n      expect(el.menuOpened).to.be.false;\n      expect(el.openMenu).to.be.undefined;\n      expect(frame?.getAttribute('class')).to.not.contain('open');\n\n      const event = new CustomEvent('updateSideMenu', {\n        detail,\n      }) as ToggleSideMenuOpenEvent;\n      el.manageSideMenuEvents(event);\n      await el.updateComplete;\n\n      expect(el.shouldRenderMenu).to.be.true;\n      expect(el.menuOpened).to.be.true;\n      expect(el.openMenu).to.equal(detail.menuId);\n\n      expect(frame?.getAttribute('class')).to.contain('open');\n\n      // no menu provided\n      const openShortcutSpy = Sinon.spy(el, 'openShortcut');\n      const toggleMenuSpy = Sinon.spy(el, 'toggleMenu');\n\n      const noMenuProvidedEvent = new CustomEvent('updateSideMenu', {\n        detail: {},\n      }) as any;\n      el.manageSideMenuEvents(noMenuProvidedEvent);\n      await el.updateComplete;\n\n      expect(openShortcutSpy.called).to.be.false;\n      expect(toggleMenuSpy.called).to.be.false;\n\n      // toggle menu\n      const toggleMenuEvent = new CustomEvent('updateSideMenu', {\n        detail: { action: 'toggle', menuId: 'fullscreen' },\n      }) as any;\n      el.manageSideMenuEvents(toggleMenuEvent);\n      await el.updateComplete;\n\n      expect(toggleMenuSpy.callCount).to.equal(1);\n\n      // open menu\n      const openMenuEvent = new CustomEvent('updateSideMenu', {\n        detail: { action: 'open', menuId: 'fullscreen' },\n      }) as any;\n      el.manageSideMenuEvents(openMenuEvent);\n      await el.updateComplete;\n\n      expect(openShortcutSpy.callCount).to.equal(1);\n    });\n  });\n\n  describe('el.menuContents', () => {\n    it('draws side menu when populated', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n\n      el.menuContents = [menuProvider];\n      await el.updateComplete;\n      expect(el.menuContents.length).to.exist;\n      expect(el.shouldRenderMenu).to.be.true;\n\n      const nav = el.shadowRoot?.querySelector('nav');\n      expect(nav).to.exist;\n\n      const menuSlider = nav?.querySelector('ia-menu-slider');\n      expect(menuSlider).to.exist;\n      expect(menuSlider?.getAttribute('manuallyhandleclose')).to.exist;\n      expect(menuSlider?.getAttribute('open')).to.exist;\n    });\n  });\n\n  describe('`el.menuShortcuts`', () => {\n    it('displays shortcut & toggle side menu button', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n\n      const anotherShortcut = {\n        id: 'foo',\n        icon: html`<i class=\"foo-shortcut\"></i>`,\n      };\n      el.menuContents = [menuProvider];\n      el.menuShortcuts = [shortcut, anotherShortcut];\n      await el.updateComplete;\n\n      const nav = el.shadowRoot?.querySelector('nav');\n\n      const shortcutsContainer = nav?.querySelector('.shortcuts');\n      expect(el.menuShortcuts.length).to.exist;\n      expect(nav).to.exist;\n      expect(shortcutsContainer).to.exist;\n      expect(shortcutsContainer?.querySelector('i.fullscreen-test')).to.exist;\n      expect(shortcutsContainer?.querySelector('button.shortcut.foo')).to.exist;\n      expect(nav?.querySelector('.toggle-menu')).to.exist;\n    });\n  });\n\n  describe('Menu events', () => {\n    it('`el.setMenuShortcuts`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n      expect(el.menuShortcuts.length).to.equal(0);\n\n      const menuShortcuts = [shortcut];\n\n      el.setMenuShortcuts({\n        detail: menuShortcuts,\n      } as SetSideMenuShortcutsEvent);\n      await el.updateComplete;\n\n      expect(el.menuShortcuts.length).to.equal(1);\n    });\n    it('`el.setMenuContents`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n      expect(el.menuContents.length).to.equal(0);\n\n      el.setMenuShortcuts({\n        detail: [menuProvider],\n      } as SetSideMenuContentsEvent);\n      await el.updateComplete;\n\n      expect(el.menuShortcuts.length).to.equal(1);\n    });\n    it('`el.setOpenMenu`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n\n      el.setOpenMenu({\n        detail: { id: 'foo' },\n      } as ToggleSidePanelOpenEvent);\n      await el.updateComplete;\n\n      expect(el.openMenu).to.equal('foo');\n      expect(el.selectedMenuId).to.equal('foo');\n\n      // toggles it off\n      el.setOpenMenu({\n        detail: { id: 'foo' },\n      } as ToggleSidePanelOpenEvent);\n      await el.updateComplete;\n\n      expect(el.openMenu).to.be.undefined;\n      expect(el.selectedMenuId).to.equal('');\n    });\n    it('`el.closeMenu`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n\n      el.menuOpened = true;\n      await el.updateComplete;\n\n      expect(el.menuOpened).to.be.true;\n\n      el.closeMenu();\n      await el.updateComplete;\n\n      expect(el.menuOpened).to.be.false;\n    });\n  });\n});\n"]}
+{"version":3,"file":"ia-item-navigator.test.js","sourceRoot":"","sources":["../../test/ia-item-navigator.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable camelcase */\nimport { html, fixture, expect } from '@open-wc/testing';\nimport Sinon from 'sinon';\n\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport { ItemNavigator } from '../src/item-navigator';\nimport '../src/item-navigator';\n\nimport '../test/book-nav-stub';\nimport { ItemStub, menuProvider, shortcut } from '../test/ia-stub';\nimport {\n  ManageFullscreenEvent,\n  ToggleSideMenuOpenEvent,\n  SetSideMenuContentsEvent,\n  SetSideMenuShortcutsEvent,\n  ToggleSidePanelOpenEvent,\n} from '../src/interfaces/event-interfaces';\n\nafterEach(() => {\n  Sinon.restore();\n});\n\ndescribe('ItemNavigator', () => {\n  describe('Theaters', () => {\n    it('shows <ia-no-theater-available> by default', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n      expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.exist;\n    });\n  });\n  describe('`el.loaded`', () => {\n    it('toggles the spinning loader', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator></ia-item-navigator>`\n      );\n      expect(el.loaded).to.be.null; // initial load\n      expect(el.shadowRoot?.querySelector('ia-itemnav-loader')).to.exist;\n    });\n    it('hides reader section if `!loaded`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator></ia-item-navigator>`\n      );\n\n      expect(\n        el.shadowRoot?.querySelector('#reader')?.getAttribute('class')\n      ).to.contain('hidden');\n    });\n    it('shows reader when `loaded` ', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n\n      const mainTheaterSection = el.shadowRoot?.querySelector('#reader');\n      expect(mainTheaterSection?.classList.contains('hide')).to.be.false;\n      expect(el.loaded).to.be.true;\n      // `loaded` property is reflected as DOM attribute\n      expect(el.hasAttribute('loaded')).to.equal(true);\n      expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.exist;\n    });\n    it('listens to `@loadingStateUpdated` to update `loaded`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator></ia-item-navigator>`\n      );\n\n      await el.updateComplete;\n      const spy = Sinon.spy();\n      el.loadingStateUpdated = spy;\n      el.loaded = null;\n      await el.updateComplete;\n      // check base properties\n      expect(el.loaded).to.equal(null);\n      expect(el.item).to.be.undefined;\n\n      // hydrate item\n      el.item = new ItemStub();\n      await el.updateComplete;\n\n      // spy fires\n      expect(spy.called).to.equal(true);\n      expect(spy.callCount).to.equal(1);\n    });\n  });\n\n  describe('`el.sharedObserver`', () => {\n    it('uses one', async () => {\n      const sharedObserver = new SharedResizeObserver();\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator\n          .sharedObserver=${sharedObserver}\n        ></ia-item-navigator>`\n      );\n\n      expect(el.sharedObserver).to.equal(sharedObserver);\n      expect(typeof el.handleResize).to.equal('function');\n    });\n    it('freshly registers handlers', async () => {\n      const sharedObserver = new SharedResizeObserver();\n      const addObserverSpy = Sinon.spy(sharedObserver, 'addObserver');\n\n      await fixture<ItemNavigator>(\n        html`<ia-item-navigator\n          .sharedObserver=${sharedObserver}\n        ></ia-item-navigator>`\n      );\n\n      expect(addObserverSpy.callCount).to.equal(2);\n    });\n    it('removes handler when component disconnects', async () => {\n      const sharedObserver = new SharedResizeObserver();\n      const removeObserverSpy = Sinon.spy(sharedObserver, 'removeObserver');\n\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator\n          .sharedObserver=${sharedObserver}\n        ></ia-item-navigator>`\n      );\n\n      el.disconnectedCallback();\n      await el.updateComplete;\n\n      expect(removeObserverSpy.callCount).to.equal(1);\n    });\n    it('sets menu to overlay if container width is <= 600px', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator></ia-item-navigator>`\n      );\n\n      expect(el.openMenuState).to.equal('shift'); // as starting point\n\n      const overlaySize = {\n        contentRect: { width: 600 },\n      } as ResizeObserverEntry;\n      el.handleResize(overlaySize);\n      await el.updateComplete;\n\n      expect(el.openMenuState).to.equal('overlay'); // changes open menu display to an overlay\n\n      const shiftSize = {\n        contentRect: { width: 601 },\n      } as ResizeObserverEntry;\n      el.handleResize(shiftSize);\n      await el.updateComplete;\n\n      expect(el.openMenuState).to.equal('shift');\n    });\n  });\n\n  describe('`el.modal`', () => {\n    it('uses one', async () => {\n      const modal = new ModalManager();\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .modal=${modal}></ia-item-navigator>`\n      );\n      expect(el.modal).to.equal(modal);\n    });\n  });\n\n  describe('full browser window immersion \"fullscreen\"', () => {\n    it('creates reflected attribute `viewportinfullscreen`', async () => {\n      /** to help with external styling adjustmnents */\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator></ia-item-navigator>`\n      );\n      expect(el.getAttribute('viewportinfullscreen')).to.be.null;\n\n      el.viewportInFullscreen = true;\n      await el.updateComplete;\n\n      expect(el.getAttribute('viewportinfullscreen')).to.exist;\n    });\n    it('@ViewportInFullScreen', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator></ia-item-navigator>`\n      );\n      expect(el.viewportInFullscreen).to.be.null;\n\n      const yesFullscreenEvent = {\n        detail: {\n          isFullScreen: true,\n        },\n      } as ManageFullscreenEvent;\n      el.manageViewportFullscreen(yesFullscreenEvent);\n      await el.updateComplete;\n      expect(el.viewportInFullscreen).to.be.true;\n\n      const noFullscreenEvent = {\n        detail: {\n          isFullScreen: false,\n        },\n      } as ManageFullscreenEvent;\n      el.manageViewportFullscreen(noFullscreenEvent);\n      await el.updateComplete;\n      expect(el.viewportInFullscreen).to.be.null;\n    });\n  });\n\n  /* Side menu & shortcuts tests */\n  describe('el.menuOpened', () => {\n    it('toggles side menu open', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n\n      el.menuContents = [menuProvider];\n      await el.updateComplete;\n\n      const nav = el.shadowRoot?.querySelector('nav');\n\n      expect(nav?.querySelector('#menu')).to.exist;\n      // side menu starts closed\n      expect(el.menuOpened).to.be.false;\n      expect(nav?.querySelector('#menu')?.getAttribute('class')).to.contain(\n        'hidden'\n      );\n\n      // let's open menu\n      el.toggleMenu();\n      await el.updateComplete;\n\n      expect(el.menuOpened).to.be.true;\n      expect(nav?.querySelector('#menu')?.getAttribute('class')).to.not.contain(\n        'hidden'\n      );\n    });\n\n    it('opens menu shortcut with `@manageSideMenuEvents`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n      const detail = {\n        menuId: 'fullscreen',\n        action: 'open',\n      };\n\n      el.menuContents = [menuProvider];\n      await el.updateComplete;\n      const frame = el.shadowRoot?.querySelector('#frame');\n      // default menu open behavior is to side menu open, not overlay\n      expect(frame?.getAttribute('class')).to.contain('shift');\n\n      expect(el.menuOpened).to.be.false;\n      expect(el.openMenu).to.be.undefined;\n      expect(frame?.getAttribute('class')).to.not.contain('open');\n\n      const event = new CustomEvent('updateSideMenu', {\n        detail,\n      }) as ToggleSideMenuOpenEvent;\n      el.manageSideMenuEvents(event);\n      await el.updateComplete;\n\n      expect(el.shouldRenderMenu).to.be.true;\n      expect(el.menuOpened).to.be.true;\n      expect(el.openMenu).to.equal(detail.menuId);\n\n      expect(frame?.getAttribute('class')).to.contain('open');\n\n      // no menu provided\n      const openShortcutSpy = Sinon.spy(el, 'openShortcut');\n      const toggleMenuSpy = Sinon.spy(el, 'toggleMenu');\n\n      const noMenuProvidedEvent = new CustomEvent('updateSideMenu', {\n        detail: {},\n      }) as any;\n      el.manageSideMenuEvents(noMenuProvidedEvent);\n      await el.updateComplete;\n\n      expect(openShortcutSpy.called).to.be.false;\n      expect(toggleMenuSpy.called).to.be.false;\n\n      // toggle menu\n      const toggleMenuEvent = new CustomEvent('updateSideMenu', {\n        detail: { action: 'toggle', menuId: 'fullscreen' },\n      }) as any;\n      el.manageSideMenuEvents(toggleMenuEvent);\n      await el.updateComplete;\n\n      expect(toggleMenuSpy.callCount).to.equal(1);\n\n      // open menu\n      const openMenuEvent = new CustomEvent('updateSideMenu', {\n        detail: { action: 'open', menuId: 'fullscreen' },\n      }) as any;\n      el.manageSideMenuEvents(openMenuEvent);\n      await el.updateComplete;\n\n      expect(openShortcutSpy.callCount).to.equal(1);\n    });\n  });\n\n  describe('el.menuContents', () => {\n    it('draws side menu when populated', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n\n      el.menuContents = [menuProvider];\n      await el.updateComplete;\n      expect(el.menuContents.length).to.exist;\n      expect(el.shouldRenderMenu).to.be.true;\n\n      const nav = el.shadowRoot?.querySelector('nav');\n      expect(nav).to.exist;\n\n      const menuSlider = nav?.querySelector('ia-menu-slider');\n      expect(menuSlider).to.exist;\n      expect(menuSlider?.getAttribute('manuallyhandleclose')).to.exist;\n      expect(menuSlider?.getAttribute('open')).to.exist;\n    });\n  });\n\n  describe('`el.menuShortcuts`', () => {\n    it('displays shortcut & toggle side menu button', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n\n      const anotherShortcut = {\n        id: 'foo',\n        icon: html`<i class=\"foo-shortcut\"></i>`,\n      };\n      el.menuContents = [menuProvider];\n      el.menuShortcuts = [shortcut, anotherShortcut];\n      await el.updateComplete;\n\n      const nav = el.shadowRoot?.querySelector('nav');\n\n      const shortcutsContainer = nav?.querySelector('.shortcuts');\n      expect(el.menuShortcuts.length).to.exist;\n      expect(nav).to.exist;\n      expect(shortcutsContainer).to.exist;\n      expect(shortcutsContainer?.querySelector('i.fullscreen-test')).to.exist;\n      expect(shortcutsContainer?.querySelector('button.shortcut.foo')).to.exist;\n      expect(nav?.querySelector('.toggle-menu')).to.exist;\n    });\n  });\n\n  describe('Menu events', () => {\n    it('`el.setMenuShortcuts`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n      expect(el.menuShortcuts.length).to.equal(0);\n\n      const menuShortcuts = [shortcut];\n\n      el.setMenuShortcuts({\n        detail: menuShortcuts,\n      } as SetSideMenuShortcutsEvent);\n      await el.updateComplete;\n\n      expect(el.menuShortcuts.length).to.equal(1);\n    });\n    it('`el.setMenuContents`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n      expect(el.menuContents.length).to.equal(0);\n\n      el.setMenuShortcuts({\n        detail: [menuProvider],\n      } as SetSideMenuContentsEvent);\n      await el.updateComplete;\n\n      expect(el.menuShortcuts.length).to.equal(1);\n    });\n    it('`el.setOpenMenu`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n\n      el.setOpenMenu({\n        detail: { id: 'foo' },\n      } as ToggleSidePanelOpenEvent);\n      await el.updateComplete;\n\n      expect(el.openMenu).to.equal('foo');\n      expect(el.selectedMenuId).to.equal('foo');\n\n      // toggles it off\n      el.setOpenMenu({\n        detail: { id: 'foo' },\n      } as ToggleSidePanelOpenEvent);\n      await el.updateComplete;\n\n      expect(el.openMenu).to.be.undefined;\n      expect(el.selectedMenuId).to.equal('');\n    });\n    it('`el.closeMenu`', async () => {\n      const el = await fixture<ItemNavigator>(\n        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`\n      );\n\n      el.menuOpened = true;\n      await el.updateComplete;\n\n      expect(el.menuOpened).to.be.true;\n\n      el.closeMenu();\n      await el.updateComplete;\n\n      expect(el.menuOpened).to.be.false;\n    });\n  });\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-item-navigator",
-  "version": "0.0.2",
+  "version": "0.0.4-2",
   "description": "Internet Archive's Item Navigator, visually eplore an item's contents.",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -21,13 +21,12 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@internetarchive/ia-menu-slider": "^1.1.1",
-    "@internetarchive/ia-sharing-options": "^0.1.3-alpha2",
+    "@internetarchive/ia-menu-slider": "^1.1.2",
+    "@internetarchive/ia-sharing-options": "^0.1.4",
     "@internetarchive/icon-ellipses": "^1.1.3",
     "@internetarchive/icon-share": "^1.1.3",
     "@internetarchive/icon-visual-adjustment": "^1.1.3",
     "@internetarchive/modal-manager": "^0.1.0",
-    "@internetarchive/promised-singleton": "^0.3.0-alpha.1",
     "@internetarchive/search-service": "^0.1.2",
     "@internetarchive/shared-resize-observer": "^0.0.1",
     "@types/resize-observer-browser": "^0.1.6",

package/src/item-navigator.ts

@@ -38,7 +38,7 @@ import {
 import './no-theater-available';
 
 export enum ItemType {
-  BOOK = 'bookreader',
+  OPEN = 'open',
 }
 @customElement('ia-item-navigator')
 export class ItemNavigator
@@ -92,7 +92,9 @@ export class ItemNavigator
 
   @query('#frame') private frame!: HTMLDivElement;
 
-  @query('slot[name="theater-header"]') private headerSlot!: HTMLDivElement;
+  @query('slot[name="theater-header"]') private headerSlot!: HTMLSlotElement;
+
+  @query('slot[name="theater-main"]') private mainSlot!: HTMLSlotElement;
 
   disconnectedCallback() {
     this.removeResizeObserver();
@@ -118,6 +120,16 @@ export class ItemNavigator
 
   private setResizeObserver(): void {
     this.sharedObserver?.addObserver(this.resizeObserverConfig);
+    this.sharedObserver?.addObserver({
+      target: this.headerSlot,
+      handler: {
+        handleResize: ({ contentRect }) => {
+          if (contentRect.height) {
+            this.requestUpdate();
+          }
+        },
+      },
+    });
   }
 
   private removeResizeObserver(): void {
@@ -140,7 +152,9 @@ export class ItemNavigator
   }
 
   get readerHeightStyle(): string {
-    const calcFSHeight = `calc(100vh - ${this.headerSlot?.offsetHeight}px)`;
+    const calcFSHeight = `calc(100vh - ${
+      this.headerSlot?.offsetHeight || 0
+    }px)`;
     return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
   }
 
@@ -154,13 +168,27 @@ export class ItemNavigator
     `;
   }
 
+  slotChange(e: Event, type: 'header' | 'main'): void {
+    const slottedContent = (e.target as HTMLSlotElement).assignedNodes()?.[0] as HTMLElement;
+
+    this.dispatchEvent(
+      new CustomEvent('slotChange', {
+        detail: { slot: slottedContent, type },
+      })
+    );
+    this.requestUpdate();
+  }
+
   render(): TemplateResult {
     const displayReaderClass = this.loaded ? '' : 'hidden';
     return html`
       <div id="frame" class=${`${this.menuClass}`}>
+        <slot
+          name="theater-header"
+          @slotchange=${(e: Event) => this.slotChange(e, 'header')}
+        ></slot>
         <div class="menu-and-reader">
           ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
-          <slot name="theater-header"></slot>
           <div
             id="reader"
             class=${displayReaderClass}
@@ -181,44 +209,24 @@ export class ItemNavigator
     ></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}
-        .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}
-      >
-        <div slot="theater-main" style=${slotVisibility}>
-          ${this.theaterSlot}
-        </div>
-      </book-navigator>
-    `;
-  }
-
   get renderViewport(): TemplateResult | typeof nothing {
     if (!this.item) {
       return nothing;
     }
-    if (this.itemType === ItemType.BOOK) {
-      return this.booksViewer;
+    if (this.itemType !== ItemType.OPEN) {
+      return this.noTheaterView;
     }
-    return this.noTheaterView;
+
+    const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
+    return html`
+      <div slot="theater-main" style=${slotVisibility}>
+        <slot
+          name="theater-main"
+          style=${this.readerHeightStyle}
+          @slotchange=${(e: Event) => this.slotChange(e, 'main')}
+        ></slot>
+      </div>
+    `;
   }
 
   loadingStateUpdated(e: loadingStateUpdatedEvent): void {
@@ -241,7 +249,7 @@ export class ItemNavigator
 
   /** Side menu */
   get shouldRenderMenu(): boolean {
-    return !!this.menuContents.length;
+    return !!this.menuContents?.length;
   }
 
   toggleMenu(): void {
@@ -382,6 +390,11 @@ export class ItemNavigator
         overflow: hidden;
       }
 
+      slot * {
+        display: block;
+        height: inherit;
+      }
+
       #frame {
         background-color: ${theaterBg};
         color-scheme: dark;
@@ -484,7 +497,6 @@ export class ItemNavigator
       #reader {
         position: relative;
         z-index: 1;
-        /* transition: ${transitionEffect}; */
         transform: translateX(0);
         width: 100%;
       }
@@ -499,7 +511,6 @@ export class ItemNavigator
         transition: ${transitionEffect};
       }
 
-      .open.shift slot[name='theater-header'],
       .open.shift #reader {
         width: calc(100% - var(--menuWidth));
         float: right;

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

@@ -4,8 +4,7 @@ import Sinon from 'sinon';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalManager } from '@internetarchive/modal-manager';
-import { CustomTheaterInterface } from '../src/interfaces/custom-theater-interface';
-import { ItemNavigator, ItemType } from '../src/item-navigator';
+import { ItemNavigator } from '../src/item-navigator';
 import '../src/item-navigator';
 
 import '../test/book-nav-stub';
@@ -30,37 +29,6 @@ describe('ItemNavigator', () => {
       );
       expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.exist;
     });
-
-    it('shows <book-navigator> if `this.itemType = "bookreader"`', async () => {
-      const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator
-          .itemType=${ItemType.BOOK}
-          .item=${new ItemStub()}
-          .modal=${new ModalManager()}
-          .sharedObserver=${new SharedResizeObserver()}
-        ></ia-item-navigator>`
-      );
-
-      await el.updateComplete;
-
-      el.toggleMenu();
-      await el.updateComplete;
-
-      const bookNavigator = el.shadowRoot?.querySelector(
-        'book-navigator'
-      ) as CustomTheaterInterface;
-      await bookNavigator.updateComplete;
-
-      console.log('132234234324324324');
-      // TODO: add BookNavigator type & import via @internetarchive/bookreader
-      // For now, let's check that the BookNavigator element and its properties exist w/ stub
-      expect(bookNavigator).to.exist;
-      expect(bookNavigator?.modal).to.exist;
-      expect(bookNavigator?.baseHost).to.exist;
-      expect(bookNavigator?.signedIn).to.be.null;
-      expect(bookNavigator?.sharedObserver).to.exist;
-      expect(bookNavigator?.sideMenuOpen).to.exist;
-    });
   });
   describe('`el.loaded`', () => {
     it('toggles the spinning loader', async () => {
@@ -77,7 +45,7 @@ describe('ItemNavigator', () => {
 
       expect(
         el.shadowRoot?.querySelector('#reader')?.getAttribute('class')
-      ).to.contain('hide');
+      ).to.contain('hidden');
     });
     it('shows reader when `loaded` ', async () => {
       const el = await fixture<ItemNavigator>(
@@ -127,7 +95,7 @@ describe('ItemNavigator', () => {
       expect(el.sharedObserver).to.equal(sharedObserver);
       expect(typeof el.handleResize).to.equal('function');
     });
-    it('freshly registers handler', async () => {
+    it('freshly registers handlers', async () => {
       const sharedObserver = new SharedResizeObserver();
       const addObserverSpy = Sinon.spy(sharedObserver, 'addObserver');
 
@@ -137,7 +105,7 @@ describe('ItemNavigator', () => {
         ></ia-item-navigator>`
       );
 
-      expect(addObserverSpy.callCount).to.equal(1);
+      expect(addObserverSpy.callCount).to.equal(2);
     });
     it('removes handler when component disconnects', async () => {
       const sharedObserver = new SharedResizeObserver();