npm - @internetarchive/bookreader - Versions diffs - 5.0.0-25-02 → 5.0.0-26 - Mend

@internetarchive/bookreader 5.0.0-25-02 → 5.0.0-26

Files changed (10) hide show

package/BookReader/BookReader.js +1 -1
package/BookReader/BookReader.js.map +1 -1
package/BookReader/bookreader-component-bundle.js +1 -1
package/BookReader/bookreader-component-bundle.js.map +1 -1
package/BookReaderDemo/demo-internetarchive.html +86 -4
package/CHANGELOG.md +5 -0
package/package.json +1 -1
package/src/BookNavigator/bookmarks/ia-bookmarks.js +1 -0
package/src/BookReader.js +102 -64
package/tests/jest/BookReader.keyboard.test.js +190 -0

package/BookReaderDemo/demo-internetarchive.html CHANGED Viewed

@@ -29,6 +29,10 @@
     <script type="module" src="../BookReader/bookreader-component-bundle.js"></script>
     <link rel="stylesheet" href="BookReaderDemo.css"/>
+    <!-- IA scripts -->
+    <script src="https://archive.org/bookreader/BookReaderJSIA.js"></script>
 </head>
 <body>
@@ -59,16 +63,94 @@
   <script id="pageUrl" type="text/javascript"></script>
   <script>
-    var ocaid = location.href.match(/ocaid=([^&#]+)/i)[1];
+    // gather params here
+    const urlParams = new URLSearchParams(window.location.search);
+    const ocaid = urlParams.get('ocaid');
+    const openFullImmersionTheater = urlParams.get('view') === 'theater';
+    const ui = urlParams.get('ui');
+    const autoflip = urlParams.get('autoflip');
+    const searchTerm = urlParams.get('q');
     // Override options coming from IA
     BookReader.optionOverrides.imagesBaseURL = '/BookReader/images/';
+    const initializeBookReader = (brManifest) => {
+      console.log('initializeBookReader', brManifest);
+      const br = new BookReader();
+      const iaBookManifestUrl = '';
+      const customAutoflipParams = {
+          autoflip: !!autoflip,
+          flipSpeed: urlParams.flipSpeed || 2000,
+          flipDelay: urlParams.flipDelay || 5000
+        };
+      const options = {
+        el: '#BookReader',
+        /* Url plugin - IA uses History mode for URL */
+        // commenting these out as demo uses hash mode
+        // keeping them here for reference
+        // urlHistoryBasePath: `/details/{$ocaid}/`,
+        // resumeCookiePath: `/details/{$ocaid}/`,
+        // urlMode: 'history',
+        // Only reflect these params onto the URL
+        // urlTrackedParams: ['page', 'search', 'mode'],
+        /* End url plugin */
+        enableBookTitleLink: false,
+        bookUrlText: null,
+        startFullscreen: urlParams.view === 'theater',
+        initialSearchTerm: searchTerm ? searchTerm : '',
+        // leaving this option commented out bc we change given user agent on archive.org
+        // onePage: { autofit: <?=json_encode($this->ios ? 'width' : 'auto')?> },
+        showToolbar: false,
+        /* Multiple volumes */
+        // To show multiple volumes:
+        enableMultipleBooks: false, // turn this on
+        multipleBooksList: [], // populate this  // TODO: get sample blob and tie into demo
+        /* End multiple volumes */
+      };
+      // we want to show item as embedded when ?ui=embed is in URI
+      if (ui === 'embed') {
+        options.mode = 1;
+        options.ui = 'embed';
+      }
+      // we expect this at the global level
+      BookReaderJSIAinit(brManifest.data, { ...options });
+      if (customAutoflipParams.autoflip) {
+        br.autoToggle(customAutoflipParams);
+      }
+    }
+    const fetchBookManifestAndInitializeBookreader = async (iaMetadata) => {
+      const {
+        metadata: {
+          identifier
+        },
+      } = iaMetadata;
+    const locator =`https://archive.org/bookreader/BookReaderJSLocate.php?format=json&subPrefix=&id=${identifier}`;
+      // Todo: move from `locator` to create `iaManifestUrl` url from `iaMetadata`
+      // so we can support multiple volumes
+      // const iaManifestUrl = `https://${server}/BookReader/BookReaderJSIA.php?format=jsonp&itemPath=${dir}&id=${identifier}`;
+      const manifest = await fetch(locator)
+      .then(response => response.json())
+      initializeBookReader(manifest);
+    }
     // Temp; Circumvent bug in BookReaderJSIA code
     window.Sentry = null;
-    var script_url = 'https://archive.org/bookreader/BookReaderJSLocate.php?subPrefix=&id=' + ocaid;
-    document.getElementById('pageUrl').src = script_url;
+    window.logError = function(e) {
+      console.error(e);
+    };
+    fetch(`https://archive.org/metadata/${ocaid}`)
+      .then(response => response.json())
+      .then(iaMetadata => fetchBookManifestAndInitializeBookreader(iaMetadata));
   </script>
 </body>

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,8 @@
+# 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-25-02",
+  "version": "5.0.0-26",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",

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

@@ -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/BookReader.js CHANGED Viewed

@@ -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/tests/jest/BookReader.keyboard.test.js ADDED Viewed

@@ -0,0 +1,190 @@
+import BookReader from '@/src/BookReader.js';
+import * as utils from '@/src/BookReader/utils.js';
+let br;
+beforeAll(() => {
+  document.body.innerHTML = '<div id="BookReader">';
+  br = new BookReader();
+});
+afterEach(() => {
+  jest.clearAllMocks();
+});
+/**
+ * Only run init() once. Otherwise multiple EventListeners will be added.
+ */
+test('Initialzation enables IntersectionObserver and defaults', () => {
+  const observe = jest.fn();
+  window.IntersectionObserver = jest.fn(() => ({
+    observe
+  }));
+  br.init();
+  expect(br.hasKeyFocus).toBe(true);
+  expect(observe).toHaveBeenCalledTimes(1);
+});
+describe('Keyboard shortcuts turned off', () => {
+  test('Focus flag disables', () => {
+    br.next = jest.fn();
+    br.hasKeyFocus = false;
+    const keyEvent = new KeyboardEvent('keydown', {'key': 'ArrowDown'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.next).toHaveBeenCalledTimes(0);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(0);
+    // Must reset for following tests
+    br.hasKeyFocus = true;
+  });
+  test('Input active disables', () => {
+    // eslint-disable-next-line no-import-assign
+    utils.isInputActive = jest.fn(() => true);
+    br.next = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': 'ArrowDown'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.next).toHaveBeenCalledTimes(0);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(0);
+    // Must reset for following tests
+    utils.isInputActive.mockReset();
+  });
+});
+describe('Keyboard shortcuts', () => {
+  test('Home key', () => {
+    br.first = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': 'Home'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.first).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+  test('End key', () => {
+    br.last = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': 'End'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.last).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+  test('ArrowDown key', () => {
+    br.mode = br.constMode2up;
+    br.next = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': 'ArrowDown'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.next).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+  test('PageDown key', () => {
+    br.mode = br.constMode2up;
+    br.next = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': 'PageDown'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.next).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+  test('ArrowUp key', () => {
+    br.mode = br.constMode2up;
+    br.prev = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': 'ArrowUp'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.prev).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+  test('PageUp key', () => {
+    br.mode = br.constMode2up;
+    br.prev = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': 'PageUp'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.prev).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+  test('ArrowLeft key', () => {
+    br.mode = br.constMode2up;
+    br.left = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': 'ArrowLeft'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.left).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+  test('ArrowRight key', () => {
+    br.mode = br.constMode2up;
+    br.right = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': 'ArrowRight'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.right).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+  test('Subtract key', () => {
+    br.zoom = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': 'Subtract'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.zoom).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+  test('- key', () => {
+    br.zoom = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': '-'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.zoom).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+  test('Add key', () => {
+    br.zoom = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': 'Add'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.zoom).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+  test('+ key', () => {
+    br.zoom = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': '+'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.zoom).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+  test('= key', () => {
+    br.zoom = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': '='});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.zoom).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+  test('F key', () => {
+    br.toggleFullscreen = jest.fn();
+    const keyEvent = new KeyboardEvent('keydown', {'key': 'F'});
+    keyEvent.preventDefault = jest.fn();
+    document.dispatchEvent(keyEvent);
+    expect(br.toggleFullscreen).toHaveBeenCalledTimes(1);
+    expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
+  });
+});