Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Experimenting with a basic state machine for detecting drags, double-…

…taps, etc.

git-svn-id: https://modestmaps.googlecode.com/svn/trunk/js@899 a23cadb0-8de1-11de-82e5-a1837a67dc72
  • Loading branch information...
commit f5e7f7d82a216bd974b920d0358a1ef9f3f7ca18 1 parent 2deb098
migurski authored
View
229 examples/touch/index.html
@@ -4,22 +4,248 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Modest Maps JS - Touch Tester</title>
+<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="../../modestmaps.js"></script>
<script type="text/javascript">
+function stderr(msg)
+{
+ req = new XMLHttpRequest();
+ req.open('POST', 'trace.php', false);
+ req.send(msg);
+}
+
(function(MM){
+ function distance(t1, t2)
+ {
+ return Math.sqrt(Math.pow(t1.screenX - t2.screenX, 2) + Math.pow(t1.screenY - t2.screenY, 2));
+ }
+
+ function Start(touch, time)
+ {
+ this.screenX = touch.screenX;
+ this.screenY = touch.screenY;
+
+ this.touch = touch;
+ this.time = time;
+ }
+
+ function End(touch, time)
+ {
+ this.screenX = touch.screenX;
+ this.screenY = touch.screenY;
+
+ this.touch = touch;
+ this.time = time;
+ }
+
+ function Tap(x, y, time)
+ {
+ this.x = x;
+ this.y = y;
+ this.time = time;
+ }
+
+ function Hold(x, y, end, duration)
+ {
+ this.x = x;
+ this.y = y;
+ this.end = end;
+ this.duration = duration;
+ }
+
+ function Drag(x1, y1, x2, y2, end, duration)
+ {
+ this.x1 = x1;
+ this.y1 = y1;
+ this.x2 = x2;
+ this.y2 = y2;
+ this.end = end;
+ this.duration = duration;
+ }
+
+ function hasattr(obj, attr)
+ {
+ return _.any(_.keys(obj), function(key) { return key == attr });
+ }
+
+ function sameTouch(state, touch)
+ {
+ if(typeof state == 'object' && hasattr(state, 'touch')) {
+ if(state.constructor == Start || state.constructor == End) {
+ return touch == state.touch;
+ }
+ }
+ }
+
MM.TouchHandler = function() { }
MM.TouchHandler.prototype = {
init: function(map) {
this.map = map;
+ /*
MM.addEvent(map.parent, 'touchstart', this.getDoubleTap());
MM.addEvent(map.parent, 'touchstart', this.getTouchStart());
MM.addEvent(map.parent, 'gesturestart', this.getGestureStart());
+ */
+
+ MM.addEvent(map.parent, 'touchstart', this.getTouchStartLog());
+ MM.addEvent(map.parent, 'touchmove', this.getTouchMoveLog());
+ //MM.addEvent(map.parent, 'touchend', this.getTouchEndLog());
+
+ MM.addEvent(map.parent, 'touchstart', this.getTouchStartMachine());
+ MM.addEvent(map.parent, 'touchmove', this.getTouchMoveMachine());
+ MM.addEvent(map.parent, 'touchend', this.getTouchEndMachine());
+ },
+
+ getTouchStartLogHandler: null,
+
+ getTouchStartLog: function() {
+ if (!this.getTouchStartLogHandler) {
+ var theHandler = this;
+ this.getTouchStartLogHandler = function(e)
+ {
+ points = _.map(e.touches, function(t) { return '(' + t.screenX + ', ' + t.screenY + ')'; }).join(', ');
+ stderr('touch start: ' + e.changedTouches.length + '/' + e.touches.length + ', ' + points);
+ }
+ }
+ return this.getTouchStartLogHandler;
+ },
+
+ getTouchStartLogHandler: null,
+
+ getTouchMoveLog: function() {
+ if (!this.getTouchMoveLogHandler) {
+ var theHandler = this;
+ this.getTouchMoveLogHandler = function(e)
+ {
+ //stderr('touch move');
+ }
+ }
+ return this.getTouchMoveLogHandler;
+ },
+
+ getTouchEndLogHandler: null,
+
+ getTouchEndLog: function() {
+ if (!this.getTouchEndLogHandler) {
+ var theHandler = this;
+ this.getTouchEndLogHandler = function(e)
+ {
+ points = _.map(e.touches, function(t) { return '(' + t.screenX + ', ' + t.screenY + ')'; }).join(', ');
+ stderr('touch end, all: ' + e.changedTouches.length + '/' + e.touches.length + ', ' + points);
+ }
+ }
+ return this.getTouchEndLogHandler;
},
+
+ maxTapTime: 150,
+ maxTapDistance: 10,
+ maxDoubleTapDelay: 150,
+ states: [],
+
+ getTouchStartMachineHandler: null,
+
+ getTouchStartMachine: function() {
+ var states = this.states;
+
+ if (!this.getTouchStartMachineHandler) {
+ var theHandler = this;
+ this.getTouchStartMachineHandler = function(e)
+ {
+ var time = new Date().getTime();
+ _.each(e.changedTouches, function(touch) { states.push(new Start(touch, time)); });
+ }
+ }
+ return this.getTouchStartMachineHandler;
+ },
+
+ getTouchStartMachineHandler: null,
+
+ getTouchMoveMachine: function() {
+ if (!this.getTouchMoveMachineHandler) {
+ var theHandler = this;
+ this.getTouchMoveMachineHandler = function(e)
+ {
+ }
+ }
+ return this.getTouchMoveMachineHandler;
+ },
+
+ getTouchEndMachineHandler: null,
+
+ getTouchEndMachine: function() {
+ if (!this.getTouchEndMachineHandler) {
+ var theHandler = this;
+ this.getTouchEndMachineHandler = function(e)
+ {
+ var states = theHandler.states;
+ var now = new Date().getTime();
+ // look at each changed touch in turn.
+ for(var i = 0; i < e.changedTouches.length; i += 1)
+ {
+ var touch = e.changedTouches[i];
+
+ for(var j = 0; j < states.length; j += 1)
+ {
+ var state = states[j];
+
+ if(sameTouch(state, touch))
+ {
+ states.splice(j, 1);
+ j -= 1;
+
+ // we now know we have a Start or End object and
+ // a matching touch that's just ended. Let's see
+ // what kind of event it is based on how long it
+ // lasted and how far it moved.
+
+ var time = now - state.time;
+ var dist = distance(state, touch);
+
+ if(dist > theHandler.maxTapDistance) {
+ var drag = new Drag(state.screenX, state.screenY, touch.screenX, touch.screenY, now, time);
+ theHandler.onDrag(drag);
+
+ } else if(time > theHandler.maxTapTime) {
+ // close in time, but not in space: a hold
+ var hold = new Hold(touch.screenX, touch.screenY, now, time);
+ theHandler.onHold(hold);
+
+ } else {
+ // close in both time and space: a tap
+ var tap = new Tap(touch.screenX, touch.screenY, now);
+ theHandler.onTap(tap);
+ }
+ }
+ }
+ }
+ }
+ }
+ return this.getTouchEndMachineHandler;
+ },
+
+ onDrag: function(drag)
+ {
+ stderr('Drag: (' + drag.x1 + ', ' + drag.y1 + ') to (' + drag.x2 + ', ' + drag.y2 + ') for ' + drag.duration + ' msec');
+ },
+
+ onHold: function(hold)
+ {
+ stderr('Hold: (' + hold.x + ', ' + hold.y + ') for ' + hold.duration + ' msec');
+ },
+
+ onTap: function(tap)
+ {
+ stderr('Tap: (' + tap.x + ', ' + tap.y + ')');
+ }
+
+
+
+ /*
gestureStart: null,
gestureChange: null,
gestureCenter: null,
@@ -178,6 +404,7 @@
}
return this.doubleTapHandler;
}
+ */
};
@@ -199,6 +426,8 @@
window.onresize = function() {
map.setSize(container.offsetWidth, container.offsetHeight);
};
+
+ stderr('------------------------------------------------------------------------');
}
</script>
View
10 examples/touch/trace.php
@@ -0,0 +1,10 @@
+<?php
+
+ if(($in = fopen('php://input', 'r')) && ($out = fopen('what.txt', 'a')))
+ {
+ fwrite($out, fread($in, 1024)."\n");
+ fclose($in);
+ fclose($out);
+ }
+
+?>
View
17 examples/touch/underscore-min.js
@@ -0,0 +1,17 @@
+(function(){var n=this,A=n._,r=typeof StopIteration!=="undefined"?StopIteration:"__break__",B=function(a){return a.replace(/([.*+?^${}()|[\]\/\\])/g,"\\$1")},j=Array.prototype,l=Object.prototype,o=j.slice,C=j.unshift,D=l.toString,p=l.hasOwnProperty,s=j.forEach,t=j.map,u=j.reduce,v=j.reduceRight,w=j.filter,x=j.every,y=j.some,m=j.indexOf,z=j.lastIndexOf;l=Array.isArray;var E=Object.keys,b=function(a){return new k(a)};if(typeof exports!=="undefined")exports._=b;n._=b;b.VERSION="1.0.2";var i=b.forEach=
+function(a,c,d){try{if(s&&a.forEach===s)a.forEach(c,d);else if(b.isNumber(a.length))for(var e=0,f=a.length;e<f;e++)c.call(d,a[e],e,a);else for(e in a)p.call(a,e)&&c.call(d,a[e],e,a)}catch(g){if(g!=r)throw g;}return a};b.map=function(a,c,d){if(t&&a.map===t)return a.map(c,d);var e=[];i(a,function(f,g,h){e.push(c.call(d,f,g,h))});return e};b.reduce=function(a,c,d,e){if(u&&a.reduce===u)return a.reduce(b.bind(d,e),c);i(a,function(f,g,h){c=d.call(e,c,f,g,h)});return c};b.reduceRight=function(a,c,d,e){if(v&&
+a.reduceRight===v)return a.reduceRight(b.bind(d,e),c);a=b.clone(b.toArray(a)).reverse();return b.reduce(a,c,d,e)};b.detect=function(a,c,d){var e;i(a,function(f,g,h){if(c.call(d,f,g,h)){e=f;b.breakLoop()}});return e};b.filter=function(a,c,d){if(w&&a.filter===w)return a.filter(c,d);var e=[];i(a,function(f,g,h){c.call(d,f,g,h)&&e.push(f)});return e};b.reject=function(a,c,d){var e=[];i(a,function(f,g,h){!c.call(d,f,g,h)&&e.push(f)});return e};b.every=function(a,c,d){c=c||b.identity;if(x&&a.every===x)return a.every(c,
+d);var e=true;i(a,function(f,g,h){(e=e&&c.call(d,f,g,h))||b.breakLoop()});return e};b.some=function(a,c,d){c=c||b.identity;if(y&&a.some===y)return a.some(c,d);var e=false;i(a,function(f,g,h){if(e=c.call(d,f,g,h))b.breakLoop()});return e};b.include=function(a,c){if(m&&a.indexOf===m)return a.indexOf(c)!=-1;var d=false;i(a,function(e){if(d=e===c)b.breakLoop()});return d};b.invoke=function(a,c){var d=b.rest(arguments,2);return b.map(a,function(e){return(c?e[c]:e).apply(e,d)})};b.pluck=function(a,c){return b.map(a,
+function(d){return d[c]})};b.max=function(a,c,d){if(!c&&b.isArray(a))return Math.max.apply(Math,a);var e={computed:-Infinity};i(a,function(f,g,h){g=c?c.call(d,f,g,h):f;g>=e.computed&&(e={value:f,computed:g})});return e.value};b.min=function(a,c,d){if(!c&&b.isArray(a))return Math.min.apply(Math,a);var e={computed:Infinity};i(a,function(f,g,h){g=c?c.call(d,f,g,h):f;g<e.computed&&(e={value:f,computed:g})});return e.value};b.sortBy=function(a,c,d){return b.pluck(b.map(a,function(e,f,g){return{value:e,
+criteria:c.call(d,e,f,g)}}).sort(function(e,f){e=e.criteria;f=f.criteria;return e<f?-1:e>f?1:0}),"value")};b.sortedIndex=function(a,c,d){d=d||b.identity;for(var e=0,f=a.length;e<f;){var g=e+f>>1;d(a[g])<d(c)?(e=g+1):(f=g)}return e};b.toArray=function(a){if(!a)return[];if(a.toArray)return a.toArray();if(b.isArray(a))return a;if(b.isArguments(a))return o.call(a);return b.values(a)};b.size=function(a){return b.toArray(a).length};b.first=function(a,c,d){return c&&!d?o.call(a,0,c):a[0]};b.rest=function(a,
+c,d){return o.call(a,b.isUndefined(c)||d?1:c)};b.last=function(a){return a[a.length-1]};b.compact=function(a){return b.filter(a,function(c){return!!c})};b.flatten=function(a){return b.reduce(a,[],function(c,d){if(b.isArray(d))return c.concat(b.flatten(d));c.push(d);return c})};b.without=function(a){var c=b.rest(arguments);return b.filter(a,function(d){return!b.include(c,d)})};b.uniq=function(a,c){return b.reduce(a,[],function(d,e,f){if(0==f||(c===true?b.last(d)!=e:!b.include(d,e)))d.push(e);return d})};
+b.intersect=function(a){var c=b.rest(arguments);return b.filter(b.uniq(a),function(d){return b.every(c,function(e){return b.indexOf(e,d)>=0})})};b.zip=function(){for(var a=b.toArray(arguments),c=b.max(b.pluck(a,"length")),d=new Array(c),e=0;e<c;e++)d[e]=b.pluck(a,String(e));return d};b.indexOf=function(a,c){if(m&&a.indexOf===m)return a.indexOf(c);for(var d=0,e=a.length;d<e;d++)if(a[d]===c)return d;return-1};b.lastIndexOf=function(a,c){if(z&&a.lastIndexOf===z)return a.lastIndexOf(c);for(var d=a.length;d--;)if(a[d]===
+c)return d;return-1};b.range=function(a,c,d){var e=b.toArray(arguments),f=e.length<=1;a=f?0:e[0];c=f?e[0]:e[1];d=e[2]||1;e=Math.ceil((c-a)/d);if(e<=0)return[];e=new Array(e);f=a;for(var g=0;;f+=d){if((d>0?f-c:c-f)>=0)return e;e[g++]=f}};b.bind=function(a,c){var d=b.rest(arguments,2);return function(){return a.apply(c||{},d.concat(b.toArray(arguments)))}};b.bindAll=function(a){var c=b.rest(arguments);if(c.length==0)c=b.functions(a);i(c,function(d){a[d]=b.bind(a[d],a)});return a};b.delay=function(a,
+c){var d=b.rest(arguments,2);return setTimeout(function(){return a.apply(a,d)},c)};b.defer=function(a){return b.delay.apply(b,[a,1].concat(b.rest(arguments)))};b.wrap=function(a,c){return function(){var d=[a].concat(b.toArray(arguments));return c.apply(c,d)}};b.compose=function(){var a=b.toArray(arguments);return function(){for(var c=b.toArray(arguments),d=a.length-1;d>=0;d--)c=[a[d].apply(this,c)];return c[0]}};b.keys=E||function(a){if(b.isArray(a))return b.range(0,a.length);var c=[];for(var d in a)p.call(a,
+d)&&c.push(d);return c};b.values=function(a){return b.map(a,b.identity)};b.functions=function(a){return b.filter(b.keys(a),function(c){return b.isFunction(a[c])}).sort()};b.extend=function(a){i(b.rest(arguments),function(c){for(var d in c)a[d]=c[d]});return a};b.clone=function(a){if(b.isArray(a))return a.slice(0);return b.extend({},a)};b.tap=function(a,c){c(a);return a};b.isEqual=function(a,c){if(a===c)return true;var d=typeof a;if(d!=typeof c)return false;if(a==c)return true;if(!a&&c||a&&!c)return false;
+if(a.isEqual)return a.isEqual(c);if(b.isDate(a)&&b.isDate(c))return a.getTime()===c.getTime();if(b.isNaN(a)&&b.isNaN(c))return true;if(b.isRegExp(a)&&b.isRegExp(c))return a.source===c.source&&a.global===c.global&&a.ignoreCase===c.ignoreCase&&a.multiline===c.multiline;if(d!=="object")return false;if(a.length&&a.length!==c.length)return false;d=b.keys(a);var e=b.keys(c);if(d.length!=e.length)return false;for(var f in a)if(!(f in c)||!b.isEqual(a[f],c[f]))return false;return true};b.isEmpty=function(a){if(b.isArray(a))return a.length===
+0;for(var c in a)if(p.call(a,c))return false;return true};b.isElement=function(a){return!!(a&&a.nodeType==1)};b.isArray=l||function(a){return!!(a&&a.concat&&a.unshift&&!a.callee)};b.isArguments=function(a){return a&&a.callee};b.isFunction=function(a){return!!(a&&a.constructor&&a.call&&a.apply)};b.isString=function(a){return!!(a===""||a&&a.charCodeAt&&a.substr)};b.isNumber=function(a){return a===+a||D.call(a)==="[object Number]"};b.isBoolean=function(a){return a===true||a===false};b.isDate=function(a){return!!(a&&
+a.getTimezoneOffset&&a.setUTCFullYear)};b.isRegExp=function(a){return!!(a&&a.test&&a.exec&&(a.ignoreCase||a.ignoreCase===false))};b.isNaN=function(a){return b.isNumber(a)&&isNaN(a)};b.isNull=function(a){return a===null};b.isUndefined=function(a){return typeof a=="undefined"};b.noConflict=function(){n._=A;return this};b.identity=function(a){return a};b.times=function(a,c,d){for(var e=0;e<a;e++)c.call(d,e)};b.breakLoop=function(){throw r;};b.mixin=function(a){i(b.functions(a),function(c){F(c,b[c]=a[c])})};
+var G=0;b.uniqueId=function(a){var c=G++;return a?a+c:c};b.templateSettings={start:"<%",end:"%>",interpolate:/<%=(.+?)%>/g};b.template=function(a,c){var d=b.templateSettings,e=new RegExp("'(?=[^"+d.end.substr(0,1)+"]*"+B(d.end)+")","g");a=new Function("obj","var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push('"+a.replace(/[\r\t\n]/g," ").replace(e,"\t").split("'").join("\\'").split("\t").join("'").replace(d.interpolate,"',$1,'").split(d.start).join("');").split(d.end).join("p.push('")+
+"');}return p.join('');");return c?a(c):a};b.each=b.forEach;b.foldl=b.inject=b.reduce;b.foldr=b.reduceRight;b.select=b.filter;b.all=b.every;b.any=b.some;b.head=b.first;b.tail=b.rest;b.methods=b.functions;var k=function(a){this._wrapped=a},q=function(a,c){return c?b(a).chain():a},F=function(a,c){k.prototype[a]=function(){var d=b.toArray(arguments);C.call(d,this._wrapped);return q(c.apply(b,d),this._chain)}};b.mixin(b);i(["pop","push","reverse","shift","sort","splice","unshift"],function(a){var c=j[a];
+k.prototype[a]=function(){c.apply(this._wrapped,arguments);return q(this._wrapped,this._chain)}});i(["concat","join","slice"],function(a){var c=j[a];k.prototype[a]=function(){return q(c.apply(this._wrapped,arguments),this._chain)}});k.prototype.chain=function(){this._chain=true;return this};k.prototype.value=function(){return this._wrapped}})();
Please sign in to comment.
Something went wrong with that request. Please try again.