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

package/dist/esm/BookReader/PageContainer.js

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

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

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

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