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

package/README.md

@@ -13,10 +13,7 @@ The Item Navigator helps instantiate all of the components one needs to create a
 
 The Item Navigator's primary responsibility is to display the side menus, shortcuts, and the theater in browser window immersion "fullscreen".
 
-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
+The main slot is shown by default.  If item has no theater, add `viewAvailable = false` property to show placeholder.
 
 ## Usage
 Generic:
@@ -24,14 +21,6 @@ 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

package/demo/app-root.ts

@@ -17,26 +17,46 @@ import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/modal-manager';
 import { ItemNavigator } from '../src/item-navigator';
 import '../src/item-navigator';
+import {
+  MenuShortcutInterface,
+  MenuDetailsInterface,
+} from '../src/interfaces/menu-interfaces';
 @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 }) itemMD?: MetadataResponse;
 
   @property({ type: String }) encodedManifest = '';
 
-  @query('ia-item-navigator') private itemNav!: ItemNavigator;
+  @property({ attribute: false }) sharedObserver = new SharedResizeObserver();
 
-  @query('modal-manager') modalMgr!: ModalManager;
+  @property({ type: Array, attribute: false })
+  menuContents: MenuDetailsInterface[] = [];
 
-  @property({ attribute: false }) sharedObserver = new SharedResizeObserver();
+  @property({ type: Array, attribute: false })
+  menuShortcuts: MenuShortcutInterface[] = [];
 
-  @property({ type: Boolean, reflect: true, attribute: true }) fullscreen:
+  @property({ reflect: true, attribute: true }) fullscreen:
     | boolean
     | null = null;
 
-  @property({ type: Boolean, reflect: true, attribute: true }) headerOn = false;
+  @property({ reflect: true, attribute: true }) headerOn: true | null = null;
+
+  @property({ reflect: true, attribute: true }) loaded = true;
+
+  @property({ reflect: true, attribute: true }) showPlaceholder:
+    | true
+    | null = null;
+
+  @property({ reflect: true, attribute: true }) showTheaterExample:
+    | true
+    | null = true;
+
+  @query('ia-item-navigator') private itemNav!: ItemNavigator;
+
+  @query('modal-manager') modalMgr!: ModalManager;
 
   firstUpdated() {
     this.fetchItemMD();
@@ -45,6 +65,8 @@ export class AppRoot extends LitElement {
       this.modalMgr,
       this.sharedObserver
     );
+
+    this.itemNav.viewAvailable = false;
   }
 
   updated(changed: any) {
@@ -101,28 +123,143 @@ export class AppRoot extends LitElement {
   /** End fullscreen */
 
   toggleHeader() {
-    this.headerOn = !this.headerOn;
+    this.headerOn = this.headerOn ? null : true;
+  }
+
+  toggleLoader() {
+    this.loaded = !this.loaded;
+  }
+
+  togglePlaceholder() {
+    this.toggleLoader();
+    const show = this.showPlaceholder ? null : true;
+    this.showPlaceholder = show;
+  }
+
+  toggleImmersion() {
+    const nextState = this.fullscreen ? null : true;
+    if (!nextState) {
+      this.menuShortcuts = [];
+      return;
+    }
+    this.menuShortcuts = [
+      {
+        icon: html`<button
+          @click=${() => {
+            this.fullscreen = null;
+            this.menuContents = [];
+            this.menuShortcuts = [];
+          }}
+        >
+          Exit
+        </button>`,
+        id: 'exit',
+      },
+    ];
+    this.menuContents = [
+      {
+        icon: html`<button
+          @click=${() => {
+            this.fullscreen = null;
+          }}
+        >
+          Exit
+        </button>`,
+        id: 'exit',
+        label: 'Exit',
+        selected: false,
+      },
+    ];
+
+    this.fullscreen = nextState;
+  }
+
+  toggleTheaterExample() {
+    if (this.showTheaterExample) {
+      // turn on placeholder
+      this.showPlaceholder = true;
+      // turn off example
+      this.showTheaterExample = null;
+
+      this.menuContents = [];
+      this.menuShortcuts = [];
+      return;
+    }
+
+    // turn off placeholder
+    this.showPlaceholder = null;
+    this.showTheaterExample = true;
+
+    const x = {
+      icon: html`<p style="color: red">Allo</p>`,
+      id: 'a',
+      label: 'Hello world',
+      menuDetails: html`<h3>Wheee!</h3>`,
+    } as any;
+    this.menuContents = [x];
+    this.menuShortcuts = [x];
   }
 
   /** Views */
+  get theaterExample(): TemplateResult {
+    return html`
+      <div slot="main">
+        <div class="theater-example">
+          <img
+            alt="cat theater"
+            src="https://archive.org/download/encyclopediaofca0000poll_t2e2/__ia_thumb.jpg"
+          />
+          <h3>Welcome to Cat Theater</h3>
+        </div>
+      </div>
+    `;
+  }
+
   get headerExample(): TemplateResult {
     return html`
-      <div slot="theater-header">
+      <div slot="header">
         <div class="embed-link">
           <img
             src="https://archive.org/images/glogo-jw.png"
             alt="glowing ia logo"
           />
-          <a href="/details/goody"
-            >The history of Little Goody Two-Shoes : otherwise called Mrs.
-            Margery Two-Shoes ... [1766 edition]</a
-          >
+          <a href="/details/goody">
+            The history of Little Goody Two-Shoes : otherwise called Mrs.
+            Margery Two-Shoes ... [1766 edition]
+          </a>
         </div>
       </div>
     `;
   }
 
+  get isViewAvailable(): boolean {
+    if (this.showTheaterExample) {
+      return true;
+    }
+    return false;
+  }
+
   render(): TemplateResult {
+    const {
+      isViewAvailable,
+      loaded,
+      showPlaceholder,
+      headerOn,
+      fullscreen,
+      menuContents,
+      menuShortcuts,
+      showTheaterExample,
+    } = this;
+    console.log('&&&& item nav properties', {
+      loaded,
+      headerOn,
+      isViewAvailable,
+      showTheaterExample,
+      showPlaceholder,
+      fullscreen,
+      menuContents,
+      menuShortcuts,
+    });
     return html`
       <h1>theater, in page</h1>
       <section>
@@ -131,13 +268,22 @@ export class AppRoot extends LitElement {
           .item=${this.itemMD}
           .modal=${this.modalMgr}
           .sharedObserver=${this.sharedObserver}
-          @fullscreenToggled=${this.toggleFS}
+          .loaded=${this.loaded}
+          ?viewAvailable=${!!this.showTheaterExample}
+          .menuContents=${this.menuContents}
+          .menuShortcuts=${this.menuShortcuts}
+          .viewportInFullscreen=${this.fullscreen}
         >
           ${this.headerOn ? this.headerExample : ''}
+          ${this.showTheaterExample ? this.theaterExample : ''}
         </ia-item-navigator>
       </section>
       <div>
         <button @click=${this.toggleHeader}>toggle header</button>
+        <button @click=${this.toggleLoader}>toggle loader</button>
+        <button @click=${this.togglePlaceholder}>toggle placeholder</button>
+        <button @click=${this.toggleTheaterExample}>toggle new theater</button>
+        <button @click=${this.toggleImmersion}>toggle immersion</button>
       </div>
       <modal-manager></modal-manager>
     `;
@@ -169,17 +315,7 @@ export class AppRoot extends LitElement {
       display: block;
       position: relative;
       width: 100%;
-      height: inherit;
-    }
-    ia-item-navigator {
-      height: inherit;
-      min-height: inherit;
-    }
-    div {
-      position: relative;
-      overflow: hidden;
       height: 100%;
-      min-height: inherit;
     }
 
     .embed-link {
@@ -187,6 +323,27 @@ export class AppRoot extends LitElement {
       border: 1px solid yellow;
     }
 
+    .theater-example {
+      color: white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      margin: 10px;
+      border: 5px dotted yellow;
+      flex: 1;
+    }
+
+    div[slot='main'] {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    div[slot='main'] > * {
+      flex: 1;
+    }
+
     modal-manager[mode='closed'] {
       display: none;
     }

package/demo/index.html

@@ -2,6 +2,10 @@
 <html lang="en-GB">
 <head>
   <meta charset="utf-8">
+  <script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2Ces5%2CglobalThis"></script>
+  <script type="text/javascript" src="https://unpkg.com/lit@2.1.2/polyfill-support.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.10/webcomponents-bundle.js"></script>
+
   <style>
     html, app-root {
       font-size: 10px; /* This is to match petabox's base font size */

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

@@ -4,17 +4,23 @@ import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/modal-manager';
 import '../src/item-navigator';
+import { MenuShortcutInterface, MenuDetailsInterface } from '../src/interfaces/menu-interfaces';
 export declare class AppRoot extends LitElement {
     /**
      * Example controller to connect to `<ia-item-navigator>`
      */
-    itemMD: MetadataResponse | undefined;
+    itemMD?: MetadataResponse;
     encodedManifest: string;
-    private itemNav;
-    modalMgr: ModalManager;
     sharedObserver: SharedResizeObserver;
+    menuContents: MenuDetailsInterface[];
+    menuShortcuts: MenuShortcutInterface[];
     fullscreen: boolean | null;
-    headerOn: boolean;
+    headerOn: true | null;
+    loaded: boolean;
+    showPlaceholder: true | null;
+    showTheaterExample: true | null;
+    private itemNav;
+    modalMgr: ModalManager;
     firstUpdated(): void;
     updated(changed: any): void;
     fetchItemMD(): Promise<void>;
@@ -28,8 +34,14 @@ export declare class AppRoot extends LitElement {
     fullscreenCheck(): void;
     /** End fullscreen */
     toggleHeader(): void;
+    toggleLoader(): void;
+    togglePlaceholder(): void;
+    toggleImmersion(): void;
+    toggleTheaterExample(): void;
     /** Views */
+    get theaterExample(): TemplateResult;
     get headerExample(): TemplateResult;
+    get isViewAvailable(): boolean;
     render(): TemplateResult;
     static styles: import("lit-element").CSSResult;
 }

package/dist/demo/app-root.js

@@ -8,18 +8,20 @@ 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.encodedManifest = '';
         this.sharedObserver = new SharedResizeObserver();
+        this.menuContents = [];
+        this.menuShortcuts = [];
         this.fullscreen = null;
-        this.headerOn = false;
+        this.headerOn = null;
+        this.loaded = true;
+        this.showPlaceholder = null;
+        this.showTheaterExample = true;
     }
     firstUpdated() {
         this.fetchItemMD();
         console.log('<app-root> component has loaded', this.modalMgr, this.sharedObserver);
+        this.itemNav.viewAvailable = false;
     }
     updated(changed) {
         console.log('changed', changed);
@@ -65,26 +67,122 @@ let AppRoot = class AppRoot extends LitElement {
     }
     /** End fullscreen */
     toggleHeader() {
-        this.headerOn = !this.headerOn;
+        this.headerOn = this.headerOn ? null : true;
+    }
+    toggleLoader() {
+        this.loaded = !this.loaded;
+    }
+    togglePlaceholder() {
+        this.toggleLoader();
+        const show = this.showPlaceholder ? null : true;
+        this.showPlaceholder = show;
+    }
+    toggleImmersion() {
+        const nextState = this.fullscreen ? null : true;
+        if (!nextState) {
+            this.menuShortcuts = [];
+            return;
+        }
+        this.menuShortcuts = [
+            {
+                icon: html `<button
+          @click=${() => {
+                    this.fullscreen = null;
+                    this.menuContents = [];
+                    this.menuShortcuts = [];
+                }}
+        >
+          Exit
+        </button>`,
+                id: 'exit',
+            },
+        ];
+        this.menuContents = [
+            {
+                icon: html `<button
+          @click=${() => {
+                    this.fullscreen = null;
+                }}
+        >
+          Exit
+        </button>`,
+                id: 'exit',
+                label: 'Exit',
+                selected: false,
+            },
+        ];
+        this.fullscreen = nextState;
+    }
+    toggleTheaterExample() {
+        if (this.showTheaterExample) {
+            // turn on placeholder
+            this.showPlaceholder = true;
+            // turn off example
+            this.showTheaterExample = null;
+            this.menuContents = [];
+            this.menuShortcuts = [];
+            return;
+        }
+        // turn off placeholder
+        this.showPlaceholder = null;
+        this.showTheaterExample = true;
+        const x = {
+            icon: html `<p style="color: red">Allo</p>`,
+            id: 'a',
+            label: 'Hello world',
+            menuDetails: html `<h3>Wheee!</h3>`,
+        };
+        this.menuContents = [x];
+        this.menuShortcuts = [x];
     }
     /** Views */
+    get theaterExample() {
+        return html `
+      <div slot="main">
+        <div class="theater-example">
+          <img
+            alt="cat theater"
+            src="https://archive.org/download/encyclopediaofca0000poll_t2e2/__ia_thumb.jpg"
+          />
+          <h3>Welcome to Cat Theater</h3>
+        </div>
+      </div>
+    `;
+    }
     get headerExample() {
         return html `
-      <div slot="theater-header">
+      <div slot="header">
         <div class="embed-link">
           <img
             src="https://archive.org/images/glogo-jw.png"
             alt="glowing ia logo"
           />
-          <a href="/details/goody"
-            >The history of Little Goody Two-Shoes : otherwise called Mrs.
-            Margery Two-Shoes ... [1766 edition]</a
-          >
+          <a href="/details/goody">
+            The history of Little Goody Two-Shoes : otherwise called Mrs.
+            Margery Two-Shoes ... [1766 edition]
+          </a>
         </div>
       </div>
     `;
     }
+    get isViewAvailable() {
+        if (this.showTheaterExample) {
+            return true;
+        }
+        return false;
+    }
     render() {
+        const { isViewAvailable, loaded, showPlaceholder, headerOn, fullscreen, menuContents, menuShortcuts, showTheaterExample, } = this;
+        console.log('&&&& item nav properties', {
+            loaded,
+            headerOn,
+            isViewAvailable,
+            showTheaterExample,
+            showPlaceholder,
+            fullscreen,
+            menuContents,
+            menuShortcuts,
+        });
         return html `
       <h1>theater, in page</h1>
       <section>
@@ -93,13 +191,22 @@ let AppRoot = class AppRoot extends LitElement {
           .item=${this.itemMD}
           .modal=${this.modalMgr}
           .sharedObserver=${this.sharedObserver}
-          @fullscreenToggled=${this.toggleFS}
+          .loaded=${this.loaded}
+          ?viewAvailable=${!!this.showTheaterExample}
+          .menuContents=${this.menuContents}
+          .menuShortcuts=${this.menuShortcuts}
+          .viewportInFullscreen=${this.fullscreen}
         >
           ${this.headerOn ? this.headerExample : ''}
+          ${this.showTheaterExample ? this.theaterExample : ''}
         </ia-item-navigator>
       </section>
       <div>
         <button @click=${this.toggleHeader}>toggle header</button>
+        <button @click=${this.toggleLoader}>toggle loader</button>
+        <button @click=${this.togglePlaceholder}>toggle placeholder</button>
+        <button @click=${this.toggleTheaterExample}>toggle new theater</button>
+        <button @click=${this.toggleImmersion}>toggle immersion</button>
       </div>
       <modal-manager></modal-manager>
     `;
@@ -131,17 +238,7 @@ AppRoot.styles = css `
       display: block;
       position: relative;
       width: 100%;
-      height: inherit;
-    }
-    ia-item-navigator {
-      height: inherit;
-      min-height: inherit;
-    }
-    div {
-      position: relative;
-      overflow: hidden;
       height: 100%;
-      min-height: inherit;
     }
 
     .embed-link {
@@ -149,6 +246,27 @@ AppRoot.styles = css `
       border: 1px solid yellow;
     }
 
+    .theater-example {
+      color: white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      margin: 10px;
+      border: 5px dotted yellow;
+      flex: 1;
+    }
+
+    div[slot='main'] {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    div[slot='main'] > * {
+      flex: 1;
+    }
+
     modal-manager[mode='closed'] {
       display: none;
     }
@@ -159,21 +277,36 @@ __decorate([
 __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 })
+    property({ type: Array, attribute: false })
+], AppRoot.prototype, "menuContents", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], AppRoot.prototype, "menuShortcuts", void 0);
+__decorate([
+    property({ reflect: true, attribute: true })
 ], AppRoot.prototype, "fullscreen", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: true })
+    property({ reflect: true, attribute: true })
 ], AppRoot.prototype, "headerOn", void 0);
+__decorate([
+    property({ reflect: true, attribute: true })
+], AppRoot.prototype, "loaded", void 0);
+__decorate([
+    property({ reflect: true, attribute: true })
+], AppRoot.prototype, "showPlaceholder", void 0);
+__decorate([
+    property({ reflect: true, attribute: true })
+], AppRoot.prototype, "showTheaterExample", void 0);
+__decorate([
+    query('ia-item-navigator')
+], AppRoot.prototype, "itemNav", void 0);
+__decorate([
+    query('modal-manager')
+], AppRoot.prototype, "modalMgr", void 0);
 AppRoot = __decorate([
     customElement('app-root')
 ], AppRoot);

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

@@ -1 +1 @@
-{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-restricted-globals */\nimport {\n  html,\n  css,\n  LitElement,\n  customElement,\n  property,\n  query,\n  TemplateResult,\n} from 'lit-element';\nimport {\n  MetadataResponse,\n  SearchService,\n} from '@internetarchive/search-service';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/modal-manager';\nimport { ItemNavigator } from '../src/item-navigator';\nimport '../src/item-navigator';\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  /**\n   * Example controller to connect to `<ia-item-navigator>`\n   */\n  @property({ type: Object }) itemMD: MetadataResponse | undefined = undefined;\n\n  @property({ type: String }) encodedManifest = '';\n\n  @query('ia-item-navigator') private itemNav!: ItemNavigator;\n\n  @query('modal-manager') modalMgr!: ModalManager;\n\n  @property({ attribute: false }) sharedObserver = new SharedResizeObserver();\n\n  @property({ type: Boolean, reflect: true, attribute: true }) fullscreen:\n    | boolean\n    | null = null;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) headerOn = false;\n\n  firstUpdated() {\n    this.fetchItemMD();\n    console.log(\n      '<app-root> component has loaded',\n      this.modalMgr,\n      this.sharedObserver\n    );\n  }\n\n  updated(changed: any) {\n    console.log('changed', changed);\n    if (changed.has('itemMD')) {\n      this.fullscreenCheck();\n    }\n  }\n\n  async fetchItemMD() {\n    const searchService = SearchService.default;\n    const mdResponse = await searchService.fetchMetadata('ux-team-books');\n\n    if (mdResponse.error) {\n      console.log('MD Fetch error: ', mdResponse.error);\n      (window as any).confirm(\n        'There was an error fetching response, please check dev console'\n      );\n      return;\n    }\n\n    console.log('mdResponse.success', JSON.stringify(mdResponse.success));\n    this.itemMD = mdResponse.success;\n  }\n\n  get theaterReady(): boolean {\n    return this.modalMgr && this.sharedObserver && !!this.itemMD;\n  }\n\n  get urlParams(): URLSearchParams {\n    return new URLSearchParams(location.search.slice(1));\n  }\n\n  /** Fullscreen */\n  get showFullscreen(): boolean {\n    return this.urlParams.get('view') === 'theater';\n  }\n\n  /** sets url query param `view=theater` to toggle fullscreen */\n  toggleFS(): void {\n    if (this.urlParams.get('view')) {\n      location.search = '';\n    } else {\n      location.search = 'view=theater';\n    }\n  }\n\n  /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */\n  fullscreenCheck(): void {\n    if (this.showFullscreen && this.itemNav) {\n      this.fullscreen = true;\n    }\n  }\n  /** End fullscreen */\n\n  toggleHeader() {\n    this.headerOn = !this.headerOn;\n  }\n\n  /** Views */\n  get headerExample(): TemplateResult {\n    return html`\n      <div slot=\"theater-header\">\n        <div class=\"embed-link\">\n          <img\n            src=\"https://archive.org/images/glogo-jw.png\"\n            alt=\"glowing ia logo\"\n          />\n          <a href=\"/details/goody\"\n            >The history of Little Goody Two-Shoes : otherwise called Mrs.\n            Margery Two-Shoes ... [1766 edition]</a\n          >\n        </div>\n      </div>\n    `;\n  }\n\n  render(): TemplateResult {\n    return html`\n      <h1>theater, in page</h1>\n      <section>\n        <ia-item-navigator\n          baseHost=\"https://archive.org\"\n          .item=${this.itemMD}\n          .modal=${this.modalMgr}\n          .sharedObserver=${this.sharedObserver}\n          @fullscreenToggled=${this.toggleFS}\n        >\n          ${this.headerOn ? this.headerExample : ''}\n        </ia-item-navigator>\n      </section>\n      <div>\n        <button @click=${this.toggleHeader}>toggle header</button>\n      </div>\n      <modal-manager></modal-manager>\n    `;\n  }\n\n  static styles = css`\n    :host([fullscreen]),\n    :host([fullscreen]) section {\n      height: 100vh;\n      width: 100vw;\n    }\n\n    :host([fullscreen]) h1 {\n      display: none;\n    }\n\n    h1 {\n      color: black;\n    }\n\n    section {\n      border: 1px solid pink;\n      color: #222;\n      height: calc(100vh - 200px);\n    }\n\n    :host,\n    ia-item-navigator {\n      display: block;\n      position: relative;\n      width: 100%;\n      height: inherit;\n    }\n    ia-item-navigator {\n      height: inherit;\n      min-height: inherit;\n    }\n    div {\n      position: relative;\n      overflow: hidden;\n      height: 100%;\n      min-height: inherit;\n    }\n\n    .embed-link {\n      height: 55px;\n      border: 1px solid yellow;\n    }\n\n    modal-manager[mode='closed'] {\n      display: none;\n    }\n  `;\n}\n"]}
+{"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';\nimport {\n  MenuShortcutInterface,\n  MenuDetailsInterface,\n} from '../src/interfaces/menu-interfaces';\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;\n\n  @property({ type: String }) encodedManifest = '';\n\n  @property({ attribute: false }) sharedObserver = new SharedResizeObserver();\n\n  @property({ type: Array, attribute: false })\n  menuContents: MenuDetailsInterface[] = [];\n\n  @property({ type: Array, attribute: false })\n  menuShortcuts: MenuShortcutInterface[] = [];\n\n  @property({ reflect: true, attribute: true }) fullscreen:\n    | boolean\n    | null = null;\n\n  @property({ reflect: true, attribute: true }) headerOn: true | null = null;\n\n  @property({ reflect: true, attribute: true }) loaded = true;\n\n  @property({ reflect: true, attribute: true }) showPlaceholder:\n    | true\n    | null = null;\n\n  @property({ reflect: true, attribute: true }) showTheaterExample:\n    | true\n    | null = true;\n\n  @query('ia-item-navigator') private itemNav!: ItemNavigator;\n\n  @query('modal-manager') modalMgr!: ModalManager;\n\n  firstUpdated() {\n    this.fetchItemMD();\n    console.log(\n      '<app-root> component has loaded',\n      this.modalMgr,\n      this.sharedObserver\n    );\n\n    this.itemNav.viewAvailable = false;\n  }\n\n  updated(changed: any) {\n    console.log('changed', changed);\n    if (changed.has('itemMD')) {\n      this.fullscreenCheck();\n    }\n  }\n\n  async fetchItemMD() {\n    const searchService = SearchService.default;\n    const mdResponse = await searchService.fetchMetadata('ux-team-books');\n\n    if (mdResponse.error) {\n      console.log('MD Fetch error: ', mdResponse.error);\n      (window as any).confirm(\n        'There was an error fetching response, please check dev console'\n      );\n      return;\n    }\n\n    console.log('mdResponse.success', JSON.stringify(mdResponse.success));\n    this.itemMD = mdResponse.success;\n  }\n\n  get theaterReady(): boolean {\n    return this.modalMgr && this.sharedObserver && !!this.itemMD;\n  }\n\n  get urlParams(): URLSearchParams {\n    return new URLSearchParams(location.search.slice(1));\n  }\n\n  /** Fullscreen */\n  get showFullscreen(): boolean {\n    return this.urlParams.get('view') === 'theater';\n  }\n\n  /** sets url query param `view=theater` to toggle fullscreen */\n  toggleFS(): void {\n    if (this.urlParams.get('view')) {\n      location.search = '';\n    } else {\n      location.search = 'view=theater';\n    }\n  }\n\n  /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */\n  fullscreenCheck(): void {\n    if (this.showFullscreen && this.itemNav) {\n      this.fullscreen = true;\n    }\n  }\n  /** End fullscreen */\n\n  toggleHeader() {\n    this.headerOn = this.headerOn ? null : true;\n  }\n\n  toggleLoader() {\n    this.loaded = !this.loaded;\n  }\n\n  togglePlaceholder() {\n    this.toggleLoader();\n    const show = this.showPlaceholder ? null : true;\n    this.showPlaceholder = show;\n  }\n\n  toggleImmersion() {\n    const nextState = this.fullscreen ? null : true;\n    if (!nextState) {\n      this.menuShortcuts = [];\n      return;\n    }\n    this.menuShortcuts = [\n      {\n        icon: html`<button\n          @click=${() => {\n            this.fullscreen = null;\n            this.menuContents = [];\n            this.menuShortcuts = [];\n          }}\n        >\n          Exit\n        </button>`,\n        id: 'exit',\n      },\n    ];\n    this.menuContents = [\n      {\n        icon: html`<button\n          @click=${() => {\n            this.fullscreen = null;\n          }}\n        >\n          Exit\n        </button>`,\n        id: 'exit',\n        label: 'Exit',\n        selected: false,\n      },\n    ];\n\n    this.fullscreen = nextState;\n  }\n\n  toggleTheaterExample() {\n    if (this.showTheaterExample) {\n      // turn on placeholder\n      this.showPlaceholder = true;\n      // turn off example\n      this.showTheaterExample = null;\n\n      this.menuContents = [];\n      this.menuShortcuts = [];\n      return;\n    }\n\n    // turn off placeholder\n    this.showPlaceholder = null;\n    this.showTheaterExample = true;\n\n    const x = {\n      icon: html`<p style=\"color: red\">Allo</p>`,\n      id: 'a',\n      label: 'Hello world',\n      menuDetails: html`<h3>Wheee!</h3>`,\n    } as any;\n    this.menuContents = [x];\n    this.menuShortcuts = [x];\n  }\n\n  /** Views */\n  get theaterExample(): TemplateResult {\n    return html`\n      <div slot=\"main\">\n        <div class=\"theater-example\">\n          <img\n            alt=\"cat theater\"\n            src=\"https://archive.org/download/encyclopediaofca0000poll_t2e2/__ia_thumb.jpg\"\n          />\n          <h3>Welcome to Cat Theater</h3>\n        </div>\n      </div>\n    `;\n  }\n\n  get headerExample(): TemplateResult {\n    return html`\n      <div slot=\"header\">\n        <div class=\"embed-link\">\n          <img\n            src=\"https://archive.org/images/glogo-jw.png\"\n            alt=\"glowing ia logo\"\n          />\n          <a href=\"/details/goody\">\n            The history of Little Goody Two-Shoes : otherwise called Mrs.\n            Margery Two-Shoes ... [1766 edition]\n          </a>\n        </div>\n      </div>\n    `;\n  }\n\n  get isViewAvailable(): boolean {\n    if (this.showTheaterExample) {\n      return true;\n    }\n    return false;\n  }\n\n  render(): TemplateResult {\n    const {\n      isViewAvailable,\n      loaded,\n      showPlaceholder,\n      headerOn,\n      fullscreen,\n      menuContents,\n      menuShortcuts,\n      showTheaterExample,\n    } = this;\n    console.log('&&&& item nav properties', {\n      loaded,\n      headerOn,\n      isViewAvailable,\n      showTheaterExample,\n      showPlaceholder,\n      fullscreen,\n      menuContents,\n      menuShortcuts,\n    });\n    return html`\n      <h1>theater, in page</h1>\n      <section>\n        <ia-item-navigator\n          baseHost=\"https://archive.org\"\n          .item=${this.itemMD}\n          .modal=${this.modalMgr}\n          .sharedObserver=${this.sharedObserver}\n          .loaded=${this.loaded}\n          ?viewAvailable=${!!this.showTheaterExample}\n          .menuContents=${this.menuContents}\n          .menuShortcuts=${this.menuShortcuts}\n          .viewportInFullscreen=${this.fullscreen}\n        >\n          ${this.headerOn ? this.headerExample : ''}\n          ${this.showTheaterExample ? this.theaterExample : ''}\n        </ia-item-navigator>\n      </section>\n      <div>\n        <button @click=${this.toggleHeader}>toggle header</button>\n        <button @click=${this.toggleLoader}>toggle loader</button>\n        <button @click=${this.togglePlaceholder}>toggle placeholder</button>\n        <button @click=${this.toggleTheaterExample}>toggle new theater</button>\n        <button @click=${this.toggleImmersion}>toggle immersion</button>\n      </div>\n      <modal-manager></modal-manager>\n    `;\n  }\n\n  static styles = css`\n    :host([fullscreen]),\n    :host([fullscreen]) section {\n      height: 100vh;\n      width: 100vw;\n    }\n\n    :host([fullscreen]) h1 {\n      display: none;\n    }\n\n    h1 {\n      color: black;\n    }\n\n    section {\n      border: 1px solid pink;\n      color: #222;\n      height: calc(100vh - 200px);\n    }\n\n    :host,\n    ia-item-navigator {\n      display: block;\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    .embed-link {\n      height: 55px;\n      border: 1px solid yellow;\n    }\n\n    .theater-example {\n      color: white;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      flex-direction: column;\n      margin: 10px;\n      border: 5px dotted yellow;\n      flex: 1;\n    }\n\n    div[slot='main'] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    div[slot='main'] > * {\n      flex: 1;\n    }\n\n    modal-manager[mode='closed'] {\n      display: none;\n    }\n  `;\n}\n"]}