Added doubleTap and longTap event handlers, and thresholds to control…

…l the two. Fixes mattbryson#78
tuanha · Mar 26, 2013 · 9ce5e0b · 9ce5e0b
1 parent 314089c
commit 9ce5e0b
Show file tree

Hide file tree

Showing 16 changed files with 792 additions and 107 deletions.
diff --git a/demos/Click_vs_swipe.html → demos/Tap_vs_swipe.html b/demos/Click_vs_swipe.html → demos/Tap_vs_swipe.html
@@ -24,14 +24,24 @@
 			<script id='code_1'>
 				$(function() {	
 					var tapCount=0;
+					var doubleTapCount=0;
+					var longTapCount=0;
 					var swipeCount=0;
 					var blackCount=0;
 
 					//Enable swiping...
 					$("#test").swipe( {
 						tap:function(event, target) {
 							tapCount++;
-							$("#textText").html("You clicked " + tapCount +" times on " + $(target).attr("id"));
+							msg(target);
+						},
+						doubleTap:function(event, target) {
+							doubleTapCount++;
+							msg(target);
+						},
+						longTap:function(event, target) {
+							longTapCount++;
+							msg(target);
 						},
 						swipe:function() {
 							swipeCount++;
@@ -47,18 +57,27 @@
 						$("#another_div").html("<h3 id='div text'>jQuery click handler fired on the black div : you clicked the black div "+ 
 						blackCount + " times</h3>");
 					});
+
+					function msg(target) {
+					    $("#textText").html("You tapped " + tapCount +", double tapped " +  doubleTapCount + " and long tapped " +  longTapCount + " times on " +  $(target).attr("id"));
+					}
 				});
 			</script>
 
 			<span class='title'></span>
-			<h4>events: <code>tap</code>, <code>swipe</code></h4>
+			<h4>events: <code>tap</code>, <code>doubleTap</code>, <code>longTap</code>, <code>swipe</code></h4>
+			<h4>properties: <code>longTapThreshold</code>, <code>doubleTapThreshold</code></h4>
 			<p>You can also detect if the user simply clicks and does not swipe with the <code>tap</code> handler<br/><br/>
-				The <code>tap</code> handler is passed the original event object and the target that was clicked.
-				<br/><br/>
-				If you use the jquery.ui.ipad.js plugin (http://code.google.com/p/jquery-ui-for-ipad-and-iphone/) you can then also pickup
+				The <code>tap</code>, <code>doubleTap</code> and <code>longTap</code> handler are passed the original event object and the target that was clicked.
+				<br/></p>
+				<p class="muted">If you use the jquery.ui.ipad.js plugin (http://code.google.com/p/jquery-ui-for-ipad-and-iphone/) you can then also pickup
 				standard jQuery mouse events on children of the touchSwipe object.</p>
 
-				<p><code>tap</code> replaces the old <code>click</code> handler for naming consistency. Since the introduction of event 
+				<p>You can set the delay between taps which defines a double tap, and the length of a long tap with the <code>doubleTapThreshold</code> and <code>longTapThreshold</code> properties.</p>
+
+				<p>Note: If you assign both tap and double tap, you tap events will be delayed by the length of <code>doubleTapThreshold</code> as it waits to see if its a double before trigger the event</p>				
+
+				<p class="muted"><code>tap</code> replaces the old <code>click</code> handler for naming consistency. Since the introduction of event 
 				triggering as well as callbacks, the plugin cannot trigger a <code>click</code> event as it clashes with the jQ click event, 
 				so both the event and callback are called <code>tap</code>. For backwards compatibility, the <code>click</code> callback will still work
 				but there is no click event. You must use the <code>tap</code> event when binding with <code>on</code> or <code>bind</code></p>
@@ -69,7 +88,7 @@ <h4>events: <code>tap</code>, <code>swipe</code></h4>
 			<span class='navigation'></span>
 
 			<div id="test" class="box">
-				<div id="textText">Swipe or Click me</div><br/>
+				<div id="textText">Swipe, Tap, Double Tap or Long Tap me</div><br/>
 				<div id="a_div" class="box" style="width:150px;height:50px;background:#666"><h3 id='a_div_text'>Im just a child div</h3></div>
 				<div id="another_div" class="box" style="width:200px;height:100px;background:#000"><h3>Im a child div with my own jQuery click handler</h3></div>
 			</div>

diff --git a/demos/js/main.js b/demos/js/main.js
@@ -12,7 +12,7 @@ var fileList = [
 	'Trigger_handlers.html',
 	'Stop_propegation.html',
 	'Handlers_and_events.html',
-	'Click_vs_swipe.html',
+	'Tap_vs_swipe.html',
 	'Excluded_children.html',
 	'Page_zoom.html',
 	'Thresholds.html',

diff --git a/docs/files.html b/docs/files.html
@@ -87,7 +87,7 @@ <h1 class="classTitle">File Index</h1>
 	</div>
 	<footer class="footer">
 
-		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Sat Mar 23 2013 19:47:13 GMT-0000 (GMT)</p>
+		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Mar 26 2013 00:50:04 GMT-0000 (GMT)</p>
 	</footer>
 	<script type="text/javascript">
 		<!--

diff --git a/docs/index.html b/docs/index.html
@@ -379,7 +379,7 @@ <h1 class="classTitle">Class Index</h1>
 		</div>
 		<footer class="footer">
 
-			<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Sat Mar 23 2013 19:47:13 GMT-0000 (GMT)</p>
+			<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Mar 26 2013 00:50:04 GMT-0000 (GMT)</p>
 		</footer>
 	</div>
 </body>

diff --git a/docs/symbols/$.fn.html b/docs/symbols/$.fn.html
@@ -165,7 +165,7 @@ <h3>Constructor</h3>
 <!-- ============================== footer ================================= -->
 	<footer class="footer">
 
-		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Sat Mar 23 2013 19:47:13 GMT-0000 (GMT)</p>
+		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Mar 26 2013 00:50:03 GMT-0000 (GMT)</p>
 	</footer>
 </div></body>
 </html>
diff --git a/docs/symbols/$.fn.swipe.defaults.html b/docs/symbols/$.fn.swipe.defaults.html
@@ -207,6 +207,62 @@ <h4>Instance Properties<span class="jsdoc-inherits-caption pull-right">Defined B
 
 
 
+									</div>
+								</div>
+							</div>
+
+							<div class="jsdoc-member">
+								<div class="jsdoc-member-definition">
+									<b><a id="doubleTap" href="../symbols/%24.fn.swipe.defaults.html#doubleTap">doubleTap</a></b>
+									 : function
+									<span class="jsdoc-member-default">(default = null)</span>
+
+
+
+
+									<span class="jsdoc-inherits-from pull-right"><a href="../symbols/%24.fn.swipe.defaults.html">$.fn.swipe.defaults</a></span>
+								</div>
+								<div class="jsdoc-member-description">
+									<div class="jsdoc-member-content">
+										<div class="jsdoc-member-summary">
+											A handler triggered when a user double taps on the item. The delay between taps can be set with the doubleTapThreshold property. See <a href="../symbols/%24.fn.swipe.defaults.html#doubleTapThreshold">$.fn.swipe.defaults#doubleTapThreshold</a>
+											<span class="pull-right"><a href="../symbols/src/jquery.touchSwipe.js.html">code »</a></span>
+										</div>
+
+
+
+
+
+
+
+									</div>
+								</div>
+							</div>
+
+							<div class="jsdoc-member">
+								<div class="jsdoc-member-definition">
+									<b><a id="doubleTapThreshold" href="../symbols/%24.fn.swipe.defaults.html#doubleTapThreshold">doubleTapThreshold</a></b>
+									 : int
+									<span class="jsdoc-member-default">(default = 200)</span>
+
+
+
+
+									<span class="jsdoc-inherits-from pull-right"><a href="../symbols/%24.fn.swipe.defaults.html">$.fn.swipe.defaults</a></span>
+								</div>
+								<div class="jsdoc-member-description">
+									<div class="jsdoc-member-content">
+										<div class="jsdoc-member-summary">
+											Time in milliseconds between 2 taps to count as a doubletap
+											<span class="pull-right"><a href="../symbols/src/jquery.touchSwipe.js.html">code »</a></span>
+										</div>
+
+
+
+
+
+
+
 									</div>
 								</div>
 							</div>
@@ -319,6 +375,62 @@ <h4>Instance Properties<span class="jsdoc-inherits-caption pull-right">Defined B
 
 
 
+									</div>
+								</div>
+							</div>
+
+							<div class="jsdoc-member">
+								<div class="jsdoc-member-definition">
+									<b><a id="longTap" href="../symbols/%24.fn.swipe.defaults.html#longTap">longTap</a></b>
+									 : function
+									<span class="jsdoc-member-default">(default = null)</span>
+
+
+
+
+									<span class="jsdoc-inherits-from pull-right"><a href="../symbols/%24.fn.swipe.defaults.html">$.fn.swipe.defaults</a></span>
+								</div>
+								<div class="jsdoc-member-description">
+									<div class="jsdoc-member-content">
+										<div class="jsdoc-member-summary">
+											A handler triggered when a user long taps on the item. The delay between start and end can be set with the longTapThreshold property. See <a href="../symbols/%24.fn.swipe.defaults.html#doubleTapThreshold">$.fn.swipe.defaults#doubleTapThreshold</a>
+											<span class="pull-right"><a href="../symbols/src/jquery.touchSwipe.js.html">code »</a></span>
+										</div>
+
+
+
+
+
+
+
+									</div>
+								</div>
+							</div>
+
+							<div class="jsdoc-member">
+								<div class="jsdoc-member-definition">
+									<b><a id="longTapThreshold" href="../symbols/%24.fn.swipe.defaults.html#longTapThreshold">longTapThreshold</a></b>
+									 : int
+									<span class="jsdoc-member-default">(default = 1000)</span>
+
+
+
+
+									<span class="jsdoc-inherits-from pull-right"><a href="../symbols/%24.fn.swipe.defaults.html">$.fn.swipe.defaults</a></span>
+								</div>
+								<div class="jsdoc-member-description">
+									<div class="jsdoc-member-content">
+										<div class="jsdoc-member-summary">
+											Time in milliseconds between tap and release for a long tap
+											<span class="pull-right"><a href="../symbols/src/jquery.touchSwipe.js.html">code »</a></span>
+										</div>
+
+
+
+
+
+
+
 									</div>
 								</div>
 							</div>
@@ -764,7 +876,7 @@ <h4>Instance Properties<span class="jsdoc-inherits-caption pull-right">Defined B
 <!-- ============================== footer ================================= -->
 	<footer class="footer">
 
-		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Sat Mar 23 2013 19:47:13 GMT-0000 (GMT)</p>
+		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Mar 26 2013 00:50:03 GMT-0000 (GMT)</p>
 	</footer>
 </div></body>
 </html>
diff --git a/docs/symbols/$.fn.swipe.directions.html b/docs/symbols/$.fn.swipe.directions.html
@@ -340,7 +340,7 @@ <h4>Instance Properties<span class="jsdoc-inherits-caption pull-right">Defined B
 <!-- ============================== footer ================================= -->
 	<footer class="footer">
 
-		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Sat Mar 23 2013 19:47:13 GMT-0000 (GMT)</p>
+		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Mar 26 2013 00:50:03 GMT-0000 (GMT)</p>
 	</footer>
 </div></body>
 </html>
diff --git a/docs/symbols/$.fn.swipe.fingers.html b/docs/symbols/$.fn.swipe.fingers.html
@@ -285,7 +285,7 @@ <h4>Instance Properties<span class="jsdoc-inherits-caption pull-right">Defined B
 <!-- ============================== footer ================================= -->
 	<footer class="footer">
 
-		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Sat Mar 23 2013 19:47:13 GMT-0000 (GMT)</p>
+		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Mar 26 2013 00:50:04 GMT-0000 (GMT)</p>
 	</footer>
 </div></body>
 </html>
diff --git a/docs/symbols/$.fn.swipe.html b/docs/symbols/$.fn.swipe.html
@@ -621,6 +621,116 @@ <h3>Events<span class="jsdoc-inherits-caption pull-right">Defined By</span></h3>
 
 
 
+											<div class="jsdoc-member-detail accordion-content">
+
+													<b>Parameters</b>
+													<dl>
+
+															<dt>event : <span class="jsdoc-typedesc">EventObject</span> </dt>
+															<dd>The original event object</dd>
+
+															<dt>target : <span class="jsdoc-typedesc">DomObject</span> </dt>
+															<dd>The element clicked on.</dd>
+
+													</dl>
+
+
+											</div>
+
+									</div>
+								</div>
+							</div>
+
+							<div class="jsdoc-member accordion-button">
+								<div class="jsdoc-member-definition">
+									<div class="jsdoc-member-content">
+										<i class="icon-jsdoc icon-jsdoc-event"></i>
+										<b><a id="event:doubleTap" href="../symbols/%24.fn.swipe.html#event:doubleTap">doubleTap</a></b>
+										<span class="signature">( <span class="jsdoc-typedesc">EventObject</span> event, <span class="jsdoc-typedesc">DomObject</span> target )</span>
+
+
+
+
+										<span class="jsdoc-inherits-from pull-right"><a href="../symbols/%24.fn.swipe.html">$.fn.swipe</a></span>
+									</div>
+								</div>
+								<div class="jsdoc-member-description">
+									<div class="jsdoc-member-content">
+										<div class="jsdoc-member-summary">
+											A double tap handler triggered when a user double clicks or taps on an element.
+You can set the time delay for a double tap with the <a href="../symbols/%24.fn.swipe.defaults.html#doubleTapThreshold">$.fn.swipe.defaults#doubleTapThreshold</a> property. 
+Note: If you set both <code>doubleTap</code> and <code>tap</code> handlers, the <code>tap</code> event will be delayed by the <code>doubleTapThreshold</code>
+as the script needs to check if its a double tap.
+											<span class="pull-right"><a href="../symbols/src/jquery.touchSwipe.js.html">code »</a></span>
+										</div>
+
+
+
+
+
+											<div class="jsdoc-member-see jsdoc-member-info">
+												<span class="label label-jsdoc label-jsdoc-see">See</span>
+
+													<span class="jsdoc-symbol-enum"><a href="../symbols/%24.fn.swipe.defaults.html#doubleTapThreshold">$.fn.swipe.defaults#doubleTapThreshold</a></span>
+
+											</div>
+
+
+
+											<div class="jsdoc-member-detail accordion-content">
+
+													<b>Parameters</b>
+													<dl>
+
+															<dt>event : <span class="jsdoc-typedesc">EventObject</span> </dt>
+															<dd>The original event object</dd>
+
+															<dt>target : <span class="jsdoc-typedesc">DomObject</span> </dt>
+															<dd>The element clicked on.</dd>
+
+													</dl>
+
+
+											</div>
+
+									</div>
+								</div>
+							</div>
+
+							<div class="jsdoc-member accordion-button">
+								<div class="jsdoc-member-definition">
+									<div class="jsdoc-member-content">
+										<i class="icon-jsdoc icon-jsdoc-event"></i>
+										<b><a id="event:longTap" href="../symbols/%24.fn.swipe.html#event:longTap">longTap</a></b>
+										<span class="signature">( <span class="jsdoc-typedesc">EventObject</span> event, <span class="jsdoc-typedesc">DomObject</span> target )</span>
+
+
+
+
+										<span class="jsdoc-inherits-from pull-right"><a href="../symbols/%24.fn.swipe.html">$.fn.swipe</a></span>
+									</div>
+								</div>
+								<div class="jsdoc-member-description">
+									<div class="jsdoc-member-content">
+										<div class="jsdoc-member-summary">
+											A long tap handler triggered when a user long clicks or taps on an element.
+You can set the time delay for a long tap with the <a href="../symbols/%24.fn.swipe.defaults.html#longTapThreshold">$.fn.swipe.defaults#longTapThreshold</a> property.
+											<span class="pull-right"><a href="../symbols/src/jquery.touchSwipe.js.html">code »</a></span>
+										</div>
+
+
+
+
+
+											<div class="jsdoc-member-see jsdoc-member-info">
+												<span class="label label-jsdoc label-jsdoc-see">See</span>
+
+													<span class="jsdoc-symbol-enum"><a href="../symbols/%24.fn.swipe.defaults.html#longTapThreshold">$.fn.swipe.defaults#longTapThreshold</a></span>
+
+											</div>
+
+
+
 											<div class="jsdoc-member-detail accordion-content">
 
 													<b>Parameters</b>
@@ -1205,7 +1315,7 @@ <h3>Events<span class="jsdoc-inherits-caption pull-right">Defined By</span></h3>
 <!-- ============================== footer ================================= -->
 	<footer class="footer">
 
-		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Sat Mar 23 2013 19:47:13 GMT-0000 (GMT)</p>
+		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Mar 26 2013 00:50:03 GMT-0000 (GMT)</p>
 	</footer>
 </div></body>
 </html>
diff --git a/docs/symbols/$.fn.swipe.pageScroll.html b/docs/symbols/$.fn.swipe.pageScroll.html
@@ -284,7 +284,7 @@ <h4>Instance Properties<span class="jsdoc-inherits-caption pull-right">Defined B
 <!-- ============================== footer ================================= -->
 	<footer class="footer">
 
-		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Sat Mar 23 2013 19:47:13 GMT-0000 (GMT)</p>
+		<p>Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Mar 26 2013 00:50:04 GMT-0000 (GMT)</p>
 	</footer>
 </div></body>
 </html>