automatically hide the mouse pointer after 5s of inactivity (#1837)

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,
 

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.
 	 *