[llvm-commits] [LNT] r164289 - in /lnt/trunk/lnt/server/ui/static/flot: jquery.flot.touch.js jquery.flot.touch.min.js
Michael Gottesman
mgottesman at apple.com
Wed Sep 19 23:25:55 PDT 2012
Author: mgottesman
Date: Thu Sep 20 01:25:55 2012
New Revision: 164289
URL: http://llvm.org/viewvc/llvm-project?rev=164289&view=rev
Log:
[LNT] Added javascript for a simple custom flot html5 touch plugin.
Added:
lnt/trunk/lnt/server/ui/static/flot/jquery.flot.touch.js
lnt/trunk/lnt/server/ui/static/flot/jquery.flot.touch.min.js
Added: lnt/trunk/lnt/server/ui/static/flot/jquery.flot.touch.js
URL: http://llvm.org/viewvc/llvm-project/lnt/trunk/lnt/server/ui/static/flot/jquery.flot.touch.js?rev=164289&view=auto
==============================================================================
--- lnt/trunk/lnt/server/ui/static/flot/jquery.flot.touch.js (added)
+++ lnt/trunk/lnt/server/ui/static/flot/jquery.flot.touch.js Thu Sep 20 01:25:55 2012
@@ -0,0 +1,149 @@
+// Based off of jquery.flot.touch.js (which is MIT Licensed), but
+// dumber and using jquery.flot.navigate.js
+
+(function($) {
+
+ function init(plot) {
+ var isOneTouch = false;
+ var isTwoTouch = false;
+ var lastTouchCenter = [0,0];
+ var lastTouchPosition = [0,0];
+ var lastTwoTouchPosition = [[0,0],[0,0]];
+ var lastTwoTouchDistance = Infinity;
+ var lastTouchTime = null;
+
+ function bindEvents(plot, eventHolder) {
+ if (plot.getOptions().touch.enabled === false)
+ return;
+
+ var placeholder = plot.getPlaceholder();
+
+ placeholder.bind('touchstart', function(e) {
+ var touches = e.originalEvent.touches;
+ var offset = plot.offset();
+
+ if (touches.length === 1) {
+ // Prepare for either double tap zoom
+ // or pan.
+ isOneTouch = true;
+
+ lastTouchPosition = [touches[0].pageX,
+ touches[0].pageY];
+ lastTouchCenter = [touches[0].pageX - offset.left,
+ touches[0].pageY - offset.top];
+ } else if (touches.length === 2) {
+ // Prepare for pinch zoom.
+ isTwoTouch = true;
+ lastTwoTouchPosition = [[touches[0].pageX,
+ touches[0].pageY],
+ [touches[1].pageX,
+ touches[1].pageY]];
+ lastTouchCenter = [(touches[1].pageX + touches[0].pageX)/2 - offset.left,
+ (touches[1].pageY + touches[0].pageY)/2 - offset.top];
+
+ var xdelta = touches[1].pageX - touches[0].pageX;
+ var ydelta = touches[1].pageY - touches[0].pageY;
+ lastTwoTouchDistance = Math.sqrt(xdelta*xdelta + ydelta*ydelta);
+ }
+ return false;
+ });
+
+ placeholder.bind('touchmove', function(e) {
+ var touches = e.originalEvent.touches;
+
+ if (isOneTouch && touches.length === 1) {
+ // If we hit a touchmove with one touch,
+ // we are panning.
+ var newTouchPosition = [touches[0].pageX,
+ touches[0].pageY];
+ plot.pan({
+ left: lastTouchPosition[0] - newTouchPosition[0],
+ top: lastTouchPosition[1] - newTouchPosition[1]
+ });
+
+ lastTouchPosition = newTouchPosition;
+ } else if (isTwoTouch && touches.length === 2) {
+ // If we hit a touchmove with one touch,
+ // we are zooming.
+
+ // We look at the delta from our last positions and zoom
+ // in by the percent difference from the total distance in between
+ // the previous distance in between the fingers total.
+ var xdelta = touches[1].pageX - touches[0].pageX;
+ var ydelta = touches[1].pageY - touches[0].pageY;
+ var newTwoTouchDistance = Math.sqrt(xdelta*xdelta + ydelta*ydelta);
+ var scale = 1.0 + (newTwoTouchDistance - lastTwoTouchDistance)/lastTwoTouchDistance;
+
+ plot.zoom({ amount: scale, center: { left: lastTouchCenter[0], top: lastTouchCenter[1] }});
+
+ lastTwoTouchDistance = newTwoTouchDistance;
+ }
+ return false;
+ });
+
+ placeholder.bind('touchend', function(e) {
+ var touches = e.originalEvent.touches;
+
+ // Do the pan and or double click if it was quick.
+ if (isOneTouch) {
+ var now = new Date().getTime();
+ var lasttime = lastTouchTime || now + 1; // now + 1 so the first time we are negative.
+ var delta = now - lasttime;
+
+ if (delta < 500 && delta > 0) {
+ // We have a double touch.
+ plot.zoom({ center: { left: lastTouchCenter[0],
+ top: lastTouchCenter[1] }});
+ }
+
+ lastTouchTime = lastTouchTime !== null? null : now;
+ } else if (isTwoTouch) {
+ // Finish off our zoom.
+
+ // We look at the delta from our last positions and zoom
+ // in by the percent difference from the total distance in between
+ // the previous distance in between the fingers total.
+ var xdelta = touches[1].pageX - touches[0].pageX;
+ var ydelta = touches[1].pageY - touches[0].pageY;
+ var newTwoTouchDistance = Math.sqrt(xdelta*xdelta + ydelta*ydelta);
+ var scale = (newTwoTouchDistance - lastTwoTouchDistance)/lastTwoTouchDistance;
+ lastTwoTouchDistance = newTwoTouchDistance;
+
+ plot.zoom({ amount: scale,
+ center: { left: lastTouchCenter[0], top: lastTouchCenter[1] }});
+ }
+
+ isOneTouch = false;
+ isTwoTouch = false;
+ return false;
+ });
+ }
+
+ function shutdown(plot, eventHolder) {
+ if (plot.getOptions().touch.enabled === false)
+ return;
+ var placeholder = plot.getPlaceholder();
+ placeholder.unbind('touchstart').unbind('touchmove').unbind('touchend');
+ }
+
+ plot.hooks.bindEvents.push(bindEvents);
+ plot.hooks.shutdown.push(shutdown);
+ $(document).bind('ready orientationchange', function(e) {
+ window.scrollTo(0, 1);
+
+ setTimeout(function() {
+ $.plot(placeholder, plot.getData(), plot.getOptions());
+ }, 50);
+ });
+ }
+
+ var options = {
+ touch: {enabled: true}
+ };
+ $.plot.plugins.push({
+ init: init,
+ options: options,
+ name: 'touch',
+ version: '1.0'
+ });
+})(jQuery);
Added: lnt/trunk/lnt/server/ui/static/flot/jquery.flot.touch.min.js
URL: http://llvm.org/viewvc/llvm-project/lnt/trunk/lnt/server/ui/static/flot/jquery.flot.touch.min.js?rev=164289&view=auto
==============================================================================
--- lnt/trunk/lnt/server/ui/static/flot/jquery.flot.touch.min.js (added)
+++ lnt/trunk/lnt/server/ui/static/flot/jquery.flot.touch.min.js Thu Sep 20 01:25:55 2012
@@ -0,0 +1,3 @@
+(function(j){j.plot.plugins.push({init:function(d){var g=!1,h=!1,e=[0,0],i=[0,0],f=Infinity,k=null;d.hooks.bindEvents.push(function(c){if(!1!==c.getOptions().touch.enabled){var d=c.getPlaceholder();d.bind("touchstart",function(a){var a=a.originalEvent.touches,b=c.offset();1===a.length?(g=!0,i=[a[0].pageX,a[0].pageY],e=[a[0].pageX-b.left,a[0].pageY-b.top]):2===a.length&&(h=!0,e=[(a[1].pageX+a[0].pageX)/2-b.left,(a[1].pageY+a[0].pageY)/2-b.top],b=a[1].pageX-a[0].pageX,a=a[1].pageY-a[0].pageY,f=Math.sqrt(b*
+b+a*a));return!1});d.bind("touchmove",function(a){var b=a.originalEvent.touches;g&&1===b.length?(a=[b[0].pageX,b[0].pageY],c.pan({left:i[0]-a[0],top:i[1]-a[1]}),i=a):h&&2===b.length&&(a=b[1].pageX-b[0].pageX,b=b[1].pageY-b[0].pageY,a=Math.sqrt(a*a+b*b),c.zoom({amount:1+(a-f)/f,center:{left:e[0],top:e[1]}}),f=a);return!1});d.bind("touchend",function(a){var b=a.originalEvent.touches;g?(a=(new Date).getTime(),b=a-(k||a+1),500>b&&0<b&&c.zoom({center:{left:e[0],top:e[1]}}),k=null!==k?null:a):h&&(a=b[1].pageX-
+b[0].pageX,b=b[1].pageY-b[0].pageY,a=Math.sqrt(a*a+b*b),b=(a-f)/f,f=a,c.zoom({amount:b,center:{left:e[0],top:e[1]}}));return h=g=!1})}});d.hooks.shutdown.push(function(c){!1!==c.getOptions().touch.enabled&&c.getPlaceholder().unbind("touchstart").unbind("touchmove").unbind("touchend")});j(document).bind("ready orientationchange",function(){window.scrollTo(0,1);setTimeout(function(){j.plot(placeholder,d.getData(),d.getOptions())},50)})},options:{touch:{enabled:!0}},name:"touch",version:"1.0"})})(jQuery);
More information about the llvm-commits
mailing list