@internetarchive/bookreader 5.0.0-10-alpha-1 → 5.0.0-100

package/src/plugins/plugin.archive_analytics.js

@@ -1,86 +1,92 @@
-/* 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);
+// @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
-    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;
+  /** @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,129 +1,124 @@
-/*global BookReader */
+// @ts-check
+import { EVENTS } from "../BookReader/events.js";
+import { parseAnimationSpeed } from "../BookReader/utils.js";
+import { BookReaderPlugin } from "../BookReaderPlugin.js";
 
 /**
  * Plugin which adds an autoplay feature. Useful for kiosk situations.
  */
-jQuery.extend(BookReader.defaultOptions, {
-  enableAutoPlayPlugin: true
-});
+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.setup
- */
-BookReader.prototype.setup = (function(super_) {
-  return function (options) {
-    super_.call(this, options);
+  timer = null;
 
-    this.auto      = false;
-    this.autoTimer = null;
-    this.flipDelay = 5000;
-  };
-})(BookReader.prototype.setup);
+  /** @override */
+  init() {
+    if (!this.options.enabled) return;
 
-/**
- * @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);
+    this.br.bind(EVENTS.stop, () => this.stop());
 
-/**
- * @override BookReader.bindNavigationHandlers
- */
-BookReader.prototype.bindNavigationHandlers = (function(super_) {
-  return function() {
-    super_.call(this);
+    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();
+      }
+    }
+  }
 
-    if (!this.options.enableAutoPlayPlugin) return;
+  /** @override */
+  _bindNavigationHandlers() {
+    if (!this.options.enabled) return;
 
-    // Note the mobile plugin attaches itself to body, so we need to select outside
-    const jIcons = this.$('.BRicon').add('.BRmobileMenu .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);
-  }
-
-  // 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();
+  /**
+   * 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.lastDisplayableIndex()) {
-        this.flipBackToIndex(1); // $$$ 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.flipFwdToIndex();
+        // 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);