Dragging, in Firefox at least.

1 files changed, 127 insertions, 7 deletions

diff --git a/web/js2.js b/web/js2.js
index 405f10d9a..598cf32a9 100644
--- a/web/js2.js
+++ b/web/js2.js
@@ -18,6 +18,7 @@ var tile_y = 0;
 var tilewidth = 254;
 var tileheight = 254;
 
+var in_drag;
 function onLoad() {
     // var Log = new YAHOO.widget.LogReader();
     var compass = document.getElementById('compass');
@@ -35,16 +36,39 @@ function onLoad() {
 
     var form = document.getElementById('mapForm');
     if (form) {
-        form.onsubmit = function() {
-            this.x.value = x + 2;
-            this.y.value = y + 2;
-            return true;
-        }
+        form.onsubmit = form_submit;
+
+	var drag = document.getElementById('drag');
+	var inputs = drag.getElementsByTagName('input');
+	for (var i=0; i<inputs.length; i++) {
+		inputs[i].onclick = drag_check;
+	}
+	
         var url = '/tilma/tileserver/10k-full-london/' + x + '-' + (x+5) + ',' + y + '-' + (y+5) + '/JSON';
         var req = mySociety.asyncRequest(url, urls_loaded);
+
+        var map = document.getElementById('map');
+        map.onmousedown = drag_start;
+        document.onmouseout = drag_end_out;
+
     }
 }
 
+/*
+    var targ = '';
+    if (!e) e = window.event;
+    if (e.target) targ = e.target;
+    else if (e.srcElement) targ = e.srcElement;
+    if (targ.nodeType == 3) // defeat Safari bug
+        targ = targ.parentNode;
+*/
+
+function form_submit() {
+    this.x.value = x + 2;
+    this.y.value = y + 2;
+    return true;
+}
+
 function image_rotate(img, x, y) {
     if (x) {
         img.style.left = (img.offsetLeft + x*tilewidth) + 'px';
@@ -59,7 +83,7 @@ function image_rotate(img, x, y) {
 var myAnim;
 function pan(x, y) {
     if (!myAnim || !myAnim.isAnimated()) {
-        update_tiles(x, y);
+        update_tiles(x, y, true);
         myAnim = new YAHOO.util.Motion('drag', { points:{by:[x,y]} }, 1, YAHOO.util.Easing.easeBoth);
 	myAnim.animate();
     }
@@ -67,10 +91,16 @@ function pan(x, y) {
 
 var drag_x = 0;
 var drag_y = 0;
-function update_tiles(dx, dy) {
+function update_tiles(dx, dy, noMove) {
     drag_x += dx;
     drag_y += dy;
 
+    if (!noMove) {
+        var drag = document.getElementById('drag');
+        drag.style.left = drag_x + 'px';
+        drag.style.top = drag_y + 'px';
+    }
+
     var horizontal = 0;
     var vertical = 0;
     for (var i=0; i<6; i++) {
@@ -134,6 +164,7 @@ function urls_loaded(o) {
             img.src = 'http://tilma.mysociety.org/tileserver/10k-full-london/' + tiles[i][j];
 	    img.name = 'tile_' + xx + '.' + yy;
 	    img.id = id;
+	    img.onclick = drag_check;
 	    img.style.position = 'absolute';
 	    img.style.width = tilewidth + 'px';
 	    img.style.height = tileheight + 'px';
@@ -160,3 +191,92 @@ function mod(m, n) {
     return (m % n) + n;
 }
 
+/* Dragging */
+
+var last_mouse_pos = {};
+var mouse_pos = {};
+function drag_move(e) {
+    if (!e) var e = window.event;
+    //if (e.stopPropagation) e.stopPropagation();
+    var point = get_posn(e);
+    in_drag = true;
+    last_mouse_pos = mouse_pos;
+    mouse_pos = point;
+    update_tiles(mouse_pos.x-last_mouse_pos.x, mouse_pos.y-last_mouse_pos.y);
+    return false;
+}
+
+function drag_check() {
+    if (in_drag) {
+        in_drag=false;
+	return false;
+    }
+    return true;
+}
+
+function drag_start(e) {
+    if (!e) var e = window.event;
+    //if (e.stopPropagation) e.stopPropagation();
+    var point = get_posn(e);
+    mouse_pos = point;
+    setCursor('move');
+    document.onmousemove = drag_move;
+    document.onmouseup = drag_end;
+    return false;
+}
+
+
+function drag_end(e) {
+    if (!e) var e = window.event;
+    if (e.stopPropagation) e.stopPropagation();
+    document.onmousemove = null;
+    document.onmouseup = null;
+    setCursor('crosshair');
+    //if (in_drag) return false; // XXX I don't understand!
+}
+
+function drag_end_out(e) {
+    if (!e) var e = window.event;
+    //if (e.stopPropagation) e.stopPropagation();
+    var relTarg;
+    if (e.relatedTarget) { relTarg = e.relatedTarget; }
+    else if (e.toElement) { relTarg = e.toElement; }
+    if (!relTarg) {
+        // mouse out to unknown = left the window?
+        document.onmousemove = null;
+        document.onmouseup = null;
+        setCursor('crosshair');
+    }
+    return false;
+}
+
+function get_posn(e) {
+    var posx, posy;
+    if (e.pageX || e.pageY) {
+        posx = e.pageX;
+        posy = e.pageY;
+    } else if (e.clientX || e.clientY) {
+        posx = e.clientX;
+        if (document.documentElement && document.documentElement.scrollLeft) {
+            posx += document.documentElement.scrollLeft;
+        } else {
+            posx += document.body.scrollLeft;
+        }
+        posy = e.clientY;
+        if (document.documentElement && document.documentElement.scrollTop) {
+            posy += document.documentElement.scrollTop;
+        } else {
+            posy += document.body.scrollTop;
+        }
+    }
+    return { x:posx, y:posy };
+}
+
+function setCursor(s) {
+    var drag = document.getElementById('drag');
+    var inputs = drag.getElementsByTagName('input');
+    for (var i=0; i<inputs.length; i++) {
+        inputs[i].style.cursor = s;
+    }
+}
+