@internetarchive/bookreader 5.0.0-98 → 5.0.0-99

package/src/util/TextSelectionManager.js

@@ -0,0 +1,282 @@
+// @ts-check
+import { SelectionObserver } from "../BookReader/utils/SelectionObserver.js";
+
+export class TextSelectionManager {
+  options = {
+    // Current Translation plugin implementation does not have words, will limit to one BRlineElement for now
+    maxProtectedWords: 200,
+  }
+
+  /**
+   * @param {string} layer Selector for the text layer to manage
+   * @param {import('../BookReader.js').default} br
+   * @param {Object} options
+   * @param {string[]} options.selectionElement CSS selector for elements that count as "words" for selection limiting
+   * @param {number} [maxWords] Maximum number of words allowed to be selected
+   */
+  constructor (layer, br, { selectionElement }, maxWords) {
+    /** @type {string} */
+    this.layer = layer;
+    /** @type {import('../BookReader.js').default} */
+    this.br = br;
+    /** @type {string[]} */
+    this.selectionElement = selectionElement;
+    this.selectionObserver = new SelectionObserver(this.layer, this._onSelectionChange);
+    this.options.maxProtectedWords = maxWords ? maxWords : 200;
+  }
+
+  init() {
+    this.attach();
+    new SelectionObserver(this.layer, (selectEvent) => {
+      // Track how often selection is used
+      if (selectEvent == 'started') {
+        this.br.plugins.archiveAnalytics?.sendEvent('BookReader', 'SelectStart');
+
+        // 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');
+      }
+    }).attach();
+  }
+
+  // Need attach + detach methods to toggle w/ Translation plugin
+  attach() {
+    this.selectionObserver.attach();
+    if (this.br.protected) {
+      document.addEventListener('selectionchange', this._limitSelection);
+      // Prevent right clicking when selected text
+      $(document.body).on('contextmenu dragstart copy', (e) => {
+        const selection = document.getSelection();
+        if (selection?.toString()) {
+          const intersectsTextLayer = $(this.layer)
+            .toArray()
+            .some(el => selection.containsNode(el, true));
+          if (intersectsTextLayer) {
+            e.preventDefault();
+            return false;
+          }
+        }
+      });
+    }
+  }
+
+  detach() {
+    this.selectionObserver.detach();
+    if (this.br.protected) {
+      document.removeEventListener('selectionchange', this._limitSelection);
+    }
+  }
+
+  /**
+   * @param {'started' | 'cleared'} type
+   * @param {HTMLElement} target
+   */
+  _onSelectionChange = (type, target) => {
+    if (type === 'started') {
+      this.textSelectingMode(target);
+    } else if (type === 'cleared') {
+      this.defaultMode(target);
+    } else {
+      throw new Error(`Unknown type ${type}`);
+    }
+  }
+
+  /**
+   * Intercept copied text to remove any styling applied to it
+   * @param {JQuery} $container
+   */
+  interceptCopy ($container) {
+    $container[0].addEventListener('copy', (event) => {
+      const selection = document.getSelection();
+      event.clipboardData.setData('text/plain', selection.toString());
+      event.preventDefault();
+    });
+  }
+
+  /**
+   * Initializes text selection modes if there is a text layer on the page
+   * @param {JQuery} $container
+   */
+  stopPageFlip($container) {
+    /** @type {JQuery<HTMLElement>} */
+    const $textLayer = $container.find(this.layer);
+    if (!$textLayer.length) return;
+    $textLayer.each((i, s) => this.defaultMode(s));
+    if (!this.br.protected) {
+      this.interceptCopy($container);
+    }
+  }
+
+  /**
+   * Applies mouse events when in default mode
+   * @param {HTMLElement} textLayer
+   */
+  defaultMode (textLayer) {
+    const $pageContainer = $(textLayer).closest('.BRpagecontainer');
+    textLayer.style.pointerEvents = "none";
+    $pageContainer.find("img").css("pointer-events", "auto");
+
+    $(textLayer).off(".textSelectPluginHandler");
+    const startedMouseDown = this.mouseIsDown;
+    let skipNextMouseup = this.mouseIsDown;
+    if (startedMouseDown) {
+      textLayer.style.pointerEvents = "auto";
+    }
+
+    // Need to stop propagation to prevent DragScrollable from
+    // blocking selection
+    $(textLayer).on("mousedown.textSelectPluginHandler", (event) => {
+      this.mouseIsDown = true;
+      if ($(event.target).is(this.selectionElement.join(", "))) {
+        event.stopPropagation();
+      }
+    });
+
+    $(textLayer).on("mouseup.textSelectPluginHandler", (event) => {
+      this.mouseIsDown = false;
+      textLayer.style.pointerEvents = "none";
+      if (skipNextMouseup) {
+        skipNextMouseup = false;
+        event.stopPropagation();
+      }
+    });
+  }
+
+  /**
+   * This mode is active while there is a selection on the given textLayer
+   * @param {HTMLElement} textLayer
+   */
+  textSelectingMode(textLayer) {
+    const $pageContainer = $(textLayer).closest('.BRpagecontainer');
+    // Make text layer consume all events
+    textLayer.style.pointerEvents = "all";
+    // Block img from getting long-press to save while selecting
+    $pageContainer.find("img").css("pointer-events", "none");
+
+    $(textLayer).off(".textSelectPluginHandler");
+
+    $(textLayer).on("mousedown.textSelectPluginHandler", (event) => {
+      this.mouseIsDown = true;
+      event.stopPropagation();
+    });
+
+    // Prevent page flip on click
+    $(textLayer).on('mouseup.textSelectPluginHandler', (event) => {
+      this.mouseIsDown = false;
+      event.stopPropagation();
+    });
+  }
+
+
+  _limitSelection = () => {
+    const selection = window.getSelection();
+    if (!selection.rangeCount) return;
+
+    const range = selection.getRangeAt(0);
+
+    // Check if range.startContainer is inside the sub-tree of .BRContainer
+    const startInBr = !!range.startContainer.parentElement.closest('.BRcontainer');
+    const endInBr = !!range.endContainer.parentElement.closest('.BRcontainer');
+    if (!startInBr && !endInBr) return;
+    if (!startInBr || !endInBr) {
+      // weird case, just clear the selection
+      selection.removeAllRanges();
+      return;
+    }
+
+    // Find the last allowed word in the selection
+    const lastAllowedWord = genAt(
+      genFilter(
+        walkBetweenNodes(range.startContainer, range.endContainer),
+        (node) => node.classList?.contains(
+          this.selectionElement[0].replace(".", ""),
+        ),
+      ),
+      this.options.maxProtectedWords - 1,
+    );
+
+    if (!lastAllowedWord || range.endContainer.parentNode == lastAllowedWord) return;
+
+    const newRange = document.createRange();
+    newRange.setStart(range.startContainer, range.startOffset);
+    newRange.setEnd(lastAllowedWord.firstChild, lastAllowedWord.textContent.length);
+
+    selection.removeAllRanges();
+    selection.addRange(newRange);
+  };
+}
+
+/**
+ * @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;
+  }
+}
+
+/**
+ * Depth traverse the DOM tree starting at `start`, and ending at `end`.
+ * @param {Node} start
+ * @param {Node} end
+ * @returns {Generator<Node>}
+ */
+export function* walkBetweenNodes(start, end) {
+  let done = false;
+
+  /**
+   * @param {Node} node
+   */
+  function* walk(node, {children = true, parents = true, siblings = true} = {}) {
+    if (node === end) {
+      done = true;
+      yield node;
+      return;
+    }
+
+    // yield self
+    yield node;
+
+    // First iterate children (depth-first traversal)
+    if (children && node.firstChild) {
+      yield* walk(node.firstChild, {children: true, parents: false, siblings: true});
+      if (done) return;
+    }
+
+    // Then iterate siblings
+    if (siblings) {
+      for (let sib = node.nextSibling; sib; sib = sib.nextSibling) {
+        yield* walk(sib, {children: true, parents: false, siblings: false});
+        if (done) return;
+      }
+    }
+
+    // Finally, move up the tree
+    if (parents && node.parentNode) {
+      yield* walk(node.parentNode, {children: false, parents: true, siblings: true});
+      if (done) return;
+    }
+  }
+
+  yield* walk(start);
+}