move pointer logic out to own controller

This commit is contained in:
Hakim El Hattab 2020-04-07 13:25:46 +02:00
parent 094acd6a6a
commit 6030043036
4 changed files with 123 additions and 98 deletions

2
dist/reveal.css vendored
View file

@ -1,5 +1,5 @@
/*!
* reveal.js 4.0.0-dev (Mon Apr 06 2020)
* reveal.js 4.0.0-dev (Tue Apr 07 2020)
* https://revealjs.com
* MIT licensed
*

2
dist/reveal.min.js vendored

File diff suppressed because one or more lines are too long

118
js/controllers/pointer.js Normal file
View file

@ -0,0 +1,118 @@
/**
* Handles hiding of the pointer/cursor when inactive.
*/
export default class Pointer {
constructor( Reveal ) {
this.Reveal = Reveal;
// Throttles mouse wheel navigation
this.lastMouseWheelStep = 0;
// Is the mouse pointer currently hidden from view
this.cursorHidden = false;
// Timeout used to determine when the cursor is inactive
this.cursorInactiveTimeout = 0;
this.onDocumentCursorActive = this.onDocumentCursorActive.bind( this );
this.onDocumentMouseScroll = this.onDocumentMouseScroll.bind( this );
}
/**
* Called when the reveal.js config is updated.
*/
configure( config, oldConfig ) {
if( config.mouseWheel ) {
document.addEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false ); // FF
document.addEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
}
else {
document.removeEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false ); // FF
document.removeEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
}
// Auto-hide the mouse pointer when its inactive
if( config.hideInactiveCursor ) {
document.addEventListener( 'mousemove', this.onDocumentCursorActive, false );
document.addEventListener( 'mousedown', this.onDocumentCursorActive, false );
}
else {
this.showCursor();
document.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );
document.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );
}
}
/**
* Shows the mouse pointer after it has been hidden with
* #hideCursor.
*/
showCursor() {
if( this.cursorHidden ) {
this.cursorHidden = false;
this.Reveal.getRevealElement().style.cursor = '';
}
}
/**
* Hides the mouse pointer when it's on top of the .reveal
* container.
*/
hideCursor() {
if( this.cursorHidden === false ) {
this.cursorHidden = true;
this.Reveal.getRevealElement().style.cursor = 'none';
}
}
/**
* Called whenever there is mouse input at the document level
* to determine if the cursor is active or not.
*
* @param {object} event
*/
onDocumentCursorActive( event ) {
this.showCursor();
clearTimeout( this.cursorInactiveTimeout );
this.cursorInactiveTimeout = setTimeout( this.hideCursor.bind( this ), this.Reveal.getConfig().hideCursorTime );
}
/**
* Handles mouse wheel scrolling, throttled to avoid skipping
* multiple slides.
*
* @param {object} event
*/
onDocumentMouseScroll( event ) {
if( Date.now() - this.lastMouseWheelStep > 1000 ) {
this.lastMouseWheelStep = Date.now();
let delta = event.detail || -event.wheelDelta;
if( delta > 0 ) {
this.Reveal.next();
}
else if( delta < 0 ) {
this.Reveal.prev();
}
}
}
}

View file

@ -8,6 +8,7 @@ import Keyboard from './controllers/keyboard.js'
import Location from './controllers/location.js'
import Controls from './controllers/controls.js'
import Progress from './controllers/progress.js'
import Pointer from './controllers/pointer.js'
import Plugins from './controllers/plugins.js'
import Print from './controllers/print.js'
import Touch from './controllers/touch.js'
@ -87,6 +88,7 @@ export default function( revealElement, options ) {
location = new Location( Reveal ),
controls = new Controls( Reveal ),
progress = new Progress( Reveal ),
pointer = new Pointer( Reveal ),
plugins = new Plugins( Reveal ),
print = new Print( Reveal ),
touch = new Touch( Reveal ),
@ -102,15 +104,6 @@ export default function( revealElement, options ) {
// List of asynchronously loaded reveal.js dependencies
asyncDependencies = [],
// Throttles mouse wheel navigation
lastMouseWheelStep = 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,
@ -437,27 +430,6 @@ export default function( revealElement, options ) {
resume();
}
if( config.mouseWheel ) {
document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
document.addEventListener( 'mousewheel', onDocumentMouseScroll, false );
}
else {
document.removeEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
document.removeEventListener( 'mousewheel', onDocumentMouseScroll, false );
}
// 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();
@ -496,6 +468,7 @@ export default function( revealElement, options ) {
}
notes.configure( config, oldConfig );
pointer.configure( config, oldConfig );
controls.configure( config, oldConfig );
progress.configure( config, oldConfig );
keyboard.configure( config, oldConfig );
@ -1079,32 +1052,6 @@ export default function( revealElement, options ) {
}
/**
* 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.
@ -2314,46 +2261,6 @@ export default function( revealElement, options ) {
}
/**
* 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 );
}
/**
* Handles mouse wheel scrolling, throttled to avoid skipping
* multiple slides.
*
* @param {object} event
*/
function onDocumentMouseScroll( event ) {
if( Date.now() - lastMouseWheelStep > 600 ) {
lastMouseWheelStep = Date.now();
let delta = event.detail || -event.wheelDelta;
if( delta > 0 ) {
navigateNext();
}
else if( delta < 0 ) {
navigatePrev();
}
}
}
/**
* Handler for the window level 'hashchange' event.
*