Monday, May 26, 2014

touch events in cordova

http://askubuntu.com/questions/428342/get-emulate-touch-event-in-cordova-app
http://www.w3.org/TR/touch-events/#changedtouches-of-a-touchevent
https://software.intel.com/en-us/html5/articles/touch-drawing-app-using-html5-canvas

http://stackoverflow.com/questions/16645448/what-events-are-supported-by-phonegap-cordova-besides-the-ones-listed-in-the-api

http://phonegap-tips.com/
http://www.netcu.de/templates/netcu/js/jquery.touchwipe.1.1.1.js

google developers
http://commondatastorage.googleapis.com/io-2013/presentations/222%20-%20Point,%20Click,%20Tap,%20Touch%20-%20Building%20Multi-Device%20Web%20Interfaces%20(I_O%202013).pdf


Problems with touchmove events
http://stackoverflow.com/questions/11204460/the-touchmove-event-on-android-system-transformer-prime

/**
 * jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!)
 * Common usage: wipe images (left and right to show the previous or next image)
 * 
 * @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de)
 * @version 1.1.1 (9th December 2010) - fix bug (older IE's had problems)
 * @version 1.1 (1st September 2010) - support wipe up and wipe down
 * @version 1.0 (15th July 2010)
 */
(function($) { 
   $.fn.touchwipe = function(settings) {
     var config = {
      min_move_x: 20,
      min_move_y: 20,
    wipeLeft: function() { },
    wipeRight: function() { },
    wipeUp: function() { },
    wipeDown: function() { },
   preventDefaultEvents: true
  };
     
     if (settings) $.extend(config, settings);
 
     this.each(function() {
      var startX;
      var startY;
   var isMoving = false;

      function cancelTouch() {
       this.removeEventListener('touchmove', onTouchMove);
       startX = null;
       isMoving = false;
      } 
      
      function onTouchMove(e) {
       if(config.preventDefaultEvents) {
        e.preventDefault();
       }
       if(isMoving) {
        var x = e.touches[0].pageX;
        var y = e.touches[0].pageY;
        var dx = startX - x;
        var dy = startY - y;
        if(Math.abs(dx) >= config.min_move_x) {
        cancelTouch();
        if(dx > 0) {
         config.wipeLeft();
        }
        else {
         config.wipeRight();
        }
        }
        else if(Math.abs(dy) >= config.min_move_y) {
         cancelTouch();
         if(dy > 0) {
          config.wipeDown();
         }
         else {
          config.wipeUp();
         }
         }
       }
      }
      
      function onTouchStart(e)
      {
       if (e.touches.length == 1) {
        startX = e.touches[0].pageX;
        startY = e.touches[0].pageY;
        isMoving = true;
        this.addEventListener('touchmove', onTouchMove, false);
       }
      }      
      if ('ontouchstart' in document.documentElement) {
       this.addEventListener('touchstart', onTouchStart, false);
      }
     });
 
     return this;
   };
 
 })(jQuery);

No comments:

Post a Comment