@internetarchive/bookreader 5.0.0-9-multiple-files → 5.0.0-90

package/src/BookNavigator/br-fullscreen-mgr.js

@@ -1,83 +0,0 @@
-import Debouncer from '../util/debouncer';
-
-/**
- * Manages fullscreen size
- * so that bookreader chrome is always visible
- * This is a shim to hold us until we update loan bar
- * https://drive.google.com/drive/folders/1Ym9FDMZPiM4EbNh3NU-_2h8kizIYaLWt
- */
-export default class BRFullscreenMgr {
-  constructor(brSelector = '#BookReader') {
-    this.debounceTime = 250;
-    this.savedScrollY = 0;
-    this.savedScrollX = 0;
-    this.brSelector  = brSelector;
-
-    this.setup = this.setup.bind(this);
-    this.teardown = this.teardown.bind(this);
-    this.resizeBookReaderContainer = this.resizeBookReaderContainer.bind(this);
-
-    this.handleResizeEvent = this.handleResizeEvent.bind(this);
-
-    this.handleBookReaderHeight = new Debouncer(
-      this.resizeBookReaderContainer, this.debounceTime, this,
-    );
-  }
-
-  get brDom() {
-    return document.querySelector(this.brSelector);
-  }
-
-  /**
-   * Sets bookreader height
-   * & adds resize, orientationchange listeners
-   * & passes captured scroll positions
-   *
-   * @param {object} brInstance
-   */
-  setup(brInstance) {
-    this.bookreader = brInstance;
-
-    this.resizeBookReaderContainer();
-    window.addEventListener('resize', this.handleResizeEvent);
-  }
-
-  /**
-   * Resets BookReader height
-   * & removes event handlers, resets captured scroll positions
-   */
-  teardown() {
-    this.brDom.setAttribute('style', '');
-    window.removeEventListener('resize', this.handleResizeEvent);
-    window.scrollTo(this.savedScrollX, this.savedScrollY);
-    this.savedScrollX = 0;
-    this.savedScrollY = 0;
-  }
-
-  /**
-   * Event listener for resize & orientationchange
-   */
-  handleResizeEvent() {
-    this.handleBookReaderHeight.execute();
-  }
-
-  /**
-   * Calculates & sets BookReader's needed height to
-   * take the loan bar into account
-   * + appends fullscreen classes to DOM
-   */
-  resizeBookReaderContainer() {
-    const { scrollX, scrollY } = window;
-    this.savedScrollX = scrollX;
-    this.savedScrollY = scrollY;
-    this.bookreader.updateBrClasses();
-
-    const loanbar = document.querySelector('.BookReaderMessage');
-    const loanbarHeight = loanbar?.offsetHeight ?? 0;
-    const windowHeight = window.innerHeight;
-    const newHeight = `${(windowHeight - loanbarHeight)}px`;
-    this.brDom.style.height = newHeight;
-    this.brDom.style.top = loanbarHeight;
-    window.scrollTo(0, 0);
-  }
-}

package/src/BookNavigator/search/a-search-result.js

@@ -1,55 +0,0 @@
-import { nothing } from 'lit-html';
-import { html, LitElement } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-
-export class BookSearchResult extends LitElement {
-  static get properties() {
-    return {
-      match: { type: Object },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.matchRegex = new RegExp('{{{(.+?)}}}', 'g');
-  }
-
-  createRenderRoot() {
-    return this;
-  }
-
-  highlightedHit(hit) {
-    return html`
-      <p>${unsafeHTML(hit.replace(this.matchRegex, '<mark>$1</mark>'))}</p>
-    `;
-  }
-
-  resultSelected() {
-    this.dispatchEvent(new CustomEvent('resultSelected', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        match: this.match,
-      },
-    }));
-  }
-
-  render() {
-    const { match } = this;
-    const { par = [] } = match;
-    const [resultDetails = {}] = par;
-    const pageNumber = Number.isInteger(resultDetails.page)
-      ? html`<p class="page-num">Page -${resultDetails.page}-</p>` : nothing;
-    const coverImage = html`<img src="${match.cover}" />`;
-    return html`
-      <li @click=${this.resultSelected}>
-        ${match.cover ? coverImage : nothing}
-        <h4>${match.title || nothing}</h4>
-        ${pageNumber}
-        ${this.highlightedHit(match.text)}
-      </li>
-    `;
-  }
-}
-customElements.define('book-search-result', BookSearchResult);

package/src/BookNavigator/volumes/volumes-provider.js

@@ -1,108 +0,0 @@
-import { html } from 'lit-element';
-import sortAscendingIcon from '../assets/icon_sort_ascending.js';
-import sortDescendingIcon from '../assets/icon_sort_descending.js';
-
-import './volumes.js';
-
-const stub = {
-  "success": true,
-  "value": {
-    "identifier": "SubBookTest",
-    "mediatype": "texts",
-    "files": {
-      "by_subprefix": {
-        "/details/SubBookTest": {
-          "url_path": "/details/SubBookTest",
-          "file_prefix": "book1/GPORFP",
-          "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_prefix": "subdir/book2/brewster_kahle_internet_archive",
-          "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_prefix": "subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume",
-          "title": "subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume.pdf",
-          "file_source": "/subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume_jp2.zip"
-        }
-      },
-      "main_dir": "/2/items/SubBookTest"
-    }
-  }
-};
-
-
-export default class VolumesProvider {
-
-  constructor(optionChange, baseHost, bookreader) {
-    this.optionChange = optionChange
-    this.component = document.createElement('viewable-files');
-
-    const files = bookreader.options.multipleBooksList?.by_subprefix
-    this.viewableFiles = Object.keys(files).map(item => files[item]);
-    this.volumeCount = Object.keys(files).length;
-    this.isFirstLoad = true
-    this.isSortAscending = false;
-
-    console.log('hostUrl: ', baseHost)
-    this.component.subPrefix = bookreader.options === undefined ? 'theworksofplato01platiala' : bookreader.options.subPrefix;
-    this.component.hostUrl = baseHost;
-    this.component.viewableFiles = this.viewableFiles;
-
-    this.id = 'volumes';
-    this.label = `Viewable Files (${this.volumeCount})`
-    this.icon = html`<ia-icon icon="volumes" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>`;
-    this.actionButton = this.headerIcon
-    this.sortVolumes()
-  }
-
-  get sortAscendingIcon() {
-    const iconStyle = 'background: transparent; border: none; position: absolute; right: 25px';
-    return html`<button style=${iconStyle} class="sort-asc icon" aria-label="Sort volumes in ascending order" @click=${() => this.sortVolumes()}>${sortAscendingIcon}</button>`;
-  }
-
-  get sortDescendingIcon() {
-    const iconStyle = 'background: transparent; border: none; position: absolute; right: 25px';
-    return html`<button style=${iconStyle} class="sort-desc icon" aria-label="Sort volumes in descending order" @click=${() => this.sortVolumes()}>${sortDescendingIcon}</button>`;
-  }
-
-  get headerIcon() {
-    return this.isSortAscending ? this.sortAscendingIcon : this.sortDescendingIcon;
-  }
-
-  sortVolumes() {
-    this.isSortAscending = !this.isSortAscending;
-    const sortedFiles = this.viewableFiles.sort((a, b) => {
-      if (this.isSortAscending) return a.title.localeCompare(b.title);
-      else return b.title.localeCompare(a.title);
-    })
-
-    this.component.viewableFiles  = [...sortedFiles]
-    if (!this.isFirstLoad) {
-      this.actionButton = this.headerIcon
-      this.optionChange(this.bookreader)
-    } else {
-      this.isFirstLoad = false
-    }
-  }
-
-  bindEvents() {
-    this.component.addEventListener('click', this.multiplefilesClicked.bind(this));
-  }
-
-  multiplefilesClicked({ detail }) {
-    // maybe some analytics?
-    if (window.archive_analytics) {
-      window.archive_analytics?.send_event_no_sampling(
-        'BookReader',
-        `VolumesSort`,
-        window.location.path,
-      );
-    }
-  }
-
-}

package/src/BookNavigator/volumes/volumes.js

@@ -1,162 +0,0 @@
-import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html'
-import { repeat } from 'lit-html/directives/repeat';
-
-export class Volumes extends LitElement {
-  static get properties() {
-    return {
-      subPrefix: { type: String },
-      hostUrl: { type: String },
-      viewableFiles: { type: Array }
-    };
-  }
-
-  constructor() {
-    super();
-    this.subPrefix = '';
-    this.hostUrl = '';
-    this.viewableFiles = [];
-  }
-
-  volumeItemWithImageTitle(item) {
-    return html`
-      <li class="content active">
-        <div class="separator"></div>
-        <a class="container" href="${this.hostUrl}${item.url_path}">
-          <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' : ''
-    console.log('hostUrl: ', this.hostUrl)
-    return html`
-      <li>
-        <div class="separator"></div>
-        <div class="content ${activeClass}">
-          <a href="${this.hostUrl}${item.url_path}">
-            <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`
-      <div>${this.viewableFiles.length ? this.volumesList : nothing}</div>
-    `
-  }
-
-  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/src/BookReader/DebugConsole.js

@@ -1,54 +0,0 @@
-/**
- * Displays a console on the document for debugging devices where remote
- * debugging is not feasible, and forwards all console.log's to be displayed
- * on screen.
- */
-export class DebugConsole {
-  constructor() {
-    /** How many times we've seen the same line in a row */
-    this.currentRun = 0;
-  }
-
-  init() {
-    this.$log = $(`<div id="_debugLog" style="width: 100%; height: 300px; overflow: auto" />`);
-    $(document.body).prepend(this.$log);
-
-    this.$form = $(`
-    <form>
-      <input style="width:100%; font-family: monospace;" id="_debugLogInput">
-    </form>`);
-    this.$log.append(this.$form);
-
-    this.$form.submit(ev => {
-      ev.preventDefault();
-      const result = eval(this.$form.find('input').val());
-      this.logToScreen([result]);
-    });
-
-    const _realLog = console.log.bind(console);
-    console.log = (...args) => {
-      _realLog(...args);
-      this.logToScreen(args);
-    }
-
-    window.onerror = (...args) => this.logToScreen(args);
-  }
-
-  /**
-   * Log the provided array onto the on screen console
-   * @param {Array} args
-   */
-  logToScreen(args) {
-    const html = args.map(JSON.stringify).join(',');
-    const $lastEntry = this.$log.children('.log-entry:last-child')
-    if ($lastEntry.find('.entry-code').html() == html) {
-      $lastEntry.find('.count').text(`(${++this.currentRun})`);
-    } else {
-      this.currentRun = 1;
-      this.$log.append($(`
-        <div class="log-entry">
-          <code class="count"></code> <code class="entry-code">${html}</code>
-        </div>`));
-    }
-  }
-}

package/src/BookReaderComponent/BookReaderComponent.js

@@ -1,112 +0,0 @@
-/**
- * BookReaderTemplate to load BookNavigator components
- */
-
-import { LitElement, html, css } from 'lit-element';
-
-import '../ItemNavigator/ItemNavigator.js'
-import '../BookNavigator/BookNavigator.js'
-
-export class BookReader extends LitElement {
-  static get properties() {
-    return {
-      base64Json: { type: String },
-      baseHost: { type: String },
-    };
-  }
-
-  constructor() {
-    super();
-    this.base64Json = '';
-    this.baseHost = 'https://archive.org';
-  }
-
-  firstUpdated() {
-    this.fetchData();
-  }
-
-  /**
-   * Fetch metadata response from public metadata API
-   * convert response to base64 data
-   * set base64 data to props
-   */
-  async fetchData() {
-    const ocaid = new URLSearchParams(location.search).get('ocaid');
-    const response = await fetch(`${this.baseHost}/metadata/${ocaid}`);
-    const bookMetadata = await response.json();
-    const jsonBtoa = btoa(JSON.stringify(bookMetadata));
-    this.setBaseJSON(jsonBtoa);
-  }
-
-  /**
-   * Set base64 data to prop
-   * @param {string} value - base64 string format
-   */
-  setBaseJSON(value) {
-    this.base64Json = value;
-  }
-
-  render() {
-    return html`
-      <div class="ia-bookreader">
-        <item-navigator
-          itemType="bookreader"
-          basehost=${this.baseHost}
-          item=${this.base64Json}>
-          <div slot="bookreader">
-            <slot name="bookreader"></slot>
-          </div>
-        </item-navigator>
-      </div>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        --primaryBGColor: var(--black, #000);
-        --secondaryBGColor: #222;
-        --tertiaryBGColor: #333;
-        --primaryTextColor: var(--white, #fff);
-        --primaryCTAFill: #194880;
-        --primaryCTABorder: #c5d1df;
-        --secondaryCTAFill: #333;
-        --secondaryCTABorder: #999;
-        --primaryErrorCTAFill: #e51c26;
-        --primaryErrorCTABorder: #f8c6c8;
-      }
-
-      .ia-bookreader {
-        background-color: var(--primaryBGColor);
-        position: relative;
-        height: auto;
-      }
-
-      item-navigator {
-        display: block;
-        width: 100%;
-        color: var(--primaryTextColor);
-        --menuButtonLabelDisplay: block;
-        --menuWidth: 320px;
-        --menuSliderBg: var(--secondaryBGColor);
-        --activeButtonBg: var(--tertiaryBGColor);
-        --subpanelRightBorderColor: var(--secondaryCTABorder);
-        --animationTiming: 100ms;
-        --iconFillColor: var(--primaryTextColor);
-        --iconStrokeColor: var(--primaryTextColor);
-        --menuSliderHeaderIconHeight: 2rem;
-        --menuSliderHeaderIconWidth: 2rem;
-        --iconWidth: 2.4rem;
-        --iconHeight: 2.4rem;
-        --shareLinkColor: var(--primaryTextColor);
-        --shareIconBorder: var(--primaryTextColor);
-        --shareIconBg: var(--secondaryBGColor);
-        --activityIndicatorLoadingDotColor: var(--primaryTextColor);
-        --activityIndicatorLoadingRingColor: var(--primaryTextColor);
-      }
-    `;
-  }
-}
-
-window.customElements.define("ia-bookreader", BookReader);