eristoddle
3/6/2013 - 6:43 PM

Better version of swipe for Drupal Views Slideshow using Cycle. Allows for vertical scrolling.

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);