Hideable chrome experiment + tweaking

Author: cdrini

src/BookReader.js

@@ -174,36 +174,31 @@ BookReader.prototype.setup = function(options) {
   /** @deprecated */
   this.bookPath = options.bookPath;
   this.fader = utils.debounce(
-    (source) => {
-      console.log('Fading UI');
-      $(document.body)
-        .addClass('faded')
-        .toggleClass('faded--scroll', source === 'scroll');
-      // const animation = this.$('.BRfooter')[0].getAnimations()[0];
-      // if (!animation) return;
-      // if (source === 'scroll') animation.pause();
-      // animation.currentTime = 0;
-    },
+    (source) => this.fader.hide(source),
     2000,
-    (source) => {
-      console.log('Show UI');
-      $(document.body)
-        .removeClass('faded')
-        .toggleClass('faded--scroll', source === 'scroll');
-    },
+    (source) => this.fader.show(source),
     {
       tap: (source) => {
         console.log('Show UI ...', source);
-        // if (source === 'scroll') {
-        //   const animation = this.$('.BRfooter')[0].getAnimations()[0];
-        //   if (animation) {
-        //     // const max = animation.effect.getComputedTiming().duration;
-        //     animation.currentTime += 1;
-        //   }
-        // }
       },
     },
   );
+  this.fader.show = (source) => {
+    console.log('Show UI');
+    $(document.body).removeClass('BRfaded');
+  };
+  this.fader.hide = (source) => {
+    console.log('Hide UI');
+    $(document.body).addClass('BRfaded');
+  };
+  this.fader.toggle = (source) => {
+    if ($(document.body).hasClass('BRfaded')) {
+      this.fader.show(source);
+      this.fader(source);
+    } else {
+      this.fader.hide(source);
+    }
+  };
 
   // Construct the usual plugins first to get type hints
   this.plugins = {
@@ -773,8 +768,16 @@ BookReader.prototype.init = function() {
     }
   }
 
-  this.refs.$br.on('mousemove', () => this.fader('mousemove'));
-  this.refs.$brContainer[0].addEventListener('scroll', utils.eventFilterScrollUp(() => this.fader('scroll')), { passive: true });
+  // Init modes
+  for (const mode of Object.values(this._modes)) {
+    mode.init();
+  }
+
+  if (this.plugins.experiments?.isExperimentEnabled('hideable-chrome')) {
+    this.refs.$br.on('pointermove', utils.eventFilterMouseMove(ev => ev.pointerType != 'touch' && this.fader('pointermove')));
+    this.refs.$brContainer[0].addEventListener('scroll', utils.eventFilterScrollUp(() => this.fader('scroll')), { passive: true });
+    this.refs.$brContainer[0].addEventListener('touchstart', utils.eventFilterSameElement(() => this.fader('touchstart')), { passive: true });
+  }
 
   this.init.initComplete = true;
   this.trigger(BookReader.eventNames.PostInit);
@@ -1050,16 +1053,12 @@ BookReader.prototype.zoom = function(direction) {
  * So resize isn't perceived sharp/jerky
  */
 BookReader.prototype.resizeBRcontainer = function(animate) {
+  const top = this.getToolBarHeight();
+  const bottom = this.plugins.experiments?.isExperimentEnabled('hideable-chrome') ? 0 : this.getFooterHeight();
   if (animate) {
-    this.refs.$brContainer.animate({
-      top: this.getToolBarHeight(),
-      // bottom: this.getFooterHeight(),
-    }, this.constResizeAnimationDuration, 'linear');
+    this.refs.$brContainer.animate({ top, bottom }, this.constResizeAnimationDuration, 'linear');
   } else {
-    this.refs.$brContainer.css({
-      top: this.getToolBarHeight(),
-      // bottom: this.getFooterHeight(),
-    });
+    this.refs.$brContainer.css({ top, bottom });
   }
 };
 

src/BookReader/Mode1Up.js

@@ -26,7 +26,6 @@ export class Mode1Up extends ModeAbstract {
       // as the name of the web component, and the webcomponents polyfill
       // uses the name of component as a class for style scoping 😒
       .addClass('br-mode-1up__root BRmode1up');
-    this.$el[0].addEventListener('scroll', eventFilterScrollUp(() => this.br.fader('scroll')), { passive: true });
 
     /** Has mode1up ever been rendered before? */
     this.everShown = false;
@@ -40,6 +39,13 @@ export class Mode1Up extends ModeAbstract {
     return this.mode1UpLit;
   }
 
+  init() {
+    if (this.br.plugins.experiments?.isExperimentEnabled('hideable-chrome')) {
+      this.$el[0].addEventListener('scroll', eventFilterScrollUp(() => this.br.fader('scroll')), { passive: true });
+      this.$el[0].addEventListener('click', () => this.br.fader('click'), { passive: true });
+    }
+  }
+
   /**
    * This is called when we switch to one page view
    */

src/BookReader/Mode2Up.js

@@ -2,7 +2,7 @@
 import { Mode2UpLit } from './Mode2UpLit.js';
 import { DragScrollable } from './DragScrollable.js';
 import { ModeAbstract } from './ModeAbstract.js';
-import { eventFilterScrollUp } from './utils.js';
+import { eventFilterSameElement, eventFilterScrollUp } from './utils.js';
 /** @typedef {import('../BookReader.js').default} BookReader */
 /** @typedef {import('./BookModel.js').BookModel} BookModel */
 /** @typedef {import('./BookModel.js').PageIndex} PageIndex */
@@ -32,12 +32,22 @@ export class Mode2Up extends ModeAbstract {
       // as the name of the web component, and the webcomponents polyfill
       // uses the name of component as a class for style scoping 😒
       .addClass('br-mode-2up__root BRmode2up');
-    this.$el[0].addEventListener('scroll', eventFilterScrollUp(() => this.br.fader('scroll')), { passive: true });
 
     /** Has mode2up ever been rendered before? */
     this.everShown = false;
   }
 
+  init() {
+    if (this.br.plugins.experiments?.isExperimentEnabled('hideable-chrome')) {
+      this.$el[0].addEventListener('scroll', eventFilterScrollUp(() => this.br.fader('scroll')), { passive: true });
+      this.$el[0].addEventListener('click', eventFilterSameElement(() => this.br.fader.toggle('click')));
+      this.$el.on('click', '.BRpagecontainer', () => {
+        if (this.$el.hasClass('BRpageFlipping')) return;
+        this.br.fader.toggle('click');
+      });
+    }
+  }
+
   /**
    * This is called when we switch into this mode
    */

src/BookReader/Mode2UpLit.js

@@ -680,9 +680,10 @@ export class Mode2UpLit extends LitElement {
 
     const $page = $(ev.target).closest('.BRpagecontainer');
     if (!$page.length) return;
-    if ($page.data('side') == 'L') {
+    const pageBoundingBox = $page[0].getBoundingClientRect();
+    if ($page.data('side') == 'L' && ev.clientX < pageBoundingBox.left + pageBoundingBox.width * 3 / 4) {
       this.br.left();
-    } else if ($page.data('side') == 'R') {
+    } else if ($page.data('side') == 'R' && ev.clientX > pageBoundingBox.right - pageBoundingBox.width * 3 / 4) {
       this.br.right();
     }
   }

src/BookReader/ModeAbstract.js

@@ -45,4 +45,7 @@ export class ModeAbstract {
       return this.book.getPage(indexOrDirection);
     }
   }
+
+  /** @abstract */
+  init() {}
 }

src/BookReader/utils.js

@@ -335,15 +335,64 @@ export function sortBy(array, valueFn) {
 export function eventFilterScrollUp(callback, {scrollDelay = 20} = {}) {
   let lastScrollTop = 0;
   let accumulatedScroll = 0;
-  return function() {
+  return function(event) {
     const st = this.scrollTop;
     if (st < lastScrollTop) {
       accumulatedScroll += lastScrollTop - st;
       if (accumulatedScroll >= scrollDelay) {
-        callback();
+        callback(event);
         accumulatedScroll = 0;
       }
     }
     lastScrollTop = st;
   };
 }
+
+/**
+ * Filters mousemove events to only call callback when the mouse has moved
+ * more than minDistance pixels.
+ * @param {Function} callback
+ * @param {Object} options
+ * @param {number} [options.minDistance=10]
+ */
+export function eventFilterMouseMove(callback, {minDistance = 10} = {}) {
+  let startX = null;
+  let startY = null;
+
+  // debounce resetting startX/startY to avoid issues with small jitters
+  const resetStart = debounce(() => {
+    startX = null;
+    startY = null;
+  }, 100);
+
+  return function(event) {
+    if (startX === null || startY === null) {
+      startX = event.clientX;
+      startY = event.clientY;
+      return;
+    }
+    const deltaX = event.clientX - startX;
+    const deltaY = event.clientY - startY;
+    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    if (distance >= minDistance) {
+      callback(event);
+      startX = event.clientX;
+      startY = event.clientY;
+    }
+    resetStart();
+  };
+};
+
+/**
+ * Filters event if the target element is the same as the element the event is bound to.
+ * Useful for avoiding handling events from child elements.
+ * @param {Function} callback
+ * @returns {function(Event): void}
+ */
+export function eventFilterSameElement(callback) {
+  return function(event) {
+    if (event.target === event.currentTarget) {
+      callback(event);
+    }
+  };
+}

src/css/_BRnav.scss

@@ -111,21 +111,10 @@ ia-bookreader::part(minimized-menu) {
   transition: opacity 0.2s, translate 0.2s;
 }
 
-.faded {
-  .BRfooter:not(:focus-within):not(:hover) {
+.BRfaded {
+  .BookReader:not(.BRmodeThumb) .BRfooter:not(:has(:focus-visible)):not(:hover), ia-bookreader::part(minimized-menu) {
     opacity: 0;
-  }
-  ia-bookreader::part(minimized-menu) {
-    opacity: 0;
-  }
-}
-
-.faded--scroll {
-  .BRfooter:not(:focus-within):not(:hover) {
-    translate: 0 20px;
-  }
-  ia-bookreader::part(minimized-menu) {
-    translate: 0 20px;
+    pointer-events: none;
   }
 }
 

src/plugins/plugin.experiments.js

@@ -51,7 +51,7 @@ export class ExperimentsPlugin extends BookReaderPlugin {
     localStorageKey: 'BrExperiments',
 
     /** The experiments that should be shown in the experiments panel */
-    enabledExperiments: ['translate'],
+    enabledExperiments: ['translate', 'hideable-chrome'],
   }
 
   /** @type {ExperimentModel[]} */
@@ -77,6 +77,20 @@ export class ExperimentsPlugin extends BookReaderPlugin {
         });
       }
     }(),
+
+    new class extends ExperimentModel {
+      name = 'hideable-chrome';
+      title = 'Hideable Chrome';
+      description = "Automatically hide the BookReader interface when reading.";
+      enabled = false;
+      async enable({ manual = false }) {
+        if (manual) sleep(0).then(() => window.location.reload());
+      }
+      async disable() {
+        sleep(0).then(() => window.location.reload());
+      }
+    }(),
+
     new class extends ExperimentModel {
       name = 'hypothesis';
       title = 'Hypothes.is';
@@ -123,7 +137,7 @@ export class ExperimentsPlugin extends BookReaderPlugin {
     for (const experiment of this.allExperiments) {
       // TODO: imagesBaseURL should be replaced with assetRoot everywhere
       experiment.assetRoot = this.br.options.imagesBaseURL.replace(/images\/$/, '');
-      experiment.icon = experiment.buildAssetPath(experiment.icon);
+      experiment.icon = experiment.icon ? experiment.buildAssetPath(experiment.icon) : null;
       experiment.br = this.br;
     }
 
@@ -151,6 +165,11 @@ export class ExperimentsPlugin extends BookReaderPlugin {
     localStorage.setItem(this.options.localStorageKey, JSON.stringify(states));
   }
 
+  isExperimentEnabled(experimentName) {
+    const experiment = this.allExperiments.find(exp => exp.name === experimentName);
+    return experiment ? experiment.enabled : false;
+  }
+
   /**
    * @param {ExperimentModel} experiment
    * @param {boolean} enabled
@@ -269,7 +288,7 @@ export class BrExperimentToggle extends LitElement {
     return html`
       <div class="experiment-card" style="margin-bottom: 10px;">
         <div style="display: flex; align-items: center; gap: 10px;">
-          <img src="${this.icon}" style="width: 20px; height: 20px;" alt="" />
+          ${this.icon ? html`<img src="${this.icon}" style="width: 20px; height: 20px;" alt="" />` : ''}
           <div style="flex-grow: 1; font-weight: bold;">${this.title}</div>
         </div>
         <p style="opacity: 0.9">