@internetarchive/bookreader 5.0.0-18

package/src/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/src/css/_controls.scss

@@ -0,0 +1,244 @@
+.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 {
+    width: 24px;
+    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;
+    background: transparent url("icons/playback-speed.svg") 50% 0 no-repeat;
+    option {
+      background: $controlsBG;
+    }
+  }
+
+  .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/src/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/src/dragscrollable-br.js

@@ -0,0 +1,261 @@
+/*
+ * jQuery dragscrollable Plugin
+ * version: 1.0 (25-Jun-2009)
+ * Copyright (c) 2009 Miquel Herrera
+ *
+ * Portions Copyright (c) 2010 Reg Braithwaite
+ *          Copyright (c) 2010 Internet Archive / Michael Ang
+ *          Copyright (c) 2016 Internet Archive / Richard Caceres
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ *
+ * Modified by richard@archive.org 2016
+ * - Added check to disable on touch enabled devices
+ * - Change dragend handler to bind using event "capturing" instead of "bubbling"
+ */
+(function($) { // secure $ jQuery alias
+
+  /**
+ * Adds the ability to manage elements scroll by dragging
+ * one or more of its descendant elements. Options parameter
+ * allow to specifically select which inner elements will
+ * respond to the drag events.
+ *
+ * options properties:
+ * ------------------------------------------------------------------------
+ *  dragSelector         | jquery selector to apply to each wrapped element
+ *                       | to find which will be the dragging elements.
+ *                       | Defaults to '>:first' which is the first child of
+ *                       | scrollable element
+ * ------------------------------------------------------------------------
+ *  acceptPropagatedEvent| Will the dragging element accept propagated
+ *	                     | events? default is yes, a propagated mouse event
+ *	                     | on a inner element will be accepted and processed.
+ *	                     | If set to false, only events originated on the
+ *	                     | draggable elements will be processed.
+ * ------------------------------------------------------------------------
+ *  preventDefault       | Prevents the event to propagate further effectivey
+ *                       | disabling other default actions. Defaults to true
+ * ------------------------------------------------------------------------
+ *  scrollWindow         | Scroll the window rather than the element
+ *                       | Defaults to false
+ * ------------------------------------------------------------------------
+ *
+ *  usage examples:
+ *
+ *  To add the scroll by drag to the element id=viewport when dragging its
+ *  first child accepting any propagated events
+ *	$('#viewport').dragscrollable();
+ *
+ *  To add the scroll by drag ability to any element div of class viewport
+ *  when dragging its first descendant of class dragMe responding only to
+ *  evcents originated on the '.dragMe' elements.
+ *	$('div.viewport').dragscrollable({dragSelector:'.dragMe:first',
+ *									  acceptPropagatedEvent: false});
+ *
+ *  Notice that some 'viewports' could be nested within others but events
+ *  would not interfere as acceptPropagatedEvent is set to false.
+ *
+ */
+
+  var append_namespace = function (string_of_events, ns) {
+
+    /* IE doesn't have map
+	return string_of_events
+		.split(' ')
+			.map(function (name) { return name + ns; })
+				.join(' ');
+    */
+    var pieces = string_of_events.split(' ');
+    var ret = new Array();
+    for (var i = 0; i < pieces.length; i++) {
+      ret.push(pieces[i] + ns);
+    }
+    return ret.join(' ');
+  };
+
+  var left_top = function(event) {
+
+    var x;
+    var y;
+    if (typeof(event.clientX) != 'undefined') {
+      x = event.clientX;
+      y = event.clientY;
+    }
+    else if (typeof(event.screenX) != 'undefined') {
+      x = event.screenX;
+      y = event.screenY;
+    }
+    else if (typeof(event.targetTouches) != 'undefined') {
+      x = event.targetTouches[0].pageX;
+      y = event.targetTouches[0].pageY;
+    }
+    else if (typeof(event.originalEvent) == 'undefined') {
+      var str = '';
+      for (const i in event) {
+        str += ', ' + i + ': ' + event[i];
+      }
+      console.error("don't understand x and y for " + event.type + ' event: ' + str);
+    }
+    else if (typeof(event.originalEvent.clientX) != 'undefined') {
+      x = event.originalEvent.clientX;
+      y = event.originalEvent.clientY;
+    }
+    else if (typeof(event.originalEvent.screenX) != 'undefined') {
+      x = event.originalEvent.screenX;
+      y = event.originalEvent.screenY;
+    }
+    else if (typeof(event.originalEvent.targetTouches) != 'undefined') {
+      x = event.originalEvent.targetTouches[0].pageX;
+      y = event.originalEvent.targetTouches[0].pageY;
+    }
+
+    return {left: x, top:y};
+  };
+
+  $.fn.dragscrollable = function( options ) {
+
+    var handling_element = $(this);
+
+    var settings = $.extend(
+      {
+        dragSelector:'>:first',
+        acceptPropagatedEvent: true,
+        preventDefault: true,
+        dragstart: 'mousedown touchstart',
+        dragcontinue: 'mousemove touchmove',
+        dragend: 'mouseup touchend', // mouseleave
+        dragMinDistance: 5,
+        namespace: '.ds',
+        scrollWindow: false,
+      },options || {});
+
+    settings.dragstart = append_namespace(settings.dragstart, settings.namespace);
+    settings.dragcontinue = append_namespace(settings.dragcontinue, settings.namespace);
+    //settings.dragend = append_namespace(settings.dragend, settings.namespace);
+
+    var shouldAbort = function() {
+      var isTouchDevice = !!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator);
+      return isTouchDevice;
+    };
+
+    var dragContinueHandlerProxy;
+
+    var dragscroll = {
+      dragStartHandler : function(event) {
+        if (shouldAbort()) { return true; }
+
+        // mousedown, left click, check propagation
+        if (event.which > 1 ||
+				(!event.data.acceptPropagatedEvent && event.target != this)) {
+          return false;
+        }
+
+        event.data.firstCoord = left_top(event);
+        // Initial coordinates will be the last when dragging
+        event.data.lastCoord = event.data.firstCoord;
+
+        handling_element
+          .bind(settings.dragcontinue, event.data, dragscroll.dragContinueHandler)
+        //.bind(settings.dragend, event.data, dragscroll.dragEndHandler)
+        ;
+
+        // Note, we bind using addEventListener so we can use "capture" binding
+        // instead of "bubble" binding
+        dragContinueHandlerProxy = function(e) {
+          e.data = event.data;
+          dragscroll.dragEndHandler(e);
+        };
+        $.each(settings.dragend.split(' '), function(idx, val) {
+          handling_element.get(0).addEventListener(val, dragContinueHandlerProxy, true);
+        });
+
+        if (event.data.preventDefault) {
+          event.preventDefault();
+          return false;
+        }
+      },
+      dragContinueHandler : function(event) { // User is dragging
+        // console.log('drag continue');
+        if (shouldAbort()) { return true; }
+
+        var lt = left_top(event);
+
+        // How much did the mouse move?
+        var delta = {left: (lt.left - event.data.lastCoord.left),
+          top: (lt.top - event.data.lastCoord.top)};
+
+        var scrollTarget = event.data.scrollable;
+        if (event.data.scrollWindow) {
+          scrollTarget = $(window);
+        }
+        // Set the scroll position relative to what ever the scroll is now
+        scrollTarget.scrollLeft( scrollTarget.scrollLeft() - delta.left );
+        scrollTarget.scrollTop(	scrollTarget.scrollTop() - delta.top );
+
+        // Save where the cursor is
+        event.data.lastCoord = lt;
+
+        if (event.data.preventDefault) {
+          event.preventDefault();
+          return false;
+        }
+      },
+      dragEndHandler : function(event) { // Stop scrolling
+        //console.log('dragEndHandler');
+
+        if (shouldAbort()) { return true; }
+
+        handling_element
+          .unbind(settings.dragcontinue)
+        // Note, for some reason, even though I removeEventListener below,
+        // this call to unbind is still necessary. I don't know why.
+          .unbind(settings.dragend)
+        ;
+
+        // Note, we bind using addEventListener so we can use "capture" binding
+        // instead of "bubble" binding
+        $.each(settings.dragend.split(' '), function(idx, val) {
+          handling_element.get(0).removeEventListener(val, dragContinueHandlerProxy, true);
+        });
+
+        // How much did the mouse move total?
+        var delta = {left: Math.abs(event.data.lastCoord.left - event.data.firstCoord.left),
+          top: Math.abs(event.data.lastCoord.top - event.data.firstCoord.top)};
+        var distance = Math.max(delta.left, delta.top);
+
+        // Allow event to propagate if min distance was not achieved
+        if (event.data.preventDefault && distance > settings.dragMinDistance) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          event.stopPropagation();
+          return false;
+        }
+      }
+    };
+
+    // set up the initial events
+    return this.each(function() {
+      // closure object data for each scrollable element
+      var data = {scrollable : $(this),
+        acceptPropagatedEvent : settings.acceptPropagatedEvent,
+        preventDefault : settings.preventDefault,
+        scrollWindow : settings.scrollWindow };
+      // Set mouse initiating event on the desired descendant
+      $(this).find(settings.dragSelector).
+        bind(settings.dragstart, data, dragscroll.dragStartHandler);
+    });
+  }; //end plugin dragscrollable
+
+  // Note, this probably doesn't work anymore with our modifications - Nov/8/2016
+  $.fn.removedragscrollable = function (namespace) {
+    if (typeof(namespace) == 'undefined')
+      namespace = '.ds';
+    return this.each(function() {
+      $(document).find('*').andSelf().unbind(namespace);
+    });
+  };
+
+})( jQuery ); // confine scope

package/src/jquery-wrapper.js

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