Text Fragments from highlight experimental feature

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/plugin.text_selection.js

@@ -188,6 +188,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
       paragEl.style.marginTop = `${newTop}px`;
       yAdded += newTop;
       textLayer.appendChild(paragEl);
+      textLayer.appendChild(document.createTextNode('\n'));
     }
     $container.append(textLayer);
     this.textSelectionManager.stopPageFlip($container);

src/plugins/url/UrlPlugin.js

@@ -155,37 +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 = 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 = window.location.hash.substr(1);
-    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 = window.location.hash.substr(1);
-      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

@@ -25,7 +25,7 @@ jQuery.extend(BookReader.defaultOptions, {
   urlHistoryBasePath: '/',
 
   /** Only these params will be reflected onto the URL */
-  urlTrackedParams: ['page', 'search', 'mode', 'region', 'highlight', 'view'],
+  urlTrackedParams: ['page', 'search', 'mode', 'region', 'highlight', 'view', 'text'],
 
   /** If true, don't update the URL when `page == n0 (eg "/page/n0")` */
   urlTrackIndex0: false,
@@ -180,9 +180,15 @@ BookReader.prototype.urlUpdateFragment = function() {
  * @param {string} url
  * @return {string}
  * */
+
+// 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 = this.urlPlugin.retrieveTextFragment(url);
   const params = new URLSearchParams(url);
-  return params.has('q') ? `?${new URLSearchParams({ q: params.get('q') })}` : '';
+  let output = '';
+  output += params.has('q') ? `?${new URLSearchParams({ q: params.get('q') })}` : '';
+  output += text ? `:~:text=${text[0]}` : '';
+  return output;
 };
 
 
@@ -195,7 +201,7 @@ BookReader.prototype.urlReadFragment = function() {
   if (urlMode === 'history') {
     return window.location.pathname.substr(urlHistoryBasePath.length);
   } else {
-    return window.location.hash.substr(1);
+    return this.urlPlugin.getHash();
   }
 };
 
@@ -210,6 +216,12 @@ export class BookreaderUrlPlugin extends BookReader {
   init() {
     if (this.options.enableUrlPlugin) {
       this.urlPlugin = new UrlPlugin(this.options);
+      const location = this.getLocationSearch();
+      if (location.includes("text=")) {
+        this.on('textLayerRendered', (_, {pageIndex, container}) => {
+          window.location.replace(`#${this.oldLocationHash}`);
+        });
+      }
       this.bind(BookReader.eventNames.PostInit, () => {
         const { urlMode } = this.options;