Merge pull request #1440 from schu96/translation-layer-click-behavior

Use TextSelectionManager for Text Select and Translate plugins

Author: cdrini

src/BookReader.js

@@ -1005,7 +1005,8 @@ BookReader.prototype.zoom = function(direction) {
   } else {
     this.activeMode.zoom('out');
   }
-  this.plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  this.plugins.textSelection?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
+  this.plugins.translate?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
   return;
 };
 
@@ -1252,7 +1253,8 @@ BookReader.prototype.switchMode = function(
   const eventName = mode + 'PageViewSelected';
   this.trigger(BookReader.eventNames[eventName]);
 
-  this.plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  this.plugins.textSelection?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
+  this.plugins.translate?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
 };
 
 BookReader.prototype.updateBrClasses = function() {
@@ -1324,7 +1326,8 @@ BookReader.prototype.enterFullscreen = async function(bindKeyboardControls = tru
   }
   this.jumpToIndex(currentIndex);
 
-  this.plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  this.plugins.textSelection?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
+  this.plugins.translate?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
   // Add "?view=theater"
   this.trigger(BookReader.eventNames.fragmentChange);
   // trigger event here, so that animations,
@@ -1370,7 +1373,8 @@ BookReader.prototype.exitFullScreen = async function () {
     await this.activeMode.mode1UpLit.updateComplete;
   }
 
-  this.plugins.textSelection?.stopPageFlip(this.refs.$brContainer);
+  this.plugins.textSelection?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
+  this.plugins.translate?.textSelectionManager.stopPageFlip(this.refs.$brContainer);
   // Remove "?view=theater"
   this.trigger(BookReader.eventNames.fragmentChange);
   this.refs.$br.removeClass('BRfullscreenAnimation');

src/css/_BRpages.scss

@@ -91,16 +91,8 @@
   }
 }
 
-svg.BRPageLayer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
 // Hides page layers during page flip animation
-.BRpageFlipping .BRPageLayer {
+.BRpageFlipping .BRtextLayer {
   display: none;
 }
 

src/css/_TextSelection.scss

@@ -61,6 +61,14 @@
     color: transparent;
 }
 
+.BRtranslateLayer ::selection {
+    background: hsla(210, 74%, 62%, 0.4);
+}
+
+.BRtranslateLayer ::-moz-selection {
+    background: hsla(210, 74%, 62%, 0.4);
+}
+
 .BRparagraphElement br {
     visibility: hidden;
 }
@@ -137,8 +145,7 @@
 }
 
 .BRtextLayer.showingTranslation {
-    visibility: hidden;
-    pointer-events: none;
+    display: none;
 }
 
 .BRtranslateLayer .BRparagraphElement.BRtranslateHidden {

src/plugins/plugin.text_selection.js

@@ -1,10 +1,10 @@
 //@ts-check
 import { createDIVPageLayer } from '../BookReader/PageContainer.js';
-import { SelectionObserver } from '../BookReader/utils/SelectionObserver.js';
 import { BookReaderPlugin } from '../BookReaderPlugin.js';
 import { applyVariables } from '../util/strings.js';
 import { Cache } from '../util/cache.js';
 import { toISO6391 } from './tts/utils.js';
+import { TextSelectionManager } from '../util/TextSelectionManager.js';
 /** @typedef {import('../util/strings.js').StringWithVars} StringWithVars */
 /** @typedef {import('../BookReader/PageContainer.js').PageContainer} PageContainer */
 
@@ -20,7 +20,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     singlePageDjvuXmlUrl: null,
     /** Whether to fetch the XML as a jsonp */
     jsonp: false,
-    /** Mox words tha can be selected when the text layer is protected */
+    /** Mox words that can be selected when the text layer is protected */
     maxProtectedWords: 200,
   }
 
@@ -46,80 +46,17 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     // now we do make that assumption.
     /** Whether the book is right-to-left */
     this.rtl = this.br.pageProgression === 'rl';
-    this.selectionObserver = new SelectionObserver('.BRtextLayer', this._onSelectionChange);
+    this.textSelectionManager = new TextSelectionManager('.BRtextLayer', this.br, {selectionElement: ['.BRwordElement', '.BRspace']}, this.options.maxProtectedWords);
   }
 
   /** @override */
   init() {
     if (!this.options.enabled) return;
 
     this.loadData();
-
-    this.selectionObserver.attach();
-    new SelectionObserver('.BRtextLayer', (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();
-
-    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 = $('.BRtextLayer')
-            .toArray()
-            .some(el => selection.containsNode(el, true));
-          if (intersectsTextLayer) {
-            e.preventDefault();
-            return false;
-          }
-        }
-      });
-    }
+    this.textSelectionManager.init();
   }
 
-  _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('BRwordElement'),
-      ),
-      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);
-  };
-
   /**
    * @override
    * @param {PageContainer} pageContainer
@@ -134,20 +71,6 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     return pageContainer;
   }
 
-  /**
-   * @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}`);
-    }
-  }
-
   loadData() {
     // Only fetch the full djvu xml if the single page url isn't there
     if (this.options.singlePageDjvuXmlUrl) return;
@@ -204,92 +127,6 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     }
   }
 
-  /**
-   * 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();
-    });
-  }
-
-  /**
-   * 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(".BRwordElement, .BRspace")) {
-        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();
-    });
-  }
-
-  /**
-   * 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('.BRtextLayer');
-    if (!$textLayer.length) return;
-    $textLayer.each((i, s) => this.defaultMode(s));
-    if (!this.br.protected) {
-      this.interceptCopy($container);
-    }
-  }
-
   /**
    * @param {PageContainer} pageContainer
    */
@@ -344,7 +181,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
       textLayer.appendChild(paragEl);
     }
     $container.append(textLayer);
-    this.stopPageFlip($container);
+    this.textSelectionManager.stopPageFlip($container);
     this.br.trigger('textLayerRendered', {
       pageIndex,
       pageContainer,

src/plugins/translate/plugin.translate.js

@@ -5,6 +5,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { TranslationManager } from "./TranslationManager.js";
 import { toISO6391 } from '../tts/utils.js';
 import { sortBy } from '../../../src/BookReader/utils.js';
+import { TextSelectionManager } from '../../../src/util/TextSelectionManager.js';
 import '@internetarchive/ia-activity-indicator/ia-activity-indicator.js';
 
 // @ts-ignore
@@ -183,23 +184,6 @@ export class TranslatePlugin extends BookReaderPlugin {
           "width": $(originalParagraphStyle).css("width"),
           "font-size": fontSize,
         });
-
-        // Note: We'll likely want to switch to using the same logic as
-        // TextSelectionPlugin's selection, which allows for e.g. click-to-flip
-        // to work simultaneously with text selection.
-        translatedParagraph.addEventListener('mousedown', (e) => {
-          e.stopPropagation();
-          e.stopImmediatePropagation();
-        });
-
-        translatedParagraph.addEventListener('mouseup', (e) => {
-          e.stopPropagation();
-          e.stopImmediatePropagation();
-        });
-
-        translatedParagraph.addEventListener('dragstart', (e) =>{
-          e.preventDefault();
-        });
         pageTranslationLayer.append(translatedParagraph);
       }
 
@@ -227,6 +211,8 @@ export class TranslatePlugin extends BookReaderPlugin {
         }
       }
     });
+
+    this.textSelectionManager?.stopPageFlip(this.br.refs.$brContainer);
     await Promise.all(paragraphTranslationPromises);
     this.br.trigger('translateLayerRendered', {
       leafIndex: pageIndex,
@@ -257,6 +243,7 @@ export class TranslatePlugin extends BookReaderPlugin {
 
   clearAllTranslations() {
     document.querySelectorAll('.BRtranslateLayer').forEach(el => el.remove());
+    document.querySelectorAll('.showingTranslation').forEach(el => el.classList.remove('showingTranslation'));
   }
 
   /**
@@ -331,13 +318,20 @@ export class TranslatePlugin extends BookReaderPlugin {
   handleToggleTranslation = async () => {
     this.userToggleTranslate = !this.userToggleTranslate;
     this.translationManager.active = this.userToggleTranslate;
+    // Init textSelectionManager only after the translation is active
+    if (!this.textSelectionManager) {
+      this.textSelectionManager = new TextSelectionManager('.BRtranslateLayer', this.br, {selectionElement: [".BRlineElement"]}, 1);
+      this.textSelectionManager.init();
+    }
     this._render();
     if (!this.userToggleTranslate) {
       this.clearAllTranslations();
       this.br.trigger('translationDisabled', { });
+      this.textSelectionManager.detach();
     } else {
       this.br.trigger('translationEnabled', { });
       this.translateActivePageContainerElements();
+      this.textSelectionManager.attach();
     }
   }