@internetarchive/bookreader 5.0.0-115 → 5.0.0-117

package/src/plugins/plugin.text_selection.js

@@ -5,6 +5,8 @@ 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';
+import textSelectionCss from '../css/_TextSelection.scss';
 /** @typedef {import('../util/strings.js').StringWithVars} StringWithVars */
 /** @typedef {import('../BookReader/PageContainer.js').PageContainer} PageContainer */
 
@@ -38,6 +40,13 @@ export class TextSelectionPlugin extends BookReaderPlugin {
 
   _jumpedToHighlight = false;
 
+  /**
+   * Isolated document/layout used to performantly measure OCR text-layer
+   * elements.
+   * @type {Document}
+   */
+  _measurementDocument;
+
   /**
    * @param {import('../BookReader.js').default} br
    */
@@ -55,6 +64,19 @@ export class TextSelectionPlugin extends BookReaderPlugin {
   init() {
     if (!this.options.enabled) return;
 
+    // Setup measurement iframe for OCR
+    const measurementIframe = document.createElement('iframe');
+    measurementIframe.setAttribute('aria-hidden', 'true');
+    measurementIframe.tabIndex = -1;
+    measurementIframe.style.cssText = 'position:fixed; top:-99999px; left:-99999px; width:2000px; height:4000px; border:0; visibility:hidden;';
+    document.body.appendChild(measurementIframe);
+    this._measurementDocument = measurementIframe.contentDocument;
+    // Injects _TextSelection.scss so measurements match the real
+    // rendering
+    const style = this._measurementDocument.createElement('style');
+    style.textContent = textSelectionCss;
+    this._measurementDocument.head.appendChild(style);
+
     this.br.on('pageVisible', (_, {pageContainerEl}) => {
       const textLayer = pageContainerEl.querySelector('.BRtextLayer');
       if (textLayer) {
@@ -66,8 +88,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;
@@ -76,7 +99,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
           const markEls = renderHighlight(textLayer, targetTextFragment, 'BRhighlight--target-text');
           // Only jump once; presumably on first page load.
           if (!this._jumpedToHighlight) {
-            markEls[0].scrollIntoView({behavior: 'smooth', block: 'center'});
+            this.br.scrollIntoView(markEls[0], {behavior: 'smooth', block: 'center'});
             this._jumpedToHighlight = true;
           }
         }
@@ -92,7 +115,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
   _configurePageContainer(pageContainer) {
     // Disable if thumb mode; it's too janky
     // .page can be null for "pre-cover" region
-    if (this.br.mode !== this.br.constModeThumb && pageContainer.page?.isViewable) {
+    if (this.options.enabled && this.br.mode !== this.br.constModeThumb && pageContainer.page?.isViewable) {
       this.createTextLayer(pageContainer);
     }
     return pageContainer;
@@ -202,7 +225,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     });
 
     // Fix up paragraph positions
-    const paragraphRects = determineRealRects(textLayer, '.BRparagraphElement');
+    const paragraphRects = determineRealRects(textLayer, '.BRparagraphElement', this._measurementDocument);
     let yAdded = 0;
     for (const [ocrParagraph, paragEl] of zip(ocrParagraphs, paragEls)) {
       const ocrParagBounds = $(ocrParagraph).attr("coords").split(",").map(parseFloat);
@@ -310,7 +333,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     paragEl.style.fontSize = `${paragWordHeight}px`;
 
     // Fix up sizes - stretch/crush words as necessary using letter spacing
-    let wordRects = determineRealRects(paragEl, '.BRwordElement');
+    let wordRects = determineRealRects(paragEl, '.BRwordElement', this._measurementDocument);
     const ocrWords = $(ocrParagraph).find("WORD").toArray();
     const wordEls = paragEl.querySelectorAll('.BRwordElement');
     for (const [ocrWord, wordEl] of zip(ocrWords, wordEls)) {
@@ -331,8 +354,8 @@ export class TextSelectionPlugin extends BookReaderPlugin {
 
     // Stretch/crush lines as necessary using line spacing
     // Recompute rects after letter spacing
-    wordRects = determineRealRects(paragEl, '.BRwordElement');
-    const spaceRects = determineRealRects(paragEl, '.BRspace');
+    wordRects = determineRealRects(paragEl, '.BRwordElement', this._measurementDocument);
+    const spaceRects = determineRealRects(paragEl, '.BRspace', this._measurementDocument);
 
     const ocrLines = $(ocrParagraph).find("LINE[coords]").toArray();
     const lineEls = Array.from(paragEl.querySelectorAll('.BRlineElement'));
@@ -382,9 +405,11 @@ BookReader?.registerPlugin('textSelection', TextSelectionPlugin);
 /**
  * @param {HTMLElement} parentEl
  * @param {string} selector
+ * @param {Document} measurementDocument Isolated document to measure within
+ *   (see TextSelectionPlugin#_measurementDocument for why).
  * @returns {Map<Element, Rect>}
  */
-function determineRealRects(parentEl, selector) {
+function determineRealRects(parentEl, selector, measurementDocument) {
   const initals = {
     position: parentEl.style.position,
     visibility: parentEl.style.visibility,
@@ -397,21 +422,23 @@ function determineRealRects(parentEl, selector) {
   parentEl.style.top = '0';
   parentEl.style.left = '0';
   parentEl.style.transform = 'none';
-  document.body.appendChild(parentEl);
+  measurementDocument.body.appendChild(parentEl);
   const rects = new Map(
     Array.from(parentEl.querySelectorAll(selector))
       .map(wordEl => {
         const origRect = wordEl.getBoundingClientRect();
         return [wordEl, new Rect(
-          origRect.left + window.scrollX,
-          origRect.top + window.scrollY,
+          origRect.left + measurementDocument.defaultView.scrollX,
+          origRect.top + measurementDocument.defaultView.scrollY,
           origRect.width,
           origRect.height,
         )];
       }),
   );
-  document.body.removeChild(parentEl);
+  measurementDocument.body.removeChild(parentEl);
   Object.assign(parentEl.style, initals);
+  // Need to restore the document to the main window document
+  document.adoptNode(parentEl);
   return rects;
 }
 
@@ -428,94 +455,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();
     }
   }
 
@@ -381,14 +383,8 @@ export class SearchPlugin extends BookReaderPlugin {
     const $boxes = await poll(() => $(`rect.match-index-${match.matchIndex}`), { until: result => result.length > 0 });
     if ($boxes.length) {
       $boxes.css('animation', 'none');
-      $boxes[0].scrollIntoView({
-        // Only vertically center the highlight if we're in 1up or in full screen. In
-        // 2up, if we're not fullscreen, the whole body gets scrolled around to try to
-        // center the highlight 🙄 See:
-        // https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move/11041376
-        // Note: nearest doesn't quite work great, because the ReadAloud toolbar is now
-        // full-width, and covers up the last line of the highlight.
-        block: this.br.constMode1up == this.br.mode || this.br.isFullscreenActive ? 'center' : 'nearest',
+      this.br.scrollIntoView($boxes[0], {
+        block: 'center',
         inline: 'center',
         behavior: onNearbyPage ? 'smooth' : 'auto',
       });

package/src/plugins/tts/plugin.tts.js

@@ -350,14 +350,9 @@ export class TtsPlugin extends BookReaderPlugin {
     // It behaves weird if used in thumb mode
     if (this.br.constModeThumb == this.br.mode) return;
 
-    $(`.pagediv${chunk.leafIndex} .ttsHiliteLayer rect`).last()?.[0]?.scrollIntoView({
-      // Only vertically center the highlight if we're in 1up or in full screen. In
-      // 2up, if we're not fullscreen, the whole body gets scrolled around to try to
-      // center the highlight 🙄 See:
-      // https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move/11041376
-      // Note: nearest doesn't quite work great, because the ReadAloud toolbar is now
-      // full-width, and covers up the last line of the highlight.
-      block: this.br.constMode1up == this.br.mode || this.br.isFullscreenActive ? 'center' : 'nearest',
+    const highlightRect = $(`.pagediv${chunk.leafIndex} .ttsHiliteLayer rect`).last()?.[0];
+    this.br.scrollIntoView(highlightRect, {
+      block: 'center',
       inline: 'center',
       behavior: 'smooth',
     });

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 {