SHARE
TWEET

jquery.wipe.js

a guest May 3rd, 2011 595 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function ($) {
  2.     $.fn.extend({
  3.         wipe: function (opts) {
  4.             var options = {
  5.                 events: {
  6.                     wipeStart: function () { },
  7.                     wipe: function (dx, dy) { },
  8.                     wipeEnd: function (dx, dy, ticks) { }
  9.                 },
  10.                 minTimeBetweenSwipeEvents: 30 // time in ms.
  11.             };
  12.  
  13.             // merge options and the user given opts
  14.             $.extend(true, options, opts);
  15.  
  16.             this.each(function () {
  17.                 var $this = $(this);
  18.  
  19.                 // data to support state
  20.                 var state = $(this).data('wipe') || {
  21.                     startX: 0,
  22.                     startY: 0,
  23.                     isWiping: false,
  24.                     isTouchDevice: false,
  25.                     lastSwipeTime: 0
  26.                 };
  27.                 $this.data('wipe', state);
  28.  
  29.                 var getTouchXY = function (ev, debug) {
  30.                     var touchEvent = ev;
  31.                     var fingers = 1;
  32.                     if (ev.originalEvent.touches && ev.originalEvent.touches.length > 0) {
  33.                         touchEvent = ev.originalEvent.touches[0];
  34.                         fingers = ev.originalEvent.touches.length;
  35.                     }
  36.                     else if (ev.originalEvent.changedTouches && ev.originalEvent.changedTouches.length > 0) {
  37.                         touchEvent = ev.originalEvent.changedTouches[0];
  38.                         fingers = ev.originalEvent.changedTouches.length;
  39.                     }
  40.  
  41.                     return { x: touchEvent.pageX, y: touchEvent.pageY, fingers: fingers };
  42.                 };
  43.  
  44.                 var touchStart = function (ev) {
  45.                     if (!state.isTouchDevice) {
  46.                         ev.preventDefault();
  47.                     }
  48.  
  49.                     var touchLoc = getTouchXY(ev);
  50.  
  51.                     if (touchLoc.fingers === 1) {
  52.                         state.startX = touchLoc.x;
  53.                         state.startY = touchLoc.y;
  54.  
  55.                         state.isWiping = true;
  56.  
  57.                         options.events.wipeStart.call($this);
  58.                     }
  59.                 };
  60.  
  61.                 var touchEnd = function (ev) {
  62.                     state.isWiping = false;
  63.  
  64.                     var position = getTouchXY(ev);
  65.  
  66.                     var dx = position.x - state.startX;
  67.                     var dy = position.y - state.startY;
  68.  
  69.                     if (!state.isTouchDevice) {
  70.                         ev.preventDefault();
  71.                     }
  72.  
  73.                     options.events.wipeEnd.call($this, dx, dy);
  74.                 };
  75.  
  76.                 var touchMove = function (ev) {
  77.                     if (!state.isTouchDevice) {
  78.                         ev.preventDefault();
  79.                     }
  80.  
  81.                     if (new Date().getTime() < state.lastSwipeTime + options.minTimeBetweenSwipeEvents) {
  82.                         return;
  83.                     }
  84.  
  85.                     if (state.isWiping) {
  86.                         var position = getTouchXY(ev);
  87.  
  88.                         var dx = position.x - state.startX;
  89.                         var dy = position.y - state.startY;
  90.  
  91.                         if (Math.abs(dx) > 7) ev.preventDefault();
  92.  
  93.                         options.events.wipe.call($this, dx, dy);
  94.  
  95.                         state.lastSwipeTime = new Date().getTime();
  96.                     }
  97.                 };
  98.  
  99.                 $this.bind('touchstart', touchStart);
  100.                 $this.bind('touchmove', touchMove);
  101.                 $this.bind('touchend', touchEnd);
  102.  
  103.                 var isTouchDevice = (function () {
  104.                     return 'ontouchstart' in window;
  105.                 })();
  106.  
  107.                 state.isTouchDevice = isTouchDevice;
  108.  
  109.                 if (!isTouchDevice) {
  110.                     $this.bind('mousedown', touchStart);
  111.                     $this.bind('mousemove', touchMove);
  112.                     $this.bind('mouseup', touchEnd);
  113.                 }
  114.             });
  115.  
  116.             return this; // chaining allesz
  117.         }
  118.     });
  119. })(jQuery);
RAW Paste Data
Top