@internetarchive/ia-item-navigator 1.0.4 → 1.1.0

package/.github/workflows/ci.yml

@@ -11,12 +11,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
       with:
-        node-version: 15.x
+        node-version: 16.x
 
-    - name: Install dependencies 
+    - name: Install dependencies
       run: yarn install
 
     - name: Run tests
@@ -24,4 +24,3 @@ jobs:
 
     - name: Upload reports
       run: npx codecov
-      

package/.github/workflows/gh-pages-main.yml

@@ -0,0 +1,39 @@
+# This workflow will generate the static page under `main` subdirectory inside the `gh-pages` branch
+
+# This workflow will run every time new changes were pushed to the `main` branch
+
+name: App build CI/CD to main branch
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Install dependencies
+        run: yarn install
+  
+      - name: Create build files for gh-pages deploy
+        run: yarn ghpages:build
+
+      # Reference: https://github.com/JamesIves/github-pages-deploy-action
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
+        with:
+          branch: gh-pages
+          folder: ghpages
+          clean-exclude: pr/
+          force: false
+          target-folder: main
+          token: ${{ secrets.GH_TOKEN }}

package/.github/workflows/pr-preview.yml

@@ -0,0 +1,38 @@
+# This workflow will generate the static page under `pr` subdirectory inside the `gh-pages` branch
+
+# This workflow will run every time there's a PR opened, reopened, synchronize, or closed
+
+name: Deploy PR previews
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+concurrency: preview-${{ github.ref }}
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Install and Build
+        run: |
+          yarn install
+          yarn ghpages:build
+
+      # Reference: https://github.com/rossjrw/pr-preview-action
+      - name: Deploy preview
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ./ghpages/
+          umbrella-dir: pr

package/demo/app-root.ts

@@ -12,8 +12,9 @@ import { ItemNavigator } from '../src/item-navigator';
 import '../src/item-navigator';
 import {
   MenuShortcutInterface,
-  MenuDetailsInterface,
+  MenuProviderInterface,
 } from '../src/interfaces/menu-interfaces';
+
 @customElement('app-root')
 export class AppRoot extends LitElement {
   /**
@@ -26,22 +27,20 @@ export class AppRoot extends LitElement {
   @property({ attribute: false }) sharedObserver = new SharedResizeObserver();
 
   @property({ type: Array, attribute: false })
-  menuContents: MenuDetailsInterface[] = [];
+  menuContents: MenuProviderInterface[] = [];
 
   @property({ type: Array, attribute: false })
   menuShortcuts: MenuShortcutInterface[] = [];
 
-  @property({ reflect: true, attribute: true }) fullscreen:
-    | boolean
-    | null = null;
+  @property({ reflect: true, attribute: true }) fullscreen: boolean | null =
+    null;
 
   @property({ reflect: true, attribute: true }) headerOn: true | null = null;
 
-  @property({ reflect: true, attribute: true }) loaded = true;
+  @property({ reflect: true, attribute: true }) loaded: true | null = true;
 
-  @property({ reflect: true, attribute: true }) showPlaceholder:
-    | true
-    | null = null;
+  @property({ reflect: true, attribute: true }) showPlaceholder: true | null =
+    null;
 
   @property({ reflect: true, attribute: true }) showTheaterExample:
     | true
@@ -56,7 +55,7 @@ export class AppRoot extends LitElement {
     console.log(
       '<app-root> component has loaded',
       this.modalMgr,
-      this.sharedObserver
+      this.sharedObserver,
     );
 
     this.itemNav.viewAvailable = false;
@@ -76,7 +75,7 @@ export class AppRoot extends LitElement {
     if (mdResponse.error) {
       console.log('MD Fetch error: ', mdResponse.error);
       (window as any).confirm(
-        'There was an error fetching response, please check dev console'
+        'There was an error fetching response, please check dev console',
       );
       return;
     }
@@ -120,7 +119,8 @@ export class AppRoot extends LitElement {
   }
 
   toggleLoader() {
-    this.loaded = !this.loaded;
+    const nextState = this.loaded === true ? null : true;
+    this.loaded = nextState;
   }
 
   togglePlaceholder() {
@@ -162,7 +162,7 @@ export class AppRoot extends LitElement {
         label: 'Exit',
         selected: false,
       },
-    ];
+    ] as any as MenuProviderInterface[];
 
     this.fullscreen = nextState;
   }

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

@@ -1,47 +1,47 @@
-import { LitElement, TemplateResult } from 'lit';
-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';
-import { MenuShortcutInterface, MenuDetailsInterface } from '../src/interfaces/menu-interfaces';
-export declare class AppRoot extends LitElement {
-    /**
-     * Example controller to connect to `<ia-item-navigator>`
-     */
-    itemMD?: MetadataResponse;
-    encodedManifest: string;
-    sharedObserver: SharedResizeObserver;
-    menuContents: MenuDetailsInterface[];
-    menuShortcuts: MenuShortcutInterface[];
-    fullscreen: boolean | null;
-    headerOn: true | null;
-    loaded: boolean;
-    showPlaceholder: true | null;
-    showTheaterExample: true | null;
-    private itemNav;
-    modalMgr: ModalManager;
-    firstUpdated(): void;
-    updated(changed: any): void;
-    fetchItemMD(): Promise<void>;
-    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 */
-    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").CSSResult;
-}
+import { LitElement, TemplateResult } from 'lit';
+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';
+import { MenuShortcutInterface, MenuProviderInterface } from '../src/interfaces/menu-interfaces';
+export declare class AppRoot extends LitElement {
+    /**
+     * Example controller to connect to `<ia-item-navigator>`
+     */
+    itemMD?: MetadataResponse;
+    encodedManifest: string;
+    sharedObserver: SharedResizeObserver;
+    menuContents: MenuProviderInterface[];
+    menuShortcuts: MenuShortcutInterface[];
+    fullscreen: boolean | null;
+    headerOn: true | null;
+    loaded: true | null;
+    showPlaceholder: true | null;
+    showTheaterExample: true | null;
+    private itemNav;
+    modalMgr: ModalManager;
+    firstUpdated(): void;
+    updated(changed: any): void;
+    fetchItemMD(): Promise<void>;
+    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 */
+    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").CSSResult;
+}