tweaked mouse wheel navigation
authorHakim El Hattab <hakim.elhattab@gmail.com>
Sun, 15 Jan 2012 03:22:27 +0000 (19:22 -0800)
committerHakim El Hattab <hakim.elhattab@gmail.com>
Sun, 15 Jan 2012 03:22:27 +0000 (19:22 -0800)
README.md
index.html
js/reveal.js

index 87b39d139a5fcabab82276c0c90ae8ef889613a3..051ed011c4b5e007081e3e2c55864535e3a43dcc 100644 (file)
--- 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
 
index b64ab54d4d346f4134c87b1af9ed1082983dd0e6..1518eb956224bbab89b46f5a09be13a5f2b56425 100644 (file)
                                // 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,
 
 
                        hljs.initHighlightingOnLoad();
                </script>
+
        </body>
 </html>
\ No newline at end of file
index fe66dab874bd123d378bce6a9d98c2d5cb0416a9..6a3398313cdf4d094905f8db123a3370ade011f0 100644 (file)
@@ -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,