@internetarchive/bookreader 5.0.0-61 → 5.0.0-62

package/BookReaderDemo/BookReaderDemo.css

@@ -2,11 +2,13 @@
  * Custom overrides for BookReader Demo.
  */
 html {
+    /** This must be set because the nav menu uses rem and sets the fonts really big? */
     font-size: 10px;
     font-family: sans-serif;
 }
 
 body {
+    font-size: 16px;
     background-color: #939598;
     margin: 0px;
 }

package/BookReaderDemo/demo-internetarchive.html

@@ -72,6 +72,97 @@
     }
   </style>
   <section class="demos">
+    <details class="demo">
+      <summary>Test books</summary>
+      <ul>
+        <li>
+          Misc English book
+          <ul>
+            <li>
+              <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=countofmontecris00duma_7">
+                <i>The Count of Monte-Cristo</i> by Alexandre Dumas
+              </a>
+            </li>
+            <li>
+              <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=driitaleofdaring00bachuoft">
+                <i>D’ri and I</i> by Irving Bacheller
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          Misc non-English book (<a href="https://archive.org/search?query=%21language%3Aeng&sort=-week&and%5B%5D=lending%3A%22is_readable%22&and%5B%5D=mediatype%3A%22texts%22">Search for more</a>)
+          <ul>
+            <li>
+              French: <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=lecomtedemontecr01dumauoft">
+                <i>Le Comte de Monte-Cristo</i> by Alexandre Dumas
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          Right-to-left book (<a href="https://archive.org/search?query=page-progression%3Arl&sort=-week&and%5B%5D=lending%3A%22is_readable%22&and%5B%5D=mediatype%3A%22texts%22">Search for more</a>)
+          <ul>
+            <li>
+              <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=gendaitankashu00meijuoft">
+                <i>Gendai tanka shu</i> by Meiji, Emperor of Japan
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          Newspaper with columns
+          <ul>
+            <li>
+              <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=Crusader-Vol_28_Nos_1-20_Sept_1986-April_1987">
+                Crusader-Vol_28_Nos_1-20_Sept_1986-April_1987
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          Text Selection
+          <ul>
+            <li>
+              OCR with spaces inside each <code>&lt;WORD&gt;</code> element
+              <ul>
+                <li><a href="/BookReaderDemo/demo-internetarchive.html?ocaid=theworksofplato01platiala">
+                  <i>The Works of Plato</i> by Plato
+                </a></li>
+              </ul>
+            </li>
+            <li>
+              Weird font-sizes/indents
+              <ul>
+                <li><a href="/BookReaderDemo/demo-internetarchive.html?ocaid=cihm_58393#page/n3">
+                  Microfilm poster thing
+                </a></li>
+              </ul>
+            </li>
+            <li>
+              Book with short lines
+              <ul>
+                <li>
+                  <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=countofmontecris00duma_7#page/261/mode/2up">
+                    <i>The Count of Monte-Cristo</i>, p.261, second last line
+                  </a>
+                </li>
+              </ul>
+            </li>
+            <li>
+              Book with double-spaced lines
+              <ul>
+                <li>
+                  <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=calnevpipelineex02unit#page/n93/mode/2up">
+                    calnevpipelineex02unit
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </details>
     <div class="demo">
       <button id="toggle-loggedin">Toggle Logged in view</button>
       <p>Features behind signed in gate: Bookmarks</p>

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 5.0.0-62
+- Fix: Make text selection work in Safari 15.4+ @cdrini
+- Fix: Rewrite/improvements to text selection UX @cdrini
+    - Switches from SVG text layer to HTML text layer
+
 # 5.0.0-61
 - Fix: Mode2up preview pages hanging on first click @cdrini
 - Dev: Add analytics event for text layer page selection @cdrini

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-61",
+  "version": "5.0.0-62",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/plugin-proposal-decorators": "7.17.9",
     "@babel/preset-env": "7.16.11",
-    "@open-wc/testing-helpers": "^2.2.0",
+    "@open-wc/testing-helpers": "^2.2.1",
     "@types/jest": "^29.5.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "babel-loader": "8.2.5",

package/src/BookReader/BookModel.js

@@ -45,8 +45,8 @@ export class BookModel {
       heights.push(page.heightInches);
     }
 
-    widths.sort();
-    heights.sort();
+    widths.sort((a, b) => a - b);
+    heights.sort((a, b) => a - b);
 
     this._medianPageSize = {
       width: widths[Math.floor(widths.length / 2)],

package/src/BookReader/ModeThumb.js

@@ -132,7 +132,7 @@ export class ModeThumb {
     for (let i = 1; i < this.br.thumbRowBuffer; i++) {
       if (firstRow - i >= 0) { rowsToDisplay.push(firstRow - i); }
     }
-    rowsToDisplay.sort();
+    rowsToDisplay.sort((a, b) => a - b);
 
     // Create the thumbnail divs and images (lazy loaded)
     for (const row of rowsToDisplay) {

package/src/BookReader/PageContainer.js

@@ -94,6 +94,18 @@ export function createSVGPageLayer(page, className) {
   return svg;
 }
 
+/**
+ * @param {PageModel} page
+ * @param {string} className
+ */
+export function createDIVPageLayer(page, className) {
+  const div = document.createElement("div");
+  div.style.width = `${page.width}px`;
+  div.style.height = `${page.height}px`;
+  div.setAttribute('class', `BRPageLayer ${className}`);
+  return div;
+}
+
 /**
  * @param {{ l: number, r: number, b: number, t: number }} box
  */

package/src/BookReader/events.js

@@ -8,8 +8,6 @@ export const EVENTS = {
   stop: 'stop',
   resize: 'resize',
   userAction: 'userAction', // event to know if user is actively reading
-  // nav events:
-  navToggled: 'navToggled',
   // menu click events
   fullscreenToggled: 'fullscreenToggled',
   zoomOut: 'zoomOut',

package/src/BookReader/utils/SelectionObserver.js

@@ -0,0 +1,43 @@
+// @ts-check
+export class SelectionObserver {
+  selecting = false;
+  startedInSelector = false;
+  /** @type {HTMLElement} */
+  target = null;
+
+  /**
+   * @param {string} selector
+   * @param {function('started' | 'cleared', HTMLElement): any} handler
+   */
+  constructor(selector, handler) {
+    this.selector = selector;
+    this.handler = handler;
+  }
+
+  attach() {
+    // We can't just use selectstart, because safari on iOS just
+    // randomly decides when to fire it 😤
+    // document.addEventListener("selectstart", this._onSelectStart);
+    // This has to be on document :/
+    document.addEventListener("selectionchange", this._onSelectionChange);
+  }
+
+  detach() {
+    document.removeEventListener("selectionchange", this._onSelectionChange);
+  }
+
+  _onSelectionChange = () => {
+    const sel = window.getSelection();
+
+    if (!this.selecting && sel.toString()) {
+      this.selecting = true;
+      this.target = $(sel.anchorNode).closest(this.selector)[0];
+      this.handler('started', this.target);
+    }
+
+    if (this.selecting && (sel.isCollapsed || !sel.toString() || !$(sel.anchorNode).closest(this.selector)[0])) {
+      this.selecting = false;
+      this.handler('cleared', this.target);
+    }
+  };
+}

package/src/BookReader.js

@@ -1412,10 +1412,6 @@ BookReader.prototype.bindNavigationHandlers = function() {
     this.trigger(BookReader.eventNames.userAction);
   });
 
-  jIcons.filter('.fit').bind('fit', function() {
-    // XXXmang implement autofit zoom
-  });
-
   for (const control in navigationControls) {
     jIcons.filter(`.${control}`).on('click.bindNavigationHandlers', () => {
       navigationControls[control]();
@@ -1488,268 +1484,8 @@ BookReader.prototype.bindNavigationHandlers = function() {
         self.$('.BRnavCntl').animate({opacity:.75},250);
       }
     });
-
-  this.initSwipeData();
-
-  $(document).off('mousemove.navigation', this.el);
-  $(document).on(
-    'mousemove.navigation',
-    this.el,
-    { 'br': this },
-    this.navigationMousemoveHandler
-  );
-
-  $(document).off('mousedown.swipe', '.BRpageimage');
-  $(document).on(
-    'mousedown.swipe',
-    '.BRpageimage',
-    { 'br': this },
-    this.swipeMousedownHandler
-  );
-
-  this.bindMozTouchHandlers();
-};
-
-/**
- * Unbind navigation handlers
- */
-BookReader.prototype.unbindNavigationHandlers = function() {
-  $(document).off('mousemove.navigation', this.el);
-};
-
-/**
- * Handle mousemove related to navigation.  Bind at #BookReader level to allow autohide.
- */
-BookReader.prototype.navigationMousemoveHandler = function(event) {
-  // $$$ possibly not great to be calling this for every mousemove
-  if (event.data['br'].uiAutoHide) {
-    // 77px is an approximate height of the Internet Archive Top Nav
-    // 75 & 76 (pixels) provide used in this context is checked against the IA top nav height
-    const navkey = $(document).height() - 75;
-    if ((event.pageY < 76) || (event.pageY > navkey)) {
-      // inside or near navigation elements
-      event.data['br'].hideNavigation();
-    } else {
-      event.data['br'].showNavigation();
-    }
-  }
-};
-
-BookReader.prototype.initSwipeData = function(clientX, clientY) {
-  /*
-     * Based on the really quite awesome "Today's Guardian" at http://guardian.gyford.com/
-     */
-  this._swipe = {
-    mightBeSwiping: false,
-    didSwipe: false,
-    mightBeDraggin: false,
-    didDrag: false,
-    startTime: (new Date).getTime(),
-    startX: clientX,
-    startY: clientY,
-    lastX: clientX,
-    lastY: clientY,
-    deltaX: 0,
-    deltaY: 0,
-    deltaT: 0
-  };
-};
-
-BookReader.prototype.swipeMousedownHandler = function(event) {
-  const self = event.data['br'];
-
-  // We should be the last bubble point for the page images
-  // Disable image drag and select, but keep right-click
-  if (event.which == 3) {
-    return !self.protected;
-  }
-
-  $(event.target).on('mouseout.swipe',
-    { 'br': self},
-    self.swipeMouseupHandler
-  ).on('mouseup.swipe',
-    { 'br': self},
-    self.swipeMouseupHandler
-  ).on('mousemove.swipe',
-    { 'br': self },
-    self.swipeMousemoveHandler
-  );
-
-  self.initSwipeData(event.clientX, event.clientY);
-  self._swipe.mightBeSwiping = true;
-  self._swipe.mightBeDragging = true;
-
-  event.preventDefault();
-  event.returnValue  = false;
-  event.cancelBubble = true;
-  return false;
-};
-
-BookReader.prototype.swipeMousemoveHandler = function(event) {
-  const self = event.data['br'];
-  const _swipe = self._swipe;
-  if (! _swipe.mightBeSwiping) {
-    return;
-  }
-
-  // Update swipe data
-  _swipe.deltaX = event.clientX - _swipe.startX;
-  _swipe.deltaY = event.clientY - _swipe.startY;
-  _swipe.deltaT = (new Date).getTime() - _swipe.startTime;
-
-  const absX = Math.abs(_swipe.deltaX);
-  const absY = Math.abs(_swipe.deltaY);
-
-  // Minimum distance in the amount of tim to trigger the swipe
-  const minSwipeLength = Math.min(self.refs.$br.width() / 5, 80);
-  const maxSwipeTime = 400;
-
-  // Check for horizontal swipe
-  if (absX > absY && (absX > minSwipeLength) && _swipe.deltaT < maxSwipeTime) {
-    _swipe.mightBeSwiping = false; // only trigger once
-    _swipe.didSwipe = true;
-    if (self.mode == self.constMode2up) {
-      if (_swipe.deltaX < 0) {
-        self.right();
-      } else {
-        self.left();
-      }
-    }
-  }
-
-  if ( _swipe.deltaT > maxSwipeTime && !_swipe.didSwipe) {
-    if (_swipe.mightBeDragging) {
-      // Dragging
-      _swipe.didDrag = true;
-      self.refs.$brContainer
-        .scrollTop(self.refs.$brContainer.scrollTop() - event.clientY + _swipe.lastY)
-        .scrollLeft(self.refs.$brContainer.scrollLeft() - event.clientX + _swipe.lastX);
-    }
-  }
-  _swipe.lastX = event.clientX;
-  _swipe.lastY = event.clientY;
-
-  event.preventDefault();
-  event.returnValue  = false;
-  event.cancelBubble = true;
-  return false;
-};
-
-BookReader.prototype.swipeMouseupHandler = function(event) {
-  const _swipe = event.data['br']._swipe;
-  _swipe.mightBeSwiping = false;
-  _swipe.mightBeDragging = false;
-
-  $(event.target).off('mouseout.swipe').off('mouseup.swipe').off('mousemove.swipe');
-
-  if (_swipe.didSwipe || _swipe.didDrag) {
-    // Swallow event if completed swipe gesture
-    event.preventDefault();
-    event.returnValue  = false;
-    event.cancelBubble = true;
-    return false;
-  }
-  return true;
-};
-
-BookReader.prototype.bindMozTouchHandlers = function() {
-  const self = this;
-
-  // Currently only want touch handlers in 2up
-  this.refs.$br
-    .on('MozTouchDown', function(event) {
-      if (this.mode == self.constMode2up) {
-        event.preventDefault();
-      }
-    })
-    .on('MozTouchMove', function(event) {
-      if (this.mode == self.constMode2up) {
-        event.preventDefault();
-      }
-    })
-    .on('MozTouchUp', function(event) {
-      if (this.mode == self.constMode2up) {
-        event.preventDefault();
-      }
-    });
-};
-
-/**
- * Returns true if the navigation elements are currently visible
- * @return {boolean}
- */
-BookReader.prototype.navigationIsVisible = function() {
-  // $$$ doesn't account for transitioning states, nav must be fully visible to return true
-  const toolpos = this.refs.$BRtoolbar.position();
-  const tooltop = toolpos.top;
-  return tooltop == 0;
 };
 
-/**
- * Main controller that sets navigation into view.
- * Defaults to SHOW the navigation chrome
- */
-BookReader.prototype.setNavigationView = function brSetNavigationView(hide) {
-  const animationLength = this.constNavAnimationDuration;
-  const animationType = 'linear';
-  const resizePageContainer = function resizePageContainer () {
-    /* main page container fills whole container */
-    if (this.constMode2up !== this.mode) {
-      const animate = true;
-      this.resizeBRcontainer(animate);
-    }
-    this.trigger(BookReader.eventNames.navToggled);
-  }.bind(this);
-
-  let toolbarHeight = 0;
-  let navbarHeight = 0;
-  if (hide) {
-    toolbarHeight = this.getToolBarHeight() * -1;
-    navbarHeight = this.getFooterHeight() * -1;
-
-    this.refs.$BRtoolbar.addClass('js-menu-hide');
-    this.refs.$BRfooter.addClass('js-menu-hide');
-  } else {
-    this.refs.$BRtoolbar.removeClass('js-menu-hide');
-    this.refs.$BRfooter.removeClass('js-menu-hide');
-  }
-
-  this.refs.$BRtoolbar.animate(
-    { top: toolbarHeight },
-    animationLength,
-    animationType,
-    resizePageContainer
-  );
-  this.refs.$BRfooter.animate(
-    { bottom: navbarHeight },
-    animationLength,
-    animationType,
-    resizePageContainer
-  );
-};
-/**
- * Hide navigation elements, if visible
- */
-BookReader.prototype.hideNavigation = function() {
-  // Check if navigation is showing
-  if (this.navigationIsVisible()) {
-    const hide = true;
-    this.setNavigationView(hide);
-  }
-};
-
-/**
- * Show navigation elements
- */
-BookReader.prototype.showNavigation = function() {
-  // Check if navigation is hidden
-  if (!this.navigationIsVisible()) {
-    this.setNavigationView();
-  }
-};
-
-
-
 /**************************/
 /** BookModel extensions **/
 /**************************/

package/src/css/_BRpages.scss

@@ -43,6 +43,8 @@
   position: relative;
   overflow: hidden;
   background: $brColorPlaceholderBg;
+  overflow: hidden;
+  overflow: clip;
   img {
     position: absolute;
     background: transparent;

package/src/css/_TextSelection.scss

@@ -1,41 +1,70 @@
-.textSelectionSVG {
+.BRtextLayer {
     z-index: 2;
-
-    // Make it so right-clicking on "blank" part of svg sends events to the image (for saving)
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: transparent;
+    transform-origin: 0 0;
+    // Make it so right-clicking on "blank" part of text layer sends events to the image (for saving)
     pointer-events: none;
-    .BRwordElement { pointer-events: all; }
-    &.selectingSVG { 
-        pointer-events: auto; 
-        cursor: text;
-    }
-   
-    // Highlight colors for text selection layer ( these 2 properties do not work if joined)
-    .BRwordElement::selection {
+    cursor: text;
+}
+
+.BRparagraphElement {
+    margin: 0;
+    cursor: text;
+    font-family: Georgia, serif;
+    line-height: 0;
+}
+
+.BRlineElement {
+    pointer-events: all;
+    white-space: nowrap;
+    display: inline-block;
+
+    // We use display: inline-block, otherwise this causes every line
+    // to have newlines at the end in safari. BUT, since they're inline,
+    // if the OCR has to short line in the same paragraph, they can wrap
+    // and one can go onto the other. This adds an arbitrary margin to
+    // the right of each line, forcing things to wrap.
+    // See eg https://www-drini.archive.org/details/countofmontecris00duma_7/page/261/mode/2up
+    // Page 261, second last line on the page.
+    .BRtextLayer[dir=ltr] & { margin-right: 100%; }
+    .BRtextLayer[dir=rtl] & { margin-left: 100%; }
+}
+
+// Highlight colors for text selection layer
+.BRwordElement, .BRspace, .BRparagraphElement, .BRparagraphElement br {
+    // these 2 properties do not work if joined
+    &::selection {
         background: hsla(210, 74%, 62%, 0.4);
     }
-    .BRwordElement::-moz-selection {
+
+    &::-moz-selection {
         background: hsla(210, 74%, 62%, 0.4);
-        color: transparent;
+        color:transparent;
     }
+}
 
-    .BRparagElement {
-        fill: transparent;
-        cursor: text;
-        white-space: pre;
-        font-family: Georgia, serif;
-    }
+.BRparagraphElement br {
+    visibility: hidden;
+}
+
+// Use CSS pseudo-elements to render the hyphens. This makes them
+// not selectable, so copy/pasting text doesn't include them.
+.BRwordElement--hyphen::after {
+    content: "-";
 }
 
 // Hide text layer for performance during zooming & scrolling
 .BRsmooth-zooming, .BRscrolling-active {
-    .textSelectionSVG {
+    .BRpagecontainer:not(.BRpagecontainer--hasSelection) .BRtextLayer {
         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 {
+// Hide text selection layers of off-screen pages
+.BRmode1up .BRpagecontainer:not(.BRpage-visible) .BRtextLayer {
     display: none;
 }
 
@@ -45,3 +74,35 @@
     -moz-user-select: none;
     user-select: none;
 }
+
+
+// These are Microsoft Edge specific fixed to make some of the
+// browsers features work well. These are for the in-place
+// translation.
+.BRwordElement, .BRspace {
+    &[_istranslated="1"], &[_msttexthash] {
+        background-color: #e4dccd;
+        color: black;
+        letter-spacing: unset !important;
+        background: #ccbfa7;
+    }
+}
+
+.BRlineElement font[_mstmutation="1"] {
+    background: #ccbfa7;
+}
+
+.BRlineElement:has([_istranslated="1"], [_msttexthash]) {
+    background-color: #e4dccd;
+    color: black;
+    text-align: justify;
+    width: inherit;
+    &:not(:nth-last-child(2)) {
+        text-align-last: justify;
+    }
+}
+
+.BRlineElement[_msttexthash] {
+    background: #ccbfa7;
+    word-spacing: unset !important;
+}