Better version of swipe for Drupal Views Slideshow using Cycle. Allows for vertical scrolling.
/**
*Swipe for Drupal Views Cycle Slideshow
**/
(function ($) {
Drupal.settings.isTouchDevice = function () {
return "ontouchstart" in window;
}
if (Drupal.settings.isTouchDevice()) {
Drupal.behaviors.jQueryMobileSlideShowTouchAdvance = {
attach:function (context, settings) {
self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
$.each($(".views_slideshow_cycle_main.viewsSlideshowCycle-processed"), function (idx, value) {
value.addEventListener("touchstart", self.handleTouchStart);
$(value).addClass("views-slideshow-mobile-processed");
})
$(self).bind("swipe", self.handleSwipe);
},
detach:function () {
}, original:{ x:0, y:0},
changed:{ x:0, y:0}, direction:{ x:"", y:"" }, fired:false,
handleTouchStart:function (evt) {
self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
if (evt.touches) {
if (evt.targetTouches.length != 1) {
return false;
}
self.original = { x:evt.touches[0].clientX, y:evt.touches[0].clientY }
self.target = $(this).attr("id").replace("views_slideshow_cycle_main_", "");
Drupal.viewsSlideshow.action({ "action":"pause", "slideshowID":self.target });
evt.target.addEventListener("touchmove", self.handleTouchMove);
evt.target.addEventListener("touchend", self.handleTouchEnd);
}
},
handleTouchMove:function (evt) {
self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
self.changed = {
x:(evt.touches.length) ? evt.touches[0].clientX : evt.changedTouches[0].clientX,
y:(evt.touches.length) ? evt.touches[0].clientY : evt.changedTouches[0].clientY
};
var h = parseInt(self.original.x - self.changed.x),
v = parseInt(self.original.y - self.changed.y),
absH = Math.abs(h),
absV = Math.abs(v);
if (h !== 0) {
self.direction.x = (h < 0) ? "right" : "left";
}
if (v !== 0) {
self.direction.y = (v < 0) ? "up" : "down";
}
if (absH > absV) {
evt.preventDefault();
evt.stopPropagation();
$(self).trigger("swipe");
}
},
handleTouchEnd:function (evt) {
self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
evt.target.removeEventListener("touchmove", self.handleTouchMove);
evt.target.removeEventListener("touchmove", self.handleTouchEnd);
self.fired = false;
},
handleSwipe:function (evt) {
self = Drupal.behaviors.jQueryMobileSlideShowTouchAdvance;
if (evt != undefined && self.fired == false) {
Drupal.viewsSlideshow.action({ "action":(self.direction.x == "left") ? "nextSlide" : "previousSlide", "slideshowID":self.target });
self.fired = true; //only fire advance once per touch
}
}
}
}
})(jQuery);