@internetarchive/bookreader 5.0.0-26 → 5.0.0-29

package/stat/plugins/plugin.chapters.js

@@ -0,0 +1,248 @@
+/* global BookReader */
+/**
+ * Plugin for chapter markers in BookReader. Fetches from openlibrary.org
+ * Could be forked, or extended to alter behavior
+ */
+
+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();
+    }
+    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").on("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');
+  };
+  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 })
+      .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', 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]);
+  }
+  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
+ * @property {string} pagenum
+ * @property {number} level
+ * @property {string} label
+ * @property {{type: '/type/toc_item'}} type
+ * @property {string} title
+ * @property {HTMLElement} mobileHTML
+ * @property {number} pageIndex
+
+ *
+ * @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
+      .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.
+ */
+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);
+    }
+  };
+
+  $.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]);
+      }
+    });
+};
+
+// 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');
+  }
+};

package/stat/plugins/plugin.iframe.js

@@ -0,0 +1,48 @@
+/* global BookReader */
+/**
+ * Plugin for two-way communication between a BookReader in an IFrame and the
+ * parent web page
+ */
+
+const MESSAGE_TYPE_FRAGMENT_CHANGE = 'bookReaderFragmentChange';
+
+BookReader.prototype.init = (function (super_) {
+  return function () {
+    super_.call(this);
+    _attachEventListeners(this);
+  };
+})(BookReader.prototype.init);
+
+/**
+ * @private
+ * Using window.postMessage() and event listeners, the plugin notifies the
+ * parent window when pages change, and the parent window can also
+ * explicitly request a page change by sending its own message.
+ *
+ * @param {BookReader} br
+ * @param {Window?} [parent]
+ */
+export function _attachEventListeners(br, parent = window.parent) {
+  // Not embedded, abort
+  if (!parent) {
+    return;
+  }
+
+  br.bind(BookReader.eventNames.fragmentChange, () => {
+    const fragment = br.fragmentFromParams(br.paramsFromCurrent());
+
+    parent.postMessage(
+      { type: MESSAGE_TYPE_FRAGMENT_CHANGE, fragment },
+      '*'
+    );
+  });
+
+  window.addEventListener('message', event => {
+    // Not a recognized message type, abort
+    if (!event.data || event.data.type !== MESSAGE_TYPE_FRAGMENT_CHANGE) {
+      return;
+    }
+
+    br.updateFromParams(br.paramsFromFragment(event.data.fragment));
+  });
+}

package/stat/plugins/plugin.mobile_nav.js

@@ -0,0 +1,288 @@
+/* global BookReader */
+/**
+ * Adds mobile navigation at responsive breakpoint
+ */
+
+import * as utils from '../BookReader/utils.js';
+import 'jquery.mmenu/dist/js/jquery.mmenu.min.js';
+import 'jquery.mmenu/dist/addons/navbars/jquery.mmenu.navbars.min.js';
+
+//contains all filters and labels for checkboxs
+const FILTERLIST = [
+  {
+    filter: "grayscale(100%)",
+    label: "Grayscale"
+  },
+  {
+    filter: "brightness(120%)",
+    label: "High brightness"
+  },
+  {
+    filter: "invert(100%)",
+    label: "Inverted (dark mode)"
+  },
+  {
+    filter: "contrast(120%)",
+    label: "High contrast"
+  },
+];
+
+jQuery.extend(BookReader.defaultOptions, {
+  enableMobileNav: true,
+  mobileNavTitle: 'Internet Archive',
+  mobileNavFullscreenOnly: false,
+});
+
+BookReader.prototype.setup = (function(super_) {
+  return function (options) {
+    super_.call(this, options);
+
+    this.enableMobileNav = options.enableMobileNav;
+    this.mobileNavTitle = options.mobileNavTitle;
+    this.mobileNavFullscreenOnly = options.mobileNavFullscreenOnly;
+
+    this.refs.$mmenu = null;
+  };
+})(BookReader.prototype.setup);
+
+
+// Extend initToolbar
+BookReader.prototype.initToolbar = (function (super_) {
+  return function (mode, ui) {
+    let $mmenuEl;
+    if (this.enableMobileNav) {
+      const $drawerEl = this.buildMobileDrawerElement();
+      this.refs.$br.append($drawerEl);
+
+      // Render info into mobile info before mmenu
+      this.buildInfoDiv(this.$('.BRmobileInfo'));
+      this.buildShareDiv(this.$('.BRmobileShare'));
+
+      $mmenuEl = $drawerEl;
+      $mmenuEl.mmenu({
+        navbars: [
+          { "position": "top" },
+        ],
+        navbar: {
+          add: true,
+          title: this.mobileNavTitle,
+          titleLink: 'panel'
+        },
+        extensions: [ "panelshadow" ],
+      }, {
+        offCanvas: {
+          wrapPageIfNeeded: false,
+          zposition: 'next',
+          pageSelector: this.el,
+        }
+      });
+
+      const $BRpageviewField = $mmenuEl.find('.BRpageviewValue');
+      $mmenuEl.data('mmenu').bind('opened', () => {
+        // Update "Link to this page view" link
+        if ($BRpageviewField.length) {
+          $BRpageviewField.val(window.location.href);
+        }
+      });
+
+      //apply filters when checkboxs clicked
+      $drawerEl.find('.BRcheckbox-filters')
+        .on("click", () => applyFilters($drawerEl, this));
+
+      // Bind mobile switch buttons
+      $drawerEl.find('.DrawerLayoutButton.one_page_mode')
+        .on("click", () => this.switchMode(this.constMode1up));
+      $drawerEl.find('.DrawerLayoutButton.two_page_mode')
+        .on("click", () => this.switchMode(this.constMode2up));
+      $drawerEl.find('.DrawerLayoutButton.thumbnail_mode')
+        .on("click", () => this.switchMode(this.constModeThumb));
+
+      if (this.mobileNavFullscreenOnly) {
+        $(document.body).addClass('BRbodyMobileNavEnabledFullscreen');
+      } else {
+        $(document.body).addClass('BRbodyMobileNavEnabled');
+      }
+
+      this.refs.$mmenu = $mmenuEl;
+
+    }
+
+    // Call the parent method at the end, because it binds events to DOM
+    super_.apply(this, arguments);
+
+
+    if (this.enableMobileNav) {
+      // Need to bind more, console after toolbar is initialized
+      this.$('.BRmobileHamburger').click(() => {
+        if ($mmenuEl.data('mmenu').getInstance().vars.opened) {
+          $mmenuEl.data('mmenu').close();
+        } else {
+          $mmenuEl.data('mmenu').open();
+          this.trigger("mobileNavOpen");
+        }
+      });
+
+
+      const closeMobileMenu = (e) => {
+        // Need to close the mobile menu to reset DOM & Style
+        // driven by menu plugin
+        const width = $( window ).width();
+        const mobileMenuIsOpen = $mmenuEl.data('mmenu').getInstance().vars.opened;
+        // $brBreakPointMobile: 800px;
+        if (mobileMenuIsOpen && (width >= 800)) {
+          $mmenuEl.data('mmenu').close ();
+        }
+      };
+
+      window.addEventListener('resize', utils.debounce(closeMobileMenu, 900));
+    }
+  };
+})(BookReader.prototype.initToolbar);
+
+
+BookReader.prototype.buildToolbarElement = (function (super_) {
+  return function () {
+    const $el = super_.call(this);
+    if (this.enableMobileNav) {
+      const escapedTitle = BookReader.util.escapeHTML(this.bookTitle);
+      const toolbar = `
+        <span class="BRmobileHamburgerWrapper">
+          <button class="BRmobileHamburger"></button>
+          <span class="BRtoolbarMobileTitle" title="${escapedTitle}">${escapedTitle}</span>
+        </span>
+      `;
+      $el
+        .addClass('responsive')
+        .prepend($(toolbar));
+    }
+    return $el;
+  };
+})(BookReader.prototype.buildToolbarElement);
+
+/**
+ * This method builds the html for the mobile drawer. It can be decorated to
+ * extend the default drawer.
+ * @return {jqueryElement}
+ */
+BookReader.prototype.buildMobileDrawerElement = function() {
+  let experimentalHtml = '';
+  //builds filters checkbox html
+  if (this.enableExperimentalControls) {
+    experimentalHtml = `
+        <p class="DrawerSettingsTitle">Visual Adjustment</p>
+        <div class="BRcheckbox-group-filters">
+        `;
+    FILTERLIST.forEach( (el, i) => {
+      const checkboxHtml = `
+          <input type="checkbox" class="BRcheckbox-filters" id="filter${i}">
+          <label for="filter${i}" class="BRcheckbox-label-filters">${el.label}</label><br>
+        
+      `;
+      experimentalHtml = experimentalHtml.concat(checkboxHtml);
+    });
+    experimentalHtml = experimentalHtml.concat("</div>");
+  }
+
+
+  const settingsSection = `
+    <span>
+        <span class="DrawerIconWrapper">
+          <img class="DrawerIcon" src="${`${this.imagesBaseURL}icon_gear.svg`}" alt="settings-icon"/>
+        </span>
+        Settings
+    </span>
+    <div class=DrawerSettingsWrapper>
+        <div class="DrawerSettingsLayoutWrapper">
+          <button class="DrawerLayoutButton one_page_mode">
+            <img src="${this.imagesBaseURL}icon_one_page.svg" alt="Single Page"/>
+            <br>
+            One Page
+          </button>
+          <button class="DrawerLayoutButton two_page_mode TwoPagesButton">
+            <img src="${this.imagesBaseURL}icon_two_pages.svg" alt="Two Pages"/>
+            <br>
+            Two Pages
+          </button>
+          <button class="DrawerLayoutButton thumbnail_mode">
+            <img src="${this.imagesBaseURL}icon_thumbnails.svg" alt="Thumbnails"/>
+            <br>
+            Thumbnails
+          </button>
+        </div>
+        <br>
+        <div class="DrawerSettingsTitle">Zoom</div>
+        <button class='BRicon zoom_out'></button>
+        <button class='BRicon zoom_in'></button>
+        <br style="clear:both"><br><br>
+        ${experimentalHtml}
+    </div>
+  `;
+  const moreInfo = `
+    <span>
+        <span class="DrawerIconWrapper ">
+            <img class="DrawerIcon" src="${this.imagesBaseURL}icon_info.svg" alt="info-icon"/>
+        </span>
+        About This Book
+    </span>
+    <div class="BRmobileInfo"></div>
+  `;
+  const share = `
+    <span>
+      <span class="DrawerIconWrapper">
+        <img class="DrawerIcon" src="${this.imagesBaseURL}icon_share.svg" alt="info-share"/>
+      </span>
+      Share This Book
+    </span>
+    <div class="BRmobileShare"></div>
+  `;
+  const navMenu = `
+    <nav id="BRmobileMenu" class="BRmobileMenu">
+      <ul>
+        <li class="BRmobileMenu__settings">${settingsSection}</li>
+        <li class="BRmobileMenu__moreInfoRow">${moreInfo}</li>
+        <li class="BRmobileMenu__share">${share}</li>
+      </ul>
+    </nav>
+  `;
+
+  const $el = $(navMenu);
+  return $el;
+};
+
+/**
+ * Mmenu moves itself out side of the root BookReader element, so we need to
+ * include it in the scoped $ function.
+ */
+BookReader.prototype.$ = (function (super_) {
+  return function (arg) {
+    let $results = super_.call(this, arg);
+    if (this.refs.$mmenu) {
+      $results = $results.add(this.refs.$mmenu.find(arg));
+    }
+    return $results;
+  };
+})(BookReader.prototype.$);
+
+/**
+* Dynamically creates styles combining different filters for BookReaders imgs
+* based on filters checkbox
+*/
+const applyFilters = (drawerEl, br) => {
+  let filterStr = "";
+
+  $('.BRcheckbox-filters').each(
+    (i, el) => {
+      br.refs.$br.removeClass("filter-applied");
+      if ($(el).is(':checked')) {
+        br.refs.$br.addClass($(el).attr("filter-applied"));
+        filterStr = filterStr + FILTERLIST[i].filter;
+      }
+    }
+  );
+  const filtersSheet = $("#filtersStyle")[0] || document.createElement('style');
+  filtersSheet.id = "filtersStyle";
+  filtersSheet.innerHTML = `.BRpagecontainer  img {
+            filter: ${filterStr};
+            -webkit-filter: ${filterStr};}`;
+  document.body.appendChild(filtersSheet);
+};

package/stat/plugins/plugin.resume.js

@@ -0,0 +1,68 @@
+import * as docCookies from '../util/docCookies.js';
+
+/* global BookReader */
+
+/** @deprecated Exposed for backward compatibility */
+BookReader.docCookies = docCookies;
+
+/**
+ * Plugin to remember the current page number in a cookie
+ */
+jQuery.extend(BookReader.defaultOptions, {
+  enablePageResume: true,
+  /** @type {string|null} eg '/', '/details/id' */
+  resumeCookiePath: null,
+});
+
+/** @override */
+BookReader.prototype.init = (function(super_) {
+  return function() {
+    super_.call(this);
+    if (this.options.enablePageResume) {
+      this.bind(BookReader.eventNames.fragmentChange, () => {
+        const params = this.paramsFromCurrent();
+        this.updateResumeValue(params.index);
+      });
+    }
+  };
+})(BookReader.prototype.init);
+
+/**
+ * Gets page resume value, for remembering reader's page
+ * Can be overridden for different implementation
+ *
+ * @return {number|null}
+ */
+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/...
+ * using window.location.pathname for urlPathPart:
+ * - matches encoding
+ * - ignores querystring part
+ * - ignores fragment part (after #)
+ * @param {string} urlPathPart - window.location.pathname
+ */
+BookReader.prototype.getCookiePath = function(urlPathPart) {
+  return urlPathPart.match('.+?(?=/page/|/mode/|$)')[0];
+};
+
+/**
+ * Sets page resume value, for remembering reader's page
+ * Can be overridden for different implementation
+ *
+ * @param {Number} index leaf index
+ * @param {string} [cookieName]
+ */
+BookReader.prototype.updateResumeValue = function(index, cookieName) {
+  const ttl = new Date(+new Date + 12096e5); // 2 weeks
+  // For multiple files in item, leave resumeCookiePath blank
+  // It's likely we can remove resumeCookiePath using getCookiePath()
+  const path = this.options.resumeCookiePath
+    || this.getCookiePath(window.location.pathname);
+  BookReader.docCookies.setItem(cookieName || 'br-resume', index, ttl, path, null, false);
+};