@internetarchive/bookreader 5.0.0-26 → 5.0.0-29

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.vendor-fullscreen.js

@@ -0,0 +1,247 @@
+/* global BookReader */
+
+/**
+ * Toggles browser's native fullscreen mode if available device is not mobile
+ */
+if (!isMobile()) {
+  const EVENT_NAMESPACE = '.bookreader_vendor-fullscreen';
+
+  jQuery.extend(BookReader.defaultOptions, {
+    /** @type {boolean} */
+    enableVendorFullscreenPlugin: true
+  });
+
+  /** @override */
+  BookReader.prototype.setup = (function(super_) {
+    return function(options) {
+      super_.call(this, options);
+
+      this.isVendorFullscreenActive = false;
+    };
+  })(BookReader.prototype.setup);
+
+  /** @override */
+  BookReader.prototype.getInitialMode = (function(super_) {
+    return function(params) {
+      let nextMode = super_.call(this, params);
+      if (this.isVendorFullscreenActive) {
+        nextMode = this.constMode1up;
+      }
+      return nextMode;
+    };
+  })(BookReader.prototype.getInitialMode);
+
+  /** @override */
+  BookReader.prototype.init = (function(super_) {
+    return function() {
+      super_.call(this);
+
+      if (!fullscreenAllowed()) {
+        return;
+      }
+      // In fullscreen mode the colorbox and overlay need to be inside the fullscreen element to display properly.
+      bindFullscreenChangeListener(this, (e) => {
+        e.data.resize();
+        e.data.updateBrClasses();
+        const cboxOverlay = $('#cboxOverlay');
+        const cbox = $('#colorbox');
+        if (isFullscreenActive()) {
+          // In full screen mode, the colorbox and overlay need
+          // to be children of the fullscreen element to display properly.
+          const $fullscreen = $(getFullscreenElement());
+          $fullscreen.append(cboxOverlay).append(cbox);
+        } else {
+          // In non-fullscreen mode, the colorbox and overlay need
+          // to be children of the main document body.
+          $(document.body).append(cboxOverlay).append(cbox);
+        }
+      });
+    };
+  })(BookReader.prototype.init);
+
+  /**
+   * Start fullscreen mode
+   */
+  BookReader.prototype.enterFullWindow = function() {
+    this.refs.$brContainer.css('opacity', 0);
+
+    const windowWidth = $(window).width();
+    if (windowWidth <= this.onePageMinBreakpoint) {
+      this.switchMode(this.constMode1up);
+    }
+
+    this.isVendorFullscreenActive = true;
+    this.updateBrClasses();
+
+    this.resize();
+    this.jumpToIndex(this.currentIndex());
+
+    this.refs.$brContainer.animate({ opacity: 1 }, 400, 'linear');
+
+    $(document).on(`keyup.${EVENT_NAMESPACE}`, e => {
+      if (e.keyCode === 27) this.exitFullScreen();
+    });
+  };
+
+  /**
+   * Exit from fullscreen mode
+   */
+  BookReader.prototype.exitFullWindow = function() {
+    this.refs.$brContainer.css('opacity', 0);
+
+    $(document).off('keyup' + EVENT_NAMESPACE);
+
+    this.isFullscreenActive = false;
+    this.updateBrClasses();
+
+    this.resize();
+    this.refs.$brContainer.animate({ opacity: 1 }, 400, 'linear');
+  };
+
+  /**
+   * Returns true if fullscreen mode is enabled
+   *
+   * @returns {boolean}
+   */
+  BookReader.prototype.isFullscreen = function() {
+    return isFullscreenActive() || this.isVendorFullscreenActive;
+  };
+
+  /**
+   * Toggle screen
+   */
+  BookReader.prototype.toggleFullscreen = function() {
+    if (this.isFullscreen()) {
+      if (fullscreenAllowed()) {
+        exitFullscreen();
+      } else {
+        this.exitFullWindow();
+      }
+    } else {
+      if (fullscreenAllowed()) {
+        requestFullscreen(this.refs.$br[0]);
+      } else {
+        this.enterFullWindow();
+      }
+    }
+  };
+
+  /** @deprecated */
+  BookReader.util.isMobile = isMobile;
+
+  /** @deprecated */
+  BookReader.util.getFullscreenElement = getFullscreenElement;
+
+  /** @deprecated */
+  BookReader.util.bindFullscreenChangeListener = bindFullscreenChangeListener;
+
+  /** @deprecated */
+  BookReader.util.fullscreenAllowed = fullscreenAllowed;
+
+  /** @deprecated */
+  BookReader.util.requestFullscreen = requestFullscreen;
+
+  /** @deprecated */
+  BookReader.util.exitFullscreen = exitFullscreen;
+
+  /** @deprecated */
+  BookReader.util.isFullscreenActive = isFullscreenActive;
+}
+
+
+/**
+ * Returns the DOM element being used for fullscreen.
+ *
+ * @returns {HTMLElement}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement
+ */
+export function getFullscreenElement() {
+  return document.fullscreenElement ||
+    document.webkitFullscreenElement ||
+    document.mozFullScreenElement ||
+    document.msFullscreenElement;
+}
+
+/**
+ * Returns true if the document is in fullscreen mode.
+ *
+ * @returns {boolean}
+ */
+export function isFullscreenActive() {
+  const fullscreenElement = getFullscreenElement();
+  return fullscreenElement !== null && fullscreenElement !== undefined;
+}
+
+/**
+ * Exits fullscreen mode.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen
+ */
+export function exitFullscreen() {
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  } else if (document.webkitExitFullscreen) {
+    document.webkitExitFullscreen();
+  } else if (document.mozCancelFullScreen) {
+    document.mozCancelFullScreen();
+  } else if (document.msExitFullscreen) {
+    document.msExitFullscreen();
+  }
+}
+
+/**
+ * Requests fullscreen mode for the given element
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen
+ */
+export function requestFullscreen(element) {
+  if (element.requestFullscreen) {
+    element.requestFullscreen();
+  } else if (element.webkitRequestFullscreen) {
+    element.webkitRequestFullscreen();
+  } else if (element.mozRequestFullScreen) {
+    element.mozRequestFullScreen();
+  } else if (element.msRequestFullscreen) {
+    element.msRequestFullscreen();
+  }
+}
+
+/**
+ * Returns true if fullscreen mode is allowed on this device and document.
+ *
+ * @returns {boolean}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenEnabled
+ */
+export function fullscreenAllowed() {
+  return (document.fullscreenEnabled ||
+    document.webkitFullscreenEnabled ||
+    document.mozFullScreenEnabled ||
+    document.msFullScreenEnabled);
+}
+
+/**
+ * jQuery-style binding to a fullscreenchange event.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenchange_event
+ */
+export function bindFullscreenChangeListener(
+  data, fullscreenchangeListener
+) {
+  const event = 'fullscreenchange ';
+  const vendor_prefixes = [
+    'webkit',
+    'moz',
+    'ms'
+  ];
+  const all_events = (event + vendor_prefixes.join(event) + event).trim();
+  $(document).on(all_events, data, fullscreenchangeListener);
+}
+
+/**
+ * Returns true if current device is mobile
+ *
+ * @returns {boolean}
+ */
+export function isMobile() {
+  return (typeof window.orientation !== 'undefined') || (navigator.userAgent.indexOf('IEMobile') !== -1);
+}