@internetarchive/bookreader 5.0.0-11 → 5.0.0-110

package/src/plugins/plugin.chapters.js

@@ -1,85 +1,160 @@
-/* global BookReader */
+// @ts-check
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import '@internetarchive/icon-toc/icon-toc.js';
+import { BookReaderPlugin } from "../BookReaderPlugin.js";
+import { applyVariables } from "../util/strings.js";
+/** @typedef {import('@/src/BookReader/BookModel.js').PageIndex} PageIndex */
+/** @typedef {import('@/src/BookReader/BookModel.js').PageString} PageString */
+/** @typedef {import('@/src/BookReader/BookModel.js').LeafNum} LeafNum */
+
+// @ts-ignore
+const BookReader = /** @type {typeof import('@/src/BookReader.js').default} */(window.BookReader);
+
 /**
  * Plugin for chapter markers in BookReader. Fetches from openlibrary.org
  * Could be forked, or extended to alter behavior
  */
+export class ChaptersPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+
+    /**
+     * The Open Library host to fetch/query Open Library.
+     * @type {import('@/src/util/strings.js').StringWithVars}
+     */
+    openLibraryHost: 'https://openlibrary.org',
+
+    /**
+     * The Open Library edition to fetch the table of contents from.
+     * E.g. 'OL12345M'
+     *
+     * @type {import('@/src/util/strings.js').StringWithVars}
+     */
+    openLibraryId: '',
+
+    /**
+     * The Internet Archive identifier to fetch the Open Library table
+     * of contents from.
+     * E.g. 'goody'
+     *
+     * @type {import('@/src/util/strings.js').StringWithVars}
+     */
+    internetArchiveId: '',
+
+    /**
+     * @deprecated
+     * Old name for openLibraryHost
+     * @type {import('@/src/util/strings.js').StringWithVars}
+     */
+    olHost: 'https://openlibrary.org',
+
+    /**
+     * @deprecated
+     * Old name for internetArchiveId
+     * @type {import('@/src/util/strings.js').StringWithVars}
+     */
+    bookId: '{{bookId}}',
+  }
+
+  /** @type {TocEntry[]} */
+  _tocEntries;
 
-jQuery.extend(BookReader.defaultOptions, {
-  olHost: 'https://openlibrary.org',
-  enableChaptersPlugin: true,
-  bookId: '',
-});
-
-/** @override Extend the constructor to add search properties */
-BookReader.prototype.setup = (function (super_) {
-  return function (options) {
-    super_.call(this, options);
-
-    this.olHost = options.olHost;
-    this.enableChaptersPlugin = options.enableChaptersPlugin;
-    this.bookId = options.bookId;
-  };
-})(BookReader.prototype.setup);
-
-/** @override Extend to call Open Library for TOC */
-BookReader.prototype.init = (function(super_) {
-  return function() {
-    super_.call(this);
-    if (this.enableChaptersPlugin && this.ui !== 'embed') {
-      this.getOpenLibraryRecord();
+  /** @type {BRChaptersPanel} */
+  _chaptersPanel;
+
+  /** @override */
+  setup(options) {
+    super.setup(options);
+    this.options.internetArchiveId = this.options.internetArchiveId || this.options.bookId;
+    this.options.openLibraryHost = this.options.openLibraryHost || this.options.olHost;
+  }
+
+  /** @override Extend to call Open Library for TOC */
+  async init() {
+    if (!this.options.enabled || this.br.ui === 'embed') {
+      return;
     }
-    if (this.enableMobileNav) {
-      this.bind(BookReader.eventNames.mobileNavOpen,
-        () => {
-          this.updateTOCState(this.firstIndex, this._tocEntries);
-          if ($('table-contents-list').parent().hasClass('mm-opened')) {
-            this.updateTOCState(this.firstIndex, this._tocEntries);
-          }
-        }
-      );
-      $(".BRmobileMenu__tableContents").click(
-        () => {
-          this.updateTOCState(this.firstIndex, this._tocEntries);
-        }
-      );
+
+    let rawTableOfContents = null;
+    // Prefer explicit TOC if specified
+    if (this.br.options.table_of_contents?.length) {
+      rawTableOfContents = this.br.options.table_of_contents;
+    } else {
+      // Otherwise fetch from OL
+      const olEdition = await this.getOpenLibraryRecord();
+      if (olEdition?.table_of_contents?.length) {
+        rawTableOfContents = olEdition.table_of_contents;
+      }
     }
-  };
-})(BookReader.prototype.init);
 
-/**
- * Adds chapter marker to navigation scrubber
- *
- * @param {string} chapterTitle
- * @param {string} pageNumber
- * @param {number} pageIndex
- */
-BookReader.prototype.addChapter = function(chapterTitle, pageNumber, pageIndex) {
-  const uiStringPage = 'Page'; // i18n
-  const percentThrough = BookReader.util.cssPercentage(pageIndex, this.getNumLeafs() - 1);
-  const jumpToChapter = (event) => {
-    this.jumpToIndex($(event.delegateTarget).data('pageIndex'));
-    $('.current-chapter').removeClass('current-chapter');
-    $(event.delegateTarget).addClass('current-chapter');
-  };
-  const title = `${chapterTitle} | `;
-  const pageStr = `${uiStringPage} ${pageNumber}`;
-
-  //adding items to mobile table of contents
-  const mobileChapter = $(`<li></li>`).append($(`<span class='BRTOCElementTitle'></span>`).text(title))
-    .append($(`<span class='BRTOCElementPage'></span>`).text(pageStr));
-  mobileChapter.addClass('BRtable-contents-el')
-    .appendTo(this.$('.table-contents-list'))
-    .data({ pageIndex });
-
-  //adds .BRchapters to the slider only if pageIndex exists
-  if (pageIndex != undefined) {
+    if (rawTableOfContents) {
+      this._tocEntries = rawTableOfContents
+        .map(rawTOCEntry => (Object.assign({}, rawTOCEntry, {
+          pageIndex: (
+            typeof(rawTOCEntry.leaf) == 'number' ? this.br.book.leafNumToIndex(rawTOCEntry.leaf) :
+              rawTOCEntry.pagenum ? this.br.book.getPageIndex(rawTOCEntry.pagenum) :
+                undefined
+          ),
+        })));
+      this._render();
+      this.br.bind(BookReader.eventNames.pageChanged, () => this._updateCurrent());
+    }
+  }
+
+  /**
+   * Update the table of contents based on array of TOC entries.
+   */
+  _render() {
+    this.br.shell.menuProviders['chapters'] = {
+      id: 'chapters',
+      icon: html`<ia-icon-toc aria-hidden="true" role="presentation" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-toc>`,
+      label: 'Table of Contents',
+      component: html`<br-chapters-panel
+        .contents="${this._tocEntries}"
+        .jumpToPage="${(pageIndex) => {
+        this._updateCurrent(pageIndex);
+        this.br.jumpToIndex(pageIndex, { ariaLive: true });
+      }}"
+        @connected="${(e) => {
+        this._chaptersPanel = e.target;
+        this._updateCurrent();
+      }}"
+      />`,
+    };
+    this.br.shell.addMenuShortcut('chapters');
+    this.br.shell.updateMenuContents();
+    this._tocEntries.forEach((tocEntry, i) => this._renderMarker(tocEntry, i));
+  }
+
+  /**
+   * @param {TocEntry} tocEntry
+   * @param {number} entryIndex
+   */
+  _renderMarker(tocEntry, entryIndex) {
+    if (tocEntry.pageIndex == undefined) return;
+
+    //creates a string with non-void tocEntry.label and tocEntry.title
+    const chapterStr = [tocEntry.label, tocEntry.title]
+      .filter(x => x)
+      .join(' ') || `Chapter ${entryIndex + 1}`;
+
+    const percentThrough = BookReader.util.cssPercentage(tocEntry.pageIndex, this.br.book.getNumLeafs() - 1);
     $(`<div></div>`)
-      .append($('<div />').text(title + pageStr))
+      .append(
+        $('<div />')
+          .text(chapterStr)
+          .append(
+            $('<div class="BRchapterPage" />')
+              .text(this.br.book.getPageName(tocEntry.pageIndex)),
+          ),
+      )
       .addClass('BRchapter')
       .css({ left: percentThrough })
-      .appendTo(this.$('.BRnavline'))
-      .data({ pageIndex })
-      .hover(event => {
+      .appendTo(this.br.$('.BRnavline'))
+      .on("mouseenter", event => {
         // remove hover effect from other markers then turn on just for this
         const marker = event.currentTarget;
         const tooltip = marker.querySelector('div');
@@ -89,163 +164,197 @@ BookReader.prototype.addChapter = function(chapterTitle, pageNumber, pageIndex)
         if (tooltipOffset.x - boxSizeAdjust < 0) {
           tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
         }
-        this.$('.BRsearch,.BRchapter').removeClass('front');
+        this.br.$('.BRsearch,.BRchapter').removeClass('front');
         $(event.target).addClass('front');
-      },
-      event => $(event.target).removeClass('front')
-      )
-      .on('click', jumpToChapter);
+      })
+      .on("mouseleave", event => $(event.target).removeClass('front'))
+      .on('click', () => {
+        this._updateCurrent(tocEntry.pageIndex);
+        this.br.jumpToIndex(tocEntry.pageIndex, { ariaLive: true });
+      });
 
-    //adding clickable properties to mobile chapters
-    mobileChapter.bind('click', jumpToChapter)
-      .addClass('chapter-clickable')
-      .attr("data-event-click-tracking","BRTOCPanel|GoToChapter");
+    this.br.$('.BRchapter, .BRsearch').each((i, el) => {
+      const $el = $(el);
+      $el
+        .on("mouseenter", () => $el.addClass('front'))
+        .on("mouseleave", () => $el.removeClass('front'));
+    });
   }
 
-};
+  /**
+   * This makes a call to OL API and calls the given callback function with the
+   * response from the API.
+   */
+  async getOpenLibraryRecord() {
+    const olHost = applyVariables(this.options.openLibraryHost, this.br.options.vars);
 
-/*
- * Remove all chapters.
- */
-BookReader.prototype.removeChapters = function() {
-  this.$('.BRnavpos .BRchapter').remove();
-};
+    if (this.options.openLibraryId) {
+      const openLibraryId = applyVariables(this.options.openLibraryId, this.br.options.vars);
+      return await $.ajax({ url: `${olHost}/books/${openLibraryId}.json` });
+    }
 
-/**
- * Update the table of contents based on array of TOC entries.
- * @param {TocEntry[]} tocEntries
- */
-BookReader.prototype.updateTOC = function(tocEntries) {
-  this.removeChapters();
-  if (this.enableMobileNav && tocEntries.length > 0) {
-    this.$(".BRmobileMenu__tableContents").show();
+    if (this.options.internetArchiveId) {
+      const ocaid = applyVariables(this.options.internetArchiveId, this.br.options.vars);
+
+      // Try looking up by ocaid first, then by source_record
+      const baseQueryUrl = `${olHost}/query.json?type=/type/edition&*=&`;
+
+      let data = await $.ajax({
+        url: baseQueryUrl + new URLSearchParams({ ocaid, limit: '1' }),
+      });
+
+      if (!data || !data.length) {
+        // try source_records
+        data = await $.ajax({
+          url: baseQueryUrl + new URLSearchParams({ source_records: `ia:${ocaid}`, limit: '1' }),
+        });
+      }
+
+      return data?.[0];
+    }
+
+    return null;
   }
-  for (let i = 0; i < tocEntries.length; i++) {
-    this.addChapterFromEntry(tocEntries[i]);
+
+  /**
+   * @private
+   * Highlights the current chapter based on current page
+   * @param {PageIndex} curIndex
+   */
+  _updateCurrent(
+    curIndex = (this.br.mode == 2 ? Math.max(...this.br.displayedIndices) : this.br.firstIndex),
+  ) {
+    const tocEntriesIndexed = this._tocEntries.filter((el) => el.pageIndex != undefined).reverse();
+    const currChapter = tocEntriesIndexed[
+      // subtract one so that 2up shows the right label
+      tocEntriesIndexed.findIndex((chapter) => chapter.pageIndex <= curIndex)
+    ];
+    if (this._chaptersPanel) {
+      this._chaptersPanel.currentChapter = currChapter;
+    }
   }
-  this._tocEntries = tocEntries;
-  $('.table-contents-list').children().each((i, el) => {
-    tocEntries[i].mobileHTML = el;
-  });
-};
+}
+BookReader?.registerPlugin('chapters', ChaptersPlugin);
 
 /**
  * @typedef {Object} TocEntry
- * Table of contents entry as defined -- format is defined by Open Library
- * @property {string} pagenum
- * @property {number} level
- * @property {string} label
- * @property {{type: '/type/toc_item'}} type
- * @property {string} title
- * @property {HTMLElement} mobileHTML
- * @property {number} pageIndex
-
+ * Table of contents entry as defined by Open Library, with some extra values for internal use
+ * @property {number} [level]
+ * @property {string} [label]
+ * @property {string} [title]
+ * @property {PageString} [pagenum]
+ * @property {LeafNum} [leaf]
+ * @property {number} [pageIndex] - Added
  *
  * @example {
  *   "pagenum": "17",
  *   "level": 1,
  *   "label": "CHAPTER I",
- *   "type": {"key": "/type/toc_item"},
  *   "title": "THE COUNTRY AND THE MISSION"
  * }
  */
 
-/**
- * @param {TocEntry} tocEntryObject
- */
-BookReader.prototype.addChapterFromEntry = function(tocEntryObject) {
-  tocEntryObject.pageIndex = this.getPageIndex(tocEntryObject['pagenum']);
-  //creates a string with non-void tocEntryObject.label and tocEntryObject.title
-  const chapterStr = [tocEntryObject.label, tocEntryObject.title]
-    .filter(x => x)
-    .join(' ');
-  this.addChapter(chapterStr, tocEntryObject['pagenum'], tocEntryObject.pageIndex);
-  this.$('.BRchapter, .BRsearch').each((i, el) => {
-    const $el = $(el);
-    $el.hover(
-      () => $el.addClass('front'),
-      () => $el.removeClass('front'));
-  });
-};
+@customElement('br-chapters-panel')
+export class BRChaptersPanel extends LitElement {
+  /** @type {TocEntry[]} */
+  @property({ type: Array })
+  contents = [];
 
-/**
- * getOpenLibraryRecord
- *
- * The bookreader is designed to call openlibrary API and constructs the
- * "Return book" button using the response.
- *
- * This makes a call to OL API and calls the given callback function with the
- * response from the API.
- */
-BookReader.prototype.getOpenLibraryRecord = function () {
-  // Try looking up by ocaid first, then by source_record
-  const baseURL = `${this.olHost}/query.json?type=/type/edition&*=`;
-  const fetchUrlByBookId = `${baseURL}&ocaid=${this.bookId}`;
-
-  /*
-  * Update Chapter markers based on received record from Open Library.
-  * Notes that Open Library record is used for extra metadata, and also for lending
-  */
-  const setUpChapterMarkers = (olObject) => {
-    if (olObject && olObject.table_of_contents) {
-      // XXX check here that TOC is valid
-      this.updateTOC(olObject.table_of_contents);
+  /** @type {TocEntry?} */
+  @property({ type: Object })
+  currentChapter = {};
+
+  /** @type {(pageIndex: PageIndex) => void} */
+  jumpToPage = () => {};
+
+  /**
+   * @param {TocEntry[]} contents
+   */
+  constructor(contents) {
+    super();
+    this.contents = contents;
+  }
+
+  render() {
+    return html`
+    <ol>
+      ${this.contents.map(tocEntry => this.renderTOCEntry(tocEntry))}
+    </ol>
+    `;
+  }
+
+  /**
+   * @param {TocEntry} tocEntry
+   */
+  renderTOCEntry(tocEntry) {
+    const chapterTitle = [tocEntry.label, tocEntry.title]
+      .filter(x => x)
+      .join(' ');
+    const clickable = tocEntry.pageIndex != undefined;
+    // note the click-tracking won't work...
+    return html`
+    <li
+      class="
+        BRtable-contents-el
+        ${clickable ? 'clickable' : ''}
+        ${tocEntry == this.currentChapter ? 'current' : ''}
+      "
+      style="${styleMap({marginLeft: (tocEntry.level - 1) * 10 + 'px'})}"
+      data-event-click-tracking="${ifDefined(clickable ? "BRTOCPanel|GoToChapter" : undefined)}"
+      @click="${() => this.jumpToPage(tocEntry.pageIndex)}"
+    >
+      ${chapterTitle}
+      ${tocEntry.pagenum ? html`
+        <br />
+        <span class="BRTOCElementPage">Page ${tocEntry.pagenum}</span>
+      ` : nothing}
+    </li>`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(new CustomEvent('connected'));
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('currentChapter')) {
+      this.shadowRoot.querySelector('li.current')?.scrollIntoView({
+        block: 'nearest',
+        behavior: 'smooth',
+      });
     }
-  };
-
-  $.ajax({ url: fetchUrlByBookId, dataType: 'jsonp' })
-    .then(data => {
-      if (data && data.length > 0) {
-        return data;
-      } else {
-      // try sourceid
-        return $.ajax({ url: `${baseURL}&source_records=ia:${this.bookId}`, dataType: 'jsonp' });
+  }
+
+  static get styles() {
+    return css`
+      ol {
+        padding: 0;
+        margin: 0;
+        margin-right: 5px;
       }
-    })
-    .then(data => {
-      if (data && data.length > 0) {
-        setUpChapterMarkers(data[0]);
+      li {
+        padding: 10px;
+        overflow: hidden;
+        border-radius: 4px;
+      }
+      li.clickable {
+        font-weight: normal;
+        cursor: pointer;
+        transition: background-color 0.2s;
       }
-    });
-};
-
-// Extend buildMobileDrawerElement with table of contents list
-BookReader.prototype.buildMobileDrawerElement = (function (super_) {
-  return function () {
-    const $el = super_.call(this);
-    if (this.enableMobileNav && this.options.enableChaptersPlugin) {
-      $el.find('.BRmobileMenu__moreInfoRow').after($(`
-        <li class="BRmobileMenu__tableContents" data-event-click-tracking="BRSidebar|TOCPanel">
-            <span>
-                <span class="DrawerIconWrapper">
-                  <img class="DrawerIcon" src="${this.imagesBaseURL}icon_toc.svg" alt="toc-icon"/>
-                </span>
-                Table of Contents
-            </span>
-            <div>
-                <ol class="table-contents-list">
-                </ol>
-            </div>
-        </li>`).hide());
-    }
-    return $el;
-  };
-})(BookReader.prototype.buildMobileDrawerElement);
 
-/**
- * highlights the current chapter based on current page
- * @private
- * @param {TocEntry[]} tocEntries
- * @param {number} tocEntries
- */
-BookReader.prototype.updateTOCState = function(currIndex, tocEntries) {
-  //this function won't have any effects if called before OpenLibrary request is finished
-  if (!tocEntries) {return;}
-  $('.current-chapter').removeClass('current-chapter');
-  const tocEntriesIndexed = tocEntries.filter((el) => el.pageIndex != undefined).reverse();
-  const currChapter = tocEntriesIndexed[tocEntriesIndexed.findIndex(
-    (el) => el.pageIndex <= currIndex)];
-  if (currChapter != undefined) {
-    $(currChapter.mobileHTML).addClass('current-chapter');
+      li.clickable:not(.current):hover {
+        background-color: rgba(255,255,255, 0.05);
+      }
+
+      li.current {
+        background-color: rgba(255,255,255,0.9);
+        color: #333;
+      }
+
+      .BRTOCElementPage {
+        font-size: 0.85em;
+        opacity: .8;
+      }`;
   }
-};
+}