Use SelectionObserver and Lit Element, fix tests

Author: schu96

src/BookReader/utils/SelectionObserver.js

@@ -4,10 +4,11 @@ export class SelectionObserver {
   startedInSelector = false;
   /** @type {HTMLElement} */
   target = null;
+  lastKnownFocusNode = null;
 
   /**
    * @param {string} selector
-   * @param {function('started' | 'cleared', HTMLElement): any} handler
+   * @param {function('started' | 'cleared' | 'focusChanged', HTMLElement): any} handler
    */
   constructor(selector, handler) {
     this.selector = selector;
@@ -34,9 +35,15 @@ export class SelectionObserver {
       if (!target) return;
       this.target = target;
       this.selecting = true;
+      this.lastKnownFocusNode = sel.focusNode;
       this.handler('started', this.target);
     }
 
+    if (this.selecting && (this.lastKnownFocusNode != sel.focusNode || sel.toString())) {
+      this.lastKnownFocusNode = sel.focusNode;
+      this.handler('focusChanged', this.target);
+    }
+
     if (this.selecting && (sel.isCollapsed || !sel.toString() || !$(sel.anchorNode).closest(this.selector)[0])) {
       this.selecting = false;
       this.handler('cleared', this.target);

src/css/_TextSelection.scss

@@ -150,4 +150,15 @@
 
 .BRtranslateLayer .BRparagraphElement.BRtranslateHidden {
     display: none;
+}
+
+.textFragmentButton {
+    background: inherit;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: darksalmon;
+    width: 60px;
+    height: 30px;
+    top: inherit;
+    left: inherit;
 }

src/plugins/url/UrlPlugin.js

@@ -155,45 +155,52 @@ export class UrlPlugin {
     }
     this.oldLocationHash = urlStrPath;
   }
-
+  /**
+   * Get the hash out of the current URL. Also augments it with the text
+   * from the main part of the URL, since that is not readable by JS
+   * from the actual hash
+   * @returns
+   */
     getHash = () => {
-      const text = window.location.search.match(/(?<=[&?]text=)[^&]*/);
-      if (text) {
-        return `${window.location.hash.slice(1)}:~:text=${text[0]}`;
-      }
-      return window.location.hash.slice(1);
+      const text = this.retrieveTextFragment(window.location.search);
+      const textFragment = text ? `:~:text=${text[0]}` : '';
+      return `${window.location.hash.slice(1)}${textFragment}`;
     }
 
-  /**
+    /**
    * Get the url and check if it has changed
    * If it was changeed, update the urlState
    */
-  listenForHashChanges() {
-    this.oldLocationHash = this.getHash();
-    if (this.urlLocationPollId) {
-      clearInterval(this.urlLocationPollId);
-      this.urlLocationPollId = null;
-    }
+    listenForHashChanges() {
+      this.oldLocationHash = this.getHash();
+      if (this.urlLocationPollId) {
+        clearInterval(this.urlLocationPollId);
+        this.urlLocationPollId = null;
+      }
 
-    // check if the URL changes
-    const updateHash = () => {
-      const newFragment = this.getHash();
-      const hasFragmentChange = newFragment != this.oldLocationHash;
+      // check if the URL changes
+      const updateHash = () => {
+        const newFragment = this.getHash();
+        const hasFragmentChange = newFragment != this.oldLocationHash;
 
-      if (!hasFragmentChange) { return; }
+        if (!hasFragmentChange) { return; }
 
-      this.urlState = this.urlStringToUrlState(newFragment);
-    };
-    this.urlLocationPollId = setInterval(updateHash, 500);
-  }
+        this.urlState = this.urlStringToUrlState(newFragment);
+      };
+      this.urlLocationPollId = setInterval(updateHash, 500);
+    }
 
-  /**
+    /**
    * Will read either the hash or URL and return the bookreader fragment
    */
-  pullFromAddressBar (location = window.location) {
-    const path = this.urlMode === 'history'
-      ? (location.pathname.substr(this.urlHistoryBasePath.length) + location.search)
-      : location.hash.substr(1);
-    this.urlState = this.urlStringToUrlState(path);
-  }
+    pullFromAddressBar (location = window.location) {
+      const path = this.urlMode === 'history'
+        ? (location.pathname.substr(this.urlHistoryBasePath.length) + location.search)
+        : location.hash.substr(1);
+      this.urlState = this.urlStringToUrlState(path);
+    }
+
+    retrieveTextFragment (urlString) {
+      return urlString.match(/(?<=&text=)[^&]*/);
+    }
 }

src/plugins/url/plugin.url.js

@@ -29,7 +29,6 @@ jQuery.extend(BookReader.defaultOptions, {
 
   /** If true, don't update the URL when `page == n0 (eg "/page/n0")` */
   urlTrackIndex0: false,
-  shareHighlight: null,
 });
 
 /** @override */
@@ -184,7 +183,7 @@ BookReader.prototype.urlUpdateFragment = function() {
 
 // testing with this URL http://127.0.0.1:8000/BookReaderDemo/demo-internetarchive.html?ocaid=adventureofsherl0000unse&text=Well%2C I found my plans very seriously menaced.&q=breaking the law#page/18/mode/2up
 BookReader.prototype.urlParamsFiltersOnlySearch = function(url) {
-  const text = url.match(/(?<=&text=)[^&]*/);
+  const text = this.urlPlugin.retrieveTextFragment(url);
   const params = new URLSearchParams(url);
   let output = '';
   output += params.has('q') ? `?${new URLSearchParams({ q: params.get('q') })}` : '';
@@ -219,9 +218,6 @@ export class BookreaderUrlPlugin extends BookReader {
       this.urlPlugin = new UrlPlugin(this.options);
       const location = this.getLocationSearch();
       if (location.includes("text=")) {
-        const extractText = location.match(/(text=[\w\d\W]*)/);
-        const textFragment = `${extractText}`;
-        this.options.shareHighlight = textFragment;
         this.on('textLayerRendered', (_, {pageIndex, container}) => {
           window.location.replace(`#${this.oldLocationHash}`);
         });