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

package/README.md

@@ -1,21 +1,37 @@
-[![Build Status](https://travis-ci.com/internetarchive/iaux-your-webcomponent.svg?branch=master)](https://travis-ci.com/internetarchive/iaux-your-webcomponent) [![codecov](https://codecov.io/gh/internetarchive/iaux-your-webcomponent/branch/master/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-your-webcomponent)
+[![Build Status](https://travis-ci.com/internetarchive/iaux-item-navigator.svg?branch=master)](https://travis-ci.com/internetarchive/iaux-item-navigator) [![codecov](https://codecov.io/gh/internetarchive/iaux-item-navigator/branch/master/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-item-navigator)
 
-# Internet Archive Typescript WebComponent Template
+# Internet Archive Item Navigator - theater menu manager
 
-This is a base template for creating Typescript WebComponents. It is based off of the [Open WebComponents generator](https://open-wc.org/docs/development/generator/) with some IA-specific customizations and some development niceities.
+`<ia-item-navigator>` is a custom web component that makes an item's details theater.
+The Item Navigator helps instantiate all of the components one needs to create an item theater:
+- side menu
+- menu shortcuts
+- fullscreen management
+- receives/creates a shared resize observer
+- receives/shares a `<modal-manager>`
+- slots for custom theater & header loads
 
-## Usage
+The Item Navigator's primary responsibility is to display the side menus, shortcuts, and the theater in browser window immersion "fullscreen".
 
-1. Click the "Use this Template" button in GitHub to create a new repository based on this one.
-2. Clone your new repo and update the things below:
+The only business logic that is housed is determining which theater navigator to use given an `itemType`.
+Currently supported:
+- bookreader's `<book-navigator>`
+- no theater available
 
-### Things to update in your copy
-1. Remove this section
-2. Search for the strings `your-webcomponent` and `YourWebComponent` and those are most of the spots that need to be updated.
-3. `README.md` (this file). Update the readme in general, but also the badge URLs
-4. `package.json` Update the name and description
-5. Rename the `your-webcomponent.ts` and its associated `.test` file
-6. Update `.travis.yml` with the proper secure key. See the [Travis docs](https://blog.travis-ci.com/2014-03-13-slack-notifications/) for more information.
+## Usage
+Generic:
+```
+const iaItem = <MetadataResponse>;
+<ia-item-navigator .item=${iaItem}></ia-item-navigator>
+```
+For `<book-navigator>`:
+```
+const iaItem = <MetadataResponse>;
+<ia-item-navigator .item=${iaItem} .itemType="bookreader">
+  <div slot="theater-header"><p>foo header</p></div>
+  <div slot="theater-main"><div id="BookReader"></div></div>
+</ia-item-navigator>
+```
 
 ## Local Demo with `web-dev-server`
 ```bash
@@ -61,9 +77,3 @@ yarn run format:eslint
 ```bash
 yarn run format:prettier
 ```
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.

package/demo/app-root.ts

@@ -13,11 +13,10 @@ import {
   SearchService,
 } from '@internetarchive/search-service';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
-import '../src/item-navigator';
-// import { ItemNavigator } from '../src/item-navigator';
-
+import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/modal-manager';
-
+import { ItemNavigator } from '../src/item-navigator';
+import '../src/item-navigator';
 @customElement('app-root')
 export class AppRoot extends LitElement {
   /**
@@ -25,16 +24,18 @@ export class AppRoot extends LitElement {
    */
   @property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;
 
-  @property({ type: Object }) bookManifest = {};
-
   @property({ type: String }) encodedManifest = '';
 
-  @query('ia-item-navigator') private itemNav!: any;
+  @query('ia-item-navigator') private itemNav!: ItemNavigator;
 
-  @query('modal-manager') modalMgr!: any;
+  @query('modal-manager') modalMgr!: ModalManager;
 
   @property({ attribute: false }) sharedObserver = new SharedResizeObserver();
 
+  @property({ type: Boolean, reflect: true, attribute: true }) fullscreen:
+    | boolean
+    | null = null;
+
   firstUpdated() {
     this.fetchItemMD();
     console.log(
@@ -44,9 +45,6 @@ export class AppRoot extends LitElement {
     );
   }
 
-  /**
-   * @inheritdoc
-   */
   updated(changed: any) {
     console.log('changed', changed);
     if (changed.has('itemMD')) {
@@ -54,19 +52,6 @@ export class AppRoot extends LitElement {
     }
   }
 
-  get theaterReady(): boolean {
-    return this.modalMgr && this.sharedObserver && this.itemMD;
-  }
-
-  /**
-   * toggles attr: `<ia-item-navigator viewportinfullscreen>`
-   */
-  fullscreenCheck() {
-    if (this.showFullscreen && this.itemNav) {
-      this.itemNav.viewportInFullscreen = true;
-    }
-  }
-
   async fetchItemMD() {
     const searchService = SearchService.default;
     const mdResponse = await searchService.fetchMetadata('ux-team-books');
@@ -83,17 +68,20 @@ export class AppRoot extends LitElement {
     this.itemMD = mdResponse.success;
   }
 
+  get theaterReady(): boolean {
+    return this.modalMgr && this.sharedObserver && !!this.itemMD;
+  }
+
   get urlParams(): URLSearchParams {
     return new URLSearchParams(location.search.slice(1));
   }
 
+  /** Fullscreen */
   get showFullscreen(): boolean {
     return this.urlParams.get('view') === 'theater';
   }
 
-  /**
-   * sets url query param `view=theater` to toggle fullscreen
-   */
+  /** sets url query param `view=theater` to toggle fullscreen */
   toggleFS(): void {
     if (this.urlParams.get('view')) {
       location.search = '';
@@ -102,6 +90,16 @@ export class AppRoot extends LitElement {
     }
   }
 
+  /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
+  fullscreenCheck(): void {
+    if (this.showFullscreen && this.itemNav) {
+      this.fullscreen = true;
+      // this.itemNav.viewportInFullscreen = true;
+    }
+  }
+  /** End fullscreen */
+
+  /** Views */
   get theaterBlock(): TemplateResult {
     return html`
       <ia-item-navigator
@@ -110,6 +108,7 @@ export class AppRoot extends LitElement {
         .modal=${this.modalMgr}
         .sharedObserver=${this.sharedObserver}
         @ViewportInFullScreen=${this.toggleFS}
+        .viewportInFullscreen=${this.fullscreen}
       ></ia-item-navigator>
     `;
   }
@@ -133,6 +132,11 @@ export class AppRoot extends LitElement {
       color: #222;
     }
 
+    :host([fullscreen]) {
+      height: 100vh;
+      width: 100vw;
+    }
+
     :host,
     ia-item-navigator {
       display: block;

package/demo/index.html

@@ -58,6 +58,7 @@
 <body>
   <app-root></app-root>
   <script type="module">
+    /* eslint-disable no-restricted-globals */
     const params = new URLSearchParams(location.search.slice(1));
     if (params.get('view') === 'theater') {
       const body = document.querySelector('body');

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

@@ -1,35 +1,32 @@
 import { LitElement, TemplateResult } from 'lit-element';
 import { MetadataResponse } from '@internetarchive/search-service';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
-import '../src/item-navigator';
+import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/modal-manager';
+import '../src/item-navigator';
 export declare class AppRoot extends LitElement {
     /**
      * Example controller to connect to `<ia-item-navigator>`
      */
     itemMD: MetadataResponse | undefined;
-    bookManifest: {};
     encodedManifest: string;
     private itemNav;
-    modalMgr: any;
+    modalMgr: ModalManager;
     sharedObserver: SharedResizeObserver;
+    fullscreen: boolean | null;
     firstUpdated(): void;
-    /**
-     * @inheritdoc
-     */
     updated(changed: any): void;
-    get theaterReady(): boolean;
-    /**
-     * toggles attr: `<ia-item-navigator viewportinfullscreen>`
-     */
-    fullscreenCheck(): void;
     fetchItemMD(): Promise<void>;
+    get theaterReady(): boolean;
     get urlParams(): URLSearchParams;
+    /** Fullscreen */
     get showFullscreen(): boolean;
-    /**
-     * sets url query param `view=theater` to toggle fullscreen
-     */
+    /** sets url query param `view=theater` to toggle fullscreen */
     toggleFS(): void;
+    /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
+    fullscreenCheck(): void;
+    /** End fullscreen */
+    /** Views */
     get theaterBlock(): TemplateResult;
     get placeholder(): TemplateResult;
     render(): TemplateResult;

package/dist/demo/app-root.js

@@ -3,9 +3,8 @@ import { __decorate } from "tslib";
 import { html, css, LitElement, customElement, property, query, } from 'lit-element';
 import { SearchService, } from '@internetarchive/search-service';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
-import '../src/item-navigator';
-// import { ItemNavigator } from '../src/item-navigator';
 import '@internetarchive/modal-manager';
+import '../src/item-navigator';
 let AppRoot = class AppRoot extends LitElement {
     constructor() {
         super(...arguments);
@@ -13,34 +12,20 @@ let AppRoot = class AppRoot extends LitElement {
          * Example controller to connect to `<ia-item-navigator>`
          */
         this.itemMD = undefined;
-        this.bookManifest = {};
         this.encodedManifest = '';
         this.sharedObserver = new SharedResizeObserver();
+        this.fullscreen = null;
     }
     firstUpdated() {
         this.fetchItemMD();
         console.log('<app-root> component has loaded', this.modalMgr, this.sharedObserver);
     }
-    /**
-     * @inheritdoc
-     */
     updated(changed) {
         console.log('changed', changed);
         if (changed.has('itemMD')) {
             this.fullscreenCheck();
         }
     }
-    get theaterReady() {
-        return this.modalMgr && this.sharedObserver && this.itemMD;
-    }
-    /**
-     * toggles attr: `<ia-item-navigator viewportinfullscreen>`
-     */
-    fullscreenCheck() {
-        if (this.showFullscreen && this.itemNav) {
-            this.itemNav.viewportInFullscreen = true;
-        }
-    }
     async fetchItemMD() {
         const searchService = SearchService.default;
         const mdResponse = await searchService.fetchMetadata('ux-team-books');
@@ -52,15 +37,17 @@ let AppRoot = class AppRoot extends LitElement {
         console.log('mdResponse.success', JSON.stringify(mdResponse.success));
         this.itemMD = mdResponse.success;
     }
+    get theaterReady() {
+        return this.modalMgr && this.sharedObserver && !!this.itemMD;
+    }
     get urlParams() {
         return new URLSearchParams(location.search.slice(1));
     }
+    /** Fullscreen */
     get showFullscreen() {
         return this.urlParams.get('view') === 'theater';
     }
-    /**
-     * sets url query param `view=theater` to toggle fullscreen
-     */
+    /** sets url query param `view=theater` to toggle fullscreen */
     toggleFS() {
         if (this.urlParams.get('view')) {
             location.search = '';
@@ -69,6 +56,15 @@ let AppRoot = class AppRoot extends LitElement {
             location.search = 'view=theater';
         }
     }
+    /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
+    fullscreenCheck() {
+        if (this.showFullscreen && this.itemNav) {
+            this.fullscreen = true;
+            // this.itemNav.viewportInFullscreen = true;
+        }
+    }
+    /** End fullscreen */
+    /** Views */
     get theaterBlock() {
         return html `
       <ia-item-navigator
@@ -77,6 +73,7 @@ let AppRoot = class AppRoot extends LitElement {
         .modal=${this.modalMgr}
         .sharedObserver=${this.sharedObserver}
         @ViewportInFullScreen=${this.toggleFS}
+        .viewportInFullscreen=${this.fullscreen}
       ></ia-item-navigator>
     `;
     }
@@ -98,6 +95,11 @@ AppRoot.styles = css `
       color: #222;
     }
 
+    :host([fullscreen]) {
+      height: 100vh;
+      width: 100vw;
+    }
+
     :host,
     ia-item-navigator {
       display: block;
@@ -124,9 +126,6 @@ AppRoot.styles = css `
 __decorate([
     property({ type: Object })
 ], AppRoot.prototype, "itemMD", void 0);
-__decorate([
-    property({ type: Object })
-], AppRoot.prototype, "bookManifest", void 0);
 __decorate([
     property({ type: String })
 ], AppRoot.prototype, "encodedManifest", void 0);
@@ -139,6 +138,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], AppRoot.prototype, "sharedObserver", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], AppRoot.prototype, "fullscreen", 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 '../src/item-navigator';\n// import { ItemNavigator } from '../src/item-navigator';\n\nimport '@internetarchive/modal-manager';\n\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: Object }) bookManifest = {};\n\n  @property({ type: String }) encodedManifest = '';\n\n  @query('ia-item-navigator') private itemNav!: any;\n\n  @query('modal-manager') modalMgr!: any;\n\n  @property({ attribute: false }) sharedObserver = new SharedResizeObserver();\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  /**\n   * @inheritdoc\n   */\n  updated(changed: any) {\n    console.log('changed', changed);\n    if (changed.has('itemMD')) {\n      this.fullscreenCheck();\n    }\n  }\n\n  get theaterReady(): boolean {\n    return this.modalMgr && this.sharedObserver && this.itemMD;\n  }\n\n  /**\n   * toggles attr: `<ia-item-navigator viewportinfullscreen>`\n   */\n  fullscreenCheck() {\n    if (this.showFullscreen && this.itemNav) {\n      this.itemNav.viewportInFullscreen = true;\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 urlParams(): URLSearchParams {\n    return new URLSearchParams(location.search.slice(1));\n  }\n\n  get showFullscreen(): boolean {\n    return this.urlParams.get('view') === 'theater';\n  }\n\n  /**\n   * sets url query param `view=theater` to toggle fullscreen\n   */\n  toggleFS(): void {\n    if (this.urlParams.get('view')) {\n      location.search = '';\n    } else {\n      location.search = 'view=theater';\n    }\n  }\n\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      ></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,\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":";AAAA,0CAA0C;AAC1C,OAAO,EACL,IAAI,EACJ,GAAG,EACH,UAAU,EACV,aAAa,EACb,QAAQ,EACR,KAAK,GAEN,MAAM,aAAa,CAAC;AACrB,OAAO,EAEL,aAAa,GACd,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAE/E,OAAO,gCAAgC,CAAC;AAExC,OAAO,uBAAuB,CAAC;AAE/B,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QACE;;WAEG;QACyB,WAAM,GAAiC,SAAS,CAAC;QAEjD,oBAAe,GAAG,EAAE,CAAC;QAMjB,mBAAc,GAAG,IAAI,oBAAoB,EAAE,CAAC;QAEf,eAAU,GAE5D,IAAI,CAAC;IA8HlB,CAAC;IA5HC,YAAY;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,OAAO,CAAC,GAAG,CACT,iCAAiC,EACjC,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,cAAc,CACpB,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAY;QAClB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAChC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;IACH,CAAC;IAED,KAAK,CAAC,WAAW;QACf,MAAM,aAAa,GAAG,aAAa,CAAC,OAAO,CAAC;QAC5C,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAEtE,IAAI,UAAU,CAAC,KAAK,EAAE;YACpB,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;YACjD,MAAc,CAAC,OAAO,CACrB,gEAAgE,CACjE,CAAC;YACF,OAAO;SACR;QAED,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;IACnC,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;IAC/D,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,iBAAiB;IACjB,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAClD,CAAC;IAED,+DAA+D;IAC/D,QAAQ;QACN,IAAI,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC9B,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC;SACtB;aAAM;YACL,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;SAClC;IACH,CAAC;IAED,+DAA+D;IAC/D,eAAe;QACb,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,EAAE;YACvC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,4CAA4C;SAC7C;IACH,CAAC;IACD,qBAAqB;IAErB,YAAY;IACZ,IAAI,YAAY;QACd,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,MAAM;iBACV,IAAI,CAAC,QAAQ;0BACJ,IAAI,CAAC,cAAc;gCACb,IAAI,CAAC,QAAQ;gCACb,IAAI,CAAC,UAAU;;KAE1C,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA,iDAAiD,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;QACzE,OAAO,IAAI,CAAA;;QAEP,OAAO;;KAEV,CAAC;IACJ,CAAC;CAoCF,CAAA;AAlCQ,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiClB,CAAC;AAzI0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAkD;AAEjD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AAErB;IAA3B,KAAK,CAAC,mBAAmB,CAAC;wCAAiC;AAEpC;IAAvB,KAAK,CAAC,eAAe,CAAC;yCAAyB;AAEhB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CAA6C;AAEf;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;2CAE5C;AAhBL,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA8InB;SA9IY,OAAO","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"]}

package/dist/src/interfaces/menu-interfaces.d.ts

@@ -1,12 +1,13 @@
 import { TemplateResult } from 'lit-html';
 import { MetadataResponse } from '@internetarchive/search-service';
+export declare type MenuId = string;
 export interface IntMenuShortcut {
     icon: TemplateResult;
-    id: string;
+    id: MenuId;
 }
 export interface IntMenuIconAndDetails extends IntMenuShortcut {
     icon: TemplateResult;
-    id: string;
+    id: MenuId;
     label: string;
     menuDetails?: TemplateResult;
     selected?: boolean;

package/dist/src/interfaces/menu-interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/menu-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\n\nexport interface IntMenuShortcut {\n  icon: TemplateResult;\n  id: string;\n}\n\nexport interface IntMenuIconAndDetails extends IntMenuShortcut {\n  icon: TemplateResult;\n  id: string;\n  label: string;\n  menuDetails?: TemplateResult;\n  selected?: boolean;\n  followable?: boolean;\n  href?: string;\n}\n\nexport interface IntProviderArgs {\n  item: MetadataResponse;\n  baseHost: string;\n  subPrefix: string;\n  updated?: any;\n}\nexport interface IntMenuProvider\n  extends IntProviderArgs,\n    IntMenuIconAndDetails,\n    IntMenuShortcut {}\n"]}
+{"version":3,"file":"menu-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/menu-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html';\nimport { MetadataResponse } from '@internetarchive/search-service';\n\nexport type MenuId = string;\nexport interface IntMenuShortcut {\n  icon: TemplateResult;\n  id: MenuId;\n}\n\nexport interface IntMenuIconAndDetails extends IntMenuShortcut {\n  icon: TemplateResult;\n  id: MenuId;\n  label: string;\n  menuDetails?: TemplateResult;\n  selected?: boolean;\n  followable?: boolean;\n  href?: string;\n}\n\nexport interface IntProviderArgs {\n  item: MetadataResponse;\n  baseHost: string;\n  subPrefix: string;\n  updated?: any;\n}\nexport interface IntMenuProvider\n  extends IntProviderArgs,\n    IntMenuIconAndDetails,\n    IntMenuShortcut {}\n"]}

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

@@ -7,41 +7,47 @@ import { ModalManagerInterface } from '@internetarchive/modal-manager';
 import '@internetarchive/icon-ellipses/icon-ellipses';
 import './loader';
 import { IntManageSideMenuEvent, IntSetOpenMenuEvent, IntSetMenuContentsEvent, IntSetMenuShortcutsEvent, IntLoadingStateUpdatedEvent, IntManageFullscreenEvent } from './interfaces/event-interfaces';
-import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
+import { IntMenuProvider, IntMenuShortcut, MenuId } from './interfaces/menu-interfaces';
 import './no-theater-available';
+export declare enum ItemType {
+    BOOK = "bookreader"
+}
 export declare class ItemNavigator extends LitElement implements SharedResizeObserverResizeHandlerInterface {
     item: MetadataResponse | undefined;
-    itemType: string;
+    itemType?: ItemType;
     baseHost: string;
     signedIn: boolean;
     menuContents: IntMenuProvider[];
     menuShortcuts: IntMenuShortcut[];
     viewportInFullscreen: boolean | null;
     menuOpened: boolean;
-    openMenu: string;
+    openMenu: MenuId | '';
     modal?: ModalManagerInterface;
     sharedObserver?: SharedResizeObserver;
-    loaded: boolean | null;
+    loaded: true | null;
     openMenuState: 'overlay' | 'shift';
     private frame;
     private headerSlot;
     disconnectedCallback(): void;
-    firstUpdated(): void;
     updated(changed: PropertyValues): void;
+    /** Shared observer */
     handleResize(entry: ResizeObserverEntry): void;
-    private startResizeObserver;
+    private setResizeObserver;
+    private removeResizeObserver;
+    get resizeObserverConfig(): {
+        handler: SharedResizeObserverResizeHandlerInterface;
+        target: Element;
+    };
+    /** End shared observer */
     get loaderTitle(): "" | "Internet Archive";
     get readerHeightStyle(): string;
-    handleHeaderSlotChange(e: Event): void;
     get loadingArea(): TemplateResult;
     render(): TemplateResult;
     get noTheaterView(): TemplateResult;
     get theaterSlot(): TemplateResult;
-    get BooksViewer(): TemplateResult;
+    get booksViewer(): TemplateResult;
     get renderViewport(): TemplateResult | typeof nothing;
     loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void;
-    /** Creates modal DOM & attaches to `<body>` */
-    private createModal;
     /** Fullscreen Management */
     manageViewportFullscreen(e: IntManageFullscreenEvent): void;
     /** End Fullscreen Management */
@@ -58,7 +64,7 @@ export declare class ItemNavigator extends LitElement implements SharedResizeObs
     get renderSideMenu(): TemplateResult;
     /** End Side menu */
     /** Menu Shortcuts */
-    openShortcut(selectedMenuId?: string): void;
+    openShortcut(selectedMenuId?: MenuId): void;
     get shortcuts(): TemplateResult;
     /** End Menu Shortcuts */
     /** Misc Render */

package/dist/src/item-navigator.js

@@ -2,18 +2,18 @@ import { __decorate } from "tslib";
 import { css, html, LitElement, customElement, property, state, query, } from 'lit-element';
 import { nothing } from 'lit-html';
 import { MetadataResponse } from '@internetarchive/search-service';
-import { SharedResizeObserver, } from '@internetarchive/shared-resize-observer';
-// @ts-ignore
-import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
 import '@internetarchive/ia-menu-slider';
 import '@internetarchive/icon-ellipses/icon-ellipses';
 import './loader';
 import './no-theater-available';
+export var ItemType;
+(function (ItemType) {
+    ItemType["BOOK"] = "bookreader";
+})(ItemType || (ItemType = {}));
 let ItemNavigator = class ItemNavigator extends LitElement {
     constructor() {
         super(...arguments);
         this.item = undefined;
-        this.itemType = '';
         this.baseHost = 'archive.org';
         this.signedIn = false;
         this.menuContents = [];
@@ -25,30 +25,14 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         this.openMenuState = 'shift';
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver({
-            handler: this,
-            target: this.frame,
-        });
-    }
-    firstUpdated() {
-        if (!this.modal) {
-            this.createModal();
-        }
-        this.startResizeObserver();
+        this.removeResizeObserver();
     }
     updated(changed) {
-        if (changed.has('modal')) {
-            if (!this.modal) {
-                this.createModal();
-            }
-        }
         if (changed.has('sharedObserver')) {
-            if (!this.sharedObserver) {
-                this.startResizeObserver();
-            }
+            this.setResizeObserver();
         }
     }
+    /** Shared observer */
     handleResize(entry) {
         const { width } = entry.contentRect;
         if (width <= 600) {
@@ -57,15 +41,22 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         }
         this.openMenuState = 'shift';
     }
-    startResizeObserver() {
-        if (!this.sharedObserver) {
-            this.sharedObserver = new SharedResizeObserver();
-        }
-        this.sharedObserver.addObserver({
+    setResizeObserver() {
+        var _a;
+        this.removeResizeObserver();
+        (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.addObserver(this.resizeObserverConfig);
+    }
+    removeResizeObserver() {
+        var _a;
+        (_a = this.sharedObserver) === null || _a === void 0 ? void 0 : _a.removeObserver(this.resizeObserverConfig);
+    }
+    get resizeObserverConfig() {
+        return {
             handler: this,
             target: this.frame,
-        });
+        };
     }
+    /** End shared observer */
     get loaderTitle() {
         return this.viewportInFullscreen ? 'Internet Archive' : '';
     }
@@ -74,9 +65,6 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         const calcFSHeight = `calc(100vh - ${(_a = this.headerSlot) === null || _a === void 0 ? void 0 : _a.offsetHeight}px)`;
         return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
     }
-    handleHeaderSlotChange(e) {
-        console.log('~~~~ handleHeaderSlotChange', e);
-    }
     get loadingArea() {
         return html `
       <div class="loading-area">
@@ -92,10 +80,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
       <div id="frame" class=${`${this.menuClass}`}>
         <div class="menu-and-reader">
           ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
-          <slot
-            name="theater-header"
-            @slotchange=${this.handleHeaderSlotChange}
-          ></slot>
+          <slot name="theater-header"></slot>
           <div
             id="reader"
             class=${displayReaderClass}
@@ -120,7 +105,7 @@ let ItemNavigator = class ItemNavigator extends LitElement {
       <slot name="theater-main" style=${this.readerHeightStyle}></slot>
     `;
     }
-    get BooksViewer() {
+    get booksViewer() {
         const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
         return html `
       <book-navigator
@@ -146,21 +131,15 @@ let ItemNavigator = class ItemNavigator extends LitElement {
         if (!this.item) {
             return nothing;
         }
-        if (this.itemType === 'bookreader') {
-            return this.BooksViewer;
+        if (this.itemType === ItemType.BOOK) {
+            return this.booksViewer;
         }
         return this.noTheaterView;
     }
     loadingStateUpdated(e) {
         const { loaded } = e.detail;
-        this.loaded = !!loaded;
-    }
-    /** Creates modal DOM & attaches to `<body>` */
-    createModal() {
-        this.modal = document.createElement('modal-manager');
-        document.body.appendChild(this.modal);
+        this.loaded = loaded || null;
     }
-    /* End Modal management */
     /** Fullscreen Management */
     manageViewportFullscreen(e) {
         const fullscreenStatus = !!e.detail.isFullScreen;
@@ -173,7 +152,8 @@ let ItemNavigator = class ItemNavigator extends LitElement {
     /** End Fullscreen Management */
     /** Side menu */
     get shouldRenderMenu() {
-        return !!this.menuContents.length;
+        return true;
+        // return !!this.menuContents.length;
     }
     toggleMenu() {
         this.menuOpened = !this.menuOpened;
@@ -469,7 +449,7 @@ __decorate([
     property({ type: Array })
 ], ItemNavigator.prototype, "menuShortcuts", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ type: Boolean, reflect: true, attribute: true })
 ], ItemNavigator.prototype, "viewportInFullscreen", void 0);
 __decorate([
     property({ type: Boolean })
@@ -484,7 +464,7 @@ __decorate([
     property({ attribute: false })
 ], ItemNavigator.prototype, "sharedObserver", void 0);
 __decorate([
-    property({ reflect: true, attribute: true })
+    property({ type: Boolean, reflect: true, attribute: true })
 ], ItemNavigator.prototype, "loaded", void 0);
 __decorate([
     state()
@@ -499,5 +479,4 @@ ItemNavigator = __decorate([
     customElement('ia-item-navigator')
 ], ItemNavigator);
 export { ItemNavigator };
-customElements.define('ia-menu-slider', IAMenuSlider);
 //# sourceMappingURL=item-navigator.js.map