@internetarchive/bookreader 5.0.0-18

package/src/plugins/plugin.url.js

@@ -0,0 +1,198 @@
+/* global BookReader */
+/**
+ * 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'],
+
+  /** 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(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);
+};

package/src/plugins/plugin.vendor-fullscreen.js

@@ -0,0 +1,247 @@
+/* global BookReader */
+
+/**
+ * Toggles browser's native fullscreen mode if available device is not mobile
+ */
+if (!isMobile()) {
+  const EVENT_NAMESPACE = '.bookreader_vendor-fullscreen';
+
+  jQuery.extend(BookReader.defaultOptions, {
+    /** @type {boolean} */
+    enableVendorFullscreenPlugin: true
+  });
+
+  /** @override */
+  BookReader.prototype.setup = (function(super_) {
+    return function(options) {
+      super_.call(this, options);
+
+      this.isVendorFullscreenActive = false;
+    };
+  })(BookReader.prototype.setup);
+
+  /** @override */
+  BookReader.prototype.getInitialMode = (function(super_) {
+    return function(params) {
+      let nextMode = super_.call(this, params);
+      if (this.isVendorFullscreenActive) {
+        nextMode = this.constMode1up;
+      }
+      return nextMode;
+    };
+  })(BookReader.prototype.getInitialMode);
+
+  /** @override */
+  BookReader.prototype.init = (function(super_) {
+    return function() {
+      super_.call(this);
+
+      if (!fullscreenAllowed()) {
+        return;
+      }
+      // In fullscreen mode the colorbox and overlay need to be inside the fullscreen element to display properly.
+      bindFullscreenChangeListener(this, (e) => {
+        e.data.resize();
+        e.data.updateBrClasses();
+        const cboxOverlay = $('#cboxOverlay');
+        const cbox = $('#colorbox');
+        if (isFullscreenActive()) {
+          // In full screen mode, the colorbox and overlay need
+          // to be children of the fullscreen element to display properly.
+          const $fullscreen = $(getFullscreenElement());
+          $fullscreen.append(cboxOverlay).append(cbox);
+        } else {
+          // In non-fullscreen mode, the colorbox and overlay need
+          // to be children of the main document body.
+          $(document.body).append(cboxOverlay).append(cbox);
+        }
+      });
+    };
+  })(BookReader.prototype.init);
+
+  /**
+   * Start fullscreen mode
+   */
+  BookReader.prototype.enterFullWindow = function() {
+    this.refs.$brContainer.css('opacity', 0);
+
+    const windowWidth = $(window).width();
+    if (windowWidth <= this.onePageMinBreakpoint) {
+      this.switchMode(this.constMode1up);
+    }
+
+    this.isVendorFullscreenActive = true;
+    this.updateBrClasses();
+
+    this.resize();
+    this.jumpToIndex(this.currentIndex());
+
+    this.refs.$brContainer.animate({ opacity: 1 }, 400, 'linear');
+
+    $(document).on(`keyup.${EVENT_NAMESPACE}`, e => {
+      if (e.keyCode === 27) this.exitFullScreen();
+    });
+  };
+
+  /**
+   * Exit from fullscreen mode
+   */
+  BookReader.prototype.exitFullWindow = function() {
+    this.refs.$brContainer.css('opacity', 0);
+
+    $(document).off('keyup' + EVENT_NAMESPACE);
+
+    this.isFullscreenActive = false;
+    this.updateBrClasses();
+
+    this.resize();
+    this.refs.$brContainer.animate({ opacity: 1 }, 400, 'linear');
+  };
+
+  /**
+   * Returns true if fullscreen mode is enabled
+   *
+   * @returns {boolean}
+   */
+  BookReader.prototype.isFullscreen = function() {
+    return isFullscreenActive() || this.isVendorFullscreenActive;
+  };
+
+  /**
+   * Toggle screen
+   */
+  BookReader.prototype.toggleFullscreen = function() {
+    if (this.isFullscreen()) {
+      if (fullscreenAllowed()) {
+        exitFullscreen();
+      } else {
+        this.exitFullWindow();
+      }
+    } else {
+      if (fullscreenAllowed()) {
+        requestFullscreen(this.refs.$br[0]);
+      } else {
+        this.enterFullWindow();
+      }
+    }
+  };
+
+  /** @deprecated */
+  BookReader.util.isMobile = isMobile;
+
+  /** @deprecated */
+  BookReader.util.getFullscreenElement = getFullscreenElement;
+
+  /** @deprecated */
+  BookReader.util.bindFullscreenChangeListener = bindFullscreenChangeListener;
+
+  /** @deprecated */
+  BookReader.util.fullscreenAllowed = fullscreenAllowed;
+
+  /** @deprecated */
+  BookReader.util.requestFullscreen = requestFullscreen;
+
+  /** @deprecated */
+  BookReader.util.exitFullscreen = exitFullscreen;
+
+  /** @deprecated */
+  BookReader.util.isFullscreenActive = isFullscreenActive;
+}
+
+
+/**
+ * Returns the DOM element being used for fullscreen.
+ *
+ * @returns {HTMLElement}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement
+ */
+export function getFullscreenElement() {
+  return document.fullscreenElement ||
+    document.webkitFullscreenElement ||
+    document.mozFullScreenElement ||
+    document.msFullscreenElement;
+}
+
+/**
+ * Returns true if the document is in fullscreen mode.
+ *
+ * @returns {boolean}
+ */
+export function isFullscreenActive() {
+  const fullscreenElement = getFullscreenElement();
+  return fullscreenElement !== null && fullscreenElement !== undefined;
+}
+
+/**
+ * Exits fullscreen mode.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen
+ */
+export function exitFullscreen() {
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  } else if (document.webkitExitFullscreen) {
+    document.webkitExitFullscreen();
+  } else if (document.mozCancelFullScreen) {
+    document.mozCancelFullScreen();
+  } else if (document.msExitFullscreen) {
+    document.msExitFullscreen();
+  }
+}
+
+/**
+ * Requests fullscreen mode for the given element
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen
+ */
+export function requestFullscreen(element) {
+  if (element.requestFullscreen) {
+    element.requestFullscreen();
+  } else if (element.webkitRequestFullscreen) {
+    element.webkitRequestFullscreen();
+  } else if (element.mozRequestFullScreen) {
+    element.mozRequestFullScreen();
+  } else if (element.msRequestFullscreen) {
+    element.msRequestFullscreen();
+  }
+}
+
+/**
+ * Returns true if fullscreen mode is allowed on this device and document.
+ *
+ * @returns {boolean}
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenEnabled
+ */
+export function fullscreenAllowed() {
+  return (document.fullscreenEnabled ||
+    document.webkitFullscreenEnabled ||
+    document.mozFullScreenEnabled ||
+    document.msFullScreenEnabled);
+}
+
+/**
+ * jQuery-style binding to a fullscreenchange event.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenchange_event
+ */
+export function bindFullscreenChangeListener(
+  data, fullscreenchangeListener
+) {
+  const event = 'fullscreenchange ';
+  const vendor_prefixes = [
+    'webkit',
+    'moz',
+    'ms'
+  ];
+  const all_events = $.trim(event + vendor_prefixes.join(event) + event);
+  $(document).bind(all_events, data, fullscreenchangeListener);
+}
+
+/**
+ * Returns true if current device is mobile
+ *
+ * @returns {boolean}
+ */
+export function isMobile() {
+  return (typeof window.orientation !== 'undefined') || (navigator.userAgent.indexOf('IEMobile') !== -1);
+}