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

Comparing version 0.0.4-4 to 0.0.4

demo/app-root.ts

@@ -48,2 +48,4 @@ /* eslint-disable no-restricted-globals */
     );
+
+    this.itemNav.viewAvailable = false;
   }
@@ -111,3 +113,3 @@
     return html`
-      <div slot="theater-header">
+      <div slot="header">
         <div class="embed-link">
@@ -118,6 +120,6 @@ <img
           />
-          <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>
@@ -137,2 +139,3 @@ </div>
           .sharedObserver=${this.sharedObserver}
+          .loaded=${true}
           @fullscreenToggled=${this.toggleFS}
@@ -139,0 +142,0 @@ >

dist/demo/app-root.js

@@ -23,2 +23,3 @@ import { __decorate } from "tslib";
         console.log('<app-root> component has loaded', this.modalMgr, this.sharedObserver);
+        this.itemNav.viewAvailable = false;
     }
@@ -74,3 +75,3 @@ updated(changed) {
         return html `
-      <div slot="theater-header">
+      <div slot="header">
         <div class="embed-link">
@@ -81,6 +82,6 @@ <img
           />
-          <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>
@@ -99,2 +100,3 @@ </div>
           .sharedObserver=${this.sharedObserver}
+          .loaded=${true}
           @fullscreenToggled=${this.toggleFS}
@@ -101,0 +103,0 @@ >

dist/src/item-navigator.d.ts

@@ -12,8 +12,5 @@ import { LitElement, PropertyValues, CSSResult } from 'lit-element';
 import './no-theater-available';
-export declare enum ItemType {
-    OPEN = "open"
-}
 export declare class ItemNavigator extends LitElement implements SharedResizeObserverResizeHandlerInterface {
     item?: MetadataResponse;
-    itemType?: ItemType;
+    viewAvailable: Boolean;
     baseHost: string;
@@ -20,0 +17,0 @@ signedIn: boolean;

dist/src/item-navigator.js

@@ -9,9 +9,6 @@ import { __decorate } from "tslib";
 import './no-theater-available';
-export var ItemType;
-(function (ItemType) {
-    ItemType["OPEN"] = "open";
-})(ItemType || (ItemType = {}));
 let ItemNavigator = class ItemNavigator extends LitElement {
     constructor() {
         super(...arguments);
+        this.viewAvailable = true;
         this.baseHost = 'archive.org';
@@ -100,3 +97,3 @@ this.signedIn = false;
         <slot
-          name="theater-header"
+          name="header"
           @slotchange=${(e) => this.slotChange(e, 'header')}
@@ -122,6 +119,3 @@ ></slot>
     get renderViewport() {
-        if (!this.item) {
-            return nothing;
-        }
-        if (this.itemType !== ItemType.OPEN) {
+        if (!this.viewAvailable) {
             return this.noTheaterView;
@@ -131,5 +125,5 @@ }
         return html `
-      <div slot="theater-main" style=${slotVisibility}>
+      <div slot="main" style=${slotVisibility}>
         <slot
-          name="theater-main"
+          name="main"
           style=${this.readerHeightStyle}
@@ -433,4 +427,4 @@ @slotchange=${(e) => this.slotChange(e, 'main')}
 __decorate([
-    property({ type: String })
-], ItemNavigator.prototype, "itemType", void 0);
+    property({ type: Boolean })
+], ItemNavigator.prototype, "viewAvailable", void 0);
 __decorate([
@@ -480,6 +474,6 @@ property({ type: String })
 __decorate([
-    query('slot[name="theater-header"]')
+    query('slot[name="header"]')
 ], ItemNavigator.prototype, "headerSlot", void 0);
 __decorate([
-    query('slot[name="theater-main"]')
+    query('slot[name="main"]')
 ], ItemNavigator.prototype, "mainSlot", void 0);
@@ -486,0 +480,0 @@ ItemNavigator = __decorate([

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

@@ -6,3 +6,2 @@ /* eslint-disable camelcase */
 import { ModalManager } from '@internetarchive/modal-manager';
-import { ItemType } from '../src/item-navigator';
 import '../src/item-navigator';
@@ -15,18 +14,17 @@ import { ItemStub, menuProvider, shortcut } from '../test/ia-stub';
     describe('Theaters', () => {
-        it('shows <ia-no-theater-available> by default', async () => {
+        it('shows <ia-no-theater-available> if told', async () => {
             var _a;
             const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            el.viewAvailable = false;
+            await el.updateComplete;
+            expect(el.viewAvailable).to.be.false;
             expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-no-theater-available')).to.exist;
-            expect(el.itemType).to.not.equal(ItemType.OPEN);
         });
-        it('opens main slot when itemType = open', async () => {
+        it('opens main slot by default', async () => {
             var _a, _b;
             const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
-            el.itemType = ItemType.OPEN;
-            await el.updateComplete;
-            expect(el.itemType).to.equal(ItemType.OPEN);
+            expect(el.viewAvailable).to.be.true;
             expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-no-theater-available')).to.be
                 .null;
-            expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="theater-main"]')).to
-                .exist;
+            expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="main"]')).to.exist;
         });
@@ -49,2 +47,4 @@ });
             const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
+            el.loaded = true;
+            await el.updateComplete;
             const mainTheaterSection = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#reader');
@@ -55,5 +55,5 @@ expect(mainTheaterSection === null || mainTheaterSection === void 0 ? void 0 : mainTheaterSection.classList.contains('hide')).to.be.false;
             expect(el.hasAttribute('loaded')).to.equal(true);
-            expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ia-no-theater-available')).to.exist;
+            expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="main"]')).to.exist;
         });
-        it('listens to `@loadingStateUpdated` to update `loaded`', async () => {
+        it('listens to `@loadingStateUpdated` to update `loaded` for <no-theater-available>', async () => {
             const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
@@ -64,2 +64,3 @@ await el.updateComplete;
             el.loaded = null;
+            el.viewAvailable = false;
             await el.updateComplete;
@@ -69,5 +70,2 @@ // check base properties
             expect(el.item).to.be.undefined;
-            // hydrate item
-            el.item = new ItemStub();
-            await el.updateComplete;
             // spy fires
@@ -74,0 +72,0 @@ expect(spy.called).to.equal(true);

package.json

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

README.md

@@ -16,6 +16,3 @@ [![Build Status](https://travis-ci.com/internetarchive/iaux-item-navigator.svg?branch=master)](https://travis-ci.com/internetarchive/iaux-item-navigator) [![codecov](https://codecov.io/gh/internetarchive/iaux-item-navigator/branch/master/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-item-navigator)
 
-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.
 
@@ -28,10 +25,2 @@ ## Usage
 ```
-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>
-```
 
@@ -38,0 +27,0 @@ ## Local Demo with `web-dev-server`

src/item-navigator.ts

@@ -40,5 +40,2 @@ import {
 
-export enum ItemType {
-  OPEN = 'open',
-}
 @customElement('ia-item-navigator')
@@ -59,3 +56,3 @@ export class ItemNavigator
 
-  @property({ type: String }) itemType?: ItemType;
+  @property({ type: Boolean }) viewAvailable: Boolean = true;
 
@@ -97,5 +94,5 @@ @property({ type: String }) baseHost = 'archive.org';
 
-  @query('slot[name="theater-header"]') private headerSlot!: HTMLSlotElement;
+  @query('slot[name="header"]') private headerSlot!: HTMLSlotElement;
 
-  @query('slot[name="theater-main"]') private mainSlot!: HTMLSlotElement;
+  @query('slot[name="main"]') private mainSlot!: HTMLSlotElement;
 
@@ -189,3 +186,3 @@ disconnectedCallback() {
         <slot
-          name="theater-header"
+          name="header"
           @slotchange=${(e: Event) => this.slotChange(e, 'header')}
@@ -212,6 +209,3 @@ ></slot>
   get renderViewport(): TemplateResult | typeof nothing {
-    if (!this.item) {
-      return nothing;
-    }
-    if (this.itemType !== ItemType.OPEN) {
+    if (!this.viewAvailable) {
       return this.noTheaterView;
@@ -222,5 +216,5 @@ }
     return html`
-      <div slot="theater-main" style=${slotVisibility}>
+      <div slot="main" style=${slotVisibility}>
         <slot
-          name="theater-main"
+          name="main"
           style=${this.readerHeightStyle}
@@ -227,0 +221,0 @@ @slotchange=${(e: Event) => this.slotChange(e, 'main')}

test/ia-item-navigator.test.ts

@@ -7,3 +7,3 @@ /* eslint-disable camelcase */
 import { ModalManager } from '@internetarchive/modal-manager';
-import { ItemNavigator, ItemType } from '../src/item-navigator';
+import { ItemNavigator } from '../src/item-navigator';
 import '../src/item-navigator';
@@ -26,21 +26,20 @@
   describe('Theaters', () => {
-    it('shows <ia-no-theater-available> by default', async () => {
+    it('shows <ia-no-theater-available> if told', async () => {
       const el = await fixture<ItemNavigator>(
         html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
       );
+      el.viewAvailable = false;
+      await el.updateComplete;
+      expect(el.viewAvailable).to.be.false;
       expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.exist;
-      expect(el.itemType).to.not.equal(ItemType.OPEN);
     });
-    it('opens main slot when itemType = open', async () => {
+    it('opens main slot by default', async () => {
       const el = await fixture<ItemNavigator>(
         html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`
       );
-      el.itemType = ItemType.OPEN;
-      await el.updateComplete;
 
-      expect(el.itemType).to.equal(ItemType.OPEN);
+      expect(el.viewAvailable).to.be.true;
       expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.be
         .null;
-      expect(el.shadowRoot?.querySelector('slot[name="theater-main"]')).to
-        .exist;
+      expect(el.shadowRoot?.querySelector('slot[name="main"]')).to.exist;
     });
@@ -70,2 +69,4 @@ });
 
+      el.loaded = true;
+      await el.updateComplete;
       const mainTheaterSection = el.shadowRoot?.querySelector('#reader');
@@ -76,5 +77,5 @@ expect(mainTheaterSection?.classList.contains('hide')).to.be.false;
       expect(el.hasAttribute('loaded')).to.equal(true);
-      expect(el.shadowRoot?.querySelector('ia-no-theater-available')).to.exist;
+      expect(el.shadowRoot?.querySelector('slot[name="main"]')).to.exist;
     });
-    it('listens to `@loadingStateUpdated` to update `loaded`', async () => {
+    it('listens to `@loadingStateUpdated` to update `loaded` for <no-theater-available>', async () => {
       const el = await fixture<ItemNavigator>(
@@ -88,2 +89,3 @@ html`<ia-item-navigator></ia-item-navigator>`
       el.loaded = null;
+      el.viewAvailable = false;
       await el.updateComplete;
@@ -94,6 +96,2 @@ // check base properties
 
-      // hydrate item
-      el.item = new ItemStub();
-      await el.updateComplete;
-
       // spy fires
@@ -100,0 +98,0 @@ expect(spy.called).to.equal(true);

No alert changes

Worsened metrics

Total package byte prevSize

544360

decreased by-0.18%

Lines of code

4686

decreased by-0.3%

Number of lines in readme file

69

decreased by-13.75%

No dependency changes