@internetarchive/bookreader 5.0.0-88-alpha.7 → 5.0.0-88-alpha.9

package/dist/esm/BookReader/PageContainer.js

@@ -0,0 +1,165 @@
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+// @ts-check
+/** @typedef {import('./BookModel.js').PageModel} PageModel */
+/** @typedef {import('./ImageCache.js').ImageCache} ImageCache */
+
+export class PageContainer {
+  /**
+   * @param {PageModel} page
+   * @param {object} opts
+   * @param {boolean} opts.isProtected Whether we're in a protected book
+   * @param {ImageCache} opts.imageCache
+   * @param {string} opts.loadingImage
+   */
+  constructor(page, _ref) {
+    var {
+      isProtected,
+      imageCache,
+      loadingImage
+    } = _ref;
+    this.page = page;
+    this.imageCache = imageCache;
+    this.loadingImage = loadingImage;
+    this.$container = $('<div />', {
+      'class': "BRpagecontainer ".concat(page ? "pagediv".concat(page.index) : 'BRemptypage'),
+      css: {
+        position: 'absolute'
+      }
+    }).attr('data-side', page === null || page === void 0 ? void 0 : page.pageSide);
+    if (isProtected) {
+      this.$container.append($('<div class="BRscreen" />'));
+      this.$container.addClass('protected');
+    }
+
+    /** @type {JQuery<HTMLImageElement>} The main book page image */
+    this.$img = null;
+  }
+
+  /**
+   * @param {object} param0
+   * @param {{ width: number, height: number, top: number, left: number }} [param0.dimensions]
+   * @param {number} param0.reduce
+   */
+  update(_ref2) {
+    var _this$$img, _this$$img2;
+    var {
+      dimensions = null,
+      reduce = null
+    } = _ref2;
+    if (dimensions) {
+      this.$container.css(dimensions);
+    }
+    if (reduce == null || !this.page) {
+      return;
+    }
+    var alreadyLoaded = this.imageCache.imageLoaded(this.page.index, reduce);
+    var nextBestLoadedReduce = !alreadyLoaded && this.imageCache.getBestLoadedReduce(this.page.index, reduce);
+
+    // Create high res image
+    var $newImg = this.imageCache.image(this.page.index, reduce);
+
+    // Avoid removing/re-adding the image if it's already there
+    // This can be called quite a bit, so we need to be fast
+    if (((_this$$img = this.$img) === null || _this$$img === void 0 ? void 0 : _this$$img[0].src) == $newImg[0].src) {
+      return this;
+    }
+    (_this$$img2 = this.$img) === null || _this$$img2 === void 0 || _this$$img2.remove();
+    this.$img = $newImg.prependTo(this.$container);
+    var backgroundLayers = [];
+    if (!alreadyLoaded) {
+      this.$container.addClass('BRpageloading');
+      backgroundLayers.push("url(\"".concat(this.loadingImage, "\") center/20px no-repeat"));
+    }
+    if (nextBestLoadedReduce) {
+      backgroundLayers.push("url(\"".concat(this.page.getURI(nextBestLoadedReduce, 0), "\") center/100% 100% no-repeat"));
+    }
+    if (!alreadyLoaded) {
+      this.$img.css('background', backgroundLayers.join(',')).one('loadend', /*#__PURE__*/function () {
+        var _ref3 = _asyncToGenerator(function* (ev) {
+          $(ev.target).css({
+            'background': ''
+          });
+          $(ev.target).parent().removeClass('BRpageloading');
+        });
+        return function (_x) {
+          return _ref3.apply(this, arguments);
+        };
+      }());
+    }
+    return this;
+  }
+}
+
+/**
+ * @param {PageModel} page
+ * @param {string} className
+ */
+export function createSVGPageLayer(page, className) {
+  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  svg.setAttribute("viewBox", "0 0 ".concat(page.width, " ").concat(page.height));
+  svg.setAttribute('class', "BRPageLayer ".concat(className));
+  svg.setAttribute('preserveAspectRatio', 'none');
+  return svg;
+}
+
+/**
+ * @param {PageModel} page
+ * @param {string} className
+ */
+export function createDIVPageLayer(page, className) {
+  var div = document.createElement("div");
+  div.style.width = "".concat(page.width, "px");
+  div.style.height = "".concat(page.height, "px");
+  div.setAttribute('class', "BRPageLayer ".concat(className));
+  return div;
+}
+
+/**
+ * @param {{ l: number, r: number, b: number, t: number }} box
+ */
+export function boxToSVGRect(_ref4) {
+  var {
+    l: left,
+    r: right,
+    b: bottom,
+    t: top
+  } = _ref4;
+  var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  rect.setAttribute("x", left.toString());
+  rect.setAttribute("y", top.toString());
+  rect.setAttribute("width", (right - left).toString());
+  rect.setAttribute("height", (bottom - top).toString());
+
+  // Some style; corner radius 4px. Can't set this in CSS yet
+  rect.setAttribute("rx", "4");
+  rect.setAttribute("ry", "4");
+  return rect;
+}
+
+/**
+ * @param {string} layerClass
+ * @param {Array<{ l: number, r: number, b: number, t: number }>} boxes
+ * @param {PageModel} page
+ * @param {HTMLElement} containerEl
+ * @param {string[]} [rectClasses] CSS classes to add to the rects
+ */
+export function renderBoxesInPageContainerLayer(layerClass, boxes, page, containerEl) {
+  var rectClasses = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+  var mountedSvg = containerEl.querySelector(".".concat(layerClass));
+  // Create the layer if it's not there
+  var svg = mountedSvg || createSVGPageLayer(page, layerClass);
+  if (!mountedSvg) {
+    // Insert after the image if the image is already loaded.
+    var imgEl = containerEl.querySelector('.BRpageimage');
+    if (imgEl) $(svg).insertAfter(imgEl);else $(svg).prependTo(containerEl);
+  }
+  for (var [i, box] of boxes.entries()) {
+    var rect = boxToSVGRect(box);
+    if (rectClasses) {
+      rect.setAttribute('class', rectClasses[i]);
+    }
+    svg.appendChild(rect);
+  }
+}

package/dist/esm/BookReader/ReduceSet.js

@@ -0,0 +1,27 @@
+/**
+ * @typedef {object} ReduceSet Set of valid numbers for a reduce variable.
+ * @property {(n: number) => number} floor
+ * @property {(n: number) => number} decr Return the predecessor of the given element
+ */
+
+/** @type {ReduceSet} */
+export var IntegerReduceSet = {
+  floor: Math.floor,
+  decr(n) {
+    return n - 1;
+  }
+};
+
+/** @type {ReduceSet} */
+export var Pow2ReduceSet = {
+  floor(n) {
+    return 2 ** Math.floor(Math.log2(Math.max(1, n)));
+  },
+  decr(n) {
+    return 2 ** (Math.log2(n) - 1);
+  }
+};
+export var NAMED_REDUCE_SETS = {
+  pow2: Pow2ReduceSet,
+  integer: IntegerReduceSet
+};

package/dist/esm/BookReader/Toolbar/Toolbar.js

@@ -0,0 +1,242 @@
+import 'jquery-colorbox';
+import { escapeHTML } from '../utils.js';
+import { EVENTS } from '../events.js';
+/** @typedef {import("../../BookReader.js").default} BookReader */
+
+export class Toolbar {
+  /**
+   * @param {BookReader} br
+   */
+  constructor(br) {
+    this.br = br;
+  }
+
+  /**
+   * This method builds the html for the toolbar. It can be decorated to extend
+   * the toolbar.
+   * @return {JQuery}
+   */
+  buildToolbarElement() {
+    var {
+      br
+    } = this;
+    var logoHtml = !br.showLogo ? '' : "\n      <span class=\"BRtoolbarSection BRtoolbarSectionLogo\">\n        <a class=\"logo\" href=\"".concat(br.logoURL, "\"></a>\n      </span>");
+
+    // Add large screen navigation
+    br.refs.$BRtoolbar = $("\n      <div class=\"BRtoolbar header\">\n        <div class=\"BRtoolbarbuttons\">\n          <div class=\"BRtoolbarLeft\">\n            ".concat(logoHtml, "\n            <span class=\"BRtoolbarSection BRtoolbarSectionTitle\"></span>\n          </div>\n          <div class=\"BRtoolbarRight\">\n            <span class=\"BRtoolbarSection BRtoolbarSectionInfo\">\n              <button class=\"BRpill info js-tooltip\">Info</button>\n              <button class=\"BRpill share js-tooltip\">Share</button>\n            </span>\n          </div>\n        </div>\n      </div>"));
+    // TODO actual hamburger menu
+    // <span class="BRtoolbarSection BRtoolbarSectionMenu">
+    //   <button class="BRpill BRtoolbarHamburger">
+    //     <img src="${br.imagesBaseURL}icon_hamburger.svg" />
+    //     <div class="BRhamburgerDrawer"><ul><li>hi</li></ul></div>
+    //   </button>
+    // </span>
+
+    var $titleSectionEl = br.refs.$BRtoolbar.find('.BRtoolbarSectionTitle');
+    if (br.bookUrl && br.options.enableBookTitleLink) {
+      $titleSectionEl.append($('<a>').attr({
+        href: br.bookUrl,
+        title: br.bookUrlTitle
+      }).addClass('BRreturn').html(br.bookUrlText || br.bookTitle));
+    } else if (br.bookTitle) {
+      $titleSectionEl.append(br.bookUrlText || br.bookTitle);
+    }
+
+    // const $hamburger = br.refs.$BRtoolbar.find('BRtoolbarHamburger');
+    return br.refs.$BRtoolbar;
+  }
+
+  /**
+   * Initializes the toolbar (top)
+   * @param {string} mode
+   * @param {string} ui
+   */
+  initToolbar(mode, ui) {
+    var {
+      br
+    } = this;
+    br.refs.$br.append(this.buildToolbarElement());
+    br.$('.BRnavCntl').addClass('BRup');
+    br.$('.pause').hide();
+
+    // We build in mode 2
+    br.refs.$BRtoolbar.append();
+
+    // Hide mode buttons and autoplay if 2up is not available
+    // $$$ if we end up with more than two modes we should show the applicable buttons
+    if (!br.canSwitchToMode(br.constMode2up)) {
+      br.$('.two_page_mode, .play, .pause').hide();
+    }
+    if (!br.canSwitchToMode(br.constModeThumb)) {
+      br.$('.thumbnail_mode').hide();
+    }
+
+    // Hide one page button if it is the only mode available
+    if (!(br.canSwitchToMode(br.constMode2up) || br.canSwitchToMode(br.constModeThumb))) {
+      br.$('.one_page_mode').hide();
+    }
+    $('<div style="display: none;"></div>').append(blankShareDiv()).append(blankInfoDiv()).appendTo(br.refs.$br);
+    br.$('.BRinfo .BRfloatTitle a').attr({
+      href: br.bookUrl
+    }).text(br.bookTitle).addClass('title');
+
+    // These functions can be overridden
+    this.buildInfoDiv(br.$('.BRinfo'));
+    this.buildShareDiv(br.$('.BRshare'));
+    br.$('.share').colorbox({
+      inline: true,
+      opacity: "0.5",
+      href: br.$('.BRshare'),
+      onLoad: () => {
+        br.trigger(EVENTS.stop);
+        br.$('.BRpageviewValue').val(window.location.href);
+      }
+    });
+    br.$('.info').colorbox({
+      inline: true,
+      opacity: "0.5",
+      href: br.$('.BRinfo'),
+      onLoad: () => {
+        br.trigger(EVENTS.stop);
+      }
+    });
+  }
+
+  /**
+   * @param {JQuery} $shareDiv
+   */
+  buildShareDiv($shareDiv) {
+    var {
+      br
+    } = this;
+    var pageView = document.location + '';
+    var bookView = (pageView + '').replace(/#.*/, '');
+    var embedHtml = !br.getEmbedCode ? '' : "\n      <div class=\"share-embed\">\n        <p class=\"share-embed-prompt\">Copy and paste one of these options to share this book elsewhere.</p>\n        <form method=\"post\" action=\"\">\n          <fieldset class=\"fieldset-share-pageview\">\n            <label for=\"pageview\">Link to this page view</label>\n            <input type=\"text\" name=\"pageview\" class=\"BRpageviewValue\" value=\"".concat(pageView, "\"/>\n          </fieldset>\n          <fieldset class=\"fieldset-share-book-link\">\n            <label for=\"booklink\">Link to the book</label>\n            <input type=\"text\" name=\"booklink\" class=\"booklink\" value=\"").concat(bookView, "\"/>\n          </fieldset>\n          <fieldset class=\"fieldset-embed\">\n            <label for=\"iframe\">Embed a mini Book Reader</label>\n            <fieldset class=\"sub\">\n              <label class=\"sub\">\n                <input type=\"radio\" name=\"pages\" value=\"").concat(br.constMode1up, "\" checked=\"checked\"/>\n                1 page\n              </label>\n              <label class=\"sub\">\n                <input type=\"radio\" name=\"pages\" value=\"").concat(br.constMode2up, "\"/>\n                2 pages\n              </label>\n              <label class=\"sub\">\n                <input type=\"checkbox\" name=\"thispage\" value=\"thispage\"/>\n                Open to this page?\n              </label>\n            </fieldset>\n            <textarea cols=\"30\" rows=\"4\" name=\"iframe\" class=\"BRframeEmbed\"></textarea>\n          </fieldset>\n        </form>\n      </div>");
+    var $form = $("\n      <div class=\"share-title\">Share this book</div>\n      <div class=\"share-social\">\n        <label class=\"sub open-to-this-page\">\n          <input class=\"thispage-social\" type=\"checkbox\" />\n          Open to this page?\n        </label>\n        <div><button class=\"BRaction share facebook-share-button\"><i class=\"BRicon fb\" /> Facebook</button></div>\n        <div><button class=\"BRaction share twitter-share-button\"><i class=\"BRicon twitter\" /> Twitter</button></div>\n        <div><button class=\"BRaction share email-share-button\"><i class=\"BRicon email\" /> Email</button></div>\n      </div>\n      ".concat(embedHtml, "\n      <div class=\"BRfloatFoot\">\n        <button class=\"share-finished\" type=\"button\" onclick=\"$.fn.colorbox.close();\">Finished</button>\n      </div>"));
+    $form.appendTo($shareDiv);
+    $form.find('.fieldset-embed input').on('change', event => {
+      var form = $(event.target).parents('form').first();
+      var params = {};
+      params.mode = $(form.find('.fieldset-embed input[name=pages]:checked')).val();
+      if (form.find('.fieldset-embed input[name=thispage]').prop('checked')) {
+        params.page = br.book.getPageNum(br.currentIndex());
+      }
+      if (br.getEmbedCode) {
+        // $$$ changeable width/height to be added to share UI
+        var frameWidth = "480px";
+        var frameHeight = "430px";
+        form.find('.BRframeEmbed').val(br.getEmbedCode(frameWidth, frameHeight, params));
+      }
+    });
+    $form.find('input, textarea').on('focus', event => event.target.select());
+
+    // Bind share buttons
+
+    // Use url without hashes
+    $form.find('.facebook-share-button').on("click", () => {
+      var params = $.param({
+        u: this._getSocialShareUrl()
+      });
+      var url = 'https://www.facebook.com/sharer.php?' + params;
+      createPopup(url, 600, 400, 'Share');
+    });
+    $form.find('.twitter-share-button').on("click", () => {
+      var params = $.param({
+        url: this._getSocialShareUrl(),
+        text: br.bookTitle
+      });
+      var url = 'https://twitter.com/intent/tweet?' + params;
+      createPopup(url, 600, 400, 'Share');
+    });
+    $form.find('.email-share-button').on("click", () => {
+      var body = "".concat(br.bookTitle, "\n\n").concat(this._getSocialShareUrl());
+      window.location.href = "mailto:?subject=".concat(encodeURI(br.bookTitle), "&body=").concat(encodeURI(body));
+    });
+    $form.find('input[name=thispage]').trigger('change');
+    $form.appendTo($shareDiv);
+  }
+  _getSocialShareUrl() {
+    var {
+      br
+    } = this;
+    var shareThisPage = br.$('.thispage-social').prop('checked');
+    if (shareThisPage) {
+      return window.location.href;
+    } else {
+      return "".concat(document.location.protocol, "//").concat(window.location.hostname).concat(window.location.pathname);
+    }
+  }
+
+  /**
+   * @param {JQuery} $infoDiv DOM element. Appends info to this element
+   * Can be overridden or extended
+   */
+  buildInfoDiv($infoDiv) {
+    var {
+      br
+    } = this;
+    // Remove these legacy elements
+    $infoDiv.find('.BRfloatBody, .BRfloatCover, .BRfloatFoot').remove();
+    var $leftCol = $("<div class=\"BRinfoLeftCol\"></div>");
+    if (br.thumbnail) {
+      $leftCol.append($("\n        <div class=\"BRimageW\">\n          <img src=\"".concat(br.thumbnail, "\" alt=\"").concat(escapeHTML(br.bookTitle), "\" />\n        </div>")));
+    }
+    var $rightCol = $("<div class=\"BRinfoRightCol\">");
+
+    // A loop to build fields
+    for (var {
+      extraValueClass = '',
+      label,
+      value
+    } of br.metadata) {
+      var escapedValue = label === 'Title' ? escapeHTML(value) : value;
+      $rightCol.append($("\n        <div class=\"BRinfoValueWrapper\">\n          <div class=\"BRinfoLabel\">".concat(label, "</div>\n          <div class=\"BRinfoValue ").concat(extraValueClass, "\">").concat(escapedValue, "</div>\n        </div>")));
+    }
+    var moreInfoText = br.bookUrlMoreInfo ? br.bookUrlMoreInfo : br.bookTitle;
+    if (moreInfoText && br.bookUrl) {
+      $rightCol.append($("\n        <div class=\"BRinfoValueWrapper\">\n          <div class=\"BRinfoMoreInfoWrapper\">\n            <a class=\"BRinfoMoreInfo\" href=\"".concat(br.bookUrl, "\">\n              ").concat(escapeHTML(moreInfoText), "\n            </a>\n          </div>\n        </div>")));
+    }
+    var $footer = $("<div class=\"BRfloatFoot BRinfoFooter\"></div>");
+    var $children = $('<div class="BRinfoW mv20-lg">').append([$leftCol, $rightCol, $('<br style="clear:both"/>')]);
+    $infoDiv.append($children, $footer).addClass('wide');
+  }
+
+  /**
+   * @return {number} (in pixels) of the toolbar height. 0 if no toolbar.
+   */
+  getToolBarHeight() {
+    var {
+      $BRtoolbar
+    } = this.br.refs;
+    if ($BRtoolbar && $BRtoolbar.css('display') === 'block') {
+      return $BRtoolbar.outerHeight() + parseInt($BRtoolbar.css('top'));
+    } else {
+      return 0;
+    }
+  }
+}
+function blankInfoDiv() {
+  return $("\n    <div class=\"BRfloat BRinfo\">\n      <div class=\"BRfloatHead\">About this book\n        <button class=\"floatShut\" href=\"javascript:;\" onclick=\"$.fn.colorbox.close();\"><span class=\"br-colorbox-shift\">Close</span></button>\n      </div>\n      <div class=\"BRfloatBody\">\n        <div class=\"BRfloatCover\"></div>\n        <div class=\"BRfloatMeta\">\n          <div class=\"BRfloatTitle\">\n            <h2><a /></h2>\n          </div>\n        </div>\n      </div>\n      <div class=\"BRfloatFoot\">\n        <a href=\"https://openlibrary.org/dev/docs/bookreader\">About the BookReader</a>\n      </div>\n    </div>");
+}
+function blankShareDiv() {
+  return $("\n    <div class=\"BRfloat BRshare\">\n      <div class=\"BRfloatHead\">\n        Share\n        <button class=\"floatShut\" href=\"javascript:;\" onclick=\"$.fn.colorbox.close();\"><span class=\"br-colorbox-shift\">Close</span></button>\n      </div>\n    </div>");
+}
+
+/**
+ * Helper opens a popup window. On mobile it only opens a new tab. Used for share.
+ * @param {string} href
+ * @param {number} width
+ * @param {number} height
+ * @param {string} name
+ */
+export function createPopup(href, width, height, name) {
+  // Fixes dual-screen position
+  var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
+  var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
+  var win_w = window.innerWidth || document.documentElement.clientWidth || screen.width;
+  var win_h = window.innerHeight || document.documentElement.clientHeight || screen.height;
+  var left = win_w / 2 - width / 2 + dualScreenLeft;
+  var top = win_h / 2 - height / 2 + dualScreenTop;
+  var opts = "status=1,width=".concat(width, ",height=").concat(height, ",top=").concat(top, ",left=").concat(left);
+  window.open(href, name, opts);
+}

package/dist/esm/BookReader/events.js

@@ -0,0 +1,20 @@
+/** @enum {string} */
+export var EVENTS = {
+  /** Indicates that the fragment (a serialization of the reader
+   * state) has changed. */
+  fragmentChange: 'fragmentChange',
+  pageChanged: 'pageChanged',
+  PostInit: 'PostInit',
+  stop: 'stop',
+  resize: 'resize',
+  userAction: 'userAction',
+  // event to know if user is actively reading
+  // menu click events
+  fullscreenToggled: 'fullscreenToggled',
+  zoomOut: 'zoomOut',
+  zoomIn: 'zoomIn',
+  '1PageViewSelected': '1PageViewSelected',
+  '2PageViewSelected': '2PageViewSelected',
+  /* currently 3 represents thumbnail view */
+  '3PageViewSelected': '3PageViewSelected'
+};