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

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 5.0.0-24
+Fix: book-nav side panel zoom out @mc2
+Dev: refactor zoom code @mc2
+
+# 5.0.0-23
+Fix: Darken scrollbars in Safari @pezvi
+Fix: Bookmarks service calls when reader is logged in @mc2
+Dev: Move jest tests into separate directory @cdrini
+
 # 5.0.0-22
 - Dev: remove deprecated embed nav view, use standard default @iisa
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-22",
+  "version": "5.0.0-24-sortingstate-1",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -94,11 +94,7 @@
     ],
     "roots": [
       "<rootDir>/src/",
-      "<rootDir>/tests/"
-    ],
-    "testPathIgnorePatterns": [
-      "<rootDir>/tests/e2e/",
-      "<rootDir>/tests/karma/"
+      "<rootDir>/tests/jest/"
     ],
     "coverageDirectory": "<rootDir>/coverage-jest"
   },

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

@@ -15,6 +15,7 @@ export default class BookmarksProvider {
     this.component = document.createElement('ia-bookmarks');
     this.component.bookreader = bookreader;
     this.component.options = boundOptions;
+    this.component.displayMode = this.component.options.displayMode;
 
     this.bindEvents();
 

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

@@ -121,6 +121,9 @@ class IABookmarks extends LitElement {
 
   setup() {
     this.api.identifier = this.bookreader.bookId;
+    if (this.displayMode === 'login') {
+      return;
+    }
     this.fetchBookmarks()
       .then(() => this.initializeBookmarks())
       .catch((err) => this.displayMode = 'login');

package/src/BookNavigator/visual-adjustments/visual-adjustments-provider.js

@@ -60,7 +60,7 @@ export default class {
   }
 
   onZoomOut() {
-    this.bookreader.zoom();
+    this.bookreader.zoom(-1);
   }
 
   onAdjustmentChange(event) {

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(location.pathname + location.search);
+    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/BookReader/Mode1Up.js

@@ -79,8 +79,16 @@ export class Mode1Up {
    * @param {'in' | 'out'} direction
    */
   zoom(direction) {
-    if (direction == 'in') this.mode1UpLit.zoomIn();
-    else this.mode1UpLit.zoomOut();
+    switch (direction) {
+    case 'in':
+      this.mode1UpLit.zoomIn();
+      break;
+    case 'out':
+      this.mode1UpLit.zoomOut();
+      break;
+    default:
+      console.error(`Unsupported direction: ${direction}`);
+    }
   }
 
   /**

package/src/BookReader/ModeThumb.js

@@ -235,20 +235,27 @@ export class ModeThumb {
   }
 
   /**
-   * @param {1 | -1} direction
+   * @param {'in' | 'out'} direction
    */
   zoom(direction) {
     const oldColumns = this.br.thumbColumns;
     switch (direction) {
-    case -1:
-      this.br.thumbColumns += 1;
-      break;
-    case 1:
+    case 'in':
       this.br.thumbColumns -= 1;
       break;
+    case 'out':
+      this.br.thumbColumns += 1;
+      break;
+    default:
+      console.error(`Unsupported direction: ${direction}`);
     }
 
-    this.br.thumbColumns = clamp(this.br.thumbColumns, 2, 8);
+    // Limit zoom in/out columns
+    this.br.thumbColumns = clamp(
+      this.br.thumbColumns,
+      this.br.options.thumbMinZoomColumns,
+      this.br.options.thumbMaxZoomColumns
+    );
 
     if (this.br.thumbColumns != oldColumns) {
       this.br.displayedRows = [];  /* force a gallery redraw */

package/src/BookReader/options.js

@@ -25,6 +25,10 @@ export const DEFAULT_OPTIONS = {
   thumbMaxLoading: 4,
   /** spacing between thumbnails */
   thumbPadding: 10,
+  /** min zoom in columns */
+  thumbMinZoomColumns: 2,
+  /** max zoom out columns */
+  thumbMaxZoomColumns: 8,
 
   /** @type {number | 'fast' | 'slow'} speed for flip animation */
   flipSpeed: 'fast',

package/src/BookReader.js

@@ -63,6 +63,10 @@ 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);
 }
 
@@ -829,29 +833,11 @@ BookReader.prototype.drawLeafsThrottled = utils.throttle(
  * @param {number} direction Pass 1 to zoom in, anything else to zoom out
  */
 BookReader.prototype.zoom = function(direction) {
-  switch (this.mode) {
-  case this.constMode1up:
-    if (direction == 1) {
-      // XXX other cases
-      this.zoom1up('in');
-    } else {
-      this.zoom1up('out');
-    }
-    break;
-  case this.constMode2up:
-    if (direction == 1) {
-      // XXX other cases
-      this.zoom2up('in');
-    } else {
-      this.zoom2up('out');
-    }
-    break;
-  case this.constModeThumb:
-    // XXX update zoomThumb for named directions
-    this.zoomThumb(direction);
-    break;
+  if (direction == 1) {
+    this.activeMode.zoom('in');
+  } else {
+    this.activeMode.zoom('out');
   }
-
   this.textSelectionPlugin?.stopPageFlip(this.refs.$brContainer);
   return;
 };

package/src/ItemNavigator/ItemNavigator.js

@@ -267,6 +267,7 @@ export default class ItemNavigator extends LitElement {
       #frame {
         position: relative;
         overflow: hidden;
+        color-scheme: dark;
       }
 
       #frame.fullscreen,

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,210 @@ BookReader.prototype.urlReadFragment = function() {
 BookReader.prototype.urlReadHashFragment = function() {
   return window.location.hash.substr(1);
 };
+export class UrlPlugin {
+  constructor(options = {}) {
+    this.bookReaderOptions = options;
+
+    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.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(urlSchema, urlState) {
+    const searchParams = new URLSearchParams();
+    const pathParams = {};
+
+    Object.keys(urlState).forEach(key => {
+      let schema = urlSchema.find(schema => schema.name === key);
+      if (schema?.deprecated_for) {
+        schema = 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 = 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 {array} urlSchema
+   * @param {string} str
+   * @returns {object}
+   */
+  urlStringToUrlState(urlSchema, str) {
+    const urlState = {};
+
+    // Fetch searchParams from given {str}
+    // Note: whole URL path is needed for URLSearchParams
+    const urlPath = new URL(str, '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);
+    };
+
+    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)
+          return urlState[schema.deprecated_for] = urlStrSplitSlashObj[schema.name];
+
+        if (hasPropertyKey)
+          return urlState[schema.name] = urlStrSplitSlashObj[schema.name];
+      });
+
+    // 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);
+    Object.entries(urlSearchParamsObj).forEach(([key, value]) => {
+      urlState[key] = isBoolean(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
+   * @param {string} location
+   * @return {string}
+   */
+  pullFromAddressBar (location) {
+    const path = this.urlMode === 'history'
+      ? location.substr(this.urlHistoryBasePath.length)
+      : location.substr(1);
+    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/BookReader/ModeThumb.test.js

@@ -0,0 +1,71 @@
+
+import sinon from 'sinon';
+import BookReader from '@/src/BookReader.js';
+/** @typedef {import('@/src/BookReader/options.js').BookReaderOptions} BookReaderOptions */
+
+beforeAll(() => {
+  global.alert = jest.fn();
+});
+afterEach(() => {
+  jest.restoreAllMocks();
+  sinon.restore();
+});
+
+/** @type {BookReaderOptions['data']} */
+const SAMPLE_DATA = [
+  [
+    { width: 123, height: 123, uri: 'https://archive.org/image0.jpg', pageNum: '1' },
+  ],
+  [
+    { width: 123, height: 123, uri: 'https://archive.org/image1.jpg', pageNum: '2' },
+    { width: 123, height: 123, uri: 'https://archive.org/image2.jpg', pageNum: '3' },
+  ],
+  [
+    { width: 123, height: 123, uri: 'https://archive.org/image3.jpg', pageNum: '4' },
+    { width: 123, height: 123, uri: 'https://archive.org/image4.jpg', pageNum: '5' },
+  ],
+  [
+    { width: 123, height: 123, uri: 'https://archive.org/image5.jpg', pageNum: '6' },
+  ],
+];
+
+describe('zoom', () => {
+  const br = new BookReader({ data: SAMPLE_DATA });
+  br.init();
+
+  test('initializes with default columns', () => {
+    expect(br.thumbColumns).toBe(br.options.thumbColumns);
+  });
+
+  test('removes column and redraws zooming in', () => {
+    const prepare = sinon.spy(br._modes.modeThumb, 'prepare');
+    const startColumns = br.thumbColumns;
+    br._modes.modeThumb.zoom('in');
+    expect(br.thumbColumns).toBe(startColumns - 1);
+    expect(prepare.callCount).toBe(1);
+  });
+
+  test('adds column and redraws zooming out', () => {
+    const prepare = sinon.spy(br._modes.modeThumb, 'prepare');
+    const startColumns = br.thumbColumns;
+    br._modes.modeThumb.zoom('out');
+    expect(br.thumbColumns).toBe(startColumns + 1);
+    expect(prepare.callCount).toBe(1);
+  });
+
+  test('keeps columns and no redraw at zooming in limit', () => {
+    const prepare = sinon.spy(br._modes.modeThumb, 'prepare');
+    br.thumbColumns = br.options.thumbMinZoomColumns;
+    br._modes.modeThumb.zoom('in');
+    expect(br.thumbColumns).toBe(br.options.thumbMinZoomColumns);
+    expect(prepare.callCount).toBe(0);
+  });
+
+  test('keeps columns and no redraw at zooming out limit', () => {
+    const prepare = sinon.spy(br._modes.modeThumb, 'prepare');
+    br.thumbColumns = br.options.thumbMaxZoomColumns;
+    br._modes.modeThumb.zoom('out');
+    expect(br.thumbColumns).toBe(br.options.thumbMaxZoomColumns);
+    expect(prepare.callCount).toBe(0);
+  });
+});