Skip to content

Instantly share code, notes, and snippets.

@mattjburrows
Created March 13, 2014 16:04
Show Gist options
  • Select an option

  • Save mattjburrows/9531272 to your computer and use it in GitHub Desktop.

Select an option

Save mattjburrows/9531272 to your computer and use it in GitHub Desktop.
SwipeControl = function (opts) {
this.opts = opts;
this._init(opts);
};
SwipeControl.prototype.setListeners = function () {
var self = this,
hasTouch = 'ontouchstart' in window,
startEvent = hasTouch ? 'touchstart' : 'mousedown',
moveEvent = hasTouch ? 'touchmove' : 'mousemove',
endEvent = hasTouch ? 'touchend' : 'mouseup';
// Set the touch start event to track where the swipe originated.
this.element.addEventListener(startEvent, function (e) {
if(e.targetTouches && 1 === e.targetTouches.length || 'mousedown' === e.type) {
var eventObj = hasTouch ? e.targetTouches[0] : e;
// Set the start event related properties.
self.startTime = Date.now();
self.start = parseInt(eventObj.pageX);
}
// e.preventDefault();
}, false);
// Set the touch move event to track the swipe movement.
this.element.addEventListener(moveEvent, function (e) {
if(self.start && (e.targetTouches && 1 === e.targetTouches.length || 'mousemove' === e.type)) {
var eventObj = hasTouch ? e.targetTouches[0] : e;
// Set the current position related properties.
self.currTime = Date.now();
self.currPos = parseInt(eventObj.pageX);
self.trackSwipe();
}
e.preventDefault();
}, false);
// Set the touch end event to track where the swipe finished.
this.element.addEventListener(endEvent, function (e) {
var eventObj = hasTouch ? e.changedTouches[0] : e;
// Set the end event related properties.
self.endTime = Date.now();
self.end = parseInt(eventObj.pageX);
// Run the confirm swipe method.
self.confirmSwipe();
// e.preventDefault();
}, false);
};
SwipeControl.prototype.trackSwipe = function() {
var self = this;
// Overwrite the function properties.
this.direction = (this.start > this.currPos) ? 'left' : 'right';
this.trackDistance = ('left' === this.direction) ? (this.start - this.currPos) : (this.currPos - this.start);
// Run the tracking callback.
this.trackingCallback(this.direction, this.trackDistance, this.currPos, this.start, parseInt(this.currTime - this.startTime));
};
SwipeControl.prototype.confirmSwipe = function() {
var self = this;
// Set up the direction property.
this.direction = (this.start > this.end) ? 'left' : 'right';
// Set up the duration property.
this.duration = parseInt(this.endTime - this.startTime);
// Work out the distance based on the direction of the swipe.
this.swipeDistance = ('left' === this.direction) ? (this.start - this.end) : (this.end - this.start);
// This is where we determine whether it was a swipe or not.
this.swipeSuccessCallback(this.direction, this.swipeDistance, this.duration);
// Reset the variables.
this._config();
};
SwipeControl.prototype._config = function () {
this.start = null;
this.end = null;
this.trackDistance = null;
this.swipeDistance = null;
this.currPos = null;
this.startTime = null;
this.endTime = null;
this.currTime = null;
this.direction = null;
this.duration = null;
};
SwipeControl.prototype._init = function (opts) {
// Set the function properties.
this.element = this.opts.element;
this.swipeSuccessCallback = this.opts.swipeSuccessCallback || function(dir, dist, time) {
console.log(dir, dist, time);
};
this.trackingCallback = this.opts.trackingCallback || function(dir, dist, currPos, time) {
console.log(dir, dist, currPos, time);
};
// Run the function methods.
this._config();
this.setListeners();
return this;
};
var swipeListener = new App.SwipeControl({
element: document.body,
trackingCallback: function(dir, dist, currPos, startPos, time) {
var self = this;
console.log(dir, dist, currPos, startPos, time);
},
swipeSuccessCallback: function(dir, dist, time) {
console.log(dir, dist, time);
var width = window.innerWidth,
offsetDist = (dist * 1.66),
speed = (offsetDist / time) / 10;
// Make sure the swipe distance is less than the swipe time...
// Or that the swipe distance is greater than the half of the slide width.
if(offsetDist > time || (dist > (width / 2))) {
}
else {
// Make sure we have actually travelled.
if(10 < dist) {
}
}
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment