jquery_touch.js

/**
 * touch for jQuery
 * 
 * Copyright (c) 2008 Dirceu Pauka Jr. <[email protected]>
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details. 
 *
 * Based on Peter Schmalfeldt (ManifestInteractive.com) <[email protected]>
 * @license http://www.gnu.org/licenses/gpl.html 
 * @project jquery.touch
 */

jQuery.fn.touch = function(settings) {
	
	// DEFINE DEFAULT VARIABLES
	var _target, _dragx, _dragy, _rotate, _resort;
	var _dragging=false, _sizing=false, _animate=false;
	var _rotating=0, _width=0, _height=0, _left=0, _top=0, _lastx=0, _lasty=0, _xspeed=0, _yspeed=0;
	var _zindex=1000;

	// DEFINE DEFAULT TOUCH SETTINGS
	settings = jQuery.extend({
		animate: true,
		sticky: false,
		dragx: true,
		dragy: true,
		rotate: false,
		resort: true,
		scale: false
	}, settings);

	var opts = [];
	opts = $.extend({}, $.fn.touch.defaults, settings);

	this.each(function(){
		this.opts = opts;
		
		this.ontouchstart = function(e) {
			
			_target = $(this);
			_dragx = this.opts.dragx;
			_dragy = this.opts.dragy;
			_resort = this.opts.resort;
			_animate = this.opts.animate;
			_xspeed = 0;
			_yspeed = 0;

			e.preventDefault();

			$(e.changedTouches).each(function(){
				_lastx = this.pageX;
				_lasty = this.pageY;
				if(!_sizing){
					if(_resort){
						_zindex = (_target.css("z-index") == _zindex) ? _zindex : _zindex+1;
						_target.css({ zIndex: _zindex });
					}
				}
			});

		};
		
		this.ontouchmove = function(e) {
			$(e.changedTouches).each(function() {
				_left = isNaN(parseInt(_target.css("left"))) ? 0 : (parseInt(_target.css("left")) - (_lastx-this.pageX));
				_top = isNaN(parseInt(_target.css("top"))) ? 0 : (parseInt(_target.css("top")) - (_lasty-this.pageY));
				
				if(!_sizing) {

					if(_animate){
						_xspeed = Math.round((_xspeed + Math.round( this.pageX-_lastx ))/2);
						_yspeed = Math.round((_yspeed + Math.round( this.pageY-_lasty ))/2);
					}

					if(_dragx || _dragy) _target.css({ position: "absolute" });
					
					if(_dragx) _target.css({ left: _left+"px" });
					if(_dragy) _target.css({ top: _top+"px" });
				}
				
				_lastx = this.pageX;
				_lasty = this.pageY;
			});	
		};
		
		this.ontouchend = function(e) {
			$(e.changedTouches).each(function(){
				if(!e.targetTouches.length){
					_dragging = false;
					if(_animate){
						_left = (_target.css("left") == 'auto') ? this.pageX : parseInt(_target.css("left"));
						_top = (_target.css("top") == 'auto') ? this.pageY : parseInt(_target.css("top"));
						
						var animx = (_dragx) ? (_left+_xspeed)+"px" : _left+"px";
						var animy = (_dragy) ? (_top+_yspeed)+"px" : _top+"px";
						
						if(_dragx) _target.animate({ left: animx }, "fast");
						if(_dragy) _target.animate({ top: animy }, "fast");
					}
				}
			});
		};
		
		this.ongesturestart = function(e) {
			_sizing = [$(this).css("width"), $(this).css("height")];
		};
		
		this.ongesturechange = function(e) {
			if(_sizing){
				_width = (this.opts.scale) ? Math.min(parseInt(_sizing[0])*e.scale, 300) : _sizing[0];
				_height = (this.opts.scale) ? Math.min(parseInt(_sizing[1])*e.scale, 300) : _sizing[1];
				_rotate = (this.opts.rotate) ? "rotate(" + ((_rotating + e.rotation) % 360) + "deg)" : "0deg";		
				$(this).css({ width: _width+"px", height: _height+"px", webkitTransform: _rotate });
			}		
		};
		
		this.ongestureend = function(e) {
			_sizing = false;
			_rotating = (_rotating + e.rotation) % 360;			
		};
	});
};