@internetarchive/bookreader 5.0.0-92 → 5.0.0-94

package/src/BookReader.js

@@ -37,10 +37,10 @@ import { Toolbar } from './BookReader/Toolbar/Toolbar.js';
 import { BookModel } from './BookReader/BookModel.js';
 import { Mode1Up } from './BookReader/Mode1Up.js';
 import { Mode2Up } from './BookReader/Mode2Up.js';
-import { ModeThumb } from './BookReader/ModeThumb';
+import { ModeThumb } from './BookReader/ModeThumb.js';
 import { ImageCache } from './BookReader/ImageCache.js';
 import { PageContainer } from './BookReader/PageContainer.js';
-import { NAMED_REDUCE_SETS } from './BookReader/ReduceSet';
+import { NAMED_REDUCE_SETS } from './BookReader/ReduceSet.js';
 
 /**
  * BookReader
@@ -134,7 +134,7 @@ BookReader.prototype.setup = function(options) {
   this.bookPath = options.bookPath;
 
   // Construct the usual plugins first to get type hints
-  this._plugins = {
+  this.plugins = {
     archiveAnalytics: BookReader.PLUGINS.archiveAnalytics ? new BookReader.PLUGINS.archiveAnalytics(this) : null,
     autoplay: BookReader.PLUGINS.autoplay ? new BookReader.PLUGINS.autoplay(this) : null,
     chapters: BookReader.PLUGINS.chapters ? new BookReader.PLUGINS.chapters(this) : null,
@@ -145,18 +145,18 @@ BookReader.prototype.setup = function(options) {
   };
 
   // Delete anything that's null
-  for (const [pluginName, plugin] of Object.entries(this._plugins)) {
-    if (!plugin) delete this._plugins[pluginName];
+  for (const [pluginName, plugin] of Object.entries(this.plugins)) {
+    if (!plugin) delete this.plugins[pluginName];
   }
 
   // Now construct the rest of the plugins
   for (const [pluginName, PluginClass] of Object.entries(BookReader.PLUGINS)) {
-    if (this._plugins[pluginName] || !PluginClass) continue;
-    this._plugins[pluginName] = new PluginClass(this);
+    if (this.plugins[pluginName] || !PluginClass) continue;
+    this.plugins[pluginName] = new PluginClass(this);
   }
 
   // And call setup on them
-  for (const [pluginName, plugin] of Object.entries(this._plugins)) {
+  for (const [pluginName, plugin] of Object.entries(this.plugins)) {
     try {
       plugin.setup(this.options.plugins?.[pluginName] ?? {});
       // Write the options back; this way the plugin is the source of truth,
@@ -167,9 +167,9 @@ BookReader.prototype.setup = function(options) {
     }
   }
 
-  if (this._plugins.search?.options.enabled) {
+  if (this.plugins.search?.options.enabled) {
     // Expose the search method for convenience / backward compat
-    this.search = this._plugins.search.search.bind(this._plugins.search);
+    this.search = this.plugins.search.search.bind(this.plugins.search);
   }
 
   /** @type {number} @deprecated some past iterations set this */
@@ -426,9 +426,9 @@ BookReader.prototype.initParams = function() {
   }
 
   // Check for Resume plugin
-  if (this._plugins.resume?.options.enabled) {
+  if (this.plugins.resume?.options.enabled) {
     // Check cookies
-    const val = this._plugins.resume.getResumeValue();
+    const val = this.plugins.resume.getResumeValue();
     if (val !== null) {
       // If page index different from default
       if (params.index !== val) {
@@ -462,8 +462,8 @@ BookReader.prototype.initParams = function() {
   }
 
   // Check for Search plugin
-  if (this._plugins.search?.options.enabled) {
-    const sp = this._plugins.search;
+  if (this.plugins.search?.options.enabled) {
+    const sp = this.plugins.search;
     // Go to first result only if no default or URL page
     sp.options.goToFirstResult = !params.pageFound;
 
@@ -619,7 +619,7 @@ BookReader.prototype.init = function() {
     const $navBar = this.initNavbar();
 
     // extend navbar with plugins
-    for (const plugin of Object.values(this._plugins)) {
+    for (const plugin of Object.values(this.plugins)) {
       plugin.extendNavBar($navBar);
     }
   }
@@ -660,7 +660,7 @@ BookReader.prototype.init = function() {
   }
 
   // If not searching, set to allow on-going fragment changes
-  if (!this._plugins.search?.options.initialSearchTerm) {
+  if (!this.plugins.search?.options.initialSearchTerm) {
     this.suppressFragmentChange = false;
   }
 
@@ -669,7 +669,7 @@ BookReader.prototype.init = function() {
   }
 
   // Init plugins
-  for (const [pluginName, plugin] of Object.entries(this._plugins)) {
+  for (const [pluginName, plugin] of Object.entries(this.plugins)) {
     try {
       plugin.init();
     }
@@ -702,14 +702,28 @@ BookReader.prototype.trigger = function(name, props = this) {
   $(document).trigger(eventName, props);
 };
 
-BookReader.prototype.bind = function(name, callback) {
+BookReader.prototype.on = function(name, callback) {
   $(document).on('BookReader:' + name, callback);
 };
 
-BookReader.prototype.unbind = function(name, callback) {
+BookReader.prototype.off = function(name, callback) {
   $(document).off('BookReader:' + name, callback);
 };
 
+/**
+ * @deprecated Use .on and .off instead
+ */
+BookReader.prototype.bind = function(name, callback) {
+  return this.on(name, callback);
+};
+
+/**
+ * @deprecated Use .on and .off instead
+ */
+BookReader.prototype.unbind = function(name, callback) {
+  return this.off(name, callback);
+};
+
 /**
  * Resizes based on the container width and height
  */
@@ -874,7 +888,7 @@ BookReader.prototype._createPageContainer = function(index) {
   });
 
   // Call plugin handlers
-  for (const plugin of Object.values(this._plugins)) {
+  for (const plugin of Object.values(this.plugins)) {
     plugin._configurePageContainer(pageContainer);
   }
 
@@ -927,7 +941,7 @@ BookReader.prototype.zoom = function(direction) {
   } else {
     this.activeMode.zoom('out');
   }
-  this._plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  this.plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
   return;
 };
 
@@ -1105,7 +1119,7 @@ BookReader.prototype.getPrevReadMode = function(mode) {
 
 /**
  * Switches the mode (eg 1up 2up thumb)
- * @param {number}
+ * @param {number|'1up' | '2up' | 'thumb'}
  * @param {object} [options]
  * @param {boolean} [options.suppressFragmentChange = false]
  * @param {boolean} [options.onInit = false] - this
@@ -1118,6 +1132,18 @@ BookReader.prototype.switchMode = function(
     pageFound = false,
   } = {},
 ) {
+  if (typeof mode === 'string') {
+    mode = {
+      '1up': this.constMode1up,
+      '2up': this.constMode2up,
+      'thumb': this.constModeThumb,
+    }[mode];
+  }
+
+  if (!mode) {
+    throw new Error(`Invalid mode: ${mode}`);
+  }
+
   // Skip checks before init() complete
   if (this.init.initComplete) {
     if (mode === this.mode) {
@@ -1162,7 +1188,7 @@ BookReader.prototype.switchMode = function(
   const eventName = mode + 'PageViewSelected';
   this.trigger(BookReader.eventNames[eventName]);
 
-  this._plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  this.plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
 };
 
 BookReader.prototype.updateBrClasses = function() {
@@ -1234,7 +1260,7 @@ BookReader.prototype.enterFullscreen = async function(bindKeyboardControls = tru
   }
   this.jumpToIndex(currentIndex);
 
-  this._plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  this.plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
   // Add "?view=theater"
   this.trigger(BookReader.eventNames.fragmentChange);
   // trigger event here, so that animations,
@@ -1280,7 +1306,7 @@ BookReader.prototype.exitFullScreen = async function () {
     await this.activeMode.mode1UpLit.updateComplete;
   }
 
-  this._plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  this.plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
   // Remove "?view=theater"
   this.trigger(BookReader.eventNames.fragmentChange);
   this.refs.$br.removeClass('BRfullscreenAnimation');
@@ -1324,7 +1350,7 @@ BookReader.prototype.updateFirstIndex = function(
   // If there's an initial search we stop suppressing global URL changes
   // when local suppression ends
   // This seems to correctly handle multiple calls during mode/1up
-  if (this._plugins.search.options.initialSearchTerm && !suppressFragmentChange) {
+  if (this.plugins.search?.options.initialSearchTerm && !suppressFragmentChange) {
     this.suppressFragmentChange = false;
   }
 
@@ -1601,7 +1627,7 @@ BookReader.prototype.bindNavigationHandlers = function() {
     });
 
   // Call _bindNavigationHandlers on the plugins
-  for (const plugin of Object.values(this._plugins)) {
+  for (const plugin of Object.values(this.plugins)) {
     plugin._bindNavigationHandlers();
   }
 };
@@ -1653,8 +1679,8 @@ BookReader.prototype.updateFromParams = function(params) {
   // process /search
   // @deprecated for urlMode 'history'
   // Continues to work for urlMode 'hash'
-  if (this._plugins.search?.enabled && 'undefined' != typeof(params.search)) {
-    if (this._plugins.search.searchTerm !== params.search) {
+  if (this.plugins.search?.enabled && 'undefined' != typeof(params.search)) {
+    if (this.plugins.search.searchTerm !== params.search) {
       this.$('.BRsearchInput').val(params.search);
     }
   }
@@ -1858,8 +1884,8 @@ BookReader.prototype.paramsFromCurrent = function() {
     params.view = fullscreenView;
   }
   // Search
-  if (this._plugins.search?.enabled) {
-    params.search = this._plugins.search.searchTerm;
+  if (this.plugins.search?.enabled) {
+    params.search = this.plugins.search.searchTerm;
   }
 
   return params;

package/src/css/_TextSelection.scss

@@ -8,6 +8,7 @@
     // Make it so right-clicking on "blank" part of text layer sends events to the image (for saving)
     pointer-events: none;
     cursor: text;
+    mix-blend-mode: multiply;
 }
 
 .BRparagraphElement {
@@ -58,7 +59,8 @@
 
 // Hide text layer for performance during zooming & scrolling
 .BRsmooth-zooming, .BRscrolling-active {
-    .BRpagecontainer:not(.BRpagecontainer--hasSelection) .BRtextLayer {
+    // If the text layer has an annotation, don't hide it
+    .BRpagecontainer:not(.BRpagecontainer--hasSelection):not(:has(hypothesis-highlight)) .BRtextLayer {
         display: none;
     }
 }

package/src/plugins/plugin.autoplay.js

@@ -1,7 +1,7 @@
 // @ts-check
-import { EVENTS } from "../BookReader/events";
-import { parseAnimationSpeed } from "../BookReader/utils";
-import { BookReaderPlugin } from "../BookReaderPlugin";
+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.

package/src/plugins/plugin.chapters.js

@@ -3,8 +3,8 @@ 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';
-import { BookReaderPlugin } from "../BookReaderPlugin";
+import '@internetarchive/icon-toc/icon-toc.js';
+import { BookReaderPlugin } from "../BookReaderPlugin.js";
 import { applyVariables } from "../util/strings.js";
 /** @typedef {import('@/src/BookReader/BookModel.js').PageIndex} PageIndex */
 /** @typedef {import('@/src/BookReader/BookModel.js').PageString} PageString */

package/src/plugins/plugin.experiments.js

@@ -0,0 +1,294 @@
+// @ts-check
+import { css, html, LitElement } from 'lit';
+import { BookReaderPlugin } from '../BookReaderPlugin.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { sleep } from '../BookReader/utils.js';
+
+// @ts-ignore
+const BookReader = /** @type {typeof import('@/src/BookReader.js').default} */(window.BookReader);
+
+class ExperimentModel {
+  /** @type {string} test */
+  name;
+  /** @type {string} */
+  title;
+  /** @type {string} */
+  description;
+  /** @type {string} */
+  icon;
+  /** @type {boolean} */
+  enabled;
+  /** @type {string} */
+  learnMore;
+
+  assetRoot = '/BookReader/';
+
+  enabledLoading = false;
+
+  /**
+   * @param {string} path
+   */
+  buildAssetPath(path) {
+    return `${this.assetRoot}${path}`;
+  }
+
+  /**
+   * @param {object} param0
+   * @param {boolean} param0.manual Whether the experiment was enabled manually
+   */
+  async enable({ manual }) { }
+  async disable() { }
+}
+
+export class ExperimentsPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+
+    /** Where the state of this plugin is saved in localStorage */
+    localStorageKey: 'BrExperiments',
+  }
+
+  /** @type {ExperimentModel[]} */
+  experiments = [
+    new class extends ExperimentModel {
+      name = 'hypothesis';
+      title = 'Hypothes.is';
+      description = 'Create public, collaborative, or fully private annotations on books and the web.';
+      learnMore = 'https://web.hypothes.is/about/';
+      icon = 'images/hypothesis.ico';
+      enabled = false;
+
+      async enable({ manual = false }) {
+        // Hypothesis configs ; see https://h.readthedocs.io/projects/client/en/latest/publishers/config.html
+        const configScript = document.createElement('script');
+        configScript.type = 'application/json';
+        configScript.className = 'js-hypothesis-config';
+        configScript.textContent = JSON.stringify({
+          // Open the sidebar if this is the first time enabling
+          openSidebar: manual,
+          assetRoot: this.buildAssetPath('hypothesis/'),
+        });
+
+        document.head.appendChild(configScript);
+        return importAsScript(this.buildAssetPath('hypothesis/build/boot.js'));
+        // For testing
+        // return importAsScript('http://localhost:3001/hypothesis');
+      }
+
+      async disable() {
+        // need to reload to remove the Hypothesis script
+        // Sleep so that the event loop can finish processing before the reload
+        sleep(0).then(() => {
+          window.location.reload();
+        });
+      }
+    }(),
+  ]
+
+  /** @type {BrExperimentsPanel} */
+  _panel;
+
+  async init() {
+    if (!this.options.enabled) {
+      return;
+    }
+
+    for (const experiment of this.experiments) {
+      // TODO: imagesBaseURL should be replaced with assetRoot everywhere
+      experiment.assetRoot = this.br.options.imagesBaseURL.replace(/images\/$/, '');
+      experiment.icon = experiment.buildAssetPath(experiment.icon);
+    }
+
+    this._loadExperimentStates();
+    await Promise.resolve();
+    this._render();
+  }
+
+  _loadExperimentStates() {
+    const savedStates = JSON.parse(localStorage.getItem(this.options.localStorageKey) || '{}');
+    this.experiments.forEach(experiment => {
+      if (savedStates[experiment.name] !== undefined) {
+        experiment.enabled = savedStates[experiment.name];
+        if (experiment.enabled) {
+          experiment.enable({ manual: false });
+        }
+      }
+    });
+  }
+
+  _saveExperimentStates() {
+    const states = Object.fromEntries(
+      this.experiments.map(experiment => [experiment.name, experiment.enabled]),
+    );
+    localStorage.setItem(this.options.localStorageKey, JSON.stringify(states));
+  }
+
+  /**
+   * @param {ExperimentModel} experiment
+   * @param {boolean} enabled
+   */
+  async _toggleExperiment(experiment, enabled) {
+    experiment.enabledLoading = true;
+    this.br.plugins.archiveAnalytics?.sendEvent(`BRExperiment-${experiment.name}`, enabled ? 'Enable' : 'Disable');
+    this._panel.requestUpdate();
+
+    if (enabled) {
+      await experiment.enable({ manual: true });
+    } else {
+      await experiment.disable();
+    }
+    experiment.enabledLoading = false;
+    experiment.enabled = enabled;
+    this._panel.requestUpdate();
+  }
+
+  _render() {
+    this.br.shell.menuProviders['experiments'] = {
+      id: 'experiments',
+      // https://icon-sets.iconify.design/hugeicons/?icon-filter=eco-lab-02&query=lab
+      icon: html`
+        <svg xmlns="http://www.w3.org/2000/svg" width="34" viewBox="0 0 24 24"><path fill="currentColor" d="M10 5.75h1.25v2.5H9.5c-.41 0-.75.34-.75.75s.34.75.75.75h.25v1.96A5.72 5.72 0 0 0 6.25 17c0 3.17 2.58 5.75 5.75 5.75s5.75-2.58 5.75-5.75c0-2.33-1.39-4.4-3.5-5.29V9.75h.25c.41 0 .75-.34.75-.75s-.34-.75-.75-.75h-1.75v-1.5H14c1.52 0 2.75-1.23 2.75-2.75V3c0-.41-.34-.75-.75-.75h-2c-.579 0-1.115.178-1.558.483A2.75 2.75 0 0 0 10 1.25H8c-.41 0-.75.34-.75.75v1c0 1.52 1.23 2.75 2.75 2.75m2.75-.5V5c0-.69.56-1.25 1.25-1.25h1.25V4c0 .69-.56 1.25-1.25 1.25zm-1.5 6.98V9.75h1.5v2.48c0 .33.22.62.53.72c1.77.56 2.97 2.19 2.97 4.06A4.26 4.26 0 0 1 12 21.26a4.26 4.26 0 0 1-4.25-4.25c0-1.87 1.19-3.5 2.97-4.06c.32-.1.53-.39.53-.72m-2.5-9.48H10c.69 0 1.25.56 1.25 1.25v.25H10c-.69 0-1.25-.56-1.25-1.25z" color="currentColor"/></svg>
+      `,
+      label: 'Experiments',
+      component: html`<br-experiments-panel
+        .experiments="${this.experiments}"
+        @connected="${e => this._panel = e.target}"
+        @toggle="${async e => {
+        await this._toggleExperiment(e.detail.experiment, e.detail.enabled);
+        this._saveExperimentStates();
+      }}"
+      />`,
+    };
+    this.br.shell.updateMenuContents();
+  }
+}
+BookReader?.registerPlugin('experiments', ExperimentsPlugin);
+
+@customElement('br-experiments-panel')
+export class BrExperimentsPanel extends LitElement {
+
+  /** @type {ExperimentModel[]} */
+  @property({ type: Array }) experiments = [];
+
+  render() {
+    return html`
+      <div style="padding: 10px">
+        ${this.experiments.map(
+      experiment => html`
+        <br-experiment-toggle
+          .icon="${experiment.icon}"
+          .title="${experiment.title}"
+          .description="${experiment.description}"
+          .enabled="${experiment.enabled}"
+          .loading="${experiment.enabledLoading}"
+          .learnMore="${experiment.learnMore}"
+          @toggle="${e => this._dispatchToggle(experiment, e.detail.enabled)}"
+        ></br-experiment-toggle>
+      `,
+    )}
+      </div>
+    `;
+  }
+
+  /**
+   * @param {ExperimentModel} experiment
+   * @param {boolean} enabled
+   */
+  async _dispatchToggle(experiment, enabled) {
+    this.dispatchEvent(new CustomEvent('toggle', {
+      detail: { experiment, enabled },
+    }));
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(new CustomEvent('connected'));
+  }
+}
+
+@customElement('br-experiment-toggle')
+export class BrExperimentToggle extends LitElement {
+  @property({ type: String }) icon = '';
+  @property({ type: String }) title = '';
+  @property({ type: String }) description = '';
+  @property({ type: Boolean }) enabled = false;
+  @property({ type: Boolean }) loading = false;
+  @property({ type: String }) learnMore = '';
+
+  /**
+   * We want to disable the button immediately if loading, but only display
+   * the loading indicator after 200ms.
+   */
+  @state() _longLoading = false;
+
+  /** @override */
+  update(changedProperties) {
+    super.update(changedProperties);
+    if (changedProperties.has('loading')) {
+      if (this.loading) {
+        sleep(500).then(() => {
+          if (this.loading) {
+            this._longLoading = true;
+            this.requestUpdate();
+          }
+        });
+      } else {
+        this._longLoading = false;
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div class="experiment-card">
+        <div style="display: flex; align-items: center; gap: 10px;">
+          <img src="${this.icon}" style="width: 20px; height: 20px;" alt="" />
+          <div style="flex-grow: 1; font-weight: bold;">${this.title}</div>
+        </div>
+        <p style="opacity: 0.9">
+          ${this.description}
+          <a href="${this.learnMore}" target="_blank">Learn more</a>.
+        </p>
+        <div style="display: flex">
+          <div style="flex-grow: 1;"></div>
+          <button @click="${this._dispatchToggle}" .disabled="${this.loading}">
+            ${this._longLoading ? 'Loading…' : this.enabled ? 'Disable' : 'Enable'}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      .experiment-card {
+        border-radius: 8px;
+        background-color: #fff2;
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .experiment-card p {
+        margin: 6px 0;
+      }
+    `;
+  }
+
+  _dispatchToggle() {
+    this.dispatchEvent(new CustomEvent('toggle', { detail: { enabled: !this.enabled } }));
+  }
+}
+
+/**
+ * @param {string} url
+ */
+async function importAsScript(url) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = url;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
+    document.head.appendChild(script);
+  });
+}

package/src/plugins/plugin.iiif.js

@@ -1,5 +1,5 @@
 // @ts-check
-import { BookReaderPlugin } from '../BookReaderPlugin';
+import { BookReaderPlugin } from '../BookReaderPlugin.js';
 
 const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);