tweaked mouse wheel navigation

This commit is contained in:
Hakim El Hattab 2012-01-14 19:22:27 -08:00
parent 17854e892b
commit 38b229a22f
3 changed files with 36 additions and 26 deletions

View File

@ -33,6 +33,9 @@ Reveal.initialize({
// If true; each slide will be pushed to the browser history // If true; each slide will be pushed to the browser history
history: true, history: true,
// Flags if mouse wheel navigation should be enabled
mouseWheel: true,
// Apply a 3D roll to links on hover // Apply a 3D roll to links on hover
rollingLinks: true, rollingLinks: true,
@ -55,6 +58,7 @@ Reveal.initialize({
- CSS is now much more explicit, rooted at #reveal, to prevent conflicts - CSS is now much more explicit, rooted at #reveal, to prevent conflicts
- Config option for disabling updates to URL, defaults to true - Config option for disabling updates to URL, defaults to true
- Anchors with image children no longer rotate in 3D on hover - Anchors with image children no longer rotate in 3D on hover
- Support for mouse wheel navigation ([naugtur](https://github.com/naugtur))
#### 1.1 #### 1.1

View File

@ -227,6 +227,9 @@
// If true; each slide will be pushed to the browser history // If true; each slide will be pushed to the browser history
history: true, history: true,
// Flags if mouse wheel navigation should be enabled
mouseWheel: true,
// Apply a 3D roll to links on hover // Apply a 3D roll to links on hover
rollingLinks: true, rollingLinks: true,
@ -239,5 +242,6 @@
hljs.initHighlightingOnLoad(); hljs.initHighlightingOnLoad();
</script> </script>
</body> </body>
</html> </html>

View File

@ -54,6 +54,7 @@ var Reveal = (function(){
history: false, history: false,
transition: 'default', transition: 'default',
theme: 'default', theme: 'default',
mouseWheel: true,
rollingLinks: true rollingLinks: true
}, },
@ -70,7 +71,10 @@ var Reveal = (function(){
document.body.style['WebkitTransform'] !== undefined || document.body.style['WebkitTransform'] !== undefined ||
document.body.style['MozTransform'] !== undefined || document.body.style['MozTransform'] !== undefined ||
document.body.style['msTransform'] !== 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 * Starts up the slideshow by applying configuration
@ -129,15 +133,15 @@ var Reveal = (function(){
dom.wrapper.classList.add( config.theme ); dom.wrapper.classList.add( config.theme );
} }
if( config.mouseWheel ) {
document.addEventListener('DOMMouseScroll', onDocumentMouseScroll, false); // FF
document.addEventListener('mousewheel', onDocumentMouseScroll, false);
}
if( config.rollingLinks ) { if( config.rollingLinks ) {
// Add some 3D magic to our anchors // Add some 3D magic to our anchors
linkify(); linkify();
} }
//bind scrolling
if(window.addEventListener){
document.addEventListener('DOMMouseScroll', scrollStep, false);
}
// Read the initial hash // Read the initial hash
readURL(); readURL();
@ -251,6 +255,24 @@ var Reveal = (function(){
slide(); 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. * 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 // Expose some methods publicly
return { return {
initialize: initialize, initialize: initialize,