@internetarchive/ia-item-navigator - npm Package Compare versions

Comparing version 0.0.0-a13 to 0.0.0-a14

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

@@ -1,2 +0,2 @@
-import { IntMenuProvider, IntMenuShortcut } from './menu-interfaces';
+import { IntMenuProvider, IntMenuShortcut, MenuId } from './menu-interfaces';
 /** Toggles Menu && Sets open panel */
@@ -6,3 +6,3 @@ export interface IntManageSideMenuEvent extends CustomEvent {
     detail: {
-        menuId: string | undefined | '';
+        menuId: MenuId | undefined | '';
         action: 'open' | 'toggle' | '';
@@ -15,3 +15,3 @@ };
     detail: {
-        id: string /** name of menu to open */;
+        id: MenuId | '';
     };
@@ -18,0 +18,0 @@ }

dist/src/item-navigator.d.ts

@@ -16,3 +16,3 @@ import { LitElement, PropertyValues, CSSResult } from 'lit-element';
 export declare class ItemNavigator extends LitElement implements SharedResizeObserverResizeHandlerInterface {
-    item: MetadataResponse | undefined;
+    item?: MetadataResponse;
     itemType?: ItemType;
@@ -19,0 +19,0 @@ baseHost: string;

dist/src/item-navigator.js

@@ -16,3 +16,2 @@ import { __decorate } from "tslib";
         super(...arguments);
-        this.item = undefined;
         this.baseHost = 'archive.org';
@@ -156,4 +155,3 @@ this.signedIn = false;
     get shouldRenderMenu() {
-        return true;
-        // return !!this.menuContents.length;
+        return !!this.menuContents.length;
     }
@@ -439,11 +437,2 @@ toggleMenu() {
 __decorate([
-    property({
-        type: Array,
-        hasChanged: (newVal, oldVal) => {
-            if (newVal !== oldVal) {
-                return true;
-            }
-            return false;
-        },
-    }),
     property({ type: Array })
@@ -450,0 +439,0 @@ ], ItemNavigator.prototype, "menuContents", void 0);

dist/test/ia-item-navigator.test.js

@@ -92,2 +92,3 @@ /* eslint-disable camelcase */
             expect(el.sharedObserver).to.equal(sharedObserver);
+            expect(typeof el.handleResize).to.equal('function');
         });
@@ -117,2 +118,18 @@ it('freshly registers handler', async () => {
         });
+        it('sets menu to overlay if container width is <= 600px', async () => {
+            const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
+            expect(el.openMenuState).to.equal('shift'); // as starting point
+            const overlaySize = {
+                contentRect: { width: 600 },
+            };
+            el.handleResize(overlaySize);
+            await el.updateComplete;
+            expect(el.openMenuState).to.equal('overlay'); // changes open menu display to an overlay
+            const shiftSize = {
+                contentRect: { width: 601 },
+            };
+            el.handleResize(shiftSize);
+            await el.updateComplete;
+            expect(el.openMenuState).to.equal('shift');
+        });
     });
@@ -135,2 +152,22 @@ describe('`el.modal`', () => {
         });
+        it('@ViewportInFullScreen', async () => {
+            const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
+            expect(el.viewportInFullscreen).to.be.null;
+            const yesFullscreenEvent = {
+                detail: {
+                    isFullScreen: true,
+                },
+            };
+            el.manageViewportFullscreen(yesFullscreenEvent);
+            await el.updateComplete;
+            expect(el.viewportInFullscreen).to.be.true;
+            const noFullscreenEvent = {
+                detail: {
+                    isFullScreen: false,
+                },
+            };
+            el.manageViewportFullscreen(noFullscreenEvent);
+            await el.updateComplete;
+            expect(el.viewportInFullscreen).to.be.null;
+        });
     });
@@ -179,2 +216,26 @@ /* Side menu & shortcuts tests */
             expect(frame === null || frame === void 0 ? void 0 : frame.getAttribute('class')).to.contain('open');
+            // no menu provided
+            const openShortcutSpy = Sinon.spy(el, 'openShortcut');
+            const toggleMenuSpy = Sinon.spy(el, 'toggleMenu');
+            const noMenuProvidedEvent = new CustomEvent('updateSideMenu', {
+                detail: {},
+            });
+            el.manageSideMenuEvents(noMenuProvidedEvent);
+            await el.updateComplete;
+            expect(openShortcutSpy.called).to.be.false;
+            expect(toggleMenuSpy.called).to.be.false;
+            // toggle menu
+            const toggleMenuEvent = new CustomEvent('updateSideMenu', {
+                detail: { action: 'toggle', menuId: 'fullscreen' },
+            });
+            el.manageSideMenuEvents(toggleMenuEvent);
+            await el.updateComplete;
+            expect(toggleMenuSpy.callCount).to.equal(1);
+            // open menu
+            const openMenuEvent = new CustomEvent('updateSideMenu', {
+                detail: { action: 'open', menuId: 'fullscreen' },
+            });
+            el.manageSideMenuEvents(openMenuEvent);
+            await el.updateComplete;
+            expect(openShortcutSpy.callCount).to.equal(1);
         });
@@ -200,16 +261,66 @@ });
         it('displays shortcut & toggle side menu button', async () => {
-            var _a, _b;
+            var _a;
             const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            const anotherShortcut = {
+                id: 'foo',
+                icon: html `<i class="foo-shortcut"></i>`,
+            };
             el.menuContents = [menuProvider];
-            el.menuShortcuts = [shortcut];
+            el.menuShortcuts = [shortcut, anotherShortcut];
             await el.updateComplete;
             const nav = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nav');
+            const shortcutsContainer = nav === null || nav === void 0 ? void 0 : nav.querySelector('.shortcuts');
             expect(el.menuShortcuts.length).to.exist;
             expect(nav).to.exist;
-            expect(nav === null || nav === void 0 ? void 0 : nav.querySelector('.shortcuts')).to.exist;
-            expect((_b = nav === null || nav === void 0 ? void 0 : nav.querySelector('.shortcuts')) === null || _b === void 0 ? void 0 : _b.querySelector('i.fullscreen-test')).to.exist;
+            expect(shortcutsContainer).to.exist;
+            expect(shortcutsContainer === null || shortcutsContainer === void 0 ? void 0 : shortcutsContainer.querySelector('i.fullscreen-test')).to.exist;
+            expect(shortcutsContainer === null || shortcutsContainer === void 0 ? void 0 : shortcutsContainer.querySelector('button.shortcut.foo')).to.exist;
             expect(nav === null || nav === void 0 ? void 0 : nav.querySelector('.toggle-menu')).to.exist;
         });
     });
+    describe('Menu events', () => {
+        it('`el.setMenuShortcuts`', async () => {
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            expect(el.menuShortcuts.length).to.equal(0);
+            const menuShortcuts = [shortcut];
+            el.setMenuShortcuts({
+                detail: menuShortcuts,
+            });
+            await el.updateComplete;
+            expect(el.menuShortcuts.length).to.equal(1);
+        });
+        it('`el.setMenuContents`', async () => {
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            expect(el.menuContents.length).to.equal(0);
+            el.setMenuShortcuts({
+                detail: [menuProvider],
+            });
+            await el.updateComplete;
+            expect(el.menuShortcuts.length).to.equal(1);
+        });
+        it('`el.setOpenMenu`', async () => {
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            el.setOpenMenu({
+                detail: { id: 'foo' },
+            });
+            await el.updateComplete;
+            expect(el.openMenu).to.equal('foo');
+            // toggles it off
+            el.setOpenMenu({
+                detail: { id: 'foo' },
+            });
+            await el.updateComplete;
+            expect(el.openMenu).to.equal('');
+        });
+        it('`el.closeMenu`', async () => {
+            const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            el.menuOpened = true;
+            await el.updateComplete;
+            expect(el.menuOpened).to.be.true;
+            el.closeMenu();
+            await el.updateComplete;
+            expect(el.menuOpened).to.be.false;
+        });
+    });
 });
 //# sourceMappingURL=ia-item-navigator.test.js.map

package.json

 {
   "name": "@internetarchive/ia-item-navigator",
-  "version": "0.0.0-a13",
+  "version": "0.0.0-a14",
   "description": "Internet Archive's Item Navigator, visually eplore an item's contents.",
@@ -5,0 +5,0 @@ "author": "Internet Archive",

src/interfaces/event-interfaces.ts

@@ -1,2 +0,2 @@
-import { IntMenuProvider, IntMenuShortcut } from './menu-interfaces';
+import { IntMenuProvider, IntMenuShortcut, MenuId } from './menu-interfaces';
 
@@ -7,3 +7,3 @@ /** Toggles Menu && Sets open panel */
   detail: {
-    menuId: string | undefined | '';
+    menuId: MenuId | undefined | '';
     action: 'open' | 'toggle' | '';
@@ -17,3 +17,3 @@ };
   detail: {
-    id: string /** name of menu to open */;
+    id: MenuId | '';
   };
@@ -20,0 +20,0 @@ }

src/item-navigator.ts

@@ -56,3 +56,3 @@ import {
   })
-  item: MetadataResponse | undefined = undefined;
+  item?: MetadataResponse;
 
@@ -73,13 +73,3 @@ @property({ type: String }) itemType?: ItemType;
 
-  @property({
-    type: Array,
-    hasChanged: (newVal: Array<object>, oldVal: Array<object>) => {
-      if (newVal !== oldVal) {
-        return true;
-      }
-      return false;
-    },
-  })
-  @property({ type: Array })
-  menuContents: IntMenuProvider[] = [];
+  @property({ type: Array }) menuContents: IntMenuProvider[] = [];
 
@@ -255,4 +245,3 @@ @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];
   get shouldRenderMenu(): boolean {
-    return true;
-    // return !!this.menuContents.length;
+    return !!this.menuContents.length;
   }
@@ -259,0 +248,0 @@

test/ia-item-navigator.test.ts

@@ -13,3 +13,9 @@ /* eslint-disable camelcase */
 import { ItemStub, menuProvider, shortcut } from '../test/ia-stub';
-import { IntManageSideMenuEvent } from '../src/interfaces/event-interfaces';
+import {
+  IntManageFullscreenEvent,
+  IntManageSideMenuEvent,
+  IntSetMenuContentsEvent,
+  IntSetMenuShortcutsEvent,
+  IntSetOpenMenuEvent,
+} from '../src/interfaces/event-interfaces';
 
@@ -124,2 +130,3 @@ afterEach(() => {
       expect(el.sharedObserver).to.equal(sharedObserver);
+      expect(typeof el.handleResize).to.equal('function');
     });
@@ -159,2 +166,25 @@ it('freshly registers handler', async () => {
     });
+    it('sets menu to overlay if container width is <= 600px', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator></ia-item-navigator>`
+      );
+
+      expect(el.openMenuState).to.equal('shift'); // as starting point
+
+      const overlaySize = {
+        contentRect: { width: 600 },
+      } as ResizeObserverEntry;
+      el.handleResize(overlaySize);
+      await el.updateComplete;
+
+      expect(el.openMenuState).to.equal('overlay'); // changes open menu display to an overlay
+
+      const shiftSize = {
+        contentRect: { width: 601 },
+      } as ResizeObserverEntry;
+      el.handleResize(shiftSize);
+      await el.updateComplete;
+
+      expect(el.openMenuState).to.equal('shift');
+    });
   });
@@ -185,2 +215,26 @@
     });
+    it('@ViewportInFullScreen', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator></ia-item-navigator>`
+      );
+      expect(el.viewportInFullscreen).to.be.null;
+
+      const yesFullscreenEvent = {
+        detail: {
+          isFullScreen: true,
+        },
+      } as IntManageFullscreenEvent;
+      el.manageViewportFullscreen(yesFullscreenEvent);
+      await el.updateComplete;
+      expect(el.viewportInFullscreen).to.be.true;
+
+      const noFullscreenEvent = {
+        detail: {
+          isFullScreen: false,
+        },
+      } as IntManageFullscreenEvent;
+      el.manageViewportFullscreen(noFullscreenEvent);
+      await el.updateComplete;
+      expect(el.viewportInFullscreen).to.be.null;
+    });
   });
@@ -247,2 +301,33 @@
       expect(frame?.getAttribute('class')).to.contain('open');
+
+      // no menu provided
+      const openShortcutSpy = Sinon.spy(el, 'openShortcut');
+      const toggleMenuSpy = Sinon.spy(el, 'toggleMenu');
+
+      const noMenuProvidedEvent = new CustomEvent('updateSideMenu', {
+        detail: {},
+      }) as any;
+      el.manageSideMenuEvents(noMenuProvidedEvent);
+      await el.updateComplete;
+
+      expect(openShortcutSpy.called).to.be.false;
+      expect(toggleMenuSpy.called).to.be.false;
+
+      // toggle menu
+      const toggleMenuEvent = new CustomEvent('updateSideMenu', {
+        detail: { action: 'toggle', menuId: 'fullscreen' },
+      }) as any;
+      el.manageSideMenuEvents(toggleMenuEvent);
+      await el.updateComplete;
+
+      expect(toggleMenuSpy.callCount).to.equal(1);
+
+      // open menu
+      const openMenuEvent = new CustomEvent('updateSideMenu', {
+        detail: { action: 'open', menuId: 'fullscreen' },
+      }) as any;
+      el.manageSideMenuEvents(openMenuEvent);
+      await el.updateComplete;
+
+      expect(openShortcutSpy.callCount).to.equal(1);
     });
@@ -278,4 +363,8 @@ });
 
+      const anotherShortcut = {
+        id: 'foo',
+        icon: html`<i class="foo-shortcut"></i>`,
+      };
       el.menuContents = [menuProvider];
-      el.menuShortcuts = [shortcut];
+      el.menuShortcuts = [shortcut, anotherShortcut];
       await el.updateComplete;
@@ -285,11 +374,77 @@
 
+      const shortcutsContainer = nav?.querySelector('.shortcuts');
       expect(el.menuShortcuts.length).to.exist;
       expect(nav).to.exist;
-      expect(nav?.querySelector('.shortcuts')).to.exist;
-      expect(
-        nav?.querySelector('.shortcuts')?.querySelector('i.fullscreen-test')
-      ).to.exist;
+      expect(shortcutsContainer).to.exist;
+      expect(shortcutsContainer?.querySelector('i.fullscreen-test')).to.exist;
+      expect(shortcutsContainer?.querySelector('button.shortcut.foo')).to.exist;
       expect(nav?.querySelector('.toggle-menu')).to.exist;
     });
   });
+
+  describe('Menu events', () => {
+    it('`el.setMenuShortcuts`', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
+      );
+      expect(el.menuShortcuts.length).to.equal(0);
+
+      const menuShortcuts = [shortcut];
+
+      el.setMenuShortcuts({
+        detail: menuShortcuts,
+      } as IntSetMenuShortcutsEvent);
+      await el.updateComplete;
+
+      expect(el.menuShortcuts.length).to.equal(1);
+    });
+    it('`el.setMenuContents`', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
+      );
+      expect(el.menuContents.length).to.equal(0);
+
+      el.setMenuShortcuts({
+        detail: [menuProvider],
+      } as IntSetMenuContentsEvent);
+      await el.updateComplete;
+
+      expect(el.menuShortcuts.length).to.equal(1);
+    });
+    it('`el.setOpenMenu`', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
+      );
+
+      el.setOpenMenu({
+        detail: { id: 'foo' },
+      } as IntSetOpenMenuEvent);
+      await el.updateComplete;
+
+      expect(el.openMenu).to.equal('foo');
+
+      // toggles it off
+      el.setOpenMenu({
+        detail: { id: 'foo' },
+      } as IntSetOpenMenuEvent);
+      await el.updateComplete;
+
+      expect(el.openMenu).to.equal('');
+    });
+    it('`el.closeMenu`', async () => {
+      const el = await fixture<ItemNavigator>(
+        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
+      );
+
+      el.menuOpened = true;
+      await el.updateComplete;
+
+      expect(el.menuOpened).to.be.true;
+
+      el.closeMenu();
+      await el.updateComplete;
+
+      expect(el.menuOpened).to.be.false;
+    });
+  });
 });

No alert changes

Improved metrics

Total package byte prevSize

551116

increased by3.4%

Lines of code

4897

increased by4.61%

No dependency changes