@internetarchive/ia-item-navigator 1.0.4 → 1.1.0

package/dist/demo/app-root.js

@@ -1,143 +1,144 @@
-import { __decorate } from "tslib";
-/* eslint-disable no-restricted-globals */
-import { html, css, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-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.encodedManifest = '';
-        this.sharedObserver = new SharedResizeObserver();
-        this.menuContents = [];
-        this.menuShortcuts = [];
-        this.fullscreen = null;
-        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);
-        if (changed.has('itemMD')) {
-            this.fullscreenCheck();
-        }
-    }
-    async fetchItemMD() {
-        const searchService = SearchService.default;
-        const mdResponse = await searchService.fetchMetadata('ux-team-books');
-        if (mdResponse.error) {
-            console.log('MD Fetch error: ', mdResponse.error);
-            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';
-    }
-    /** 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;
-        }
-    }
-    /** End fullscreen */
-    toggleHeader() {
-        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 = [
-            {
+import { __decorate } from "tslib";
+/* eslint-disable no-restricted-globals */
+import { html, css, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+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.encodedManifest = '';
+        this.sharedObserver = new SharedResizeObserver();
+        this.menuContents = [];
+        this.menuShortcuts = [];
+        this.fullscreen = null;
+        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);
+        if (changed.has('itemMD')) {
+            this.fullscreenCheck();
+        }
+    }
+    async fetchItemMD() {
+        const searchService = SearchService.default;
+        const mdResponse = await searchService.fetchMetadata('ux-team-books');
+        if (mdResponse.error) {
+            console.log('MD Fetch error: ', mdResponse.error);
+            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';
+    }
+    /** 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;
+        }
+    }
+    /** End fullscreen */
+    toggleHeader() {
+        this.headerOn = this.headerOn ? null : true;
+    }
+    toggleLoader() {
+        const nextState = this.loaded === true ? null : true;
+        this.loaded = nextState;
+    }
+    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 = [];
+          @click=${() => {
+                    this.fullscreen = null;
+                    this.menuContents = [];
+                    this.menuShortcuts = [];
                 }}
         >
           Exit
-        </button>`,
-                id: 'exit',
-            },
-        ];
-        this.menuContents = [
-            {
+        </button>`,
+                id: 'exit',
+            },
+        ];
+        this.menuContents = [
+            {
                 icon: html `<button
-          @click=${() => {
-                    this.fullscreen = null;
+          @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() {
+        </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">
@@ -148,9 +149,9 @@ let AppRoot = class AppRoot extends LitElement {
           <h3>Welcome to Cat Theater</h3>
         </div>
       </div>
-    `;
-    }
-    get headerExample() {
+    `;
+    }
+    get headerExample() {
         return html `
       <div slot="header">
         <div class="embed-link">
@@ -164,26 +165,26 @@ let AppRoot = class AppRoot extends LitElement {
           </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,
-        });
+    `;
+    }
+    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>
@@ -210,9 +211,9 @@ let AppRoot = class AppRoot extends LitElement {
         <button @click=${this.toggleImmersion}>toggle immersion</button>
       </div>
       <modal-manager></modal-manager>
-    `;
-    }
-};
+    `;
+    }
+};
 AppRoot.styles = css `
     :host([fullscreen]),
     :host([fullscreen]) section {
@@ -271,45 +272,45 @@ AppRoot.styles = css `
     modal-manager[mode='closed'] {
       display: none;
     }
-  `;
-__decorate([
-    property({ type: Object })
-], AppRoot.prototype, "itemMD", void 0);
-__decorate([
-    property({ type: String })
-], AppRoot.prototype, "encodedManifest", void 0);
-__decorate([
-    property({ attribute: false })
-], AppRoot.prototype, "sharedObserver", void 0);
-__decorate([
-    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({ 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);
-export { AppRoot };
+  `;
+__decorate([
+    property({ type: Object })
+], AppRoot.prototype, "itemMD", void 0);
+__decorate([
+    property({ type: String })
+], AppRoot.prototype, "encodedManifest", void 0);
+__decorate([
+    property({ attribute: false })
+], AppRoot.prototype, "sharedObserver", void 0);
+__decorate([
+    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({ 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);
+export { AppRoot };
 //# sourceMappingURL=app-root.js.map

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 { html, css, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\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"]}
+{"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 { html, css, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\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  MenuProviderInterface,\n} from '../src/interfaces/menu-interfaces';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  /**\n   * Example controller to connect to `<ia-item-navigator>`\n   */\n  @property({ type: Object }) itemMD?: MetadataResponse;\n\n  @property({ type: String }) encodedManifest = '';\n\n  @property({ attribute: false }) sharedObserver = new SharedResizeObserver();\n\n  @property({ type: Array, attribute: false })\n  menuContents: MenuProviderInterface[] = [];\n\n  @property({ type: Array, attribute: false })\n  menuShortcuts: MenuShortcutInterface[] = [];\n\n  @property({ reflect: true, attribute: true }) fullscreen: boolean | null =\n    null;\n\n  @property({ reflect: true, attribute: true }) headerOn: true | null = null;\n\n  @property({ reflect: true, attribute: true }) loaded: true | null = true;\n\n  @property({ reflect: true, attribute: true }) showPlaceholder: true | null =\n    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    const nextState = this.loaded === true ? null : true;\n    this.loaded = nextState;\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    ] as any as MenuProviderInterface[];\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"]}

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { ItemNavigator } from './src/item-navigator';
-export { MenuButton } from './src/menu-slider/menu-button';
-export { IaMenuSlider } from './src/menu-slider/ia-menu-slider';
+export { ItemNavigator } from './src/item-navigator';
+export { MenuButton } from './src/menu-slider/menu-button';
+export { IaMenuSlider } from './src/menu-slider/ia-menu-slider';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { ItemNavigator } from './src/item-navigator';
-export { MenuButton } from './src/menu-slider/menu-button';
-export { IaMenuSlider } from './src/menu-slider/ia-menu-slider';
+export { ItemNavigator } from './src/item-navigator';
+export { MenuButton } from './src/menu-slider/menu-button';
+export { IaMenuSlider } from './src/menu-slider/ia-menu-slider';
 //# sourceMappingURL=index.js.map

package/dist/src/interfaces/custom-theater-interface.d.ts

@@ -1,20 +1,20 @@
-import { LitElement } from 'lit';
-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;
-}
+import { LitElement } from 'lit';
+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

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

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

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

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

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=event-interfaces.js.map