@internetarchive/bookreader 5.0.0-88-alpha.11 → 5.0.0-89

package/src/plugins/plugin.archive_analytics.js

@@ -1,86 +1,92 @@
-/* global BookReader */
-/**
- * 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);
+// @ts-check
+import { BookReaderPlugin } from "../BookReaderPlugin.js";
+
+const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
+
 
-/** @private */
-BookReader.prototype.archiveAnalyticsSendFragmentChange = function() {
-  if (!window.archive_analytics) {
-    return;
+export class ArchiveAnalyticsPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+    /** Provide a means of debugging, cause otherwise it's impossible to test locally */
+    debug: false,
   }
 
-  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
-    window.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 }
-      : {};
-    window.archive_analytics.send_event('BookReader', 'UserChangedView', window.location.pathname, additionalEventParams);
-
-    this.archiveAnalyticsSendFragmentChange.prevFragment = newFragment;
+  /** @type {string} */
+  _prevFragment = null;
+
+  /** @override */
+  init() {
+    if (this.options.enabled) {
+      this.br.bind(BookReader.eventNames.fragmentChange, () => this.sendFragmentChange());
+    }
   }
-};
-
-/**
- * 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);
+
+  /** @private */
+  sendFragmentChange() {
+    if (!window.archive_analytics) {
+      return;
+    }
+
+    const prevFragment = this._prevFragment;
+
+    const params = this.br.paramsFromCurrent();
+    const newFragment = this.br.fragmentFromParams(params);
+
+    if (prevFragment != newFragment) {
+      const values = {
+        bookreader: "user_changed_view",
+        itemid: this.br.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
+      window.archive_analytics.send_ping(values, null, "augment_for_ao_site");
+
+      // Also send tracking event ping
+      const additionalEventParams = this.br.options.lendingInfo?.loanId
+        ? { loanId: this.br.options.lendingInfo.loanId }
+        : {};
+      window.archive_analytics.send_event('BookReader', 'UserChangedView', window.location.pathname, additionalEventParams);
+
+      this._prevFragment = newFragment;
+    }
   }
 
-  if (!window.archive_analytics) return;
+  /**
+   * 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]
+   */
+  sendEvent(category, action, value, additionalEventParams) {
+    if (!this.options.enabled) return;
 
-  additionalEventParams = additionalEventParams || {};
-  if (typeof(value) == 'number') {
-    additionalEventParams.ev = value;
+    if (this.options.debug) {
+      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);
   }
-  window.archive_analytics.send_event(category, action, null, additionalEventParams);
-};
+}
+
+BookReader?.registerPlugin('archiveAnalytics', ArchiveAnalyticsPlugin);

package/src/plugins/plugin.autoplay.js

@@ -1,128 +1,124 @@
-/*global BookReader */
+// @ts-check
+import { EVENTS } from "../BookReader/events";
+import { parseAnimationSpeed } from "../BookReader/utils";
+import { BookReaderPlugin } from "../BookReaderPlugin";
 
 /**
  * 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.autoTimer = null;
-    this.flipDelay = 5000;
-  };
-})(BookReader.prototype.setup);
+export class AutoplayPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+    /**
+     * @type {number | 'fast' | 'slow'}
+     * How quickly the flip animation should run.
+     **/
+    flipSpeed: 1500,
+    /** How long to pause on each page between flips */
+    flipDelay: 5000,
+    /** Allow controlling the autoflip/speed/delay from the url */
+    urlParams: true,
+  }
 
-/**
- * @override BookReader.init
- */
-BookReader.prototype.init = (function(super_) {
-  return function (options) {
-    super_.call(this, options);
+  timer = null;
 
-    if (!this.options.enableAutoPlayPlugin) return;
+  /** @override */
+  init() {
+    if (!this.options.enabled) return;
 
-    this.bind(BookReader.eventNames.stop, () => this.autoStop());
+    this.br.bind(EVENTS.stop, () => this.stop());
 
-    const urlParams = new URLSearchParams(window.location.search);
-    if (urlParams.get('autoflip') === '1') {
-      this.autoToggle();
+    if (this.options.urlParams) {
+      const urlParams = new URLSearchParams(window.location.search);
+      if (urlParams.get('flipSpeed')) {
+        this.options.flipSpeed = parseAnimationSpeed(urlParams.get('flipSpeed')) || this.options.flipSpeed;
+      }
+      if (urlParams.get('flipDelay')) {
+        this.options.flipDelay = parseAnimationSpeed(urlParams.get('flipDelay')) || this.options.flipDelay;
+      }
+      if (urlParams.get('autoflip') === '1') {
+        this.toggle();
+      }
     }
-  };
-})(BookReader.prototype.init);
-
-/**
- * @override BookReader.bindNavigationHandlers
- */
-BookReader.prototype.bindNavigationHandlers = (function(super_) {
-  return function() {
-    super_.call(this);
+  }
 
-    if (!this.options.enableAutoPlayPlugin) return;
+  /** @override */
+  _bindNavigationHandlers() {
+    if (!this.options.enabled) return;
 
-    const jIcons = this.$('.BRicon');
+    const jIcons = this.br.$('.BRicon');
 
-    jIcons.filter('.play').click(() => {
-      this.autoToggle();
+    jIcons.filter('.play').on('click', () => {
+      this.toggle();
       return false;
     });
 
-    jIcons.filter('.pause').click(() => {
-      this.autoToggle();
+    jIcons.filter('.pause').on('click', () => {
+      this.toggle();
       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);
   }
 
-  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.next({ triggerStop: false });
+  /**
+   * Starts autoplay mode
+   * @param {object} overrides
+   * @param {number} overrides.flipSpeed
+   * @param {number} overrides.flipDelay
+   */
+  toggle(overrides = null) {
+    if (!this.options.enabled) return;
+
+    Object.assign(this.options, overrides);
+    this.br.trigger(EVENTS.stop);
+
+    let bComingFrom1up = false;
+    if (this.br.constMode2up != this.br.mode) {
+      bComingFrom1up = true;
+      this.br.switchMode(this.br.constMode2up);
     }
 
-    this.$('.play').hide();
-    this.$('.pause').show();
-    this.autoTimer = setInterval(() => {
-      if (this.animating) return;
-
-      if (Math.max(this.twoPage.currentIndexL, this.twoPage.currentIndexR) >= this.book.getNumLeafs() - 1) {
-        this.prev({ triggerStop: false }); // $$$ really what we want?
+    if (null == this.timer) {
+      // $$$ 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.br.pageProgression) && bComingFrom1up) {
+        // don't flip immediately -- wait until timer fires
       } else {
-        this.next({ triggerStop: false });
+        // flip immediately
+        this.br.next({ triggerStop: false, flipSpeed: this.options.flipSpeed });
       }
-    }, this.flipDelay);
-  } else {
-    this.autoStop();
+
+      this.br.$('.play').hide();
+      this.br.$('.pause').show();
+      this.timer = setInterval(() => {
+        if (this.br.animating) return;
+
+        if (Math.max(this.br.twoPage.currentIndexL, this.br.twoPage.currentIndexR) >= this.br.book.getNumLeafs() - 1) {
+          this.br.prev({ triggerStop: false, flipSpeed: this.options.flipSpeed }); // $$$ really what we want?
+        } else {
+          this.br.next({ triggerStop: false, flipSpeed: this.options.flipSpeed });
+        }
+      }, parseAnimationSpeed(this.options.flipDelay));
+    } else {
+      this.stop();
+    }
   }
-};
 
-/**
- * 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;
+  /**
+   * Stop autoplay mode, allowing animations to finish
+   */
+  stop() {
+    if (!this.options.enabled) return;
+
+    if (null != this.timer) {
+      clearInterval(this.timer);
+      this.br.$('.pause').hide();
+      this.br.$('.play').show();
+      this.timer = null;
+    }
   }
-};
+}
+
+const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
+BookReader?.registerPlugin('autoplay', AutoplayPlugin);

package/src/plugins/plugin.chapters.js

@@ -191,6 +191,7 @@ BookReader.prototype._chaptersUpdateCurrent = function(
   }
 };
 
+@customElement('br-chapters-panel')
 export class BRChaptersPanel extends LitElement {
   /** @type {TocEntry[]} */
   @property({ type: Array })
@@ -213,9 +214,9 @@ export class BRChaptersPanel extends LitElement {
 
   render() {
     return html`
-      <ol>
-        ${this.contents.map((tocEntry) => this.renderTOCEntry(tocEntry))}
-      </ol>
+    <ol>
+      ${this.contents.map(tocEntry => this.renderTOCEntry(tocEntry))}
+    </ol>
     `;
   }
 
@@ -224,29 +225,26 @@ export class BRChaptersPanel extends LitElement {
    */
   renderTOCEntry(tocEntry) {
     const chapterTitle = [tocEntry.label, tocEntry.title]
-      .filter((x) => x)
+      .filter(x => x)
       .join(' ');
     const clickable = tocEntry.pageIndex != undefined;
     // note the click-tracking won't work...
-    return html` <li
+    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,
-      )}"
+      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}
+      ${tocEntry.pagenum ? html`
+        <br />
+        <span class="BRTOCElementPage">Page ${tocEntry.pagenum}</span>
+      ` : nothing}
     </li>`;
   }
 
@@ -283,20 +281,17 @@ export class BRChaptersPanel extends LitElement {
       }
 
       li.clickable:not(.current):hover {
-        background-color: rgba(255, 255, 255, 0.05);
+        background-color: rgba(255,255,255, 0.05);
       }
 
       li.current {
-        background-color: rgba(255, 255, 255, 0.9);
+        background-color: rgba(255,255,255,0.9);
         color: #333;
       }
 
       .BRTOCElementPage {
         font-size: 0.85em;
-        opacity: 0.8;
-      }
-    `;
+        opacity: .8;
+      }`;
   }
 }
-
-customElements.define('br-chapters-panel', BRChaptersPanel);

package/src/plugins/plugin.iiif.js

@@ -1,17 +1,22 @@
 // @ts-check
+import { BookReaderPlugin } from '../BookReaderPlugin';
+
 const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
 
-export const DEFAULT_OPTIONS = {
-  enabled: true,
-  /** @type {import('@iiif/presentation-3').Manifest | import('@iiif/presentation-2').Manifest} */
-  manifest: null,
-};
+export class IiifPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+    /** @type {import('@iiif/presentation-3').Manifest | import('@iiif/presentation-2').Manifest} */
+    manifest: null,
+  }
 
-class IIIFPlugin {
-  constructor(options = DEFAULT_OPTIONS, optionVariables) {
-    this.options = options;
-    this.optionVariables = optionVariables;
-    this.manifest = options.manifest;
+  setup(options) {
+    super.setup(options);
+    this.manifest = this.options.manifest;
+
+    if (this.options.enabled) {
+      Object.assign(this.br.options, this.load());
+    }
   }
 
   load() {
@@ -133,23 +138,4 @@ function resolveInternationalString(internationalString) {
   return (internationalString[navigator.language] || internationalString[anyLang])[0];
 }
 
-export class BookReaderWithIIIFPlugin extends BookReader {
-  setup(options) {
-    const pluginOpts = Object.assign(
-      {},
-      DEFAULT_OPTIONS,
-      options.plugins.iiif,
-    );
-
-    if (pluginOpts.enabled) {
-      this.iiifPlugin = new IIIFPlugin(pluginOpts, options.vars);
-      // Write this back; this way the plugin is the source of truth, and BR just
-      // contains a reference to it.
-      options.plugins.iiif = this.iiifPlugin.options;
-      Object.assign(options, this.iiifPlugin.load());
-    }
-    return super.setup(options);
-  }
-}
-window.BookReader = BookReaderWithIIIFPlugin;
-export default BookReaderWithIIIFPlugin;
+BookReader?.registerPlugin('iiif', IiifPlugin);

package/src/plugins/plugin.resume.js

@@ -1,3 +1,5 @@
+import { EVENTS } from '../BookReader/events.js';
+import { BookReaderPlugin } from '../BookReaderPlugin.js';
 import * as docCookies from '../util/docCookies.js';
 
 /* global BookReader */
@@ -8,61 +10,62 @@ 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,
-});
+export class ResumePlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+    /** @type {string|null} eg '/', '/details/id' */
+    cookiePath: 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();
+  /** @override */
+  init() {
+    if (this.options.enabled) {
+      this.br.bind(EVENTS.fragmentChange, () => {
+        const params = this.br.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;
-};
+  /**
+   * Gets page resume value, for remembering reader's page
+   * Can be overridden for different implementation
+   *
+   * @return {number|null}
+   */
+  getResumeValue() {
+    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];
-};
+  /**
+   * 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
+   */
+  getCookiePath(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);
-};
+  /**
+   * Sets page resume value, for remembering reader's page
+   * Can be overridden for different implementation
+   *
+   * @param {Number} index leaf index
+   * @param {string} [cookieName]
+   */
+  updateResumeValue(index, cookieName) {
+    const ttl = new Date(+new Date + 12096e5); // 2 weeks
+    // For multiple files in item, leave cookiePath blank
+    // It's likely we can remove cookiePath using getCookiePath()
+    const path = this.options.cookiePath
+      || this.getCookiePath(window.location.pathname);
+    BookReader.docCookies.setItem(cookieName || 'br-resume', index, ttl, path, null, false);
+  }
+}
+
+BookReader?.registerPlugin('resume', ResumePlugin);