@internetarchive/bookreader 5.0.0-88-alpha.11 → 5.0.0-89

package/dist/esm/css/_controls.scss

@@ -1,257 +0,0 @@
-.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

@@ -1,121 +0,0 @@
-.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

@@ -1,141 +0,0 @@
-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

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

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

@@ -1,72 +0,0 @@
-/* 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

@@ -1,119 +0,0 @@
-/*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;
-  }
-};