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

package/src/plugins/plugin.chapters.js

@@ -1,4 +1,11 @@
 /* global BookReader */
+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';
+/** @typedef {import('@/src/BookNavigator/book-navigator.js').BookNavigator} BookNavigator */
+
 /**
  * Plugin for chapter markers in BookReader. Fetches from openlibrary.org
  * Could be forked, or extended to alter behavior
@@ -10,242 +17,260 @@ jQuery.extend(BookReader.defaultOptions, {
   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();
+    if (this.options.enableChaptersPlugin && this.ui !== 'embed') {
+      this._chapterInit();
     }
-    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);
-        }
-      );
-    }
-  }
+  };
 })(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');
+BookReader.prototype._chapterInit = async function() {
+  const olEdition = await this.getOpenLibraryRecord(this.options.olHost, this.options.bookId);
+  if (olEdition?.table_of_contents?.length) {
+    this._tocEntries = olEdition.table_of_contents.map(rawTOCEntry => (
+      Object.assign({}, rawTOCEntry, {pageIndex: this.book.getPageIndex(rawTOCEntry.pagenum)})
+    ));
+    this._chaptersRender(this._tocEntries);
+    this.bind(BookReader.eventNames.pageChanged, () => this._chaptersUpdateCurrent());
   }
-  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) {
-    $(`<div></div>`)
-      .append($('<div />').text(title + pageStr))
-      .addClass('BRchapter')
-      .css({ left: percentThrough })
-      .appendTo(this.$('.BRnavline'))
-      .data({ pageIndex })
-      .hover(event => {
-        // remove hover effect from other markers then turn on just for this
-        const marker = event.currentTarget;
-        const tooltip = marker.querySelector('div');
-        const tooltipOffset = tooltip.getBoundingClientRect();
-        const targetOffset = marker.getBoundingClientRect();
-        const boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
-        if (tooltipOffset.x - boxSizeAdjust < 0) {
-          tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
-        }
-        this.$('.BRsearch,.BRchapter').removeClass('front');
-        $(event.target).addClass('front');
-      },
-      event => $(event.target).removeClass('front')
-      )
-      .on('click', jumpToChapter);
-
-    //adding clickable properties to mobile chapters
-    mobileChapter.bind('click', jumpToChapter)
-      .addClass('chapter-clickable')
-      .attr("data-event-click-tracking","BRTOCPanel|GoToChapter");
-  }
-
-};
-
-/*
- * Remove all chapters.
- */
-BookReader.prototype.removeChapters = function() {
-  this.$('.BRnavpos .BRchapter').remove();
 };
 
 /**
  * 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();
-  }
-  for (let i = 0; i < tocEntries.length; i++) {
-    this.addChapterFromEntry(tocEntries[i]);
+BookReader.prototype._chaptersRender = function() {
+  const shell = /** @type {BookNavigator} */(this.shell);
+  shell.menuProviders['chapters'] = {
+    id: 'chapters',
+    icon: html`<ia-icon-toc 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._chaptersUpdateCurrent(pageIndex);
+      this.jumpToIndex(pageIndex);
+    }}"
+      @connected="${(e) => {
+      this._chaptersPanel = e.target;
+      this._chaptersUpdateCurrent();
+    }}"
+    />`,
+  };
+  shell.updateMenuContents();
+  for (const tocEntry of this._tocEntries) {
+    this._chaptersRenderMarker(tocEntry);
   }
-  this._tocEntries = tocEntries;
-  $('.table-contents-list').children().each((i, el) => {
-    tocEntries[i].mobileHTML = el;
-  })
 };
 
 /**
  * @typedef {Object} TocEntry
- * Table of contents entry as defined -- format is defined by Open Library
+ * Table of contents entry as defined by Open Library, with some extra values for internal use
  * @property {string} pagenum
  * @property {number} level
  * @property {string} label
- * @property {{type: '/type/toc_item'}} type
  * @property {string} title
- * @property {HTMLElement} mobileHTML
- * @property {number} pageIndex
-
+ * @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
+ * @param {TocEntry} tocEntry
  */
-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]
+BookReader.prototype._chaptersRenderMarker = function(tocEntry) {
+  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(' ');
-  this.addChapter(chapterStr, tocEntryObject['pagenum'], tocEntryObject.pageIndex);
+
+  const percentThrough = BookReader.util.cssPercentage(tocEntry.pageIndex, this.book.getNumLeafs() - 1);
+  $(`<div></div>`)
+    .append(
+      $('<div />')
+        .text(chapterStr)
+        .append($('<div class="BRchapterPage" />').text(`Page ${tocEntry.pagenum}`))
+    )
+    .addClass('BRchapter')
+    .css({ left: percentThrough })
+    .appendTo(this.$('.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');
+      const tooltipOffset = tooltip.getBoundingClientRect();
+      const targetOffset = marker.getBoundingClientRect();
+      const boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
+      if (tooltipOffset.x - boxSizeAdjust < 0) {
+        tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
+      }
+      this.$('.BRsearch,.BRchapter').removeClass('front');
+      $(event.target).addClass('front');
+    })
+    .on("mouseleave", event => $(event.target).removeClass('front'))
+    .on('click', () => {
+      this._chaptersUpdateCurrent(tocEntry.pageIndex);
+      this.jumpToIndex(tocEntry.pageIndex);
+    });
+
   this.$('.BRchapter, .BRsearch').each((i, el) => {
     const $el = $(el);
-    $el.hover(
-      () => $el.addClass('front'),
-      () => $el.removeClass('front'));
+    $el
+      .on("mouseenter", () => $el.addClass('front'))
+      .on("mouseleave", () => $el.removeClass('front'));
   });
 };
 
 /**
- * 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.
+ *
+ * @param {string} olHost
+ * @param {string} ocaid
  */
-BookReader.prototype.getOpenLibraryRecord = function () {
+BookReader.prototype.getOpenLibraryRecord = async function (olHost, ocaid) {
   // 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);
-    }
-  };
+  const baseURL = `${olHost}/query.json?type=/type/edition&*=`;
+  const fetchUrlByBookId = `${baseURL}&ocaid=${ocaid}`;
 
-  $.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' });
-      }
-    })
-    .then(data => {
-      if (data && data.length > 0) {
-        setUpChapterMarkers(data[0]);
-      }
-    });
-}
+  let data = await $.ajax({ url: fetchUrlByBookId, dataType: 'jsonp' });
 
-// 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);
+  if (!data || !data.length) {
+    // try sourceid
+    data = await $.ajax({ url: `${baseURL}&source_records=ia:${ocaid}`, dataType: 'jsonp' });
+  }
+
+  return data?.[0];
+};
 
 /**
- * highlights the current chapter based on current page
  * @private
- * @param {TocEntry[]} tocEntries
- * @param {number} tocEntries
+ * Highlights the current chapter based on current page
+ * @param {PageIndex} curIndex
  */
-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');
+BookReader.prototype._chaptersUpdateCurrent = function(
+  curIndex = (this.mode == 2 ? Math.max(...this.displayedIndices) : this.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;
+  }
+};
+
+@customElement('br-chapters-panel')
+export class BRChaptersPanel extends LitElement {
+  /** @type {TocEntry[]} */
+  @property({ type: Array })
+  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',
+      });
+    }
+  }
+
+  static get styles() {
+    return css`
+      ol {
+        padding: 0;
+        margin: 0;
+        margin-right: 5px;
+      }
+      li {
+        padding: 10px;
+        overflow: hidden;
+        border-radius: 4px;
+      }
+      li.clickable {
+        font-weight: normal;
+        cursor: pointer;
+        transition: background-color 0.2s;
+      }
+
+      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;
+      }`;
   }
 }

package/src/plugins/plugin.resume.js

@@ -37,7 +37,7 @@ BookReader.prototype.getResumeValue = function() {
   const val = BookReader.docCookies.getItem('br-resume');
   if (val !== null) return parseInt(val);
   else return null;
-}
+};
 
 /**
  * Return cookie path using pathname up to /page/... or /mode/...
@@ -49,7 +49,7 @@ BookReader.prototype.getResumeValue = function() {
  */
 BookReader.prototype.getCookiePath = function(urlPathPart) {
   return urlPathPart.match('.+?(?=/page/|/mode/|$)')[0];
-}
+};
 
 /**
  * Sets page resume value, for remembering reader's page
@@ -65,4 +65,4 @@ BookReader.prototype.updateResumeValue = function(index, cookieName) {
   const path = this.options.resumeCookiePath
     || this.getCookiePath(window.location.pathname);
   BookReader.docCookies.setItem(cookieName || 'br-resume', index, ttl, path, null, false);
-}
+};