diff options
| -rw-r--r-- | web/css.css | 3 | ||||
| -rwxr-xr-x | web/index.cgi | 14 | ||||
| -rw-r--r-- | web/js2.js | 134 |
3 files changed, 133 insertions, 18 deletions
diff --git a/web/css.css b/web/css.css index 65060d29d..caaf3f786 100644 --- a/web/css.css +++ b/web/css.css @@ -197,13 +197,14 @@ fieldset div.checkbox label { */ #drag input { cursor: crosshair; + background-color: #cccccc; } #drag input, #drag img { position: absolute; - background-color: #cccccc; border: none; } #drag img.pin { + z-index: 100; background-color: inherit; } diff --git a/web/index.cgi b/web/index.cgi index fac34de3a..3f653b20d 100755 --- a/web/index.cgi +++ b/web/index.cgi @@ -6,7 +6,7 @@ # Copyright (c) 2006 UK Citizens Online Democracy. All rights reserved. # Email: matthew@mysociety.org. WWW: http://www.mysociety.org # -# $Id: index.cgi,v 1.35 2006-09-29 10:01:48 matthew Exp $ +# $Id: index.cgi,v 1.36 2006-09-29 16:48:48 matthew Exp $ # TODO # Nothing is done about the update checkboxes - not stored anywhere on anything! @@ -361,18 +361,12 @@ sub display { my $out = ''; $out .= display_map($q, $x, $y, 1, 1, $pins); - if (!$input{x} && !$input{y}) { - $out .= "<h1>That postcode is in $name</h1>"; - } else { - $out .= '<h1>Reporting a problem</h1>'; - } + $out .= '<h1>Click on the map to report a problem</h1>'; if (@errors) { $out .= '<ul id="error"><li>' . join('</li><li>', @errors) . '</li></ul>'; } $out .= <<EOF; -<p>To <strong>report a problem</strong>, please select the location of it on the map. -Use the arrows to the left of the map to scroll around.</p> -<div> +<div style="font-size: 83%"> <h2>Recent problems reported on this map</h2> <ul id="current"> EOF @@ -503,7 +497,7 @@ sub display_problem { <div><label for="form_name">Name:</label> <input type="text" name="name" id="form_name" value="$input_h{name}" size="30"></div> <div><label for="form_email">Email:</label> -<input type="text" name="email" id="form_email" value="$input_h{email}" size="30"> (needed?)</div> +<input type="text" name="email" id="form_email" value="$input_h{email}" size="30"></div> <div><label for="form_update">Update:</label> <textarea name="updatet" id="form_update" rows="7" cols="30">$input_h{update}</textarea></div> <div class="checkbox"><input type="checkbox" name="fixed" id="form_fixed" value="1"> 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; + } +} + |