@internetarchive/bookreader 5.0.0-95 → 5.0.0-97

package/src/BookReader/utils.js

@@ -0,0 +1,313 @@
+/**
+ * Bind mouse handlers
+ * Disable mouse click to avoid selected/highlighted page images
+ * @param {JQuery} jObject
+ */
+export function disableSelect(jObject) {
+  // $$$ check here for right-click and don't disable.  Also use jQuery style
+  //     for stopping propagation. See https://bugs.edge.launchpad.net/gnubook/+bug/362626
+  jObject.bind('mousedown', () => false);
+  // Special hack for IE7
+  jObject[0].onselectstart = () => false;
+}
+
+/**
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ * @return {number}
+ */
+export function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * Given value and maximum, calculate a percentage suitable for CSS
+ * @param {number} value
+ * @param {number} max
+ * @return {string}
+ */
+export function cssPercentage(value, max) {
+  return ((value / max) * 100) + '%';
+}
+
+/**
+ * @param {*} value
+ * @param {Array} array
+ * @return {boolean}
+ */
+export function notInArray(value, array) {
+  return !array.includes(value);
+}
+
+/**
+ * Determines the active element, going into shadow doms.
+ * @return {Element}
+ */
+export function getActiveElement(doc = document, recurseShadowDom = true) {
+  const activeElement = doc.activeElement;
+  if (recurseShadowDom && activeElement?.shadowRoot) {
+    return getActiveElement(activeElement.shadowRoot, true);
+  }
+  return activeElement;
+}
+
+/** Check if an input field/textarea is active. Also checks shadow DOMs. */
+export function isInputActive(doc = document) {
+  const activeEl = getActiveElement(doc);
+  return activeEl?.tagName == "INPUT" || activeEl?.tagName == "TEXTAREA";
+}
+
+/**
+ * @param {HTMLIFrameElement} iframe
+ * @return {Document}
+ */
+export function getIFrameDocument(iframe) {
+// Adapted from http://xkr.us/articles/dom/iframe-document/
+  const outer = iframe.contentWindow || iframe.contentDocument;
+  return outer.document || outer;
+}
+
+/**
+ * @param {string} str
+ * @return {string}
+ */
+export function escapeHTML(str) {
+  return str.replace(/&/g,'&')
+    .replace(/>/g,'>')
+    .replace(/</g,'&lt;')
+    .replace(/"/g,'&quot;');
+}
+
+/**
+ * Decodes a URI component and converts '+' to ' '
+ * @param {string} value
+ * @return {string}
+ */
+export function decodeURIComponentPlus(value) {
+  return decodeURIComponent(value).replace(/\+/g, ' ');
+}
+
+/**
+ * Encodes a URI component and converts ' ' to '+'
+ * @param {string|number|boolean} value
+ * @return {string};
+ */
+export function encodeURIComponentPlus(value) {
+  return encodeURIComponent(value).replace(/%20/g, '+');
+}
+
+/**
+ * @template {Function} T
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing.
+ * @see https://davidwalsh.name/javascript-debounce-function
+ *
+ * @param {T} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {T}
+ */
+export function debounce(func, wait, immediate) {
+  let timeout;
+  return function() {
+    const context = this;
+    const args = arguments;
+    const later = () => {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
+
+/**
+ * @template T
+ * Throttle function
+ * @see https://remysharp.com/2010/07/21/throttling-function-calls
+ * @param {T} fn
+ * @param {number} threshold
+ * @param {boolean} delay
+ * @return {T}
+ */
+export function throttle(fn, threshold, delay) {
+  threshold || (threshold = 250);
+  let last;
+  let deferTimer;
+  if (delay) last = +new Date;
+  return function () {
+    const context = this;
+    const now = +new Date;
+    const args = arguments;
+    if (last && now < last + threshold) {
+      // hold on to it
+      clearTimeout(deferTimer);
+      deferTimer = setTimeout(() => {
+        last = now;
+        fn.apply(context, args);
+      }, threshold);
+    } else {
+      last = now;
+      fn.apply(context, args);
+    }
+  };
+}
+
+/**
+ * FIXME we need a better way to do this :/ This is not automatically poly-filled by
+ * core-js https://github.com/zloirock/core-js/issues/354
+ * @param {Window} window
+ */
+export function polyfillCustomEvent(window) {
+  if (typeof window.CustomEvent === "function") return false;
+  window.CustomEvent = PolyfilledCustomEvent;
+}
+
+/**
+ * https://caniuse.com/customevent has issues on older browsers where it can't be
+ * called as a constructor, so we have to use older methods.
+ * @param {String} eventName
+ * @return {CustomEvent}
+ */
+export function PolyfilledCustomEvent(eventName, {bubbles = false, cancelable = false, detail = null} = {}) {
+  const event = document.createEvent('CustomEvent');
+  event.initCustomEvent(eventName, bubbles, cancelable, detail);
+  return event;
+}
+
+/*
+ * Returns the number pixels something should be rendered at to be ~1n on the users
+ * screen when measured with a ruler.
+ */
+export function calcScreenDPI() {
+  const el = document.createElement('div');
+  el.style.width = '1in';
+  document.body.appendChild(el);
+  const dpi = el.offsetWidth;
+  document.body.removeChild(el);
+
+  // Do you believe in magic... numbers? We tested on some devices, and the displayed
+  // size of `width: 1in` was less than desired. On @pezvi's mac, it was ~75% ; on
+  // @cdrini's laptop it was ~85%. Since we want to avoid things appearing too small,
+  // let's just use a multiplier of 1.25
+  const screenDPI = dpi * 1.25;
+  // This will return 0 in testing; never want it to be 0!
+  return screenDPI == 0 ? 100 : screenDPI;
+}
+
+/**
+ * @param {number[]} nums
+ * @returns {number}
+ */
+export function sum(nums) {
+  return nums.reduce((cur, acc) => cur + acc, 0);
+}
+
+/**
+ * @template T
+ * @param {Generator<T>} gen
+ * @returns {T[]}
+ */
+export function genToArray(gen) {
+  const result = [];
+  for (const item of gen) {
+    result.push(item);
+  }
+  return result;
+}
+
+/**
+ * Check if arrays contain the same elements. Does reference comparison.
+ * @param {Array} arr1
+ * @param {Array} arr2
+ */
+export function arrEquals(arr1, arr2) {
+  return arr1.length == arr2.length && arr1.every((x, i) => x == arr2[i]);
+}
+
+/**
+ * Check if array has changed; namely to be used with lit's property.hasChanged
+ * @param {Array} [arr1]
+ * @param {Array} [arr2]
+ */
+export function arrChanged(arr1, arr2) {
+  return arr1 && arr2 && !arrEquals(arr1, arr2);
+}
+
+/**
+ * Waits the provided number of ms and then resolves with a promise
+ * @param {number} ms
+ **/
+export async function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * @template T
+ * @param {function(): T} fn
+ * @param {Object} options
+ * @param {function(T): boolean} [options.until]
+ * @return {T | undefined}
+ */
+export async function poll(fn, { step = 50, timeout = 500, until = val => Boolean(val), _sleep = sleep } = {}) {
+  const startTime = Date.now();
+  while (Date.now() - startTime < timeout) {
+    const result = fn();
+    if (until(result)) return result;
+    await _sleep(step);
+  }
+}
+
+/**
+ * Convert a EventTarget style event into a promise
+ * @param {EventTarget} target
+ * @param {string} eventType
+ * @return {Promise<Event>}
+ */
+export function promisifyEvent(target, eventType) {
+  return new Promise(res => {
+    const resolver = ev => {
+      target.removeEventListener(eventType, resolver);
+      res(ev);
+    };
+    target.addEventListener(eventType, resolver);
+  });
+}
+
+/**
+ * Escapes regex special characters in a string. Allows for safe usage in regexes.
+ * Src: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions
+ * @param {string} string
+ * @returns {string}
+ */
+export function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+}
+
+/**
+ * @param {number | 'fast' | 'slow' | string} speed
+ * Parsing of the jquery animation speed; see https://api.jquery.com/animate/
+ */
+export function parseAnimationSpeed(speed) {
+  if (speed === 'slow') return 600;
+  if (speed === 'fast') return 200;
+  return parseInt(speed, 10);
+}
+
+/**
+ * @template T
+ * @param {T[]} array
+ * @param {function(T): number} [valueFn]
+ */
+export function sortBy(array, valueFn) {
+  return array.sort((a, b) => {
+    const aValue = valueFn ? valueFn(a) : a;
+    const bValue = valueFn ? valueFn(b) : b;
+    return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
+  });
+}

package/src/BookReader.js

@@ -330,6 +330,24 @@ BookReader.prototype.setup = function(options) {
   this.hasKeyFocus = true;
 };
 
+BookReader.prototype.initializePlugin = function(pluginName) {
+  const plugin = new BookReader.PLUGINS[pluginName](this);
+  this.plugins[pluginName] = plugin;
+  try {
+    plugin.setup(this.options.plugins?.[pluginName] ?? {});
+    this.options.plugins[pluginName] = plugin.options;
+  } catch (e) {
+    console.error(`Error setting up plugin ${pluginName} outside of regular cycle`, e);
+    throw e;
+  }
+
+  try {
+    plugin.init();
+  } catch (e) {
+    console.error(`Error initializing plugin ${pluginName} outside of regular cycle`, e);
+    throw e;
+  }
+};
 /**
  * Get all the HTML Elements that are being/can be rendered.
  * Includes cached elements which might be rendered again.
@@ -632,8 +650,10 @@ BookReader.prototype.init = function() {
   this.initUIStrings();
 
   // Bind to events
-
-  this.bindNavigationHandlers();
+  this._components.navbar.bindControlClickHandlers();
+  for (const plugin of Object.values(this.plugins)) {
+    plugin._bindNavigationHandlers();
+  }
   this.setupKeyListeners();
 
   this.lastScroll = (new Date().getTime());
@@ -1497,141 +1517,6 @@ exposeOverrideableMethod(Toolbar, '_components.toolbar', 'buildInfoDiv');
 BookReader.prototype.getToolBarHeight = Toolbar.prototype.getToolBarHeight;
 exposeOverrideableMethod(Toolbar, '_components.toolbar', 'getToolBarHeight');
 
-/**
- * Bind navigation handlers
- */
-BookReader.prototype.bindNavigationHandlers = function() {
-  const self = this;
-  const jIcons = this.$('.BRicon');
-
-  // Map of jIcon class -> click handler
-  const navigationControls = {
-    book_left: () => {
-      this.trigger(BookReader.eventNames.stop);
-      this.left();
-    },
-    book_right: () => {
-      this.trigger(BookReader.eventNames.stop);
-      this.right();
-    },
-    book_top: this.first.bind(this),
-    book_bottom: this.last.bind(this),
-    book_leftmost: this.leftmost.bind(this),
-    book_rightmost: this.rightmost.bind(this),
-    onepg: () => {
-      this.switchMode(self.constMode1up);
-    },
-    thumb: () => {
-      this.switchMode(self.constModeThumb);
-    },
-    twopg: () => {
-      this.switchMode(self.constMode2up);
-    },
-    zoom_in: () => {
-      this.trigger(BookReader.eventNames.stop);
-      this.zoom(1);
-      this.trigger(BookReader.eventNames.zoomIn);
-    },
-    zoom_out: () => {
-      this.trigger(BookReader.eventNames.stop);
-      this.zoom(-1);
-      this.trigger(BookReader.eventNames.zoomOut);
-    },
-    full: () => {
-      if (this.ui == 'embed') {
-        const url = this.$('.BRembedreturn a').attr('href');
-        window.open(url);
-      } else {
-        this.toggleFullscreen();
-      }
-    },
-  };
-
-  // custom event for auto-loan-renew in ia-book-actions
-  // - to know if user is actively reading
-  this.$('nav.BRcontrols li button').on('click', () => {
-    this.trigger(BookReader.eventNames.userAction);
-  });
-
-  for (const control in navigationControls) {
-    jIcons.filter(`.${control}`).on('click.bindNavigationHandlers', () => {
-      navigationControls[control]();
-      return false;
-    });
-  }
-
-  const $brNavCntlBtmEl = this.$('.BRnavCntlBtm');
-  const $brNavCntlTopEl = this.$('.BRnavCntlTop');
-
-  this.$('.BRnavCntl').click(
-    function() {
-      const promises = [];
-      // TODO don't use magic constants
-      // TODO move this to a function
-      if ($brNavCntlBtmEl.hasClass('BRdn')) {
-        if (self.refs.$BRtoolbar)
-          promises.push(self.refs.$BRtoolbar.animate(
-            {top: self.getToolBarHeight() * -1},
-          ).promise());
-        promises.push(self.$('.BRfooter').animate({bottom: self.getFooterHeight() * -1}).promise());
-        $brNavCntlBtmEl.addClass('BRup').removeClass('BRdn');
-        $brNavCntlTopEl.addClass('BRdn').removeClass('BRup');
-        self.$('.BRnavCntlBtm.BRnavCntl').animate({height:'45px'});
-        self.$('.BRnavCntl').delay(1000).animate({opacity:.75}, 1000);
-      } else {
-        if (self.refs.$BRtoolbar)
-          promises.push(self.refs.$BRtoolbar.animate({top:0}).promise());
-        promises.push(self.$('.BRfooter').animate({bottom:0}).promise());
-        $brNavCntlBtmEl.addClass('BRdn').removeClass('BRup');
-        $brNavCntlTopEl.addClass('BRup').removeClass('BRdn');
-        self.$('.BRnavCntlBtm.BRnavCntl').animate({height:'30px'});
-        self.$('.BRvavCntl').animate({opacity:1});
-      }
-      $.when.apply($, promises).done(function() {
-        // Only do full resize in auto mode and need to recalc. size
-        if (self.mode == self.constMode2up && self.twoPage.autofit != null
-                    && self.twoPage.autofit != 'none'
-        ) {
-          self.resize();
-        } else if (self.mode == self.constMode1up && self.onePage.autofit != null
-                           && self.onePage.autofit != 'none') {
-          self.resize();
-        } else {
-          // Don't do a full resize to avoid redrawing images
-          self.resizeBRcontainer();
-        }
-      });
-    },
-  );
-  $brNavCntlBtmEl
-    .on("mouseover", function() {
-      if ($(this).hasClass('BRup')) {
-        self.$('.BRnavCntl').animate({opacity:1},250);
-      }
-    })
-    .on("mouseleave", function() {
-      if ($(this).hasClass('BRup')) {
-        self.$('.BRnavCntl').animate({opacity:.75},250);
-      }
-    });
-  $brNavCntlTopEl
-    .on("mouseover", function() {
-      if ($(this).hasClass('BRdn')) {
-        self.$('.BRnavCntl').animate({opacity:1},250);
-      }
-    })
-    .on("mouseleave", function() {
-      if ($(this).hasClass('BRdn')) {
-        self.$('.BRnavCntl').animate({opacity:.75},250);
-      }
-    });
-
-  // Call _bindNavigationHandlers on the plugins
-  for (const plugin of Object.values(this.plugins)) {
-    plugin._bindNavigationHandlers();
-  }
-};
-
 /**************************/
 /** BookModel extensions **/
 /**************************/
@@ -1805,8 +1690,6 @@ BookReader.prototype.initUIStrings = function() {
     '.book_right': 'Flip right',
     '.play': 'Play',
     '.pause': 'Pause',
-    '.BRdn': 'Show/hide nav bar', // Would have to keep updating on state change to have just "Hide nav bar"
-    '.BRup': 'Show/hide nav bar',
     '.book_top': 'First page',
     '.book_bottom': 'Last page',
     '.book_leftmost': 'First page',

package/src/assets/images/icon_experiment.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd"><path d="m20.5312017 91.3043478h59.513497c1.2006191 0 2.1739131-.973294 2.1739131-2.173913 0-.3822983-.1008154-.7578365-.2922774-1.0887357l-25.7859388-44.5652174c-.3886001-.6716082-1.1057054-1.0851774-1.8816356-1.0851774h-9.4292698c-.7956659 0-1.5277636.4346832-1.9086489 1.1332607l-24.2982884 44.5652174c-.5747365 1.0541176-.1861212 2.3745648.8679964 2.9493012.3192413.1740599.677043.2652642 1.0406524.2652642z"/><path d="m58.2338112 0c3.9857698 0 7.0754101 2.92605669 7.0754101 6.52173913 0 1.94814675-1.1751392 3.49748367-3.1329548 4.78763887-.7622726.5029309-1.2209368 1.3542647-1.2211436 2.2659686l-.0000001 17.2659447c0 1.4033895.3628136 2.7830137 1.0533233 4.0053358l29.9382305 52.9958632c.6905098 1.2223221 1.0533234 2.6019463 1.0533234 4.0053358 0 4.5023213-3.655118 8.1521739-8.1639346 8.1521739h-69.6705953c-1.3692898 0-2.7165851-.3439149-3.9178929-1.0000939-3.95568315-2.1606754-5.40829754-7.1143442-3.24450505-11.0643289l29.09149695-53.106279c.6571256-1.1995773 1.0015367-2.5449317 1.0015367-3.9122489l-.0000001-17.3410875c-.000193-.8514978-.3997534-1.6498707-1.0727831-2.1614374l-.1478555-.104365c-1.8735444-1.2352818-3.0298253-2.70631266-3.1268298-4.53659758l-.00663-.25182269c0-3.59709019 3.085096-6.52173913 7.07541-6.52173913zm0 5.43478261h-17.4163939c-.3341979 0-.655354.0973303-.9634683.29199092l-.1529759.10543374c-.2276736.17021467-.2742532.49276685-.1040386.72044045l.0538074.06119811.0627915.05193913.1617643.10919499c2.2021208 1.45291154 3.5596356 3.87504265 3.6577257 6.49699115l.0057053.3033755.0000002 17.3417027c0 2.2788621-.5740185 4.5211194-1.6692279 6.5204148l-29.0914969 53.106279c-.7212642 1.3166616-.2370594 2.9678845 1.0815017 3.6881097.4004359.2187263.8495344.3333646 1.3059643.3333646h69.6705953c1.5029388 0 2.7213115-1.2166175 2.7213115-2.7173913 0-.4677965-.1209379-.9276713-.3511078-1.3351119l-29.9382305-52.9958633c-1.1508495-2.0372034-1.7555389-4.336577-1.7555389-6.6755596l.0000002-17.2665599c.0005984-2.6392088 1.2800823-5.10829666 3.4230589-6.63488495l.2416409-.16570308c.2977633-.19621921.380081-.59667116.1838618-.89443446-.0526648-.07991901-.1224381-.14713032-.2042705-.1967699-.2372346-.14393755-.4815228-.22451299-.7328507-.24174888z" fill-rule="nonzero"/></g></svg>

package/src/assets/images/translate.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="#FFF"><path d="m55.6227664 40v-10.9816972c0-1.2005631.4447386-2.2302572 1.3342157-3.0890823.8894772-.858825 1.9338187-1.2888775 3.1330245-1.2901574h7.702184v6.5391015l14.2078094-10.6188404-14.2078094-10.5593242v6.6005376h-7.8252813c-3.5579086 0-6.6082065 1.2300012-9.1508934 3.6900038-2.542687 2.4600026-3.8146923 5.4095738-3.8160159 8.8487137v10.8607449z" transform="matrix(-1 0 0 1 129 0)"/><path d="m26.6227664 90v-10.9816972c0-1.2005631.4447386-2.2302572 1.3342157-3.0890823.8894772-.858825 1.9338187-1.2888775 3.1330245-1.2901574h7.702184v6.5391015l14.2078094-10.6188404-14.2078094-10.5593242v6.6005376h-7.8252813c-3.5579086 0-6.6082065 1.2300012-9.1508934 3.6900038-2.542687 2.4600026-3.8146923 5.4095738-3.8160159 8.8487137v10.8607449z" transform="matrix(1 0 0 -1 0 150)"/><g fill-rule="evenodd"><path d="m36.1711896 0c.7952259 0 1.5825239.11678603 2.361894.35035809.7793701.23357205 1.3385895.44226661 1.6776582.62608367.3390687.18381707.9354881.50929765 1.7892582.97644177v53.04711647h-41.11634795c-.26466873-.2667421-.47079323-.6253926-.61837349-1.0759518-.14758025-.4505591-.23600644-.8423796-.26527856-1.1754617v-52.7485865zm-15.8773502 11c-2.6260005.9445399-3.9390007 1.4168099-3.9390007 1.4168099.8613947 1.0405262 1.656859 2.1393299 2.3863927 3.2964109.2700118.4282536.5298575.8568906.7795373 1.2859111l-14.5207687.0008681v3l6.4238969.0000134c.8804258 3.5657294 2.3239844 6.8097976 4.3306759 9.7322048 1.0398193 1.5143213 2.176787 2.9231182 3.410903 4.2263908-3.5068695 3.0329696-7.8850877 5.246602-13.13321774 6.6415991 1.30042972 2.2665279 1.95064458 3.3997919 1.95064458 3.3997919 5.83922866-1.8768332 10.47451876-4.3674587 13.90587026-7.4718765.7278161.6172884 1.4851619 1.2034299 2.2700924 1.7596083 3.2815631 2.3252177 6.8996284 4.2293071 10.8541961 5.7122682 1.3246257-2.1759469 1.9869386-3.2639204 1.9869386-3.2639204-3.7993227-1.4042832-7.2042979-3.1143224-10.2149257-5.1301175-.8119265-.5436333-1.5953934-1.1239157-2.3504008-1.7408472 3.3115726-3.9242615 5.6922469-8.5457291 7.1440766-13.8651104l4.3889918-.0000045v-3l-12.2148765-.0011479c-.3495756-.7520023-.7243601-1.4925223-1.1243535-2.2215599-.7129337-1.2994097-1.4911578-2.5585071-2.3346725-3.7772922zm7.4469262 9.0006565c-1.3612535 4.5640835-3.3583061 8.3614158-5.9911579 11.3919968-1.0548712-1.0913671-2.041101-2.2689312-2.9598238-3.5334282-1.7358278-2.3891311-2.9991645-5.0087964-3.79001-7.858996z"/><path d="m94.1711896 45c.7952259 0 1.5825239.116786 2.361894.3503581.7793701.233572 1.3385895.4422666 1.6776582.6260837.3390687.183817.9354881.5092976 1.7892582.9764417v53.0471165h-41.116348c-.2646687-.2667421-.4707932-.6253926-.6183734-1.0759518-.1475803-.4505591-.2360065-.8423796-.2652786-1.1754617v-52.7485865zm-11.1769203 11h-7.8424068l-13.1518625 33h7.6962751l2.7277937-7.3487395h13.0057306l2.6303725 7.3487395h7.9398281zm-3.8794044 8.25 4.1351351 12.375h-8.5l4.272973-12.375z"/></g></g></svg>

package/src/css/_BRnav.scss

@@ -35,14 +35,6 @@
       border: 3px solid rgba(255,255,255,0.3);
     }
   }
-
-  .BRnavCntl {
-    z-index: $brZindexBase + 5;
-    background-color: $brColorDarkBorder;
-  }
-  .BRnavCntlBtm:hover {
-    background-color: $brColorThemeblue;
-  }
 }
 
 @mixin brNavLight {
@@ -66,14 +58,6 @@
       border: 3px solid rgba($brColorThemeblue,0.3);
     }
   }
-
-  .BRnavCntl {
-    background-color: $brColorLightBorder;
-  }
-
-  .BRnavCntlBtm:hover {
-    background-color: $brColorThemeblue;
-  }
 }
 
 @keyframes fadeUp {
@@ -319,20 +303,12 @@
   font-size: .8em;
   vertical-align: top;
 }
-.BRup {
-  background-image: url("images/nav_control-up.png");
-  background-repeat: no-repeat;
-}
-
 
 /* Mobile Only */
 @media (max-width: $brBreakPointMobile) {
   /* hide navline chapters and search in mobile */
   .BRnavline .BRchapter { display: none; }
 
-  .BRnavCntlBtm {
-    bottom: $brNavHeightMobile;
-  }
   .BRpager.ui-slider {
     height: 10px;
     top: math.div($brNavHeightMobile, 2) - 5px;

package/src/css/_BRsearch.scss

@@ -241,11 +241,6 @@
         height: 18px;
       }
     }
-    + .BRnav {
-      .BRnavCntl {
-        display: none;
-      }
-    }
   }
 }
 

package/src/css/_TextSelection.scss

@@ -1,4 +1,4 @@
-.BRtextLayer {
+.BRtextLayer, .BRtranslateLayer {
     z-index: 2;
     position: absolute;
     top: 0;
@@ -8,9 +8,16 @@
     // Make it so right-clicking on "blank" part of text layer sends events to the image (for saving)
     pointer-events: none;
     cursor: text;
+}
+
+.BRtextLayer {
     mix-blend-mode: multiply;
 }
 
+.BRtranslateLayer {
+    hyphens: auto;
+}
+
 .BRparagraphElement {
     margin: 0;
     cursor: text;
@@ -108,3 +115,27 @@
     background: #ccbfa7;
     word-spacing: unset !important;
 }
+
+.BRtranslateLayer .BRparagraphElement {
+    pointer-events: auto;
+    overflow-y: auto;
+    background: rgba(248, 237, 192, 0.5);
+    backdrop-filter: blur(8px);
+    color:black;
+    line-height: 1em;
+    text-align: justify;
+}
+
+.BRtranslateLayer .BRparagraphElement .BRlineElement {
+    white-space: break-spaces;
+    display: inline-block;
+}
+
+.BRtextLayer.showingTranslation {
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.BRtranslateLayer .BRparagraphElement.BRtranslateHidden {
+    display: none;
+}