@internetarchive/bookreader 5.0.0-114 → 5.0.0-116

package/jsconfig.json

@@ -1,16 +1,15 @@
 {
   "compilerOptions": {
     "target": "es6",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "experimentalDecorators": true,
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }
   },
   "include": [
     "src/**/*.js",
-    "tests/**/*.js",
+    "tests/jest/**/*.js",
   ],
   "exclude": [
     "node_modules",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-114",
+  "version": "5.0.0-116",
   "description": "The Internet Archive BookReader.",
   "type": "module",
   "files": [
@@ -32,21 +32,21 @@
   "private": false,
   "dependencies": {
     "@internetarchive/bergamot-translator": "^0.4.9-ia.1",
-    "@internetarchive/ia-activity-indicator": "0.0.6",
-    "@internetarchive/ia-item-navigator": "2.2.2",
-    "@internetarchive/icon-bookmark": "^1.4.0",
-    "@internetarchive/icon-close": "1.4.0",
-    "@internetarchive/icon-dl": "^1.4.0",
-    "@internetarchive/icon-edit-pencil": "^1.4.1",
-    "@internetarchive/icon-ia-logo": "1.4.0",
-    "@internetarchive/icon-magnify-minus": "^1.4.0",
-    "@internetarchive/icon-magnify-plus": "^1.4.0",
-    "@internetarchive/icon-search": "^1.4.0",
-    "@internetarchive/icon-share": "1.4.0",
-    "@internetarchive/icon-toc": "^1.4.0",
-    "@internetarchive/icon-visual-adjustment": "^1.4.0",
-    "@internetarchive/modal-manager": "2.0.5",
-    "@internetarchive/shared-resize-observer": "^0.2.0",
+    "@internetarchive/ia-activity-indicator": "1.0.0",
+    "@internetarchive/ia-item-navigator": "2.2.3",
+    "@internetarchive/icon-bookmark": "1.4.1",
+    "@internetarchive/icon-close": "1.4.1",
+    "@internetarchive/icon-dl": "1.4.1",
+    "@internetarchive/icon-edit-pencil": "1.4.1",
+    "@internetarchive/icon-ia-logo": "1.4.1",
+    "@internetarchive/icon-magnify-minus": "1.4.1",
+    "@internetarchive/icon-magnify-plus": "1.4.1",
+    "@internetarchive/icon-search": "1.4.1",
+    "@internetarchive/icon-share": "1.4.1",
+    "@internetarchive/icon-toc": "1.4.1",
+    "@internetarchive/icon-visual-adjustment": "1.4.1",
+    "@internetarchive/modal-manager": "2.0.6",
+    "@internetarchive/shared-resize-observer": "0.2.0",
     "interactjs": "^1.10.18",
     "iso-language-codes": "2.0.0",
     "jquery": "3.6.1",
@@ -58,36 +58,36 @@
     "soundmanager2": "2.97.20170602"
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/eslint-parser": "7.28.6",
+    "@babel/core": "7.29.7",
+    "@babel/eslint-parser": "7.29.7",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-decorators": "7.29.0",
-    "@babel/preset-env": "7.29.2",
-    "@iiif/presentation-2": "^1.0.4",
-    "@iiif/presentation-3": "^2.1.3",
+    "@babel/plugin-proposal-decorators": "7.29.7",
+    "@babel/preset-env": "7.29.7",
+    "@iiif/presentation-2": "1.0.4",
+    "@iiif/presentation-3": "2.2.3",
     "@open-wc/testing-helpers": "3.0.1",
     "@types/jest": "30.0.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "babel-loader": "10.1.1",
-    "concurrently": "9.0.1",
+    "concurrently": "10.0.3",
     "core-js": "3.49.0",
-    "cpx2": "8.0.0",
+    "cpx2": "9.0.0",
     "eslint": "7.32.0",
     "eslint-plugin-no-jquery": "^2.7.0",
     "eslint-plugin-testcafe": "0.2.1",
     "http-server": "14.1.1",
     "hypothesis": "^1.1627.0",
-    "jest": "30.3.0",
-    "jest-environment-jsdom": "30.3.0",
+    "jest": "30.4.2",
+    "jest-environment-jsdom": "30.4.1",
     "live-server": "1.2.2",
     "regenerator-runtime": "0.14.1",
-    "sass": "1.98.0",
-    "sinon": "21.0.3",
+    "sass": "1.100.0",
+    "sinon": "22.0.0",
     "svgo": "4.0.1",
     "testcafe": "3.7.4",
     "testcafe-browser-provider-browserstack": "1.15.2",
-    "webpack": "5.105.4",
-    "webpack-cli": "7.0.2"
+    "webpack": "5.107.2",
+    "webpack-cli": "7.0.3"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -132,8 +132,17 @@
     "test:e2e": "npm run build && npx testcafe",
     "test:e2e:dev": "npx testcafe --live --dev",
     "DOCS:update:test-deps": "If CI succeeds, these should be good to update",
-    "update:test-deps": "npm i @babel/eslint-parser@latest @open-wc/testing-helpers@latest @types/jest@latest eslint@7 eslint-plugin-testcafe@latest jest@latest jest-environment-jsdom@latest sinon@latest testcafe@latest",
+    "update:test-deps": "npm i @babel/eslint-parser@latest @open-wc/testing-helpers@latest @types/jest@latest eslint@7 eslint-plugin-no-jquery@latest eslint-plugin-testcafe@latest jest@latest jest-environment-jsdom@latest sinon@latest testcafe@latest",
+    "update:test-deps:test": "npm run lint && npm run test && npm run test:e2e",
     "DOCS:update:build-deps": "These can cause strange changes, so do an npm run build + check file size (git diff --stat), and check the site is as expected",
-    "update:build-deps": "npm i @babel/core@latest @babel/preset-env@latest @babel/plugin-proposal-class-properties@latest @babel/plugin-proposal-decorators@latest babel-loader@latest core-js@latest regenerator-runtime@latest sass@latest svgo@latest webpack@latest webpack-cli@latest"
+    "update:build-deps": "npm i @babel/core@latest @babel/preset-env@latest @babel/plugin-proposal-class-properties@latest @babel/plugin-proposal-decorators@latest babel-loader@latest core-js@latest regenerator-runtime@latest sass@latest svgo@latest webpack@latest webpack-cli@latest",
+    "update:build-deps:test": "npm run build",
+    "DOCS:update:dev-deps": "Packages used for development",
+    "update:dev-deps": "npm i @iiif/presentation-2@latest @iiif/presentation-3@latest concurrently@latest cpx2@latest http-server@latest hypothesis@latest live-server@latest testcafe-browser-provider-browserstack@latest",
+    "DOCS:update:runtime-deps": "Core runtime dependencies; do an npm run build + visual check after updating",
+    "update:runtime-deps": "npm i @webcomponents/webcomponentsjs@latest interactjs@latest iso-language-codes@latest jquery@latest jquery-colorbox@latest jquery-ui@latest jquery-ui-touch-punch@latest jquery.browser@latest lit@latest soundmanager2@latest",
+    "update:runtime-deps:test": "npm run build",
+    "DOCS:update:ia-deps": "Packages by @internetarchive",
+    "update:ia-deps": "npm i @internetarchive/bergamot-translator@latest @internetarchive/ia-activity-indicator@latest @internetarchive/ia-item-navigator@latest @internetarchive/icon-bookmark@latest @internetarchive/icon-close@latest @internetarchive/icon-dl@latest @internetarchive/icon-edit-pencil@latest @internetarchive/icon-ia-logo@latest @internetarchive/icon-magnify-minus@latest @internetarchive/icon-magnify-plus@latest @internetarchive/icon-search@latest @internetarchive/icon-share@latest @internetarchive/icon-toc@latest @internetarchive/icon-visual-adjustment@latest @internetarchive/modal-manager@latest @internetarchive/shared-resize-observer@latest"
   }
 }

package/src/BookReader/utils/SelectionObserver.js

@@ -4,7 +4,7 @@ export class SelectionObserver {
   startedInSelector = false;
   /** @type {HTMLElement} */
   target = null;
-  /** @type {Node} */
+  /** @type {Node | null} */
   lastKnownFocusNode = null;
 
   /**
@@ -30,6 +30,7 @@ export class SelectionObserver {
 
   _onSelectionChange = () => {
     const sel = window.getSelection();
+    if (!sel) return;
 
     if (!this.selecting && sel.toString()) {
       const target = $(sel.anchorNode).closest(this.selector)[0];
@@ -40,13 +41,14 @@ export class SelectionObserver {
       this.handler('started', this.target);
     }
 
-    if (this.selecting && (this.lastKnownFocusNode != sel.focusNode || sel.toString() && !sel.isCollapsed)) {
+    if (this.selecting && this.lastKnownFocusNode != sel.focusNode && sel.toString() && !sel.isCollapsed) {
       this.lastKnownFocusNode = sel.focusNode;
       this.handler('changed', this.target);
     }
 
     if (this.selecting && (sel.isCollapsed || !sel.toString() || !$(sel.anchorNode).closest(this.selector)[0])) {
       this.selecting = false;
+      this.lastKnownFocusNode = null;
       this.handler('cleared', this.target);
     }
   };

package/src/BookReader.js

@@ -41,7 +41,6 @@ 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.js';
-import {BookReaderTextFragment} from './util/TextSelectionManager.js';
 
 /**
  * BookReader
@@ -151,11 +150,12 @@ BookReader.defaultOptions = DEFAULT_OPTIONS;
  * @type {BookReaderOptions}
  * This is here, just in case you need to absolutely override an option.
  */
-BookReader.optionOverrides = {};
+BookReader.optionOverrides = BookReader.optionOverrides || {};
 
 /**
  * Setup
  * It is separate from the constructor, so plugins can extend.
+ * @constructor
  * @param {BookReaderOptions} options
  */
 BookReader.prototype.setup = function(options) {
@@ -645,6 +645,7 @@ BookReader.prototype.init = function() {
   this.pageScale = this.reduce; // preserve current reduce
 
   const params = this.initParams();
+  this.urlPlugin?.pullFromAddressBar();
   this.firstIndex = params.index ? params.index : 0;
 
   // Setup Navbars and other UI
@@ -852,6 +853,7 @@ BookReader.prototype.setupKeyListeners = function () {
 
     // Ignore if modifiers are active.
     if (e.getModifierState('Control') ||
+      e.getModifierState('Shift') ||
       e.getModifierState('Alt') ||
       e.getModifierState('Meta') ||
       e.getModifierState('Win') /* hack for IE */) {
@@ -1959,6 +1961,10 @@ BookReader.prototype.queryStringFromParams = function(
 ) {
   const newParams = new URLSearchParams(currQueryString);
 
+  // Never write back UI-only params that are consumed on load
+  // TODO: Should ideally stick around until next URL change
+  newParams.delete('focus');
+
   if (params.view) {
     // Set ?view=theater when fullscreen
     newParams.set('view', params.view);
@@ -1971,25 +1977,8 @@ BookReader.prototype.queryStringFromParams = function(
     newParams.set('q', params.search);
   }
 
-  /** @type {BookReaderTextFragment | null} */
-  let textFragmentParam = null;
-  // Need to pull out text separately to avoid the spaces becoming encoded as +, which
-  // the browser seems not to handle with the text fragment
-  if (newParams.get('text')) {
-    newParams.delete('text');
-    textFragmentParam = BookReaderTextFragment.fromUrl(currQueryString, this.book, this.firstIndex);
-  }
-
-  // https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/toString
-  // Note: This method returns the query string without the question mark.
-  let result = newParams.toString();
-  if (textFragmentParam) {
-    if (result) result += '&';
-    result += `text=${textFragmentParam.toUrlString()}`;
-  }
-  if (result) result = '?' + result;
-
-  return result;
+  const result = newParams.toString();
+  return result ? `?${result}` : '';
 };
 
 /**

package/src/css/_TextSelection.scss

@@ -153,7 +153,16 @@
   color-scheme: dark;
   padding: 2px;
   overflow: hidden;
-  transition: border-radius 0.2s;
+  opacity: 1;
+  transition: border-radius 0.2s, opacity 0.2s;
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+.br-select-menu__root--scrolling {
+  opacity: 0;
+  pointer-events: none;
 }
 .br-select-menu__root:hover {
   border-radius: 8px;
@@ -172,6 +181,7 @@
   align-items: center;
   border-radius: 20px;
   font-family: inherit;
+  color: inherit;
   border: 0;
   transition: background-color 0.2s, border-radius 0.2s;
   cursor: pointer;
@@ -191,18 +201,23 @@
 }
 
 .br-select-menu__label {
-  width: 0px;
-  opacity: 0;
-  interpolate-size: allow-keywords;
-  transition: width 0.2s;
+  margin-left: 4px;
   font-size: 12px;
 }
 
-
-.br-select-menu__root:hover .br-select-menu__label {
-  width: auto;
-  margin-left: 4px;
-  opacity: 1;
+@media (hover: hover) {
+    .br-select-menu__label {
+        width: 0px;
+        margin-left: 0;
+        opacity: 0;
+        interpolate-size: allow-keywords;
+        transition: width 0.2s;
+    }
+    .br-select-menu__root:hover .br-select-menu__label {
+        width: auto;
+        margin-left: 4px;
+        opacity: 1;
+    }
 }
 
 .BRtextLayer .BRhighlight {

package/src/plugins/plugin.iiif.js

@@ -3,13 +3,19 @@ import { BookReaderPlugin } from '../BookReaderPlugin.js';
 
 const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
 
+/**
+ * @extends BookReaderPlugin<IiifPlugin['options']>
+ */
 export class IiifPlugin extends BookReaderPlugin {
   options = {
     enabled: true,
-    /** @type {import('@iiif/presentation-3').Manifest | import('@iiif/presentation-2').Manifest} */
+    /** @type {import('@iiif/presentation-3').Manifest | import('@iiif/presentation-2').Manifest | null} */
     manifest: null,
   }
 
+  /**
+   * @param {IiifPlugin['options']} options
+   */
   setup(options) {
     super.setup(options);
     this.manifest = this.options.manifest;

package/src/plugins/plugin.text_selection.js

@@ -5,6 +5,7 @@ import { applyVariables } from '../util/strings.js';
 import { Cache } from '../util/cache.js';
 import { toISO6391 } from './tts/utils.js';
 import { BookReaderTextFragment, renderHighlight, TextSelectionManager } from '../util/TextSelectionManager.js';
+import { genMap, lookAroundWindow, zip } from '../util/generators.js';
 /** @typedef {import('../util/strings.js').StringWithVars} StringWithVars */
 /** @typedef {import('../BookReader/PageContainer.js').PageContainer} PageContainer */
 
@@ -66,8 +67,9 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     this.textSelectionManager.init();
 
     // Init text fragment
-    this.targetTextFragment = BookReaderTextFragment.fromUrl(location.search, this.br.book, this.br.firstIndex);
-    if (this.targetTextFragment) {
+    const textParam = new URLSearchParams(location.search).get('text');
+    if (textParam) {
+      this.targetTextFragment = BookReaderTextFragment.fromString(textParam, this.br.book, this.br.firstIndex);
       const targetTextFragment = this.targetTextFragment;
       this.br.on('textLayerVisible', async (_, {pageContainerEl, textLayer}) => {
         const pageIndex = targetTextFragment.pageIndex;
@@ -428,94 +430,6 @@ function augmentLine(line) {
   };
 }
 
-/**
- * @template T
- * Get the i-th element of an iterable
- * @param {Iterable<T>} iterable
- * @param {number} index
- */
-export function genAt(iterable, index) {
-  let i = 0;
-  for (const x of iterable) {
-    if (i == index) return x;
-    i++;
-  }
-  return undefined;
-}
-
-/**
- * @template T
- * Generator version of filter
- * @param {Iterable<T>} iterable
- * @param {function(T): boolean} fn
- */
-export function* genFilter(iterable, fn) {
-  for (const x of iterable) {
-    if (fn(x)) yield x;
-  }
-}
-
-/**
- * @template TFrom, TTo
- * Generator version of map
- * @param {Iterable<TFrom>} gen
- * @param {function(TFrom): TTo} fn
- * @returns {Iterable<TTo>}
- */
-export function* genMap(gen, fn) {
-  for (const x of gen) yield fn(x);
-}
-
-/**
- * @template T
- * Generator that provides a sliding window of 3 elements,
- * prev, current, and next.
- * @param {Iterable<T>} gen
- * @returns {Iterable<[T | undefined, T, T | undefined]>}
- */
-export function* lookAroundWindow(gen) {
-  let prev = undefined;
-  let cur = undefined;
-  let next = undefined;
-  for (const x of gen) {
-    if (typeof cur !== 'undefined') {
-      next = x;
-      yield [prev, cur, next];
-    }
-    prev = cur;
-    cur = x;
-    next = undefined;
-  }
-
-  if (typeof cur !== 'undefined') {
-    yield [prev, cur, next];
-  }
-}
-
-/**
- * @template T1, T2
- * Lazy zip implementation to avoid importing lodash
- * Expects iterators to be of the same length
- * @param {Iterable<T1>} gen1
- * @param {Iterable<T2>} gen2
- * @returns {Iterable<[T1, T2]>}
- */
-export function* zip(gen1, gen2) {
-  const it1 = gen1[Symbol.iterator]();
-  const it2 = gen2[Symbol.iterator]();
-  while (true) {
-    const r1 = it1.next();
-    const r2 = it2.next();
-    if (r1.done && r2.done) {
-      return;
-    }
-    if (r1.done || r2.done) {
-      throw new Error('zip: one of the iterators is done');
-    }
-    yield [r1.value, r2.value];
-  }
-}
-
 /**
  * [left, bottom, right, top]
  * @param {Array<[number, number, number, number]>} bounds

package/src/plugins/search/plugin.search.js

@@ -104,6 +104,8 @@ export class SearchPlugin extends BookReaderPlugin {
         this.options.initialSearchTerm,
         { goToFirstResult: this.options.goToFirstResult, suppressFragmentChange: false },
       );
+    } else if (this.br.urlPlugin?.getUrlParam('focus') === 'search') {
+      this.searchView.toggleSidebar();
     }
   }
 

package/src/plugins/tts/WebTTSEngine.js

@@ -1,6 +1,6 @@
 /* global br */
-import { isChrome, isFirefox } from '../../util/browserSniffing.js';
-import { isAndroid, DEBUG_READ_ALOUD } from './utils.js';
+import { isChrome, isFirefox, isAndroid } from '../../util/browserSniffing.js';
+import { DEBUG_READ_ALOUD } from './utils.js';
 import { promisifyEvent, sleep } from '../../BookReader/utils.js';
 import AbstractTTSEngine from './AbstractTTSEngine.js';
 /** @typedef {import("./AbstractTTSEngine.js").PageChunk} PageChunk */

package/src/plugins/tts/utils.js

@@ -1,15 +1,6 @@
 // @ts-check
 import langs from 'iso-language-codes';
 
-/**
- * Checks whether the current browser is on android
- * @param {string} [userAgent]
- * @return {boolean}
- */
-export function isAndroid(userAgent = navigator.userAgent) {
-  return /android/i.test(userAgent);
-}
-
 /** @type {{[lang: string]: string}} */
 // Handle odd one-off language pairs that might show up over time
 const specialLangs =  {

package/src/plugins/url/UrlPlugin.js

@@ -1,8 +1,18 @@
+/**
+ * @typedef {Object} UrlSchemaEntry
+ * @property {string} name
+ * @property {'path' | 'query_param'} position
+ * @property {string} [default]
+ * @property {string} [deprecated_for]
+ * @property {boolean} [readOnly] - If true, the param is read from the URL but never written back
+ */
+
 export class UrlPlugin {
   constructor(options = {}) {
     this.bookReaderOptions = options;
 
     // the canonical order of elements is important in the path and query string
+    /** @type {UrlSchemaEntry[]} */
     this.urlSchema = [
       { name: 'page', position: 'path', default: 'n0' },
       { name: 'mode', position: 'path', default: '2up' },
@@ -11,6 +21,7 @@ export class UrlPlugin {
       { name: 'sort', position: 'query_param' },
       { name: 'view', position: 'query_param' },
       { name: 'admin', position: 'query_param' },
+      { name: 'focus', position: 'query_param', readOnly: true },
     ];
 
     this.urlState = {};
@@ -36,6 +47,7 @@ export class UrlPlugin {
       if (schema?.deprecated_for) {
         schema = this.urlSchema.find(schemaKey => schemaKey.name === schema.deprecated_for);
       }
+      if (schema?.readOnly) return;
       if (schema?.position == 'path') {
         pathParams[schema?.name] = urlState[key];
       } else {