jquery.wipe.js

(function ($) {
    $.fn.extend({
        wipe: function (opts) {
            var options = {
                events: {
                    wipeStart: function () { },
                    wipe: function (dx, dy) { },
                    wipeEnd: function (dx, dy, ticks) { }
                },
                minTimeBetweenSwipeEvents: 30 // time in ms.
            };

            // merge options and the user given opts
            $.extend(true, options, opts);

            this.each(function () {
                var $this = $(this);

                // data to support state
                var state = $(this).data('wipe') || {
                    startX: 0,
                    startY: 0,
                    isWiping: false,
                    isTouchDevice: false,
                    lastSwipeTime: 0
                };
                $this.data('wipe', state);

                var getTouchXY = function (ev, debug) {
                    var touchEvent = ev;
                    var fingers = 1;
                    if (ev.originalEvent.touches && ev.originalEvent.touches.length > 0) {
                        touchEvent = ev.originalEvent.touches[0];
                        fingers = ev.originalEvent.touches.length;
                    }
                    else if (ev.originalEvent.changedTouches && ev.originalEvent.changedTouches.length > 0) {
                        touchEvent = ev.originalEvent.changedTouches[0];
                        fingers = ev.originalEvent.changedTouches.length;
                    }

                    return { x: touchEvent.pageX, y: touchEvent.pageY, fingers: fingers };
                };

                var touchStart = function (ev) {
                    if (!state.isTouchDevice) {
                        ev.preventDefault();
                    }

                    var touchLoc = getTouchXY(ev);

                    if (touchLoc.fingers === 1) {
                        state.startX = touchLoc.x;
                        state.startY = touchLoc.y;

                        state.isWiping = true;

                        options.events.wipeStart.call($this);
                    }
                };

                var touchEnd = function (ev) {
                    state.isWiping = false;

                    var position = getTouchXY(ev);

                    var dx = position.x - state.startX;
                    var dy = position.y - state.startY;

                    if (!state.isTouchDevice) {
                        ev.preventDefault();
                    }

                    options.events.wipeEnd.call($this, dx, dy);
                };

                var touchMove = function (ev) {
                    if (!state.isTouchDevice) {
                        ev.preventDefault();
                    }

                    if (new Date().getTime() < state.lastSwipeTime + options.minTimeBetweenSwipeEvents) {
                        return;
                    }

                    if (state.isWiping) {
                        var position = getTouchXY(ev);

                        var dx = position.x - state.startX;
                        var dy = position.y - state.startY;

                        if (Math.abs(dx) > 7) ev.preventDefault();

                        options.events.wipe.call($this, dx, dy);

                        state.lastSwipeTime = new Date().getTime();
                    }
                };

                $this.bind('touchstart', touchStart);
                $this.bind('touchmove', touchMove);
                $this.bind('touchend', touchEnd);

                var isTouchDevice = (function () {
                    return 'ontouchstart' in window;
                })();

                state.isTouchDevice = isTouchDevice;

                if (!isTouchDevice) {
                    $this.bind('mousedown', touchStart);
                    $this.bind('mousemove', touchMove);
                    $this.bind('mouseup', touchEnd);
                }
            });

            return this; // chaining allesz
        }
    });
})(jQuery);