@internetarchive/bookreader 5.0.0-8 → 5.0.0-80

package/src/plugins/plugin.vendor-fullscreen.js

@@ -56,7 +56,7 @@ if (!isMobile()) {
           $(document.body).append(cboxOverlay).append(cbox);
         }
       });
-    }
+    };
   })(BookReader.prototype.init);
 
   /**
@@ -92,7 +92,7 @@ if (!isMobile()) {
     $(document).off('keyup' + EVENT_NAMESPACE);
 
     this.isFullscreenActive = false;
-    this.updateBrClasses()
+    this.updateBrClasses();
 
     this.resize();
     this.refs.$brContainer.animate({ opacity: 1 }, 400, 'linear');
@@ -233,8 +233,8 @@ export function bindFullscreenChangeListener(
     'moz',
     'ms'
   ];
-  const all_events = $.trim(event + vendor_prefixes.join(event) + event);
-  $(document).bind(all_events, data, fullscreenchangeListener);
+  const all_events = (event + vendor_prefixes.join(event) + event).trim();
+  $(document).on(all_events, data, fullscreenchangeListener);
 }
 
 /**

package/src/plugins/search/plugin.search.js

@@ -1,9 +1,7 @@
+// @ts-check
 /* global BookReader */
 /**
  * Plugin for Archive.org book search
- * NOTE: This script must be loaded AFTER `plugin.mobile_nav.js`
- * as it mutates mobile nav drawer
- *
  * Events fired at various points throughout search processing are published
  * on the document DOM element. These can be subscribed to using jQuery's event
  * binding method `$.fn.on`. All of the events are prefixed with a BookReader
@@ -23,7 +21,14 @@
  * @event BookReader:SearchCanceled - When no results found. Receives
  *   `instance`
  */
+import { poll } from '../../BookReader/utils.js';
+import { renderBoxesInPageContainerLayer } from '../../BookReader/PageContainer.js';
 import SearchView from './view.js';
+import { marshallSearchResults } from './utils.js';
+/** @typedef {import('../../BookReader/PageContainer').PageContainer} PageContainer */
+/** @typedef {import('../../BookReader/BookModel').PageIndex} PageIndex */
+/** @typedef {import('../../BookReader/BookModel').LeafNum} LeafNum */
+/** @typedef {import('../../BookReader/BookModel').PageNumString} PageNumString */
 
 jQuery.extend(BookReader.defaultOptions, {
   server: 'ia600609.us.archive.org',
@@ -31,7 +36,10 @@ jQuery.extend(BookReader.defaultOptions, {
   subPrefix: '',
   bookPath: '',
   enableSearch: true,
+  searchInsideProtocol: 'https',
   searchInsideUrl: '/fulltext/inside.php',
+  searchInsidePreTag: '{{{',
+  searchInsidePostTag: '}}}',
   initialSearchTerm: null,
 });
 
@@ -44,7 +52,6 @@ BookReader.prototype.setup = (function (super_) {
     this.searchResults = null;
     this.searchInsideUrl = options.searchInsideUrl;
     this.enableSearch = options.enableSearch;
-    this.goToFirstResult = false;
 
     // Base server used by some api calls
     this.bookId = options.bookId;
@@ -56,14 +63,10 @@ BookReader.prototype.setup = (function (super_) {
     this._cancelSearch.bind(this);
     this.cancelSearchRequest.bind(this);
 
-    if (this.searchView) { return; }
-    this.searchView = new SearchView({
-      br: this,
-      searchCancelledCallback: () => {
-        this._cancelSearch();
-        this.trigger('SearchCanceled', { term: this.searchTerm, instance: this });
-      }
-    });
+    /** @type { {[pageIndex: number]: SearchInsideMatchBox[]} } */
+    this._searchBoxesByIndex = {};
+
+    this.searchView = undefined;
   };
 })(BookReader.prototype.setup);
 
@@ -71,11 +74,26 @@ BookReader.prototype.setup = (function (super_) {
 BookReader.prototype.init = (function (super_) {
   return function () {
     super_.call(this);
-
+    // give SearchView the most complete bookreader state
+    this.searchView = new SearchView({
+      br: this,
+      searchCancelledCallback: () => {
+        this._cancelSearch();
+        this.trigger('SearchCanceled', { term: this.searchTerm, instance: this });
+      }
+    });
     if (this.options.enableSearch && this.options.initialSearchTerm) {
+      /**
+       * this.search() take two parameter
+       * 1. this.options.initialSearchTerm - search term
+       * 2. {
+       *  goToFirstResult: this.options.goToFirstResult,
+       *  suppressFragmentChange: false // always want to change fragment in URL
+       * }
+       */
       this.search(
         this.options.initialSearchTerm,
-        { goToFirstResult: this.goToFirstResult, suppressFragmentChange: true }
+        { goToFirstResult: this.options.goToFirstResult, suppressFragmentChange: false }
       );
     }
   };
@@ -93,6 +111,25 @@ BookReader.prototype.buildToolbarElement = (function (super_) {
   };
 })(BookReader.prototype.buildToolbarElement);
 
+/** @override */
+BookReader.prototype._createPageContainer = (function (super_) {
+  return function (index) {
+    const pageContainer = super_.call(this, index);
+    if (this.enableSearch && pageContainer.page && index in this._searchBoxesByIndex) {
+      const pageIndex = pageContainer.page.index;
+      const boxes = this._searchBoxesByIndex[pageIndex];
+      renderBoxesInPageContainerLayer(
+        'searchHiliteLayer',
+        boxes,
+        pageContainer.page,
+        pageContainer.$container[0],
+        boxes.map(b => `match-index-${b.matchIndex}`),
+      );
+    }
+    return pageContainer;
+  };
+})(BookReader.prototype._createPageContainer);
+
 /**
  * @typedef {object} SearchOptions
  * @property {boolean} goToFirstResult
@@ -107,7 +144,7 @@ BookReader.prototype.buildToolbarElement = (function (super_) {
  * @param {string} term
  * @param {SearchOptions} overrides
  */
-BookReader.prototype.search = function(term = '', overrides = {}) {
+BookReader.prototype.search = async function(term = '', overrides = {}) {
   /** @type {SearchOptions} */
   const defaultOptions = {
     goToFirstResult: false, /* jump to the first result (default=false) */
@@ -119,6 +156,7 @@ BookReader.prototype.search = function(term = '', overrides = {}) {
   };
   const options = jQuery.extend({}, defaultOptions, overrides);
   this.suppressFragmentChange = options.suppressFragmentChange;
+  this.searchCancelled = false;
 
   // strip slashes, since this goes in the url
   this.searchTerm = term.replace(/\//g, ' ');
@@ -133,7 +171,7 @@ BookReader.prototype.search = function(term = '', overrides = {}) {
 
   // Remove the port and userdir
   const serverPath = this.server.replace(/:.+/, '');
-  const baseUrl = `https://${serverPath}${this.searchInsideUrl}?`;
+  const baseUrl = `${this.options.searchInsideProtocol}://${serverPath}${this.searchInsideUrl}?`;
 
   // Remove subPrefix from end of path
   let path = this.bookPath;
@@ -147,6 +185,8 @@ BookReader.prototype.search = function(term = '', overrides = {}) {
     doc: this.subPrefix,
     path,
     q: term,
+    pre_tag: this.options.searchInsidePreTag,
+    post_tag: this.options.searchInsidePostTag,
   };
 
   // NOTE that the API does not expect / (slashes) to be encoded. (%2F) won't work
@@ -154,13 +194,8 @@ BookReader.prototype.search = function(term = '', overrides = {}) {
 
   const url = `${baseUrl}${paramStr}`;
 
-  const cleanup = () => {
-    this.searchXHR = null
-    window.BRSearchInProgress = () => {};
-  };
-
-  const processSearchResults = (searchInsideResults) => {
-    if (!this.searchXHR) {
+  const callSearchResultsCallback = (searchInsideResults) => {
+    if (this.searchCancelled) {
       return;
     }
     const responseHasError = searchInsideResults.error || !searchInsideResults.matches.length;
@@ -168,6 +203,7 @@ BookReader.prototype.search = function(term = '', overrides = {}) {
     const hasCustomSuccess = typeof options.success === 'function';
 
     if (responseHasError) {
+      console.error('Search Inside Response Error', searchInsideResults.error || 'matches.length == 0');
       hasCustomError
         ? options.error.call(this, searchInsideResults, options)
         : this.BRSearchCallbackError(searchInsideResults, options);
@@ -176,21 +212,15 @@ BookReader.prototype.search = function(term = '', overrides = {}) {
         ? options.success.call(this, searchInsideResults, options)
         : this.BRSearchCallback(searchInsideResults, options);
     }
-    cleanup();
-  };
-
-  const beforeSend = (xhr) => {
-    this.searchXHR = xhr;
-    window.BRSearchInProgress = processSearchResults;
   };
 
   this.trigger('SearchStarted', { term: this.searchTerm, instance: this });
-  return $.ajax({
+  callSearchResultsCallback(await $.ajax({
     url: url,
     dataType: 'jsonp',
-    beforeSend,
-    jsonpCallback: 'BRSearchInProgress'
-  }).then(processSearchResults)
+    cache: true,
+    beforeSend: xhr => { this.searchXHR = xhr; },
+  }));
 };
 
 /**
@@ -202,21 +232,22 @@ BookReader.prototype._cancelSearch = function () {
   this.searchView.clearSearchFieldAndResults(false);
   this.searchTerm = '';
   this.searchXHR = null;
+  this.searchCancelled = true;
   this.searchResults = [];
-  window.BRSearchInProgress = () => {};
-}
+};
 
 /**
  * External function to cancel search
  * checks for term & xhr in flight before running
  */
 BookReader.prototype.cancelSearchRequest = function () {
+  this.searchCancelled = true;
   if (this.searchXHR !== null) {
     this._cancelSearch();
     this.searchView.toggleSearchPending();
     this.trigger('SearchCanceled', { term: this.searchTerm, instance: this });
   }
-}
+};
 
 /**
   * @typedef {object} SearchInsideMatchBox
@@ -226,10 +257,14 @@ BookReader.prototype.cancelSearchRequest = function () {
   * @property {number} b
   * @property {number} t
   * @property {HTMLDivElement} [div]
+  * @property {number} matchIndex This is a fake field! not part of the API response. The index of the match that contains this box in total search results matches.
   */
 
 /**
  * @typedef {object} SearchInsideMatch
+ * @property {number} matchIndex This is a fake field! Not part of the API response. It is added by the JS.
+ * @property {string} displayPageNumber (fake field) The page number as it should be displayed in the UI.
+ * @property {string} html (computed field) The html-escaped raw html to display in the UI.
  * @property {string} text
  * @property {Array<{ page: number, boxes: SearchInsideMatchBox[] }>} par
  */
@@ -243,21 +278,26 @@ BookReader.prototype.cancelSearchRequest = function () {
 
 /**
  * Search Results return handler
- * @callback
  * @param {SearchInsideResults} results
  * @param {object} options
  * @param {boolean} options.goToFirstResult
  */
 BookReader.prototype.BRSearchCallback = function(results, options) {
+  marshallSearchResults(
+    results,
+    pageNum => this.book.getPageNum(this.book.leafNumToIndex(pageNum)),
+    this.options.searchInsidePreTag,
+    this.options.searchInsidePostTag,
+  );
   this.searchResults = results || [];
 
   this.updateSearchHilites();
   this.removeProgressPopup();
   if (options.goToFirstResult) {
-    this._searchPluginGoToResult(results.matches[0].par[0].page);
+    this._searchPluginGoToResult(0);
   }
   this.trigger('SearchCallback', { results, options, instance: this });
-}
+};
 
 /**
  * Main search results error handler
@@ -297,95 +337,41 @@ BookReader.prototype._BRSearchCallbackError = function(results) {
  * updates search on-page highlights controller
  */
 BookReader.prototype.updateSearchHilites = function() {
-  if (this.constMode2up == this.mode) {
-    this.updateSearchHilites2UP();
-    return;
+  /** @type {SearchInsideMatch[]} */
+  const matches = this.searchResults?.matches || [];
+  /** @type { {[pageIndex: number]: SearchInsideMatchBox[]} } */
+  const boxesByIndex = {};
+
+  // Clear any existing svg layers
+  this.removeSearchHilites();
+
+  // Group by pageIndex
+  for (const match of matches) {
+    for (const box of match.par[0].boxes) {
+      const pageIndex = this.book.leafNumToIndex(box.page);
+      const pageBoxes = boxesByIndex[pageIndex] || (boxesByIndex[pageIndex] = []);
+      pageBoxes.push(box);
+    }
   }
-  this.updateSearchHilites1UP();
-};
 
-/**
- * update search on-page highlights in 1up mode
- */
-BookReader.prototype.updateSearchHilites1UP = function() {
-  const results = this.searchResults;
-  if (null == results) return;
-  results.matches?.forEach(match => {
-    match.par[0].boxes.forEach(box => {
-      const pageIndex = this.leafNumToIndex(box.page);
-      const pageIsInView = jQuery.inArray(pageIndex, this.displayedIndices) >= 0;
-      if (pageIsInView) {
-        if (!box.div) {
-          //create a div for the search highlight, and stash it in the box object
-          box.div = document.createElement('div');
-          $(box.div).prop('className', 'BookReaderSearchHilite').appendTo(this.$(`.pagediv${pageIndex}`));
-        }
-        const page = this._models.book.getPage(pageIndex);
-        const highlight = {
-          width: this._modes.mode1Up.physicalInchesToDisplayPixels((box.r - box.l) / page.ppi),
-          height: this._modes.mode1Up.physicalInchesToDisplayPixels((box.b - box.t) / page.ppi),
-          left: this._modes.mode1Up.physicalInchesToDisplayPixels(box.l / page.ppi),
-          top: this._modes.mode1Up.physicalInchesToDisplayPixels(box.t / page.ppi),
-        };
-        $(box.div).css(highlight);
-      } else {
-        if (box.div) {
-          $(box.div).remove();
-          box.div = null;
-        }
-      }
-    });
-  });
-};
-
-/**
- * update search on-page highlights in 2up mode
- */
-BookReader.prototype.updateSearchHilites2UP = function() {
-  const results = this.searchResults;
+  // update any already created pages
+  for (const [pageIndexString, boxes] of Object.entries(boxesByIndex)) {
+    const pageIndex = parseFloat(pageIndexString);
+    const page = this.book.getPage(pageIndex);
+    const pageContainers = this.getActivePageContainerElementsForIndex(pageIndex);
+    for (const container of pageContainers) {
+      renderBoxesInPageContainerLayer('searchHiliteLayer', boxes, page, container, boxes.map(b => `match-index-${b.matchIndex}`));
+    }
+  }
 
-  if (results === null) return;
-
-  const { matches = [] } = results;
-  matches.forEach((match) => {
-    match.par[0].boxes.forEach(box => {
-      const pageIndex = this.leafNumToIndex(match.par[0].page);
-      const pageIsInView = jQuery.inArray(pageIndex, this.displayedIndices) >= 0;
-      const { isViewable } = this._models.book.getPage(pageIndex);
-
-      if (pageIsInView && isViewable) {
-        if (!box.div) {
-          //create a div for the search highlight, and stash it in the box object
-          box.div = document.createElement('div');
-          $(box.div).addClass('BookReaderSearchHilite')
-            .appendTo(this.refs.$brTwoPageView);
-        }
-        this.setHilightCss2UP(box.div, pageIndex, box.l, box.r, box.t, box.b);
-      } else {
-        // clear stale reference
-        if (box.div) {
-          $(box.div).remove();
-          box.div = null;
-        }
-      }
-    });
-  });
+  this._searchBoxesByIndex = boxesByIndex;
 };
 
 /**
  * remove search highlights
  */
 BookReader.prototype.removeSearchHilites = function() {
-  const results = this.searchResults;
-  if (null == results || !results.matches) { return; }
-  results.matches.forEach(match => {
-    match.par[0].boxes.forEach(box => {
-      if (null != box.div) {
-        $(box.div).remove();
-        box.div = null;
-      }
-    });
-  });
+  $(this.getActivePageContainerElements()).find('.searchHiliteLayer').remove();
 };
 
 /**
@@ -393,11 +379,14 @@ BookReader.prototype.removeSearchHilites = function() {
  * Goes to the page specified. If the page is not viewable, tries to load the page
  * FIXME Most of this logic is IA specific, and should be less integrated into here
  * or at least more configurable.
- * @param {PageIndex} pageIndex
+ * @param {number} matchIndex
  */
-BookReader.prototype._searchPluginGoToResult = async function (pageIndex) {
-  const { book } = this._models;
+BookReader.prototype._searchPluginGoToResult = async function (matchIndex) {
+  const match = this.searchResults?.matches[matchIndex];
+  const book = this.book;
+  const pageIndex = book.leafNumToIndex(match.par[0].page);
   const page = book.getPage(pageIndex);
+  const onNearbyPage = Math.abs(this.currentIndex() - pageIndex) < 3;
   let makeUnviewableAtEnd = false;
   if (!page.isViewable) {
     const resp = await fetch('/services/bookreader/request_page?' + new URLSearchParams({
@@ -416,15 +405,43 @@ BookReader.prototype._searchPluginGoToResult = async function (pageIndex) {
       book.getPage(pageIndex).makeViewable();
       makeUnviewableAtEnd = true;
     }
+
+    // Trigger an update of book
+    this._modes.mode1Up.mode1UpLit.updatePages();
+    if (this.activeMode == this._modes.mode1Up) {
+      await this._modes.mode1Up.mode1UpLit.updateComplete;
+    }
   }
   /* this updates the URL */
-  this.suppressFragmentChange = false;
-  this.jumpToIndex(pageIndex);
+  if (!this._isIndexDisplayed(pageIndex)) {
+    this.suppressFragmentChange = false;
+    this.jumpToIndex(pageIndex);
+  }
 
   // Reset it to unviewable if it wasn't resolved
   if (makeUnviewableAtEnd) {
     book.getPage(pageIndex).makeViewable(false);
   }
+
+  // Scroll/flash in the ui
+  const $boxes = await poll(() => $(`rect.match-index-${match.matchIndex}`), { until: result => result.length > 0 });
+  if ($boxes.length) {
+    $boxes.css('animation', 'none');
+    $boxes[0].scrollIntoView({
+      // Only vertically center the highlight if we're in 1up or in full screen. In
+      // 2up, if we're not fullscreen, the whole body gets scrolled around to try to
+      // center the highlight 🙄 See:
+      // https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move/11041376
+      // Note: nearest doesn't quite work great, because the ReadAloud toolbar is now
+      // full-width, and covers up the last line of the highlight.
+      block: this.constMode1up == this.mode || this.isFullscreenActive ? 'center' : 'nearest',
+      inline: 'center',
+      behavior: onNearbyPage ? 'smooth' : 'auto',
+    });
+    // wait for animation to start
+    await new Promise(resolve => setTimeout(resolve, 100));
+    $boxes.removeAttr("style");
+  }
 };
 
 /**
@@ -458,7 +475,7 @@ BookReader.prototype.searchHighlightVisible = function() {
 
   results.matches.some(match => {
     return match.par[0].boxes.some(box => {
-      const pageIndex = this.leafNumToIndex(box.page);
+      const pageIndex = this.book.leafNumToIndex(box.page);
       if (jQuery.inArray(pageIndex, visiblePages) >= 0) {
         return true;
       }

package/src/plugins/search/utils.js

@@ -0,0 +1,43 @@
+import { escapeHTML, escapeRegExp } from '../../BookReader/utils.js';
+
+/**
+ * @param {string} match
+ * @param {string} preTag
+ * @param {string} postTag
+ * @returns {string}
+ */
+export function renderMatch(match, preTag, postTag) {
+  // Search results are returned as a text blob with the hits wrapped in
+  // triple mustaches. Hits occasionally include text beyond the search
+  // term, so everything within the staches is captured and wrapped.
+  const preTagRe = escapeRegExp(escapeHTML(preTag));
+  const postTagRe = escapeRegExp(escapeHTML(postTag));
+  // [^] matches any character, including line breaks
+  const regex = new RegExp(`${preTagRe}([^]+?)${postTagRe}`, 'g');
+  return escapeHTML(match)
+    .replace(regex, '<mark>$1</mark>')
+    // Fix trailing hyphens. This over-corrects but is net useful.
+    .replace(/(\b)- /g, '$1');
+}
+
+/**
+ * Attach some fields to search inside results
+ * @param {SearchInsideResults} results
+ * @param {(pageNum: LeafNum) => PageNumString} displayPageNumberFn
+ * @param {string} preTag
+ * @param {string} postTag
+ */
+export function marshallSearchResults(results, displayPageNumberFn, preTag, postTag) {
+  // Attach matchIndex to a few things to make it easier to identify
+  // an active/selected match
+  for (const [index, match] of results.matches.entries()) {
+    match.matchIndex = index;
+    match.displayPageNumber = displayPageNumberFn(match.par[0].page);
+    match.html = renderMatch(match.text, preTag, postTag);
+    for (const par of match.par) {
+      for (const box of par.boxes) {
+        box.matchIndex = index;
+      }
+    }
+  }
+}

package/src/plugins/search/view.js

@@ -9,11 +9,6 @@ class SearchView {
    */
   constructor({ br, searchCancelledCallback = () => {} }) {
     this.br = br;
-
-    // Search results are returned as a text blob with the hits wrapped in
-    // triple mustaches. Hits occasionally include text beyond the search
-    // term, so everything within the staches is captured and wrapped.
-    this.matcher = new RegExp('{{{(.+?)}}}', 'g');
     this.matches = [];
     this.cacheDOMElements();
     this.bindEvents();
@@ -142,17 +137,19 @@ class SearchView {
       const start = pool.slice(0, pool.length / 2);
       const end = pool.slice(pool.length / 2);
       return closestTo((comparisonFn(start, end, comparator) ? start : end), comparator);
-    }
+    };
 
     const closestPage = closestTo(matchPages, currentPage);
     return this.matches.indexOf(this.matches.find((m) => m.par[0].page === closestPage));
   }
 
   updateResultsPosition() {
+    if (!this.dom.searchNavigation) return;
     this.dom.searchNavigation.find('[data-id=resultsCount]').text(this.resultsPosition());
   }
 
   updateSearchNavigationButtons() {
+    if (!this.dom.searchNavigation) return;
     this.dom.searchNavigation.find('.prev').attr('disabled', !this.currentMatchIndex);
     this.dom.searchNavigation.find('.next').attr('disabled', this.currentMatchIndex + 1 === this.matches.length);
   }
@@ -226,25 +223,20 @@ class SearchView {
    */
   renderPins(matches) {
     matches.forEach((match) => {
-      const queryString = match.text;
-      const pageIndex = this.br.leafNumToIndex(match.par[0].page);
-      const pageNumber = this.br.getPageNum(pageIndex);
+      const pageIndex = this.br.book.leafNumToIndex(match.par[0].page);
       const uiStringSearch = "Search result"; // i18n
-      const uiStringPage = "Page"; // i18n
-
-      const percentThrough = this.br.constructor.util.cssPercentage(pageIndex, this.br.getNumLeafs() - 1);
-
-      const queryStringWithB = queryString.replace(this.matcher, '<b>$1</b>');
-
-      let queryStringWithBTruncated = '';
-
-      if (queryString.length > 100) {
-        queryStringWithBTruncated = queryString
-          .replace(/^(.{100}[^\s]*).*/, "$1")
-          .replace(this.matcher, '<b>$1</b>')
-                + '...';
+      const percentThrough = this.br.constructor.util.cssPercentage(pageIndex, this.br.book.getNumLeafs() - 1);
+
+      let html = match.html;
+      if (html.length > 200) {
+        const start = Math.max(0, html.indexOf('<mark>') - 100);
+        if (start != 0) {
+          html = '…' + match.html
+            .substring(start)
+            // Make sure at word boundary though
+            .replace(/^\S+/, '');
+        }
       }
-
       // draw marker
       $('<div>')
         .addClass('BRsearch')
@@ -254,35 +246,27 @@ class SearchView {
         .attr('title', uiStringSearch)
         .append(`
           <div class="BRquery">
-            <div>${queryStringWithBTruncated || queryStringWithB}</div>
-            <div>${uiStringPage} ${pageNumber}</div>
+            <main>${html}</main>
+            <footer>Page ${match.displayPageNumber}</footer>
           </div>
         `)
-        .data({ pageIndex })
         .appendTo(this.br.$('.BRnavline'))
-        .hover(
-          (event) => {
-            // remove from other markers then turn on just for this
-            // XXX should be done when nav slider moves
-            const marker = event.currentTarget;
-            const tooltip = marker.querySelector('.BRquery');
-            const tooltipOffset = tooltip.getBoundingClientRect();
-            const targetOffset = marker.getBoundingClientRect();
-            const boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
-            if (tooltipOffset.x - boxSizeAdjust < 0) {
-              tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
-            }
-            $('.BRsearch,.BRchapter').removeClass('front');
-            $(event.target).addClass('front');
-          },
-          (event) => $(event.target).removeClass('front'))
-        .click(function (event) {
-          // closures are nested and deep, using an arrow function breaks references.
-          // Todo: update to arrow function & clean up closures
-          // to remove `bind` dependency
-          this.br._searchPluginGoToResult(+$(event.target).data('pageIndex'));
-          this.br.updateSearchHilites();
-        }.bind(this));
+        .on("mouseenter", (event) => {
+          // remove from other markers then turn on just for this
+          // XXX should be done when nav slider moves
+          const marker = event.currentTarget;
+          const tooltip = marker.querySelector('.BRquery');
+          const tooltipOffset = tooltip.getBoundingClientRect();
+          const targetOffset = marker.getBoundingClientRect();
+          const boxSizeAdjust = parseInt(getComputedStyle(tooltip).paddingLeft) * 2;
+          if (tooltipOffset.x - boxSizeAdjust < 0) {
+            tooltip.style.setProperty('transform', `translateX(-${targetOffset.left - boxSizeAdjust}px)`);
+          }
+          $('.BRsearch,.BRchapter').removeClass('front');
+          $(event.target).addClass('front');
+        })
+        .on("mouseleave", (event) => $(event.target).removeClass('front'))
+        .on("click", () => { this.br._searchPluginGoToResult(match.matchIndex); });
     });
   }
 
@@ -386,14 +370,6 @@ class SearchView {
     }
   }
 
-  /**
-   * @param {Event} e
-   */
-  handleNavToggledCallback(e) {
-    const is_visible = this.br.navigationIsVisible();
-    this.togglePinsFor(is_visible);
-  }
-
   handleSearchStarted() {
     this.emptyMatches();
     this.br.removeSearchHilites();
@@ -428,7 +404,6 @@ class SearchView {
 
     window.addEventListener(`${namespace}SearchCallbackError`, this.handleSearchCallbackError.bind(this));
     $(document).on(`${namespace}SearchCallback`, this.handleSearchCallback.bind(this))
-      .on(`${namespace}navToggled`, this.handleNavToggledCallback.bind(this))
       .on(`${namespace}SearchStarted`, this.handleSearchStarted.bind(this))
       .on(`${namespace}SearchCallbackBookNotIndexed`, this.handleSearchCallbackBookNotIndexed.bind(this))
       .on(`${namespace}SearchCallbackEmpty`, this.handleSearchCallbackEmpty.bind(this))