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

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# 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
+
 # 5.0.0-21
 - Dev: Toggle view=theater in fullscreen @mc2
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-21",
+  "version": "5.0.0-24-sortingstate",
   "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,27 @@ 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');
+    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 +64,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/Navbar/Navbar.js

@@ -240,35 +240,6 @@ export class Navbar {
     return this.$nav;
   }
 
-  /**
-   * Initialize the navigation bar when embedded
-   */
-  initEmbed() {
-    const { br } = this;
-    // IA-specific
-    const thisLink = (window.location + '')
-      .replace('?ui=embed','')
-      .replace('/stream/', '/details/')
-      .replace('#', '/');
-    const logoHtml = br.showLogo ? `<a class="logo" href="${br.logoURL}" target="_blank"></a>` : '';
-
-    br.refs.$BRfooter = this.$root = $('<div class="BRfooter"></div>');
-    br.refs.$BRnav = this.$nav = $(
-      `<div class="BRnav BRnavEmbed">
-          ${logoHtml}
-          <span class="BRembedreturn">
-             <a href="${thisLink}" target="_blank">${br.bookTitle}</a>
-          </span>
-          <span class="BRtoolbarbuttons">
-            <button class="BRicon book_left"></button>
-            <button class="BRicon book_right"></button>
-            <button class="BRicon full"></button>
-          </span>
-      </div>`);
-    this.$root.append(this.$nav);
-    br.refs.$br.append(this.$root);
-  }
-
   /**
   * Returns the textual representation of the current page for the navbar
   * @param {number} index

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);
 }
 
@@ -531,15 +535,12 @@ BookReader.prototype.init = function() {
   // Explicitly ensure this.mode exists for initNavbar() below
   this.mode = params.mode;
 
-  if (this.ui == "embed" && this.options.showNavbar) {
-    this.initEmbedNavbar();
-  } else {
-    if (this.options.showToolbar) {
-      this.initToolbar(this.mode, this.ui); // Build inside of toolbar div
-    }
-    if (this.options.showNavbar) {
-      this.initNavbar();
-    }
+  // Display Navigation
+  if (this.options.showToolbar) {
+    this.initToolbar(this.mode, this.ui); // Build inside of toolbar div
+  }
+  if (this.options.showNavbar) { // default navigation
+    this.initNavbar();
   }
 
   // Switch navbar controls on mobile/desktop
@@ -832,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;
 };
@@ -1583,9 +1566,6 @@ BookReader.prototype.updateViewModeButton = Navbar.prototype.updateViewModeButto
 exposeOverrideableMethod(Navbar, '_components.navbar', 'updateViewModeButton');
 BookReader.prototype.getNavPageNumString = Navbar.prototype.getNavPageNumString;
 exposeOverrideableMethod(Navbar, '_components.navbar', 'getNavPageNumString');
-/** @deprecated */
-BookReader.prototype.initEmbedNavbar = Navbar.prototype.initEmbed;
-exposeOverrideableMethod(Navbar, '_components.navbar', 'initEmbed', 'initEmbedNavbar');
 /** @deprecated unused */
 BookReader.prototype.getNavPageNumHtml = getNavPageNumHtml;
 /** @deprecated unused outside this file */

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/css/_BRnav.scss

@@ -127,10 +127,6 @@
   // Default
   @include brNavDark;
 
-  &.BRnavEmbed {
-    @include brNavLight;
-  }
-
   /* Full mobile styles */
   @media (max-width: $brBreakPointMobile) {
     .BRbodyMobileNavEnabled &,
@@ -223,25 +219,6 @@
   flex-direction: row;
   border-top: 1px solid $controlsBorder;
 
-  &.BRnavEmbed {
-    padding-top: 0;
-    height: auto;
-    align-items: center;
-
-    .BRembedreturn {
-      flex: 1 auto;
-      overflow-x: hidden;
-    }
-    .logo {
-      display: inline-block;
-      width: 25px;
-      height: 25px;
-      margin: 0 10px;
-      background: transparent url(images/icon_home.svg) no-repeat center center;
-      background-size: contain;
-    }
-  }
-
   /* Theming */
 
   // Default

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;