From 7b707696b40a98e717d91e24162869f6d9c22957 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 8 Oct 2018 09:58:06 +0200 Subject: [PATCH] automatically hide the mouse pointer after 5s of inactivity (#1837) --- README.md | 6 +++++ js/reveal.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 72 insertions(+) diff --git a/README.md b/README.md index 734036b..72d2ac9 100644 --- a/README.md +++ b/README.md @@ -326,6 +326,12 @@ Reveal.initialize({ // Enable slide navigation via mouse wheel mouseWheel: false, + // Hide cursor if inactive + hideInactiveCursor: true, + + // Time before the cursor is hidden (in ms) + hideCursorTime: 5000, + // Hides the address bar on mobile devices hideAddressBar: true, diff --git a/js/reveal.js b/js/reveal.js index ca2a9a0..48efc08 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -220,6 +220,12 @@ // The display mode that will be used to show slides display: 'block', + // Hide cursor if inactive + hideInactiveCursor: true, + + // Time before the cursor is hidden (in ms) + hideCursorTime: 5000, + // Script dependencies to load dependencies: [] @@ -282,6 +288,12 @@ // Delays updates to the URL due to a Chrome thumbnailer bug writeURLTimeout = 0, + // Is the mouse pointer currently hidden from view + cursorHidden = false, + + // Timeout used to determine when the cursor is inactive + cursorInactiveTimeout = 0, + // Flags if the interaction event listeners are bound eventsAreBound = false, @@ -1253,6 +1265,18 @@ disableRollingLinks(); } + // Auto-hide the mouse pointer when its inactive + if( config.hideInactiveCursor ) { + document.addEventListener( 'mousemove', onDocumentCursorActive, false ); + document.addEventListener( 'mousedown', onDocumentCursorActive, false ); + } + else { + showCursor(); + + document.removeEventListener( 'mousemove', onDocumentCursorActive, false ); + document.removeEventListener( 'mousedown', onDocumentCursorActive, false ); + } + // Iframe link previews if( config.previewLinks ) { enablePreviewLinks(); @@ -2479,6 +2503,32 @@ } + /** + * Shows the mouse pointer after it has been hidden with + * #hideCursor. + */ + function showCursor() { + + if( cursorHidden ) { + cursorHidden = false; + dom.wrapper.style.cursor = ''; + } + + } + + /** + * Hides the mouse pointer when it's on top of the .reveal + * container. + */ + function hideCursor() { + + if( cursorHidden === false ) { + cursorHidden = true; + dom.wrapper.style.cursor = 'none'; + } + + } + /** * Enters the paused mode which fades everything on screen to * black. @@ -4731,6 +4781,22 @@ } + /** + * Called whenever there is mouse input at the document level + * to determine if the cursor is active or not. + * + * @param {object} event + */ + function onDocumentCursorActive( event ) { + + showCursor(); + + clearTimeout( cursorInactiveTimeout ); + + cursorInactiveTimeout = setTimeout( hideCursor, config.hideCursorTime ); + + } + /** * Handler for the document level 'keypress' event. *