@internetarchive/ia-item-navigator 0.0.0-a8 → 0.0.2-a1

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

@@ -6,42 +6,45 @@ import {
   customElement,
   property,
   query,
+  TemplateResult,
 } from 'lit-element';
-import '../src/item-inspector/item-inspector';
 import {
   MetadataResponse,
   SearchService,
 } from '@internetarchive/search-service';
-import '../src/item-navigator';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/modal-manager';
-import {
-  SharedResizeObserver,
-  // SharedResizeObserverInterface,
-  // SharedResizeObserverResizeHandlerInterface,
-} from '@internetarchive/shared-resize-observer';
-
+import { ItemNavigator } from '../src/item-navigator';
+import '../src/item-navigator';
 @customElement('app-root')
 export class AppRoot extends LitElement {
+  /**
+   * Example controller to connect to `<ia-item-navigator>`
+   */
   @property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;
 
-  @property({ type: Object }) bookManifest = {};
-
   @property({ type: String }) encodedManifest = '';
 
-  @query('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('AP R', this.modalMgr, this.sharedObserver);
+    console.log(
+      '<app-root> component has loaded',
+      this.modalMgr,
+      this.sharedObserver
+    );
   }
 
-  /**
-   * @inheritdoc
-   */
   updated(changed: any) {
     console.log('changed', changed);
     if (changed.has('itemMD')) {
@@ -49,19 +52,8 @@ export class AppRoot extends LitElement {
     }
   }
 
-  get theaterReady(): boolean {
-    return this.modalMgr && this.sharedObserver && this.itemMD;
-  }
-
-  fullscreenCheck() {
-    if (this.showFullscreen && this.itemNav) {
-      this.itemNav.viewportInFullscreen = true;
-    }
-  }
-
   async fetchItemMD() {
     const searchService = SearchService.default;
-
     const mdResponse = await searchService.fetchMetadata('ux-team-books');
 
     if (mdResponse.error) {
@@ -72,32 +64,25 @@ export class AppRoot extends LitElement {
       return;
     }
 
+    console.log('mdResponse.success', JSON.stringify(mdResponse.success));
     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';
   }
 
-  get renderMD() {
-    const x = [];
-    // eslint-disable-next-line guard-for-in, no-restricted-syntax
-    for (const md in this.itemMD) {
-      const val = (this.itemMD as any)[md];
-      x.push(
-        html`<dt>${md}</dt>
-          :
-          <dd>${val}</dd>`
-      );
-    }
-    return html`<dl>${[...x]}</dl>`;
-  }
-
-  toggleFS() {
+  /** sets url query param `view=theater` to toggle fullscreen */
+  toggleFS(): void {
     if (this.urlParams.get('view')) {
       location.search = '';
     } else {
@@ -105,28 +90,38 @@ export class AppRoot extends LitElement {
     }
   }
 
-  get theaterBlock() {
+  /** 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`
-      <item-navigator
+      <ia-item-navigator
         baseHost="https://archive.org"
         .item=${this.itemMD}
         .modal=${this.modalMgr}
         .sharedObserver=${this.sharedObserver}
         @ViewportInFullScreen=${this.toggleFS}
-      ></item-navigator>
+        .viewportInFullscreen=${this.fullscreen}
+      ></ia-item-navigator>
     `;
   }
 
-  get placeholder() {
+  get placeholder(): TemplateResult {
     return html`<h2>Please hold as we fetch an item for ya</h2>`;
   }
 
-  render() {
+  render(): TemplateResult {
     const theater = this.theaterReady ? this.theaterBlock : this.placeholder;
     return html`
       <h1>theater, in page</h1>
       ${theater}
-      <section>${this.renderMD}</section>
       <modal-manager></modal-manager>
     `;
   }
@@ -137,15 +132,20 @@ export class AppRoot extends LitElement {
       color: #222;
     }
 
+    :host([fullscreen]) {
+      height: 100vh;
+      width: 100vw;
+    }
+
     :host,
-    item-navigator {
+    ia-item-navigator {
       display: block;
       position: relative;
       width: 100%;
       min-height: 64vh;
       height: 64vh;
     }
-    item-navigator {
+    ia-item-navigator {
       height: inherit;
       min-height: inherit;
     }

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,30 +1,34 @@
-import { LitElement } from 'lit-element';
-import '../src/item-inspector/item-inspector';
+import { LitElement, TemplateResult } from 'lit-element';
 import { MetadataResponse } from '@internetarchive/search-service';
-import '../src/item-navigator';
-import '@internetarchive/modal-manager';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+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;
-    fullscreenCheck(): void;
     fetchItemMD(): Promise<void>;
+    get theaterReady(): boolean;
     get urlParams(): URLSearchParams;
+    /** Fullscreen */
     get showFullscreen(): boolean;
-    get renderMD(): import("lit-element").TemplateResult;
+    /** sets url query param `view=theater` to toggle fullscreen */
     toggleFS(): void;
-    get theaterBlock(): import("lit-element").TemplateResult;
-    get placeholder(): import("lit-element").TemplateResult;
-    render(): import("lit-element").TemplateResult;
+    /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
+    fullscreenCheck(): void;
+    /** End fullscreen */
+    /** Views */
+    get theaterBlock(): TemplateResult;
+    get placeholder(): TemplateResult;
+    render(): TemplateResult;
     static styles: import("lit-element").CSSResult;
 }

package/dist/demo/app-root.js

@@ -1,43 +1,31 @@
 import { __decorate } from "tslib";
 /* eslint-disable no-restricted-globals */
 import { html, css, LitElement, customElement, property, query, } from 'lit-element';
-import '../src/item-inspector/item-inspector';
 import { SearchService, } from '@internetarchive/search-service';
-import '../src/item-navigator';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import '@internetarchive/modal-manager';
-import { SharedResizeObserver,
-// SharedResizeObserverInterface,
-// SharedResizeObserverResizeHandlerInterface,
- } from '@internetarchive/shared-resize-observer';
+import '../src/item-navigator';
 let AppRoot = class AppRoot extends LitElement {
     constructor() {
         super(...arguments);
+        /**
+         * 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('AP R', this.modalMgr, this.sharedObserver);
+        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;
-    }
-    fullscreenCheck() {
-        if (this.showFullscreen && this.itemNav) {
-            this.itemNav.viewportInFullscreen = true;
-        }
-    }
     async fetchItemMD() {
         const searchService = SearchService.default;
         const mdResponse = await searchService.fetchMetadata('ux-team-books');
@@ -46,25 +34,20 @@ let AppRoot = class AppRoot extends LitElement {
             window.confirm('There was an error fetching response, please check dev console');
             return;
         }
+        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';
     }
-    get renderMD() {
-        const x = [];
-        // eslint-disable-next-line guard-for-in, no-restricted-syntax
-        for (const md in this.itemMD) {
-            const val = this.itemMD[md];
-            x.push(html `<dt>${md}</dt>
-          :
-          <dd>${val}</dd>`);
-        }
-        return html `<dl>${[...x]}</dl>`;
-    }
+    /** sets url query param `view=theater` to toggle fullscreen */
     toggleFS() {
         if (this.urlParams.get('view')) {
             location.search = '';
@@ -73,15 +56,25 @@ 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 `
-      <item-navigator
+      <ia-item-navigator
         baseHost="https://archive.org"
         .item=${this.itemMD}
         .modal=${this.modalMgr}
         .sharedObserver=${this.sharedObserver}
         @ViewportInFullScreen=${this.toggleFS}
-      ></item-navigator>
+        .viewportInFullscreen=${this.fullscreen}
+      ></ia-item-navigator>
     `;
     }
     get placeholder() {
@@ -92,7 +85,6 @@ let AppRoot = class AppRoot extends LitElement {
         return html `
       <h1>theater, in page</h1>
       ${theater}
-      <section>${this.renderMD}</section>
       <modal-manager></modal-manager>
     `;
     }
@@ -103,15 +95,20 @@ AppRoot.styles = css `
       color: #222;
     }
 
+    :host([fullscreen]) {
+      height: 100vh;
+      width: 100vw;
+    }
+
     :host,
-    item-navigator {
+    ia-item-navigator {
       display: block;
       position: relative;
       width: 100%;
       min-height: 64vh;
       height: 64vh;
     }
-    item-navigator {
+    ia-item-navigator {
       height: inherit;
       min-height: inherit;
     }
@@ -129,14 +126,11 @@ 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);
 __decorate([
-    query('item-navigator')
+    query('ia-item-navigator')
 ], AppRoot.prototype, "itemNav", void 0);
 __decorate([
     query('modal-manager')
@@ -144,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} from 'lit-element';\nimport '../src/item-inspector/item-inspector';\nimport {\n  MetadataResponse,\n  SearchService,\n} from '@internetarchive/search-service';\nimport '../src/item-navigator';\nimport '@internetarchive/modal-manager';\nimport {\n  SharedResizeObserver,\n  // SharedResizeObserverInterface,\n  // SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  @property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;\n\n  @property({ type: Object }) bookManifest = {};\n\n  @property({ type: String }) encodedManifest = '';\n\n  @query('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('AP R', this.modalMgr, this.sharedObserver);\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  fullscreenCheck() {\n    if (this.showFullscreen && this.itemNav) {\n      this.itemNav.viewportInFullscreen = true;\n    }\n  }\n\n  async fetchItemMD() {\n    const searchService = SearchService.default;\n\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    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  get renderMD() {\n    const x = [];\n    // eslint-disable-next-line guard-for-in, no-restricted-syntax\n    for (const md in this.itemMD) {\n      const val = (this.itemMD as any)[md];\n      x.push(\n        html`<dt>${md}</dt>\n          :\n          <dd>${val}</dd>`\n      );\n    }\n    return html`<dl>${[...x]}</dl>`;\n  }\n\n  toggleFS() {\n    if (this.urlParams.get('view')) {\n      location.search = '';\n    } else {\n      location.search = 'view=theater';\n    }\n  }\n\n  get theaterBlock() {\n    return html`\n      <item-navigator\n        baseHost=\"https://archive.org\"\n        .item=${this.itemMD}\n        .modal=${this.modalMgr}\n        .sharedObserver=${this.sharedObserver}\n        @ViewportInFullScreen=${this.toggleFS}\n      ></item-navigator>\n    `;\n  }\n\n  get placeholder() {\n    return html`<h2>Please hold as we fetch an item for ya</h2>`;\n  }\n\n  render() {\n    const theater = this.theaterReady ? this.theaterBlock : this.placeholder;\n    return html`\n      <h1>theater, in page</h1>\n      ${theater}\n      <section>${this.renderMD}</section>\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    item-navigator {\n      display: block;\n      position: relative;\n      width: 100%;\n      min-height: 64vh;\n      height: 64vh;\n    }\n    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  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/custom-theater-interface.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit-element';
+import { MetadataResponse } from '@internetarchive/search-service';
+import { ModalManager } from '@internetarchive/modal-manager';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { MenuProviderInterface, MenuShortcutInterface } from './menu-interfaces';
+export interface CustomTheaterInterface extends LitElement {
+    baseHost?: string;
+    itemMD?: MetadataResponse;
+    menuProviders?: MenuProviderInterface[];
+    menuShortcuts?: MenuShortcutInterface[];
+    sideMenuOpen: boolean;
+    signedIn?: boolean | null;
+    sharedObserver?: SharedResizeObserver;
+    modal?: ModalManager;
+    emitLoadingStatusUpdate: (loaded: boolean) => void;
+    addMenuShortcut: (menuId: string) => void;
+    removeMenuShortcut: (menuId: string) => void;
+    sortMenuShortcuts: () => void;
+    emitMenuShortcutsUpdated: () => void;
+}

package/dist/src/interfaces/custom-theater-interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=custom-theater-interface.js.map

package/dist/src/interfaces/custom-theater-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-theater-interface.js","sourceRoot":"","sources":["../../../src/interfaces/custom-theater-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { LitElement } from 'lit-element';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport {\n  MenuProviderInterface,\n  MenuShortcutInterface,\n} from './menu-interfaces';\n\nexport interface CustomTheaterInterface extends LitElement {\n  baseHost?: string;\n  itemMD?: MetadataResponse;\n  menuProviders?: MenuProviderInterface[];\n  menuShortcuts?: MenuShortcutInterface[];\n  sideMenuOpen: boolean;\n\n  signedIn?: boolean | null;\n\n  sharedObserver?: SharedResizeObserver;\n  modal?: ModalManager;\n\n  emitLoadingStatusUpdate: (loaded: boolean) => void;\n\n  addMenuShortcut: (menuId: string) => void;\n  removeMenuShortcut: (menuId: string) => void;\n  sortMenuShortcuts: () => void;\n  emitMenuShortcutsUpdated: () => void;\n}\n"]}

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

@@ -1,38 +1,38 @@
-import { IntMenuProvider, IntMenuShortcut } from './menu-interfaces';
+import { MenuProviderInterface, MenuShortcutInterface, MenuId } from './menu-interfaces';
 /** Toggles Menu && Sets open panel */
-export interface IntManageSideMenuEvent extends CustomEvent {
+export interface ToggleSideMenuOpenEvent extends CustomEvent {
     type: 'updateSideMenu';
     detail: {
-        menuId: string | undefined | '';
+        menuId: MenuId | undefined | '';
         action: 'open' | 'toggle' | '';
     };
 }
 /** Sets open panel */
-export interface IntSetOpenMenuEvent extends CustomEvent {
+export interface ToggleSidePanelOpenEvent extends CustomEvent {
     type: 'menuTypeSelected';
     detail: {
-        id: string /** name of menu to open */;
+        id: MenuId | '';
     };
 }
 /** Sets menu order that is displayed */
-export interface IntSetMenuContentsEvent extends CustomEvent {
+export interface SetSideMenuContentsEvent extends CustomEvent {
     type: 'menuUpdated';
-    detail: IntMenuProvider[];
+    detail: MenuProviderInterface[];
 }
 /** Sets menu shortcuts that is displayed */
-export interface IntSetMenuShortcutsEvent extends CustomEvent {
+export interface SetSideMenuShortcutsEvent extends CustomEvent {
     type: 'menuUpdated';
-    detail: IntMenuShortcut[];
+    detail: MenuShortcutInterface[];
 }
 /** Toggles fullscreen mode */
-export interface IntManageFullscreenEvent extends CustomEvent {
+export interface ManageFullscreenEvent extends CustomEvent {
     type: 'ViewportInFullScreen';
     detail: {
         isFullScreen: boolean;
     };
 }
 /** Toggles loading view */
-export interface IntLoadingStateUpdatedEvent extends CustomEvent {
+export interface loadingStateUpdatedEvent extends CustomEvent {
     type: 'loadingStateUpdated';
     detail: {
         loaded: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"event-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/event-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { IntMenuProvider, IntMenuShortcut } from './menu-interfaces';\n\n/** Toggles Menu && Sets open panel */\nexport interface IntManageSideMenuEvent extends CustomEvent {\n  type: 'updateSideMenu';\n  detail: {\n    menuId: string | undefined | '';\n    action: 'open' | 'toggle' | '';\n  };\n}\n\n/** Sets open panel */\nexport interface IntSetOpenMenuEvent extends CustomEvent {\n  type: 'menuTypeSelected';\n  detail: {\n    id: string /** name of menu to open */;\n  };\n}\n\n/** Sets menu order that is displayed */\nexport interface IntSetMenuContentsEvent extends CustomEvent {\n  type: 'menuUpdated';\n  detail: IntMenuProvider[];\n}\n\n/** Sets menu shortcuts that is displayed */\nexport interface IntSetMenuShortcutsEvent extends CustomEvent {\n  type: 'menuUpdated';\n  detail: IntMenuShortcut[];\n}\n\n/** Toggles fullscreen mode */\nexport interface IntManageFullscreenEvent extends CustomEvent {\n  type: 'ViewportInFullScreen';\n  detail: {\n    isFullScreen: boolean;\n  };\n}\n\n/** Toggles loading view */\nexport interface IntLoadingStateUpdatedEvent extends CustomEvent {\n  type: 'loadingStateUpdated';\n  detail: {\n    loaded: boolean;\n  };\n}\n"]}
+{"version":3,"file":"event-interfaces.js","sourceRoot":"","sources":["../../../src/interfaces/event-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import {\n  MenuProviderInterface,\n  MenuShortcutInterface,\n  MenuId,\n} from './menu-interfaces';\n\n/** Toggles Menu && Sets open panel */\nexport interface ToggleSideMenuOpenEvent extends CustomEvent {\n  type: 'updateSideMenu';\n  detail: {\n    menuId: MenuId | undefined | '';\n    action: 'open' | 'toggle' | '';\n  };\n}\n\n/** Sets open panel */\nexport interface ToggleSidePanelOpenEvent extends CustomEvent {\n  type: 'menuTypeSelected';\n  detail: {\n    id: MenuId | '';\n  };\n}\n\n/** Sets menu order that is displayed */\nexport interface SetSideMenuContentsEvent extends CustomEvent {\n  type: 'menuUpdated';\n  detail: MenuProviderInterface[];\n}\n\n/** Sets menu shortcuts that is displayed */\nexport interface SetSideMenuShortcutsEvent extends CustomEvent {\n  type: 'menuUpdated';\n  detail: MenuShortcutInterface[];\n}\n\n/** Toggles fullscreen mode */\nexport interface ManageFullscreenEvent extends CustomEvent {\n  type: 'ViewportInFullScreen';\n  detail: {\n    isFullScreen: boolean;\n  };\n}\n\n/** Toggles loading view */\nexport interface loadingStateUpdatedEvent extends CustomEvent {\n  type: 'loadingStateUpdated';\n  detail: {\n    loaded: boolean;\n  };\n}\n"]}

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

@@ -1,23 +1,22 @@
 import { TemplateResult } from 'lit-html';
 import { MetadataResponse } from '@internetarchive/search-service';
-export interface IntMenuShortcut {
+export declare type MenuId = string;
+export interface MenuShortcutInterface {
     icon: TemplateResult;
-    id: string;
+    id: MenuId;
 }
-export interface IntMenuIconAndDetails extends IntMenuShortcut {
-    icon: TemplateResult;
-    id: string;
+export interface MenuDetailsInterface extends MenuShortcutInterface {
     label: string;
     menuDetails?: TemplateResult;
     selected?: boolean;
     followable?: boolean;
     href?: string;
 }
-export interface IntProviderArgs {
+export interface MenuProviderBaseConfigInterface {
     item: MetadataResponse;
     baseHost: string;
     subPrefix: string;
     updated?: any;
 }
-export interface IntMenuProvider extends IntProviderArgs, IntMenuIconAndDetails, IntMenuShortcut {
+export interface MenuProviderInterface extends MenuProviderBaseConfigInterface, MenuDetailsInterface, MenuShortcutInterface {
 }

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 MenuShortcutInterface {\n  icon: TemplateResult;\n  id: MenuId;\n}\n\nexport interface MenuDetailsInterface extends MenuShortcutInterface {\n  label: string;\n  menuDetails?: TemplateResult;\n  selected?: boolean;\n  followable?: boolean;\n  href?: string;\n}\n\nexport interface MenuProviderBaseConfigInterface {\n  item: MetadataResponse;\n  baseHost: string;\n  subPrefix: string;\n  updated?: any;\n}\nexport interface MenuProviderInterface\n  extends MenuProviderBaseConfigInterface,\n    MenuDetailsInterface,\n    MenuShortcutInterface {}\n"]}