@internetarchive/bookreader 5.0.0-116 → 5.0.0-117

package/src/plugins/plugin.text_selection.js

@@ -6,6 +6,7 @@ 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 */
 
@@ -39,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
    */
@@ -56,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) {
@@ -78,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;
           }
         }
@@ -94,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;
@@ -204,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);
@@ -312,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)) {
@@ -333,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'));
@@ -384,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,
@@ -399,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;
 }
 

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

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

@@ -7,6 +7,7 @@ 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 '@internetarchive/icon-ellipses';
 import { isIOS, isAndroid } from './browserSniffing.js';
 import { genAt, genFilter } from './generators.js';
 
@@ -412,6 +413,9 @@ export class BRSelectMenuOption extends LitElement {
     if (this.icon === 'edit-pencil') {
       return html`<ia-icon-edit-pencil class="br-select-menu__icon" aria-hidden="true"></ia-icon-edit-pencil>`;
     }
+    if (this.icon === 'ellipses') {
+      return html`<ia-icon-ellipses class="br-select-menu__icon" aria-hidden="true"></ia-icon-ellipses>`;
+    }
     return '';
   }
 
@@ -433,7 +437,9 @@ export class BRSelectMenuOption extends LitElement {
         aria-label=${ifDefined(accessibleLabel)}
       >
         ${this.renderIcon()}
-        ${hasTemporaryText ? html`
+        ${
+          !hasTemporaryText && !baseLabel ? '' :
+            hasTemporaryText ? html`
           <span class="br-select-menu__label-wrap" style="display: inline-flex; position: relative; align-items: center;">
             <span
               class="br-select-menu__label"
@@ -459,8 +465,12 @@ class BRSelectMenu extends LitElement {
   /** @type {import('../BookReader.js').default} */
   br;
 
+  /** @type {boolean} */
+  @property({type: Boolean, reflect: true})
+  showExtended = false;
+
   /** @type {BRSelectMenuOption | null} */
-  @query('#copy-link-option')
+  @query('#br-select-copy-link-option')
   copyLinkOption;
 
   @property({type: Boolean, reflect: true})
@@ -521,7 +531,7 @@ class BRSelectMenu extends LitElement {
     // Mousedown needed to prevent selection from being cleared on iOS
     return html`
       <br-menu-option
-        id="copy-link-option"
+        id="br-select-copy-link-option"
         @mousedown=${/** @param {MouseEvent} e */ (e) => e.preventDefault()}
         @click=${this.handleCopyLinkToHighlight}
         icon="share"
@@ -560,6 +570,19 @@ class BRSelectMenu extends LitElement {
       ></br-menu-option>
     `;
   }
+
+  renderShowMoreOption() {
+    return html`
+      <br-menu-option
+        id="br-select-more"
+        @mousedown=${/** @param {MouseEvent} e */ (e) => e.preventDefault()}
+        @click=${this.toggleExtendedMenu}
+        icon="ellipses"
+        aria-label="Show more options"
+      ></br-menu-option>
+    `;
+  }
+
   renderLocalStorageOptions() {
     return html`
       <br-menu-option
@@ -574,16 +597,30 @@ class BRSelectMenu extends LitElement {
       ></br-menu-option>`;
   }
 
-  render() {
-    // TODO change the second button to use a different icon
+  renderDefaultOptions() {
     return html`
       ${this.copyLinkToHighlightEnabled ? this.renderCopyLinkToHighlightOption() : ''}
       ${this.highlightAnnotationEnabled && !this.nodesForRemoval ? this.renderHighlightOption() : ''}
-      ${this.highlightAnnotationEnabled ? this.renderLocalStorageOptions() : ''}
       ${this.nodesForRemoval ? this.renderRemoveOption() : ''}
     `;
   }
 
+  renderExtendedOptions() {
+    return html`
+    ${this.renderDefaultOptions()}
+    ${this.renderLocalStorageOptions()}
+    `;
+  }
+
+  render() {
+    const hasMoreOptions = this.br.plugins.experiments?.isEnabled('annotateHighlight');
+    // TODO change the second button to use a different icon
+    return html`
+    ${this.showExtended ? this.renderExtendedOptions() : this.renderDefaultOptions()}
+    ${!this.showExtended && hasMoreOptions ? this.renderShowMoreOption() : ""}
+    `;
+  }
+
   /**
    * @param {MouseEvent} e
    */
@@ -615,6 +652,14 @@ class BRSelectMenu extends LitElement {
     this.copyLinkOption?.showTemporaryText('Copied!');
   }
 
+  /**
+   * @param {MouseEvent} e
+  */
+  toggleExtendedMenu(e) {
+    e.preventDefault();
+    this.showExtended = !this.showExtended;
+  }
+
   /**
    * Returns the closest BRtextLayer element on the page that contains the target node
    * @param {Node} node
@@ -761,12 +806,12 @@ class BRSelectMenu extends LitElement {
     this.style.left = `${left}px`;
   }
 
+  // Will always show the simplified menu when rendered after hiding
   async show() {
     if (this.br.plugins.translate?.userToggleTranslate) return;
 
     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 });
@@ -778,7 +823,7 @@ class BRSelectMenu extends LitElement {
 
   hide() {
     if (!this.open) return;
-    this.style.display = 'none';
+    this.showExtended = false;
     this.open = false;
     window.removeEventListener('scroll', this._onScroll, { capture: true });
     this.clearNodesForRemoval();

package/src/util/dom.js

@@ -0,0 +1,88 @@
+// @ts-check
+import { clamp } from '../BookReader/utils.js';
+
+/**
+ * Walks up the DOM tree starting at (but not including) the given element,
+ * returning the nearest ancestor that can actually scroll its overflow.
+ * @param {Element} el
+ * @return {Element | null}
+ */
+export function findScrollableAncestor(el) {
+  let current = el.parentElement;
+  while (current) {
+    const style = getComputedStyle(current);
+    const canScrollY = (style.overflowY === 'auto' || style.overflowY === 'scroll') && current.scrollHeight > current.clientHeight;
+    const canScrollX = (style.overflowX === 'auto' || style.overflowX === 'scroll') && current.scrollWidth > current.clientWidth;
+    if (canScrollY || canScrollX) return current;
+    current = current.parentElement;
+  }
+  return null;
+}
+
+/**
+ * Computes the scroll offset for a single axis needed to align an element
+ * within a container, per the same semantics as scrollIntoView's block/inline.
+ * @param {number} elStart
+ * @param {number} elEnd
+ * @param {number} containerStart
+ * @param {number} containerEnd
+ * @param {number} currentScroll
+ * @param {'start' | 'center' | 'end' | 'nearest'} align
+ * @return {number}
+ */
+function computeAxisScroll(elStart, elEnd, containerStart, containerEnd, currentScroll, align) {
+  let delta = 0;
+  switch (align) {
+  case 'start':
+    delta = elStart - containerStart;
+    break;
+  case 'end':
+    delta = elEnd - containerEnd;
+    break;
+  case 'center':
+    delta = (elStart + elEnd) / 2 - (containerStart + containerEnd) / 2;
+    break;
+  case 'nearest':
+  default:
+    if (elStart < containerStart) delta = elStart - containerStart;
+    else if (elEnd > containerEnd) delta = elEnd - containerEnd;
+    break;
+  }
+  return currentScroll + delta;
+}
+
+/**
+ * Scrolls the given element into view within a single scroll container.
+ *
+ * Unlike the native `Element.scrollIntoView`, this never walks up and scrolls
+ * every scrollable ancestor in turn (which can otherwise unexpectedly move
+ * the whole page) — it only ever adjusts the scroll position of one
+ * container: either the one explicitly passed in, or the nearest scrollable
+ * ancestor found via {@link findScrollableAncestor}.
+ * @param {Element} el
+ * @param {object} [options]
+ * @param {'auto' | 'smooth'} [options.behavior]
+ * @param {'start' | 'center' | 'end' | 'nearest'} [options.block]
+ * @param {'start' | 'center' | 'end' | 'nearest'} [options.inline]
+ * @param {Element} [options.scrollContainer] The scrollable element whose
+ *   scroll position should be adjusted. Defaults to `findScrollableAncestor(el)`.
+ */
+export function singleScrollIntoView(el, options) {
+  const { block = 'start', inline = 'nearest', behavior = 'auto', scrollContainer = findScrollableAncestor(el) } = options || {};
+  if (!scrollContainer) {
+    el.scrollIntoView({ block, inline, behavior });
+    return;
+  }
+
+  const containerRect = scrollContainer.getBoundingClientRect();
+  const elRect = el.getBoundingClientRect();
+
+  const top = computeAxisScroll(elRect.top, elRect.bottom, containerRect.top, containerRect.bottom, scrollContainer.scrollTop, block);
+  const left = computeAxisScroll(elRect.left, elRect.right, containerRect.left, containerRect.right, scrollContainer.scrollLeft, inline);
+
+  scrollContainer.scrollTo({
+    top: clamp(top, 0, scrollContainer.scrollHeight - scrollContainer.clientHeight),
+    left: clamp(left, 0, scrollContainer.scrollWidth - scrollContainer.clientWidth),
+    behavior,
+  });
+}