@internetarchive/bookreader 5.0.0-115 → 5.0.0-117

package/jsconfig.json

@@ -1,16 +1,15 @@
 {
   "compilerOptions": {
     "target": "es6",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "experimentalDecorators": true,
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }
   },
   "include": [
     "src/**/*.js",
-    "tests/**/*.js",
+    "tests/jest/**/*.js",
   ],
   "exclude": [
     "node_modules",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-115",
+  "version": "5.0.0-117",
   "description": "The Internet Archive BookReader.",
   "type": "module",
   "files": [
@@ -32,22 +32,23 @@
   "private": false,
   "dependencies": {
     "@internetarchive/bergamot-translator": "^0.4.9-ia.1",
-    "@internetarchive/ia-activity-indicator": "1.0.0",
-    "@internetarchive/ia-item-navigator": "2.2.3",
-    "@internetarchive/icon-bookmark": "1.4.1",
-    "@internetarchive/icon-close": "1.4.1",
-    "@internetarchive/icon-dl": "1.4.1",
-    "@internetarchive/icon-edit-pencil": "1.4.1",
-    "@internetarchive/icon-ia-logo": "1.4.1",
-    "@internetarchive/icon-magnify-minus": "1.4.1",
-    "@internetarchive/icon-magnify-plus": "1.4.1",
-    "@internetarchive/icon-search": "1.4.1",
-    "@internetarchive/icon-share": "1.4.1",
-    "@internetarchive/icon-toc": "1.4.1",
-    "@internetarchive/icon-visual-adjustment": "1.4.1",
-    "@internetarchive/modal-manager": "2.0.6",
-    "@internetarchive/shared-resize-observer": "0.2.0",
-    "interactjs": "^1.10.18",
+    "@internetarchive/ia-activity-indicator": "^1.0.0",
+    "@internetarchive/ia-item-navigator": "^2.2.3",
+    "@internetarchive/icon-bookmark": "^1.4.1",
+    "@internetarchive/icon-close": "^1.4.1",
+    "@internetarchive/icon-dl": "^1.4.1",
+    "@internetarchive/icon-edit-pencil": "^1.4.1",
+    "@internetarchive/icon-ellipses": "^1.4.1",
+    "@internetarchive/icon-ia-logo": "^1.4.1",
+    "@internetarchive/icon-magnify-minus": "^1.4.1",
+    "@internetarchive/icon-magnify-plus": "^1.4.1",
+    "@internetarchive/icon-search": "^1.4.1",
+    "@internetarchive/icon-share": "^1.4.1",
+    "@internetarchive/icon-toc": "^1.4.1",
+    "@internetarchive/icon-visual-adjustment": "^1.4.1",
+    "@internetarchive/modal-manager": "^2.0.6",
+    "@internetarchive/shared-resize-observer": "^0.2.0",
+    "interactjs": "1.10.18",
     "iso-language-codes": "2.0.0",
     "jquery": "3.6.1",
     "jquery-colorbox": "1.6.4",
@@ -67,27 +68,29 @@
     "@iiif/presentation-3": "2.2.3",
     "@open-wc/testing-helpers": "3.0.1",
     "@types/jest": "30.0.0",
-    "@webcomponents/webcomponentsjs": "^2.6.0",
+    "@webcomponents/webcomponentsjs": "2.6.0",
     "babel-loader": "10.1.1",
     "concurrently": "10.0.3",
     "core-js": "3.49.0",
     "cpx2": "9.0.0",
+    "css-loader": "7.1.4",
     "eslint": "7.32.0",
-    "eslint-plugin-no-jquery": "^2.7.0",
+    "eslint-plugin-no-jquery": "2.7.0",
     "eslint-plugin-testcafe": "0.2.1",
     "http-server": "14.1.1",
-    "hypothesis": "^1.1627.0",
+    "hypothesis": "1.1627.0",
     "jest": "30.4.2",
     "jest-environment-jsdom": "30.4.1",
     "live-server": "1.2.2",
     "regenerator-runtime": "0.14.1",
-    "sass": "1.100.0",
-    "sinon": "22.0.0",
-    "svgo": "4.0.1",
-    "testcafe": "3.7.4",
+    "sass": "1.101.5",
+    "sass-loader": "17.0.0",
+    "sinon": "22.1.0",
+    "svgo": "4.0.2",
+    "testcafe": "3.7.6",
     "testcafe-browser-provider-browserstack": "1.15.2",
-    "webpack": "5.107.2",
-    "webpack-cli": "7.0.3"
+    "webpack": "5.108.4",
+    "webpack-cli": "7.2.1"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -95,7 +98,8 @@
       "node_modules/(?!(sinon|lit-html|lit-element|lit|@lit|@lit-labs|@internetarchive|@open-wc)/)"
     ],
     "moduleNameMapper": {
-      "^@/(.*)$": "<rootDir>/$1"
+      "@/(.*)$": "<rootDir>/$1",
+      "\\.scss$": "<rootDir>/tests/jest/styleMock.js"
     },
     "setupFiles": [
       "./src/jquery-wrapper.js",
@@ -132,14 +136,17 @@
     "test:e2e": "npm run build && npx testcafe",
     "test:e2e:dev": "npx testcafe --live --dev",
     "DOCS:update:test-deps": "If CI succeeds, these should be good to update",
-    "update:test-deps": "npm i @babel/eslint-parser@latest @open-wc/testing-helpers@latest @types/jest@latest eslint@7 eslint-plugin-testcafe@latest jest@latest jest-environment-jsdom@latest sinon@latest testcafe@latest",
+    "update:test-deps": "npm i @babel/eslint-parser@latest @open-wc/testing-helpers@latest @types/jest@latest eslint@7 eslint-plugin-no-jquery@latest eslint-plugin-testcafe@latest jest@latest jest-environment-jsdom@latest sinon@latest testcafe@latest",
     "update:test-deps:test": "npm run lint && npm run test && npm run test:e2e",
     "DOCS:update:build-deps": "These can cause strange changes, so do an npm run build + check file size (git diff --stat), and check the site is as expected",
-    "update:build-deps": "npm i @babel/core@latest @babel/preset-env@latest @babel/plugin-proposal-class-properties@latest @babel/plugin-proposal-decorators@latest babel-loader@latest core-js@latest regenerator-runtime@latest sass@latest svgo@latest webpack@latest webpack-cli@latest",
+    "update:build-deps": "npm i @babel/core@latest @babel/preset-env@latest @babel/plugin-proposal-class-properties@latest @babel/plugin-proposal-decorators@latest babel-loader@latest core-js@latest css-loader@latest regenerator-runtime@latest sass@latest sass-loader@latest svgo@latest webpack@latest webpack-cli@latest",
     "update:build-deps:test": "npm run build",
     "DOCS:update:dev-deps": "Packages used for development",
-    "update:dev-deps": "npm i @iiif/presentation-2@latest @iiif/presentation-3@latest concurrently@latest cpx2@latest http-server@latest live-server@latest",
+    "update:dev-deps": "npm i @iiif/presentation-2@latest @iiif/presentation-3@latest concurrently@latest cpx2@latest http-server@latest hypothesis@latest live-server@latest testcafe-browser-provider-browserstack@latest",
+    "DOCS:update:runtime-deps": "Core runtime dependencies; do an npm run build + visual check after updating",
+    "update:runtime-deps": "npm i @webcomponents/webcomponentsjs@latest interactjs@latest iso-language-codes@latest jquery@latest jquery-colorbox@latest jquery-ui@latest jquery-ui-touch-punch@latest jquery.browser@latest lit@latest soundmanager2@latest",
+    "update:runtime-deps:test": "npm run build",
     "DOCS:update:ia-deps": "Packages by @internetarchive",
-    "update:ia-deps": "npm i @internetarchive/ia-activity-indicator@latest @internetarchive/ia-item-navigator@latest @internetarchive/icon-bookmark@latest @internetarchive/icon-close@latest @internetarchive/icon-dl@latest @internetarchive/icon-edit-pencil@latest @internetarchive/icon-ia-logo@latest @internetarchive/icon-magnify-minus@latest @internetarchive/icon-magnify-plus@latest @internetarchive/icon-search@latest @internetarchive/icon-share@latest @internetarchive/icon-toc@latest @internetarchive/icon-visual-adjustment@latest @internetarchive/modal-manager@latest @internetarchive/shared-resize-observer@latest"
+    "update:ia-deps": "npm i @internetarchive/bergamot-translator@latest @internetarchive/ia-activity-indicator@latest @internetarchive/ia-item-navigator@latest @internetarchive/icon-bookmark@latest @internetarchive/icon-close@latest @internetarchive/icon-dl@latest @internetarchive/icon-edit-pencil@latest @internetarchive/icon-ellipses@latest @internetarchive/icon-ia-logo@latest @internetarchive/icon-magnify-minus@latest @internetarchive/icon-magnify-plus@latest @internetarchive/icon-search@latest @internetarchive/icon-share@latest @internetarchive/icon-toc@latest @internetarchive/icon-visual-adjustment@latest @internetarchive/modal-manager@latest @internetarchive/shared-resize-observer@latest"
   }
 }

package/src/BookReader.js

@@ -26,6 +26,7 @@ import 'jquery-ui-touch-punch';
 
 import PACKAGE_JSON from '../package.json';
 import * as utils from './BookReader/utils.js';
+import { singleScrollIntoView } from './util/dom.js';
 import { exposeOverrideable } from './BookReader/utils/classes.js';
 import { Navbar } from './BookReader/Navbar/Navbar.js';
 import { DEFAULT_OPTIONS, OptionsParseError } from './BookReader/options.js';
@@ -41,7 +42,6 @@ import { ModeThumb } from './BookReader/ModeThumb.js';
 import { ImageCache } from './BookReader/ImageCache.js';
 import { PageContainer } from './BookReader/PageContainer.js';
 import { NAMED_REDUCE_SETS } from './BookReader/ReduceSet.js';
-import {BookReaderTextFragment} from './util/TextSelectionManager.js';
 
 /**
  * BookReader
@@ -112,6 +112,8 @@ BookReader.PLUGINS = {
   chapters: null,
   /** @type {typeof import('./plugins/plugin.experiments.js').ExperimentsPlugin | null}*/
   experiments: null,
+  /** @type {typeof import('./plugins/plugin.iframe.js').IframePlugin | null}*/
+  iframe: null,
   /** @type {typeof import('./plugins/plugin.resume.js').ResumePlugin | null}*/
   resume: null,
   /** @type {typeof import('./plugins/search/plugin.search.js').SearchPlugin | null}*/
@@ -156,6 +158,7 @@ BookReader.optionOverrides = BookReader.optionOverrides || {};
 /**
  * Setup
  * It is separate from the constructor, so plugins can extend.
+ * @constructor
  * @param {BookReaderOptions} options
  */
 BookReader.prototype.setup = function(options) {
@@ -181,6 +184,7 @@ BookReader.prototype.setup = function(options) {
     autoplay: BookReader.PLUGINS.autoplay ? new BookReader.PLUGINS.autoplay(this) : null,
     chapters: BookReader.PLUGINS.chapters ? new BookReader.PLUGINS.chapters(this) : null,
     experiments: BookReader.PLUGINS.experiments ? new BookReader.PLUGINS.experiments(this) : null,
+    iframe: BookReader.PLUGINS.iframe ? new BookReader.PLUGINS.iframe(this) : null,
     search: BookReader.PLUGINS.search ? new BookReader.PLUGINS.search(this) : null,
     resume: BookReader.PLUGINS.resume ? new BookReader.PLUGINS.resume(this) : null,
     textSelection: BookReader.PLUGINS.textSelection ? new BookReader.PLUGINS.textSelection(this) : null,
@@ -645,6 +649,7 @@ BookReader.prototype.init = function() {
   this.pageScale = this.reduce; // preserve current reduce
 
   const params = this.initParams();
+  this.urlPlugin?.pullFromAddressBar();
   this.firstIndex = params.index ? params.index : 0;
 
   // Setup Navbars and other UI
@@ -1030,6 +1035,18 @@ BookReader.prototype.resizeBRcontainer = function(animate) {
   }
 };
 
+/**
+ * Scrolls the given element into view within the active mode's scroll container.
+ * @param {Element} el
+ * @param {object} [options]
+ * @param {'auto' | 'smooth'} [options.behavior]
+ * @param {'start' | 'center' | 'end' | 'nearest'} [options.block]
+ * @param {'start' | 'center' | 'end' | 'nearest'} [options.inline]
+ */
+BookReader.prototype.scrollIntoView = function(el, options) {
+  singleScrollIntoView(el, { ...options, scrollContainer: this.activeMode.scrollContainer });
+};
+
 BookReader.prototype.centerPageView = function() {
   const scrollWidth  = this.refs.$brContainer.prop('scrollWidth');
   const clientWidth  =  this.refs.$brContainer.prop('clientWidth');
@@ -1960,6 +1977,10 @@ BookReader.prototype.queryStringFromParams = function(
 ) {
   const newParams = new URLSearchParams(currQueryString);
 
+  // Never write back UI-only params that are consumed on load
+  // TODO: Should ideally stick around until next URL change
+  newParams.delete('focus');
+
   if (params.view) {
     // Set ?view=theater when fullscreen
     newParams.set('view', params.view);
@@ -1972,25 +1993,8 @@ BookReader.prototype.queryStringFromParams = function(
     newParams.set('q', params.search);
   }
 
-  /** @type {BookReaderTextFragment | null} */
-  let textFragmentParam = null;
-  // Need to pull out text separately to avoid the spaces becoming encoded as +, which
-  // the browser seems not to handle with the text fragment
-  if (newParams.get('text')) {
-    newParams.delete('text');
-    textFragmentParam = BookReaderTextFragment.fromUrl(currQueryString, this.book, this.firstIndex);
-  }
-
-  // https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/toString
-  // Note: This method returns the query string without the question mark.
-  let result = newParams.toString();
-  if (textFragmentParam) {
-    if (result) result += '&';
-    result += `text=${textFragmentParam.toUrlString()}`;
-  }
-  if (result) result = '?' + result;
-
-  return result;
+  const result = newParams.toString();
+  return result ? `?${result}` : '';
 };
 
 /**

package/src/css/_TextSelection.scss

@@ -145,16 +145,29 @@
     display: none;
 }
 
+
+$select-menu-radius: 25px;
+$select-menu-extended-radius: 10px;
 .br-select-menu__root {
   display: none;
-  border-radius: 20px;
-  background-color: #333;
   color: white;
   color-scheme: dark;
   padding: 2px;
   overflow: hidden;
   opacity: 1;
-  transition: border-radius 0.2s, opacity 0.2s;
+  transition: opacity 0.2s;
+  gap: 5px;
+
+  &[open] {
+    display: flex;
+  }
+
+  &[showextended] {
+    display: block;
+    gap: 0px;
+    background-color: #333;
+    border-radius: $select-menu-extended-radius;
+  }
 
   @starting-style {
     opacity: 0;
@@ -164,13 +177,6 @@
   opacity: 0;
   pointer-events: none;
 }
-.br-select-menu__root:hover {
-  border-radius: 8px;
-}
-
-.br-select-menu__root:hover .br-select-menu__option {
-  border-radius: 6px;
-}
 
 .br-select-menu__option {
   --iconWidth: 15px;
@@ -179,18 +185,40 @@
   background: transparent;
   display: flex;
   align-items: center;
-  border-radius: 20px;
+  border-radius: $select-menu-radius;
   font-family: inherit;
   color: inherit;
   border: 0;
-  transition: background-color 0.2s, border-radius 0.2s;
   cursor: pointer;
   text-wrap: nowrap;
-  padding: 4px;
-}
+  background-color: #333;
+  position: relative;
 
-.br-select-menu__option:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  @media (pointer: coarse) and (hover: none) {
+    padding: 4px 8px;
+    #br-select-more & {
+        padding: 4px;
+    }
+  }
+
+  &:hover:after {
+    position: absolute;
+    left: 2px;
+    right: 2px;
+    top: 2px;
+    bottom: 2px;
+    content: "";
+    pointer-events: none;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: calc($select-menu-radius - 2px);
+  }
+
+  .br-select-menu__root[showextended] & {
+      width:100%;
+      &:hover:after {
+        border-radius: calc($select-menu-extended-radius - 2px);
+      }
+  }
 }
 
 .br-select-menu__icon {
@@ -198,24 +226,29 @@
   flex-shrink: 0;
   width: 17px;
   height: 17px;
+  padding: 2px;
 }
 
 .br-select-menu__label {
   margin-left: 4px;
   font-size: 12px;
+  margin-right: 4px;
 }
 
 @media (hover: hover) {
+    .br-select-menu__option {
+        padding: 4px;
+    }
     .br-select-menu__label {
         width: 0px;
-        margin-left: 0;
+        margin: 0;
         opacity: 0;
         interpolate-size: allow-keywords;
         transition: width 0.2s;
     }
     .br-select-menu__root:hover .br-select-menu__label {
         width: auto;
-        margin-left: 4px;
+        margin: 0 4px;
         opacity: 1;
     }
 }

package/src/plugins/plugin.chapters.js

@@ -7,6 +7,7 @@ import '@internetarchive/icon-toc/icon-toc.js';
 import { BookReaderPlugin } from "../BookReaderPlugin.js";
 import { applyVariables } from "../util/strings.js";
 import { promisifyEvent } from "../BookReader/utils.js";
+import { singleScrollIntoView } from "../util/dom.js";
 /** @typedef {import('@/src/BookReader/BookModel.js').PageIndex} PageIndex */
 /** @typedef {import('@/src/BookReader/BookModel.js').PageString} PageString */
 /** @typedef {import('@/src/BookReader/BookModel.js').LeafNum} LeafNum */
@@ -323,10 +324,13 @@ export class BRChaptersPanel extends LitElement {
 
   updated(changedProperties) {
     if (changedProperties.has('currentChapter')) {
-      this.shadowRoot.querySelector('li.current')?.scrollIntoView({
-        block: 'nearest',
-        behavior: 'smooth',
-      });
+      const currentEl = this.shadowRoot.querySelector('li.current');
+      if (currentEl) {
+        singleScrollIntoView(currentEl, {
+          block: 'nearest',
+          behavior: 'smooth',
+        });
+      }
     }
   }
 

package/src/plugins/plugin.iframe.js

@@ -1,48 +1,47 @@
-/* global BookReader */
-/**
- * Plugin for two-way communication between a BookReader in an IFrame and the
- * parent web page
- */
+// @ts-check
+import { EVENTS } from '../BookReader/events.js';
+import { BookReaderPlugin } from '../BookReaderPlugin.js';
 
 const MESSAGE_TYPE_FRAGMENT_CHANGE = 'bookReaderFragmentChange';
 
-BookReader.prototype.init = (function (super_) {
-  return function () {
-    super_.call(this);
-    _attachEventListeners(this);
-  };
-})(BookReader.prototype.init);
-
 /**
- * @private
- * Using window.postMessage() and event listeners, the plugin notifies the
- * parent window when pages change, and the parent window can also
- * explicitly request a page change by sending its own message.
- *
- * @param {BookReader} br
- * @param {Window?} [parent]
+ * Plugin for two-way communication between a BookReader in an IFrame and the
+ * parent web page. Using window.postMessage() and event listeners, the
+ * plugin notifies the parent window when pages change, and the parent
+ * window can also explicitly request a page change by sending its own
+ * message.
  */
-export function _attachEventListeners(br, parent = window.parent) {
-  // Not embedded, abort
-  if (!parent) {
-    return;
+export class IframePlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
   }
 
-  br.bind(BookReader.eventNames.fragmentChange, () => {
-    const fragment = br.fragmentFromParams(br.paramsFromCurrent());
-
-    parent.postMessage(
-      { type: MESSAGE_TYPE_FRAGMENT_CHANGE, fragment },
-      '*',
-    );
-  });
-
-  window.addEventListener('message', event => {
-    // Not a recognized message type, abort
-    if (!event.data || event.data.type !== MESSAGE_TYPE_FRAGMENT_CHANGE) {
+  /** @override */
+  init() {
+    // Not enabled, or not embedded, abort
+    if (!this.options.enabled || !window.parent) {
       return;
     }
 
-    br.updateFromParams(br.paramsFromFragment(event.data.fragment));
-  });
+    this.br.bind(EVENTS.fragmentChange, () => {
+      const fragment = this.br.fragmentFromParams(this.br.paramsFromCurrent());
+
+      window.parent.postMessage(
+        { type: MESSAGE_TYPE_FRAGMENT_CHANGE, fragment },
+        '*',
+      );
+    });
+
+    window.addEventListener('message', event => {
+      // Not a recognized message type, abort
+      if (!event.data || event.data.type !== MESSAGE_TYPE_FRAGMENT_CHANGE) {
+        return;
+      }
+
+      this.br.updateFromParams(this.br.paramsFromFragment(event.data.fragment));
+    });
+  }
 }
+
+const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
+BookReader?.registerPlugin('iframe', IframePlugin);