@internetarchive/bookreader 5.0.0-24-sortingstate-final → 5.0.0-27

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# 5.0.0-27
+Dev: eslint fix for $.browser @homewardgamer
+Fix: cache search inside requests @iisa
+# 5.0.0-26
+Fix: read aloud play/pause button @nsharma123
+Dev: strict keyboard shortcuts @mc2
+Dev: update IA demo page @iisa
+
 # 5.0.0-24
 Fix: book-nav side panel zoom out @mc2
 Dev: refactor zoom code @mc2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-24-sortingstate-final",
+  "version": "5.0.0-27",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",

package/src/BookNavigator/bookmarks/ia-bookmarks.js

@@ -463,6 +463,7 @@ class IABookmarks extends LitElement {
     return html`
       <button
         class="ia-button primary"
+        tabindex="-1"
         ?disabled=${this.shouldEnableAddBookmarkButton}
         @click=${this.addBookmark}>
         Add bookmark

package/src/BookNavigator/volumes/volumes-provider.js

@@ -7,16 +7,8 @@ import volumesIcon from '../assets/icon_volumes.js';
 
 import './volumes.js';
 
-const sortType = {
-  title_asc: 'title_asc',
-  title_desc: 'title_desc',
-  default: 'default'
-};
 export default class VolumesProvider {
 
-  /**
-   * @param {import('../../BookReader').default} bookreader
-   */
   constructor(baseHost, bookreader, optionChange) {
     this.optionChange = optionChange;
     this.component = document.createElement("viewable-files");
@@ -25,9 +17,6 @@ export default class VolumesProvider {
     this.viewableFiles = Object.keys(files).map(item => files[item]);
     this.volumeCount = Object.keys(files).length;
 
-    /** @type {import('../../BookReader').default} */
-    this.bookreader = bookreader;
-
     this.component.subPrefix = bookreader.options.subPrefix || "";
     this.component.hostUrl = baseHost;
     this.component.viewableFiles = this.viewableFiles;
@@ -36,30 +25,20 @@ export default class VolumesProvider {
     this.label = `Viewable files (${this.volumeCount})`;
     this.icon = html`${volumesIcon}`;
 
-    this.sortOrderBy = sortType.default;
-
-    // get sort state from query param
-    if (this.bookreader.urlPlugin) {
-      this.bookreader.urlPlugin.pullFromAddressBar();
-
-      const urlSortValue = this.bookreader.urlPlugin.getUrlParam('sort');
-      if (urlSortValue === sortType.title_asc || urlSortValue === sortType.title_desc) {
-        this.sortOrderBy = urlSortValue;
-      }
-    }
-    this.sortVolumes(this.sortOrderBy);
+    this.sortOrderBy = "orig_sort";
+    this.sortVolumes("orig_sort");
   }
 
   get sortButton() {
     const sortIcons = {
-      default: html`
+      orig_sort: html`
         <button class="sort-by neutral-icon" aria-label="Sort volumes in initial order" @click=${() => this.sortVolumes("title_asc")}>${sortNeutralIcon}</button>
       `,
       title_asc: html`
         <button class="sort-by asc-icon" aria-label="Sort volumes in ascending order" @click=${() => this.sortVolumes("title_desc")}>${sortAscIcon}</button>
       `,
       title_desc: html`
-        <button class="sort-by desc-icon" aria-label="Sort volumes in descending order" @click=${() => this.sortVolumes("default")}>${sortDescIcon}</button>
+        <button class="sort-by desc-icon" aria-label="Sort volumes in descending order" @click=${() => this.sortVolumes("orig_sort")}>${sortDescIcon}</button>
       `,
     };
 
@@ -67,37 +46,28 @@ export default class VolumesProvider {
   }
 
   /**
-   * @param {'default' | 'title_asc' | 'title_desc'} sortByType
+   * @param {'orig_sort' | 'title_asc' | 'title_desc'} sortByType
    */
   sortVolumes(sortByType) {
     let sortedFiles = [];
 
     const files = this.viewableFiles;
     sortedFiles = files.sort((a, b) => {
-      if (sortByType === sortType.title_asc) return a.title.localeCompare(b.title);
-      else if (sortByType === sortType.title_desc) return b.title.localeCompare(a.title);
-      else return a.orig_sort - b.orig_sort;
+      if (sortByType === 'orig_sort') return a.orig_sort - b.orig_sort;
+      else if (sortByType === 'title_asc') return a.title.localeCompare(b.title);
+      else return b.title.localeCompare(a.title);
     });
 
     this.sortOrderBy = sortByType;
     this.component.viewableFiles  = [...sortedFiles];
     this.actionButton = this.sortButton;
-
-    if (this.bookreader.urlPlugin) {
-      if (this.sortOrderBy !== sortType.default) {
-        this.bookreader.urlPlugin.setUrlParam('sort', sortByType);
-      } else {
-        this.bookreader.urlPlugin.removeUrlParam('sort');
-      }
-    }
-
     this.optionChange(this.bookreader);
 
     this.multipleFilesClicked(sortByType);
   }
 
   /**
-   * @param {'default' | 'title_asc' | 'title_desc'} orderBy
+   * @param {'orig_sort' | 'title_asc' | 'title_desc'} orderBy
    */
   multipleFilesClicked(orderBy) {
     if (!window.archive_analytics) {

package/src/BookReader.js

@@ -264,6 +264,15 @@ BookReader.prototype.setup = function(options) {
     useSrcSet: this.options.useSrcSet,
     reduceSet: this.reduceSet,
   });
+
+  /**
+   * Flag if BookReader has "focus" for keyboard shortcuts
+   * Initially true, set to false when:
+   * - BookReader scrolled out of view
+   * Set to true when:
+   * - BookReader scrolled into view
+   */
+  this.hasKeyFocus = true;
 };
 
 /**
@@ -662,87 +671,116 @@ BookReader.prototype.resize = function() {
 };
 
 /**
- * Binds keyboard event listeners
+ * Binds keyboard and keyboard focus event listeners
  */
-BookReader.prototype.setupKeyListeners = function() {
-  var self = this;
+BookReader.prototype.setupKeyListeners = function () {
 
-  var KEY_PGUP = 33;
-  var KEY_PGDOWN = 34;
-  var KEY_END = 35;
-  var KEY_HOME = 36;
-
-  var KEY_LEFT = 37;
-  var KEY_UP = 38;
-  var KEY_RIGHT = 39;
-  var KEY_DOWN = 40;
-  // The minus(-) and equal(=) keys have different mappings for different browsers
-  var KEY_MINUS = 189; // Chrome
-  var KEY_MINUS_F = 173; // Firefox
-  var KEY_NUMPAD_SUBTRACT = 109;
-  var KEY_EQUAL = 187; // Chrome
-  var KEY_EQUAL_F = 61; // Firefox
-  var KEY_NUMPAD_ADD = 107;
-
-  // We use document here instead of window to avoid a bug in jQuery on IE7
-  $(document).on("keydown", function(e) {
-
-    // Keyboard navigation
-    switch (e.keyCode) {
-    case KEY_PGUP:
-    case KEY_UP:
-      // In 1up mode page scrolling is handled by browser
-      if (!utils.isInputActive() && self.constMode2up == self.mode) {
-        e.preventDefault();
-        self.prev();
-      }
+  // Keyboard focus by BookReader in viewport
+  //
+  // Intersection observer and callback sets BookReader keyboard
+  // "focus" flag off when the BookReader is not in the viewport.
+  if (window.IntersectionObserver) {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.intersectionRatio === 0) {
+          this.hasKeyFocus = false;
+        } else {
+          this.hasKeyFocus = true;
+        }
+      });
+    }, {
+      root: null,
+      rootMargin: '0px',
+      threshold: [0, 0.05, 1],
+    });
+    observer.observe(this.refs.$br[0]);
+  }
+
+  // Keyboard listeners
+  document.addEventListener('keydown', (e) => {
+
+    // Ignore if BookReader "focus" flag not set
+    if (!this.hasKeyFocus) {
+      return;
+    }
+
+    // Ignore if modifiers are active.
+    if (e.getModifierState('Control') ||
+      e.getModifierState('Alt') ||
+      e.getModifierState('Meta') ||
+      e.getModifierState('Win') /* hack for IE */) {
+      return;
+    }
+
+    // Ignore in input elements
+    if (utils.isInputActive()) {
+      return;
+    }
+
+    // KeyboardEvent code values:
+    //   https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values
+    switch (e.key) {
+
+    // Page navigation
+    case "Home":
+      e.preventDefault();
+      this.first();
       break;
-    case KEY_DOWN:
-    case KEY_PGDOWN:
-      if (!utils.isInputActive() && self.constMode2up == self.mode) {
-        e.preventDefault();
-        self.next();
-      }
+    case "End":
+      e.preventDefault();
+      this.last();
       break;
-    case KEY_END:
-      if (!utils.isInputActive()) {
+    case "ArrowDown":
+    case "PageDown":
+    case "Down": // hack for IE and old Gecko
+      // In 1up and thumb mode page scrolling handled by browser
+      if (this.constMode2up === this.mode) {
         e.preventDefault();
-        self.last();
+        this.next();
       }
       break;
-    case KEY_HOME:
-      if (!utils.isInputActive()) {
+    case "ArrowUp":
+    case "PageUp":
+    case "Up": // hack for IE and old Gecko
+      // In 1up and thumb mode page scrolling handled by browser
+      if (this.constMode2up === this.mode) {
         e.preventDefault();
-        self.first();
+        this.prev();
       }
       break;
-    case KEY_LEFT:
-      if (!utils.isInputActive() && self.constModeThumb != self.mode) {
+    case "ArrowLeft":
+    case "Left": // hack for IE and old Gecko
+      // No y-scrolling in thumb mode
+      if (this.constModeThumb != this.mode) {
         e.preventDefault();
-        self.left();
+        this.left();
       }
       break;
-    case KEY_RIGHT:
-      if (!utils.isInputActive() && self.constModeThumb != self.mode) {
+    case "ArrowRight":
+    case "Right": // hack for IE and old Gecko
+      // No y-scrolling in thumb mode
+      if (this.constModeThumb != this.mode) {
         e.preventDefault();
-        self.right();
+        this.right();
       }
       break;
-    case KEY_MINUS:
-    case KEY_MINUS_F:
-    case KEY_NUMPAD_SUBTRACT:
-      if (!utils.isInputActive()) {
-        e.preventDefault();
-        self.zoom(-1);
-      }
+    // Zoom
+    case '-':
+    case 'Subtract':
+      e.preventDefault();
+      this.zoom(-1);
       break;
-    case KEY_EQUAL:
-    case KEY_EQUAL_F:
-    case KEY_NUMPAD_ADD:
-      if (!utils.isInputActive()) {
-        e.preventDefault();
-        self.zoom(+1);
-      }
+    case '+':
+    case '=':
+    case 'Add':
+      e.preventDefault();
+      this.zoom(1);
+      break;
+    // Fullscreen
+    case 'F':
+    case 'f':
+      e.preventDefault();
+      this.toggleFullscreen();
       break;
     }
   });

package/src/plugins/plugin.url.js

@@ -50,7 +50,7 @@ BookReader.prototype.init = (function(super_) {
       this.bind(BookReader.eventNames.PostInit, () => {
         const { updateWindowTitle, urlMode } = this.options;
         if (updateWindowTitle) {
-          document.title = this.shortTitle(this.bookTitle, 50);
+          document.title = this.shortTitle(50);
         }
         if (urlMode === 'hash') {
           this.urlStartLocationPolling();
@@ -86,7 +86,7 @@ BookReader.prototype.urlStartLocationPolling = function() {
   this.oldLocationHash = this.urlReadFragment();
 
   if (this.locationPollId) {
-    clearInterval(this.locationPollId);
+    clearInterval(this.locationPollID);
     this.locationPollId = null;
   }
 
@@ -196,209 +196,3 @@ BookReader.prototype.urlReadFragment = function() {
 BookReader.prototype.urlReadHashFragment = function() {
   return window.location.hash.substr(1);
 };
-export class UrlPlugin {
-  constructor(options = {}) {
-    this.bookReaderOptions = options;
-
-    // the canonical order of elements is important in the path and query string
-    this.urlSchema = [
-      { name: 'page', position: 'path', default: 'n0' },
-      { name: 'mode', position: 'path', default: '2up' },
-      { name: 'search', position: 'path', deprecated_for: 'q' },
-      { name: 'q', position: 'query_param' },
-      { name: 'sort', position: 'query_param' },
-      { name: 'view', position: 'query_param' },
-      { name: 'admin', position: 'query_param' },
-    ];
-
-    this.urlState = {};
-    this.urlMode = this.bookReaderOptions.urlMode || 'hash';
-    this.urlHistoryBasePath = this.bookReaderOptions.urlHistoryBasePath ||  '/';
-    this.urlLocationPollId = null;
-    this.oldLocationHash = null;
-    this.oldUserHash = null;
-  }
-
-  /**
-   * Parse JSON object URL state to string format
-   * Arrange path names in an order that it is positioned on the urlSchema
-   * @param {Object} urlState
-   * @returns {string}
-   */
-  urlStateToUrlString(urlState) {
-    const searchParams = new URLSearchParams();
-    const pathParams = {};
-
-    Object.keys(urlState).forEach(key => {
-      let schema = this.urlSchema.find(schema => schema.name === key);
-      if (schema?.deprecated_for) {
-        schema = this.urlSchema.find(schemaKey => schemaKey.name === schema.deprecated_for);
-      }
-      if (schema?.position == 'path') {
-        pathParams[schema?.name] = urlState[key];
-      } else {
-        searchParams.append(schema?.name || key, urlState[key]);
-      }
-    });
-
-    const strPathParams = this.urlSchema
-      .filter(s => s.position == 'path')
-      .map(schema => pathParams[schema.name] ? `${schema.name}/${pathParams[schema.name]}` : '')
-      .join('/');
-
-    const strStrippedTrailingSlash = `${strPathParams.replace(/\/$/, '')}`;
-    const concatenatedPath = `${strStrippedTrailingSlash}?${searchParams.toString()}`;
-    return searchParams.toString() ? concatenatedPath : `${strStrippedTrailingSlash}`;
-  }
-
-  /**
-   * Parse string URL and add it in the current urlState
-   * Example:
-   *  /page/n7/mode/2up => {page: 'n7', mode: '2up'}
-   *  /page/n7/mode/2up/search/hello => {page: 'n7', mode: '2up', q: 'hello'}
-   * @param {string} urlString
-   * @returns {object}
-   */
-  urlStringToUrlState(urlString) {
-    const urlState = {};
-
-    // Fetch searchParams from given {str}
-    // Note: whole URL path is needed for URL parsing
-    const urlPath = new URL(urlString, 'http://example.com');
-    const urlSearchParamsObj = Object.fromEntries(urlPath.searchParams.entries());
-    const urlStrSplitSlashObj = Object.fromEntries(urlPath.pathname
-      .match(/[^\\/]+\/[^\\/]+/g)
-      .map(x => x.split('/'))
-    );
-    const doesKeyExists = (_object, _key) => {
-      return Object.keys(_object).some(value => value == _key);
-    };
-
-    // Add path objects to urlState
-    this.urlSchema
-      .filter(schema => schema.position == 'path')
-      .forEach(schema => {
-        if (!urlStrSplitSlashObj[schema.name] && schema.default) {
-          return urlState[schema.name] = schema.default;
-        }
-        const hasPropertyKey = doesKeyExists(urlStrSplitSlashObj, schema.name);
-        const hasDeprecatedKey = doesKeyExists(schema, 'deprecated_for') && hasPropertyKey;
-
-        if (hasDeprecatedKey) {
-          urlState[schema.deprecated_for] = urlStrSplitSlashObj[schema.name];
-          return;
-        }
-
-        if (hasPropertyKey) {
-          urlState[schema.name] = urlStrSplitSlashObj[schema.name];
-          return;
-        }
-      });
-
-    // Add searchParams to urlState
-    Object.entries(urlSearchParamsObj).forEach(([key, value]) => {
-      urlState[key] = value;
-    });
-
-    return urlState;
-  }
-
-  /**
-   * Add or update key-value to the urlState
-   * @param {string} key
-   * @param {string} val
-   */
-  setUrlParam(key, value) {
-    this.urlState[key] = value;
-
-    this.pushToAddressBar();
-  }
-
-  /**
-   * Delete key-value to the urlState
-   * @param {string} key
-   */
-  removeUrlParam(key) {
-    delete this.urlState[key];
-
-    this.pushToAddressBar();
-  }
-
-  /**
-   * Get key-value from the urlState
-   * @param {string} key
-   * @return {string}
-   */
-  getUrlParam(key) {
-    return this.urlState[key];
-  }
-
-  /**
-   * Push URL params to addressbar
-   */
-  pushToAddressBar() {
-    const urlStrPath = this.urlStateToUrlString(this.urlState);
-    if (this.urlMode == 'history') {
-      if (window.history && window.history.replaceState) {
-        const newUrlPath = `${this.urlHistoryBasePath}/${urlStrPath}`;
-        window.history.replaceState({}, null, newUrlPath);
-      }
-    } else {
-      window.location.replace('#' + urlStrPath);
-    }
-    this.oldLocationHash = urlStrPath;
-  }
-
-  /**
-   * Get the url and check if it has changed
-   * If it was changeed, update the urlState
-   */
-  listenForHashChanges() {
-    this.oldLocationHash = window.location.hash.substr(1);
-    if (this.urlLocationPollId) {
-      clearInterval(this.urlLocationPollId);
-      this.urlLocationPollId = null;
-    }
-
-    // check if the URL changes
-    const updateHash = () => {
-      const newFragment = window.location.hash.substr(1);
-      const hasFragmentChange = newFragment != this.oldLocationHash;
-
-      if (!hasFragmentChange) { return; }
-
-      this.urlState = this.urlStringToUrlState(newFragment);
-    };
-    this.urlLocationPollId = setInterval(updateHash, 500);
-  }
-
-  /**
-   * Will read either the hash or URL and return the bookreader fragment
-   */
-  pullFromAddressBar (location = window.location) {
-    const path = this.urlMode === 'history'
-      ? (location.pathname.substr(this.urlHistoryBasePath.length) + location.search)
-      : location.hash.substr(1);
-    this.urlState = this.urlStringToUrlState(path);
-  }
-}
-
-export class BookreaderUrlPlugin extends BookReader {
-  init() {
-    if (this.options.enableUrlPlugin) {
-      this.urlPlugin = new UrlPlugin(this.options);
-      this.bind(BookReader.eventNames.PostInit, () => {
-        const { urlMode } = this.options;
-
-        if (urlMode === 'hash') {
-          this.urlPlugin.listenForHashChanges();
-        }
-      });
-    }
-
-    super.init();
-  }
-}
-
-window.BookReader = BookreaderUrlPlugin;
-export default BookreaderUrlPlugin;

package/src/plugins/search/plugin.search.js

@@ -213,6 +213,7 @@ BookReader.prototype.search = function(term = '', overrides = {}) {
   return $.ajax({
     url: url,
     dataType: 'jsonp',
+    cache: true,
     beforeSend,
     jsonpCallback: 'BRSearchInProgress'
   }).then(processSearchResults);

package/src/plugins/tts/FestivalTTSEngine.js

@@ -23,7 +23,7 @@ export default class FestivalTTSEngine extends AbstractTTSEngine {
     // $.browsers is sometimes undefined on some Android browsers :/
     // Likely related to when $.browser was moved to npm
     /** @type {'mp3' | 'ogg'} format of audio to get */
-    this.audioFormat = $.browser?.mozilla ? 'ogg' : 'mp3';
+    this.audioFormat = $.browser?.mozilla ? 'ogg' : 'mp3'; //eslint-disable-line no-jquery/no-browser
   }
 
   /** @override */