Currently, I am in the process of creating a custom image carousel directive using only AngularJS and no additional libraries.
simpleCarousel.$inject = [];
function simpleCarousel() {
var directive = {
restrict: 'E',
templateUrl: 'someurl.html',
scope: {
// Scope variables
},
controller: simpleCarouselController,
controllerAs: 'ctrl',
bindToController: true
};
simpleCarouselController.$inject = [];
function simpleCarouselController() {
angular.extend(this, {
next : //handle next image sliding
prev : //handle previous image sliding
});
function detectSwipe(el) {
var touchsurface = el,
swipeDirection,
startX,
distX,
threshold = 150,
allowedTime = 2000,
elapsedTime,
startTime;
touchsurface.addEventListener('touchstart', function(e) {
var touchObject = e.changedTouches[0];
swipeDirection = 'none';
distX = 0;
startX = touchObject.pageX;
startTime = new Date().getTime();
e.preventDefault();
}, false);
touchsurface.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
touchsurface.addEventListener('touchend', function(e) {
var touchObject = e.changedTouches[0];
distX = touchObject.pageX - startX;
elapsedTime = new Date().getTime() - startTime;
if (distX > 0) {
swipeDirection = 'right';
return swipeDirection;
} else if (distX < 0) {
swipeDirection = 'left';
return swipeDirection;
} else {
return false;
}
}, false);
}
}
}
I have managed to implement the touch event handlers. However, I am unsure about how to pass the element to the touch event. Additionally, should I handle preventing user clicks while sliding through JavaScript or use CSS with the user-select property?