JS updates; pins hide when scroll off the map.

4 files changed, 88 insertions, 84 deletions

diff --git a/perllib/Page.pm b/perllib/Page.pm
index 9feccbaa8..18f83b408 100644
--- a/perllib/Page.pm
+++ b/perllib/Page.pm
@@ -6,7 +6,7 @@
 # Copyright (c) 2006 UK Citizens Online Democracy. All rights reserved.
 # Email: matthew@mysociety.org; WWW: http://www.mysociety.org/
 #
-# $Id: Page.pm,v 1.22 2006-09-28 11:06:43 matthew Exp $
+# $Id: Page.pm,v 1.23 2006-09-28 16:36:08 matthew Exp $
 #
 
 package Page;
@@ -76,10 +76,10 @@ EOF
 	<script type="text/javascript" src="yui/build/dom/dom-min.js"></script>
 	<script type="text/javascript" src="yui/build/event/event-min.js"></script>
 	<script type="text/javascript" src="yui/build/animation/animation-min.js"></script>
-	<script type="text/javascript" src="yui/build/connection/connection-min.js"></script>
 	<script type="text/javascript" src="yui/build/dragdrop/dragdrop-min.js"></script>
 	<script type="text/javascript" src="yui/build/logger/logger-min.js"></script>
 	<script type="text/javascript" src="js2.js"></script>
+	<script type="text/javascript" src="/jslib/utils.js"></script>
         <title>${title}Neighbourhood Fix-It</title>
         <style type="text/css">\@import url("/css.css");</style>
     </head>
diff --git a/web/css.css b/web/css.css
index ec40801cb..4c2fc0ade 100644
--- a/web/css.css
+++ b/web/css.css
@@ -202,6 +202,9 @@ fieldset div.checkbox label {
     position: absolute;
     background-color: #cccccc;
 }
+#drag img.pin {
+    background-color: inherit;
+}
 
 #compass {
     background-color: #ffffff;
diff --git a/web/index.cgi b/web/index.cgi
index ec831e128..df907ecb0 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.33 2006-09-28 11:10:57 matthew Exp $
+# $Id: index.cgi,v 1.34 2006-09-28 16:36:17 matthew Exp $
 
 # TODO
 # Nothing is done about the update checkboxes - not stored anywhere on anything!
@@ -266,14 +266,14 @@ EOF
         my $council = mySociety::MaPit::get_voting_area_by_location_en($easting, $northing, 'polygon', 'LBO');
         my $areas_info = mySociety::MaPit::get_voting_areas_info($council);
 	$council = join(', ', map { $areas_info->{$_}->{name} } @$council);
-        $out .= display_map($q, $input{x}, $input{y}, 1, 0);
+        my $pins = display_pin($px, $py, 'yellow');
+        $out .= display_map($q, $input{x}, $input{y}, 1, 0, $pins);
         $out .= '<h1>Reporting a problem</h1>';
         $out .= '<p>You have located the problem at the location marked with a yellow pin on the map, which is within '
 	    . $council . '. If this is not the correct location, simply click on the map again.</p>
 <p>Please fill in details of the problem below. Your council won\'t be able
 to help unless you leave as much detail as you can, so please describe the
 exact location of the problem (ie. on a wall or the floor), and so on.</p>';
-        $out .= display_pin($px, $py, 'yellow');
         $out .= '<input type="hidden" name="easting" value="' . $easting . '">
 <input type="hidden" name="northing" value="' . $northing . '">';
     }
@@ -329,8 +329,38 @@ sub display {
     };
     return front_page($q, $error) if ($error);
 
+    my $pins = '';
+    my $min_e = tile_to_os($x);
+    my $min_n = tile_to_os($y);
+    my $mid_e = tile_to_os($x+1);
+    my $mid_n = tile_to_os($y+1);
+    my $max_e = tile_to_os($x+2);
+    my $max_n = tile_to_os($y+2);
+    my $current_map = select_all(
+        "select id,title,easting,northing from problem where state='confirmed'
+         and easting>=? and easting<? and northing>=? and northing<?
+         order by created desc limit 3", $min_e, $max_e, $min_n, $max_n);
+    my @ids = ();
+    foreach (@$current_map) {
+        push(@ids, $_->{id});
+        my $px = os_to_px($_->{easting}, $x);
+        my $py = os_to_px($_->{northing}, $y);
+        $pins .= display_pin($px, $py);
+    }
+    my $current = select_all(
+        "select id, title, easting, northing, distance
+            from problem_find_nearby(?, ?, 10) as nearby, problem
+            where nearby.problem_id = problem.id
+            and state = 'confirmed'" . (@ids ? ' and id not in (' . join(',' , @ids) . ')' : '') . "
+         order by created desc limit 3", $mid_e, $mid_n);
+    foreach (@$current) {
+        my $px = os_to_px($_->{easting}, $x);
+        my $py = os_to_px($_->{northing}, $y);
+        $pins .= display_pin($px, $py);
+    }
+
     my $out = '';
-    $out .= display_map($q, $x, $y, 1, 1);
+    $out .= display_map($q, $x, $y, 1, 1, $pins);
     if (!$input{x} && !$input{y}) {
         $out .= "<h1>That postcode is in $name</h1>";
     } else {
@@ -346,23 +376,8 @@ Use the arrows to the left of the map to scroll around.</p>
 <h2>Recent problems reported on this map</h2>
 <ul id="current">
 EOF
-    my $min_e = tile_to_os($x);
-    my $min_n = tile_to_os($y);
-    my $mid_e = tile_to_os($x+1);
-    my $mid_n = tile_to_os($y+1);
-    my $max_e = tile_to_os($x+2);
-    my $max_n = tile_to_os($y+2);
-    my $current_map = select_all(
-        "select id,title,easting,northing from problem where state='confirmed'
-         and easting>=? and easting<? and northing>=? and northing<?
-         order by created desc limit 3", $min_e, $max_e, $min_n, $max_n);
-    my @ids = ();
     foreach (@$current_map) {
-        push(@ids, $_->{id});
-        my $px = os_to_px($_->{easting}, $x);
-        my $py = os_to_px($_->{northing}, $y);
         $out .= '<li><a href="' . NewURL($q, id=>$_->{id}, x=>undef, y=>undef) . '">';
-        $out .= display_pin($px, $py);
         $out .= $_->{title};
         $out .= '</a></li>';
     }
@@ -374,17 +389,8 @@ EOF
     <h2>Recent problems reported within 10km</h2>
     <ul id="current">
 EOF
-    my $current = select_all(
-        "select id, title, easting, northing, distance
-            from problem_find_nearby(?, ?, 10) as nearby, problem
-            where nearby.problem_id = problem.id
-            and state = 'confirmed'" . (@ids ? ' and id not in (' . join(',' , @ids) . ')' : '') . "
-         order by created desc limit 3", $mid_e, $mid_n);
     foreach (@$current) {
-        my $px = os_to_px($_->{easting}, $x);
-        my $py = os_to_px($_->{northing}, $y);
         $out .= '<li><a href="' . NewURL($q, id=>$_->{id}, x=>undef, y=>undef) . '">';
-        $out .= display_pin($px, $py);
         $out .= $_->{title} . ' (c. ' . int($_->{distance}/100+.5)/10 . 'km)';
         $out .= '</a></li>';
     }
@@ -453,13 +459,12 @@ sub display_problem {
     my $py = os_to_px($northing, $y_tile);
 
     my $out = '';
-    $out .= display_map($q, $x_tile, $y_tile, 0, 1);
+    my $pins = display_pin($px, $py);
+    $out .= display_map($q, $x_tile, $y_tile, 0, 1, $pins);
     $out .= "<h1>$title</h1>";
 
     # Display information about problem
-    $out .= '<p>';
-    $out .= display_pin($px, $py);
-    $out .= '<em>Reported by ' . $name . ' at ' . prettify_epoch($time);
+    $out .= '<p><em>Reported by ' . $name . ' at ' . prettify_epoch($time);
     $out .= '</em></p> <p>';
     $out .= ent($desc);
     $out .= '</p>';
@@ -509,12 +514,14 @@ EOF
     return $out;
 }
 
-# display_map Q X Y TYPE COMPASS
+# display_map Q X Y TYPE COMPASS PINS
 # X,Y is bottom left tile of 2x2 grid
 # TYPE is 1 if the map is clickable, 0 if not
 # COMPASS is 1 to show the compass, 0 to not
+# PINS is HTML of pins to show
 sub display_map {
-    my ($q, $x, $y, $type, $compass) = @_;
+    my ($q, $x, $y, $type, $compass, $pins) = @_;
+    $pins ||= '';
     my $url = mySociety::Config::get('TILES_URL');
     my $tiles_url = $url . $x . '-' . ($x+1) . ',' . $y . '-' . ($y+1) . '/RABX';
     my $tiles = LWP::Simple::get($tiles_url);
@@ -549,7 +556,8 @@ EOF
     }
     $out .= <<EOF;
     <div id="map"><div id="drag">
-        $img_type id="2.2" name="tile_$tl" src="$tl_src" style="top:0px; left:0px;">$img_type id="2.3" name="tile_$tr" src="$tr_src" style="top:0px; left:254px;"><br>$img_type id="3.2" name="tile_$bl" src="$bl_src" style="top:254px; left:0px;">$img_type id="3.3" name="tile_$br" src="$br_src" style="top:254px; left:254px;">
+        $img_type id="t2.2" name="tile_$tl" src="$tl_src" style="top:0px; left:0px;">$img_type id="t2.3" name="tile_$tr" src="$tr_src" style="top:0px; left:254px;"><br>$img_type id="t3.2" name="tile_$bl" src="$bl_src" style="top:254px; left:0px;">$img_type id="t3.3" name="tile_$br" src="$br_src" style="top:254px; left:254px;">
+	$pins
     </div></div>
 EOF
     $out .= Page::compass($q, $x, $y) if $compass;
diff --git a/web/js2.js b/web/js2.js
index e3d7a2a20..8436bf422 100644
--- a/web/js2.js
+++ b/web/js2.js
@@ -18,7 +18,7 @@ var tilewidth = 254;
 var tileheight = 254;
 
 function onLoad() {
-    //var Log = new YAHOO.widget.LogReader();
+    // var Log = new YAHOO.widget.LogReader();
     var compass = document.getElementById('compass');
     if (compass) {
         var points = compass.getElementsByTagName('a');
@@ -41,8 +41,8 @@ function onLoad() {
 
     tile_x = 0;
     tile_y = 0;
-    var url = '/tilma/tileserver/10k-full-london/' + x + '-' + (x+5) + ',' + y + '-' + (y+5) + '/JSON?';
-    var req = YAHOO.util.Connect.asyncRequest('GET', url, urls_loaded, null);
+    var url = '/tilma/tileserver/10k-full-london/' + x + '-' + (x+5) + ',' + y + '-' + (y+5) + '/JSON';
+    var req = mySociety.asyncRequest(url, urls_loaded);
 }
 
 function image_rotate(img, x, y) {
@@ -60,13 +60,8 @@ var myAnim;
 function pan(x, y) {
     if (!myAnim || !myAnim.isAnimated()) {
         update_tiles(x, y);
-	var pins = YAHOO.util.Dom.getElementsByClassName('pin', 'img', 'content');
         myAnim = new YAHOO.util.Motion('drag', { points:{by:[x,y]} }, 1, YAHOO.util.Easing.easeBoth);
 	myAnim.animate();
-	for (var p in pins) {
-            var a = new YAHOO.util.Anim(pins[p], { right:{by:-x}, top:{by:y} }, 1, YAHOO.util.Easing.easeBoth);
-            a.animate();
-	}
     }
 }
 
@@ -76,15 +71,14 @@ function update_tiles(dx, dy) {
     drag_x += dx;
     drag_y += dy;
 
-    var newcols = {};
     var horizontal = 0;
     var vertical = 0;
     for (var i=0; i<6; i++) {
         for (var j=0; j<6; j++) {
-	    var id = i+'.'+j;
+	    var id = 't'+i+'.'+j;
 	    var img = document.getElementById(id);
             if (drag_x + img.offsetLeft > 762) {
-                //img.src = '/i/grey.gif';
+                img.src = '/i/grey.gif';
 	        image_rotate(img, -6, 0);
 		horizontal--;
 	    } else if (drag_x + img.offsetLeft < -508) {
@@ -111,47 +105,46 @@ function update_tiles(dx, dy) {
     tile_y = mod((tile_y + vertical), 6);
 
     var url = '/tilma/tileserver/10k-full-london/' + x + '-' + (x+5) + ',' + y + '-' + (y+5) + '/JSON';
-    var req = YAHOO.util.Connect.asyncRequest('GET', url, urls_loaded, null);
+    var req = mySociety.asyncRequest(url, urls_loaded);
 }
 
 // Load 6x6 grid of tiles around current 2x2
-var urls_loaded = {
-    success: function(o) {
-        var tiles = eval(o.responseText);
-	var drag = document.getElementById('drag');
-	for (var i=0; i<6; i++) {
-	    var ii = (i + tile_y) % 6;
-	    for (var j=0; j<6; j++) {
-	        var jj = (j + tile_x) % 6;
-	        var id = ii+'.'+jj;
-		var xx = x+j;
-		var yy = y+5-i;
-		var img = document.getElementById(id);
-		if (img) {
-		    if (!img.galleryimg) { img.galleryimg = false; }
-                    img.src = 'http://tilma.mysociety.org/tileserver/10k-full-london/' + tiles[i][j];
-		    img.name = 'tile_' + xx + '.' + yy;
-		    //if (!img.xx) img.xx = xx;
-		    //if (!img.yy) img.yy = yy;
-		    continue;
-		}
-		img = document.createElement('input');
-		img.type = 'image';
+function urls_loaded(o) {
+    if (o.readyState != 4) return;
+    var tiles = eval(o.responseText);
+    var drag = document.getElementById('drag');
+    for (var i=0; i<6; i++) {
+        var ii = (i + tile_y) % 6;
+        for (var j=0; j<6; j++) {
+            var jj = (j + tile_x) % 6;
+	    var id = 't'+ii+'.'+jj;
+	    var xx = x+j;
+	    var yy = y+5-i;
+	    var img = document.getElementById(id);
+	    if (img) {
+		if (!img.galleryimg) { img.galleryimg = false; }
                 img.src = 'http://tilma.mysociety.org/tileserver/10k-full-london/' + tiles[i][j];
-		img.name = 'tile_' + xx + '.' + yy;
-		img.id = id;
-		img.style.position = 'absolute';
-		img.style.width = tilewidth + 'px';
-		img.style.height = tileheight + 'px';
-		img.style.top = ((ii-2)*tileheight) + 'px';
-		img.style.left = ((jj-2)*tilewidth) + 'px';
-		img.galleryimg = false;
-		//img.xx = xx;
-		//img.yy = yy;
-		img.alt = 'Loading...';
-		drag.appendChild(img);
+	        img.name = 'tile_' + xx + '.' + yy;
+	        //if (!img.xx) img.xx = xx;
+	        //if (!img.yy) img.yy = yy;
+	        continue;
 	    }
-	}
+	    img = document.createElement('input');
+	    img.type = 'image';
+            img.src = 'http://tilma.mysociety.org/tileserver/10k-full-london/' + tiles[i][j];
+	    img.name = 'tile_' + xx + '.' + yy;
+	    img.id = id;
+	    img.style.position = 'absolute';
+	    img.style.width = tilewidth + 'px';
+	    img.style.height = tileheight + 'px';
+	    img.style.top = ((ii-2)*tileheight) + 'px';
+	    img.style.left = ((jj-2)*tilewidth) + 'px';
+	    img.galleryimg = false;
+	    //img.xx = xx;
+	    //img.yy = yy;
+	    img.alt = 'Loading...';
+            drag.appendChild(img);
+        }
     }
 }