Skip to content

Instantly share code, notes, and snippets.

@mattjburrows
Last active August 29, 2015 13:57
Show Gist options
  • Save mattjburrows/9551958 to your computer and use it in GitHub Desktop.
Save mattjburrows/9551958 to your computer and use it in GitHub Desktop.
JS code snippets for the "Swipe activated gallery" tutorial on medium. Article URL to be confirmed.
/*
*
* Add this under App.animating property declaration.
*
*/
App.SwipeControl = function (opts) {
this.opts = opts;
this._init(opts);
};
App.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);
}
}, 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();
}, false);
};
App.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));
};
App.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();
};
App.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;
};
App.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;
};
/*
*
* Add this within the DOMContentLoaded event.
*
*/
var bannerGallery = document.getElementById('banner-gallery'),
swipeListener = new App.SwipeControl({
element: document.body
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment