@internetarchive/bookreader 5.0.0-110 → 5.0.0-111

package/src/BookReader.js

@@ -1970,10 +1970,25 @@ BookReader.prototype.queryStringFromParams = function(
   if (params.search && urlMode === 'history') {
     newParams.set('q', params.search);
   }
+
+  let textFragmentParam = '';
+  // Need to pull out text separately to avoid the spaces becoming encoded as +, which
+  // the browser seems not to handle with the text fragment
+  if (newParams.get('text')) {
+    newParams.delete('text');
+    textFragmentParam = `text=${this.urlPlugin.retrieveTextFragment(currQueryString)}`;
+  }
+
   // https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/toString
   // Note: This method returns the query string without the question mark.
-  const result = newParams.toString();
-  return result ? '?' + result : '';
+  let result = newParams.toString();
+  if (textFragmentParam) {
+    if (result) result += '&';
+    result += textFragmentParam;
+  }
+  if (result) result = '?' + result;
+
+  return result;
 };
 
 /**

package/src/css/_TextSelection.scss

@@ -150,4 +150,63 @@
 
 .BRtranslateLayer .BRparagraphElement.BRtranslateHidden {
     display: none;
+}
+
+.br-select-menu__root {
+  display: none;
+  border-radius: 20px;
+  background-color: #333;
+  color-scheme: dark;
+  padding: 2px;
+  overflow: hidden;
+  transition: border-radius 0.2s;
+}
+.br-select-menu__root:hover {
+  border-radius: 8px;
+}
+
+.br-select-menu__root:hover .br-select-menu__option {
+  border-radius: 6px;
+}
+
+.br-select-menu__option {
+  --iconWidth: 15px;
+  --iconHeight: 15px;
+  --iconFillColor: currentColor;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  border-radius: 20px;
+  font-family: inherit;
+  border: 0;
+  transition: background-color 0.2s, border-radius 0.2s;
+  cursor: pointer;
+  text-wrap: nowrap;
+  padding: 4px;
+}
+
+.br-select-menu__option:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.br-select-menu__icon {
+  display: block;
+  flex-shrink: 0;
+  width: 17px;
+  height: 17px;
+}
+
+.br-select-menu__label {
+  width: 0px;
+  opacity: 0;
+  interpolate-size: allow-keywords;
+  transition: width 0.2s;
+  font-size: 12px;
+}
+
+
+.br-select-menu__root:hover .br-select-menu__label {
+  width: auto;
+  margin-left: 4px;
+  opacity: 1;
 }

package/src/plugins/plugin.chapters.js

@@ -6,6 +6,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import '@internetarchive/icon-toc/icon-toc.js';
 import { BookReaderPlugin } from "../BookReaderPlugin.js";
 import { applyVariables } from "../util/strings.js";
+import { promisifyEvent } from "../BookReader/utils.js";
 /** @typedef {import('@/src/BookReader/BookModel.js').PageIndex} PageIndex */
 /** @typedef {import('@/src/BookReader/BookModel.js').PageString} PageString */
 /** @typedef {import('@/src/BookReader/BookModel.js').LeafNum} LeafNum */
@@ -94,11 +95,15 @@ export class ChaptersPlugin extends BookReaderPlugin {
       this._tocEntries = rawTableOfContents
         .map(rawTOCEntry => (Object.assign({}, rawTOCEntry, {
           pageIndex: (
-            typeof(rawTOCEntry.leaf) == 'number' ? this.br.book.leafNumToIndex(rawTOCEntry.leaf) :
-              rawTOCEntry.pagenum ? this.br.book.getPageIndex(rawTOCEntry.pagenum) :
-                undefined
+            typeof rawTOCEntry.page_index === 'number' ? rawTOCEntry.page_index :
+              typeof(rawTOCEntry.leaf) == 'number' ? this.br.book.leafNumToIndex(rawTOCEntry.leaf) :
+                rawTOCEntry.pagenum ? this.br.book.getPageIndex(rawTOCEntry.pagenum) :
+                  undefined
           ),
         })));
+      if (!this.br.shell) {
+        await promisifyEvent(window, 'BookReader:PostInit');
+      }
       this._render();
       this.br.bind(BookReader.eventNames.pageChanged, () => this._updateCurrent());
     }

package/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', 'copyLinkToHighlight'],
   }
 
   /** @type {ExperimentModel[]} */
   allExperiments = [
+    new class extends ExperimentModel {
+      name = 'copyLinkToHighlight';
+      title = 'Copy to Selection URL';
+      description = 'Share text selection via URL';
+      learnMore = 'none';
+      icon = null;
+      enabled = false;
+      async enable ({ manual = false }) {
+        this.br.plugins.textSelection.enableSelectionMenu();
+      }
+      async disable() {
+        sleep(0).then(() => {
+          window.location.reload();
+        });
+      }
+    }(),
     new class extends ExperimentModel {
       name = 'translate';
       title = 'Translate Plugin';
@@ -123,7 +139,9 @@ export class ExperimentsPlugin extends BookReaderPlugin {
     for (const experiment of this.allExperiments) {
       // TODO: imagesBaseURL should be replaced with assetRoot everywhere
       experiment.assetRoot = this.br.options.imagesBaseURL.replace(/images\/$/, '');
-      experiment.icon = experiment.buildAssetPath(experiment.icon);
+      if (experiment.icon) {
+        experiment.icon = experiment.buildAssetPath(experiment.icon);
+      }
       experiment.br = this.br;
     }
 
@@ -269,7 +287,7 @@ export class BrExperimentToggle extends LitElement {
     return html`
       <div class="experiment-card" style="margin-bottom: 10px;">
         <div style="display: flex; align-items: center; gap: 10px;">
-          <img src="${this.icon}" style="width: 20px; height: 20px;" alt="" />
+          ${this.icon ? html`<img src="${this.icon}" style="width: 20px; height: 20px;" alt="" />` : ''}
           <div style="flex-grow: 1; font-weight: bold;">${this.title}</div>
         </div>
         <p style="opacity: 0.9">

package/src/plugins/plugin.text_selection.js

@@ -53,10 +53,21 @@ export class TextSelectionPlugin extends BookReaderPlugin {
   init() {
     if (!this.options.enabled) return;
 
+    this.br.on('pageVisible', (_, {pageContainerEl}) => {
+      if (pageContainerEl.querySelector('.BRtextLayer')) {
+        this.br.trigger('textLayerVisible', {pageContainerEl});
+      }
+    });
+
     this.loadData();
     this.textSelectionManager.init();
   }
 
+  enableSelectionMenu() {
+    this.textSelectionManager.selectionMenuEnabled = true;
+    this.textSelectionManager.renderSelectionMenu();
+  }
+
   /**
    * @override
    * @param {PageContainer} pageContainer
@@ -188,6 +199,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);
@@ -195,6 +207,11 @@ export class TextSelectionPlugin extends BookReaderPlugin {
       pageIndex,
       pageContainer,
     });
+
+    // Check if page is visible
+    if ($container.hasClass('BRpage-visible')) {
+      this.br.trigger('textLayerVisible', {pageContainerEl: $container[0]});
+    }
   }
 
   /**

package/src/plugins/url/UrlPlugin.js

@@ -161,7 +161,7 @@ export class UrlPlugin {
    * If it was changeed, update the urlState
    */
   listenForHashChanges() {
-    this.oldLocationHash = window.location.hash.substr(1);
+    this.oldLocationHash = this.getHash();
     if (this.urlLocationPollId) {
       clearInterval(this.urlLocationPollId);
       this.urlLocationPollId = null;
@@ -169,7 +169,7 @@ export class UrlPlugin {
 
     // check if the URL changes
     const updateHash = () => {
-      const newFragment = window.location.hash.substr(1);
+      const newFragment = this.getHash();
       const hasFragmentChange = newFragment != this.oldLocationHash;
 
       if (!hasFragmentChange) { return; }
@@ -182,10 +182,30 @@ export class UrlPlugin {
   /**
    * Will read either the hash or URL and return the bookreader fragment
    */
-  pullFromAddressBar (location = window.location) {
+  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);
   }
+
+  /**
+   * 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}`;
+  }
+
+  /**
+   * @param {string} urlString
+   * @returns {string}
+   */
+  retrieveTextFragment(urlString) {
+    return urlString.match(/(?<=[&?]?text=)[^&]*/);
+  }
 }

package/src/plugins/url/plugin.url.js

@@ -1,6 +1,7 @@
 /* global BookReader */
 
 import { UrlPlugin } from "./UrlPlugin.js";
+import { sleep } from "../../BookReader/utils.js";
 
 /**
  * Plugin for URL management in BookReader
@@ -25,7 +26,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,
@@ -42,6 +43,10 @@ BookReader.prototype.setup = (function(super_) {
     this.locationPollId = null;
     this.oldLocationHash = null;
     this.oldUserHash = null;
+    // Should include the :~:text= prefix
+    this.textFragment = null;
+    // Tracks the original textFragment page num when first loaded
+    this.textFragmentPage = null;
   };
 })(BookReader.prototype.setup);
 
@@ -140,11 +145,23 @@ BookReader.prototype.urlUpdateFragment = function() {
     return validParams;
   }, {});
 
+  // eg 'page/3/mode/2up'; no query params (in hash mode, it might have /search/term)
+  // Does NOT have the :~:text fragment
   const newFragment = this.fragmentFromParams(params, this.options.urlMode);
+  const newFragmentWithSlash = newFragment === '' ? '' : `/${newFragment}`;
+  // eg 'page/3/mode/2up'; no query params
+  // WILL CONTAIN the :~:text fragment in hash mode (!)
   const currFragment = this.urlReadFragment();
+  // This should have both ?q=foo&text=bar (and any other params) as an encoded string
   const currQueryString = this.getLocationSearch();
+  // Eg ?q=foo&text=bar; only query params, no fragment
   const newQueryString = this.queryStringFromParams(params, currQueryString, this.options.urlMode);
-  if (currFragment === newFragment && currQueryString === newQueryString) {
+
+  // NOTE: If ?text is in the URL, we will fire fragment change events on every render; which is
+  // not desireable, but currently don't have a way to handle re-writing ?text to the hash text
+  // fragment form, :~:text=foo.
+  const hasTextParam = this.urlPlugin.retrieveTextFragment(currQueryString);
+  if (currFragment === newFragment && currQueryString === newQueryString && !hasTextParam) {
     return;
   }
 
@@ -153,12 +170,19 @@ BookReader.prototype.urlUpdateFragment = function() {
       this.options.urlMode = 'hash';
     } else {
       const baseWithoutSlash = this.options.urlHistoryBasePath.replace(/\/+$/, '');
-      const newFragmentWithSlash = newFragment === '' ? '' : `/${newFragment}`;
-
+      const textFragment = this.urlPlugin.retrieveTextFragment(newQueryString);
       const newUrlPath = `${baseWithoutSlash}${newFragmentWithSlash}${newQueryString}`;
+      const extractedPage = this.urlPlugin.urlStringToUrlState(newFragmentWithSlash)?.page;
+      if (!this.textFragmentPage && textFragment) {
+        this.textFragmentPage =  extractedPage ? extractedPage : null;
+        this.textFragment = `:~:text=${textFragment}`;
+      }
       try {
         window.history.replaceState({}, null, newUrlPath);
         this.oldLocationHash = newFragment + newQueryString;
+        if (textFragment) {
+          this.oldLocationHash += `:~:text=${textFragment[0]}`;
+        }
       } catch (e) {
         // DOMException on Chrome when in sandboxed iframe
         this.options.urlMode = 'hash';
@@ -168,8 +192,22 @@ BookReader.prototype.urlUpdateFragment = function() {
 
   if (this.options.urlMode === 'hash')  {
     const newQueryStringSearch = this.urlParamsFiltersOnlySearch(this.readQueryString());
-    window.location.replace('#' + newFragment + newQueryStringSearch);
-    this.oldLocationHash = newFragment + newQueryStringSearch;
+    let textFragment = this.urlPlugin.retrieveTextFragment(this.readQueryString());
+    const extractedPage = this.urlPlugin.urlStringToUrlState(newFragmentWithSlash)?.page;
+
+    if (textFragment) {
+      textFragment = `:~:text=${textFragment[0]}`;
+    } else {
+      textFragment = '';
+    }
+    if (!this.textFragmentPage && textFragment) {
+      this.textFragmentPage = extractedPage ? extractedPage : null;
+      this.textFragment = textFragment;
+    } else if (this.textFragmentPage && extractedPage != this.textFragmentPage) {
+      textFragment = '';
+    }
+    window.location.replace('#' + newFragment + newQueryStringSearch + textFragment);
+    this.oldLocationHash = newFragment + newQueryStringSearch + textFragment;
   }
 };
 
@@ -195,7 +233,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 +248,24 @@ 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('textLayerVisible', async (_, {pageContainerEl}) => {
+          const visiblePageNum = pageContainerEl.getAttribute('data-page-num');
+
+          // Hack: More time mode 1up page "settle down" from user scrolling
+          await sleep(this.mode === 1 ? 900 : 100);
+
+          // No textFragment found or the textFragment stored doesn't match current visible page loaded
+          if (!this.textFragment || this.textFragmentPage !== visiblePageNum) return;
+          if (this.options.urlMode === 'history') {
+            window.location.replace(`#${this.textFragment}`);
+          } else {
+            // for urlMode hash, textFragment is stored in oldLocationHash already
+            window.location.replace(`#${this.oldLocationHash}`);
+          }
+        });
+      }
       this.bind(BookReader.eventNames.PostInit, () => {
         const { urlMode } = this.options;