@internetarchive/bookreader 5.0.0-6-multiple-files → 5.0.0-60

package/src/css/_BRsearch.scss

@@ -25,16 +25,31 @@
 }
 
 #{$brScope} {
-  .BookReaderSearchHilite {
-    opacity: 0.20;
-    filter: alpha(opacity = 20);
-    background-color: #0000ff;
-    position: absolute;
-    /* z-index is important */
-    z-index: $brZindexBase + 3;
+  // FIXME: .ttsHiliteLayer should probably not be in this file,
+  // but they appear the same in the UI.
+  .searchHiliteLayer, .ttsHiliteLayer {
+    pointer-events: none;
+
+    rect {
+      // Note: Can't use fill-opacity ; safari inexplicably applies that to
+      // the outline as well
+      fill: rgba(0, 0, 255, 0.2);
+    }
+  }
+
+  .searchHiliteLayer rect {
+    animation: highlightFocus 600ms 1 reverse;
+    stroke: blue;
+    stroke-width: 4px;
 
-    animation: hiliteFadeIn .2s;
+    // Sass for loop for nth-child animation delay
+    @for $i from 1 through 10 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{($i - 1) * 50}ms;
+      }
+    }
   }
+
   .BRchapter, .BRsearch {
     position: absolute;
     bottom: 0;  /* Relative to nav line */
@@ -145,211 +160,6 @@
     }
   }
 
-  .BRbooksearch.mobile {
-    position: relative;
-    top: 0;
-    display: flex;
-    flex-direction: row;
-
-    .BRsearchInput {
-      -webkit-appearance: none;
-      position: relative;
-      min-width: 100px;
-      float: left;
-      font-size: $brFontSizeBase;
-      width: 150px;
-      height: 30px;
-      border: 1px solid $brColorLightBorder;
-      flex: 1;
-      border-radius: 0;
-    }
-    .BRsearchSubmit {
-      width: 30px;
-      height: 30px;
-      border: none;
-      background-color: $brColorThemeblue;
-      background-image: url("images/icon_search_button.svg");
-      background-repeat: no-repeat;
-      background-position: center center;
-
-      text-align: center;
-      color: white;
-      overflow: hidden;
-      box-sizing: border-box;
-      display: inline-block;
-    }
-  }
-
-  #BRsearch_tray {
-    --menuSliderBg: #151515;
-    --primaryTextColor: #fff;
-    --activeButtonBg: #282828;
-    --searchResultText: #adaedc;
-    --searchResultBg: #272958;
-    --searchResultBorder: #fff;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    padding: 15px 10px;
-    overflow-y: auto;
-    font-size: 14px;
-    color: var(--primaryTextColor);
-    background: var(--menuSliderBg);
-
-    header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    h3 {
-      padding: 0;
-      margin: 0 10px 0 0;
-      font-size: 20px;
-    }
-
-    header p {
-      display: none;
-      padding: 0;
-      margin: 0;
-      font-size: 12px;
-      font-weight: bold;
-      font-style: italic;
-    }
-    header p.visible {
-      display: block;
-    }
-
-    header div {
-      display: flex;
-      align-items: baseline;
-    }
-
-    a.close {
-      justify-self: end;
-    }
-
-    fieldset {
-      padding: 20px 0 10px 0;
-      border: none;
-    }
-
-    [type="checkbox"] {
-      display: none;
-    }
-
-    #all_files {
-      display: none;
-      + label {
-        display: none;
-      }
-    }
-
-    label {
-      display: block;
-      text-align: center;
-    }
-
-    label.checkbox {
-      padding-bottom: 5px;
-      font-size: 16px;
-      line-height: 150%;
-      vertical-align: middle;
-    }
-
-    label.checkbox:after {
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      margin-left: 7px;
-      content: "";
-      color: var(--primaryTextColor);
-      border: 1px solid var(--primaryTextColor);
-      border-radius: 2px;
-      background: var(--activeButtonBg) 50% 50% no-repeat;
-    }
-      :checked + label.checkbox:after {
-      background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgMTMgMTAiIHdpZHRoPSIxMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNC4zMzMzMzMzMyAxMC00LjMzMzMzMzMzLTQuMTY2NjY2NjcgMS43MzMzMzMzMy0xLjY2NjY2NjY2IDIuNiAyLjUgNi45MzMzMzMzNy02LjY2NjY2NjY3IDEuNzMzMzMzMyAxLjY2NjY2NjY3eiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+');
-    }
-
-    [type="search"] {
-      -webkit-appearance: textfield;
-      width: 100%;
-      height: 22px;
-      padding: 0 15px;
-      box-sizing: border-box;
-      font: normal 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
-      color: var(--primaryTextColor);
-      border: 1px solid var(--primaryTextColor);
-      border-radius: 15px;
-      background: transparent;
-    }
-    [type="search"]:focus {
-      outline: none;
-    }
-    [type="search"]::-webkit-search-cancel-button {
-      width: 18px;
-      height: 18px;
-      -webkit-appearance: none;
-      appearance: none;
-      /* Uses an X SVG shape as a mask */
-      -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1sYWJlbGxlZGJ5PSJjbG9zZVRpdGxlSUQgY2xvc2VEZXNjSUQiPjxwYXRoIGQ9Ik0yOS4xOTIgMTAuODA4YTEuNSAxLjUgMCAwMTAgMi4xMkwyMi4xMjIgMjBsNy4wNyA3LjA3MmExLjUgMS41IDAgMDEtMi4xMiAyLjEyMWwtNy4wNzMtNy4wNy03LjA3IDcuMDdhMS41IDEuNSAwIDAxLTIuMTIxLTIuMTJsNy4wNy03LjA3My03LjA3LTcuMDdhMS41IDEuNSAwIDAxMi4xMi0yLjEyMUwyMCAxNy44NzhsNy4wNzItNy4wN2ExLjUgMS41IDAgMDEyLjEyMSAweiIgY2xhc3M9ImZpbGwtY29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==') 0 0 no-repeat;
-      mask: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1sYWJlbGxlZGJ5PSJjbG9zZVRpdGxlSUQgY2xvc2VEZXNjSUQiPjxwYXRoIGQ9Ik0yOS4xOTIgMTAuODA4YTEuNSAxLjUgMCAwMTAgMi4xMkwyMi4xMjIgMjBsNy4wNyA3LjA3MmExLjUgMS41IDAgMDEtMi4xMiAyLjEyMWwtNy4wNzMtNy4wNy03LjA3IDcuMDdhMS41IDEuNSAwIDAxLTIuMTIxLTIuMTJsNy4wNy03LjA3My03LjA3LTcuMDdhMS41IDEuNSAwIDAxMi4xMi0yLjEyMUwyMCAxNy44NzhsNy4wNzItNy4wN2ExLjUgMS41IDAgMDEyLjEyMSAweiIgY2xhc3M9ImZpbGwtY29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==') 0 0 no-repeat;
-      -webkit-mask-size: 100%;
-      mask-size: 100%;
-      background: #fff;
-    }
-
-    ul {
-      padding: 0;
-      margin: 0;
-      list-style: none;
-    }
-
-    li {
-      margin-bottom: 20px;
-      border-bottom: 1px solid $white;
-      &:after {
-        display: none;
-      }
-    }
-
-    li img {
-      display: block;
-      width: 100%;
-    }
-
-    li h4 {
-      padding: 0 0 20px 0;
-      margin: 0;
-      font-size: 14px;
-      font-weight: normal;
-    }
-
-    li p {
-      padding: 0 0 15px 0;
-      margin: 0;
-      font-size: 12px;
-    }
-
-    mark {
-      padding: 0 2px;
-      color: var(--searchResultText);
-      background: var(--searchResultBg);
-      border: 1px solid var(--searchResultBorder);
-      border-radius: 2px;
-    }
-
-    #search_pending {
-      display: none;
-    }
-    #search_pending.visible {
-      display: block;
-    }
-  }
-
   .BRsearch-navigation {
     position: relative;
     z-index: 1;
@@ -410,9 +220,8 @@
   }
 }
 
-@keyframes hiliteFadeIn {
-  from { opacity: 0; }
-  to { opacity: 0.2; }
+@keyframes highlightFocus {
+  to { stroke-width: 20px; }
 }
 
 /* Mid size breakpoint */

package/src/css/_TextSelection.scss

@@ -1,9 +1,6 @@
 .textSelectionSVG {
-    width: 100%;
-    position: absolute;
-    height: 100%;
-    top: 0;
-    left: 0;
+    z-index: 2;
+
     // Make it so right-clicking on "blank" part of svg sends events to the image (for saving)
     pointer-events: none;
     .BRwordElement { pointer-events: all; }
@@ -22,27 +19,29 @@
     }
 
     .BRparagElement {
-        fill: red;
+        fill: transparent;
         cursor: text;
         white-space: pre;
-        fill-opacity: 0;
         font-family: Georgia, serif;
     }
 }
 
+// Hide text layer for performance during zooming & scrolling
+.BRsmooth-zooming, .BRscrolling-active {
+    .textSelectionSVG {
+        display: none;
+    }
+}
+
+// Hide text selection layers of off-screen pages, and only display
+// 2 text layers regardless of zoom level
+.BRmode1up .BRpagecontainer:not(.BRpage-visible) .textSelectionSVG {
+    display: none;
+}
+
 // Makes page image unselectable
 .BRpagecontainer img {
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
 }
-
-// Hides svg text layer when page animation is running
-.BRpageFlipping .textSelectionSVG {
-    display: none;
-}
-
-// Hide phantom page when last page is selected
-.BRpagecontainer.BRemptypage .textSelectionSVG{
-    display: none;
-}

package/src/css/_colorbox.scss

@@ -46,7 +46,7 @@
         }
         #cboxLoadingOverlay{background:transparent;}
 
-.shift{
+.br-colorbox-shift {
     position: absolute !important;
     left: -10000px !important;
-}
+}

package/src/css/_controls.scss

@@ -28,24 +28,32 @@
     }
   }
 
-  select.playback-speed {
-    width: 24px;
+  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;
-    background: transparent url("icons/playback-speed.svg") 50% 0 no-repeat;
-    option {
+    option, optgroup {
       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;
   }
@@ -100,6 +108,10 @@
     &.visible {
       display: flex;
       animation: slideUp 0.2s;
+      button {
+        width: unset;
+        height: unset;
+      }
     }
 
     li {

package/src/css/_icons.scss

@@ -37,7 +37,7 @@
 }
 
 .icon-fullscreen-exit {
-  background-image: url("icons/fullscreen-exit.svg");
+  background-image: url("icons/fullscreen_exit.svg");
 }
 
 .icon-thumb {
@@ -113,3 +113,9 @@
   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/ia-bookreader/ia-bookreader.js

@@ -0,0 +1,224 @@
+/**
+ * BookReaderTemplate to load BookNavigator components
+ */
+
+import { LitElement, html, css } from 'lit';
+
+import '@internetarchive/ia-item-navigator';
+import '../BookNavigator/book-navigator.js';
+// eslint-disable-next-line no-unused-vars
+import { ModalManager } from '@internetarchive/modal-manager';
+import '@internetarchive/modal-manager';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+
+export class IaBookReader extends LitElement {
+  static get properties() {
+    return {
+      item: { type: Object },
+      baseHost: { type: String },
+      signedIn: { type: Boolean },
+      fullscreen: { type: Boolean, reflect: true, attribute: true },
+      sharedObserver: { type: Object, attribute: false },
+      modal: { type: Object, attribute: false },
+      loaded: { type: Boolean },
+      menuShortcuts: { type: Array },
+      menuContents: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+    this.item = undefined;
+    this.bookreader = undefined;
+    this.baseHost = 'https://archive.org';
+    this.fullscreen = false;
+    this.signedIn = false;
+    /** @type {ModalManager} */
+    this.modal = undefined;
+    /** @type {SharedResizeObserver} */
+    this.sharedObserver = undefined;
+    this.loaded = false;
+    this.menuShortcuts = [];
+    this.menuContents = [];
+    this.openMenuName = '';
+  }
+
+  updated() {
+    if (!this.modal) {
+      this.setModalManager();
+    }
+
+    if (!this.sharedObserver) {
+      this.sharedObserver = new SharedResizeObserver();
+    }
+  }
+
+  get itemNav() {
+    return this.shadowRoot.querySelector('ia-item-navigator');
+  }
+
+  /** Creates modal DOM & attaches to `<body>` */
+  setModalManager() {
+    let modalManager = document.querySelector('modal-manager');
+    if (!modalManager) {
+      modalManager = document.createElement(
+        'modal-manager'
+      );
+      document.body.appendChild(modalManager);
+    }
+
+    this.modal = modalManager;
+  }
+
+  manageFullscreen(e) {
+    const { detail } = e;
+    const fullscreen = !!detail.isFullScreen;
+    this.fullscreen = fullscreen;
+    this.dispatchEvent(new CustomEvent('fullscreenStateUpdated', { detail: { fullscreen }}));
+
+  }
+
+  loadingStateUpdated(e) {
+    const { loaded } = e.detail;
+    this.loaded = loaded || null;
+    this.dispatchEvent(new CustomEvent('loadingStateUpdated', { detail: { loaded }}));
+  }
+
+  setMenuShortcuts(e) {
+    this.menuShortcuts = [...e.detail];
+  }
+
+  setMenuContents(e) {
+    const updatedContents = [...e.detail];
+    this.menuContents = updatedContents;
+  }
+
+  manageSideMenuEvents(e) {
+    const { menuId, action } = e.detail;
+    if (!menuId) {
+      return;
+    }
+
+    this.openMenuName = menuId;
+
+    if (action === 'open') {
+      this.itemNav?.openShortcut(menuId);
+    } else if (action === 'toggle') {
+      this.itemNav?.toggleMenu();
+    }
+  }
+
+  render() {
+    return html`
+      <div class="main-component">
+        <ia-item-navigator
+          ?viewportInFullscreen=${this.fullscreen}
+          .basehost=${this.baseHost}
+          .item=${this.item}
+          .modal=${this.modal}
+          .loaded=${this.loaded}
+          .sharedObserver=${this.sharedObserver}
+          ?signedIn=${this.signedIn}
+          .menuShortcuts=${this.menuShortcuts}
+          .menuContents=${this.menuContents}
+          .openMenu=${this.openMenuName}
+        >
+          <div slot="header">
+            <slot name="header"></slot>
+          </div>
+          <div slot="main">
+            <book-navigator
+              .modal=${this.modal}
+              .baseHost=${this.baseHost}
+              .itemMD=${this.item}
+              ?signedIn=${this.signedIn}
+              ?sideMenuOpen=${this.menuOpened}
+              .sharedObserver=${this.sharedObserver}
+              @ViewportInFullScreen=${this.manageFullscreen}
+              @loadingStateUpdated=${this.loadingStateUpdated}
+              @updateSideMenu=${this.manageSideMenuEvents}
+              @menuUpdated=${this.setMenuContents}
+              @menuShortcutsUpdated=${this.setMenuShortcuts}
+            >
+              <div slot="main">
+                <slot name="main"></slot>
+              </div>
+            </book-navigator>
+          </div>
+        </ia-item-navigator>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        --primaryBGColor: var(--black, #000);
+        --secondaryBGColor: #222;
+        --tertiaryBGColor: #333;
+        --primaryTextColor: var(--white, #fff);
+        --primaryCTAFill: #194880;
+        --primaryCTABorder: #c5d1df;
+        --secondaryCTAFill: #333;
+        --secondaryCTABorder: #999;
+        --primaryErrorCTAFill: #e51c26;
+        --primaryErrorCTABorder: #f8c6c8;
+        background-color: var(--primaryBGColor);
+        position: relative;
+      }
+
+      :host([fullscreen]),
+      ia-item-navigator[viewportinfullscreen] {
+        position: fixed;
+        inset: 0;
+        height: 100%;
+        min-height: unset;
+      }
+
+      .main-component {
+        height: 100%;
+        width: 100%;
+        min-height: inherit;
+      }
+
+      div[slot="header"],
+      div[slot="main"] {
+        display: flex;
+        width: 100%;
+      }
+
+      slot {
+        display: block;
+        flex: 1;
+      }
+
+      ia-item-navigator {
+        min-height: var(--br-height, inherit);
+        height: var(--br-height, inherit);
+        display: block;
+        width: 100%;
+        color: var(--primaryTextColor);
+        --menuButtonLabelDisplay: block;
+        --menuWidth: 320px;
+        --menuSliderBg: var(--secondaryBGColor);
+        --activeButtonBg: var(--tertiaryBGColor);
+        --subpanelRightBorderColor: var(--secondaryCTABorder);
+        --animationTiming: 100ms;
+        --iconFillColor: var(--primaryTextColor);
+        --iconStrokeColor: var(--primaryTextColor);
+        --menuSliderHeaderIconHeight: 2rem;
+        --menuSliderHeaderIconWidth: 2rem;
+        --iconWidth: 2.4rem;
+        --iconHeight: 2.4rem;
+        --shareLinkColor: var(--primaryTextColor);
+        --shareIconBorder: var(--primaryTextColor);
+        --shareIconBg: var(--secondaryBGColor);
+        --activityIndicatorLoadingDotColor: var(--primaryTextColor);
+        --activityIndicatorLoadingRingColor: var(--primaryTextColor);
+      }
+    `;
+  }
+}
+
+window.customElements.define("ia-bookreader", IaBookReader);

package/src/plugins/plugin.archive_analytics.js

@@ -1,4 +1,4 @@
-/* global BookReader, archive_analytics */
+/* global BookReader */
 /**
  * Plugin for Archive.org analytics
  */
@@ -50,13 +50,13 @@ BookReader.prototype.archiveAnalyticsSendFragmentChange = function() {
     // 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");
+    window.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);
+    window.archive_analytics.send_event('BookReader', 'UserChangedView', window.location.pathname, additionalEventParams);
 
     this.archiveAnalyticsSendFragmentChange.prevFragment = newFragment;
   }

package/src/plugins/plugin.autoplay.js

@@ -80,11 +80,6 @@ BookReader.prototype.autoToggle = function(overrides) {
     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
@@ -94,7 +89,7 @@ BookReader.prototype.autoToggle = function(overrides) {
       // don't flip immediately -- wait until timer fires
     } else {
       // flip immediately
-      this.flipFwdToIndex();
+      this.next({ triggerStop: false });
     }
 
     this.$('.play').hide();
@@ -102,10 +97,10 @@ BookReader.prototype.autoToggle = function(overrides) {
     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?
+      if (Math.max(this.twoPage.currentIndexL, this.twoPage.currentIndexR) >= this.book.getNumLeafs() - 1) {
+        this.prev({ triggerStop: false }); // $$$ really what we want?
       } else {
-        this.flipFwdToIndex();
+        this.next({ triggerStop: false });
       }
     }, this.flipDelay);
   } else {