@internetarchive/bookreader 5.0.0-28 → 5.0.0-30-a

package/stat/plugins/plugin.text_selection.js

@@ -0,0 +1,291 @@
+//@ts-check
+import { createSVGPageLayer } from '../BookReader/PageContainer.js';
+import { isFirefox, isSafari } from '../util/browserSniffing.js';
+import { applyVariables } from '../util/strings.js';
+/** @typedef {import('../util/strings.js').StringWithVars} StringWithVars */
+/** @typedef {import('../BookReader/PageContainer.js').PageContainer} PageContainer */
+
+const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
+
+export const DEFAULT_OPTIONS = {
+  enabled: true,
+  /** @type {StringWithVars} The URL to fetch the entire DJVU xml. Supports options.vars */
+  fullDjvuXmlUrl: null,
+  /** @type {StringWithVars} The URL to fetch a single page of the DJVU xml. Supports options.vars. Also has {{pageIndex}} */
+  singlePageDjvuXmlUrl: null,
+};
+/** @typedef {typeof DEFAULT_OPTIONS} TextSelectionPluginOptions */
+
+/**
+ * @template T
+ */
+export class Cache {
+  constructor(maxSize = 10) {
+    this.maxSize = maxSize;
+    /** @type {T[]} */
+    this.entries = [];
+  }
+
+  /**
+   * @param {T} entry
+   */
+  add(entry) {
+    if (this.entries.length >= this.maxSize) {
+      this.entries.shift();
+    }
+    this.entries.push(entry);
+  }
+}
+
+export class TextSelectionPlugin {
+
+  constructor(options = DEFAULT_OPTIONS, optionVariables, avoidTspans = isFirefox(), pointerEventsOnParagraph = isSafari()) {
+    this.options = options;
+    this.optionVariables = optionVariables;
+    /**@type {PromiseLike<JQuery<HTMLElement>|undefined>} */
+    this.djvuPagesPromise = null;
+    // Using text elements instead of tspans for words because Firefox does not allow svg tspan stretch.
+    // Tspans are necessary on Chrome because they prevent newline character after every word when copying
+    this.svgParagraphElement = "text";
+    this.svgWordElement = "tspan";
+    this.insertNewlines = avoidTspans;
+    // Safari has a bug where `pointer-events` doesn't work on `<tspans>`. So
+    // there we will set `pointer-events: all` on the paragraph element. We don't
+    // do this everywhere, because it's a worse experience. Thanks Safari :/
+    this.pointerEventsOnParagraph = pointerEventsOnParagraph;
+    if (avoidTspans) {
+      this.svgParagraphElement = "g";
+      this.svgWordElement = "text";
+    }
+
+    /** @type {Cache<{index: number, response: any}>} */
+    this.pageTextCache = new Cache();
+
+    /**
+     * Sometimes there are too many words on a page, and the browser becomes near
+     * unusable. For now don't render text layer for pages with too many words.
+     */
+    this.maxWordRendered = 2500;
+  }
+
+  init() {
+    // Only fetch the full djvu xml if the single page url isn't there
+    if (this.options.singlePageDjvuXmlUrl) return;
+    this.djvuPagesPromise = $.ajax({
+      type: "GET",
+      url: applyVariables(this.options.fullDjvuXmlUrl, this.optionVariables),
+      dataType: "html",
+      error: (e) => undefined
+    }).then((res) => {
+      try {
+        const xmlMap = $.parseXML(res);
+        return xmlMap && $(xmlMap).find("OBJECT");
+      } catch (e) {
+        return undefined;
+      }
+    });
+  }
+
+  /**
+   * @param {number} index
+   * @returns {Promise<HTMLElement|undefined>}
+   */
+  async getPageText(index) {
+    if (this.options.singlePageDjvuXmlUrl) {
+      const cachedEntry = this.pageTextCache.entries.find(x => x.index == index);
+      if (cachedEntry) {
+        return cachedEntry.response;
+      }
+      return $.ajax({
+        type: "GET",
+        url: applyVariables(this.options.singlePageDjvuXmlUrl, this.optionVariables, { pageIndex: index }),
+        dataType: "html",
+        error: (e) => undefined,
+      }).then((res) => {
+        try {
+          const xmlDoc = $.parseXML(res);
+          const result = xmlDoc && $(xmlDoc).find("OBJECT")[0];
+          this.pageTextCache.add({ index, response: result });
+          return result;
+        } catch (e) {
+          return undefined;
+        }
+      });
+    } else {
+      const XMLpagesArr = await this.djvuPagesPromise;
+      if (XMLpagesArr) return XMLpagesArr[index];
+    }
+  }
+
+  /**
+   * 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 {SVGElement} svg
+   */
+  defaultMode(svg) {
+    svg.classList.remove("selectingSVG");
+    $(svg).on("mousedown.textSelectPluginHandler", (event) => {
+      if (!$(event.target).is(".BRwordElement")) return;
+      event.stopPropagation();
+      svg.classList.add("selectingSVG");
+      $(svg).one("mouseup.textSelectPluginHandler", (event) => {
+        if (window.getSelection().toString() != "") {
+          event.stopPropagation();
+          $(svg).off(".textSelectPluginHandler");
+          this.textSelectingMode(svg);
+        }
+        else svg.classList.remove("selectingSVG");
+      });
+    });
+  }
+
+  /**
+   * Applies mouse events when in textSelecting mode
+   * @param {SVGElement} svg
+   */
+  textSelectingMode(svg) {
+    $(svg).on('mousedown.textSelectPluginHandler', (event) => {
+      if (!$(event.target).is(".BRwordElement")) {
+        if (window.getSelection().toString() != "") window.getSelection().removeAllRanges();
+      }
+      event.stopPropagation();
+    });
+    $(svg).on('mouseup.textSelectPluginHandler', (event) => {
+      event.stopPropagation();
+      if (window.getSelection().toString() == "") {
+        $(svg).off(".textSelectPluginHandler");
+        this.defaultMode(svg);      }
+    });
+  }
+
+  /**
+   * Initializes text selection modes if there is an svg on the page
+   * @param {JQuery} $container
+   */
+  stopPageFlip($container) {
+    /** @type {JQuery<SVGElement>} */
+    const $svg = $container.find('svg.textSelectionSVG');
+    if (!$svg.length) return;
+    $svg.each((i, s) => this.defaultMode(s));
+    this.interceptCopy($container);
+  }
+
+  /**
+   * @param {PageContainer} pageContainer
+   */
+  async createTextLayer(pageContainer) {
+    const pageIndex = pageContainer.page.index;
+    const $container = pageContainer.$container;
+    const $svgLayers = $container.find('.textSelectionSVG');
+    if ($svgLayers.length) return;
+    const XMLpage = await this.getPageText(pageIndex);
+    if (!XMLpage) return;
+
+    const totalWords = $(XMLpage).find("WORD").length;
+    if (totalWords > this.maxWordRendered) {
+      console.log(`Page ${pageIndex} has too many words (${totalWords} > ${this.maxWordRendered}). Not rendering text layer.`);
+      return;
+    }
+
+    const svg = createSVGPageLayer(pageContainer.page, 'textSelectionSVG');
+    $container.append(svg);
+
+    $(XMLpage).find("PARAGRAPH").each((i, paragraph) => {
+      // Adding text element for each paragraph in the page
+      const words = $(paragraph).find("WORD");
+      if (!words.length) return;
+      const paragSvg = document.createElementNS("http://www.w3.org/2000/svg", this.svgParagraphElement);
+      paragSvg.setAttribute("class", "BRparagElement");
+      if (this.pointerEventsOnParagraph) {
+        paragSvg.style.pointerEvents = "all";
+      }
+
+      const wordHeightArr = [];
+
+      for (let i = 0; i < words.length; i++) {
+        // Adding tspan for each word in paragraph
+        const currWord = words[i];
+        // eslint-disable-next-line no-unused-vars
+        const [left, bottom, right, top] = $(currWord).attr("coords").split(',').map(parseFloat);
+        const wordHeight = bottom - top;
+        wordHeightArr.push(wordHeight);
+
+        const wordTspan = document.createElementNS("http://www.w3.org/2000/svg", this.svgWordElement);
+        wordTspan.setAttribute("class", "BRwordElement");
+        wordTspan.setAttribute("x", left.toString());
+        wordTspan.setAttribute("y", bottom.toString());
+        wordTspan.setAttribute("textLength", (right - left).toString());
+        wordTspan.setAttribute("lengthAdjust", "spacingAndGlyphs");
+        wordTspan.textContent = currWord.textContent;
+        paragSvg.appendChild(wordTspan);
+
+        // Adding spaces after words except at the end of the paragraph
+        // TODO: assumes left-to-right text
+        if (i < words.length - 1) {
+          const nextWord = words[i + 1];
+          // eslint-disable-next-line no-unused-vars
+          const [leftNext, bottomNext, rightNext, topNext] = $(nextWord).attr("coords").split(',').map(parseFloat);
+          const spaceTspan = document.createElementNS("http://www.w3.org/2000/svg", this.svgWordElement);
+          spaceTspan.setAttribute("class", "BRwordElement");
+          spaceTspan.setAttribute("x", right.toString());
+          spaceTspan.setAttribute("y", bottom.toString());
+          if ((leftNext - right) > 0) spaceTspan.setAttribute("textLength", (leftNext - right).toString());
+          spaceTspan.setAttribute("lengthAdjust", "spacingAndGlyphs");
+          spaceTspan.textContent = " ";
+          paragSvg.appendChild(spaceTspan);
+        }
+
+        // Adds newline at the end of paragraph on Firefox
+        if ((i ==  words.length - 1 && (this.insertNewlines))) {
+          paragSvg.appendChild(document.createTextNode("\n"));
+        }
+      }
+
+      wordHeightArr.sort();
+      const paragWordHeight = wordHeightArr[Math.floor(wordHeightArr.length * 0.85)];
+      paragSvg.setAttribute("font-size", paragWordHeight.toString());
+      svg.appendChild(paragSvg);
+    });
+    this.stopPageFlip($container);
+  }
+}
+
+export class BookreaderWithTextSelection extends BookReader {
+  init() {
+    const options = Object.assign({}, DEFAULT_OPTIONS, this.options.plugins.textSelection);
+    if (options.enabled) {
+      this.textSelectionPlugin = new TextSelectionPlugin(options, this.options.vars);
+      // Write this back; this way the plugin is the source of truth, and BR just
+      // contains a reference to it.
+      this.options.plugins.textSelection = options;
+      this.textSelectionPlugin.init();
+    }
+    super.init();
+  }
+
+  /**
+   * @param {number} index
+   */
+  _createPageContainer(index) {
+    const pageContainer = super._createPageContainer(index);
+    // Disable if thumb mode; it's too janky
+    // .page can be null for "pre-cover" region
+    if (this.mode !== this.constModeThumb && pageContainer.page) {
+      this.textSelectionPlugin?.createTextLayer(pageContainer);
+    }
+    return pageContainer;
+  }
+}
+window.BookReader = BookreaderWithTextSelection;
+export default BookreaderWithTextSelection;

package/stat/plugins/plugin.url.js

@@ -0,0 +1,198 @@
+/* global BookReader */
+/**
+ * Plugin for URL management in BookReader
+ * Note read more about the url "fragment" here:
+ * https://openlibrary.org/dev/docs/bookurls
+ */
+
+jQuery.extend(BookReader.defaultOptions, {
+  enableUrlPlugin: true,
+  bookId: '',
+  /** @type {string} Defaults can be a urlFragment string */
+  defaults: null,
+  updateWindowTitle: false,
+
+  /** @type {'history' | 'hash'} */
+  urlMode: 'hash',
+
+  /**
+   * When using 'history' mode, this part of the URL is kept constant
+   * @example /details/plato/
+   */
+  urlHistoryBasePath: '/',
+
+  /** Only these params will be reflected onto the URL */
+  urlTrackedParams: ['page', 'search', 'mode', 'region', 'highlight', 'view'],
+
+  /** If true, don't update the URL when `page == n0 (eg "/page/n0")` */
+  urlTrackIndex0: false,
+});
+
+/** @override */
+BookReader.prototype.setup = (function(super_) {
+  return function(options) {
+    super_.call(this, options);
+
+    this.bookId = options.bookId;
+    this.defaults = options.defaults;
+
+    this.locationPollId = null;
+    this.oldLocationHash = null;
+    this.oldUserHash = null;
+  };
+})(BookReader.prototype.setup);
+
+/** @override */
+BookReader.prototype.init = (function(super_) {
+  return function() {
+
+    if (this.options.enableUrlPlugin) {
+      this.bind(BookReader.eventNames.PostInit, () => {
+        const { updateWindowTitle, urlMode } = this.options;
+        if (updateWindowTitle) {
+          document.title = this.shortTitle(50);
+        }
+        if (urlMode === 'hash') {
+          this.urlStartLocationPolling();
+        }
+      });
+
+      this.bind(BookReader.eventNames.fragmentChange,
+        this.urlUpdateFragment.bind(this)
+      );
+    }
+    super_.call(this);
+  };
+})(BookReader.prototype.init);
+
+/**
+ * Returns a shortened version of the title with the maximum number of characters
+ * @param {number} maximumCharacters
+ * @return {string}
+ */
+BookReader.prototype.shortTitle = function(maximumCharacters) {
+  if (this.bookTitle.length < maximumCharacters) {
+    return this.bookTitle;
+  }
+
+  const title = `${this.bookTitle.substr(0, maximumCharacters - 3)}...`;
+  return title;
+};
+
+/**
+ * Starts polling of window.location to see hash fragment changes
+ */
+BookReader.prototype.urlStartLocationPolling = function() {
+  this.oldLocationHash = this.urlReadFragment();
+
+  if (this.locationPollId) {
+    clearInterval(this.locationPollID);
+    this.locationPollId = null;
+  }
+
+  const updateHash = () => {
+    const newFragment = this.urlReadFragment();
+    const hasFragmentChange = (newFragment != this.oldLocationHash) && (newFragment != this.oldUserHash);
+
+    if (!hasFragmentChange) { return; }
+
+    const params = this.paramsFromFragment(newFragment);
+
+    const updateParams = () => this.updateFromParams(params);
+
+    this.trigger(BookReader.eventNames.stop);
+    if (this.animating) {
+      // Queue change if animating
+      if (this.autoStop) this.autoStop();
+      this.animationFinishedCallback = updateParams;
+    } else {
+      // update immediately
+      updateParams();
+    }
+    this.oldUserHash = newFragment;
+  };
+
+  this.locationPollId = setInterval(updateHash, 500);
+};
+
+/**
+ * Update URL from the current parameters.
+ * Call this instead of manually using window.location.replace
+ */
+BookReader.prototype.urlUpdateFragment = function() {
+  const allParams = this.paramsFromCurrent();
+  const { urlMode, urlTrackIndex0, urlTrackedParams } = this.options;
+
+  if (!urlTrackIndex0
+      && (typeof(allParams.index) !== 'undefined')
+      && allParams.index === 0) {
+    delete allParams.index;
+    delete allParams.page;
+  }
+
+  const params = urlTrackedParams.reduce((validParams, paramName) => {
+    if (paramName in allParams) {
+      validParams[paramName] = allParams[paramName];
+    }
+    return validParams;
+  }, {});
+
+  const newFragment = this.fragmentFromParams(params, urlMode);
+  const currFragment = this.urlReadFragment();
+  const currQueryString = this.getLocationSearch();
+  const newQueryString = this.queryStringFromParams(params, currQueryString, urlMode);
+  if (currFragment === newFragment && currQueryString === newQueryString) {
+    return;
+  }
+
+  if (urlMode === 'history') {
+    if (window.history && window.history.replaceState) {
+      const baseWithoutSlash = this.options.urlHistoryBasePath.replace(/\/+$/, '');
+      const newFragmentWithSlash = newFragment === '' ? '' : `/${newFragment}`;
+
+      const newUrlPath = `${baseWithoutSlash}${newFragmentWithSlash}${newQueryString}`;
+      window.history.replaceState({}, null, newUrlPath);
+      this.oldLocationHash = newFragment + newQueryString;
+
+    }
+  } else {
+    const newQueryStringSearch = this.urlParamsFiltersOnlySearch(this.readQueryString());
+    window.location.replace('#' + newFragment + newQueryStringSearch);
+    this.oldLocationHash = newFragment + newQueryStringSearch;
+
+  }
+};
+
+/**
+ * @private
+ * Filtering query parameters to select only book search param (?q=foo)
+   This needs to be updated/URL system modified if future query params are to be added
+ * @param {string} url
+ * @return {string}
+ * */
+BookReader.prototype.urlParamsFiltersOnlySearch = function(url) {
+  const params = new URLSearchParams(url);
+  return params.has('q') ? `?${new URLSearchParams({ q: params.get('q') })}` : '';
+};
+
+
+/**
+ * Will read either the hash or URL and return the bookreader fragment
+ * @return {string}
+ */
+BookReader.prototype.urlReadFragment = function() {
+  const { urlMode, urlHistoryBasePath } = this.options;
+  if (urlMode === 'history') {
+    return window.location.pathname.substr(urlHistoryBasePath.length);
+  } else {
+    return window.location.hash.substr(1);
+  }
+};
+
+/**
+ * Will read the hash return the bookreader fragment
+ * @return {string}
+ */
+BookReader.prototype.urlReadHashFragment = function() {
+  return window.location.hash.substr(1);
+};