diff options
| -rw-r--r-- | perllib/Page.pm | 11 | ||||
| -rw-r--r-- | web/js.js | 109 | ||||
| -rw-r--r-- | web/js2.js | 163 | ||||
| -rwxr-xr-x | web/proxy.cgi | 39 |
4 files changed, 214 insertions, 108 deletions
diff --git a/perllib/Page.pm b/perllib/Page.pm index f64f7436a..403f3e4b7 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.20 2006-09-27 13:51:22 matthew Exp $ +# $Id: Page.pm,v 1.21 2006-09-28 00:01:41 matthew Exp $ # package Page; @@ -68,6 +68,15 @@ sub header ($$%) { <!--[if lt IE 7.]> <script defer type="text/javascript" src="/pngfix.js"></script> <![endif]--> + <link type="text/css" rel="stylesheet" href="yui/build/logger/assets/logger.css"> + <script type="text/javascript" src="yui/build/yahoo/yahoo-min.js"></script> + <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> <title>${title}Neighbourhood Fix-It</title> <style type="text/css">\@import url("/css.css");</style> </head> @@ -1,11 +1,5 @@ window.onload = init; -var mapFOO; -var log; -function init() { - log = new Log('log'); - log.log('<em>Debug log</em>'); - map = new Map('map'); -} +function init() { map = new Map('map'); } function Map(m) { // Public variables @@ -33,53 +27,6 @@ function Map(m) { this.map.onclick = associateObjWithEvent(this, 'add_pin'); document.onmouseout = associateObjWithEvent(this, 'drag_end_out'); - // Set up event handlers on links - var points = document.getElementById('compass').getElementsByTagName('a'); - points[1].onclick = function() { self.pan(0,self.tileheight); return false; }; - points[3].onclick = function() { self.pan(self.tilewidth,0); return false; }; - points[4].onclick = function() { self.pan(-self.tilewidth,0); return false; }; - points[6].onclick = function() { self.pan(0,-self.tileheight); return false; }; - points[0].onclick = function() { self.pan(self.tilewidth,self.tileheight); return false; }; - points[2].onclick = function() { self.pan(-self.tilewidth,self.tileheight); return false; }; - points[5].onclick = function() { self.pan(self.tilewidth,-self.tileheight); return false; }; - points[7].onclick = function() { self.pan(-self.tilewidth,-self.tileheight); return false; }; - - var zoom = document.getElementById('zoom').getElementsByTagName('img')[0]; - if (zoom.alt == 'Zoom out') { - this.zoomed = true; - } - zoom.onclick = function() { - if (!self.zoomed) { - this.src = 'i/zoomout.gif'; - self.zoomed = true; - self.zoom_change(10); - } else { - self.zoomed = false; - this.src = 'i/zoomin.gif'; - self.zoom_change(0.1); - } - return false; - }; - - /* - points[0].style.top = (this.pos[1]-13) + 'px' - points[1].style.top = (this.pos[1]-13) + 'px' - points[2].style.top = (this.pos[1]-13) + 'px' - points[0].style.left = (this.pos[0]-13) + 'px' - points[3].style.left = (this.pos[0]-13) + 'px' - points[5].style.left = (this.pos[0]-13) + 'px' - points[1].style.left = (this.pos[0]+this.width/2-6) + 'px' - points[6].style.left = (this.pos[0]+this.width/2-6) + 'px' - points[3].style.top = (this.pos[1]+this.height/2) + 'px' - points[4].style.top = (this.pos[1]+this.height/2) + 'px' - points[2].style.left = (this.pos[0]+this.width) + 'px' - points[4].style.left = (this.pos[0]+this.width) + 'px' - points[7].style.left = (this.pos[0]+this.width) + 'px' - points[5].style.top = (this.pos[1]+this.height) + 'px' - points[6].style.top = (this.pos[1]+this.height) + 'px' - points[7].style.top = (this.pos[1]+this.height) + 'px' - */ - function image_rotate(img, x, y) { if (x) { img.style.left = (img.offsetLeft + x*254) + 'px'; @@ -90,11 +37,7 @@ function Map(m) { img.yy += y; } var url = img.xx + '.' + img.yy + '.png'; - if (self.zoomed) { - url = 'tl/' + url; - } else { - url = 't/' + url; - } + url = 't/' + url; img.src = url; } @@ -102,10 +45,8 @@ function Map(m) { this.update = function(dx, dy, noMove) { drag_x += dx; drag_y += dy; - //log.log(drag_x + ' ' + drag_y); this.point.x = x + 1 - drag_x/this.tilewidth; this.point.y = y + 1 - drag_y/this.tileheight; - //log.log(this.point); if (!noMove) { this.drag.style.left = drag_x + 'px'; this.drag.style.top = drag_y + 'px'; @@ -151,41 +92,8 @@ function Map(m) { }; this.update(0,0); - this.zoom_change = function(factor) { - self.point.x *= factor; - self.point.y *= factor; - //log.log(self.point) - var rx = Math.floor(self.point.x); - var ry = Math.floor(self.point.y); - var dx = rx - self.point.x; - var dy = ry - self.point.y; - x = rx - 1; - y = ry - 1; - drag_x = dx*self.tilewidth; - drag_y = dy*self.tileheight; - this.drag.style.left = drag_x + 'px'; - this.drag.style.top = drag_y + 'px'; - for (var i=0; i<6; i++) { - for (var j=0; j<6; j++) { - var id = i+'.'+j - var xx = x+i-2; - var yy = y+j-2; - var img = document.getElementById(id); - if (img) { - img.style.left = ((i-2)*self.tilewidth) + 'px'; - img.style.top = ((j-2)*self.tileheight) + 'px'; - img.xx = xx; - img.yy = yy; - image_rotate(img, 0, 0); - } - } - } - } - this.add_pin = function(e, point) { if (this.in_drag) { this.in_drag = false; return false; } - //log.log('click') - //log.log(point) if (!point) point = new Point(); m = new Pin(point.x-this.pos[0]-drag_x, point.y-this.pos[1]-drag_y); this.drag.appendChild(m.pin); @@ -202,7 +110,6 @@ Map.prototype = { }, centre : function(e, point){ - //log.log('dblclick') var x = -point.x + this.width/2 + this.pos[0]; var y = -point.y + this.height/2 + this.pos[1]; this.pan(x,y); @@ -223,7 +130,6 @@ Map.prototype = { return false; }, drag_start : function(e, point){ - //log.log('mousedown') this.mouse_pos = point; this.setCursor('move'); document.onmousemove = associateObjWithEvent(this, 'drag_move'); @@ -231,7 +137,6 @@ Map.prototype = { return false; }, drag_end : function(e){ - //log.log('mouseup') document.onmousemove = null; document.onmouseup = null; this.setCursor('auto'); @@ -283,16 +188,6 @@ function associateObjWithEvent(obj, methodName) { }); } -function Log(el) { - var logging = true; - var logdiv = document.getElementById(el); - this.log = function(s) { - if (logging) { - logdiv.innerHTML += s + '<br>'; - } - }; -} - function Point(x,y) { this.x = x || 0; this.y = y || 0; diff --git a/web/js2.js b/web/js2.js new file mode 100644 index 000000000..ca80c9b7b --- /dev/null +++ b/web/js2.js @@ -0,0 +1,163 @@ +/* + * js.js + * Neighbourhood Fix-It JavaScript + * + * TODO + * Updating tiles from server as they rotate around, can't seem to think of this straight... + * Get pins to disappear when they're not over the map! + * Try and put back dragging, I suppose + * Selection of pin doesn't really need a server request, but I don't really care + * Add callback to tileserver JSON, so don't have to use proxy + * + */ + + +window.onload = onLoad; + +var x, y; +var tilewidth = 254; +var tileheight = 254; + +function onLoad() { + //var Log = new YAHOO.widget.LogReader(); + + var compass = document.getElementById('compass'); + if (compass) { + var points = document.getElementById('compass').getElementsByTagName('a'); + points[1].onclick = function() { pan(0, tileheight); return false; }; + points[3].onclick = function() { pan(tilewidth, 0); return false; }; + points[4].onclick = function() { pan(-tilewidth, 0); return false; }; + points[6].onclick = function() { pan(0, -tileheight); return false; }; + points[0].onclick = function() { pan(tilewidth, tileheight); return false; }; + points[2].onclick = function() { pan(-tilewidth, tileheight); return false; }; + points[5].onclick = function() { pan(tilewidth, -tileheight); return false; }; + points[7].onclick = function() { pan(-tilewidth, -tileheight); return false; }; + } + + var form = document.getElementById('mapForm'); + x = parseInt(form.x.value, 10) - 2; /* Bottom left corner X,Y */ + y = parseInt(form.y.value, 10) - 2; + +// 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++) { + for (var j=0; j<6; j++) { + var id = i+'.'+j; + var xx = x+j; + var yy = y+5-i; + var img = document.getElementById(id); + if (img) { + if (!img.xx) img.xx = xx; + if (!img.yy) img.yy = yy; + if (!img.galleryimg) { img.galleryimg = false; } + 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 = ((i-2)*tileheight) + 'px'; + img.style.left = ((j-2)*tilewidth) + 'px'; + img.galleryimg = false; + img.xx = xx; + img.yy = yy; + img.alt = 'Loading...'; + drag.appendChild(img); + } + } + } + +} + var url = '/proxy.cgi?x=' + x + ';xm=' + (x+5) + ';y=' + y + ';ym=' + (y+5); + var req = YAHOO.util.Connect.asyncRequest('GET', url, urls_loaded, null); +} + +function image_rotate(img, x, y) { + if (x) { + img.style.left = (img.offsetLeft + x*tilewidth) + 'px'; + img.xx += x; + } + if (y) { + img.style.top = (img.offsetTop + y*tileheight) + 'px'; + img.yy += y; + } +} + +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(); + } + } +} + +var drag_x = 0; +var drag_y = 0; +function update_tiles(dx, dy) { + // XXX Ugh, so that the server gets sent the right map co-ords. Needs more thinking about! +/* var form = document.getElementById('mapForm'); + form.x.value += floor(x/tilewidth); + form.y.value += floor(y/tileheight); +*/ + + drag_x += dx; + drag_y += dy; + + var newcols = {}; + for (var i=0; i<6; i++) { + for (var j=0; j<6; j++) { + var id = i+'.'+j; + var xx = x+j; + var yy = y+5-i; + var img = document.getElementById(id); + if (drag_x + img.offsetLeft > 762) { + image_rotate(img, -6, 0); + } else if (drag_x + img.offsetLeft < -508) { + image_rotate(img, 6, 0); + } else if (drag_y + img.offsetTop > 762) { + image_rotate(img, 0, -6); + } else if (drag_y + img.offsetTop < -508) { + image_rotate(img, 0, 6); + } + } + } + +// XXX: Now has to fetch correct tiles from tileserver and overwrite +// correct images... Perhaps this is not right way to do it? + +/* + for (j in newcols) { + var new_column = { + success: function(o) { + var tiles = eval(o.responseText); + for (var i=0; i<6; i++) { + var tile = tiles[i][0]; + alert(tile); + } + } + }; + var url = '/proxy.cgi?x=' + xx + ';xm=' + xx + ';y=' + y + ';ym=' + (y+5); + var req = YAHOO.util.Connect.asyncRequest('GET', url, new_column, null); + } +*/ + +} + +// Floor always closer to 0 +function floor(n) { + if (n>=0) return Math.floor(n); + else return Math.ceil(n); +} diff --git a/web/proxy.cgi b/web/proxy.cgi new file mode 100755 index 000000000..44763dd5c --- /dev/null +++ b/web/proxy.cgi @@ -0,0 +1,39 @@ +#!/usr/bin/perl -w + +# proxy.cgi: +# I hate everthing. +# +# Copyright (c) 2006 UK Citizens Online Democracy. All rights reserved. +# Email: matthew@mysociety.org. WWW: http://www.mysociety.org +# +# $Id: proxy.cgi,v 1.1 2006-09-28 00:01:42 matthew Exp $ + +use strict; +require 5.8.0; +# Horrible boilerplate to set up appropriate library paths. +use FindBin; +use lib "$FindBin::Bin/../perllib"; +use lib "$FindBin::Bin/../../perllib"; +use LWP::Simple; +use Page; +use mySociety::Config; + +BEGIN { + mySociety::Config::set_file("$FindBin::Bin/../conf/general"); +} + +sub main { + my $q = shift; + print $q->header('text/javascript'); + my $x = $q->param('x') || 0; $x += 0; + my $y = $q->param('y') || 0; $y += 0; + my $xm = $q->param('xm') || 0; $xm += 0; + my $ym = $q->param('ym') || 0; $ym += 0; + return unless $x && $y && $xm && $ym; + + my $url = mySociety::Config::get('TILES_URL'); + my $tiles_url = "$url$x-$xm,$y-$ym/JSON"; + my $tiles = LWP::Simple::get($tiles_url); + print $tiles; +} +Page::do_fastcgi(\&main); |