@internetarchive/bookreader 5.0.0-88-alpha.8 → 5.0.0-88-alpha.10

package/dist/esm/css/_controls.scss

@@ -0,0 +1,257 @@
+.BRcontrols {
+  width: 100%;
+
+  .BRtooltip {
+    display: none;
+    position: absolute;
+    width: auto;
+    left: 50%;
+    bottom: calc(100% + 10px);
+    transform: translateX(-50%);
+    padding: 5px 10px;
+    font-weight: bold;
+    white-space: nowrap;
+    color: $controlsText;
+    border-radius: 3px;
+    background: $tooltipBG;
+    pointer-events: none;
+  }
+
+  .full .BRtooltip {
+    left: auto;
+    right: 0;
+    transform: translateX(0);
+  }
+
+  .BRfullscreenActive & {
+    .icon-fullscreen {
+      background-image: url("icons/fullscreen_exit.svg");
+    }
+  }
+
+  select.playback-speed, select.playback-voices {
+    padding-top: 18px;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    font-size: 10px;
+    text-align-last: center;
+    color: $controlsText;
+    border: none;
+    cursor: pointer;
+    option, optgroup {
+      background: $controlsBG;
+    }
+  }
+
+  select.playback-speed {
+      width: 30px;
+      background: transparent url("icons/playback-speed.svg") 50% 0 no-repeat;
+  }
+
+  select.playback-voices {
+      width: 30px;
+      background: transparent url("icons/voice.svg") 50% 0 no-repeat;
+      background-size: 18px;
+  }
+
+  .active {
+    background: $activeButtonBG;
+  }
+
+  li {
+    position: relative;
+  }
+
+  .controls {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    padding: 2px 10px;
+    margin: 0;
+    list-style: none;
+    background: $controlsBG;
+    @media (max-width: $brBreakPointMobile) {
+      padding-left: 0;
+    }
+  }
+
+  .controls button {
+    width: 30px;
+    height: 30px;
+  }
+
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .read-aloud {
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    padding: 5px 0;
+    margin: 0;
+    align-items: center;
+    justify-content: center;
+    list-style: none;
+    background: $controlsBG;
+
+    &.visible {
+      display: flex;
+      animation: slideUp 0.2s;
+      button {
+        width: unset;
+        height: unset;
+      }
+    }
+
+    li {
+      padding: 0 10px;
+    }
+
+    [name="play"] {
+      .icon-pause {
+        display: none;
+      }
+      &.playing {
+        .icon-play {
+          display: none;
+        }
+        .icon-pause {
+          display: inline-block;
+        }
+      }
+    }
+  }
+
+  .scrubber {
+    display: flex;
+    width: 100%;
+    height: 30px;
+  }
+
+  .frame {
+    position: relative;
+    width: 100%;
+  }
+
+  .color-fill {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: 100%;
+    height: 8px;
+    border-radius: 8px;
+  }
+
+  .scrubber input[type=range] {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: 100%;
+    background-color: transparent;
+    -webkit-appearance: none;
+  }
+
+  .scrubber input[type=range]:focus {
+    outline: none;
+  }
+
+  .scrubber input[type=range]::-webkit-slider-runnable-track {
+    background: transparent;
+    border: 0px solid rgba(204, 204, 204, 0);
+    border: 0;
+    border-radius: 8px;
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+  }
+
+  .scrubber input[type=range]::-webkit-slider-thumb {
+    margin-top: -4px;
+    width: 16px;
+    height: 16px;
+    background: #ffffff;
+    border: 0px solid rgba(0, 0, 0, 0);
+    border: 0;
+    border-radius: 8px;
+    cursor: pointer;
+    -webkit-appearance: none;
+  }
+
+  .scrubber input[type=range]::-moz-range-track {
+    background: #666666;
+    border: 0px solid rgba(204, 204, 204, 0);
+    border: 0;
+    border-radius: 8px;
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+  }
+
+  .scrubber input[type=range]::-moz-range-progress {
+    height: 8px;
+    background: #ccc;
+  }
+
+  .scrubber input[type=range]::-ms-track {
+    border: none;
+    color: transparent;
+    background: #666;
+  }
+
+  .scrubber input[type=range]::-ms-fill-lower {
+    background: #ccc;
+  }
+
+  .scrubber input[type=range]::-ms-tooltip {
+    display: none;
+  }
+
+  .scrubber input[type=range]::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: #ffffff;
+    border: 0px solid rgba(0, 0, 0, 0);
+    border: 0;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+
+  .scrubber p {
+    padding: 0 20px 0 13px;
+    margin: 0;
+    align-self: stretch;
+    font-weight: 700;
+    line-height: 26px;
+    color: $controlsText;
+    @media (max-width: $brBreakPointMobile) {
+      padding: 0;
+    }
+  }
+
+  /* BookReader defaults overrides */
+  .BRnavline {
+    top: -4px;
+  }
+
+  .scrubber .BRpager.ui-slider {
+    top: 10px;
+    background-color: $trackColor;
+  }
+  .scrubber .BRpager.ui-slider .ui-slider-range {
+    background-color: $trackFillColor;
+  }
+}

package/dist/esm/css/_icons.scss

@@ -0,0 +1,121 @@
+.icon {
+  display: inline-block;
+  background: transparent 50% 50% no-repeat;
+}
+
+.icon.hflip {
+  transform: scaleX(-1);
+}
+
+.active .icon {
+  filter: brightness(.2);
+}
+
+.icon-read-aloud {
+  width: 20px;
+  height: 16px;
+  background-image: url("icons/read-aloud.svg");
+}
+
+.icon-onepg {
+  width: 11px;
+  height: 19px;
+  background-image: url("icons/1up.svg");
+}
+
+.icon-twopg {
+  width: 20px;
+  height: 19px;
+  background-image: url("icons/2up.svg");
+}
+
+.icon-fullscreen,
+.icon-fullscreen-exit {
+  width: 18px;
+  height: 18px;
+  background-image: url("icons/fullscreen.svg");
+}
+
+.icon-fullscreen-exit {
+  background-image: url("icons/fullscreen_exit.svg");
+}
+
+.icon-thumb {
+  width: 17px;
+  height: 19px;
+  background-image: url("icons/thumbnails.svg");
+}
+
+.icon-playback-speed {
+  width: 24px;
+  height: 32px;
+  background-image: url("icons/playback-speed.svg");
+}
+
+.icon-review,
+.icon-advance {
+  width: 21px;
+  height: 19px;
+  background-image: url("icons/review.svg");
+}
+
+.icon-advance {
+  background-image: url("icons/advance.svg");
+}
+
+.icon-volume-full {
+  width: 23px;
+  height: 22px;
+  background-image: url("icons/volume-full.svg");
+}
+
+.icon-play,
+.icon-pause {
+  width: 40px;
+  height: 40px;
+  background-image: url("icons/play.svg");
+}
+
+.icon-pause {
+  background-image: url("icons/pause.svg");
+}
+
+.icon-left-arrow {
+  width: 12px;
+  height: 14px;
+  background-image: url("icons/left-arrow.svg");
+}
+
+.icon-magnify {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  background-image: url("icons/magnify-minus.svg");
+  &.plus{
+    background-image: url("icons/magnify-plus.svg");
+  }
+}
+
+.icon-search {
+  width: 19px;
+  height: 19px;
+  background-image: url("images/icon_search_button.svg");
+}
+
+.icon-chevron {
+  width: 5px;
+  height: 8px;
+  background-image: url("icons/chevron-right.svg");
+}
+
+.icon-close {
+  width: 12px;
+  height: 12px;
+  background-image: url("icons/close-circle.svg");
+}
+
+.icon-close-dark {
+  width: 12px;
+  height: 12px;
+  background-image: url("icons/close-circle-dark.svg");
+}

package/dist/esm/ia-bookreader/ia-bookreader.js

@@ -0,0 +1,141 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/**
+ * BookReaderTemplate to load BookNavigator components
+ */
+
+import { LitElement, html, css } from 'lit';
+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 IaBookReader extends LitElement {
+  static get properties() {
+    return {
+      item: {
+        type: Object
+      },
+      baseHost: {
+        type: String
+      },
+      signedIn: {
+        type: Boolean
+      },
+      fullscreen: {
+        type: Boolean,
+        reflect: true,
+        attribute: true
+      },
+      sharedObserver: {
+        type: Object,
+        attribute: false
+      },
+      modal: {
+        type: Object,
+        attribute: false
+      },
+      loaded: {
+        type: Boolean
+      },
+      menuShortcuts: {
+        type: Array
+      },
+      menuContents: {
+        type: Array
+      }
+    };
+  }
+  constructor() {
+    super();
+    this.item = undefined;
+    this.bookreader = undefined;
+    this.baseHost = 'archive.org';
+    this.fullscreen = false;
+    this.signedIn = false;
+    /** @type {ModalManager} */
+    this.modal = undefined;
+    /** @type {SharedResizeObserver} */
+    this.sharedObserver = undefined;
+    this.loaded = false;
+    this.menuShortcuts = [];
+    this.menuContents = [];
+    this.openMenuName = '';
+  }
+  updated() {
+    if (!this.modal) {
+      this.setModalManager();
+    }
+    if (!this.sharedObserver) {
+      this.sharedObserver = new SharedResizeObserver();
+    }
+  }
+  get itemNav() {
+    return this.shadowRoot.querySelector('iaux-item-navigator');
+  }
+
+  /** Creates modal DOM & attaches to `<body>` */
+  setModalManager() {
+    var modalManager = document.querySelector('modal-manager');
+    if (!modalManager) {
+      modalManager = document.createElement('modal-manager');
+      document.body.appendChild(modalManager);
+    }
+    this.modal = modalManager;
+  }
+  manageFullscreen(e) {
+    var {
+      detail
+    } = e;
+    var fullscreen = !!detail.isFullScreen;
+    this.fullscreen = fullscreen;
+    this.dispatchEvent(new CustomEvent('fullscreenStateUpdated', {
+      detail: {
+        fullscreen
+      }
+    }));
+  }
+  loadingStateUpdated(e) {
+    var {
+      loaded
+    } = e.detail;
+    this.loaded = loaded || null;
+    this.dispatchEvent(new CustomEvent('loadingStateUpdated', {
+      detail: {
+        loaded
+      }
+    }));
+  }
+  setMenuShortcuts(e) {
+    this.menuShortcuts = [...e.detail];
+  }
+  setMenuContents(e) {
+    var updatedContents = [...e.detail];
+    this.menuContents = updatedContents;
+  }
+  manageSideMenuEvents(e) {
+    var {
+      menuId,
+      action
+    } = e.detail;
+    if (!menuId) {
+      return;
+    }
+    this.openMenuName = menuId;
+    if (action === 'open') {
+      var _this$itemNav;
+      (_this$itemNav = this.itemNav) === null || _this$itemNav === void 0 || _this$itemNav.openShortcut(menuId);
+    } else if (action === 'toggle') {
+      var _this$itemNav2;
+      (_this$itemNav2 = this.itemNav) === null || _this$itemNav2 === void 0 || _this$itemNav2.toggleMenu();
+    }
+  }
+  render() {
+    return html(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      <div class=\"main-component\">\n        <iaux-item-navigator\n          ?viewportInFullscreen=", "\n          .basehost=", "\n          .item=", "\n          .modal=", "\n          .loaded=", "\n          .sharedObserver=", "\n          ?signedIn=", "\n          .menuShortcuts=", "\n          .menuContents=", "\n          .openMenu=", "\n        >\n          <div slot=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div slot=\"main\">\n            <book-navigator\n              .modal=", "\n              .baseHost=", "\n              .itemMD=", "\n              ?signedIn=", "\n              ?sideMenuOpen=", "\n              .sharedObserver=", "\n              @ViewportInFullScreen=", "\n              @loadingStateUpdated=", "\n              @updateSideMenu=", "\n              @menuUpdated=", "\n              @menuShortcutsUpdated=", "\n            >\n              <div slot=\"main\">\n                <slot name=\"main\"></slot>\n              </div>\n            </book-navigator>\n          </div>\n        </iaux-item-navigator>\n      </div>\n    "])), this.fullscreen, this.baseHost, this.item, this.modal, this.loaded, this.sharedObserver, this.signedIn, this.menuShortcuts, this.menuContents, this.openMenuName, this.modal, this.baseHost, this.item, this.signedIn, this.menuOpened, this.sharedObserver, this.manageFullscreen, this.loadingStateUpdated, this.manageSideMenuEvents, this.setMenuContents, this.setMenuShortcuts);
+  }
+  static get styles() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      :host {\n        display: block;\n        --primaryBGColor: var(--black, #000);\n        --secondaryBGColor: #222;\n        --tertiaryBGColor: #333;\n        --primaryTextColor: var(--white, #fff);\n        --primaryCTAFill: #194880;\n        --primaryCTABorder: #c5d1df;\n        --secondaryCTAFill: #333;\n        --secondaryCTABorder: #999;\n        --primaryErrorCTAFill: #e51c26;\n        --primaryErrorCTABorder: #f8c6c8;\n        background-color: var(--primaryBGColor);\n        position: relative;\n      }\n\n      :host([fullscreen]),\n      iaux-item-navigator[viewportinfullscreen] {\n        position: fixed;\n        inset: 0;\n        height: 100%;\n        min-height: unset;\n      }\n\n      .main-component {\n        height: 100%;\n        width: 100%;\n        min-height: inherit;\n      }\n\n      div[slot=\"header\"],\n      div[slot=\"main\"] {\n        display: flex;\n        width: 100%;\n      }\n\n      slot {\n        display: block;\n        flex: 1;\n      }\n\n      iaux-item-navigator {\n        min-height: var(--br-height, inherit);\n        height: var(--br-height, inherit);\n        display: block;\n        width: 100%;\n        color: var(--primaryTextColor);\n        --menuButtonLabelDisplay: block;\n        --menuWidth: 320px;\n        --menuSliderBg: var(--secondaryBGColor);\n        --activeButtonBg: var(--tertiaryBGColor);\n        --subpanelRightBorderColor: var(--secondaryCTABorder);\n        --animationTiming: 100ms;\n        --iconFillColor: var(--primaryTextColor);\n        --iconStrokeColor: var(--primaryTextColor);\n        --menuSliderHeaderIconHeight: 2rem;\n        --menuSliderHeaderIconWidth: 2rem;\n        --iconWidth: 2.4rem;\n        --iconHeight: 2.4rem;\n        --shareLinkColor: var(--primaryTextColor);\n        --shareIconBorder: var(--primaryTextColor);\n        --shareIconBg: var(--secondaryBGColor);\n        --activityIndicatorLoadingDotColor: var(--primaryTextColor);\n        --activityIndicatorLoadingRingColor: var(--primaryTextColor);\n      }\n    "])));
+  }
+}
+window.customElements.define("ia-bookreader", IaBookReader);

package/dist/esm/jquery-wrapper.js

@@ -0,0 +1,3 @@
+import $ from 'jquery';
+window.jQuery = $;
+window.$ = $;

package/dist/esm/plugins/plugin.archive_analytics.js

@@ -0,0 +1,72 @@
+/* global BookReader */
+/**
+ * Plugin for Archive.org analytics
+ */
+jQuery.extend(BookReader.defaultOptions, {
+  enableArchiveAnalytics: true,
+  /** Provide a means of debugging, cause otherwise it's impossible to test locally */
+  debugArchiveAnaltyics: false
+});
+BookReader.prototype.init = function (super_) {
+  return function () {
+    super_.call(this);
+    if (this.options.enableArchiveAnalytics) {
+      this.bind(BookReader.eventNames.fragmentChange, () => this.archiveAnalyticsSendFragmentChange());
+    }
+  };
+}(BookReader.prototype.init);
+
+/** @private */
+BookReader.prototype.archiveAnalyticsSendFragmentChange = function () {
+  if (!window.archive_analytics) {
+    return;
+  }
+  var prevFragment = this.archiveAnalyticsSendFragmentChange.prevFragment;
+  var params = this.paramsFromCurrent();
+  var newFragment = this.fragmentFromParams(params);
+  if (prevFragment != newFragment) {
+    var values = {
+      bookreader: "user_changed_view",
+      itemid: this.bookId,
+      cache_bust: Math.random()
+    };
+    // EEK!  offsite embedding and /details/ page books look the same in analytics, otherwise!
+    values.offsite = 1;
+    values.details = 0;
+    try {
+      values.offsite = window.top.location.hostname.match(/\.archive.org$/) ? 0 : 1;
+      values.details = !values.offsite && window.top.location.pathname.match(/^\/details\//) ? 1 : 0;
+    } catch (e) {}
+    // avoids embed cross site exceptions -- but on (+) side, means it is and keeps marked offite!
+
+    // Send bookreader ping
+    window.archive_analytics.send_ping(values, null, "augment_for_ao_site");
+
+    // Also send tracking event ping
+    var additionalEventParams = this.options.lendingInfo && this.options.lendingInfo.loanId ? {
+      loanId: this.options.lendingInfo.loanId
+    } : {};
+    window.archive_analytics.send_event('BookReader', 'UserChangedView', window.location.pathname, additionalEventParams);
+    this.archiveAnalyticsSendFragmentChange.prevFragment = newFragment;
+  }
+};
+
+/**
+ * Sends a tracking "Event". See https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters#events
+ * @param {string} category
+ * @param {string} action
+ * @param {number} [value] (must be an int)
+ * @param {Object} [additionalEventParams]
+ */
+BookReader.prototype.archiveAnalyticsSendEvent = function (category, action, value, additionalEventParams) {
+  if (!this.options.enableArchiveAnalytics) return;
+  if (this.options.debugArchiveAnaltyics) {
+    console.log("archiveAnalyticsSendEvent", arguments, window.archive_analytics);
+  }
+  if (!window.archive_analytics) return;
+  additionalEventParams = additionalEventParams || {};
+  if (typeof value == 'number') {
+    additionalEventParams.ev = value;
+  }
+  window.archive_analytics.send_event(category, action, null, additionalEventParams);
+};

package/dist/esm/plugins/plugin.autoplay.js

@@ -0,0 +1,119 @@
+/*global BookReader */
+
+/**
+ * Plugin which adds an autoplay feature. Useful for kiosk situations.
+ */
+jQuery.extend(BookReader.defaultOptions, {
+  enableAutoPlayPlugin: true
+});
+
+/**
+ * @override BookReader.setup
+ */
+BookReader.prototype.setup = function (super_) {
+  return function (options) {
+    super_.call(this, options);
+    this.autoTimer = null;
+    this.flipDelay = 5000;
+  };
+}(BookReader.prototype.setup);
+
+/**
+ * @override BookReader.init
+ */
+BookReader.prototype.init = function (super_) {
+  return function (options) {
+    super_.call(this, options);
+    if (!this.options.enableAutoPlayPlugin) return;
+    this.bind(BookReader.eventNames.stop, () => this.autoStop());
+    var urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('autoflip') === '1') {
+      this.autoToggle();
+    }
+  };
+}(BookReader.prototype.init);
+
+/**
+ * @override BookReader.bindNavigationHandlers
+ */
+BookReader.prototype.bindNavigationHandlers = function (super_) {
+  return function () {
+    super_.call(this);
+    if (!this.options.enableAutoPlayPlugin) return;
+    var jIcons = this.$('.BRicon');
+    jIcons.filter('.play').click(() => {
+      this.autoToggle();
+      return false;
+    });
+    jIcons.filter('.pause').click(() => {
+      this.autoToggle();
+      return false;
+    });
+  };
+}(BookReader.prototype.bindNavigationHandlers);
+
+/**
+ * Starts autoplay mode
+ * @param {object} overrides
+ * @param {number} overrides.flipSpeed
+ * @param {number} overrides.flipDelay
+ */
+BookReader.prototype.autoToggle = function (overrides) {
+  if (!this.options.enableAutoPlayPlugin) return;
+  var options = $.extend({
+    flipSpeed: this.flipSpeed,
+    flipDelay: this.flipDelay
+  }, overrides);
+  this.flipSpeed = typeof options.flipSpeed === "number" ? options.flipSpeed : this.flipSpeed;
+  this.flipDelay = typeof options.flipDelay === "number" ? options.flipDelay : this.flipDelay;
+  this.trigger(BookReader.eventNames.stop);
+  var bComingFrom1up = false;
+  if (this.constMode2up != this.mode) {
+    bComingFrom1up = true;
+    this.switchMode(this.constMode2up);
+  }
+  if (null == this.autoTimer) {
+    // $$$ Draw events currently cause layout problems when they occur during animation.
+    //     There is a specific problem when changing from 1-up immediately to autoplay in RTL so
+    //     we workaround for now by not triggering immediate animation in that case.
+    //     See https://bugs.launchpad.net/gnubook/+bug/328327
+    if ('rl' == this.pageProgression && bComingFrom1up) {
+      // don't flip immediately -- wait until timer fires
+    } else {
+      // flip immediately
+      this.next({
+        triggerStop: false
+      });
+    }
+    this.$('.play').hide();
+    this.$('.pause').show();
+    this.autoTimer = setInterval(() => {
+      if (this.animating) return;
+      if (Math.max(this.twoPage.currentIndexL, this.twoPage.currentIndexR) >= this.book.getNumLeafs() - 1) {
+        this.prev({
+          triggerStop: false
+        }); // $$$ really what we want?
+      } else {
+        this.next({
+          triggerStop: false
+        });
+      }
+    }, this.flipDelay);
+  } else {
+    this.autoStop();
+  }
+};
+
+/**
+ * Stop autoplay mode, allowing animations to finish
+ */
+BookReader.prototype.autoStop = function () {
+  if (!this.options.enableAutoPlayPlugin) return;
+  if (null != this.autoTimer) {
+    clearInterval(this.autoTimer);
+    this.flipSpeed = 'fast';
+    this.$('.pause').hide();
+    this.$('.play').show();
+    this.autoTimer = null;
+  }
+};