From 38b229a22f3f87038037f160e204953358eb0617 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 14 Jan 2012 19:22:27 -0800 Subject: [PATCH] tweaked mouse wheel navigation --- README.md | 4 ++++ index.html | 4 ++++ js/reveal.js | 54 +++++++++++++++++++++++++++------------------------- 3 files changed, 36 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 87b39d1..051ed01 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,9 @@ Reveal.initialize({ // If true; each slide will be pushed to the browser history history: true, + // Flags if mouse wheel navigation should be enabled + mouseWheel: true, + // Apply a 3D roll to links on hover rollingLinks: true, @@ -55,6 +58,7 @@ Reveal.initialize({ - CSS is now much more explicit, rooted at #reveal, to prevent conflicts - Config option for disabling updates to URL, defaults to true - Anchors with image children no longer rotate in 3D on hover +- Support for mouse wheel navigation ([naugtur](https://github.com/naugtur)) #### 1.1 diff --git a/index.html b/index.html index b64ab54..1518eb9 100644 --- a/index.html +++ b/index.html @@ -227,6 +227,9 @@ // If true; each slide will be pushed to the browser history history: true, + // Flags if mouse wheel navigation should be enabled + mouseWheel: true, + // Apply a 3D roll to links on hover rollingLinks: true, @@ -239,5 +242,6 @@ hljs.initHighlightingOnLoad(); + \ No newline at end of file diff --git a/js/reveal.js b/js/reveal.js index fe66dab..6a33983 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -54,6 +54,7 @@ var Reveal = (function(){ history: false, transition: 'default', theme: 'default', + mouseWheel: true, rollingLinks: true }, @@ -70,7 +71,10 @@ var Reveal = (function(){ document.body.style['WebkitTransform'] !== undefined || document.body.style['MozTransform'] !== undefined || document.body.style['msTransform'] !== undefined || - document.body.style['OTransform'] !== undefined; + document.body.style['OTransform'] !== undefined, + + // Throttles mouse wheel navigation + mouseWheelTimeout = 0; /** * Starts up the slideshow by applying configuration @@ -129,15 +133,15 @@ var Reveal = (function(){ dom.wrapper.classList.add( config.theme ); } + if( config.mouseWheel ) { + document.addEventListener('DOMMouseScroll', onDocumentMouseScroll, false); // FF + document.addEventListener('mousewheel', onDocumentMouseScroll, false); + } + if( config.rollingLinks ) { // Add some 3D magic to our anchors linkify(); } - - //bind scrolling - if(window.addEventListener){ - document.addEventListener('DOMMouseScroll', scrollStep, false); - } // Read the initial hash readURL(); @@ -251,6 +255,24 @@ var Reveal = (function(){ slide(); } } + + /** + * Handles mouse wheel scrolling, throttled to avoid + * skipping multiple slides. + */ + function onDocumentMouseScroll( event ){ + clearTimeout( mouseWheelTimeout ); + + mouseWheelTimeout = setTimeout( function() { + var delta = event.detail || -event.wheelDelta; + if( delta > 0 ) { + availableRoutes().down ? navigateDown() : navigateRight(); + } + else { + availableRoutes().up ? navigateUp() : navigateLeft(); + } + }, 100 ); + } /** * Handler for the window level 'hashchange' event. @@ -627,26 +649,6 @@ var Reveal = (function(){ } } - var stepT=0; - function scrollStep(e){ - clearTimeout(stepT); - stepT=setTimeout(function(){ - if(e.detail>0){ - if(availableRoutes().down){ - navigateDown() - }else{ - navigateRight() - } - }else{ - if(availableRoutes().up){ - navigateUp() - }else{ - navigateLeft() - } - } - },200); - } - // Expose some methods publicly return { initialize: initialize,