Permalink
Browse files

add doubletap for more reliable swiping

  • Loading branch information...
1 parent 3774d5b commit 493a7d7e3924860176ac6d57f137f8631725974d @technoweenie technoweenie committed Apr 4, 2010
Showing with 109 additions and 92 deletions.
  1. +105 −0 public/js/jquery.doubletap-0.1.js
  2. +0 −87 public/js/jquery.swipe-0.2.js
  3. +3 −4 public/js/showoff.js
  4. +1 −1 views/index.erb
View
105 public/js/jquery.doubletap-0.1.js
@@ -0,0 +1,105 @@
+(function($) {
+ var touchStatus = function(target, touch) {
+ this.target = $(target);
+ this.touch = touch;
+ this.startX = this.currentX = touch.screenX;
+ this.startY = this.currentY = touch.screenY;
+ this.eventType = null;
+ }
+ touchStatus.latestTap = null;
+
+ touchStatus.prototype.move = function(touch) {
+ this.currentX = touch.screenX;
+ this.currentY = touch.screenY;
+ }
+
+ touchStatus.prototype.process = function() {
+ var offsetX = this.currentX - this.startX;
+ var offsetY = this.currentY - this.startY;
+ if(offsetX == 0 && offsetY == 0) {
+ this.checkForDoubleTap()
+ } else if(Math.abs(offsetY) > Math.abs(offsetX)) {
+ this.eventType = offsetY > 0 ? 'swipedown' : 'swipeup';
+ this.target.trigger('swipe', [this])
+ } else {
+ this.eventType = offsetX > 0 ? 'swiperight' : 'swipeleft';
+ this.target.trigger('swipe', [this])
+ }
+ this.target.trigger(this.eventType, [this])
+ this.target.trigger('touch', [this])
+ }
+
+ touchStatus.prototype.checkForDoubleTap = function() {
+ if(touchStatus.latestTap) {
+ if((new Date() - touchStatus.latestTap) < 400)
+ this.eventType = 'doubletap'
+ }
+ if(!this.eventType) this.eventType = 'tap'
+ touchStatus.latestTap = new Date()
+ }
+
+ var swipeEvents = function(elements) {
+ elements.bind('touchstart', this.touchStart);
+ elements.bind('touchmove', this.touchMove);
+ elements.bind('touchcancel', this.touchCancel);
+ elements.bind('touchend', this.touchEnd);
+ }
+
+ swipeEvents.prototype.touchStart = function(evt) {
+ var target = this;
+ swipeEvents.eachTouch(evt, function(touch) {
+ swipeEvents.touches[touch.identifier] = new touchStatus(target, touch);
+ })
+ }
+
+ swipeEvents.prototype.touchMove = function(evt) {
+ swipeEvents.eachTouch(evt, function(touch) {
+ var loc = swipeEvents.touches[touch.identifier]
+ if(loc) loc.move(touch)
+ })
+ }
+
+ swipeEvents.prototype.touchCancel = function(evt) {
+ swipeEvents.eachTouch(evt, function(touch) {
+ swipeEvents.purge(touch, true)
+ })
+ }
+
+ swipeEvents.prototype.touchEnd = function(evt) {
+ swipeEvents.eachTouch(evt, function(touch) {
+ swipeEvents.purge(touch)
+ })
+ }
+
+ swipeEvents.touches = {}
+ swipeEvents.purge = function(touch, cancelled) {
+ if(!cancelled) {
+ var loc = swipeEvents.touches[touch.identifier]
+ if(loc) loc.process()
+ }
+ delete swipeEvents.touches[touch.identifier]
+ }
+
+ swipeEvents.eachTouch = function(evt, callback) {
+ var evt = evt.originalEvent;
+ var num = evt.changedTouches.length;
+ for(var i = 0; i < num; i++) {
+ callback(evt.changedTouches[i])
+ }
+ }
+
+ // adds custom events:
+ // touch // all events
+ // swipe // only swipe* events
+ // swipeleft
+ // swiperight
+ // swipeup
+ // swipedown
+ // tap
+ // doubletap
+ $.fn.addSwipeEvents = function(callback) {
+ new swipeEvents(this);
+ if(callback) this.bind('touch', callback)
+ return this;
+ }
+})(jQuery);
View
87 public/js/jquery.swipe-0.2.js
@@ -1,87 +0,0 @@
-/*
- * jSwipe - jQuery Plugin
- * http://plugins.jquery.com/project/swipe
- * http://www.ryanscherf.com/demos/swipe/
- *
- * Copyright (c) 2009 Ryan Scherf (www.ryanscherf.com)
- * Licensed under the MIT license
- *
- * $Date: 2009-07-14 (Tue, 14 Jul 2009) $
- * $version: 0.1
- *
- * This jQuery plugin will only run on devices running Mobile Safari
- * on iPhone or iPod Touch devices running iPhone OS 2.0 or later.
- * http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
- */
-(function($) {
- $.fn.swipe = function(options) {
- // Default thresholds & swipe functions
- var defaults = {
- threshold: {
- x: 30,
- y: 10
- },
- swipeLeft: function() { alert('swiped left') },
- swipeRight: function() { alert('swiped right') },
- preventDefaultEvents: true
- };
-
- var options = $.extend(defaults, options);
-
- if (!this) return false;
-
- return this.each(function() {
-
- var me = $(this)
-
- // Private variables for each element
- var originalCoord = { x: 0, y: 0 }
- var finalCoord = { x: 0, y: 0 }
-
- // Screen touched, store the original coordinate
- function touchStart(event) {
- console.log('Starting swipe gesture...')
- originalCoord.x = event.targetTouches[0].pageX
- originalCoord.y = event.targetTouches[0].pageY
- }
-
- // Store coordinates as finger is swiping
- function touchMove(event) {
- if (defaults.preventDefaultEvents)
- event.preventDefault();
- finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates
- finalCoord.y = event.targetTouches[0].pageY
- }
-
- // Done Swiping
- // Swipe should only be on X axis, ignore if swipe on Y axis
- // Calculate if the swipe was left or right
- function touchEnd(event) {
- console.log('Ending swipe gesture...')
- var changeY = originalCoord.y - finalCoord.y
- if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {
- changeX = originalCoord.x - finalCoord.x
-
- if(changeX > defaults.threshold.x) {
- defaults.swipeLeft()
- }
- if(changeX < (defaults.threshold.x*-1)) {
- defaults.swipeRight()
- }
- }
- }
-
- // Swipe was canceled
- function touchCancel(event) {
- console.log('Canceling swipe gesture...')
- }
-
- // Add gestures to all swipable areas
- this.addEventListener("touchstart", touchStart, false);
- this.addEventListener("touchmove", touchMove, false);
- this.addEventListener("touchend", touchEnd, false);
- this.addEventListener("touchcancel", touchCancel, false);
-
- });
- };
-})(jQuery);
View
7 public/js/showoff.js
@@ -169,10 +169,9 @@ function showSlide(back_step) {
incrSteps = 0
}
- $('.content').swipe({
- swipeLeft: swipeLeft,
- swipeRight: swipeRight
- });
+ $('body').addSwipeEvents().
+ bind('swipeleft', swipeLeft).
+ bind('swiperight', swipeRight)
removeResults()
}
View
2 views/index.erb
@@ -14,7 +14,7 @@
<script type="text/javascript" src="<%= @asset_path %>/js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="<%= @asset_path %>/js/jquery.batchImageLoad.js"></script>
<script type="text/javascript" src="<%= @asset_path %>/js/jquery-print.js"></script>
- <script type="text/javascript" src="<%= @asset_path %>/js/jquery.swipe-0.2.js"></script>
+ <script type="text/javascript" src="<%= @asset_path %>/js/jquery.doubletap-0.1.js"></script>
<script type="text/javascript" src="<%= @asset_path %>/js/fg.menu.js"></script>
<script type="text/javascript" src="<%= @asset_path %>/js/showoff.js"></script>
<script type="text/javascript" src="<%= @asset_path %>/js/jTypeWriter.js"> </script>

0 comments on commit 493a7d7

Please sign in to comment.