RubyGems - rails_modular_admin - Versions diffs - 0.3.1 → 0.4.0 - Mend

rails_modular_admin 0.3.1 → 0.4.0

Files changed (1416) hide show

data/app/assets/node_modules/jquery-touchswipe/demos/Pinch_and_Swipe.html ADDED Viewed

@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <!--
+    		NOTE viewport is set so user can scale
+    		-->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
+        <meta http-equiv="x-ua-compatible" content="IE=9">
+        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
+        <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
+        <link href="css/main.css" type="text/css" rel="stylesheet" />
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+        <script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
+        <script type="text/javascript" src="../jquery.touchSwipe.js"></script>
+        <script type="text/javascript" src="js/main.js"></script>
+        <title>touchSwipe</title>
+    </head>
+    <body>
+		<a href="https://github.com/mattbryson"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
+		<div class="container">
+			<script id='code_1'>
+				$(function() {
+					$("#test").swipe( {
+						swipeStatus:function(event, phase, direction, distance , duration , fingerCount) {
+						   $(this).find('#swipe_text').text("swiped " + distance + ' px');
+						   if(phase === $.fn.swipe.phases.PHASE_END || phase === $.fn.swipe.phases.PHASE_CANCEL) {
+							   //The handlers below fire after the status,
+							   // so we can change the text here, and it will be replaced if the handlers below fire
+							   $(this).find('#swipe_text').text("No swipe was made");
+						   }
+						},
+						pinchStatus:function(event, phase, direction, distance , duration , fingerCount, pinchZoom) {
+							$(this).find('#pinch_text').text("pinched " + distance + " px ");
+							if(phase === $.fn.swipe.phases.PHASE_END || phase === $.fn.swipe.phases.PHASE_CANCEL) {
+							   //The handlers below fire after the status,
+							   // so we can change the text here, and it will be replaced if the handlers below fire
+							   $(this).find('#pinch_text').text("No pinch was made");
+						   }
+						},
+						swipe:function(event, direction, distance, duration, fingerCount) {
+							 $(this).find('#swipe_text').text("You swiped " + direction + " with " + fingerCount + " fingers");
+						},
+						pinchIn:function(event, direction, distance, duration, fingerCount, pinchZoom) {
+							$(this).find('#pinch_text').text("You pinched " +direction + " by " + distance +"px, zoom scale is "+pinchZoom);
+						},
+						pinchOut:function(event, direction, distance, duration, fingerCount, pinchZoom) {
+							$(this).find('#pinch_text').text("You pinched " +direction + " by " + distance +"px, zoom scale is "+pinchZoom);
+						},
+						fingers:$.fn.swipe.fingers.ALL
+					});
+				});
+			</script>
+			<span class='title'></span>
+			<h4>events:  <span class='events'><code>pinchStatus</code>, <code>swipeStatus</code></span><h4>
+			<h4>properties: <span class='properties'><code>pinchThreshold</code></span></h4>
+			<p>You can combine both <code>pinch</code> and <code>swipe</code> events. As the user can simultaneously pinch and swipe, both events are tirggered at the same time.<br/>
+			  The <code>pinchThreshold</code> property sets how far the user must pinch before it is considered a pinch. The default is 20px.  This is useful when trying to elimate slight pinch movement when the user is actually swiping.
+			</p>
+			<button class='btn btn-small btn-info example_btn'>Jump to Example</button>
+			<pre class="prettyprint lang-js" data-src='code_1'></pre>
+				<span class='navigation'></span>
+				<div id="test" class="box">
+					 <div id='swipe_text'>Pinch me</div>
+					 <div id='pinch_text'></div>
+				</div>
+				<span class='navigation'></span>
+			</div>
+	   </body>
+	</html>

data/app/assets/node_modules/jquery-touchswipe/demos/Pinch_status.html ADDED Viewed

@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <!--
+    		NOTE viewport is set so user can scale
+    		-->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
+        <meta http-equiv="x-ua-compatible" content="IE=9">
+        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
+        <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
+        <link href="css/main.css" type="text/css" rel="stylesheet" />
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+        <script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
+        <script type="text/javascript" src="../jquery.touchSwipe.js"></script>
+        <script type="text/javascript" src="js/main.js"></script>
+        <title>touchSwipe</title>
+    </head>
+    <body>
+		<a href="https://github.com/mattbryson"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
+		<div class="container">
+			<script id='code_1'>
+				$(function() {
+					$("#test").swipe( {
+						pinchStatus:function(event, phase, direction, distance , duration , fingerCount, pinchZoom, fingerData) {
+							$(this).html("Pinch zoom " + pinchZoom + "  <br/>Distance pinched " + distance +" <br/>Direction " + direction);
+						},
+						fingers:2,
+						threshold:0	,
+						preventDefaultEvents:false
+					});
+				});
+			</script>
+			<span class='title'></span>
+			<h4>events:  <span class='events'><code>pinchStatus</code></span></h4>
+			<p>You can also get the current status of a <code>pinch</code>, which can be used in place of the other pinch methods. The <code>pinchStatus</code> reports <code>phase</code>, <code>direction</code>, <code>distance</code>, <code>duration</code>, <code>fingerCount</code> and <code>pinchZoom</code>.</p>
+			<button class='btn btn-small btn-info example_btn'>Jump to Example</button>
+			<pre class="prettyprint" data-src='code_1'></pre>
+			<span class='navigation'></span>
+			<div id="test" class="box">Pinch me</div>
+			<span class='navigation'></span>
+		</div>
+   </body>
+</html>

data/app/assets/node_modules/jquery-touchswipe/demos/Single_swipe.html ADDED Viewed

@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+        <meta http-equiv="x-ua-compatible" content="IE=9">
+        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
+        <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
+        <link href="css/main.css" type="text/css" rel="stylesheet" />
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+        <script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
+        <script type="text/javascript" src="../jquery.touchSwipe.min.js"></script>
+        <script type="text/javascript" src="js/main.js"></script>
+        <title>touchSwipe</title>
+    </head>
+    <body>
+		<a href="https://github.com/mattbryson"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
+		<div class="container">
+			<script id='code_1'>
+				$(function() {
+					//Keep track of how many swipes
+					var count=0;
+					//Enable swiping...
+					$("#test").swipe( {
+						//Single swipe handler for left swipes
+						swipeLeft:function(event, direction, distance, duration, fingerCount) {
+							$(this).text("You swiped " + direction + " " + ++count + " times " );
+						},
+						//Default is 75px, set to 0 for demo so any distance triggers swipe
+						threshold:0
+					});
+				});
+			</script>
+			<span class='title'></span>
+			<h4>events:  <span class='events'><code>swipeLeft</code>, <code>swipeRight</code>, <code>swipeUp</code>, <code>swipeDown</code>, <code>swipe</code></span></h4>
+			<p>By using just one handler <code>swipeLeft</code> you can detect ONLY left swipes. There are handlers for each direction, as well as the generic <code>swipe</code> handler.</p>
+			<button class='btn btn-small btn-info example_btn'>Jump to Example</button>
+			<pre class="prettyprint lang-js" data-src='code_1'></pre>
+			<span class='navigation'></span>
+			<div id="test" class="box">I only swipe left</div>
+			<span class='navigation'></span>
+		</div>
+   </body>
+</html>

data/app/assets/node_modules/jquery-touchswipe/demos/Stop_propegation.html ADDED Viewed

@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+        <meta http-equiv="x-ua-compatible" content="IE=9">
+        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
+        <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
+        <link href="css/main.css" type="text/css" rel="stylesheet" />
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+        <script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
+        <script type="text/javascript" src="../jquery.touchSwipe.min.js"></script>
+        <script type="text/javascript" src="js/main.js"></script>
+        <title>touchSwipe</title>
+    </head>
+    <body>
+		<a href="https://github.com/mattbryson"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
+		<div class="container">
+			<script id='code_1'>
+				$(function() {
+					//Enable swiping...
+					$("#test").swipe( {
+						swipeStatus:function(event, phase, direction, distance, fingerCount) {
+							var str = "";
+							switch (phase) {
+								case "start" : str="Started"; break;
+								case "move" : str="You have moved " + distance +" pixels, past 200 and the handler will fire"; break;
+								case "end" : str="Handler fired, you swiped " + direction; break;
+								case "cancel" : str="cancel handler fired"; break;
+							}
+							$(this).text(str);
+							//This will cancel the current swipe and immediately re run this handler with a cancel event
+							return false;
+						}
+					});
+				});
+			</script>
+			<span class='title'></span>
+			<h4>events:  <span class='events'><code>swipeStatus</code></span></h4>
+			<p>In your event handlers, you can return a value of false if you want to manually cancel the swipe. This will trigger the 'cancel' event.</p>
+			<button class='btn btn-small btn-info example_btn'>Jump to Example</button>
+			<pre class="prettyprint lang-js" data-src="code_1"></pre>
+			<span class='navigation'></span>
+			<div id="test" class="box">Swipe will start, but then cancel as the event handler returns false</div>
+			<span class='navigation'></span>
+		</div>
+   </body>
+</html>

data/app/assets/node_modules/jquery-touchswipe/demos/Swipe_status.html ADDED Viewed

@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+        <meta http-equiv="x-ua-compatible" content="IE=9">
+        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
+        <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
+        <link href="css/main.css" type="text/css" rel="stylesheet" />
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+        <script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
+        <script type="text/javascript" src="../jquery.touchSwipe.js"></script>
+        <script type="text/javascript" src="js/main.js"></script>
+        <title>touchSwipe</title>
+    </head>
+    <body>
+		<a href="https://github.com/mattbryson"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
+		<div class="container">
+			<script id='code_1'>
+				$(function() {
+					//Enable swiping...
+					$("#test").swipe( {
+						swipeStatus:function(event, phase, direction, distance, duration, fingers, fingerData, currentDirection)
+						{
+							var str = "<h4>Swipe Phase : " + phase + "<br/>";
+              str += "Current direction: " + currentDirection + "<br/>";
+							str += "Direction from inital touch: " + direction + "<br/>";
+							str += "Distance from inital touch: " + distance + "<br/>";
+							str += "Duration of swipe: " + duration + "<br/>";
+							str += "Fingers used: " + fingers + "<br/></h4>";
+							//Here we can check the:
+							//phase : 'start', 'move', 'end', 'cancel'
+							//direction : 'left', 'right', 'up', 'down'
+							//distance : Distance finger is from initial touch point in px
+							//duration : Length of swipe in MS
+							//fingerCount : the number of fingers used
+							if (phase!="cancel" && phase!="end") {
+								if (duration<5000)
+									str +="Under maxTimeThreshold.<h3>Swipe handler will be triggered if you release at this point.</h3>"
+								else
+									str +="Over maxTimeThreshold. <h3>Swipe handler will be canceled if you release at this point.</h3>"
+								if (distance<200)
+									str +="Not yet reached threshold.  <h3>Swipe will be canceled if you release at this point.</h3>"
+								else
+									str +="Threshold reached <h3>Swipe handler will be triggered if you release at this point.</h3>"
+							}
+							if (phase=="cancel")
+								str +="<br/>Handler not triggered. <br/> One or both of the thresholds was not met "
+							if (phase=="end")
+								str +="<br/>Handler was triggered."
+							$("#test").html(str);
+						},
+						threshold:200,
+						maxTimeThreshold:5000,
+						fingers:'all'
+					});
+				});
+			</script>
+			<span class='title'></span>
+			<h4>event:  <span class='events'><code>swipeStatus</code></span></h4>
+			<p>You can also get the current status of the swipe, which can be used in place of all other methods. The status reports <code>phase</code>, <code>direction</code>, <code>distance</code>, <code>duration</code>, <code>fingerCount</code>, <code>fingerData</code> and <code>currentDirection</code>
+			Below has a 200px threshold and a 5 second time limit
+			</p>
+			<button class='btn btn-small btn-info example_btn'>Jump to Example</button>
+			<pre class="prettyprint lang-js" data-src="code_1"></pre>
+			<span class='navigation'></span>
+			<div id="test" class="box">Swipe me</div>
+			<span class='navigation'></span>
+		</div>
+   </body>
+</html>

data/app/assets/node_modules/jquery-touchswipe/demos/Tap_vs_swipe.html ADDED Viewed

@@ -0,0 +1,114 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+        <meta http-equiv="x-ua-compatible" content="IE=9">
+        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
+        <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
+        <link href="css/main.css" type="text/css" rel="stylesheet" />
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+        <script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
+        <script type="text/javascript" src="../jquery.touchSwipe.js"></script>
+        <script type="text/javascript" src="js/main.js"></script>
+        <!-- use the jquery.ui.ipad.js plugin to translate touch events to mouse events -->
+		<script type="text/javascript" src="js/jquery.ui.ipad.js"></script>
+        <title>touchSwipe</title>
+    </head>
+    <body>
+		<a href="https://github.com/mattbryson"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
+		<div class="container">
+			<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++;
+							msg(target);
+						},
+						doubleTap:function(event, target) {
+							doubleTapCount++;
+							msg(target);
+              return true;
+						},
+						longTap:function(event, target) {
+							longTapCount++;
+							msg(target);
+						},
+            swipe:function() {
+							swipeCount++;
+							$("#textText").html("You swiped " + swipeCount + " times");
+						},
+            excludedElements:"",
+						threshold:50
+          });
+          $("#test_btn").click(function() {
+            window.open("http://www.google.com");
+          });
+					//Assign a click handler to a child of the touchSwipe object
+					//This will require the jquery.ui.ipad.js to be picked up correctly.
+					$("#another_div").click( function(){
+						blackCount++;
+						$("#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:  <span class='events'><code>tap</code>, <code>doubleTap</code>, <code>longTap</code>, <code>swipe</code></span></h4>
+			<h4>properties: <span class='properties'><code>longTapThreshold</code>, <code>doubleTapThreshold</code></span></h4>
+			<p>You can also detect if the user simply taps and does not swipe with the <code>tap</code> handler<br/><br/>
+				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/><br/>
+				<b>See also the <a href="Hold.html"><code>hold</code></a> event for when a long tap reaches the <code>longTapThreshold</code></b>
+				<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>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>
+			<button class='btn btn-small btn-info example_btn'>Jump to Example</button>
+			<pre class="prettyprint lang-js" data-src='code_1'></pre>
+			<span class='navigation'></span>
+			<div id="test" class="box">
+        <div id="textText">Swipe, Tap, Double Tap or Long Tap me</div><br/>
+        <small><a href="http://google.com" target="new">Open Google</a></small>
+        <button id="test_btn">Open Google From a button</button>
+        <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>
+			<span class='navigation'></span>
+		</div>
+   </body>
+</html>

data/app/assets/node_modules/jquery-touchswipe/demos/Thresholds.html ADDED Viewed

@@ -0,0 +1,109 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+        <meta http-equiv="x-ua-compatible" content="IE=9">
+        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
+        <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
+        <link href="css/main.css" type="text/css" rel="stylesheet" />
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+        <script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
+        <script type="text/javascript" src="../jquery.touchSwipe.js"></script>
+        <script type="text/javascript" src="js/main.js"></script>
+        <title>touchSwipe</title>
+    </head>
+    <body>
+		<a href="https://github.com/mattbryson"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
+		<div class="container">
+			<script id='code_1'>
+				$(function() {
+					$("#test").swipe( {
+						swipe:function(event, direction) {
+							$(this).text("You swiped " + direction);
+						},
+						swipeStatus:function(event, phase) {
+							if (phase=="cancel") {
+								$(this).text("You didnt swipe far enough ");
+							}
+						},
+						threshold:200
+					 });
+				});
+			</script>
+			<script id='code_2'>
+				$(function() {
+					$("#test2").swipe( {
+						swipe:function(event, direction) {
+							$(this).text("You swiped " + direction );
+						},
+						swipeStatus:function(event, phase) {
+							if (phase=="cancel") {
+								$("#test2").text("Your swipe was too slow ");
+							}
+						},
+						maxTimeThreshold:1000,
+						threshold:null,
+						triggerOnTouchEnd:false
+					});
+				});
+			</script>
+			<script id='code_3'>
+				$(function() {
+					$("#test3").swipe( {
+						swipe:function(event, direction) {
+							$(this).text("You swiped " + direction );
+						},
+						swipeStatus:function(event, phase, direction, distance, duration, fingers) {
+							$("#test3").text(" Your have swiped " + distance + " px so far");
+							if(distance>200) {
+							    $("#test3").text(" Now swipe back 10px and release to cancel.. distance = " + distance + "px");
+							}
+							if (phase=="cancel") {
+								$("#test3").text(" You cancelled the swipe");
+							}
+						},
+						threshold:200,
+						cancelThreshold:10
+					});
+				});
+			</script>
+			<span class='title'></span>
+			<h4>property: <span class='properties'><code>threshold</code></span></h4>
+			<p>By setting the <code>threshold</code> you can set how far the user must swipe before it is considered a swipe. <br/>Swipe at least 200px</p>
+			<button class='btn btn-small btn-info example_btn'>Jump to Example</button>
+			<pre class="prettyprint lang-js" data-src="code_1"></pre>
+			<span class='navigation'></span>
+			<div id="test" class="box">Swipe me for at least 200 px</div>
+			<h4>property: <span class='properties'><code>cancelThreshold</code></span><h4>
+			<p>By setting the <code>cancelThreshold</code> you can set the minimum distance in px that the user needs to swipe back to cancel the current swipe, even if they have passed the main <code>threshold</code></p>
+			<pre class="prettyprint lang-js" data-src="code_3"></pre>
+			<div id="test3" class='box'>Swipe me for at least 200 px, then back 10px to cancel</div>
+			<h4>property: <span class='properties'><code>maxTimeThreshold</code></span><h4>
+			<p>By setting the <code>maxTimeThreshold</code> you can set the maximum time the user has to complete the swipe. A swipe LONGER than this is cancelled. This can be useful for ignoring long slow swipes. <br/>Swipe in under 500ms</p>
+			<pre class="prettyprint lang-js" data-src="code_2"></pre>
+			<div id="test2" class='box'>Swipe me within 1000 ms</div>
+			<span class='navigation'></span>
+		</div>
+   </body>
+</html>