zepto.swipe

gistfile1.js

(function ($) {

  var startPos, curPos, endPos, dragTimer, dragEl, dragOffset;
  var isTouchable = (function () { return !!('ontouchstart' in window); })();
  var events = {
    touchstart: "mousedown",
    touchmove: "mousemove",
    touchend: "mouseup"
  };

  var dragging = false;

  var defaults = {
    selector: 'li',
    swipeMinDist: 50,
    horizontal: true,
    dragDelay: 200
  };

  function getPos(e) {
    var pos = {}, touch;

    if (isTouchable) {
      touch = (e.targetTouches.length) ? e.targetTouches[0] : e.changedTouches[0];
      pos = { x: touch.pageX, y: touch.pageY };
    }
    else {
      pos = { x: e.pageX, y: e.pageY };
    }
    return pos;
  }

  function Swipe(el, options) {
    this.el = el;
    this.opts = $.extend(defaults, options);

    el.find(this.opts.selector).each(function () {
      var $item = $(this);
      $item.data({ offset: $item.offset() });
    });

    this.bind();
  }

  Swipe.prototype = {
    isSwipe: function () {
      if (!curPos || !endPos) return false;
      return (Math.abs(endPos.x - curPos.x) > this.opts.swipeMinDist ||
        Math.abs(endPos.y - curPos.y) > this.opts.swipeMinDist);
    },

    bind: function () {
      for (var event in events) {
        var eventName = (isTouchable) ? event : events[event];
        (function (event, ctx) {
          var params = [eventName];
          if (event == "touchstart") {
            params.push(ctx.opts.selector);
          }
          params.push($.proxy(ctx[event], ctx));
          ctx.el.on.apply(ctx.el, params);
        })(event, this);
      }
    },

    touchstart: function (e) {
      dragEl = $(e.currentTarget);
      startPos = curPos = getPos(e);
      dragOffset = dragEl.data('offset');
      clearTimeout(dragTimer);
      dragTimer = setTimeout(function () {
        dragging = true;
      }, this.opts.dragDelay);

      e.preventDefault();
    },

    touchmove: function (e) {
      if (dragging) {
        curPos = getPos(e);
        if (dragEl) {
          if (this.opts.horizontal) {
            var isOn = this.isOn();
            if (isOn != dragEl.data('on')) {
              dragEl.data('on', isOn);
              this.el.trigger('swipe:' + ((isOn) ? 'on' : 'off'), $(dragEl));
            }
            dragEl.css({ left: curPos.x - dragOffset.width / 2 - dragOffset.left });
          }
        }
      }

      e.preventDefault();
    },

    touchend: function (e) {
      var self = this;
      dragging = false;
      clearTimeout(dragTimer);
      endPos = getPos(e);
      var isSwipe = this.isSwipe();

      if (dragEl) {
        var isOn = (this.isOn()) ? 1 : 0;
        if (isSwipe) {
          left = (!isOn) ? this.rightPos() : 0;
          this.el.trigger('swipe:' + ((!isOn) ? 'on' : 'off'), $(dragEl));
          dragEl.data('on', isOn);
        }
        else {
          left = (isOn) ? this.rightPos() : 0;
        }

        dragEl.animate({ left: left }, 300, "linear", function () {
          dragEl = null;
        });
      }

      startPos = curPos = endPos = null;
      dragOffset = null;
      e.preventDefault();
    },

    isOn: function () {
      var offset = this.el.offset();
      var dragOffset = dragEl.offset();
      return dragOffset.left + dragOffset.width / 2 > offset.left + offset.width / 2;
    },

    rightPos: function () {
      var elOffset = this.el.offset();
      return elOffset.width - elOffset.left - dragOffset.width - dragOffset.left;
    }
  };

  $.fn.swipe = function (options) {
    return this.each(function (el) {
      var swipe = new Swipe($(this), options);
    });
  }
})(Zepto);