@internetarchive/ia-item-navigator 0.0.0 → 0.0.2

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

@@ -1,33 +1,59 @@
-import { html, css, LitElement, customElement, property } from 'lit-element';
-import '../src/item-navigator';
-import '../src/item-inspector/item-inspector';
+/* eslint-disable no-restricted-globals */
+import {
+  html,
+  css,
+  LitElement,
+  customElement,
+  property,
+  query,
+  TemplateResult,
+} from 'lit-element';
 import {
   MetadataResponse,
   SearchService,
 } from '@internetarchive/search-service';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+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 {
-  @property({ type: Object }) itemMD: MetadataResponse | any = {};
-
-  @property({ type: Object }) bookManifest = {};
+  /**
+   * Example controller to connect to `<ia-item-navigator>`
+   */
+  @property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;
 
   @property({ type: String }) encodedManifest = '';
 
+  @query('ia-item-navigator') private itemNav!: ItemNavigator;
+
+  @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();
-    // this.fetchDemoBook();
+    console.log(
+      '<app-root> component has loaded',
+      this.modalMgr,
+      this.sharedObserver
+    );
   }
 
-  async fetchDemoBook() {
-    const manifest = await fetch('/demo/demo-book-manifest.json');
-    const theJson = await manifest.json();
-    this.bookManifest = theJson;
-    this.encodedManifest = btoa(JSON.stringify(this.bookManifest));
+  updated(changed: any) {
+    console.log('changed', changed);
+    if (changed.has('itemMD')) {
+      this.fullscreenCheck();
+    }
   }
 
   async fetchItemMD() {
     const searchService = SearchService.default;
-
     const mdResponse = await searchService.fetchMetadata('ux-team-books');
 
     if (mdResponse.error) {
@@ -38,35 +64,100 @@ export class AppRoot extends LitElement {
       return;
     }
 
+    console.log('mdResponse.success', JSON.stringify(mdResponse.success));
     this.itemMD = mdResponse.success;
-    console.log('** App Root: this.itemMD', this.itemMD);
   }
 
-  render() {
-    if (!this.itemMD) {
-      return html`<h2>Please hold as we fetch an item for ya</h2>`;
+  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 */
+  toggleFS(): void {
+    if (this.urlParams.get('view')) {
+      location.search = '';
+    } else {
+      location.search = 'view=theater';
+    }
+  }
+
+  /** 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 baseHost="https://archive.org" .item=${this.itemMD}>
-      </item-navigator>
+      <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>
+    `;
+  }
+
+  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}
+      <modal-manager></modal-manager>
     `;
   }
 
   static styles = css`
     :host {
-      min-height: 64vh;
       border: 1px solid pink;
+      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;
     }
+    div {
+      position: relative;
+      overflow: hidden;
+      height: 100%;
+      min-height: inherit;
+    }
+
+    modal-manager[mode='closed'] {
+      display: none;
+    }
   `;
 }

package/demo/index.html

@@ -6,10 +6,10 @@
     html, app-root {
       font-size: 10px; /* This is to match petabox's base font size */
       font-family: sans-serif;
-      --primaryBGColor: var(--black, #000);
+      --primaryBGColor: black;
       --secondaryBGColor: #222;
       --tertiaryBGColor: #333;
-      --primaryTextColor: var(--white, #fff);
+      --primaryTextColor: white;
       --primaryCTAFill: #194880;
       --primaryCTABorder: #c5d1df;
       --secondaryCTAFill: #333;
@@ -41,21 +41,29 @@
     }
 
     body {
-      background: black;
       color: #fff;
+      margin: 0;
     }
 
     modal-manager {
       display: none
     }
 
+    .fullscreen {
+      position: fixed;
+    }
 
   </style>
 </head>
 <body>
   <app-root></app-root>
   <script type="module">
-    import '@internetarchive/modal-manager';
+    /* eslint-disable no-restricted-globals */
+    const params = new URLSearchParams(location.search.slice(1));
+    if (params.get('view') === 'theater') {
+      const body = document.querySelector('body');
+      body.classList.toggle('fullscreen');
+    }
   </script>
   <script type="module" src="../dist/demo/app-root.js">
   </script>

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

@@ -1,14 +1,34 @@
-import { LitElement } from 'lit-element';
-import '../src/item-navigator';
-import '../src/item-inspector/item-inspector';
+import { LitElement, TemplateResult } from 'lit-element';
 import { MetadataResponse } from '@internetarchive/search-service';
+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 {
-    itemMD: MetadataResponse | any;
-    bookManifest: {};
+    /**
+     * Example controller to connect to `<ia-item-navigator>`
+     */
+    itemMD: MetadataResponse | undefined;
     encodedManifest: string;
+    private itemNav;
+    modalMgr: ModalManager;
+    sharedObserver: SharedResizeObserver;
+    fullscreen: boolean | null;
     firstUpdated(): void;
-    fetchDemoBook(): Promise<void>;
+    updated(changed: any): void;
     fetchItemMD(): Promise<void>;
-    render(): import("lit-element").TemplateResult;
+    get theaterReady(): boolean;
+    get urlParams(): URLSearchParams;
+    /** Fullscreen */
+    get showFullscreen(): boolean;
+    /** 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;
     static styles: import("lit-element").CSSResult;
 }

package/dist/demo/app-root.js

@@ -1,24 +1,30 @@
 import { __decorate } from "tslib";
-import { html, css, LitElement, customElement, property } from 'lit-element';
-import '../src/item-navigator';
-import '../src/item-inspector/item-inspector';
+/* eslint-disable no-restricted-globals */
+import { html, css, LitElement, customElement, property, query, } from 'lit-element';
 import { SearchService, } from '@internetarchive/search-service';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import '@internetarchive/modal-manager';
+import '../src/item-navigator';
 let AppRoot = class AppRoot extends LitElement {
     constructor() {
         super(...arguments);
-        this.itemMD = {};
-        this.bookManifest = {};
+        /**
+         * Example controller to connect to `<ia-item-navigator>`
+         */
+        this.itemMD = undefined;
         this.encodedManifest = '';
+        this.sharedObserver = new SharedResizeObserver();
+        this.fullscreen = null;
     }
     firstUpdated() {
         this.fetchItemMD();
-        // this.fetchDemoBook();
+        console.log('<app-root> component has loaded', this.modalMgr, this.sharedObserver);
     }
-    async fetchDemoBook() {
-        const manifest = await fetch('/demo/demo-book-manifest.json');
-        const theJson = await manifest.json();
-        this.bookManifest = theJson;
-        this.encodedManifest = btoa(JSON.stringify(this.bookManifest));
+    updated(changed) {
+        console.log('changed', changed);
+        if (changed.has('itemMD')) {
+            this.fullscreenCheck();
+        }
     }
     async fetchItemMD() {
         const searchService = SearchService.default;
@@ -28,44 +34,113 @@ 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;
-        console.log('** App Root: this.itemMD', this.itemMD);
     }
-    render() {
-        if (!this.itemMD) {
-            return html `<h2>Please hold as we fetch an item for ya</h2>`;
+    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 */
+    toggleFS() {
+        if (this.urlParams.get('view')) {
+            location.search = '';
+        }
+        else {
+            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 baseHost="https://archive.org" .item=${this.itemMD}>
-      </item-navigator>
+      <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>
+    `;
+    }
+    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}
+      <modal-manager></modal-manager>
     `;
     }
 };
 AppRoot.styles = css `
     :host {
-      min-height: 64vh;
       border: 1px solid pink;
+      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;
     }
+    div {
+      position: relative;
+      overflow: hidden;
+      height: 100%;
+      min-height: inherit;
+    }
+
+    modal-manager[mode='closed'] {
+      display: none;
+    }
   `;
 __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('ia-item-navigator')
+], AppRoot.prototype, "itemNav", void 0);
+__decorate([
+    query('modal-manager')
+], AppRoot.prototype, "modalMgr", void 0);
+__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":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAEL,aAAa,GACd,MAAM,iCAAiC,CAAC;AAEzC,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QAC8B,WAAM,GAA2B,EAAE,CAAC;QAEpC,iBAAY,GAAG,EAAE,CAAC;QAElB,oBAAe,GAAG,EAAE,CAAC;IA0DnD,CAAC;IAxDC,YAAY;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,wBAAwB;IAC1B,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,+BAA+B,CAAC,CAAC;QAC9D,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QACtC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACjE,CAAC;IAED,KAAK,CAAC,WAAW;QACf,MAAM,aAAa,GAAG,aAAa,CAAC,OAAO,CAAC;QAE5C,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,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;QACjC,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,OAAO,IAAI,CAAA,iDAAiD,CAAC;SAC9D;QAED,OAAO,IAAI,CAAA;6DAC8C,IAAI,CAAC,MAAM;;KAEnE,CAAC;IACJ,CAAC;CAkBF,CAAA;AAhBQ,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;GAelB,CAAC;AA7D0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAqC;AAEpC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AALtC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA+DnB;SA/DY,OAAO","sourcesContent":["import { html, css, LitElement, customElement, property } from 'lit-element';\nimport '../src/item-navigator';\nimport '../src/item-inspector/item-inspector';\nimport {\n  MetadataResponse,\n  SearchService,\n} from '@internetarchive/search-service';\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  @property({ type: Object }) itemMD: MetadataResponse | any = {};\n\n  @property({ type: Object }) bookManifest = {};\n\n  @property({ type: String }) encodedManifest = '';\n\n  firstUpdated() {\n    this.fetchItemMD();\n    // this.fetchDemoBook();\n  }\n\n  async fetchDemoBook() {\n    const manifest = await fetch('/demo/demo-book-manifest.json');\n    const theJson = await manifest.json();\n    this.bookManifest = theJson;\n    this.encodedManifest = btoa(JSON.stringify(this.bookManifest));\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    console.log('** App Root: this.itemMD', this.itemMD);\n  }\n\n  render() {\n    if (!this.itemMD) {\n      return html`<h2>Please hold as we fetch an item for ya</h2>`;\n    }\n\n    return html`\n      <item-navigator baseHost=\"https://archive.org\" .item=${this.itemMD}>\n      </item-navigator>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      min-height: 64vh;\n      border: 1px solid pink;\n    }\n    :host,\n    item-navigator {\n      display: block;\n      position: relative;\n      width: 100%;\n    }\n    item-navigator {\n      height: inherit;\n      min-height: inherit;\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,48 +1,38 @@
-import { TemplateResult } from 'lit-html';
-import { ModalConfig } from '@internetarchive/modal-manager';
-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[];
 }
-/** list of shortcut configs that displays in minimized menu */
-export interface IntSetMenuShortcuts extends CustomEvent {
-    type: 'menuShortcutsUpdated';
-    detail: IntMenuShortcut[];
+/** Sets menu shortcuts that is displayed */
+export interface SetSideMenuShortcutsEvent extends CustomEvent {
+    type: 'menuUpdated';
+    detail: MenuShortcutInterface[];
 }
 /** Toggles fullscreen mode */
-export interface IntManageFullscreenEvent extends CustomEvent {
+export interface ManageFullscreenEvent extends CustomEvent {
     type: 'ViewportInFullScreen';
     detail: {
         isFullScreen: boolean;
     };
 }
-/** Toggles modal & sets contents */
-export interface IntOpenModalEvent extends CustomEvent {
-    type: 'showItemNavigatorModal';
-    detail: {
-        config: ModalConfig;
-        customModalContent: TemplateResult;
-    };
-}
 /** 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 { TemplateResult } from 'lit-html';\nimport { ModalConfig } from '@internetarchive/modal-manager';\nimport { 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/** list of shortcut configs that displays in minimized menu */\nexport interface IntSetMenuShortcuts extends CustomEvent {\n  type: 'menuShortcutsUpdated';\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 modal & sets contents */\nexport interface IntOpenModalEvent extends CustomEvent {\n  type: 'showItemNavigatorModal';\n  detail: {\n    config: ModalConfig;\n    customModalContent: TemplateResult;\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"]}