Просмотр исходного кода

tweaked mouse wheel navigation

Hakim El Hattab 12 лет назад
Родитель
Сommit
38b229a22f
3 измененных файлов с 36 добавлено и 26 удалено
  1. 4 0
      README.md
  2. 4 0
      index.html
  3. 28 26
      js/reveal.js

+ 4 - 0
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
 

+ 4 - 0
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>

+ 28 - 26
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,