Permalink
Browse files

1. Added stopPropagation to the Jester options.

2. Added 3 new methods to Jester: start, during, end.

The three methods each take a handler which accepts 2 parameters: a touches object and the event object.

Jester(el).start(handler); // is fired on touchstart
Jester(el).during(handler); // is fired on touchmove
Jester(el).end(handler); // is fired on touchend

A handler for one of these methods would look like this:

var handler = function(touches, event) {
    /* do something with the event object */
};
  • Loading branch information...
1 parent 83cda1c commit 01ac5168bc9a653bfa3302e226bc70c7b96693d2 plainview committed Sep 1, 2010
Showing with 60 additions and 15 deletions.
  1. +27 −5 index.html
  2. +33 −10 jester.js
View
@@ -30,6 +30,7 @@
document.addEventListener("DOMContentLoaded", function()
{
var element = document.getElementById("wrapper");
+
var swipeHandler = function(touches, direction) {
var matrix = new WebKitCSSMatrix(this.style.webkitTransform);
if(direction === "right")
@@ -41,17 +42,38 @@
matrix.e = 0;
this.style.webkitTransform = "translate3d(" + matrix.e + "px, " + matrix.f + "px, 0)";
- }
+ };
var changeColor = function(touches) {
this.style.backgroundColor = "#" + (Math.round(0xffffff * Math.random()).toString(16));
- }
+ };
var alertDoubleTapped = function() {
alert("Double tap detected!");
- }
- jester(element, { swipeDistance: 10 })
+ };
+ var sizeCircle = function(touches) {
+ this.style.webkitTransform = "scale(" + touches.current.scale() + ")";
+ };
+ var sizeRelease = function(touches) {
+ this.style.webkitTransform = "scale(" + 1 + ")";
+ };
+ var startTouch = function(touches, event) {
+ console.log(["touch started with id: ", event.touches[0].identifier].join(""))
+ };
+ var duringTouch = function(touches, event) {
+ console.log(["touch continued with id: ", event.touches[0].identifier].join(""));
+ };
+ var endTouch = function(touches, event) {
+ console.log(["touch ended with id: ", event.changedTouches[0].identifier].join(""));
+ };
+ jester(element, { swipeDistance: 10, preventDefault: true })
+ .pinchnarrow(sizeCircle)
+ .pinchwiden(sizeCircle)
+ .pinchend(sizeRelease)
.swipe(swipeHandler)
.tap(changeColor)
- .doubletap(alertDoubleTapped);
+ .doubletap(alertDoubleTapped)
+ .start(startTouch)
+ .during(duringTouch)
+ .end(endTouch);
}, false);
</script>
View
@@ -62,7 +62,8 @@
}
}
- if(!elementCache["eventSet"]) {
+ //
+ if(!("eventSet" in elementCache) || !(elementCache["eventSet"] instanceof Jester.EventSet)) {
elementCache["eventSet"] = new Jester.EventSet(element);
}
@@ -83,13 +84,24 @@
};
// create shortcut bind methods for all gestures
- gestures.split(" ").forEach(function(value) {
- this[value] = function(fn) {
- this.bind(value, fn);
- return this;
+ gestures.split(" ").forEach(function(gesture) {
+ this[gesture] = function(fn) {
+ return this.bind(gesture, fn);
};
}, that);
+ this.start = function(fn) {
+ return this.bind("start", fn);
+ };
+
+ this.during = function(fn) {
+ return this.bind("during", fn);
+ };
+
+ this.end = function(fn) {
+ return this.bind("end", fn);
+ };
+
// wrapper to cover all three pinch methods
this.pinch = function(fns) {
if(typeof fns !== "undefined") {
@@ -235,24 +247,31 @@
opts.deadY = opts.deadY || 0;
if(opts.capture !== false) opts.capture = true;
- if(opts.preventDefault !== false) opts.preventDefault = true;
+ if(typeof opts.preventDefault !== "undefined" && opts.preventDefault !== false) opts.preventDefault = true;
+ if(typeof opts.preventDefault !== "undefined" && opts.stopPropagation !== false) opts.stopPropagation = true;
var eventSet = elementCache.eventSet;
var touches;
var previousTapTime = 0;
var touchStart = function(evt) {
- if(opts.preventDefault) evt.preventDefault();
-
touches = new Jester.TouchGroup(evt);
- };
- var touchMove = function(evt) {
+ eventSet.execute("start", touches, evt);
+
if(opts.preventDefault) evt.preventDefault();
+ if(opts.stopPropagation) evt.stopPropagation();
+ };
+ var touchMove = function(evt) {
touches.update(evt);
+ eventSet.execute("during", touches, evt);
+
+ if(opts.preventDefault) evt.preventDefault();
+ if(opts.stopPropagation) evt.stopPropagation();
+
if(touches.numTouches() == 2) {
// pinchnarrow
if(touches.delta.scale() < 0.0) {
@@ -267,7 +286,11 @@
};
var touchEnd = function(evt) {
+
+ eventSet.execute("end", touches, evt);
+
if(opts.preventDefault) evt.preventDefault();
+ if(opts.stopPropagation) evt.stopPropagation();
if(touches.numTouches() == 1) {
// tap

0 comments on commit 01ac516

Please sign in to comment.