@internetarchive/bookreader 5.0.0-114 → 5.0.0-115

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-114",
+  "version": "5.0.0-115",
   "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",
@@ -133,7 +133,13 @@
     "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: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 live-server@latest",
+    "DOCS:update:ia-deps": "Packages by @internetarchive",
+    "update:ia-deps": "npm i @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

@@ -151,7 +151,7 @@ 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
@@ -852,6 +852,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 */) {

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/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/util/TextSelectionManager.js

@@ -1,11 +1,13 @@
 // @ts-check
 import { countWords } from './strings.js';
 import { SelectionObserver } from "../BookReader/utils/SelectionObserver.js";
+import { clamp } from "../BookReader/utils.js";
 import { html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '@internetarchive/icon-share';
 import '@internetarchive/icon-edit-pencil/icon-edit-pencil.js';
+import { isIOS, isAndroid } from './browserSniffing.js';
 
 const BR_HIGHLIGHTS_LOCAL_STORAGE_KEY = "BRhighlightStorage";
 const MAX_FULL_QUOTE_URL_CHARS = 80;
@@ -55,15 +57,12 @@ export class TextSelectionManager {
         // Set a class on the page to avoid hiding it when zooming/etc
         this.br.refs.$br.find('.BRpagecontainer--hasSelection').removeClass('BRpagecontainer--hasSelection');
         $(window.getSelection().anchorNode).closest('.BRpagecontainer').addClass('BRpagecontainer--hasSelection');
-        this.showSelectMenu();
-
+        // Don't show while still doing selection
+        if (!this.mouseIsDown) this.showSelectMenu();
       }
 
       if (selectEvent == 'changed') {
-        // hide the button as user changes their selection
-        if (this.mouseIsDown) {
-          this.hideSelectMenu();
-        } else if (window.getSelection()?.toString()) {
+        if (!this.mouseIsDown && window.getSelection()?.toString()) {
           this.showSelectMenu();
         }
       }
@@ -165,7 +164,6 @@ export class TextSelectionManager {
     // blocking selection
     $(textLayer).on("mousedown.textSelectPluginHandler", (event) => {
       this.mouseIsDown = true;
-      this.hideSelectMenu();
       if ($(event.target).is(this.selectionElement.join(", "))) {
         event.stopPropagation();
       }
@@ -173,7 +171,6 @@ export class TextSelectionManager {
 
     $(textLayer).on("mouseup.textSelectPluginHandler", (event) => {
       this.mouseIsDown = false;
-      this.hideSelectMenu();
       textLayer.style.pointerEvents = "none";
       if (skipNextMouseup) {
         skipNextMouseup = false;
@@ -199,7 +196,6 @@ export class TextSelectionManager {
       if (event.which != 1) return;
       this.mouseIsDown = true;
       event.stopPropagation();
-      this.hideSelectMenu();
     });
 
     // Prevent page flip on click
@@ -221,7 +217,11 @@ export class TextSelectionManager {
       document.body.append(this.selectMenu);
     }
 
-    this.selectMenu.show();
+    if (this.selectMenu.open) {
+      this.selectMenu.repositionToSelection();
+    } else {
+      this.selectMenu.show();
+    }
   }
 
   hideSelectMenu() {
@@ -459,6 +459,9 @@ class BRSelectMenu extends LitElement {
   @query('#copy-link-option')
   copyLinkOption;
 
+  @property({type: Boolean, reflect: true})
+  open = false;
+
   @property({type: Boolean})
   copyLinkToHighlightEnabled = true;
 
@@ -479,6 +482,19 @@ class BRSelectMenu extends LitElement {
     return this;
   }
 
+  /** @type {number | null} */
+  _scrollTimeoutId = null;
+
+  _onScroll = () => {
+    this.classList.add('br-select-menu__root--scrolling');
+    if (this._scrollTimeoutId != null) clearTimeout(this._scrollTimeoutId);
+    this._scrollTimeoutId = window.setTimeout(() => {
+      this._scrollTimeoutId = null;
+      this.repositionToSelection();
+      this.classList.remove('br-select-menu__root--scrolling');
+    }, 150);
+  };
+
   /** @override */
   connectedCallback() {
     super.connectedCallback();
@@ -487,10 +503,22 @@ class BRSelectMenu extends LitElement {
     this.setAttribute('aria-orientation', 'vertical');
   }
 
+  /** @override */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('scroll', this._onScroll, { capture: true });
+    if (this._scrollTimeoutId != null) {
+      clearTimeout(this._scrollTimeoutId);
+      this._scrollTimeoutId = null;
+    }
+  }
+
   renderCopyLinkToHighlightOption() {
+    // Mousedown needed to prevent selection from being cleared on iOS
     return html`
       <br-menu-option
         id="copy-link-option"
+        @mousedown=${/** @param {MouseEvent} e */ (e) => e.preventDefault()}
         @click=${this.handleCopyLinkToHighlight}
         icon="share"
         label="Copy Link to Highlight"
@@ -703,31 +731,54 @@ class BRSelectMenu extends LitElement {
     this.show();
   }
 
-  show() {
+  repositionToSelection() {
+    const SCREEN_MARGIN = 10;
+    const currentSelection = /** @type {Selection} */ (window.getSelection());
+    const range = currentSelection.getRangeAt(0);
+    const selectionRect = range.getBoundingClientRect();
+
+    const isMobile = isIOS() || isAndroid();
+    // Leave room for mobile teardrop selection handles
+    const SELECTION_PADDING = isAndroid() ? 25 : isIOS() ? 15 : 10;
+    // On mobile, avoid the native OS text-selection bar which appears near the top of the screen
+    const OS_BAR_H = isMobile ? 60 : 0;
+    const idealTop = (selectionRect.top < OS_BAR_H
+      ? selectionRect.bottom + OS_BAR_H
+      : selectionRect.bottom) + SELECTION_PADDING;
+    const top = Math.max(SCREEN_MARGIN, idealTop) + window.scrollY;
+
+    const menuWidth = this.getBoundingClientRect().width;
+    // Excludes scrollbars
+    const windowWidth = document.documentElement.clientWidth;
+    const idealLeft = menuWidth > selectionRect.width
+      ? selectionRect.left + selectionRect.width / 2 - menuWidth / 2
+      : selectionRect.left;
+    const left = clamp(idealLeft, SCREEN_MARGIN, windowWidth - menuWidth - SCREEN_MARGIN) + window.scrollX;
+
+    this.style.top = `${top}px`;
+    this.style.left = `${left}px`;
+  }
+
+  async show() {
     if (this.br.plugins.translate?.userToggleTranslate) return;
-    const currentSelection = window.getSelection();
-    const start = currentSelection.anchorNode.parentElement;
-    const end = currentSelection.focusNode.parentElement; // will always be a text node
-    const height = 30;
-    const width = 60;
-    const startBoundingRect = start.getBoundingClientRect();
-    const endBoundingRect = end.getBoundingClientRect();
-    let hlButtonTop = startBoundingRect.top - height;
-    let hlButtonLeft = startBoundingRect.left - width;
-    if (currentSelection.direction == 'backward') {
-      hlButtonTop = endBoundingRect.top - height;
-      hlButtonLeft = endBoundingRect.left - width;
-    }
-    this.style.top = `${hlButtonTop}px`;
-    this.style.left = `${hlButtonLeft}px`;
+
     this.style.zIndex = '1';
     this.style.position = 'absolute';
     this.style.display = 'block';
+    this.open = true;
+    this.classList.remove('br-select-menu__root--scrolling');
+    window.removeEventListener('scroll', this._onScroll, { capture: true });
+    window.addEventListener('scroll', this._onScroll, { capture: true, passive: true });
+    await this.updateComplete; // ensure Lit has rendered so getBoundingClientRect() returns real width
+    this.repositionToSelection();
     this.clearNodesForRemoval();
   }
 
-  hide = () => {
+  hide() {
+    if (!this.open) return;
     this.style.display = 'none';
+    this.open = false;
+    window.removeEventListener('scroll', this._onScroll, { capture: true });
     this.clearNodesForRemoval();
     return;
   }

package/src/util/browserSniffing.js

@@ -51,6 +51,15 @@ export function isIOS() {
   return 'ongesturestart' in window && navigator.maxTouchPoints > 0;
 }
 
+/**
+ * Checks whether the current browser is on android
+ * @param {string} [userAgent]
+ * @return {boolean}
+ */
+export function isAndroid(userAgent = navigator.userAgent) {
+  return /android/i.test(userAgent);
+}
+
 /**
  * Checks whether the current browser is Samsung Internet
  * https://stackoverflow.com/a/40684162/2317712