@internetarchive/bookreader 5.0.0-24-sortingstate-11 → 5.0.0-26

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,219 +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) {
-    console.log('urlString: ', urlString);
-    const urlState = {};
-
-    // Fetch searchParams from given {urlString}
-    // Note: whole URL path is needed for URLSearchParams
-    const urlPath = new URL(urlString, 'http://example.com');
-    console.log('urlPath: ', urlPath);
-    console.log('urlSearch: ', urlPath.searchParams, ' urlPath: ', urlPath.pathname);
-    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
-    // Check if Object value is a Boolean and convert value to Boolean
-    // Otherwise, return Object value
-    const isBooleanValue = value => value === 'true' || (value === 'false' ? false : value);
-    Object.entries(urlSearchParamsObj).forEach(([key, value]) => {
-      urlState[key] = isBooleanValue(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}`;
-        console.log('newUrlPath: ', newUrlPath);
-        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);
-    console.log('path: ', path);
-    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/tests/jest/BookReader.keyboard.test.js

@@ -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);
+  });
+
+});

package/tests/jest/plugins/plugin.url.test.js

@@ -1,7 +1,6 @@
+
 import BookReader from '@/src/BookReader.js';
 import '@/src/plugins/plugin.url.js';
-import { UrlPlugin } from '@/src/plugins/plugin.url.js';
-import sinon from 'sinon';
 
 let br;
 beforeAll(() => {
@@ -11,155 +10,6 @@ beforeAll(() => {
 
 afterEach(() => {
   jest.clearAllMocks();
-  sinon.restore();
-});
-
-
-describe.only('UrlPlugin tests', () => {
-  const urlPlugin = new UrlPlugin();
-
-  describe('urlStateToUrlString tests', () => {
-    test('urlStateToUrlString with known states in schema', () => {
-      const urlState = { page: 'n7', mode: '1up', search: 'foo' };
-      const urlStateWithQueries = { page: 'n7', mode: '1up', q: 'hello', view: 'theater', sort: 'title_asc' };
-
-      const expectedUrlFromState = '/page/n7/mode/1up?q=foo';
-      const expectedUrlFromStateWithQueries = '/page/n7/mode/1up?q=hello&view=theater&sort=title_asc';
-
-      expect(urlPlugin.urlStateToUrlString(urlState)).toBe(expectedUrlFromState);
-      expect(urlPlugin.urlStateToUrlString(urlStateWithQueries)).toBe(expectedUrlFromStateWithQueries);
-    });
-
-    test('urlStateToUrlString with unknown states in schema', () => {
-      const urlState = { page: 'n7', mode: '1up' };
-      const urlStateWithQueries = { page: 'n7', mode: '1up', q: 'hello', viewer: 'theater', sortBy: 'title_asc' };
-
-      const expectedUrlFromState = '/page/n7/mode/1up';
-      const expectedUrlFromStateWithQueries = '/page/n7/mode/1up?q=hello&viewer=theater&sortBy=title_asc';
-
-      expect(urlPlugin.urlStateToUrlString(urlState)).toBe(expectedUrlFromState);
-      expect(urlPlugin.urlStateToUrlString(urlStateWithQueries)).toBe(expectedUrlFromStateWithQueries);
-    });
-
-    test('urlStateToUrlString with boolean value', () => {
-      const urlState = { page: 'n7', mode: '1up', search: 'foo', view: 'theater', wrapper: false };
-      const expectedUrlFromState = '/page/n7/mode/1up?q=foo&view=theater&wrapper=false';
-
-      expect(urlPlugin.urlStateToUrlString(urlState)).toBe(expectedUrlFromState);
-    });
-  });
-
-  describe('urlStringToUrlState tests', () => {
-    test('urlStringToUrlState without query string', () => {
-      const url = '/page/n7/mode/2up';
-      const url1 = '/page/n7/mode/1up';
-
-      expect(urlPlugin.urlStringToUrlState(url)).toEqual({page: 'n7', mode: '2up'});
-      expect(urlPlugin.urlStringToUrlState(url1)).toEqual({page: 'n7', mode: '1up'});
-    });
-
-    test('urlStringToUrlState with deprecated_for', () => {
-      const url = '/page/n7/mode/2up/search/hello';
-
-      expect(urlPlugin.urlStringToUrlState(url)).toEqual({page: 'n7', mode: '2up', q: 'hello'});
-    });
-
-    test('urlStringToUrlState with query string', () => {
-      const url = '/page/n7/mode/2up/search/hello?view=theather&foo=bar&sort=title_asc';
-      const url1 = '/mode/2up?ref=ol&ui=embed&wrapper=false&view=theater';
-
-      expect(urlPlugin.urlStringToUrlState(url)).toEqual(
-        {page: 'n7', mode: '2up', q: 'hello', view: 'theather', foo: 'bar', sort: 'title_asc'}
-      );
-      expect(urlPlugin.urlStringToUrlState(url1)).toEqual(
-        {page: 'n0', mode: '2up', ref: 'ol', ui: 'embed', wrapper: false, view: 'theater'}
-      );
-    });
-
-    test('urlStringToUrlState compare search and ?q', () => {
-      const url = '/page/n7/mode/2up/search/hello';
-      urlPlugin.urlState = { q: 'hello' };
-
-      expect(urlPlugin.urlStringToUrlState(url)).toEqual({page: 'n7', mode: '2up', q: 'hello'});
-    });
-  });
-
-  describe('url plugin helper functions', () => {
-    test('setUrlParam', () => {
-      urlPlugin.urlState = {};
-      urlPlugin.setUrlParam('page', '20');
-      urlPlugin.setUrlParam('mode', '2up');
-
-      expect(urlPlugin.urlState).toEqual({page: '20', mode: '2up'});
-    });
-
-    test('removeUrlParam', () => {
-      urlPlugin.setUrlParam('page', '20');
-      urlPlugin.setUrlParam('mode', '2up');
-      urlPlugin.removeUrlParam('mode');
-
-      expect(urlPlugin.urlState).toEqual({page: '20'});
-    });
-
-    test('getUrlParam', () => {
-      urlPlugin.setUrlParam('page', '20');
-      urlPlugin.setUrlParam('mode', '2up');
-      expect(urlPlugin.getUrlParam('page')).toEqual('20');
-      expect(urlPlugin.getUrlParam('mode')).toEqual('2up');
-    });
-  });
-
-  describe('pullFromAddressBar and pushToAddressBar - hash mode', () => {
-    test('url without mode state value - use default', () => {
-      urlPlugin.urlState = {};
-      urlPlugin.urlMode = 'hash';
-
-      urlPlugin.pullFromAddressBar({ pathname: '/page/12', search: '', hash: '' });
-      expect(urlPlugin.urlState).toEqual({page: '12', mode: '2up'});
-
-      urlPlugin.pushToAddressBar();
-      expect(window.location.hash).toEqual('#/page/12/mode/2up');
-    });
-
-    test('url with query param', () => {
-      urlPlugin.urlState = {};
-      urlPlugin.urlMode = 'hash';
-
-      urlPlugin.pullFromAddressBar({ pathname: '/page/12', search: '?q=hello&view=theater', hash: '' });
-      expect(urlPlugin.urlState).toEqual({page: '12', mode: '2up', q: 'hello', view: 'theater'});
-
-      urlPlugin.pushToAddressBar();
-      expect(window.location.hash).toEqual('#/page/12/mode/2up?q=hello&view=theater');
-    });
-  });
-
-  describe('pullFromAddressBar and pushToAddressBar - history mode', () => {
-    test('url without mode state value - use default', () => {
-      urlPlugin.urlState = {};
-      urlPlugin.urlHistoryBasePath = '/details/foo';
-      urlPlugin.urlMode = 'history';
-
-      urlPlugin.pullFromAddressBar({ pathname: '/details/foo/page/12', search: '', hash: '' });
-      expect(urlPlugin.urlState).toEqual({page: '12', mode: '2up'});
-
-      urlPlugin.pushToAddressBar();
-      expect(window.location.pathname).toEqual('/details/foo/page/12/mode/2up');
-    });
-
-    test('url with query param', () => {
-      urlPlugin.urlState = {};
-      urlPlugin.urlHistoryBasePath = '/details/foo';
-      urlPlugin.urlMode = 'history';
-
-      urlPlugin.pullFromAddressBar({ pathname: '/details/foo/page/12', search: '?q=hello&view=theater', hash: '' });
-      expect(urlPlugin.urlState).toEqual({page: '12', mode: '2up', q: 'hello', view: 'theater'});
-
-      urlPlugin.pushToAddressBar();
-      const locationUrl = `${window.location.pathname}${window.location.search}`;
-      expect(locationUrl).toEqual('/details/foo/page/12/mode/2up?q=hello&view=theater');
-    });
-  });
-
 });
 
 describe('Plugin: URL controller', () => {

package/.nvmrc

@@ -1 +0,0 @@
-14