@internetarchive/bookreader 5.0.0-10-alpha-3 → 5.0.0-101

package/src/util/TextSelectionManager.js

@@ -0,0 +1,282 @@
+// @ts-check
+import { SelectionObserver } from "../BookReader/utils/SelectionObserver.js";
+
+export class TextSelectionManager {
+  options = {
+    // Current Translation plugin implementation does not have words, will limit to one BRlineElement for now
+    maxProtectedWords: 200,
+  }
+
+  /**
+   * @param {string} layer Selector for the text layer to manage
+   * @param {import('../BookReader.js').default} br
+   * @param {Object} options
+   * @param {string[]} options.selectionElement CSS selector for elements that count as "words" for selection limiting
+   * @param {number} [maxWords] Maximum number of words allowed to be selected
+   */
+  constructor (layer, br, { selectionElement }, maxWords) {
+    /** @type {string} */
+    this.layer = layer;
+    /** @type {import('../BookReader.js').default} */
+    this.br = br;
+    /** @type {string[]} */
+    this.selectionElement = selectionElement;
+    this.selectionObserver = new SelectionObserver(this.layer, this._onSelectionChange);
+    this.options.maxProtectedWords = maxWords ? maxWords : 200;
+  }
+
+  init() {
+    this.attach();
+    new SelectionObserver(this.layer, (selectEvent) => {
+      // Track how often selection is used
+      if (selectEvent == 'started') {
+        this.br.plugins.archiveAnalytics?.sendEvent('BookReader', 'SelectStart');
+
+        // Set a class on the page to avoid hiding it when zooming/etc
+        this.br.refs.$br.find('.BRpagecontainer--hasSelection').removeClass('BRpagecontainer--hasSelection');
+        $(window.getSelection().anchorNode).closest('.BRpagecontainer').addClass('BRpagecontainer--hasSelection');
+      }
+    }).attach();
+  }
+
+  // Need attach + detach methods to toggle w/ Translation plugin
+  attach() {
+    this.selectionObserver.attach();
+    if (this.br.protected) {
+      document.addEventListener('selectionchange', this._limitSelection);
+      // Prevent right clicking when selected text
+      $(document.body).on('contextmenu dragstart copy', (e) => {
+        const selection = document.getSelection();
+        if (selection?.toString()) {
+          const intersectsTextLayer = $(this.layer)
+            .toArray()
+            .some(el => selection.containsNode(el, true));
+          if (intersectsTextLayer) {
+            e.preventDefault();
+            return false;
+          }
+        }
+      });
+    }
+  }
+
+  detach() {
+    this.selectionObserver.detach();
+    if (this.br.protected) {
+      document.removeEventListener('selectionchange', this._limitSelection);
+    }
+  }
+
+  /**
+   * @param {'started' | 'cleared'} type
+   * @param {HTMLElement} target
+   */
+  _onSelectionChange = (type, target) => {
+    if (type === 'started') {
+      this.textSelectingMode(target);
+    } else if (type === 'cleared') {
+      this.defaultMode(target);
+    } else {
+      throw new Error(`Unknown type ${type}`);
+    }
+  }
+
+  /**
+   * 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();
+    });
+  }
+
+  /**
+   * Initializes text selection modes if there is a text layer on the page
+   * @param {JQuery} $container
+   */
+  stopPageFlip($container) {
+    /** @type {JQuery<HTMLElement>} */
+    const $textLayer = $container.find(this.layer);
+    if (!$textLayer.length) return;
+    $textLayer.each((i, s) => this.defaultMode(s));
+    if (!this.br.protected) {
+      this.interceptCopy($container);
+    }
+  }
+
+  /**
+   * Applies mouse events when in default mode
+   * @param {HTMLElement} textLayer
+   */
+  defaultMode (textLayer) {
+    const $pageContainer = $(textLayer).closest('.BRpagecontainer');
+    textLayer.style.pointerEvents = "none";
+    $pageContainer.find("img").css("pointer-events", "auto");
+
+    $(textLayer).off(".textSelectPluginHandler");
+    const startedMouseDown = this.mouseIsDown;
+    let skipNextMouseup = this.mouseIsDown;
+    if (startedMouseDown) {
+      textLayer.style.pointerEvents = "auto";
+    }
+
+    // Need to stop propagation to prevent DragScrollable from
+    // blocking selection
+    $(textLayer).on("mousedown.textSelectPluginHandler", (event) => {
+      this.mouseIsDown = true;
+      if ($(event.target).is(this.selectionElement.join(", "))) {
+        event.stopPropagation();
+      }
+    });
+
+    $(textLayer).on("mouseup.textSelectPluginHandler", (event) => {
+      this.mouseIsDown = false;
+      textLayer.style.pointerEvents = "none";
+      if (skipNextMouseup) {
+        skipNextMouseup = false;
+        event.stopPropagation();
+      }
+    });
+  }
+
+  /**
+   * This mode is active while there is a selection on the given textLayer
+   * @param {HTMLElement} textLayer
+   */
+  textSelectingMode(textLayer) {
+    const $pageContainer = $(textLayer).closest('.BRpagecontainer');
+    // Make text layer consume all events
+    textLayer.style.pointerEvents = "all";
+    // Block img from getting long-press to save while selecting
+    $pageContainer.find("img").css("pointer-events", "none");
+
+    $(textLayer).off(".textSelectPluginHandler");
+
+    $(textLayer).on("mousedown.textSelectPluginHandler", (event) => {
+      this.mouseIsDown = true;
+      event.stopPropagation();
+    });
+
+    // Prevent page flip on click
+    $(textLayer).on('mouseup.textSelectPluginHandler', (event) => {
+      this.mouseIsDown = false;
+      event.stopPropagation();
+    });
+  }
+
+
+  _limitSelection = () => {
+    const selection = window.getSelection();
+    if (!selection.rangeCount) return;
+
+    const range = selection.getRangeAt(0);
+
+    // Check if range.startContainer is inside the sub-tree of .BRContainer
+    const startInBr = !!range.startContainer.parentElement.closest('.BRcontainer');
+    const endInBr = !!range.endContainer.parentElement.closest('.BRcontainer');
+    if (!startInBr && !endInBr) return;
+    if (!startInBr || !endInBr) {
+      // weird case, just clear the selection
+      selection.removeAllRanges();
+      return;
+    }
+
+    // Find the last allowed word in the selection
+    const lastAllowedWord = genAt(
+      genFilter(
+        walkBetweenNodes(range.startContainer, range.endContainer),
+        (node) => node.classList?.contains(
+          this.selectionElement[0].replace(".", ""),
+        ),
+      ),
+      this.options.maxProtectedWords - 1,
+    );
+
+    if (!lastAllowedWord || range.endContainer.parentNode == lastAllowedWord) return;
+
+    const newRange = document.createRange();
+    newRange.setStart(range.startContainer, range.startOffset);
+    newRange.setEnd(lastAllowedWord.firstChild, lastAllowedWord.textContent.length);
+
+    selection.removeAllRanges();
+    selection.addRange(newRange);
+  };
+}
+
+/**
+ * @template T
+ * Get the i-th element of an iterable
+ * @param {Iterable<T>} iterable
+ * @param {number} index
+ */
+export function genAt(iterable, index) {
+  let i = 0;
+  for (const x of iterable) {
+    if (i == index) {
+      return x;
+    }
+    i++;
+  }
+  return undefined;
+}
+
+/**
+ * @template T
+ * Generator version of filter
+ * @param {Iterable<T>} iterable
+ * @param {function(T): boolean} fn
+ */
+export function* genFilter(iterable, fn) {
+  for (const x of iterable) {
+    if (fn(x)) yield x;
+  }
+}
+
+/**
+ * Depth traverse the DOM tree starting at `start`, and ending at `end`.
+ * @param {Node} start
+ * @param {Node} end
+ * @returns {Generator<Node>}
+ */
+export function* walkBetweenNodes(start, end) {
+  let done = false;
+
+  /**
+   * @param {Node} node
+   */
+  function* walk(node, {children = true, parents = true, siblings = true} = {}) {
+    if (node === end) {
+      done = true;
+      yield node;
+      return;
+    }
+
+    // yield self
+    yield node;
+
+    // First iterate children (depth-first traversal)
+    if (children && node.firstChild) {
+      yield* walk(node.firstChild, {children: true, parents: false, siblings: true});
+      if (done) return;
+    }
+
+    // Then iterate siblings
+    if (siblings) {
+      for (let sib = node.nextSibling; sib; sib = sib.nextSibling) {
+        yield* walk(sib, {children: true, parents: false, siblings: false});
+        if (done) return;
+      }
+    }
+
+    // Finally, move up the tree
+    if (parents && node.parentNode) {
+      yield* walk(node.parentNode, {children: false, parents: true, siblings: true});
+      if (done) return;
+    }
+  }
+
+  yield* walk(start);
+}

package/src/util/browserSniffing.js

@@ -7,7 +7,17 @@
  * @return {boolean}
  */
 export function isChrome(userAgent = navigator.userAgent, vendor = navigator.vendor) {
-  return /chrome/i.test(userAgent) && /google inc/i.test(vendor);
+  return /chrome/i.test(userAgent) && /google inc/i.test(vendor) && !isEdge(userAgent);
+}
+
+/**
+ * Checks whether the current browser is a Edge browser
+ * See https://learn.microsoft.com/en-us/microsoft-edge/web-platform/user-agent-guidance
+ * @param {string} [userAgent]
+ * @return {boolean}
+ */
+export function isEdge(userAgent = navigator.userAgent) {
+  return /chrome/i.test(userAgent) && /\bEdg(e|A|iOS)?\b/i.test(userAgent);
 }
 
 /**
@@ -28,3 +38,25 @@ export function isFirefox(userAgent = navigator.userAgent) {
 export function isSafari(userAgent = navigator.userAgent) {
   return /safari/i.test(userAgent) && !/chrome|chromium/i.test(userAgent);
 }
+
+/**
+ * Checks whether the current browser is iOS (and hence iOS webkit)
+ * @return {boolean}
+ */
+export function isIOS() {
+  // We can't just check the userAgent because as of iOS 13,
+  // the userAgent is the same as desktop Safari because
+  // they wanted iPad's to be served the same version of websites
+  // as desktops.
+  return 'ongesturestart' in window && navigator.maxTouchPoints > 0;
+}
+
+/**
+ * Checks whether the current browser is Samsung Internet
+ * https://stackoverflow.com/a/40684162/2317712
+ * @param {string} [userAgent]
+ * @return {boolean}
+ */
+export function isSamsungInternet(userAgent = navigator.userAgent) {
+  return /SamsungBrowser/i.test(userAgent);
+}

package/src/util/cache.js

@@ -0,0 +1,20 @@
+/**
+ * @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);
+  }
+}

package/src/util/docCookies.js

@@ -9,6 +9,22 @@
  *  http://www.gnu.org/licenses/gpl-3.0-standalone.html
  */
 
+/**
+ * Check to see if the browser has cookies enabled.
+ * Accessing document.cookies errors if eg iframe with sandbox enabled.
+ * @returns {boolean}
+ */
+export function areCookiesBlocked(doc = document) {
+  try {
+    doc.cookie;
+    return false;
+  } catch (e) {
+    return true;
+  }
+}
+
+const COOKIES_BLOCKED = areCookiesBlocked();
+
 /**
  * Get specific key's value stored in cookie
  *
@@ -17,7 +33,7 @@
  * @returns {string|null}
  */
 export function getItem(sKey) {
-  if (!sKey) return null;
+  if (COOKIES_BLOCKED || !sKey) return null;
 
   return decodeURIComponent(
     // eslint-disable-next-line no-useless-escape
@@ -34,9 +50,11 @@ export function getItem(sKey) {
  * @param {string} [sDomain] domain name
  * @param {boolean} [bSecure]
  *
- * @returns {true}
+ * @returns {boolean}
  */
 export function setItem(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
+  if (COOKIES_BLOCKED) return false;
+
   document.cookie = encodeURIComponent(sKey) + '=' + encodeURIComponent(sValue)
   + (vEnd ? `; expires=${vEnd.toUTCString()}` : '')
   + (sDomain ? `; domain=${sDomain}` : '')
@@ -56,6 +74,7 @@ export function setItem(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
  * @returns {boolean}
  */
 export function removeItem(sKey, sPath, sDomain) {
+  if (COOKIES_BLOCKED) return false;
   // eslint-disable-next-line
   if (!hasItem(sKey)) return false;
 

package/src/util/strings.js

@@ -9,6 +9,7 @@
  * @param {StringWithVars|String} template
  * @param { {[varName: string]: { toString: () => string} } } vars
  * @param { {[varName: string]: { toString: () => string} } } [overrides]
+ * @returns {StringWithVars|string}
  */
 export function applyVariables(template, vars, overrides = {}, possibleFilters = APPLY_FILTERS) {
   return template?.replace(/\{\{([^}]*?)\}\}/g, ($0, $1) => {

package/.babelrc

@@ -1,12 +0,0 @@
-{
-    "presets": [
-        [
-            "@babel/preset-env",
-            {
-                "targets": "> 2%, ie 11, edge 14, samsung > 9, OperaMini all, UCAndroid > 12",
-                "useBuiltIns": "usage",
-                "corejs": 3
-            }
-        ]
-    ]
-}

package/.dependabot/config.yml

@@ -1,6 +0,0 @@
-version: 1
-
-update_configs:
-  - package_manager: "javascript"
-    directory: "/"
-    update_schedule: "monthly"

package/.eslintrc.js

@@ -1,50 +0,0 @@
-module.exports = {
-  "env": {
-    "browser": true,
-    "jquery": true,
-    "es6": true,
-    "node": true,
-    "jest": true
-  },
-  "plugins": [
-    "testcafe"
-  ],
-  "extends": [
-    "eslint:recommended",
-    "plugin:testcafe/recommended"
-  ],
-  "globals": {
-    // Browser API
-    "MediaMetadata": "readonly"
-  },
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "sourceType": "module"
-  },
-  "rules": {
-    "comma-dangle": ["error", "only-multiline"],
-    "semi": ["error", "always"],
-    "space-before-blocks": ["error"],
-    "keyword-spacing": [2, {"before": true, "after": true}],
-    "indent": ["error", 2],
-    "no-console": "off", // Used too often behind `debug` options; not dealing with this now
-    "no-empty": ["error", { "allowEmptyCatch": true }],
-    "no-trailing-spaces": ["error"],
-    "no-unused-vars": ["error", { "vars": "all", "args": "none", "ignoreRestSiblings": false }], // set args:none; this is generally more annoying than useful
-    "no-var": ["error"],
-    "prefer-const": ["error"],
-    "space-infix-ops": ["error", { "int32Hint": false }],
-    "eol-last": ["error", "always"]
-  },
-  "overrides": [
-    { // TODO; these should be cleaned up as well
-      "files": [
-        "src/BookReader.js",
-        "src/dragscrollable-br.js"
-      ],
-      "rules": {
-        "no-var": ["off"],
-      }
-    },
-  ],
-};

package/.gitattributes

@@ -1,2 +0,0 @@
-# Build files
-BookReader/**/* binary

package/.github/ISSUE_TEMPLATE/bug.md

@@ -1,32 +0,0 @@
----
-name: Bug
-about: A general problem with website functionality
-title: ''
-labels: Bug
-assignees: ''
-
----
-
-**Description**
-
-> What problem are we solving? What does the experience look like today? What are the symptoms? How can one reproduce the problem?
-
-**Evidence / Screenshot (if possible)**
-
-> Include evidence of the problem or provide a screenshot.
-
-**Expectation**
-
-> What should be happening? What will it look like / how will it behave when fixed?
-
-**Context**
-
-> What operating system? What browser type and version?
-
-**Proposal & Constraints**
-
-> What is the proposed solution / implementation? Is there a precedent of this approach succeeding elsewhere?
-
-**Stakeholders**
-
-> @-tag any stakeholders of this bug

package/.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,30 +0,0 @@
----
-name: Feature Request
-about: A request for an entirely new feature
-title: ''
-labels: Feature Request
-assignees: ''
-
----
-
-**Context**
-
-> Is your feature request related to a problem? What is the motivation for implementing this feature?
-
-**Proposal & Constraints**
-
-> What is the proposed solution / implementation? Is there a precedent for this approach succeeding elsewhere?
-
-> Which suggestions or requirements should be considered for how this feature needs to appear or be implemented?
-
-**Additional Resources**
-
-> Add any other screenshots or assets related to the feature request.
-
-**Success Metrics**
-
-> How will you know if this change is successful? What specific metrics are relevant and how do you expect them to change?
-
-**Stakeholders**
-
-> @-tag stakeholders of this feature

package/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md

@@ -1,15 +0,0 @@
-**Description**
-
-> What does this PR achieve? Is it a feature/bugfix/refactor? Does it close an Issue? If so, use `Closes #<issue number>`.
-
-**Technical**
-
-> What should be noted about the implementation?
-
-**Testing**
-
-> What steps should the reviewer take to verify this PR resolves the issue?
-
-**Screenshots/Videos**
-
-> Add a screenshot or video/GIF if the fix can be seen visually. This is helpful for reviewers to get context for the fix.

package/.github/workflows/node.js.yml

@@ -1,37 +0,0 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: Node.js CI
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
-      with:
-        node-version: 14.x
-    - uses: actions/cache@v2
-      with:
-        # Caching node_modules isn't recommended because it can break across
-        # Node versions and won't work with npm ci (See https://github.com/actions/cache/blob/main/examples.md#node---npm )
-        # But we pin the node version, and we don't update it that often anyways. And 
-        # we don't use `npm ci` specifically to try to get faster CI flows. So caching
-        # `node_modules` directly.
-        path: 'node_modules'
-        key: ${{ runner.os }}-node-${{ hashFiles('package*.json') }}
-    - run: npm install
-    - run: npm run build
-    - run: npm run lint
-    - run: npm run test
-    - run: npm run codecov
-    # Travis machines usually have 2 cores (see https://docs.travis-ci.com/user/reference/overview/#virtualisation-environment-vs-operating-system )
-    # Quarantine mode (sigh) to catch unstable tests (see https://devexpress.github.io/testcafe/documentation/guides/basic-guides/run-tests.html#quarantine-mode )
-    - run: BASE_URL=http://127.0.0.1:8000/BookReaderDemo/ npx testcafe --concurrency 2 --quarantine-mode

package/.github/workflows/npm-publish.yml

@@ -1,47 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Node.js Package
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 14
-      - run: npm ci
-      - run: npm test
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 14
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish --tag next
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-
-  publish-gpr:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 14
-          registry-url: https://npm.pkg.github.com/
-      - run: npm ci
-      - run: npm publish --tag next
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

package/.testcaferc.json

@@ -1,5 +0,0 @@
-{
-  "appCommand": "npm run serve",
-  "browsers": ["chrome:headless", "firefox:headless"],
-  "src": ["tests/e2e/**/*test.js"]
-}