Add hide mouse class to the container if inactive (#153)

* Add hide mouse class to the container if inactive * Update class name * Properly attach an event * Remove mousemove event listener after exiting full mode Co-authored-by: Vadim Makeev <[email protected]>
shower · Oct 16, 2021 · 21199ec · 21199ec
1 parent 6d2a7fb
commit 21199ec
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 0 deletions.
diff --git a/lib/default-options.js b/lib/default-options.js
@@ -4,6 +4,8 @@ export default {
     stepSelector: '.next',
     fullModeClass: 'full',
     listModeClass: 'list',
+    mouseHiddenClass: 'pointless',
+    mouseInactivityTimeout: 5000,
 
     slideSelector: '.slide',
     slideTitleSelector: 'h2',

diff --git a/lib/modules/install.js b/lib/modules/install.js
@@ -7,6 +7,7 @@ import timer from './timer';
 import title from './title';
 import view from './view';
 import touch from './touch';
+import mouse from './mouse';
 
 export default (shower) => {
     a11y(shower);
@@ -18,6 +19,7 @@ export default (shower) => {
     location(shower); // should come after `title`
     view(shower);
     touch(shower);
+    mouse(shower);
 
     // maintains invariant: active slide always exists in `full` mode
     if (shower.isFullMode && !shower.activeSlide) {

diff --git a/lib/modules/mouse.js b/lib/modules/mouse.js
@@ -0,0 +1,41 @@
+export default (shower) => {
+    const { mouseHiddenClass, mouseInactivityTimeout } = shower.options;
+
+    let hideMouseTimeoutId = null;
+
+    const cleanUp = () => {
+        shower.container.classList.remove(mouseHiddenClass);
+        clearTimeout(hideMouseTimeoutId);
+        hideMouseTimeoutId = null;
+    };
+
+    const hideMouseIfInactive = () => {
+        if (hideMouseTimeoutId !== null) {
+            cleanUp();
+        }
+
+        hideMouseTimeoutId = setTimeout(() => {
+            shower.container.classList.add(mouseHiddenClass);
+        }, mouseInactivityTimeout);
+    };
+
+    const initHideMouseIfInactiveModule = () => {
+        shower.container.addEventListener('mousemove', hideMouseIfInactive);
+    };
+
+    const destroyHideMouseIfInactiveModule = () => {
+        shower.container.removeEventListener('mousemove', hideMouseIfInactive);
+        cleanUp();
+    };
+
+    const handleModeChange = () => {
+        if (shower.isFullMode) {
+            initHideMouseIfInactiveModule();
+        } else {
+            destroyHideMouseIfInactiveModule();
+        }
+    };
+
+    shower.addEventListener('start', handleModeChange);
+    shower.addEventListener('modechange', handleModeChange);
+};