@internetarchive/bookreader 5.0.0-70 → 5.0.0-70-a1

package/src/BookNavigator/volumes/volumes.js

@@ -1,188 +0,0 @@
-import { css, html, LitElement, nothing } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
-
-export class Volumes extends LitElement {
-  static get properties() {
-    return {
-      subPrefix: { type: String },
-      hostUrl: { type: String },
-      viewableFiles: { type: Array },
-      sortOrderBy: { type: String },
-    };
-  }
-
-  constructor() {
-    super();
-    this.hostUrl = '';
-    this.sortOrderBy = '';
-    this.subPrefix = '';
-    this.viewableFiles = [];
-  }
-
-  firstUpdated() {
-    const activeFile = this.shadowRoot.querySelector('.content.active');
-    // allow for css animations to run before scrolling to active file
-    setTimeout(() => {
-      // scroll active file into view if needed
-      // note: `scrollIntoViewIfNeeded` handles auto-scroll gracefully for Chrome, Safari
-      // Firefox does not have this capability yet as it does not support `scrollIntoViewIfNeeded`
-      if (activeFile?.scrollIntoViewIfNeeded) {
-        activeFile?.scrollIntoViewIfNeeded(true);
-        return;
-      }
-
-      // Todo: support `scrollIntoView` or `parentContainer.crollTop = x` for FF & "IE 11"
-      // currently, the hard `position: absolutes` misaligns subpanel when `scrollIntoView` is applied :(
-    }, 350);
-  }
-
-  volumeItemWithImageTitle(item) {
-    const hrefUrl = this.sortOrderBy === 'default'
-      ? `${this.hostUrl}${item.url_path}`
-      : `${this.hostUrl}${item.url_path}?sort=${this.sortOrderBy}`;
-
-    return html`
-      <li class="content active">
-        <div class="separator"></div>
-        <a class="container" href="${hrefUrl}">
-          <div class="image">
-            <img src="${item.image}">
-          </div>
-          <div class="text">
-            <p class="item-title">${item.title}</p>
-            <small>by: ${item.author}</small>
-          </div>
-        </a>
-      </li>
-    `;
-  }
-
-  volumeItem(item) {
-    const activeClass = this.subPrefix === item.file_subprefix ? ' active' : '';
-
-    const hrefUrl = this.sortOrderBy === 'default'
-      ? `${this.hostUrl}${item.url_path}`
-      : `${this.hostUrl}${item.url_path}?sort=${this.sortOrderBy}`;
-
-    return html`
-      <li>
-        <div class="separator"></div>
-        <div class="content${activeClass}">
-          <a href="https://${hrefUrl}">
-            <p class="item-title">${item.title}</p>
-          </a>
-        </div>
-      </li>
-    `;
-  }
-
-  get volumesList() {
-    const volumes = repeat(this.viewableFiles, volume => volume?.file_prefix, this.volumeItem.bind(this));
-    return html`
-      <ul>
-        ${volumes}
-        <div class="separator"></div> 
-      </ul>
-    `;
-  }
-
-  render() {
-    return html`
-      ${this.viewableFiles.length ? this.volumesList : nothing}
-    `;
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        overflow-y: auto;
-        box-sizing: border-box;
-        color: var(--primaryTextColor);
-        margin-top: 14px;
-        margin-bottom: 2rem;
-        --activeBorderWidth: 2px;
-      }
-
-      a {
-        color: #ffffff;
-        text-decoration: none
-      }
-
-      img {
-        width: 35px;
-        height: 45px;
-      }
-
-      ul {
-        padding: 0;
-        list-style: none;
-        margin: var(--activeBorderWidth) 0.5rem 1rem 0;
-      }
-
-      ul > li:first-child .separator {
-        display: none;
-      }
-
-      li {
-        cursor: pointer;
-        outline: none;
-        position: relative;
-      }
-
-      li .content {
-        padding: 2px 0 4px 2px;
-        border: var(--activeBorderWidth) solid transparent;
-        padding: .2rem 0 .4rem .2rem;
-      }
-      
-      li .content.active {
-        border: var(--activeBorderWidth) solid #538bc5;
-      }
-
-      small {
-        font-style: italic;
-        white-space: initial;
-      }
-
-      .container {
-        display: flex;
-        align-items: center;
-        justify-content: center
-      }
-
-      .item-title {
-        margin-block-start: 0em;
-        margin-block-end: 0em;
-        font-size: 14px;
-        font-weight: bold;
-        word-wrap: break-word;
-        padding-left: 5px;
-      }
-
-      .separator {
-        background-color: var(--secondaryBGColor);
-        width: 98%;
-        margin: 1px auto;
-        height: 1px;
-      }
-
-      .text {
-        padding-left: 10px;
-      }
-
-      .icon {
-        display: inline-block;
-        width: 14px;
-        height: 14px;
-        margin-left: .7rem;
-        border: 1px solid var(--primaryTextColor);
-        border-radius: 2px;
-        background: var(--activeButtonBg) 50% 50% no-repeat;
-      }
-
-    `;
-  }
-}
-
-customElements.define('viewable-files', Volumes);

package/tests/jest/BookNavigator/volumes/volumes.test.js

@@ -1,97 +0,0 @@
-import {
-  html,
-  fixture,
-  fixtureCleanup,
-} from '@open-wc/testing-helpers';
-import sinon from 'sinon';
-import '@/src/BookNavigator/volumes/volumes.js';
-
-
-const brOptions = {
-  "options": {
-    "enableMultipleBooks": true,
-    "multipleBooksList": {
-      "by_subprefix": {
-        "/details/SubBookTest": {
-          "url_path": "/details/SubBookTest",
-          "file_subprefix": "book1/GPORFP",
-          "orig_sort": 0,
-          "title": "book1/GPORFP.pdf",
-          "file_source": "/book1/GPORFP_jp2.zip"
-        },
-        "/details/SubBookTest/subdir/book2/brewster_kahle_internet_archive": {
-          "url_path": "/details/SubBookTest/subdir/book2/brewster_kahle_internet_archive",
-          "file_subprefix": "subdir/book2/brewster_kahle_internet_archive",
-          "orig_sort": 1,
-          "title": "subdir/book2/brewster_kahle_internet_archive.pdf",
-          "file_source": "/subdir/book2/brewster_kahle_internet_archive_jp2.zip"
-        },
-        "/details/SubBookTest/subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume": {
-          "url_path": "/details/SubBookTest/subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume",
-          "file_subprefix": "subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume",
-          "orig_sort": 2,
-          "title": "subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume.pdf",
-          "file_source": "/subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume_jp2.zip"
-        }
-      }
-    }
-  }
-};
-
-const container = (brOptions, prefix) => (
-  html`
-    <viewable-files .viewableFiles=${brOptions} .hostUrl="https://archive.org" .subPrefix=${prefix}></viewable-files>
-  `
-);
-
-beforeEach(() => {
-  const body = document.querySelector('body');
-  const brHook = document.createElement('div');
-  brHook.setAttribute('id', 'BookReader');
-  body.appendChild(brHook);
-});
-
-afterEach(() => {
-  sinon.restore();
-  fixtureCleanup();
-});
-
-describe('<viewable-files>', () => {
-  test('sets default properties', async () => {
-    const files = brOptions.options.multipleBooksList?.by_subprefix;
-    const viewableFiles = Object.keys(files).map(item => files[item]);
-    const el = await fixture(container(viewableFiles));
-    await el.updateComplete;
-
-    expect(el.viewableFiles).toEqual(viewableFiles);
-    expect(el.viewableFiles.length).toEqual(3);
-    expect(el.shadowRoot.querySelectorAll("ul li").length).toEqual(3);
-
-    expect(el.shadowRoot.querySelector(".item-title").textContent).toContain(`${viewableFiles[0].title}`);
-  });
-
-  test('render empty volumes', async () => {
-    const viewableFiles = [];
-    const el = await fixture(container(viewableFiles));
-    await el.updateComplete;
-
-    expect(el.viewableFiles).toEqual(viewableFiles);
-    expect(el.viewableFiles.length).toEqual(0);
-    expect(el.shadowRoot.childElementCount).not.toEqual(0);
-  });
-
-  test('render active volume item set as first viewable item ', async () => {
-    const files = brOptions.options.multipleBooksList?.by_subprefix;
-    const viewableFiles = Object.keys(files).map(item => files[item]);
-    const prefix = viewableFiles[0].file_subprefix;
-
-    const el = await fixture(container(viewableFiles, prefix));
-    await el.updateComplete;
-
-    expect(el.viewableFiles).toEqual(viewableFiles);
-    expect(el.viewableFiles.length).toEqual(3);
-
-    expect(el.shadowRoot.querySelectorAll("ul li div")[1].className).toEqual("content active");
-  });
-
-});