Add as experiment, fix mobile bug

Author: schu96

src/BookReader/utils/SelectionObserver.js

@@ -39,7 +39,7 @@ export class SelectionObserver {
       this.handler('started', this.target);
     }
 
-    if (this.selecting && (this.lastKnownFocusNode != sel.focusNode || sel.toString())) {
+    if (this.selecting && (this.lastKnownFocusNode != sel.focusNode || sel.toString() && !sel.isCollapsed)) {
       this.lastKnownFocusNode = sel.focusNode;
       this.handler('focusChanged', this.target);
     }

src/plugins/plugin.experiments.js

@@ -51,11 +51,27 @@ export class ExperimentsPlugin extends BookReaderPlugin {
     localStorageKey: 'BrExperiments',
 
     /** The experiments that should be shown in the experiments panel */
-    enabledExperiments: ['translate'],
+    enabledExperiments: ['translate', 'highlightUrl'],
   }
 
   /** @type {ExperimentModel[]} */
   allExperiments = [
+    new class extends ExperimentModel {
+      name = 'highlightUrl';
+      title = 'URL Link to Highlight';
+      description = 'Share highlighted content via URL';
+      learnMore = 'none';
+      icon = 'images/translate.svg';
+      enabled = false;
+      async enable ({ manual = false }) {
+        this.br.plugins.textSelection.enableExperiment();
+      }
+      async disable() {
+        sleep(0).then(() => {
+          window.location.reload();
+        });
+      }
+    }(),
     new class extends ExperimentModel {
       name = 'translate';
       title = 'Translate Plugin';

src/plugins/plugin.text_selection.js

@@ -57,6 +57,12 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     this.textSelectionManager.init();
   }
 
+  enableExperiment() {
+    if (!this.textSelectionManager) return;
+    this.textSelectionManager.highlightEnabled = true;
+    this.textSelectionManager.addHighlightBar();
+  }
+
   /**
    * @override
    * @param {PageContainer} pageContainer

src/plugins/url/plugin.url.js

@@ -155,7 +155,7 @@ BookReader.prototype.urlUpdateFragment = function() {
     } else {
       const baseWithoutSlash = this.options.urlHistoryBasePath.replace(/\/+$/, '');
       const newFragmentWithSlash = newFragment === '' ? '' : `/${newFragment}`;
-      let textFragment = ""
+      let textFragment = "";
       if (this.urlPlugin.retrieveTextFragment(newQueryString)) {
         textFragment = this.urlParamsFiltersOnlySearch(this.readQueryString());
         // newQueryString = newQueryString.replace(this.urlPlugin.retrieveTextFragment(newQueryString)[0], "").replace(/(\?text=)/, "")
@@ -165,11 +165,11 @@ BookReader.prototype.urlUpdateFragment = function() {
       console.log("this is newURLPath", newUrlPath);
       try {
         window.history.replaceState({}, null, newUrlPath);
-        this.oldLocationHash = newFragment + newQueryString;
-        if (textFragment) {
-          window.location.replace('#' + textFragment);
-          this.oldLocationHash = textFragment;
-        }
+        this.oldLocationHash = newFragment + newQueryString + textFragment;
+        // if (textFragment) {
+        //   window.location.replace('#' + textFragment);
+        //   this.oldLocationHash = textFragment;
+        // }
       } catch (e) {
         // DOMException on Chrome when in sandboxed iframe
         this.options.urlMode = 'hash';
@@ -210,7 +210,6 @@ BookReader.prototype.urlParamsFiltersOnlySearch = function(url) {
 BookReader.prototype.urlReadFragment = function() {
   const { urlMode, urlHistoryBasePath } = this.options;
   if (urlMode === 'history') {
-    console.log("within plugin.url", window.location);
     return window.location.pathname.substr(urlHistoryBasePath.length);
   } else {
     return this.urlPlugin.getHash();
@@ -231,7 +230,9 @@ export class BookreaderUrlPlugin extends BookReader {
       const location = this.getLocationSearch();
       if (location.includes("text=")) {
         this.on('textLayerRendered', (_, {pageIndex, container}) => {
-          console.log("line 235 plugin.url.js window.location.replace", `#${this.oldLocationHash}`);
+          window.location.replace(`#${this.oldLocationHash}`);
+        });
+        this.on('pageVisible', (_) => {
           window.location.replace(`#${this.oldLocationHash}`);
         });
       }

src/util/TextSelectionManager.js

@@ -6,6 +6,7 @@ import { customElement } from 'lit/decorators.js';
 export class TextSelectionManager {
   /** @type {brHighlightBar} */
   highlightBar;
+  highlightEnabled;
   options = {
     // Current Translation plugin implementation does not have words, will limit to one BRlineElement for now
     maxProtectedWords: 200,
@@ -28,6 +29,7 @@ export class TextSelectionManager {
     this.selectionObserver = new SelectionObserver(this.layer, this._onSelectionChange);
     this.options.maxProtectedWords = maxWords ? maxWords : 200;
     this.highlightBar = new brHighlightBar(br);
+
     this.highlightBar.className = "textFragmentBar";
   }
 
@@ -42,23 +44,32 @@ export class TextSelectionManager {
         this.br.refs.$br.find('.BRpagecontainer--hasSelection').removeClass('BRpagecontainer--hasSelection');
         $(window.getSelection().anchorNode).closest('.BRpagecontainer').addClass('BRpagecontainer--hasSelection');
         this.highlightBar.addHighlightButtonStyling();
+
       }
 
       if (selectEvent == 'focusChanged') {
         // hide the button as user changes their selection
         if (this.mouseIsDown) {
           this.highlightBar.hideHighlightStyle();
+
         } else {
-          this.highlightBar.addHighlightButtonStyling();
+          if (window.getSelection().toString().length != 0) {
+            this.highlightBar.addHighlightButtonStyling();
+
+          }
         }
       }
+
+      if (selectEvent == 'cleared') {
+        this.highlightBar.hideHighlightStyle();
+      }
     }).attach();
   }
 
   // Need attach + detach methods to toggle w/ Translation plugin
   attach() {
     this.selectionObserver.attach();
-    if (!this.br.plugins.translate) {
+    if (!this.br.plugins.translate && this.highlightEnabled) {
       document.body.append(this.highlightBar);
     }
     if (this.br.protected) {
@@ -86,6 +97,12 @@ export class TextSelectionManager {
     }
   }
 
+  addHighlightBar() {
+    if (document.querySelector('.textFragmentBar')) return;
+    if (this.highlightEnabled && !this.br.plugins.translate) {
+      document.body.append(this.highlightBar);
+    }
+  }
   /**
    * @param {'started' | 'cleared' | 'focusChanged'} type
    * @param {HTMLElement} target
@@ -146,6 +163,7 @@ export class TextSelectionManager {
     // blocking selection
     $(textLayer).on("mousedown.textSelectPluginHandler", (event) => {
       this.mouseIsDown = true;
+      this.highlightBar.hideHighlightStyle();
       if ($(event.target).is(this.selectionElement.join(", "))) {
         event.stopPropagation();
       }
@@ -179,6 +197,7 @@ export class TextSelectionManager {
       if (event.which != 1) return;
       this.mouseIsDown = true;
       event.stopPropagation();
+      this.highlightBar.hideHighlightStyle();
     });
 
     // Prevent page flip on click
@@ -462,14 +481,13 @@ class brHighlightBar extends LitElement {
       currentParams = currentParams.replace(/(text=)[\w\W\d%]+/, createParam(currentSelection, textLayer));
     } else {
       if (this.br.options.urlMode === 'history') {
-        currentParams = `?${createParam(currentSelection, textLayer)}`
+        currentParams = `?${createParam(currentSelection, textLayer)}`;
       } else {
         currentParams = `${currentParams}&${createParam(currentSelection, textLayer)}`;
       }
     }
-    console.log("this is after copying", currentParams, currentUrl.pathname);
     if (this.br.options.urlMode === 'history') {
-      navigator.clipboard.writeText(`${currentUrl.origin}${currentUrl.pathname}${currentParams}`)
+      navigator.clipboard.writeText(`${currentUrl.origin}${currentUrl.pathname}${currentParams}`);
     } else {
       navigator.clipboard.writeText(`${currentUrl.origin}${currentUrl.pathname}${currentParams}${currentUrl?.hash}`);
     }