@internetarchive/bookreader 5.0.0-3 → 5.0.0-30-d

package/stat/css/_colorbox.scss

@@ -0,0 +1,52 @@
+/* COLORBOX POP-UP */
+
+#colorbox, #cboxOverlay, #cboxWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $brZindexPopup;
+}
+#cboxOverlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity:0.75; filter:Alpha(Opacity=75);
+}
+#cboxMiddleLeft, #cboxBottomLeft { clear:left; }
+#cboxContent { position:relative; }
+#cboxLoadedContent { overflow: hidden!important; }
+#cboxLoadedContent iframe { display: block; border: 0; }
+#cboxTitle { margin: 0; display: none !important; }
+#cboxLoadingOverlay, #cboxLoadingGraphic {
+  position: absolute;
+  top: 25px;
+  left: 25px;
+  width: 100%;
+}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor:pointer; }
+#cboxClose { display: none !important; }
+
+#colorbox{
+  background: white;
+  border: 2px solid #ccc;
+  -webkit-border-radius:12px;
+  -moz-border-radius:12px;
+  border-radius:12px;
+  -webkit-box-shadow: 0px 0px 27px 6px rgba(66, 66, 66, 0.8);
+  -moz-box-shadow:    0px 0px 27px 6px rgba(66, 66, 66, 0.8);
+  box-shadow:         0px 0px 27px 6px rgba(66, 66, 66, 0.8);
+}
+  #cboxWrapper {}
+    #cboxContent {
+      padding:0;
+    }
+        #cboxLoadedContent{
+          margin:0;
+        }
+        #cboxLoadingOverlay{background:transparent;}
+
+.shift{
+    position: absolute !important;
+    left: -10000px !important;
+}

package/stat/css/_controls.scss

@@ -0,0 +1,253 @@
+.BRcontrols {
+  width: 100%;
+
+  .tooltip {
+    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;
+  }
+
+  .full .tooltip {
+    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: center;
+    text-align-last: center;
+    color: $controlsText;
+    border: none;
+    cursor: pointer;
+    option {
+      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;
+    }
+
+    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/stat/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/stat/jquery-wrapper.js

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

package/stat/plugins/plugin.archive_analytics.js

@@ -0,0 +1,86 @@
+/* global BookReader, archive_analytics */
+/**
+ * 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;
+  }
+
+  const prevFragment = this.archiveAnalyticsSendFragmentChange.prevFragment;
+
+  const params = this.paramsFromCurrent();
+  const newFragment = this.fragmentFromParams(params);
+
+  if (prevFragment != newFragment) {
+    const 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
+    archive_analytics.send_ping(values, null, "augment_for_ao_site");
+
+    // Also send tracking event ping
+    const additionalEventParams = this.options.lendingInfo && this.options.lendingInfo.loanId
+      ? { loanId: this.options.lendingInfo.loanId }
+      : {};
+    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/stat/plugins/plugin.autoplay.js

@@ -0,0 +1,129 @@
+/*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.auto      = false;
+    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());
+  };
+})(BookReader.prototype.init);
+
+/**
+ * @override BookReader.bindNavigationHandlers
+ */
+BookReader.prototype.bindNavigationHandlers = (function(super_) {
+  return function() {
+    super_.call(this);
+
+    if (!this.options.enableAutoPlayPlugin) return;
+
+    // Note the mobile plugin attaches itself to body, so we need to select outside
+    const jIcons = this.$('.BRicon').add('.BRmobileMenu .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;
+
+  const 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);
+
+  let bComingFrom1up = false;
+  if (this.constMode2up != this.mode) {
+    bComingFrom1up = true;
+    this.switchMode(this.constMode2up);
+  }
+
+  // Change to autofit if book is too large
+  if (this.reduce < this.twoPageGetAutofitReduce()) {
+    this.zoom('auto');
+  }
+
+  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.flipFwdToIndex();
+    }
+
+    this.$('.play').hide();
+    this.$('.pause').show();
+    this.autoTimer = setInterval(() => {
+      if (this.animating) return;
+
+      if (Math.max(this.twoPage.currentIndexL, this.twoPage.currentIndexR) >= this.lastDisplayableIndex()) {
+        this.flipBackToIndex(1); // $$$ really what we want?
+      } else {
+        this.flipFwdToIndex();
+      }
+    }, 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;
+  }
+};