@internetarchive/bookreader 5.0.0-95 → 5.0.0-96

package/src/BookReader/utils.js

@@ -0,0 +1,313 @@
+/**
+ * Bind mouse handlers
+ * Disable mouse click to avoid selected/highlighted page images
+ * @param {JQuery} jObject
+ */
+export function disableSelect(jObject) {
+  // $$$ check here for right-click and don't disable.  Also use jQuery style
+  //     for stopping propagation. See https://bugs.edge.launchpad.net/gnubook/+bug/362626
+  jObject.bind('mousedown', () => false);
+  // Special hack for IE7
+  jObject[0].onselectstart = () => false;
+}
+
+/**
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ * @return {number}
+ */
+export function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * Given value and maximum, calculate a percentage suitable for CSS
+ * @param {number} value
+ * @param {number} max
+ * @return {string}
+ */
+export function cssPercentage(value, max) {
+  return ((value / max) * 100) + '%';
+}
+
+/**
+ * @param {*} value
+ * @param {Array} array
+ * @return {boolean}
+ */
+export function notInArray(value, array) {
+  return !array.includes(value);
+}
+
+/**
+ * Determines the active element, going into shadow doms.
+ * @return {Element}
+ */
+export function getActiveElement(doc = document, recurseShadowDom = true) {
+  const activeElement = doc.activeElement;
+  if (recurseShadowDom && activeElement?.shadowRoot) {
+    return getActiveElement(activeElement.shadowRoot, true);
+  }
+  return activeElement;
+}
+
+/** Check if an input field/textarea is active. Also checks shadow DOMs. */
+export function isInputActive(doc = document) {
+  const activeEl = getActiveElement(doc);
+  return activeEl?.tagName == "INPUT" || activeEl?.tagName == "TEXTAREA";
+}
+
+/**
+ * @param {HTMLIFrameElement} iframe
+ * @return {Document}
+ */
+export function getIFrameDocument(iframe) {
+// Adapted from http://xkr.us/articles/dom/iframe-document/
+  const outer = iframe.contentWindow || iframe.contentDocument;
+  return outer.document || outer;
+}
+
+/**
+ * @param {string} str
+ * @return {string}
+ */
+export function escapeHTML(str) {
+  return str.replace(/&/g,'&')
+    .replace(/>/g,'>')
+    .replace(/</g,'&lt;')
+    .replace(/"/g,'&quot;');
+}
+
+/**
+ * Decodes a URI component and converts '+' to ' '
+ * @param {string} value
+ * @return {string}
+ */
+export function decodeURIComponentPlus(value) {
+  return decodeURIComponent(value).replace(/\+/g, ' ');
+}
+
+/**
+ * Encodes a URI component and converts ' ' to '+'
+ * @param {string|number|boolean} value
+ * @return {string};
+ */
+export function encodeURIComponentPlus(value) {
+  return encodeURIComponent(value).replace(/%20/g, '+');
+}
+
+/**
+ * @template {Function} T
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing.
+ * @see https://davidwalsh.name/javascript-debounce-function
+ *
+ * @param {T} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {T}
+ */
+export function debounce(func, wait, immediate) {
+  let timeout;
+  return function() {
+    const context = this;
+    const args = arguments;
+    const later = () => {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
+
+/**
+ * @template T
+ * Throttle function
+ * @see https://remysharp.com/2010/07/21/throttling-function-calls
+ * @param {T} fn
+ * @param {number} threshold
+ * @param {boolean} delay
+ * @return {T}
+ */
+export function throttle(fn, threshold, delay) {
+  threshold || (threshold = 250);
+  let last;
+  let deferTimer;
+  if (delay) last = +new Date;
+  return function () {
+    const context = this;
+    const now = +new Date;
+    const args = arguments;
+    if (last && now < last + threshold) {
+      // hold on to it
+      clearTimeout(deferTimer);
+      deferTimer = setTimeout(() => {
+        last = now;
+        fn.apply(context, args);
+      }, threshold);
+    } else {
+      last = now;
+      fn.apply(context, args);
+    }
+  };
+}
+
+/**
+ * FIXME we need a better way to do this :/ This is not automatically poly-filled by
+ * core-js https://github.com/zloirock/core-js/issues/354
+ * @param {Window} window
+ */
+export function polyfillCustomEvent(window) {
+  if (typeof window.CustomEvent === "function") return false;
+  window.CustomEvent = PolyfilledCustomEvent;
+}
+
+/**
+ * https://caniuse.com/customevent has issues on older browsers where it can't be
+ * called as a constructor, so we have to use older methods.
+ * @param {String} eventName
+ * @return {CustomEvent}
+ */
+export function PolyfilledCustomEvent(eventName, {bubbles = false, cancelable = false, detail = null} = {}) {
+  const event = document.createEvent('CustomEvent');
+  event.initCustomEvent(eventName, bubbles, cancelable, detail);
+  return event;
+}
+
+/*
+ * Returns the number pixels something should be rendered at to be ~1n on the users
+ * screen when measured with a ruler.
+ */
+export function calcScreenDPI() {
+  const el = document.createElement('div');
+  el.style.width = '1in';
+  document.body.appendChild(el);
+  const dpi = el.offsetWidth;
+  document.body.removeChild(el);
+
+  // Do you believe in magic... numbers? We tested on some devices, and the displayed
+  // size of `width: 1in` was less than desired. On @pezvi's mac, it was ~75% ; on
+  // @cdrini's laptop it was ~85%. Since we want to avoid things appearing too small,
+  // let's just use a multiplier of 1.25
+  const screenDPI = dpi * 1.25;
+  // This will return 0 in testing; never want it to be 0!
+  return screenDPI == 0 ? 100 : screenDPI;
+}
+
+/**
+ * @param {number[]} nums
+ * @returns {number}
+ */
+export function sum(nums) {
+  return nums.reduce((cur, acc) => cur + acc, 0);
+}
+
+/**
+ * @template T
+ * @param {Generator<T>} gen
+ * @returns {T[]}
+ */
+export function genToArray(gen) {
+  const result = [];
+  for (const item of gen) {
+    result.push(item);
+  }
+  return result;
+}
+
+/**
+ * Check if arrays contain the same elements. Does reference comparison.
+ * @param {Array} arr1
+ * @param {Array} arr2
+ */
+export function arrEquals(arr1, arr2) {
+  return arr1.length == arr2.length && arr1.every((x, i) => x == arr2[i]);
+}
+
+/**
+ * Check if array has changed; namely to be used with lit's property.hasChanged
+ * @param {Array} [arr1]
+ * @param {Array} [arr2]
+ */
+export function arrChanged(arr1, arr2) {
+  return arr1 && arr2 && !arrEquals(arr1, arr2);
+}
+
+/**
+ * Waits the provided number of ms and then resolves with a promise
+ * @param {number} ms
+ **/
+export async function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * @template T
+ * @param {function(): T} fn
+ * @param {Object} options
+ * @param {function(T): boolean} [options.until]
+ * @return {T | undefined}
+ */
+export async function poll(fn, { step = 50, timeout = 500, until = val => Boolean(val), _sleep = sleep } = {}) {
+  const startTime = Date.now();
+  while (Date.now() - startTime < timeout) {
+    const result = fn();
+    if (until(result)) return result;
+    await _sleep(step);
+  }
+}
+
+/**
+ * Convert a EventTarget style event into a promise
+ * @param {EventTarget} target
+ * @param {string} eventType
+ * @return {Promise<Event>}
+ */
+export function promisifyEvent(target, eventType) {
+  return new Promise(res => {
+    const resolver = ev => {
+      target.removeEventListener(eventType, resolver);
+      res(ev);
+    };
+    target.addEventListener(eventType, resolver);
+  });
+}
+
+/**
+ * Escapes regex special characters in a string. Allows for safe usage in regexes.
+ * Src: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions
+ * @param {string} string
+ * @returns {string}
+ */
+export function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+}
+
+/**
+ * @param {number | 'fast' | 'slow' | string} speed
+ * Parsing of the jquery animation speed; see https://api.jquery.com/animate/
+ */
+export function parseAnimationSpeed(speed) {
+  if (speed === 'slow') return 600;
+  if (speed === 'fast') return 200;
+  return parseInt(speed, 10);
+}
+
+/**
+ * @template T
+ * @param {T[]} array
+ * @param {function(T): number} [valueFn]
+ */
+export function sortBy(array, valueFn) {
+  return array.sort((a, b) => {
+    const aValue = valueFn ? valueFn(a) : a;
+    const bValue = valueFn ? valueFn(b) : b;
+    return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
+  });
+}

package/.eslintrc.cjs

@@ -1,51 +0,0 @@
-module.exports = {
-  "parser": "@babel/eslint-parser",
-  "env": {
-    "browser": true,
-    "jquery": true,
-    "es6": true,
-    "node": true,
-    "jest": true,
-  },
-  "plugins": [
-    "testcafe",
-    "no-jquery",
-  ],
-  "extends": [
-    "eslint:recommended",
-    "plugin:testcafe/recommended",
-    "plugin:no-jquery/deprecated",
-  ],
-  "globals": {
-    // Browser API
-    "MediaMetadata": "readonly",
-  },
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "ecmaFeatures": { "legacyDecorators": true },
-    "sourceType": "module",
-  },
-  "rules": {
-    "comma-dangle": ["error", "always-multiline", {"functions": "only-multiline"}],
-    "semi": ["error", "always"],
-    "space-before-blocks": ["error"],
-    "keyword-spacing": [2, {"before": true, "after": true}],
-    "indent": ["error", 2, {
-      // This for some reason causing errors after switch to parser: babel-eslint.
-      // See https://github.com/babel/babel-eslint/issues/681
-      "ignoredNodes": ["TemplateLiteral"],
-    }],
-    "no-console": "off", // Used too often behind `debug` options; not dealing with this now
-    "no-empty": ["error", { "allowEmptyCatch": true }],
-    "no-jquery/no-bind": ["error"],
-    "no-jquery/no-event-shorthand": ["error"],
-    "no-jquery/no-sizzle": ["error"],
-    "no-jquery/no-trim": ["error"],
-    "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"],
-  },
-};

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,102 +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:
-  install:
-    runs-on: ubuntu-latest
-
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        # Keep in sync with netlify.toml
-        node-version: 20.x
-    - name: Cache node_modules
-      uses: actions/cache@v4
-      id: cache
-      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-20-${{ hashFiles('package*.json') }}
-    - if: steps.cache.outputs.cache-hit != 'true'
-      run: npm install
-
-  build:
-    needs: install
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-    - name: Load node_modules from cache
-      uses: actions/cache@v4
-      with:
-        # Use node_modules from previous jobs
-        path: 'node_modules'
-        key: ${{ runner.os }}-node-20-${{ hashFiles('package*.json') }}
-    - name: Cache BookReader/
-      uses: actions/cache@v4
-      id: build-cache
-      with:
-        # Cache the build files so we don't have to build twice for e2e tests
-        path: 'BookReader'
-        key: ${{ runner.os }}-${{ github.sha }}
-    - if: steps.build-cache.outputs.cache-hit != 'true'
-      run: npm run build
-
-  tests:
-    needs: install
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-    - name: Load node_modules from cache
-      uses: actions/cache@v4
-      with:
-        # Use node_modules from previous jobs
-        path: 'node_modules'
-        key: ${{ runner.os }}-node-20-${{ hashFiles('package*.json') }}
-    - run: npm run lint
-    - run: npm run test
-    - uses: codecov/codecov-action@v4
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-    
-  e2e-tests:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-    - name: Load node_modules from cache
-      uses: actions/cache@v4
-      with:
-        # Use node_modules from previous jobs
-        path: 'node_modules'
-        key: ${{ runner.os }}-node-20-${{ hashFiles('package*.json') }}
-    - name: Load BookReader/ from cache
-      uses: actions/cache@v4
-      with:
-        # Cache the build files so we don't have to build twice for e2e tests
-        path: 'BookReader'
-        key: ${{ runner.os }}-${{ github.sha }}
-    # 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: npx testcafe --concurrency 2 --quarantine-mode

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

@@ -1,23 +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://docs.github.com/en/actions/use-cases-and-examples/publishing-packages/publishing-nodejs-packages
-
-name: Node.js Package
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  publish-npm:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm run build
-      - run: npm publish --tag next
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.testcaferc.cjs

@@ -1,10 +0,0 @@
-// @ts-check
-/** @type {TestCafeConfigurationOptions} */
-module.exports = {
-  appCommand: "npm run serve",
-  browsers: [
-    "chrome:headless",
-    "firefox:headless",
-  ],
-  src: ["tests/e2e/**/*test.js"]
-};

package/BookReaderDemo/BookReaderDemo.css

@@ -1,40 +0,0 @@
-/*
- * Custom overrides for BookReader Demo.
- */
-html {
-    /** This must be set because the nav menu uses rem and sets the fonts really big? */
-    font-size: 10px;
-    font-family: sans-serif;
-}
-
-body {
-    font-size: 16px;
-    background-color: #939598;
-    margin: 0px;
-}
-
-/* Hide print and embed functionality */
-.BRtoolbar .embed, .print {
-    display: none;
-}
-
-body.BRfullscreenActive section.theater {
-    height: 100vh;
-}
-ia-bookreader[fullscreen] {
-    height: unset;
-}
-
-ia-bookreader{
-    --br-height: calc(100vh - 100px);
-    display: block;
-    height: var(--br-height);
-}
-
-.BookReader {
-    --br-height: calc(100vh - 100px);
-    --new-height: calc(var(--br-height) - 20px); 
-    height: var(--br-height);
-    overflow: hidden;
-    margin: 0 auto;
-}