@internetarchive/bookreader 5.0.0-18

package/src/plugins/plugin.archive_analytics.js

@@ -0,0 +1,86 @@
+/* global BookReader, archive_analytics */
+/**
+ * Plugin for Archive.org analytics
+ */
+jQuery.extend(BookReader.defaultOptions, {
+  enableArchiveAnalytics: true,
+  /** Provide a means of debugging, cause otherwise it's impossible to test locally */
+  debugArchiveAnaltyics: false,
+});
+
+BookReader.prototype.init = (function(super_) {
+  return function() {
+    super_.call(this);
+
+    if (this.options.enableArchiveAnalytics) {
+      this.bind(BookReader.eventNames.fragmentChange, () => this.archiveAnalyticsSendFragmentChange());
+    }
+  };
+})(BookReader.prototype.init);
+
+/** @private */
+BookReader.prototype.archiveAnalyticsSendFragmentChange = function() {
+  if (!window.archive_analytics) {
+    return;
+  }
+
+  const prevFragment = this.archiveAnalyticsSendFragmentChange.prevFragment;
+
+  const params = this.paramsFromCurrent();
+  const newFragment = this.fragmentFromParams(params);
+
+  if (prevFragment != newFragment) {
+    const values = {
+      bookreader: "user_changed_view",
+      itemid: this.bookId,
+      cache_bust: Math.random()
+    };
+    // EEK!  offsite embedding and /details/ page books look the same in analytics, otherwise!
+    values.offsite = 1;
+    values.details = 0;
+    try {
+      values.offsite = window.top.location.hostname.match(/\.archive.org$/)
+        ? 0
+        : 1;
+      values.details =
+        !values.offsite && window.top.location.pathname.match(/^\/details\//)
+          ? 1
+          : 0;
+    } catch (e) {}
+    // avoids embed cross site exceptions -- but on (+) side, means it is and keeps marked offite!
+
+    // Send bookreader ping
+    archive_analytics.send_ping(values, null, "augment_for_ao_site");
+
+    // Also send tracking event ping
+    const additionalEventParams = this.options.lendingInfo && this.options.lendingInfo.loanId
+      ? { loanId: this.options.lendingInfo.loanId }
+      : {};
+    archive_analytics.send_event('BookReader', 'UserChangedView', window.location.pathname, additionalEventParams);
+
+    this.archiveAnalyticsSendFragmentChange.prevFragment = newFragment;
+  }
+};
+
+/**
+ * Sends a tracking "Event". See https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters#events
+ * @param {string} category
+ * @param {string} action
+ * @param {number} [value] (must be an int)
+ * @param {Object} [additionalEventParams]
+ */
+BookReader.prototype.archiveAnalyticsSendEvent = function(category, action, value, additionalEventParams) {
+  if (!this.options.enableArchiveAnalytics) return;
+
+  if (this.options.debugArchiveAnaltyics) {
+    console.log("archiveAnalyticsSendEvent", arguments, window.archive_analytics);
+  }
+
+  if (!window.archive_analytics) return;
+
+  additionalEventParams = additionalEventParams || {};
+  if (typeof(value) == 'number') {
+    additionalEventParams.ev = value;
+  }
+  window.archive_analytics.send_event(category, action, null, additionalEventParams);
+};

package/src/plugins/plugin.autoplay.js

@@ -0,0 +1,129 @@
+/*global BookReader */
+
+/**
+ * Plugin which adds an autoplay feature. Useful for kiosk situations.
+ */
+jQuery.extend(BookReader.defaultOptions, {
+  enableAutoPlayPlugin: true
+});
+
+/**
+ * @override BookReader.setup
+ */
+BookReader.prototype.setup = (function(super_) {
+  return function (options) {
+    super_.call(this, options);
+
+    this.auto      = false;
+    this.autoTimer = null;
+    this.flipDelay = 5000;
+  };
+})(BookReader.prototype.setup);
+
+/**
+ * @override BookReader.init
+ */
+BookReader.prototype.init = (function(super_) {
+  return function (options) {
+    super_.call(this, options);
+
+    if (!this.options.enableAutoPlayPlugin) return;
+    this.bind(BookReader.eventNames.stop, () => this.autoStop());
+  };
+})(BookReader.prototype.init);
+
+/**
+ * @override BookReader.bindNavigationHandlers
+ */
+BookReader.prototype.bindNavigationHandlers = (function(super_) {
+  return function() {
+    super_.call(this);
+
+    if (!this.options.enableAutoPlayPlugin) return;
+
+    // Note the mobile plugin attaches itself to body, so we need to select outside
+    const jIcons = this.$('.BRicon').add('.BRmobileMenu .BRicon');
+
+    jIcons.filter('.play').click(() => {
+      this.autoToggle();
+      return false;
+    });
+
+    jIcons.filter('.pause').click(() => {
+      this.autoToggle();
+      return false;
+    });
+  };
+})(BookReader.prototype.bindNavigationHandlers);
+
+/**
+ * Starts autoplay mode
+ * @param {object} overrides
+ * @param {number} overrides.flipSpeed
+ * @param {number} overrides.flipDelay
+ */
+BookReader.prototype.autoToggle = function(overrides) {
+  if (!this.options.enableAutoPlayPlugin) return;
+
+  const options = $.extend({
+    flipSpeed: this.flipSpeed,
+    flipDelay: this.flipDelay
+  }, overrides);
+
+  this.flipSpeed = typeof options.flipSpeed === "number" ? options.flipSpeed : this.flipSpeed;
+  this.flipDelay = typeof options.flipDelay === "number" ? options.flipDelay : this.flipDelay;
+  this.trigger(BookReader.eventNames.stop);
+
+  let bComingFrom1up = false;
+  if (this.constMode2up != this.mode) {
+    bComingFrom1up = true;
+    this.switchMode(this.constMode2up);
+  }
+
+  // Change to autofit if book is too large
+  if (this.reduce < this.twoPageGetAutofitReduce()) {
+    this.zoom('auto');
+  }
+
+  if (null == this.autoTimer) {
+    // $$$ Draw events currently cause layout problems when they occur during animation.
+    //     There is a specific problem when changing from 1-up immediately to autoplay in RTL so
+    //     we workaround for now by not triggering immediate animation in that case.
+    //     See https://bugs.launchpad.net/gnubook/+bug/328327
+    if (('rl' == this.pageProgression) && bComingFrom1up) {
+      // don't flip immediately -- wait until timer fires
+    } else {
+      // flip immediately
+      this.flipFwdToIndex();
+    }
+
+    this.$('.play').hide();
+    this.$('.pause').show();
+    this.autoTimer = setInterval(() => {
+      if (this.animating) return;
+
+      if (Math.max(this.twoPage.currentIndexL, this.twoPage.currentIndexR) >= this.lastDisplayableIndex()) {
+        this.flipBackToIndex(1); // $$$ really what we want?
+      } else {
+        this.flipFwdToIndex();
+      }
+    }, this.flipDelay);
+  } else {
+    this.autoStop();
+  }
+};
+
+/**
+ * Stop autoplay mode, allowing animations to finish
+ */
+BookReader.prototype.autoStop = function() {
+  if (!this.options.enableAutoPlayPlugin) return;
+
+  if (null != this.autoTimer) {
+    clearInterval(this.autoTimer);
+    this.flipSpeed = 'fast';
+    this.$('.pause').hide();
+    this.$('.play').show();
+    this.autoTimer = null;
+  }
+};

package/src/plugins/plugin.chapters.js

@@ -0,0 +1,251 @@
+/* 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").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 })
+      .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]);
+  }
+  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.hover(
+      () => $el.addClass('front'),
+      () => $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/src/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));
+  });
+}