@internetarchive/bookreader 5.0.0-26 → 5.0.0-29

package/src/BookReader.js

@@ -178,7 +178,7 @@ BookReader.prototype.setup = function(options) {
      */
   this.firstIndex = null;
   this.lastDisplayableIndex2up = null;
-  this.isFullscreenActive = false;
+  this.isFullscreenActive = options.startFullscreen || false;
   this.lastScroll = null;
 
   this.showLogo = options.showLogo;
@@ -486,7 +486,6 @@ BookReader.prototype.getInitialMode = function(params) {
   if ('undefined' != typeof(params.mode)) {
     nextMode = params.mode;
   } else if (this.ui == 'full'
-          && this.enableMobileNav
           && this.isFullscreenActive
           && windowWidth <= this.onePageMinBreakpoint
   ) {
@@ -588,14 +587,16 @@ BookReader.prototype.init = function() {
     this.suppressFragmentChange = false;
   }
 
+  if (this.options.startFullscreen) {
+    this.enterFullscreen(true);
+  }
+
   this.init.initComplete = true;
   this.trigger(BookReader.eventNames.PostInit);
 
   // Must be called after this.init.initComplete set to true to allow
   // BookReader.prototype.resize to run.
-  if (this.options.startFullscreen) {
-    this.toggleFullscreen();
-  }
+
 };
 
 /**
@@ -604,7 +605,6 @@ BookReader.prototype.init = function() {
  */
 BookReader.prototype.trigger = function(name, props = this) {
   const eventName = 'BookReader:' + name;
-  $(document).trigger(eventName, props);
 
   utils.polyfillCustomEvent(window);
   window.dispatchEvent(new CustomEvent(eventName, {
@@ -612,6 +612,7 @@ BookReader.prototype.trigger = function(name, props = this) {
     composed: true,
     detail: { props },
   }));
+  $(document).trigger(eventName, props);
 };
 
 BookReader.prototype.bind = function(name, callback) {
@@ -1184,9 +1185,10 @@ BookReader.prototype.enterFullscreen = async function(bindKeyboardControls = tru
   }
 
   this.isFullscreenActive = true;
+  // prioritize class updates so CSS can propagate
+  this.updateBrClasses();
   this.animating = true;
   await new Promise(res => this.refs.$brContainer.animate({opacity: 1}, 'fast', 'linear', res));
-  this.resize();
   if (this.activeMode instanceof Mode1Up) {
     this.activeMode.mode1UpLit.scale = this.activeMode.mode1UpLit.computeDefaultScale(this._models.book.getPage(currentIndex));
     // Need the new scale to be applied before calling jumpToIndex
@@ -1198,7 +1200,14 @@ BookReader.prototype.enterFullscreen = async function(bindKeyboardControls = tru
   this.textSelectionPlugin?.stopPageFlip(this.refs.$brContainer);
   // Add "?view=theater"
   this.trigger(BookReader.eventNames.fragmentChange);
+  // trigger event here, so that animations,
+  // class updates happen before book-nav relays to web components
   this.trigger(BookReader.eventNames.fullscreenToggled);
+
+  setTimeout(() => {
+    // resize book after all events & css updates
+    this.resize();
+  }, 0);
 };
 
 /**
@@ -1221,6 +1230,10 @@ BookReader.prototype.exitFullScreen = async function () {
   }
 
   this.isFullscreenActive = false;
+  // Trigger fullscreen event immediately
+  // so that book-nav can relay to web components
+  this.trigger(BookReader.eventNames.fullscreenToggled);
+
   this.updateBrClasses();
   this.animating = true;
   await new Promise((res => this.refs.$brContainer.animate({opacity: 1}, 'fast', 'linear', res)));
@@ -1236,7 +1249,6 @@ BookReader.prototype.exitFullScreen = async function () {
   this.textSelectionPlugin?.stopPageFlip(this.refs.$brContainer);
   // Remove "?view=theater"
   this.trigger(BookReader.eventNames.fragmentChange);
-  this.trigger(BookReader.eventNames.fullscreenToggled);
 };
 
 /**

package/src/BookReaderComponent/BookReaderComponent.js

@@ -4,59 +4,69 @@
 
 import { LitElement, html, css } from 'lit-element';
 
-import '../ItemNavigator/ItemNavigator.js';
-import '../BookNavigator/BookNavigator.js';
-
+import '@internetarchive/ia-item-navigator';
+import '../BookNavigator/book-navigator.js';
+// eslint-disable-next-line no-unused-vars
+import { ModalManager } from '@internetarchive/modal-manager';
+import '@internetarchive/modal-manager';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 export class BookReader extends LitElement {
   static get properties() {
     return {
-      base64Json: { type: String },
+      item: { type: Object },
       baseHost: { type: String },
+      fullscreen: { type: Boolean, reflect: true, attribute: true },
+      sharedObserver: { type: Object }
     };
   }
 
   constructor() {
     super();
-    this.base64Json = '';
+    this.item = undefined;
+    this.bookreader = undefined;
     this.baseHost = 'https://archive.org';
+    this.fullscreen = false;
+    /** @type {ModalManager} */
+    this.modal = undefined;
+    /** @type {SharedResizeObserver} */
+    this.sharedObserver = new SharedResizeObserver();
   }
 
   firstUpdated() {
-    this.fetchData();
+    this.createModal();
   }
 
-  /**
-   * Fetch metadata response from public metadata API
-   * convert response to base64 data
-   * set base64 data to props
-   */
-  async fetchData() {
-    const ocaid = new URLSearchParams(location.search).get('ocaid');
-    const response = await fetch(`${this.baseHost}/metadata/${ocaid}`);
-    const bookMetadata = await response.json();
-    const jsonBtoa = btoa(JSON.stringify(bookMetadata));
-    this.setBaseJSON(jsonBtoa);
+  /** Creates modal DOM & attaches to `<body>` */
+  createModal() {
+    this.modal = document.createElement(
+      'modal-manager'
+    );
+    document.body.appendChild(this.modal);
   }
+  /* End Modal management */
 
-  /**
-   * Set base64 data to prop
-   * @param {string} value - base64 string format
-   */
-  setBaseJSON(value) {
-    this.base64Json = value;
+  manageFullscreen(e) {
+    const { detail } = e;
+    const fullscreen = !!detail.isFullScreen;
+    this.fullscreen = fullscreen;
   }
 
   render() {
     return html`
       <div class="ia-bookreader">
-        <item-navigator
-          itemType="bookreader"
-          basehost=${this.baseHost}
-          item=${this.base64Json}>
-          <div slot="bookreader">
-            <slot name="bookreader"></slot>
+        <ia-item-navigator
+          ?viewportInFullscreen=${this.fullscreen}
+          @fullscreenToggled=${this.manageFullscreen}
+          .itemType=${'bookreader'}
+          .basehost=${this.baseHost}
+          .item=${this.item}
+          .modal=${this.modal}
+          .sharedObserver=${this.sharedObserver}
+        >
+          <div slot="theater-main">
+            <slot name="theater-main"></slot>
           </div>
-        </item-navigator>
+        </ia-item-navigator>
       </div>
     `;
   }
@@ -77,13 +87,24 @@ export class BookReader extends LitElement {
         --primaryErrorCTABorder: #f8c6c8;
       }
 
+      :host([fullscreen]),
+      ia-item-navigator[viewportinfullscreen] {
+        position: fixed;
+        inset: 0;
+        height: 100vh;
+        min-height: unset;
+      }
+
       .ia-bookreader {
         background-color: var(--primaryBGColor);
         position: relative;
-        height: auto;
+        min-height: inherit;
+        height: inherit;
       }
 
-      item-navigator {
+      ia-item-navigator {
+        min-height: var(--br-height, inherit);
+        height: var(--br-height, inherit);
         display: block;
         width: 100%;
         color: var(--primaryTextColor);

package/src/css/_BRComponent.scss

@@ -2,7 +2,7 @@
  * Hide modal-manager that loads item-navigator-modal 
  * loading bookmarks related alert messages 
  */
-#item-navigator-modal {
+modal-manager[mode="closed"] {
   display: none
 }
 

package/src/plugins/search/plugin.search.js

@@ -61,14 +61,7 @@ BookReader.prototype.setup = (function (super_) {
     /** @type { {[pageIndex: number]: SearchInsideMatchBox[]} } */
     this._searchBoxesByIndex = {};
 
-    if (this.searchView) { return; }
-    this.searchView = new SearchView({
-      br: this,
-      searchCancelledCallback: () => {
-        this._cancelSearch();
-        this.trigger('SearchCanceled', { term: this.searchTerm, instance: this });
-      }
-    });
+    this.searchView = undefined;
   };
 })(BookReader.prototype.setup);
 
@@ -76,7 +69,14 @@ BookReader.prototype.setup = (function (super_) {
 BookReader.prototype.init = (function (super_) {
   return function () {
     super_.call(this);
-
+    // give SearchView the most complete bookreader state
+    this.searchView = new SearchView({
+      br: this,
+      searchCancelledCallback: () => {
+        this._cancelSearch();
+        this.trigger('SearchCanceled', { term: this.searchTerm, instance: this });
+      }
+    });
     if (this.options.enableSearch && this.options.initialSearchTerm) {
       /**
        * this.search() take two parameter
@@ -213,6 +213,7 @@ BookReader.prototype.search = function(term = '', overrides = {}) {
   return $.ajax({
     url: url,
     dataType: 'jsonp',
+    cache: true,
     beforeSend,
     jsonpCallback: 'BRSearchInProgress'
   }).then(processSearchResults);

package/src/plugins/tts/FestivalTTSEngine.js

@@ -23,7 +23,7 @@ export default class FestivalTTSEngine extends AbstractTTSEngine {
     // $.browsers is sometimes undefined on some Android browsers :/
     // Likely related to when $.browser was moved to npm
     /** @type {'mp3' | 'ogg'} format of audio to get */
-    this.audioFormat = $.browser?.mozilla ? 'ogg' : 'mp3';
+    this.audioFormat = $.browser?.mozilla ? 'ogg' : 'mp3'; //eslint-disable-line no-jquery/no-browser
   }
 
   /** @override */

package/src/plugins/url/UrlPlugin.js

@@ -0,0 +1,184 @@
+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('/');
+
+    // replace consecutive slashes with a single slash + remove trailing slashes
+    const strStrippedTrailingSlash = `${strPathParams.replace(/\/+/g, '/').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 {str}
+    // Note: whole URL path is needed for URL parsing
+    const urlPath = new URL(urlString, 'http://example.com');
+    const urlSearchParamsObj = Object.fromEntries(urlPath.searchParams.entries());
+    const splitUrlMatches = urlPath.pathname.match(/[^\\/]+\/[^\\/]+/g);
+    const urlStrSplitSlashObj = splitUrlMatches ? Object.fromEntries(splitUrlMatches.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 => {
+        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
+    Object.entries(urlSearchParamsObj).forEach(([key, value]) => {
+      urlState[key] = 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);
+    const concatenatedPath = urlStrPath !== '/' ? urlStrPath : '';
+    if (this.urlMode == 'history') {
+      if (window.history && window.history.replaceState) {
+        const newUrlPath = `${this.urlHistoryBasePath}${concatenatedPath}`;
+        window.history.replaceState({}, null, newUrlPath);
+      }
+    } else {
+      window.location.replace('#' + concatenatedPath);
+    }
+    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);
+    this.urlState = this.urlStringToUrlState(path);
+  }
+}

package/src/plugins/url/plugin.url.js

@@ -0,0 +1,220 @@
+/* global BookReader */
+
+import { UrlPlugin } from "./UrlPlugin";
+
+/**
+ * Plugin for URL management in BookReader
+ * Note read more about the url "fragment" here:
+ * https://openlibrary.org/dev/docs/bookurls
+ */
+
+jQuery.extend(BookReader.defaultOptions, {
+  enableUrlPlugin: true,
+  bookId: '',
+  /** @type {string} Defaults can be a urlFragment string */
+  defaults: null,
+  updateWindowTitle: false,
+
+  /** @type {'history' | 'hash'} */
+  urlMode: 'hash',
+
+  /**
+   * When using 'history' mode, this part of the URL is kept constant
+   * @example /details/plato/
+   */
+  urlHistoryBasePath: '/',
+
+  /** Only these params will be reflected onto the URL */
+  urlTrackedParams: ['page', 'search', 'mode', 'region', 'highlight', 'view'],
+
+  /** If true, don't update the URL when `page == n0 (eg "/page/n0")` */
+  urlTrackIndex0: false,
+});
+
+/** @override */
+BookReader.prototype.setup = (function(super_) {
+  return function(options) {
+    super_.call(this, options);
+
+    this.bookId = options.bookId;
+    this.defaults = options.defaults;
+
+    this.locationPollId = null;
+    this.oldLocationHash = null;
+    this.oldUserHash = null;
+  };
+})(BookReader.prototype.setup);
+
+/** @override */
+BookReader.prototype.init = (function(super_) {
+  return function() {
+
+    if (this.options.enableUrlPlugin) {
+      this.bind(BookReader.eventNames.PostInit, () => {
+        const { updateWindowTitle, urlMode } = this.options;
+        if (updateWindowTitle) {
+          document.title = this.shortTitle(this.bookTitle, 50);
+        }
+        if (urlMode === 'hash') {
+          this.urlStartLocationPolling();
+        }
+      });
+
+      this.bind(BookReader.eventNames.fragmentChange,
+        this.urlUpdateFragment.bind(this)
+      );
+    }
+    super_.call(this);
+  };
+})(BookReader.prototype.init);
+
+/**
+ * Returns a shortened version of the title with the maximum number of characters
+ * @param {number} maximumCharacters
+ * @return {string}
+ */
+BookReader.prototype.shortTitle = function(maximumCharacters) {
+  if (this.bookTitle.length < maximumCharacters) {
+    return this.bookTitle;
+  }
+
+  const title = `${this.bookTitle.substr(0, maximumCharacters - 3)}...`;
+  return title;
+};
+
+/**
+ * Starts polling of window.location to see hash fragment changes
+ */
+BookReader.prototype.urlStartLocationPolling = function() {
+  this.oldLocationHash = this.urlReadFragment();
+
+  if (this.locationPollId) {
+    clearInterval(this.locationPollId);
+    this.locationPollId = null;
+  }
+
+  const updateHash = () => {
+    const newFragment = this.urlReadFragment();
+    const hasFragmentChange = (newFragment != this.oldLocationHash) && (newFragment != this.oldUserHash);
+
+    if (!hasFragmentChange) { return; }
+
+    const params = this.paramsFromFragment(newFragment);
+
+    const updateParams = () => this.updateFromParams(params);
+
+    this.trigger(BookReader.eventNames.stop);
+    if (this.animating) {
+      // Queue change if animating
+      if (this.autoStop) this.autoStop();
+      this.animationFinishedCallback = updateParams;
+    } else {
+      // update immediately
+      updateParams();
+    }
+    this.oldUserHash = newFragment;
+  };
+
+  this.locationPollId = setInterval(updateHash, 500);
+};
+
+/**
+ * Update URL from the current parameters.
+ * Call this instead of manually using window.location.replace
+ */
+BookReader.prototype.urlUpdateFragment = function() {
+  const allParams = this.paramsFromCurrent();
+  const { urlMode, urlTrackIndex0, urlTrackedParams } = this.options;
+
+  if (!urlTrackIndex0
+      && (typeof(allParams.index) !== 'undefined')
+      && allParams.index === 0) {
+    delete allParams.index;
+    delete allParams.page;
+  }
+
+  const params = urlTrackedParams.reduce((validParams, paramName) => {
+    if (paramName in allParams) {
+      validParams[paramName] = allParams[paramName];
+    }
+    return validParams;
+  }, {});
+
+  const newFragment = this.fragmentFromParams(params, urlMode);
+  const currFragment = this.urlReadFragment();
+  const currQueryString = this.getLocationSearch();
+  const newQueryString = this.queryStringFromParams(params, currQueryString, urlMode);
+  if (currFragment === newFragment && currQueryString === newQueryString) {
+    return;
+  }
+
+  if (urlMode === 'history') {
+    if (window.history && window.history.replaceState) {
+      const baseWithoutSlash = this.options.urlHistoryBasePath.replace(/\/+$/, '');
+      const newFragmentWithSlash = newFragment === '' ? '' : `/${newFragment}`;
+
+      const newUrlPath = `${baseWithoutSlash}${newFragmentWithSlash}${newQueryString}`;
+      window.history.replaceState({}, null, newUrlPath);
+      this.oldLocationHash = newFragment + newQueryString;
+
+    }
+  } else {
+    const newQueryStringSearch = this.urlParamsFiltersOnlySearch(this.readQueryString());
+    window.location.replace('#' + newFragment + newQueryStringSearch);
+    this.oldLocationHash = newFragment + newQueryStringSearch;
+
+  }
+};
+
+/**
+ * @private
+ * Filtering query parameters to select only book search param (?q=foo)
+   This needs to be updated/URL system modified if future query params are to be added
+ * @param {string} url
+ * @return {string}
+ * */
+BookReader.prototype.urlParamsFiltersOnlySearch = function(url) {
+  const params = new URLSearchParams(url);
+  return params.has('q') ? `?${new URLSearchParams({ q: params.get('q') })}` : '';
+};
+
+
+/**
+ * Will read either the hash or URL and return the bookreader fragment
+ * @return {string}
+ */
+BookReader.prototype.urlReadFragment = function() {
+  const { urlMode, urlHistoryBasePath } = this.options;
+  if (urlMode === 'history') {
+    return window.location.pathname.substr(urlHistoryBasePath.length);
+  } else {
+    return window.location.hash.substr(1);
+  }
+};
+
+/**
+ * Will read the hash return the bookreader fragment
+ * @return {string}
+ */
+BookReader.prototype.urlReadHashFragment = function() {
+  return window.location.hash.substr(1);
+};
+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;