TMP

Author: cdrini

src/BookReader.js

@@ -174,9 +174,35 @@ BookReader.prototype.setup = function(options) {
   /** @deprecated */
   this.bookPath = options.bookPath;
   this.fader = utils.debounce(
-    () => $(document.body).addClass('faded'),
+    (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;
+    },
     2000,
-    () => $(document.body).removeClass('faded'),
+    (source) => {
+      console.log('Show UI');
+      $(document.body)
+        .removeClass('faded')
+        .toggleClass('faded--scroll', source === 'scroll');
+    },
+    {
+      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;
+        //   }
+        // }
+      },
+    },
   );
 
   // Construct the usual plugins first to get type hints
@@ -747,8 +773,8 @@ BookReader.prototype.init = function() {
     }
   }
 
-  this.refs.$br.on('mousemove', this.fader);
-  this.refs.$brContainer.on('scroll', utils.onScrollUp(this.fader));
+  this.refs.$br.on('mousemove', () => this.fader('mousemove'));
+  this.refs.$brContainer[0].addEventListener('scroll', utils.eventFilterScrollUp(() => this.fader('scroll')), { passive: true });
 
   this.init.initComplete = true;
   this.trigger(BookReader.eventNames.PostInit);
@@ -1986,6 +2012,7 @@ BookReader.prototype.queryStringFromParams = function(
 
 /**
  * Helper to select within instance's elements
+ * @returns {JQuery<HTMLElement>}
  */
 BookReader.prototype.$ = function(selector) {
   return this.refs.$br.find(selector);

src/BookReader/Mode1Up.js

@@ -2,7 +2,7 @@
 import { Mode1UpLit } from './Mode1UpLit.js';
 import { DragScrollable } from './DragScrollable.js';
 import { ModeAbstract } from './ModeAbstract.js';
-import { onScrollUp } from './utils.js';
+import { eventFilterScrollUp } from './utils.js';
 /** @typedef {import('../BookReader.js').default} BookReader */
 /** @typedef {import('./BookModel.js').BookModel} BookModel */
 /** @typedef {import('./BookModel.js').PageIndex} PageIndex */
@@ -25,8 +25,8 @@ export class Mode1Up extends ModeAbstract {
       // We CANNOT use `br-mode-1up` as a class, because it's the same
       // 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')
-      .on('scroll', onScrollUp(this.br.fader));
+      .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;

src/BookReader/Mode2Up.js

@@ -2,7 +2,7 @@
 import { Mode2UpLit } from './Mode2UpLit.js';
 import { DragScrollable } from './DragScrollable.js';
 import { ModeAbstract } from './ModeAbstract.js';
-import { onScrollUp } from './utils.js';
+import { eventFilterScrollUp } from './utils.js';
 /** @typedef {import('../BookReader.js').default} BookReader */
 /** @typedef {import('./BookModel.js').BookModel} BookModel */
 /** @typedef {import('./BookModel.js').PageIndex} PageIndex */
@@ -31,8 +31,8 @@ export class Mode2Up extends ModeAbstract {
       // We CANNOT use `br-mode-2up` as a class, because it's the same
       // 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')
-      .on('scroll', onScrollUp(this.br.fader));
+      .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;

src/BookReader/utils.js

@@ -110,9 +110,11 @@ export function encodeURIComponentPlus(value) {
  * @param {boolean | function} immediate If true, calls func on the leading edge. If a
  * function is provided, that function is called on the leading edge instead of `func`.
  * `func` is still called on the trailing edge.
+ * @param {Object} [options]
+ * @param {function | null} [options.tap] Function to tap the event stream -- eg not debounced
  * @return {T}
  */
-export function debounce(func, wait, immediate) {
+export function debounce(func, wait, immediate, {tap = null} = {}) {
   let timeout;
   return function() {
     const context = this;
@@ -131,6 +133,10 @@ export function debounce(func, wait, immediate) {
         func.apply(context, args);
       }
     }
+
+    if (tap) {
+      tap.apply(context, args);
+    }
   };
 }
 
@@ -326,7 +332,7 @@ export function sortBy(array, valueFn) {
  * @param {number} [options.scrollDelay=20] How many pixels to scroll before triggering
  * @returns {function(): void}
  */
-export function onScrollUp(callback, {scrollDelay = 20} = {}) {
+export function eventFilterScrollUp(callback, {scrollDelay = 20} = {}) {
   let lastScrollTop = 0;
   let accumulatedScroll = 0;
   return function() {

src/css/_BRnav.scss

@@ -120,6 +120,14 @@ ia-bookreader::part(minimized-menu) {
   }
 }
 
+.faded--scroll {
+  .BRfooter:not(:focus-within):not(:hover) {
+    translate: 0 20px;
+  }
+  ia-bookreader::part(minimized-menu) {
+    translate: 0 20px;
+  }
+}
 
 .BRnav {
   box-sizing: border-box;