locking an axis with gesture so that you can still scroll the window #33

#36
davetayls · Apr 14, 2013 · 02df87e · 02df87e
1 parent f5aee67
commit 02df87e
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 41 deletions.
diff --git a/jquery.kinetic.js b/jquery.kinetic.js
@@ -7,14 +7,15 @@
 */
 /*global define,require */
 (function($){
-	'use strict';
+    'use strict';
 
     var DEFAULT_SETTINGS = {
             cursor: 'move',
             decelerate: true,
             triggerHardware: false,
             y: true,
             x: true,
+            axisTolerance: 7,
             slowdown: 0.9,
             maxvelocity: 40,
             throttleFPS: 60,
@@ -203,10 +204,14 @@
         $this.unbind('dragstart', settings.events.dragStart);
     };
 
+    /**
+     * Initialises all the elements bound to the jQuery
+     * object
+     * @param  {Object} options
+     * @return {jQueryInstance}
+     */
     var initElements = function(options) {
-        this
-        .addClass(ACTIVE_CLASS)
-        .each(function(){
+        this.each(function(){
 
             var self = this,
                 $this = $(this);
@@ -215,6 +220,8 @@
                 return;
             }
 
+            $this.addClass(ACTIVE_CLASS);
+
             var settings = $.extend({}, DEFAULT_SETTINGS, options),
                 xpos,
                 prevXPos = false,
@@ -225,6 +232,7 @@
                 scrollTop,
                 throttleTimeout = 1000 / settings.throttleFPS,
                 lastMove,
+                gesture,
                 elementFocused
             ;
 
@@ -236,6 +244,8 @@
                 xpos = false;
                 ypos = false;
                 mouseDown = false;
+                gesture = false;
+                elementFocused = null;
             };
             $(document).mouseup(resetMouse).click(resetMouse);
 
@@ -257,49 +267,63 @@
                 ypos = clientY;
             };
             var end = function() {
-                if (xpos && prevXPos && settings.decelerate === false) {
+                if (!gesture && xpos && prevXPos && settings.decelerate === false) {
                     settings.decelerate = true;
                     calculateVelocities();
                     xpos = prevXPos = mouseDown = false;
                     move($this, settings);
                 }
             };
             var inputmove = function(clientX, clientY) {
-                if (!lastMove || new Date() > new Date(lastMove.getTime() + throttleTimeout)) {
-                    lastMove = new Date();
-
-                    if (mouseDown && (xpos || ypos)) {
-                        if (elementFocused) {
-                            $(elementFocused).blur();
-                            elementFocused = null;
-                            $this.focus();
-                        }
-                        settings.decelerate = false;
-                        settings.velocity   = settings.velocityY  = 0;
-                        $this[0].scrollLeft = settings.scrollLeft = settings.x ? $this[0].scrollLeft - (clientX - xpos) : $this[0].scrollLeft;
-                        $this[0].scrollTop  = settings.scrollTop  = settings.y ? $this[0].scrollTop - (clientY - ypos)  : $this[0].scrollTop;
-                        prevXPos = xpos;
-                        prevYPos = ypos;
-                        xpos = clientX;
-                        ypos = clientY;
-
-                        calculateVelocities();
-                        setMoveClasses.call($this, settings, settings.movingClass);
-
-                        if (typeof settings.moved === 'function') {
-                            settings.moved.call($this, settings);
+                if (gesture){
+                    return false;
+                } else {
+                    if (!lastMove || new Date() > new Date(lastMove.getTime() + throttleTimeout)) {
+                        lastMove = new Date();
+
+                        if (mouseDown && (xpos || ypos)) {
+                            if (elementFocused) {
+                                $(elementFocused).blur();
+                                elementFocused = null;
+                                $this.focus();
+                            }
+                            settings.decelerate = false;
+                            settings.velocity   = settings.velocityY  = 0;
+                            $this[0].scrollLeft = settings.scrollLeft = settings.x ? $this[0].scrollLeft - (clientX - xpos) : $this[0].scrollLeft;
+                            $this[0].scrollTop  = settings.scrollTop  = settings.y ? $this[0].scrollTop - (clientY - ypos)  : $this[0].scrollTop;
+                            prevXPos = xpos;
+                            prevYPos = ypos;
+                            xpos = clientX;
+                            ypos = clientY;
+
+                            calculateVelocities();
+                            setMoveClasses.call($this, settings, settings.movingClass);
+
+                            if (typeof settings.moved === 'function') {
+                                settings.moved.call($this, settings);
+                            }
                         }
                     }
-                }
-
-		if (!settings.y && settings.velocity < 5 && settings.velocityY > 5) {
-			return false;
-		}
 
-		return true;
+                    // if turned off y and x velocity < 5
+                    if (!settings.y && Math.abs(settings.velocityY) > settings.axisTolerance && Math.abs(settings.velocity) < settings.axisTolerance){
+                        gesture = true;
+                        return false;
+
+                    // if turned off x and y velocity < 5
+                    } else if (!settings.x && Math.abs(settings.velocity) > settings.axisTolerance && Math.abs(settings.velocityY) < settings.axisTolerance){
+                        gesture = true;
+                        return false;
+
+                    } else {
+                        return true;
+                    }
+                }
             };
 
-            // Events
+            /**
+             * Various events which get attached to the element
+             */
             settings.events = {
                 touchStart: function(e){
                     var touch;
@@ -314,8 +338,8 @@
                     if (mouseDown) {
                         touch = e.originalEvent.touches[0];
                         if (inputmove(touch.clientX, touch.clientY)) {
-				if (e.preventDefault) { e.preventDefault(); }
-			}
+                            if (e.preventDefault) { e.preventDefault(); }
+                        }
                     }
                 },
                 inputDown: function(e){
@@ -330,15 +354,13 @@
                 },
                 inputEnd: function(e){
                     end();
-                    elementFocused = null;
+                    resetMouse();
                     if (e.preventDefault) {e.preventDefault();}
                 },
                 inputMove: function(e) {
                     if (mouseDown){
                         if (inputmove(e.clientX, e.clientY)) {
-                            if (e.preventDefault) {
-                                e.preventDefault();
-                            }
+                            if (e.preventDefault) { e.preventDefault(); }
                         }
                     }
                 },

diff --git a/test/jquery.html b/test/jquery.html
@@ -47,6 +47,31 @@ <h2>Single image</h2>
                 $('#wrapper').kinetic('end');
             });
         </script>
+
+
+
+
+
+        <h2>Single image</h2>
+        <div id="wrapper-axis" class="wrapper">
+            <div class="inner">
+                <img src="../lib/wembley.jpg" alt="wembley stadium" />
+            </div>
+        </div>
+        <script type="text/javascript" charset="utf-8">
+            $('#wrapper-axis').kinetic({
+                y: false
+            });
+        </script>
+
+
+
+
+
+
+
+
+
         <h2>Forms</h2>
         <div id="wrapper2" class="wrapper">
             <div class="inner">