@internetarchive/bookreader 5.0.0-24-sortingstate-1 → 5.0.0-24-sortingstate-2

package/package.json

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

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

@@ -37,7 +37,7 @@ export default class VolumesProvider {
     this.icon = html`${volumesIcon}`;
 
     // get sort state from query param
-    this.bookreader.urlPlugin.pullFromAddressBar(location.pathname + location.search);
+    this.bookreader.urlPlugin.pullFromAddressBar();
     const urlSortValue = this.bookreader.urlPlugin.getUrlParam('sort');
     console.log('urlSortValue: ', urlSortValue);
     if (urlSortValue === sortType.title_asc || urlSortValue === sortType.title_desc) {

package/src/BookReader.js

@@ -63,10 +63,6 @@ if (location.toString().indexOf('_debugShowConsole=true') != -1) {
  */
 export default function BookReader(overrides = {}) {
   const options = jQuery.extend(true, {}, BookReader.defaultOptions, overrides, BookReader.optionOverrides);
-
-  /** @type {import('./plugins/plugin.url').UrlPlugin | null} */
-  this.urlPlugin = null;
-
   this.setup(options);
 }
 

package/src/plugins/plugin.url.js

@@ -200,6 +200,7 @@ 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' },
@@ -221,7 +222,8 @@ export class UrlPlugin {
   /**
    * Parse JSON object URL state to string format
    * Arrange path names in an order that it is positioned on the urlSchema
-   * @param {object} urlState
+   * @param {object} urlSchema
+   * @param {string} urlState
    * @returns {string}
    */
   urlStateToUrlString(urlSchema, urlState) {
@@ -256,15 +258,15 @@ export class UrlPlugin {
    *  /page/n7/mode/2up => {page: 'n7', mode: '2up'}
    *  /page/n7/mode/2up/search/hello => {page: 'n7', mode: '2up', q: 'hello'}
    * @param {array} urlSchema
-   * @param {string} str
+   * @param {string} urlString
    * @returns {object}
    */
-  urlStringToUrlState(urlSchema, str) {
+  urlStringToUrlState(urlSchema, urlString) {
     const urlState = {};
 
-    // Fetch searchParams from given {str}
+    // Fetch searchParams from given {urlString}
     // Note: whole URL path is needed for URLSearchParams
-    const urlPath = new URL(str, 'http://example.com');
+    const urlPath = new URL(urlString, 'http://example.com');
     const urlSearchParamsObj = Object.fromEntries(urlPath.searchParams.entries());
     const urlStrSplitSlashObj = Object.fromEntries(urlPath.pathname
       .match(/[^\\/]+\/[^\\/]+/g)
@@ -274,6 +276,7 @@ export class UrlPlugin {
       return Object.keys(_object).some(value => value == _key);
     };
 
+    // Add path objects to urlState
     urlSchema
       .filter(schema => schema.position == 'path')
       .forEach(schema => {
@@ -283,19 +286,23 @@ export class UrlPlugin {
         const hasPropertyKey = doesKeyExists(urlStrSplitSlashObj, schema.name);
         const hasDeprecatedKey = doesKeyExists(schema, 'deprecated_for') && hasPropertyKey;
 
-        if (hasDeprecatedKey)
-          return urlState[schema.deprecated_for] = urlStrSplitSlashObj[schema.name];
+        if (hasDeprecatedKey) {
+          urlState[schema.deprecated_for] = urlStrSplitSlashObj[schema.name];
+          return;
+        }
 
-        if (hasPropertyKey)
-          return urlState[schema.name] = urlStrSplitSlashObj[schema.name];
+        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 isBoolean = value => value === 'true' || (value === 'false' ? false : value);
+    const isBooleanValue = value => value === 'true' || (value === 'false' ? false : value);
     Object.entries(urlSearchParamsObj).forEach(([key, value]) => {
-      urlState[key] = isBoolean(value);
+      urlState[key] = isBooleanValue(value);
     });
 
     return urlState;
@@ -372,16 +379,15 @@ export class UrlPlugin {
 
   /**
    * Will read either the hash or URL and return the bookreader fragment
-   * @param {string} location
-   * @return {string}
    */
-  pullFromAddressBar (location) {
+  pullFromAddressBar (location = window.location) {
     const path = this.urlMode === 'history'
-      ? location.substr(this.urlHistoryBasePath.length)
-      : location.substr(1);
+      ? (location.pathname.substr(this.urlHistoryBasePath.length) + location.search)
+      : location.hash.substr(1);
     this.urlState = this.urlStringToUrlState(this.urlSchema, path);
   }
 }
+
 export class BookreaderUrlPlugin extends BookReader {
 
   init() {

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

@@ -123,7 +123,7 @@ describe.only('UrlPlugin tests', () => {
       urlPlugin.urlState = {};
       urlPlugin.urlMode = 'hash';
 
-      urlPlugin.pullFromAddressBar('/page/12');
+      urlPlugin.pullFromAddressBar({ pathname: '/page/12', search: '', hash: '' });
       expect(urlPlugin.urlState).toEqual({page: '12', mode: '2up'});
 
       urlPlugin.pushToAddressBar();
@@ -134,7 +134,7 @@ describe.only('UrlPlugin tests', () => {
       urlPlugin.urlState = {};
       urlPlugin.urlMode = 'hash';
 
-      urlPlugin.pullFromAddressBar('/page/12/search/hello?view=theater');
+      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();
@@ -148,7 +148,7 @@ describe.only('UrlPlugin tests', () => {
       urlPlugin.urlHistoryBasePath = '/details/foo';
       urlPlugin.urlMode = 'history';
 
-      urlPlugin.pullFromAddressBar('/details/foo/page/12');
+      urlPlugin.pullFromAddressBar({ pathname: '/details/foo/page/12', search: '', hash: '' });
       expect(urlPlugin.urlState).toEqual({page: '12', mode: '2up'});
 
       urlPlugin.pushToAddressBar();
@@ -160,7 +160,7 @@ describe.only('UrlPlugin tests', () => {
       urlPlugin.urlHistoryBasePath = '/details/foo';
       urlPlugin.urlMode = 'history';
 
-      urlPlugin.pullFromAddressBar('/details/foo/page/12/search/hello?view=theater');
+      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();

package/tests/karma/BookNavigator/volumes/volumes-provider.test.js

@@ -64,7 +64,7 @@ describe('Volumes Provider', () => {
     const baseHost = "https://archive.org";
     const provider = new volumesProvider(baseHost, brOptions, onSortClick);
 
-    expect(provider.sortOrderBy).to.equal("default");
+    expect(provider.sortOrderBy).to.equal("orig_sort");
 
     provider.sortVolumes("title_asc");
     expect(provider.sortOrderBy).to.equal("title_asc");
@@ -74,8 +74,8 @@ describe('Volumes Provider', () => {
     expect(provider.sortOrderBy).to.equal("title_desc");
     expect(provider.sortButton.getHTML()).includes("sort-by desc-icon");
 
-    provider.sortVolumes("default");
-    expect(provider.sortOrderBy).to.equal("default");
+    provider.sortVolumes("orig_sort");
+    expect(provider.sortOrderBy).to.equal("orig_sort");
     expect(provider.sortButton.getHTML()).includes("sort-by neutral-icon");
   });
 
@@ -88,9 +88,9 @@ describe('Volumes Provider', () => {
     const files = Object.keys(parsedFiles).map(item => parsedFiles[item]).sort((a, b) => a.orig_sort - b.orig_sort);
     const origSortTitles = files.map(item => item.title);
 
-    provider.sortVolumes("default");
+    provider.sortVolumes("orig_sort");
 
-    expect(provider.sortOrderBy).to.equal("default");
+    expect(provider.sortOrderBy).to.equal("orig_sort");
     expect(provider.actionButton).to.exist;
 
     const providerFileTitles = provider.viewableFiles.map(item => item.title);
@@ -144,7 +144,7 @@ describe('Volumes Provider', () => {
       const baseHost = "https://archive.org";
       const provider = new volumesProvider(baseHost, brOptions, onSortClick);
 
-      provider.sortOrderBy = 'default';
+      provider.sortOrderBy = 'orig_sort';
       const origSortButton = await fixture(provider.sortButton);
       expect(origSortButton.classList.contains('neutral-icon')).to.be.true;