@internetarchive/bookreader 5.0.0-88-alpha.8 → 5.0.0-88-alpha.10

package/dist/esm/BookNavigator/assets/bookmark-colors.js

@@ -0,0 +1,4 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { css } from 'lit';
+export default css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .blue {\n    --iconFillColor: var(--blueBookmarkColor, #0023f5);\n  }\n\n  .red {\n    --iconFillColor: var(--redBookmarkColor, #eb3223);\n  }\n\n  .green {\n    --iconFillColor: var(--greenBookmarkColor, #75ef4c);\n  }\n"])));

package/dist/esm/BookNavigator/assets/button-base.js

@@ -0,0 +1,4 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { css } from 'lit';
+export default css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ia-button {\n    min-height: 3rem;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    color: var(--primaryTextColor);\n    line-height: normal;\n    border-radius: .4rem;\n    text-align: center;\n    vertical-align: middle;\n    font-size: 1.4rem;\n    font-family: inherit;\n    display: inline-block;\n    padding: .6rem 1.2rem;\n    border: 1px solid transparent;\n\n    white-space: nowrap;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    user-select: none;\n  }\n\n  .ia-button.link,\n  .ia-button.external {\n    min-height: unset;\n    text-decoration: none;\n  }\n\n  .ia-button:disabled,\n  .ia-button.disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .ia-button.transparent {\n    background-color: transparent;\n  }\n  \n  .ia-button.slim {\n    padding: 0;\n  }\n\n  .ia-button.primary {\n    background-color: var(--primaryCTAFill);\n    border-color: var(--primaryCTABorder);\n  }\n\n  .ia-button.cancel {\n    background-color: var(--primaryErrorCTAFill);\n    border-color: var(--primaryErrorCTABorder);\n  }\n\n  .ia-button.external {\n    background: var(--secondaryCTAFill);\n    border-color: var(--secondaryCTABorder);\n  }\n"])));

package/dist/esm/BookNavigator/assets/ia-logo.js

@@ -0,0 +1,4 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { svg } from 'lit';
+export default svg(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  <svg class=\"ia-logo\" width=\"27\" height=\"30\" viewBox=\"0 0 27 30\" xmlns=\"http://www.w3.org/2000/svg\" aria-labelledby=\"logoTitleID logoDescID\">\n    <title id=\"logoTitleID\">Internet Archive logo</title>\n    <desc id=\"logoDescID\">A line drawing of the Internet Archive headquarters building fa\xE7ade.</desc>\n    <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n      <mask id=\"mask-2\" fill=\"white\">\n        <path d=\"M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z\" id=\"path-1\"></path>\n      </mask>\n      <use fill=\"#FFFFFF\" xlink:href=\"#path-1\"></use>\n      <g mask=\"url(#mask-2)\" fill=\"#FFFFFF\">\n        <path d=\"M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z\" id=\"swatch\"></path>\n      </g>\n    </g>\n  </svg>\n"])));

package/dist/esm/BookNavigator/assets/icon_checkmark.js

@@ -0,0 +1,8 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { css } from 'lit';
+
+// Original SVG object for reference
+// <svg height="10" viewBox="0 0 13 10" width="13" xmlns="http://www.w3.org/2000/svg"><path d="m4.33333333 10-4.33333333-4.16666667 1.73333333-1.66666666 2.6 2.5 6.93333337-6.66666667 1.7333333 1.66666667z" fill="#fff" fill-rule="evenodd"/></svg>
+
+export default css(_templateObject || (_templateObject = _taggedTemplateLiteral(["data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgMTMgMTAiIHdpZHRoPSIxMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNC4zMzMzMzMzMyAxMC00LjMzMzMzMzMzLTQuMTY2NjY2NjcgMS43MzMzMzMzMy0xLjY2NjY2NjY2IDIuNiAyLjUgNi45MzMzMzMzNy02LjY2NjY2NjY3IDEuNzMzMzMzMyAxLjY2NjY2NjY3eiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+"])));

package/dist/esm/BookNavigator/assets/icon_close.js

@@ -0,0 +1,4 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { css } from 'lit';
+export default css(_templateObject || (_templateObject = _taggedTemplateLiteral(["data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1sYWJlbGxlZGJ5PSJjbG9zZVRpdGxlSUQgY2xvc2VEZXNjSUQiPjxwYXRoIGQ9Ik0yOS4xOTIgMTAuODA4YTEuNSAxLjUgMCAwMTAgMi4xMkwyMi4xMjIgMjBsNy4wNyA3LjA3MmExLjUgMS41IDAgMDEtMi4xMiAyLjEyMWwtNy4wNzMtNy4wNy03LjA3IDcuMDdhMS41IDEuNSAwIDAxLTIuMTIxLTIuMTJsNy4wNy03LjA3My03LjA3LTcuMDdhMS41IDEuNSAwIDAxMi4xMi0yLjEyMUwyMCAxNy44NzhsNy4wNzItNy4wN2ExLjUgMS41IDAgMDEyLjEyMSAweiIgY2xhc3M9ImZpbGwtY29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg=="])));

package/dist/esm/BookNavigator/book-navigator.js

@@ -0,0 +1,612 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// eslint-disable-next-line no-unused-vars
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+// eslint-disable-next-line no-unused-vars
+import { ModalManager } from '@internetarchive/modal-manager';
+import { css, html, LitElement, nothing } from 'lit';
+import SearchProvider from './search/search-provider.js';
+import DownloadProvider from './downloads/downloads-provider.js';
+import VisualAdjustmentProvider from './visual-adjustments/visual-adjustments-provider.js';
+import BookmarksProvider from './bookmarks/bookmarks-provider.js';
+import SharingProvider from './sharing.js';
+import ViewableFilesProvider from './viewable-files.js';
+import iaLogo from './assets/ia-logo.js';
+var events = {
+  menuUpdated: 'menuUpdated',
+  updateSideMenu: 'updateSideMenu',
+  PostInit: 'PostInit',
+  ViewportInFullScreen: 'ViewportInFullScreen'
+};
+export class BookNavigator extends LitElement {
+  static get properties() {
+    return {
+      itemMD: {
+        type: Object
+      },
+      bookReaderLoaded: {
+        type: Boolean
+      },
+      bookreader: {
+        type: Object
+      },
+      bookIsRestricted: {
+        type: Boolean
+      },
+      downloadableTypes: {
+        type: Array
+      },
+      isAdmin: {
+        type: Boolean
+      },
+      lendingInitialized: {
+        type: Boolean
+      },
+      lendingStatus: {
+        type: Object
+      },
+      menuProviders: {
+        type: Object
+      },
+      menuShortcuts: {
+        type: Array
+      },
+      signedIn: {
+        type: Boolean
+      },
+      loaded: {
+        type: Boolean
+      },
+      sharedObserver: {
+        type: Object,
+        attribute: false
+      },
+      modal: {
+        type: Object,
+        attribute: false
+      },
+      fullscreenBranding: {
+        type: Object
+      }
+    };
+  }
+  constructor() {
+    super();
+    this.itemMD = undefined;
+    this.loaded = false;
+    this.bookReaderCannotLoad = false;
+    this.bookReaderLoaded = false;
+    this.bookreader = null;
+    this.bookIsRestricted = false;
+    this.downloadableTypes = [];
+    this.isAdmin = false;
+    this.lendingInitialized = false;
+    this.lendingStatus = {};
+    this.menuProviders = {};
+    this.menuShortcuts = [];
+    this.signedIn = false;
+    /** @type {ModalManager} */
+    this.modal = undefined;
+    /** @type {SharedResizeObserver} */
+    this.sharedObserver = undefined;
+    this.fullscreenBranding = iaLogo;
+    // Untracked properties
+    this.sharedObserverHandler = undefined;
+    this.brWidth = 0;
+    this.brHeight = 0;
+    this.shortcutOrder = [
+    /**
+     * sets exit FS button (`this.fullscreenBranding1)
+     * when `br.options.enableFSLogoShortcut`
+     */
+    'fullscreen', 'volumes', 'chapters', 'search', 'bookmarks'];
+  }
+  disconnectedCallback() {
+    this.sharedObserver.removeObserver({
+      target: this.mainBRContainer,
+      handler: this.sharedObserverHandler
+    });
+  }
+  firstUpdated() {
+    this.bindEventListeners();
+    this.emitPostInit();
+    this.loaded = true;
+  }
+  updated(changed) {
+    if (!this.bookreader || !this.itemMD || !this.bookReaderLoaded) {
+      return;
+    }
+    var reload = changed.has('loaded') && this.loaded;
+    if (reload || changed.has('itemMD') || changed.has('bookreader') || changed.has('signedIn') || changed.has('isAdmin') || changed.has('modal')) {
+      this.initializeBookSubmenus();
+    }
+    if (changed.has('sharedObserver') && this.bookreader) {
+      this.loadSharedObserver();
+      this.initializeBookSubmenus();
+    }
+    if (changed.has('downloadableTypes')) {
+      this.initializeBookSubmenus();
+    }
+  }
+
+  /**
+   * Global event emitter for when Book Navigator loads
+   */
+  emitPostInit() {
+    var _this$bookreader;
+    // emit global event when book nav has loaded with current bookreader selector
+    this.dispatchEvent(new CustomEvent("BrBookNav:".concat(events.PostInit), {
+      detail: {
+        brSelector: (_this$bookreader = this.bookreader) === null || _this$bookreader === void 0 ? void 0 : _this$bookreader.el
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  /**
+   *  @typedef {{
+   *  baseHost: string,
+   *  modal: ModalManager,
+   *  sharedObserver: SharedResizeObserver,
+   *  bookreader: BookReader,
+   *  item: Item,
+   *  signedIn: boolean,
+   *  isAdmin: boolean,
+   *  onProviderChange: (BookReader, object) => void,
+   *  }} baseProviderConfig
+   *
+   * @return {baseProviderConfig}
+   */
+  get baseProviderConfig() {
+    return {
+      baseHost: this.baseHost,
+      modal: this.modal,
+      sharedObserver: this.sharedObserver,
+      bookreader: this.bookreader,
+      item: this.itemMD,
+      signedIn: this.signedIn,
+      isAdmin: this.isAdmin,
+      onProviderChange: () => {}
+    };
+  }
+  get isWideEnoughToOpenMenu() {
+    return this.brWidth >= 640;
+  }
+  /**
+   * Instantiates books submenus & their update callbacks
+   *
+   * NOTE: we are doing our best to scope bookreader's instance.
+   * If your submenu provider uses a bookreader instance to read, manually
+   * manipulate BookReader, please update the navigator's instance of it
+   * to keep it in sync.
+   */
+  initializeBookSubmenus() {
+    var _this = this;
+    var providers = {
+      visualAdjustments: new VisualAdjustmentProvider(_objectSpread(_objectSpread({}, this.baseProviderConfig), {}, {
+        /** Update menu contents */
+        onProviderChange: () => {
+          this.updateMenuContents();
+        }
+      }))
+    };
+    if (this.baseProviderConfig.item) {
+      // Share options currently rely on IA item metadata
+      providers.share = new SharingProvider(this.baseProviderConfig);
+    }
+    if (this.shouldShowDownloadsMenu()) {
+      providers.downloads = new DownloadProvider(this.baseProviderConfig);
+    }
+    if (this.bookreader.options.enableSearch) {
+      providers.search = new SearchProvider(_objectSpread(_objectSpread({}, this.baseProviderConfig), {}, {
+        /**
+         * Search specific menu updates
+         * @param {BookReader} brInstance
+         * @param {{ searchCanceled: boolean }} searchUpdates
+         */
+        onProviderChange: function onProviderChange() {
+          var brInstance = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+          var searchUpdates = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+          if (brInstance) {
+            /* refresh br instance reference */
+            _this.bookreader = brInstance;
+          }
+          _this.updateMenuContents();
+          if (searchUpdates.openMenu === false) {
+            return;
+          }
+          if (_this.isWideEnoughToOpenMenu && !(searchUpdates !== null && searchUpdates !== void 0 && searchUpdates.searchCanceled)) {
+            /* open side search menu */
+            setTimeout(() => {
+              _this.updateSideMenu('search', 'open');
+            }, 0);
+          }
+        }
+      }));
+    }
+    if (this.bookreader.options.enableBookmarks) {
+      providers.bookmarks = new BookmarksProvider(_objectSpread(_objectSpread({}, this.baseProviderConfig), {}, {
+        onProviderChange: bookmarks => {
+          var method = Object.keys(bookmarks).length ? 'add' : 'remove';
+          this["".concat(method, "MenuShortcut")]('bookmarks');
+          this.updateMenuContents();
+        }
+      }));
+    }
+
+    // add shortcut for volumes if multipleBooksList exists
+    if (this.bookreader.options.enableMultipleBooks) {
+      providers.volumes = new ViewableFilesProvider(_objectSpread(_objectSpread({}, this.baseProviderConfig), {}, {
+        onProviderChange: function onProviderChange() {
+          var brInstance = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+          var volumesUpdates = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+          if (brInstance) {
+            /* refresh br instance reference */
+            _this.bookreader = brInstance;
+          }
+          _this.updateMenuContents();
+          if (_this.isWideEnoughToOpenMenu) {
+            /* open side search menu */
+            setTimeout(() => {
+              _this.updateSideMenu('volumes', 'open');
+            });
+          }
+        }
+      }));
+    }
+    Object.assign(this.menuProviders, providers);
+    this.addMenuShortcut('search');
+    this.addMenuShortcut('volumes');
+    this.updateMenuContents();
+  }
+
+  /** gets element that houses the bookreader in light dom */
+  get mainBRContainer() {
+    var _this$bookreader2;
+    return document.querySelector((_this$bookreader2 = this.bookreader) === null || _this$bookreader2 === void 0 ? void 0 : _this$bookreader2.el);
+  }
+
+  /** Fullscreen Shortcut */
+  addFullscreenShortcut() {
+    var closeFS = {
+      icon: this.fullscreenShortcut,
+      id: 'fullscreen'
+    };
+    this.menuShortcuts.push(closeFS);
+    this.sortMenuShortcuts();
+    this.emitMenuShortcutsUpdated();
+  }
+  deleteFullscreenShortcut() {
+    var updatedShortcuts = this.menuShortcuts.filter(_ref => {
+      var {
+        id
+      } = _ref;
+      return id !== 'fullscreen';
+    });
+    this.menuShortcuts = updatedShortcuts;
+    this.sortMenuShortcuts();
+    this.emitMenuShortcutsUpdated();
+  }
+  closeFullscreen() {
+    this.bookreader.exitFullScreen();
+  }
+  get fullscreenShortcut() {
+    return html(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      <button\n        @click=", "\n        title=\"Exit fullscreen view\"\n      >", "</button>\n    "])), () => this.closeFullscreen(), this.fullscreenBranding);
+  }
+  /** End Fullscreen Shortcut */
+
+  /**
+   * Open side menu
+   * @param {string} menuId
+   * @param {('open'|'close'|'toggle')} action
+   */
+  updateSideMenu() {
+    var menuId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'open';
+    if (!menuId) {
+      return;
+    }
+    var event = new CustomEvent(events.updateSideMenu, {
+      detail: {
+        menuId,
+        action
+      }
+    });
+    this.dispatchEvent(event);
+  }
+
+  /**
+   * Sets order of menu and emits custom event when done
+   */
+  updateMenuContents() {
+    var {
+      search,
+      downloads,
+      visualAdjustments,
+      share,
+      bookmarks,
+      volumes,
+      chapters
+    } = this.menuProviders;
+    var availableMenus = [volumes, chapters, search, bookmarks, visualAdjustments, share].filter(menu => !!menu);
+    if (this.shouldShowDownloadsMenu()) {
+      downloads === null || downloads === void 0 || downloads.update(this.downloadableTypes);
+      availableMenus.splice(-2, 0, downloads);
+    }
+    var event = new CustomEvent(events.menuUpdated, {
+      detail: availableMenus
+    });
+    this.dispatchEvent(event);
+  }
+
+  /**
+   * Confirms if we should show the downloads menu
+   * @returns {bool}
+   */
+  shouldShowDownloadsMenu() {
+    if (!this.downloadableTypes.length) {
+      return false;
+    }
+    if (this.bookIsRestricted === false) {
+      return true;
+    }
+    if (this.isAdmin) {
+      return true;
+    }
+    var {
+      user_loan_record = {}
+    } = this.lendingStatus;
+    var hasNoLoanRecord = Array.isArray(user_loan_record); /* (bc PHP assoc. arrays) */
+
+    if (hasNoLoanRecord) {
+      return false;
+    }
+    var hasValidLoan = user_loan_record.type && user_loan_record.type !== 'SESSION_LOAN';
+    return hasValidLoan;
+  }
+
+  /**
+   * Adds a provider object to the menuShortcuts array property if it isn't
+   * already added. menuShortcuts are then sorted by shortcutOrder and
+   * a menuShortcutsUpdated event is emitted.
+   *
+   * @param {string} menuId - a string matching the id property of a provider
+   */
+  addMenuShortcut(menuId) {
+    if (this.menuShortcuts.find(m => m.id === menuId)) {
+      // menu is already there
+      return;
+    }
+    if (!this.menuProviders[menuId]) {
+      // no provider for this menu
+      return;
+    }
+    this.menuShortcuts.push(this.menuProviders[menuId]);
+    this.sortMenuShortcuts();
+    this.emitMenuShortcutsUpdated();
+  }
+
+  /**
+   * Removes a provider object from the menuShortcuts array and emits a
+   * menuShortcutsUpdated event.
+   *
+   * @param {string} menuId - a string matching the id property of a provider
+   */
+  removeMenuShortcut(menuId) {
+    this.menuShortcuts = this.menuShortcuts.filter(m => m.id !== menuId);
+    this.emitMenuShortcutsUpdated();
+  }
+
+  /**
+   * Sorts the menuShortcuts property by comparing each provider's id to
+   * the id in each iteration over the shortcutOrder array.
+   */
+  sortMenuShortcuts() {
+    this.menuShortcuts = this.shortcutOrder.reduce((shortcuts, id) => {
+      var menu = this.menuShortcuts.find(m => m.id === id);
+      if (menu) {
+        shortcuts.push(menu);
+      }
+      return shortcuts;
+    }, []);
+  }
+  emitMenuShortcutsUpdated() {
+    var event = new CustomEvent('menuShortcutsUpdated', {
+      detail: this.menuShortcuts
+    });
+    this.dispatchEvent(event);
+  }
+  emitLoadingStatusUpdate(loaded) {
+    var event = new CustomEvent('loadingStateUpdated', {
+      detail: {
+        loaded
+      }
+    });
+    this.dispatchEvent(event);
+  }
+
+  /**
+   * Core bookreader event handler registry
+   *
+   * NOTE: we are trying to keep bookreader's instance in scope
+   * Please update Book Navigator's instance reference of it to keep it current
+   */
+  bindEventListeners() {
+    window.addEventListener('BookReader:PostInit', e => {
+      this.bookreader = e.detail.props;
+      this.bookreader.shell = this;
+      this.bookReaderLoaded = true;
+      this.bookReaderCannotLoad = false;
+      this.emitLoadingStatusUpdate(true);
+      this.loadSharedObserver();
+      setTimeout(() => {
+        this.bookreader.resize();
+      }, 0);
+    });
+    window.addEventListener('BookReader:fullscreenToggled', event => {
+      var {
+        detail: {
+          props: brInstance = null
+        }
+      } = event;
+      if (brInstance) {
+        this.bookreader = brInstance;
+      }
+      this.manageFullScreenBehavior();
+    }, {
+      passive: true
+    });
+    window.addEventListener('BookReader:ToggleSearchMenu', event => {
+      this.dispatchEvent(new CustomEvent(events.updateSideMenu, {
+        detail: {
+          menuId: 'search',
+          action: 'toggle'
+        }
+      }));
+    });
+    window.addEventListener('LendingFlow:PostInit', _ref2 => {
+      var {
+        detail
+      } = _ref2;
+      var {
+        downloadTypesAvailable,
+        lendingStatus,
+        isAdmin,
+        previewType
+      } = detail;
+      this.lendingInitialized = true;
+      this.downloadableTypes = downloadTypesAvailable;
+      this.lendingStatus = lendingStatus;
+      this.isAdmin = isAdmin;
+      this.bookReaderCannotLoad = previewType === 'singlePagePreview';
+      this.emitLoadingStatusUpdate(true);
+    });
+    window.addEventListener('BRJSIA:PostInit', _ref3 => {
+      var {
+        detail
+      } = _ref3;
+      var {
+        isRestricted,
+        downloadURLs
+      } = detail;
+      this.bookReaderLoaded = true;
+      this.downloadableTypes = downloadURLs;
+      this.bookIsRestricted = isRestricted;
+    });
+    window.addEventListener('contextmenu', e => this.manageContextMenuVisibility(e), {
+      capture: true
+    });
+  }
+
+  /** Display an element's context menu */
+  manageContextMenuVisibility(e) {
+    var _window$archive_analy, _e$target;
+    (_window$archive_analy = window.archive_analytics) === null || _window$archive_analy === void 0 || _window$archive_analy.send_event('BookReader', "contextmenu-".concat(this.bookIsRestricted ? 'restricted' : 'unrestricted'), (_e$target = e.target) === null || _e$target === void 0 || (_e$target = _e$target.classList) === null || _e$target === void 0 ? void 0 : _e$target.value);
+    if (!this.bookIsRestricted) {
+      return;
+    }
+    var imagePane = e.target.classList.value.match(/BRscreen|BRpageimage/g);
+    if (!imagePane) {
+      return;
+    }
+    e.preventDefault();
+    return false;
+  }
+  loadSharedObserver() {
+    var _this$sharedObserver;
+    this.sharedObserverHandler = {
+      handleResize: this.handleResize.bind(this)
+    };
+    (_this$sharedObserver = this.sharedObserver) === null || _this$sharedObserver === void 0 || _this$sharedObserver.addObserver({
+      target: this.mainBRContainer,
+      handler: this.sharedObserverHandler
+    });
+  }
+
+  /**
+   * Uses resize observer to fire BookReader's `resize` functionality
+   * We do not want to trigger resize IF:
+   *  - book animation is happening
+   *  - book is in fullscreen (fullscreen is handled separately)
+   *
+   * @param { target: HTMLElement, contentRect: DOMRectReadOnly } entry
+   */
+  handleResize(_ref4) {
+    var {
+      contentRect,
+      target
+    } = _ref4;
+    var startBrWidth = this.brWidth;
+    var startBrHeight = this.brHeight;
+    var {
+      animating
+    } = this.bookreader;
+    if (target === this.mainBRContainer) {
+      this.brWidth = contentRect.width;
+      this.brHeight = contentRect.height;
+    }
+    if (!startBrWidth && this.brWidth) {
+      // loading up, let's update side menus
+      this.initializeBookSubmenus();
+    }
+    var widthChange = startBrWidth !== this.brWidth;
+    var heightChange = startBrHeight !== this.brHeight;
+    if (!animating && (widthChange || heightChange)) {
+      var _this$bookreader3;
+      (_this$bookreader3 = this.bookreader) === null || _this$bookreader3 === void 0 || _this$bookreader3.resize();
+    }
+  }
+
+  /**
+   * Manages Fullscreen behavior
+   * This makes sure that controls are _always_ in view
+   * We need this to accommodate LOAN BAR during fullscreen
+   */
+  manageFullScreenBehavior() {
+    this.emitFullScreenState();
+    if (!this.bookreader.options.enableFSLogoShortcut) {
+      return;
+    }
+    var isFullScreen = this.bookreader.isFullscreen();
+    if (isFullScreen) {
+      this.addFullscreenShortcut();
+    } else {
+      this.deleteFullscreenShortcut();
+    }
+  }
+
+  /**
+   * Relays fullscreen toggle events
+   */
+  emitFullScreenState() {
+    var isFullScreen = this.bookreader.isFullscreen();
+    var event = new CustomEvent('ViewportInFullScreen', {
+      detail: {
+        isFullScreen
+      }
+    });
+    this.dispatchEvent(event);
+  }
+  get itemImage() {
+    var _this$itemMD;
+    var identifier = (_this$itemMD = this.itemMD) === null || _this$itemMD === void 0 ? void 0 : _this$itemMD.metadata.identifier;
+    var url = "https://".concat(this.baseHost, "/services/img/").concat(identifier);
+    return html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["<img class=\"cover-img\" src=", " alt=\"cover image for ", "\">"])), url, identifier);
+  }
+  get placeholder() {
+    return html(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["<div class=\"placeholder\">", "</div>"])), this.itemImage);
+  }
+  render() {
+    return html(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["<div id=\"book-navigator__root\">\n      ", "\n      ", "\n    </div>\n  "])), this.bookReaderCannotLoad ? this.placeholder : nothing, !this.bookReaderCannotLoad ? html(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["<slot name=\"main\"></slot>"]))) : nothing);
+  }
+  static get styles() {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    :host,\n    #book-navigator__root,\n    slot,\n    slot > * {\n      display: block;\n      height: inherit;\n      width: inherit;\n    }\n    .placeholder {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-direction: column;\n      margin: 5%;\n    }\n    .cover-img {\n      max-height: 300px;\n    }\n  "])));
+  }
+}
+customElements.define('book-navigator', BookNavigator);

package/dist/esm/BookNavigator/bookmarks/bookmark-button.js

@@ -0,0 +1,35 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { LitElement, html, css } from 'lit';
+export default class BookmarkButton extends LitElement {
+  static get styles() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      button {\n        -webkit-appearance: none;\n        appearance: none;\n        outline: 0;\n        border: none;\n        padding: 0;\n        height: 4rem;\n        width: 4rem;\n        background: transparent;\n        cursor: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 16 24' width='16'%3E%3Cg fill='%23333' fill-rule='evenodd'%3E%3Cpath d='m15 0c.5522847 0 1 .44771525 1 1v23l-8-5.4545455-8 5.4545455v-23c0-.55228475.44771525-1 1-1zm-2 2h-10c-.51283584 0-.93550716.38604019-.99327227.88337887l-.00672773.11662113v18l6-4.3181818 6 4.3181818v-18c0-.51283584-.3860402-.93550716-.8833789-.99327227z'/%3E%3Cpath d='m8.75 6v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25v-2.25z' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E\"), pointer;\n        position: relative;\n      }\n      button > * {\n        display: block;\n        position: absolute;\n        top: 0.2rem;\n      }\n      button.left > * {\n        left: 0.2rem;\n      }\n\n      button.right > * {\n        right: 0.2rem;\n      }\n    "])));
+  }
+  static get properties() {
+    return {
+      side: {
+        type: String
+      },
+      state: {
+        type: String
+      }
+    };
+  }
+  constructor() {
+    super();
+    this.state = 'hollow';
+    this.side = undefined;
+  }
+  handleClick(e) {
+    e.preventDefault();
+    this.dispatchEvent(new CustomEvent('bookmarkButtonClicked'));
+  }
+  get title() {
+    return "".concat(this.state === 'hollow' ? 'Add' : 'Remove', " bookmark");
+  }
+  render() {
+    var position = this.side || 'right';
+    return html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      <button title=", " @click=", " class=", ">\n        <icon-bookmark state=", "></icon-bookmark>\n      </button>\n    "])), this.title, this.handleClick, position, this.state);
+  }
+}
+customElements.define('bookmark-button', BookmarkButton);