From 38b229a22f3f87038037f160e204953358eb0617 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
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 87b39d13..051ed011 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 b64ab54d..1518eb95 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();
</script>
+
</body>
</html>
\ No newline at end of file
diff --git a/js/reveal.js b/js/reveal.js
index fe66dab8..6a339831 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,
--
GitLab