@internetarchive/bookreader 5.0.0-18

package/src/plugins/plugin.mobile_nav.js

@@ -0,0 +1,287 @@
+/* global BookReader */
+/**
+ * Adds mobile navigation at responsive breakpoint
+ */
+
+import * as utils from '../BookReader/utils.js';
+import 'jquery.mmenu/dist/js/jquery.mmenu.min.js';
+import 'jquery.mmenu/dist/addons/navbars/jquery.mmenu.navbars.min.js';
+
+//contains all filters and labels for checkboxs
+const FILTERLIST = [
+  {
+    filter: "grayscale(100%)",
+    label: "Grayscale"
+  },
+  {
+    filter: "brightness(120%)",
+    label: "High brightness"
+  },
+  {
+    filter: "invert(100%)",
+    label: "Inverted (dark mode)"
+  },
+  {
+    filter: "contrast(120%)",
+    label: "High contrast"
+  },
+];
+
+jQuery.extend(BookReader.defaultOptions, {
+  enableMobileNav: true,
+  mobileNavTitle: 'Internet Archive',
+  mobileNavFullscreenOnly: false,
+});
+
+BookReader.prototype.setup = (function(super_) {
+  return function (options) {
+    super_.call(this, options);
+
+    this.enableMobileNav = options.enableMobileNav;
+    this.mobileNavTitle = options.mobileNavTitle;
+    this.mobileNavFullscreenOnly = options.mobileNavFullscreenOnly;
+
+    this.refs.$mmenu = null;
+  };
+})(BookReader.prototype.setup);
+
+
+// Extend initToolbar
+BookReader.prototype.initToolbar = (function (super_) {
+  return function (mode, ui) {
+    let $mmenuEl;
+    if (this.enableMobileNav) {
+      const $drawerEl = this.buildMobileDrawerElement();
+      this.refs.$br.append($drawerEl);
+
+      // Render info into mobile info before mmenu
+      this.buildInfoDiv(this.$('.BRmobileInfo'));
+      this.buildShareDiv(this.$('.BRmobileShare'));
+
+      $mmenuEl = $drawerEl;
+      $mmenuEl.mmenu({
+        navbars: [
+          { "position": "top" },
+        ],
+        navbar: {
+          add: true,
+          title: this.mobileNavTitle,
+          titleLink: 'panel'
+        },
+        extensions: [ "panelshadow" ],
+      }, {
+        offCanvas: {
+          wrapPageIfNeeded: false,
+          zposition: 'next',
+          pageSelector: this.el,
+        }
+      });
+
+      const $BRpageviewField = $mmenuEl.find('.BRpageviewValue');
+      $mmenuEl.data('mmenu').bind('opened', () => {
+        // Update "Link to this page view" link
+        if ($BRpageviewField.length) {
+          $BRpageviewField.val(window.location.href);
+        }
+      });
+
+      //apply filters when checkboxs clicked
+      $drawerEl.find('.BRcheckbox-filters').click(() => applyFilters($drawerEl, this));
+
+      // Bind mobile switch buttons
+      $drawerEl.find('.DrawerLayoutButton.one_page_mode').click(
+        () => this.switchMode(this.constMode1up));
+      $drawerEl.find('.DrawerLayoutButton.two_page_mode').click(
+        () => this.switchMode(this.constMode2up));
+      $drawerEl.find('.DrawerLayoutButton.thumbnail_mode').click(
+        () => this.switchMode(this.constModeThumb));
+
+      if (this.mobileNavFullscreenOnly) {
+        $(document.body).addClass('BRbodyMobileNavEnabledFullscreen');
+      } else {
+        $(document.body).addClass('BRbodyMobileNavEnabled');
+      }
+
+      this.refs.$mmenu = $mmenuEl;
+
+    }
+
+    // Call the parent method at the end, because it binds events to DOM
+    super_.apply(this, arguments);
+
+
+    if (this.enableMobileNav) {
+      // Need to bind more, console after toolbar is initialized
+      this.$('.BRmobileHamburger').click(() => {
+        if ($mmenuEl.data('mmenu').getInstance().vars.opened) {
+          $mmenuEl.data('mmenu').close();
+        } else {
+          $mmenuEl.data('mmenu').open();
+          this.trigger("mobileNavOpen");
+        }
+      });
+
+
+      const closeMobileMenu = (e) => {
+        // Need to close the mobile menu to reset DOM & Style
+        // driven by menu plugin
+        const width = $( window ).width();
+        const mobileMenuIsOpen = $mmenuEl.data('mmenu').getInstance().vars.opened;
+        // $brBreakPointMobile: 800px;
+        if (mobileMenuIsOpen && (width >= 800)) {
+          $mmenuEl.data('mmenu').close ();
+        }
+      };
+
+      window.addEventListener('resize', utils.debounce(closeMobileMenu, 900));
+    }
+  };
+})(BookReader.prototype.initToolbar);
+
+
+BookReader.prototype.buildToolbarElement = (function (super_) {
+  return function () {
+    const $el = super_.call(this);
+    if (this.enableMobileNav) {
+      const escapedTitle = BookReader.util.escapeHTML(this.bookTitle);
+      const toolbar = `
+        <span class="BRmobileHamburgerWrapper">
+          <button class="BRmobileHamburger"></button>
+          <span class="BRtoolbarMobileTitle" title="${escapedTitle}">${escapedTitle}</span>
+        </span>
+      `;
+      $el
+        .addClass('responsive')
+        .prepend($(toolbar));
+    }
+    return $el;
+  };
+})(BookReader.prototype.buildToolbarElement);
+
+/**
+ * This method builds the html for the mobile drawer. It can be decorated to
+ * extend the default drawer.
+ * @return {jqueryElement}
+ */
+BookReader.prototype.buildMobileDrawerElement = function() {
+  let experimentalHtml = '';
+  //builds filters checkbox html
+  if (this.enableExperimentalControls) {
+    experimentalHtml = `
+        <p class="DrawerSettingsTitle">Visual Adjustment</p>
+        <div class="BRcheckbox-group-filters">
+        `;
+    FILTERLIST.forEach( (el, i) => {
+      const checkboxHtml = `
+          <input type="checkbox" class="BRcheckbox-filters" id="filter${i}">
+          <label for="filter${i}" class="BRcheckbox-label-filters">${el.label}</label><br>
+        
+      `;
+      experimentalHtml = experimentalHtml.concat(checkboxHtml);
+    });
+    experimentalHtml = experimentalHtml.concat("</div>");
+  }
+
+
+  const settingsSection = `
+    <span>
+        <span class="DrawerIconWrapper">
+          <img class="DrawerIcon" src="${`${this.imagesBaseURL}icon_gear.svg`}" alt="settings-icon"/>
+        </span>
+        Settings
+    </span>
+    <div class=DrawerSettingsWrapper>
+        <div class="DrawerSettingsLayoutWrapper">
+          <button class="DrawerLayoutButton one_page_mode">
+            <img src="${this.imagesBaseURL}icon_one_page.svg" alt="Single Page"/>
+            <br>
+            One Page
+          </button>
+          <button class="DrawerLayoutButton two_page_mode TwoPagesButton">
+            <img src="${this.imagesBaseURL}icon_two_pages.svg" alt="Two Pages"/>
+            <br>
+            Two Pages
+          </button>
+          <button class="DrawerLayoutButton thumbnail_mode">
+            <img src="${this.imagesBaseURL}icon_thumbnails.svg" alt="Thumbnails"/>
+            <br>
+            Thumbnails
+          </button>
+        </div>
+        <br>
+        <div class="DrawerSettingsTitle">Zoom</div>
+        <button class='BRicon zoom_out'></button>
+        <button class='BRicon zoom_in'></button>
+        <br style="clear:both"><br><br>
+        ${experimentalHtml}
+    </div>
+  `;
+  const moreInfo = `
+    <span>
+        <span class="DrawerIconWrapper ">
+            <img class="DrawerIcon" src="${this.imagesBaseURL}icon_info.svg" alt="info-icon"/>
+        </span>
+        About This Book
+    </span>
+    <div class="BRmobileInfo"></div>
+  `;
+  const share = `
+    <span>
+      <span class="DrawerIconWrapper">
+        <img class="DrawerIcon" src="${this.imagesBaseURL}icon_share.svg" alt="info-share"/>
+      </span>
+      Share This Book
+    </span>
+    <div class="BRmobileShare"></div>
+  `;
+  const navMenu = `
+    <nav id="BRmobileMenu" class="BRmobileMenu">
+      <ul>
+        <li class="BRmobileMenu__settings">${settingsSection}</li>
+        <li class="BRmobileMenu__moreInfoRow">${moreInfo}</li>
+        <li class="BRmobileMenu__share">${share}</li>
+      </ul>
+    </nav>
+  `;
+
+  const $el = $(navMenu);
+  return $el;
+};
+
+/**
+ * Mmenu moves itself out side of the root BookReader element, so we need to
+ * include it in the scoped $ function.
+ */
+BookReader.prototype.$ = (function (super_) {
+  return function (arg) {
+    let $results = super_.call(this, arg);
+    if (this.refs.$mmenu) {
+      $results = $results.add(this.refs.$mmenu.find(arg));
+    }
+    return $results;
+  };
+})(BookReader.prototype.$);
+
+/**
+* Dynamically creates styles combining different filters for BookReaders imgs
+* based on filters checkbox
+*/
+const applyFilters = (drawerEl, br) => {
+  let filterStr = "";
+
+  $('.BRcheckbox-filters').each(
+    (i, el) => {
+      br.refs.$br.removeClass("filter-applied");
+      if ($(el).is(':checked')) {
+        br.refs.$br.addClass($(el).attr("filter-applied"));
+        filterStr = filterStr + FILTERLIST[i].filter;
+      }
+    }
+  );
+  const filtersSheet = $("#filtersStyle")[0] || document.createElement('style');
+  filtersSheet.id = "filtersStyle";
+  filtersSheet.innerHTML = `.BRpagecontainer  img {
+            filter: ${filterStr};
+            -webkit-filter: ${filterStr};}`;
+  document.body.appendChild(filtersSheet);
+};

package/src/plugins/plugin.resume.js

@@ -0,0 +1,68 @@
+import * as docCookies from '../util/docCookies.js';
+
+/* global BookReader */
+
+/** @deprecated Exposed for backward compatibility */
+BookReader.docCookies = docCookies;
+
+/**
+ * Plugin to remember the current page number in a cookie
+ */
+jQuery.extend(BookReader.defaultOptions, {
+  enablePageResume: true,
+  /** @type {string|null} eg '/', '/details/id' */
+  resumeCookiePath: null,
+});
+
+/** @override */
+BookReader.prototype.init = (function(super_) {
+  return function() {
+    super_.call(this);
+    if (this.options.enablePageResume) {
+      this.bind(BookReader.eventNames.fragmentChange, () => {
+        const params = this.paramsFromCurrent();
+        this.updateResumeValue(params.index);
+      });
+    }
+  };
+})(BookReader.prototype.init);
+
+/**
+ * Gets page resume value, for remembering reader's page
+ * Can be overridden for different implementation
+ *
+ * @return {number|null}
+ */
+BookReader.prototype.getResumeValue = function() {
+  const val = BookReader.docCookies.getItem('br-resume');
+  if (val !== null) return parseInt(val);
+  else return null;
+};
+
+/**
+ * Return cookie path using pathname up to /page/... or /mode/...
+ * using window.location.pathname for urlPathPart:
+ * - matches encoding
+ * - ignores querystring part
+ * - ignores fragment part (after #)
+ * @param {string} urlPathPart - window.location.pathname
+ */
+BookReader.prototype.getCookiePath = function(urlPathPart) {
+  return urlPathPart.match('.+?(?=/page/|/mode/|$)')[0];
+};
+
+/**
+ * Sets page resume value, for remembering reader's page
+ * Can be overridden for different implementation
+ *
+ * @param {Number} index leaf index
+ * @param {string} [cookieName]
+ */
+BookReader.prototype.updateResumeValue = function(index, cookieName) {
+  const ttl = new Date(+new Date + 12096e5); // 2 weeks
+  // For multiple files in item, leave resumeCookiePath blank
+  // It's likely we can remove resumeCookiePath using getCookiePath()
+  const path = this.options.resumeCookiePath
+    || this.getCookiePath(window.location.pathname);
+  BookReader.docCookies.setItem(cookieName || 'br-resume', index, ttl, path, null, false);
+};

package/src/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;