@internetarchive/bookreader 5.0.0-88-alpha.10 → 5.0.0-88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-88-alpha.10",
+  "version": "5.0.0-88",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "module": "dist/esm/ia-bookreader/ia-bookreader.js",
+  "module": "src/ia-bookreader/ia-bookreader.js",
   "keywords": [
     "online",
     "bookreader",
@@ -25,8 +25,8 @@
   "homepage": "https://github.com/internetarchive/bookreader#readme",
   "private": false,
   "dependencies": {
-    "@internetarchive/ia-activity-indicator": "^0.0.6",
-    "@internetarchive/ia-item-navigator": "^2.1.3-alpha.1",
+    "@internetarchive/ia-activity-indicator": "^0.0.4",
+    "@internetarchive/ia-item-navigator": "^2.1.2",
     "@internetarchive/icon-bookmark": "^1.3.4",
     "@internetarchive/icon-dl": "^1.3.4",
     "@internetarchive/icon-edit-pencil": "^1.3.4",
@@ -35,20 +35,11 @@
     "@internetarchive/icon-search": "^1.3.4",
     "@internetarchive/icon-toc": "^1.3.4",
     "@internetarchive/icon-visual-adjustment": "^1.3.4",
-    "@internetarchive/modal-manager": "^2.0.1",
+    "@internetarchive/modal-manager": "^0.2.12",
     "@internetarchive/shared-resize-observer": "^0.2.0",
-    "interactjs": "^1.10.18",
-    "iso-language-codes": "1.1.0",
-    "jquery": "3.6.1",
-    "jquery-colorbox": "1.6.4",
-    "jquery-ui": "^1.12.1",
-    "jquery-ui-touch-punch": "0.2.3",
-    "jquery.browser": "0.1.0",
-    "lit": "^2.8.0",
-    "soundmanager2": "2.97.20170602"
+    "lit": "^2.5.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.26.4",
     "@babel/core": "7.25.8",
     "@babel/eslint-parser": "7.25.7",
     "@babel/plugin-proposal-class-properties": "7.18.6",
@@ -67,12 +58,20 @@
     "eslint-plugin-no-jquery": "^2.7.0",
     "eslint-plugin-testcafe": "^0.2.1",
     "http-server": "14.1.1",
+    "interactjs": "^1.10.18",
+    "iso-language-codes": "1.1.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jquery": "3.6.1",
+    "jquery-colorbox": "1.6.4",
+    "jquery-ui": "1.12.1",
+    "jquery-ui-touch-punch": "0.2.3",
+    "jquery.browser": "0.1.0",
     "live-server": "1.2.2",
     "regenerator-runtime": "0.14.1",
     "sass": "1.79.5",
     "sinon": "19.0.2",
+    "soundmanager2": "2.97.20170602",
     "svgo": "3.3.2",
     "testcafe": "3.6.2",
     "testcafe-browser-provider-browserstack": "^1.13.2-alpha.1",
@@ -104,7 +103,6 @@
     "build-assets": "npx cpx \"src/assets/**/*\" BookReader && npx svgo -f BookReader/icons && npx svgo -f BookReader/images",
     "build-assets:watch": "npx cpx --watch --verbose \"src/assets/**/*\" BookReader",
     "build-js": "npx webpack",
-    "build-esm": "env BABEL_ENV=esm npx babel src --out-dir dist/esm --copy-files --extensions \".js\"",
     "build-js:watch": "npx webpack --mode=development --watch",
     "build-css": "npx sass --no-source-map ./src/css/BookReader.scss ./BookReader/BookReader.css",
     "build-css:watch": "npx sass --watch --no-source-map ./src/css/BookReader.scss ./BookReader/BookReader.css",

package/src/BookNavigator/search/search-results.js

@@ -1,7 +1,7 @@
 /* eslint-disable class-methods-use-this */
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { css, html, LitElement, nothing } from 'lit';
-import '@internetarchive/ia-activity-indicator';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
 import checkmarkIcon from '../assets/icon_checkmark.js';
 import closeIcon from '../assets/icon_close.js';
 import buttonCSS from '../assets/button-base.js';

package/src/BookReader/Mode1UpLit.js

@@ -1,10 +1,10 @@
 // @ts-check
-import { property, query } from 'lit/decorators.js';
-import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import {LitElement, html} from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { ModeSmoothZoom } from './ModeSmoothZoom';
 import { arrChanged, genToArray, sum, throttle } from './utils';
-import { HTMLDimensionsCacher } from './utils/HTMLDimensionsCacher';
+import { HTMLDimensionsCacher } from "./utils/HTMLDimensionsCacher";
 import { ScrollClassAdder } from './utils/ScrollClassAdder';
 import { ModeCoordinateSpace } from './ModeCoordinateSpace';
 /** @typedef {import('./BookModel').BookModel} BookModel */
@@ -17,6 +17,7 @@ import { ModeCoordinateSpace } from './ModeCoordinateSpace';
 // I _have_ to make this globally public, otherwise it won't let me call
 // it's constructor :/
 /** @implements {SmoothZoomable} */
+@customElement('br-mode-1up')
 export class Mode1UpLit extends LitElement {
   /****************************************/
   /************** PROPERTIES **************/
@@ -85,15 +86,13 @@ export class Mode1UpLit extends LitElement {
   get worldStyle() {
     const wToR = this.coordSpace.worldUnitsToRenderedPixels;
     return {
-      width: wToR(this.worldDimensions.width) + 'px',
-      height: wToR(this.worldDimensions.height) + 'px',
+      width: wToR(this.worldDimensions.width) + "px",
+      height: wToR(this.worldDimensions.height) + "px",
     };
   }
 
   /** @type {HTMLElement} */
-  get $container() {
-    return this;
-  }
+  get $container() { return this; }
 
   /** @type {HTMLElement} */
   @query('.br-mode-1up__visible-world')
@@ -129,12 +128,10 @@ export class Mode1UpLit extends LitElement {
     if (smooth) {
       this.style.scrollBehavior = 'smooth';
     }
-    this.scrollTop = this.coordSpace.worldUnitsToVisiblePixels(
-      this.pageTops[index] - this.SPACING_IN / 2,
-    );
+    this.scrollTop = this.coordSpace.worldUnitsToVisiblePixels(this.pageTops[index] - this.SPACING_IN / 2);
     // TODO: Also h center?
     if (smooth) {
-      setTimeout(() => (this.style.scrollBehavior = ''), 100);
+      setTimeout(() => this.style.scrollBehavior = '', 100);
     }
   }
 
@@ -197,7 +194,7 @@ export class Mode1UpLit extends LitElement {
       this.throttledUpdateRenderedPages();
       if (this.visiblePages.length) {
         // unclear why this is ever really happening
-        this.br.displayedIndices = this.visiblePages.map((p) => p.index);
+        this.br.displayedIndices = this.visiblePages.map(p => p.index);
         this.br.updateFirstIndex(this.br.displayedIndices[0]);
         this.br._components.navbar.updateNavIndexThrottled();
       }
@@ -214,9 +211,7 @@ export class Mode1UpLit extends LitElement {
   }
 
   updatePages() {
-    this.pages = genToArray(
-      this.book.pagesIterator({ combineConsecutiveUnviewables: true }),
-    );
+    this.pages = genToArray(this.book.pagesIterator({ combineConsecutiveUnviewables: true }));
   }
 
   /** @override */
@@ -247,59 +242,50 @@ export class Mode1UpLit extends LitElement {
 
   /** @override */
   render() {
-    return html` <div
-        class="br-mode-1up__world"
-        style=${styleMap(this.worldStyle)}
-      ></div>
+    return html`
+      <div class="br-mode-1up__world" style=${styleMap(this.worldStyle)}></div>
       <div class="br-mode-1up__visible-world">
-        ${this.renderedPages.map((p) => this.renderPage(p))}
+        ${this.renderedPages.map(p => this.renderPage(p))}
       </div>`;
   }
 
   /** @param {PageModel} page */
   createPageContainer = (page) => {
-    return (
-      this.pageContainerCache[page.index] ||
-      (this.pageContainerCache[page.index] =
+    return this.pageContainerCache[page.index] || (
+      this.pageContainerCache[page.index] = (
         // @ts-ignore I know it's protected, TS! But Mode1Up and BookReader are friends.
-        this.br._createPageContainer(page.index))
+        this.br._createPageContainer(page.index)
+      )
     );
-  };
+  }
 
   /** @param {PageModel} page */
   renderPage = (page) => {
     const wToR = this.coordSpace.worldUnitsToRenderedPixels;
     const wToV = this.coordSpace.worldUnitsToVisiblePixels;
-    const containerWidth = this.coordSpace.visiblePixelsToWorldUnits(
-      this.htmlDimensionsCacher.clientWidth,
-    );
+    const containerWidth = this.coordSpace.visiblePixelsToWorldUnits(this.htmlDimensionsCacher.clientWidth);
 
     const width = wToR(page.widthInches);
     const height = wToR(page.heightInches);
-    const left = Math.max(
-      this.SPACING_IN,
-      (containerWidth - page.widthInches) / 2,
-    );
+    const left = Math.max(this.SPACING_IN, (containerWidth - page.widthInches) / 2);
     const top = this.pageTops[page.index];
 
     const transform = `translate(${wToR(left)}px, ${wToR(top)}px)`;
-    const pageContainerEl = this.createPageContainer(page).update({
-      dimensions: {
-        width,
-        height,
-        top: 0,
-        left: 0,
-      },
-      reduce: page.width / wToV(page.widthInches),
-    }).$container[0];
+    const pageContainerEl = this.createPageContainer(page)
+      .update({
+        dimensions: {
+          width,
+          height,
+          top: 0,
+          left: 0,
+        },
+        reduce: page.width / wToV(page.widthInches),
+      }).$container[0];
 
     pageContainerEl.style.transform = transform;
-    pageContainerEl.classList.toggle(
-      'BRpage-visible',
-      this.visiblePages.includes(page),
-    );
+    pageContainerEl.classList.toggle('BRpage-visible', this.visiblePages.includes(page));
     return pageContainerEl;
-  };
+  }
 
   /************** VIRTUAL SCROLLING LOGIC **************/
 
@@ -320,7 +306,7 @@ export class Mode1UpLit extends LitElement {
       left: vToW(scrollLeft),
       width: vToW(clientWidth),
     };
-  };
+  }
 
   /**
    * @returns {PageModel[]}
@@ -328,26 +314,20 @@ export class Mode1UpLit extends LitElement {
   computeRenderedPages() {
     // Also render 1 page before/after
     // @ts-ignore TS doesn't understand the filtering out of null values
-    return (
-      [
-        this.visiblePages[0]?.prev,
-        ...this.visiblePages,
-        this.visiblePages[this.visiblePages.length - 1]?.next,
-      ]
-        .filter((p) => p)
-        // Never render more than 10 pages! Usually means something is wrong
-        .slice(0, 10)
-    );
+    return [
+      this.visiblePages[0]?.prev,
+      ...this.visiblePages,
+      this.visiblePages[this.visiblePages.length - 1]?.next,
+    ]
+      .filter(p => p)
+      // Never render more than 10 pages! Usually means something is wrong
+      .slice(0, 10);
   }
 
-  throttledUpdateRenderedPages = throttle(
-    () => {
-      this.renderedPages = this.computeRenderedPages();
-      this.requestUpdate();
-    },
-    100,
-    null,
-  );
+  throttledUpdateRenderedPages = throttle(() => {
+    this.renderedPages = this.computeRenderedPages();
+    this.requestUpdate();
+  }, 100, null)
 
   /**
    * @param {PageModel[]} pages
@@ -370,29 +350,21 @@ export class Mode1UpLit extends LitElement {
    */
   computeDefaultScale(page) {
     // Default to real size if it fits, otherwise default to full width
-    const containerWidthIn = this.coordSpace.renderedPixelsToWorldUnits(
-      this.clientWidth,
-    );
-    return (
-      Math.min(
-        1,
-        containerWidthIn / (page.widthInches + 2 * this.SPACING_IN),
-      ) || 1
-    );
+    const containerWidthIn = this.coordSpace.renderedPixelsToWorldUnits(this.clientWidth);
+    return Math.min(1, containerWidthIn / (page.widthInches + 2 * this.SPACING_IN)) || 1;
   }
 
   computeWorldDimensions() {
     return {
-      width:
-        Math.max(...this.pages.map((p) => p.widthInches)) + 2 * this.SPACING_IN,
+      width: Math.max(...this.pages.map(p => p.widthInches)) + 2 * this.SPACING_IN,
       height:
-        sum(this.pages.map((p) => p.heightInches)) +
-        (this.pages.length + 1) * this.SPACING_IN,
+          sum(this.pages.map(p => p.heightInches)) +
+          (this.pages.length + 1) * this.SPACING_IN,
     };
   }
 
   computeVisiblePages() {
-    return this.pages.filter((page) => {
+    return this.pages.filter(page => {
       const PT = this.pageTops[page.index];
       const PB = PT + page.heightInches;
 
@@ -405,14 +377,12 @@ export class Mode1UpLit extends LitElement {
   /************** INPUT HANDLERS **************/
 
   attachScrollListeners = () => {
-    this.addEventListener('scroll', this.updateVisibleRegion);
+    this.addEventListener("scroll", this.updateVisibleRegion);
     this.scrollClassAdder.attach();
-  };
+  }
 
   detachScrollListeners = () => {
-    this.removeEventListener('scroll', this.updateVisibleRegion);
+    this.removeEventListener("scroll", this.updateVisibleRegion);
     this.scrollClassAdder.detach();
-  };
+  }
 }
-
-customElements.define('br-mode-1up', Mode1UpLit);

package/src/BookReader/Mode2UpLit.js

@@ -16,6 +16,7 @@ import { ModeCoordinateSpace } from './ModeCoordinateSpace';
 // I _have_ to make this globally public, otherwise it won't let me call
 // its constructor :/
 /** @implements {SmoothZoomable} */
+@customElement('br-mode-2up')
 export class Mode2UpLit extends LitElement {
   /****************************************/
   /************** PROPERTIES **************/
@@ -675,6 +676,7 @@ export class Mode2UpLit extends LitElement {
   }
 }
 
+@customElement('br-leaf-edges')
 export class LeafEdges extends LitElement {
   @property({ type: Number }) leftIndex = 0;
   @property({ type: Number }) rightIndex = 0;
@@ -772,6 +774,3 @@ export class LeafEdges extends LitElement {
     return Math.floor(this.leftIndex + (e.offsetX / this.offsetWidth) * (this.rightIndex - this.leftIndex + 1));
   }
 }
-
-customElements.define('br-mode-2up', Mode2UpLit);
-customElements.define('br-leaf-edges', LeafEdges);

package/src/BookReader/Navbar/Navbar.js

@@ -138,16 +138,43 @@ export class Navbar {
    * Switch navbar controls on mobile and desktop
    */
   switchNavbarControls() {
-    // we don't want navbar controls switching with liner-notes
-    if (this.br.options.bookType !== 'linerNotes') {
-      if (this.br.refs.$brContainer.prop('clientWidth') < 640) {
+    if (this.br.refs.$brContainer.prop('clientWidth') < 640) {
+      this.showMinimumNavPageNum();
+      // we don't want navbar controls switching with liner-notes
+      if (this.br.options.bookType !== 'linerNotes') {
         this.showMinimumNavbarControls();
-      } else {
+      }
+    } else {
+      this.showMaximumNavPageNum();
+      // we don't want navbar controls switching with liner-notes
+      if (this.br.options.bookType !== 'linerNotes') {
         this.showMaximumNavbarControls();
       }
     }
   }
 
+  /**
+   * Switch Book Nav page number display to minimum/mobile
+   */
+  showMinimumNavPageNum() {
+    const minElement = document.querySelector('.BRcurrentpage.BRmin');
+    const maxElement = document.querySelector('.BRcurrentpage.BRmax');
+
+    if (minElement) minElement.classList.remove('hide');
+    if (maxElement) maxElement.classList.add('hide');
+  }
+
+  /**
+   * Switch Book Nav page number display to maximum/desktop
+   */
+  showMaximumNavPageNum() {
+    const minElement = document.querySelector('.BRcurrentpage.BRmin');
+    const maxElement = document.querySelector('.BRcurrentpage.BRmax');
+
+    if (minElement) minElement.classList.add('hide');
+    if (maxElement) maxElement.classList.remove('hide');
+  }
+
   /**
    * Switch Book Navbar controls to minimised
    * NOTE: only `this.minimumControls` and `this.maximumControls` switch on resize
@@ -203,7 +230,10 @@ export class Navbar {
                   <div class="BRpager"></div>
                   <div class="BRnavline"></div>
                 </div>
-                <p><span class='BRcurrentpage'></span></p>
+                <p>
+                  <span class="BRcurrentpage BRmax"></span>
+                  <span class="BRcurrentpage BRmin"></span>
+                </p>
               </li>
               ${this._renderControls()}
             </ul>
@@ -246,9 +276,10 @@ export class Navbar {
   /**
   * Returns the textual representation of the current page for the navbar
   * @param {number} index
+  * @param {boolean} [useMaxFormat = false]
   * @return {string}
   */
-  getNavPageNumString(index) {
+  getNavPageNumString(index, useMaxFormat = false) {
     const { br } = this;
     // Accessible index starts at 0 (alas) so we add 1 to make human
     const pageNum = br.book.getPageNum(index);
@@ -268,7 +299,8 @@ export class Navbar {
       this.maxPageNum = maxPageNum;
     }
 
-    return getNavPageNumHtml(index, numLeafs, pageNum, pageType, this.maxPageNum);
+    return getNavPageNumHtml(index, numLeafs, pageNum, pageType, this.maxPageNum, useMaxFormat);
+
   }
 
   /**
@@ -276,7 +308,8 @@ export class Navbar {
    * @param {number} index
    */
   updateNavPageNum(index) {
-    this.$root.find('.BRcurrentpage').html(this.getNavPageNumString(index));
+    this.$root.find('.BRcurrentpage.BRmax').html(this.getNavPageNumString(index, true));
+    this.$root.find('.BRcurrentpage.BRmin').html(this.getNavPageNumString(index));
   }
 
   /**
@@ -298,14 +331,23 @@ export class Navbar {
  * @param {number|string} pageNum
  * @param {*} pageType - Deprecated
  * @param {number} maxPageNum
+ * @param {boolean} [useMaxFormat = false]
  * @return {string}
  */
-export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum) {
+export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum, useMaxFormat = false) {
   const pageIsAsserted = pageNum[0] != 'n';
+  const pageIndex = index + 1;
+
+  if (!pageIsAsserted) {
+    pageNum = '—';
+  }
+
+  if (useMaxFormat === true) {
+    return `Page ${pageNum} (${pageIndex}/${numLeafs})`;
+  }
 
   if (!pageIsAsserted) {
-    const pageIndex = index + 1;
-    return `(${pageIndex} of ${numLeafs})`; // Page (8 of 10)
+    return `(${pageIndex} of ${numLeafs})`;
   }
 
   const bookLengthLabel = (maxPageNum && parseFloat(pageNum)) ? ` of ${maxPageNum}` : '';

package/src/BookReader/options.js

@@ -1,3 +1,4 @@
+// @ts-check
 /** @typedef {import('./BookModel.js').PageNumString} PageNumString */
 /** @typedef {import('./BookModel.js').LeafNum} LeafNum */
 
@@ -140,6 +141,8 @@ export const DEFAULT_OPTIONS = {
    * but going forward we'll keep them here.
    **/
   plugins: {
+    /** @type {import('../plugins/plugin.archive_analytics.js').ArchiveAnalyticsPlugin['options']}*/
+    archiveAnalytics: null,
     /** @type {import('../plugins/plugin.text_selection.js').TextSelectionPluginOptions} */
     textSelection: null,
   },

package/src/BookReader.js

@@ -23,7 +23,6 @@ This file is part of BookReader.
 import 'jquery-ui/ui/widget.js';
 import 'jquery-ui/ui/widgets/mouse.js';
 import 'jquery-ui-touch-punch';
-import jQuery from 'jquery';
 
 import PACKAGE_JSON from '../package.json';
 import * as utils from './BookReader/utils.js';
@@ -63,6 +62,25 @@ BookReader.constMode1up = 1;
 BookReader.constMode2up = 2;
 /** thumbnails view */
 BookReader.constModeThumb = 3;
+
+// Although this can actualy have any BookReaderPlugin subclass as value, we
+// hardcode the known plugins here for type checking
+BookReader.PLUGINS = {
+  /** @type {typeof import('./plugins/plugin.archive_analytics.js').ArchiveAnalyticsPlugin | null}*/
+  archiveAnalytics: null,
+};
+
+/**
+ * @param {string} pluginName
+ * @param {typeof import('./BookReaderPlugin.js').BookReaderPlugin} plugin
+ */
+BookReader.registerPlugin = function(pluginName, plugin) {
+  if (BookReader.PLUGINS[pluginName]) {
+    console.warn(`Plugin ${pluginName} already registered. Overwriting.`);
+  }
+  BookReader.PLUGINS[pluginName] = plugin;
+};
+
 /** image cache */
 BookReader.imageCache = null;
 
@@ -238,6 +256,26 @@ BookReader.prototype.setup = function(options) {
     '_modes.modeThumb': this._modes.modeThumb,
   };
 
+  // Construct the usual suspects first to get type hints
+  this._plugins = {
+    archiveAnalytics: BookReader.PLUGINS.archiveAnalytics ? new BookReader.PLUGINS.archiveAnalytics(this) : null,
+  };
+
+  // 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);
+  }
+
+  // And call setup on them
+  for (const [pluginName, plugin] of Object.entries(this._plugins)) {
+    try {
+      plugin.setup(this.options.plugins?.[pluginName] ?? {});
+    } catch (e) {
+      console.error(`Error setting up plugin ${pluginName}`, e);
+    }
+  }
+
   /** Image cache for general image fetching */
   this.imageCache = new ImageCache(this.book, {
     useSrcSet: this.options.useSrcSet,
@@ -586,6 +624,16 @@ BookReader.prototype.init = function() {
     this.enterFullscreen(true);
   }
 
+  // Init plugins
+  for (const [pluginName, plugin] of Object.entries(this._plugins)) {
+    try {
+      plugin.init();
+    }
+    catch (e) {
+      console.error(`Error initializing plugin ${pluginName}`, e);
+    }
+  }
+
   this.init.initComplete = true;
   this.trigger(BookReader.eventNames.PostInit);
 

package/src/BookReaderPlugin.js

@@ -0,0 +1,28 @@
+// @ts-check
+/** @typedef {import("./BookReader.js").default} BookReader */
+
+/**
+ * @template TOptions
+ */
+export class BookReaderPlugin {
+  /**
+   * @param {BookReader} br
+   */
+  constructor(br) {
+    /** @type {BookReader} */
+    this.br = br;
+    /** @type {TOptions} */
+    this.options;
+  }
+
+  /**
+   * @abstract
+   * @param {TOptions} options
+   **/
+  setup(options) {
+    this.options = Object.assign({}, this.options, options);
+  }
+
+  /** @abstract */
+  init() {}
+}

package/src/css/_BRnav.scss

@@ -110,9 +110,6 @@
         display: block;
       }
     }
-    &.hide {
-      display: none;
-    }
   }
 }
 

package/src/css/_controls.scss

@@ -81,6 +81,10 @@
     height: 30px;
   }
 
+  .controls .hide {
+    display: none;
+  }
+
   @keyframes slideUp {
     from {
       opacity: 0;