@internetarchive/bookreader 5.0.0-24 → 5.0.0-24-sortingstate-3

package/package.json

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

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

@@ -7,8 +7,16 @@ 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");
@@ -17,6 +25,9 @@ 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;
@@ -25,20 +36,28 @@ export default class VolumesProvider {
     this.label = `Viewable files (${this.volumeCount})`;
     this.icon = html`${volumesIcon}`;
 
-    this.sortOrderBy = "orig_sort";
-    this.sortVolumes("orig_sort");
+    // get sort state from query param
+    this.bookreader.urlPlugin.pullFromAddressBar();
+    const urlSortValue = this.bookreader.urlPlugin.getUrlParam('sort');
+    console.log('urlSortValue: ', urlSortValue);
+    if (urlSortValue === sortType.title_asc || urlSortValue === sortType.title_desc) {
+      this.sortOrderBy = urlSortValue;
+    } else {
+      this.sortOrderBy = sortType.default;
+    }
+    this.sortVolumes(this.sortOrderBy);
   }
 
   get sortButton() {
     const sortIcons = {
-      orig_sort: html`
+      default: 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("orig_sort")}>${sortDescIcon}</button>
+        <button class="sort-by desc-icon" aria-label="Sort volumes in descending order" @click=${() => this.sortVolumes("default")}>${sortDescIcon}</button>
       `,
     };
 
@@ -46,28 +65,40 @@ export default class VolumesProvider {
   }
 
   /**
-   * @param {'orig_sort' | 'title_asc' | 'title_desc'} sortByType
+   * @param {'default' | 'title_asc' | 'title_desc'} sortByType
    */
   sortVolumes(sortByType) {
     let sortedFiles = [];
 
     const files = this.viewableFiles;
     sortedFiles = files.sort((a, b) => {
-      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);
+      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;
     });
 
     this.sortOrderBy = sortByType;
     this.component.viewableFiles  = [...sortedFiles];
     this.actionButton = this.sortButton;
+
+    if (this.sortOrderBy !== sortType.default) {
+      this.bookreader.urlPlugin.setUrlParam('sort', sortByType);
+    } else {
+      this.bookreader.urlPlugin.removeUrlParam('sort');
+    }
+
+    const urlSchema = this.bookreader.urlPlugin.urlSchema;
+    const urlState = this.bookreader.urlPlugin.urlState;
+    this.bookreader.urlPlugin.urlStateToUrlString(urlSchema, urlState);
+    this.bookreader.urlPlugin.pushToAddressBar();
+
     this.optionChange(this.bookreader);
 
     this.multipleFilesClicked(sortByType);
   }
 
   /**
-   * @param {'orig_sort' | 'title_asc' | 'title_desc'} orderBy
+   * @param {'default' | 'title_asc' | 'title_desc'} orderBy
    */
   multipleFilesClicked(orderBy) {
     if (!window.archive_analytics) {

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(50);
+          document.title = this.shortTitle(this.bookTitle, 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,3 +196,215 @@ 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 = 'hash' || this.options.urlMode;
+    this.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 {string} 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 {urlString}
+    // Note: whole URL path is needed for URLSearchParams
+    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
+    // 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.urlSchema, 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);
+    console.log('path: ', path);
+    this.urlState = this.urlStringToUrlState(this.urlSchema, 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/plugins/plugin.url.test.js

@@ -1,6 +1,7 @@
-
 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(() => {
@@ -10,6 +11,155 @@ 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', () => {