Skip to content

Commit

Permalink
updated exludeElements to only be .noSwipe, but now FORM elements wil…
Browse files Browse the repository at this point in the history 
…l allow interaction if tapped / clicked, but also trigger a swipe
  • Loading branch information
@mattbryson
mattbryson committed Apr 29, 2016
1 parent 2d6bb21 commit 13a54f6
Show file tree
Hide file tree
Showing 38 changed files with 187 additions and 183 deletions.
56 changes: 25 additions & 31 deletions demos/Excluded_children.html
View file
@@ -1,35 +1,34 @@
<!DOCTYPE HTML>
<html>
<head>
<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="../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() {
$(function() {
var swipeCount1=0;
var swipeCount2=0;

$("#test").swipe( {
swipe:function() {
swipeCount1++;
$("#textText1").html("You swiped " + swipeCount1 + " times");
},
threshold:0
//By default, these are all excluded : button, input, select, textarea, a, .noSwipe
}
//By default any element with a class .noSwipe is not swipeable
});

//Enable swiping...
Expand All @@ -38,50 +37,45 @@
swipeCount2++;
$("#textText2").html("You swiped " + swipeCount2 + " times");
},
threshold:0,
//By default the value of $.fn.swipe.defaults.excludedElements is "button, input, select, textarea, a, .noSwipe, "
//By default the value of $.fn.swipe.defaults.excludedElements is ".noSwipe"
//To replace or clear the list, re set the excludedElements array.
//To append to it, do the following (dont forget the proceeding comma) ...
excludedElements:$.fn.swipe.defaults.excludedElements+", #some_other_div"
});
});
</script>

<span class='title'></span>
<h4>property: <span class='properties'><code>excludedElements</code></span></h4>
<p>If you want to exclude certain child elements from triggering swipes, you can simply add a <code>.noSwipe</code> class to the element. Then the element and any of its children will no longer trigger the swipe.
<p>Also, a jQuery selector is used to exclude input elements as well as the <code>.noSwipe</code> elements. By default all <code>button</code>, <code>input</code>, <code>select</code>, <code>textarea</code> and <code>a</code> elements are excluded.
So either add a <code>.noSwipe</code> class the element, or set your own selector in the excludedElements property.
<p>Also, a jQuery selector is used to exclude input elements as well as the <code>.noSwipe</code> elements.
So either add a <code>.noSwipe</code> class the element, or set your own selector in the excludedElements property. Setting your own selector will remove the .noSwipe selector.
</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="textText1">Swipe me, the child elements will not trigger swipes by default</div><br/>
<small></smal><a href="http://www.google.com" target="new" >I open a new tab if clicked, but im swipeable</a></small>
<form>
<input type="text" value="Im not swipeable" />
<input type="button" value="Im not swipeable" />
<textarea>Im not swipeable</textarea>
</form>
<input type="text" value="I am clickable and swipeable" />
<input type="button" value="I am clickable and swipeable" />
<textarea>I am clickable and swipeable</textarea>
</form>

<div id="another_div" class="box noSwipe" style="width:400px;height:100px;background:#000"><h3>Im am NOT swipeable because my class is .noSwipe</h3></div>

</div>


<div id="test2" class="box">
<div id="textText2">Swipe me, the child elements will not trigger swipes as they have been explicitly excluded</div><br/>
<form>
<input type="text" value="Im not swipeable" />
<input type="button" value="Im not swipeable" />
<textarea>Im not swipeable</textarea>
</form>

<div id="some_other_div" class="box" style="width:400px;height:100px;background:#000"><h3>Im am NOT swipeable because my im added to the excludedElements array</h3></div>
</div>

<span class='navigation'></span>
</div>
</body>
Expand Down
53 changes: 29 additions & 24 deletions demos/Tap_vs_swipe.html
View file
@@ -1,28 +1,28 @@
<!DOCTYPE HTML>
<html>
<head>
<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="../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() {
$(function() {
var tapCount=0;
var doubleTapCount=0;
var longTapCount=0;
Expand All @@ -31,7 +31,8 @@

//Enable swiping...
$("#test").swipe( {
tap:function(event, target) {

tap:function(event, target) {
tapCount++;
msg(target);
},
Expand All @@ -43,27 +44,30 @@
longTapCount++;
msg(target);
},
swipe:function() {

swipe:function() {
swipeCount++;
$("#textText").html("You swiped " + swipeCount + " times");
},

excludedElements:"",
threshold:50
});
});

//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 "+
$("#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>
Expand All @@ -75,27 +79,28 @@ <h4>properties: <span class='properties'><code>longTapThreshold</code>, <code>do
</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,

<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">
<a href="http://google.com" target="new">google</a>
<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>

<span class='navigation'></span>
</div>
</body>
Expand Down
4 changes: 2 additions & 2 deletions docs/$.fn.html
View file
Expand Up @@ -73,7 +73,7 @@ <h4 class="name" id="fn"><span class="type-signature"></span>new fn<span class="

<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jquery.touchSwipe.js.html">jquery.touchSwipe.js</a>, <a href="jquery.touchSwipe.js.html#line133">line 133</a>
<a href="jquery.touchSwipe.js.html">jquery.touchSwipe.js</a>, <a href="jquery.touchSwipe.js.html#line137">line 137</a>
</li></ul></dd>


Expand Down Expand Up @@ -179,7 +179,7 @@ <h3 class="subsection-title">Classes</h3>
<br class="clear">

<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Wed Apr 27 2016 13:29:55 GMT+0100 (BST) using the docdash theme.
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Fri Apr 29 2016 17:53:20 GMT+0100 (BST) using the docdash theme.
</footer>

<script>prettyPrint();</script>
Expand Down
8 changes: 4 additions & 4 deletions docs/$.fn.swipe.defaults.html
View file
Expand Up @@ -59,7 +59,7 @@ <h2>

<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jquery.touchSwipe.js.html">jquery.touchSwipe.js</a>, <a href="jquery.touchSwipe.js.html#line198">line 198</a>
<a href="jquery.touchSwipe.js.html">jquery.touchSwipe.js</a>, <a href="jquery.touchSwipe.js.html#line202">line 202</a>
</li></ul></dd>


Expand Down Expand Up @@ -1074,12 +1074,12 @@ <h5 class="subsection-title">Properties:</h5>

<td class="default">

<code>"button, input, select, textarea, a, .noSwipe"</code>
<code>".noSwipe"</code>

</td>


<td class="description last">A jquery selector that specifies child elements that do NOT trigger swipes. By default this excludes all form, input, select, button, anchor and .noSwipe elements.</td>
<td class="description last">A jquery selector that specifies child elements that do NOT trigger swipes. By default this excludes elements with the class .noSwipe .</td>
</tr>


Expand Down Expand Up @@ -1165,7 +1165,7 @@ <h5 class="subsection-title">Properties:</h5>
<br class="clear">

<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Wed Apr 27 2016 13:29:55 GMT+0100 (BST) using the docdash theme.
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Fri Apr 29 2016 17:53:20 GMT+0100 (BST) using the docdash theme.
</footer>

<script>prettyPrint();</script>
Expand Down
4 changes: 2 additions & 2 deletions docs/$.fn.swipe.directions.html
View file
Expand Up @@ -59,7 +59,7 @@ <h2>

<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jquery.touchSwipe.js.html">jquery.touchSwipe.js</a>, <a href="jquery.touchSwipe.js.html#line348">line 348</a>
<a href="jquery.touchSwipe.js.html">jquery.touchSwipe.js</a>, <a href="jquery.touchSwipe.js.html#line352">line 352</a>
</li></ul></dd>


Expand Down Expand Up @@ -302,7 +302,7 @@ <h5 class="subsection-title">Properties:</h5>
<br class="clear">

<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Wed Apr 27 2016 13:29:55 GMT+0100 (BST) using the docdash theme.
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Fri Apr 29 2016 17:53:20 GMT+0100 (BST) using the docdash theme.
</footer>

<script>prettyPrint();</script>
Expand Down
4 changes: 2 additions & 2 deletions docs/$.fn.swipe.fingers.html
View file
Expand Up @@ -59,7 +59,7 @@ <h2>

<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jquery.touchSwipe.js.html">jquery.touchSwipe.js</a>, <a href="jquery.touchSwipe.js.html#line389">line 389</a>
<a href="jquery.touchSwipe.js.html">jquery.touchSwipe.js</a>, <a href="jquery.touchSwipe.js.html#line393">line 393</a>
</li></ul></dd>


Expand Down Expand Up @@ -310,7 +310,7 @@ <h5 class="subsection-title">Properties:</h5>
<br class="clear">

<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Wed Apr 27 2016 13:29:55 GMT+0100 (BST) using the docdash theme.
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Fri Apr 29 2016 17:53:20 GMT+0100 (BST) using the docdash theme.
</footer>

<script>prettyPrint();</script>
Expand Down

0 comments on commit 13a54f6

Please sign in to comment.