diff options
| -rw-r--r-- | web/css.css | 5 | ||||
| -rwxr-xr-x | web/index.cgi | 4 | ||||
| -rw-r--r-- | web/js.js | 169 | ||||
| -rw-r--r-- | web/yui/utilities.js | 4 |
4 files changed, 70 insertions, 112 deletions
diff --git a/web/css.css b/web/css.css index 552a5f1ff..af4b907c0 100644 --- a/web/css.css +++ b/web/css.css @@ -181,12 +181,15 @@ fieldset div.checkbox label, label.n { overflow: hidden; float: right; position: relative; + background-color: #f1f1f1; } #drag { - position: relative; + position: absolute; width: 508px; height: 508px; + left: 0; + top: 0; } #side { diff --git a/web/index.cgi b/web/index.cgi index 10acae833..90fa62741 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.52 2007-01-19 16:57:28 matthew Exp $ +# $Id: index.cgi,v 1.53 2007-01-19 23:16:54 matthew Exp $ # TODO # Nothing is done about the update checkboxes - not stored anywhere on anything! @@ -97,7 +97,7 @@ like graffiti, fly tipping, broken paving slabs, or street lighting</p> EOF $out .= '<p id="error">' . $error . 'Please try again.</p>' if ($error); $out .= <<EOF; -<form action="./" method="get" id="postcodeForm"> +<form action="./" method="post" id="postcodeForm"> <label for="pc">Enter a nearby postcode or street name:</label> <input type="text" name="pc" value="$pc_h" id="pc" size="10" maxlength="200"> <input type="submit" value="Go"> @@ -3,16 +3,38 @@ * Neighbourhood Fix-It JavaScript * * TODO - * Run all this onDocumentReady rather than onLoad * Investigate jQuery - * Stop annoying flickers/map spasms when dragging * Tidy it all up + * Don't wrap around tiles as it's quite confusing if the tile server is slow to respond * Selection of pin doesn't really need a server request, but I don't really care * */ +YAHOO.util.Event.onContentReady('compass', function() { + var points = this.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; }; +}); + +YAHOO.util.Event.onContentReady('mapForm', function() { + this.onsubmit = function() { + this.x.value = x + 2; + this.y.value = y + 2; + return true; + } +}); -window.onload = onLoad; +var in_drag; +YAHOO.util.Event.onContentReady('drag', function() { + var dragO = new YAHOO.util.DDMap('map'); + update_tiles(0, 0, false, true); +}); // I love the global var tile_x = 0; @@ -20,52 +42,17 @@ var tile_y = 0; var tilewidth = 254; var tileheight = 254; -var in_drag; -function onLoad() { - var compass = document.getElementById('compass'); - if (compass) { - var points = 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 drag = document.getElementById('drag'); - var form = document.getElementById('mapForm'); - if (form) form.onsubmit = form_submit; - if (drag) { - var inputs = drag.getElementsByTagName('input'); - update_tiles(0, 0, false, true); - var map = document.getElementById('map'); - map.onmousedown = drag_start; - document.onmouseout = drag_end_out; +function drag_check(e) { + if (in_drag) { + in_drag=false; + return false; } -} - -/* - 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(i, j, x, y) { var id = 't' + i + '.' + j; var img = document.getElementById(id); - // img.src = '/i/grey.gif'; if (x) img.style.left = (img.offsetLeft + x*tilewidth) + 'px'; if (y) @@ -76,7 +63,8 @@ var myAnim; function pan(x, y) { if (!myAnim || !myAnim.isAnimated()) { update_tiles(x, y, true, false); - myAnim = new YAHOO.util.Motion('drag', { points:{by:[x,y]} }, 1, YAHOO.util.Easing.easeBoth); + myAnim = new YAHOO.util.Motion('drag', { points:{by:[x,y]} }, 10, YAHOO.util.Easing.easeOut); + myAnim.useSeconds = false; myAnim.animate(); } } @@ -167,76 +155,12 @@ function urls_loaded(o) { } } -// Floor always closer to 0 -function floor(n) { - if (n>=0) return Math.floor(n); - return Math.ceil(n); -} - // Mod always to positive result function mod(m, n) { if (m>=0) return m % n; return (m % n) + n; } -/* Dragging */ - -var last_mouse_pos = {}; -var mouse_pos = {}; - -function drag_move(e) { - if (!e) var e = window.event; - var point = get_posn(e); - if (point == mouse_pos) return false; - in_drag = true; - last_mouse_pos = mouse_pos; - mouse_pos = point; - var dx = mouse_pos.x-last_mouse_pos.x; - var dy = mouse_pos.y-last_mouse_pos.y; - update_tiles(dx, dy, false, false); - 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; - mouse_pos = get_posn(e); - 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; - 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; -} - /* Called every mousemove, so on first call, overwrite itself with quicker version */ function get_posn(ev) { var posx, posy; @@ -267,3 +191,34 @@ function setCursor(s) { } } +var mouse_pos = {}; +YAHOO.util.DDMap = function(id, sGroup, config) { + if (id) { + this.init(id, sGroup, config); + } +}; +YAHOO.extend(YAHOO.util.DDMap, YAHOO.util.DD, { + scroll: false, + b4MouseDown: function(e) { }, + b4StartDrag: function(x, y) { }, + startDrag: function(x, y) { + mouse_pos = { x: x, y: y }; + setCursor('move'); + in_drag = true; + }, + onDrag: function(e) { + var point = get_posn(e); + if (point == mouse_pos) return false; + var dx = point.x-mouse_pos.x; + var dy = point.y-mouse_pos.y; + mouse_pos = point; + update_tiles(dx, dy, false, false); + }, + b4EndDrag: function(e) { }, + endDrag: function(e) { + setCursor('crosshair'); + }, + toString: function() { + return ("DDMap " + this.id); + } +}); diff --git a/web/yui/utilities.js b/web/yui/utilities.js index 9d12134a8..bbf37f201 100644 --- a/web/yui/utilities.js +++ b/web/yui/utilities.js @@ -324,7 +324,7 @@ return false;},isTypeOfDD:function(oDD){return(oDD&&oDD.__ygDragDrop);},isHandle return null;},handleMouseDown:function(e,oDD){this.currentTarget=YAHOO.util.Event.getTarget(e);this.dragCurrent=oDD;var el=oDD.getEl();this.startX=YAHOO.util.Event.getPageX(e);this.startY=YAHOO.util.Event.getPageY(e);this.deltaX=this.startX-el.offsetLeft;this.deltaY=this.startY-el.offsetTop;this.dragThreshMet=false;this.clickTimeout=setTimeout(function(){var DDM=YAHOO.util.DDM;DDM.startDrag(DDM.startX,DDM.startY);},this.clickTimeThresh);},startDrag:function(x,y){clearTimeout(this.clickTimeout);if(this.dragCurrent){this.dragCurrent.b4StartDrag(x,y);this.dragCurrent.startDrag(x,y);} this.dragThreshMet=true;},handleMouseUp:function(e){if(!this.dragCurrent){return;} clearTimeout(this.clickTimeout);if(this.dragThreshMet){this.fireEvents(e,true);}else{} -this.stopDrag(e);this.stopEvent(e);},stopEvent:function(e){if(this.stopPropagation){YAHOO.util.Event.stopPropagation(e);} +this.stopDrag(e);/* MPS 2007-01-19 this.stopEvent(e); */},stopEvent:function(e){if(this.stopPropagation){YAHOO.util.Event.stopPropagation(e);} if(this.preventDefault){YAHOO.util.Event.preventDefault(e);}},stopDrag:function(e){if(this.dragCurrent){if(this.dragThreshMet){this.dragCurrent.b4EndDrag(e);this.dragCurrent.endDrag(e);} this.dragCurrent.onMouseUp(e);} this.dragCurrent=null;this.dragOvers={};},handleMouseMove:function(e){if(!this.dragCurrent){return true;} @@ -375,4 +375,4 @@ this.setDragElPos(iPageX,iPageY);YAHOO.util.Dom.setStyle(dragEl,"visibility","vi if(isNaN(br)){br=0;} if(isNaN(bb)){bb=0;} if(isNaN(bl)){bl=0;} -var newWidth=Math.max(0,el.offsetWidth-br-bl);var newHeight=Math.max(0,el.offsetHeight-bt-bb);DOM.setStyle(dragEl,"width",newWidth+"px");DOM.setStyle(dragEl,"height",newHeight+"px");}},b4MouseDown:function(e){var x=YAHOO.util.Event.getPageX(e);var y=YAHOO.util.Event.getPageY(e);this.autoOffset(x,y);this.setDragElPos(x,y);},b4StartDrag:function(x,y){this.showFrame(x,y);},b4EndDrag:function(e){YAHOO.util.Dom.setStyle(this.getDragEl(),"visibility","hidden");},endDrag:function(e){var DOM=YAHOO.util.Dom;var lel=this.getEl();var del=this.getDragEl();DOM.setStyle(del,"visibility","");DOM.setStyle(lel,"visibility","hidden");YAHOO.util.DDM.moveToEl(lel,del);DOM.setStyle(del,"visibility","hidden");DOM.setStyle(lel,"visibility","");},toString:function(){return("DDProxy "+this.id);}});YAHOO.util.DDTarget=function(id,sGroup,config){if(id){this.initTarget(id,sGroup,config);}};YAHOO.extend(YAHOO.util.DDTarget,YAHOO.util.DragDrop,{toString:function(){return("DDTarget "+this.id);}});
\ No newline at end of file +var newWidth=Math.max(0,el.offsetWidth-br-bl);var newHeight=Math.max(0,el.offsetHeight-bt-bb);DOM.setStyle(dragEl,"width",newWidth+"px");DOM.setStyle(dragEl,"height",newHeight+"px");}},b4MouseDown:function(e){var x=YAHOO.util.Event.getPageX(e);var y=YAHOO.util.Event.getPageY(e);this.autoOffset(x,y);this.setDragElPos(x,y);},b4StartDrag:function(x,y){this.showFrame(x,y);},b4EndDrag:function(e){YAHOO.util.Dom.setStyle(this.getDragEl(),"visibility","hidden");},endDrag:function(e){var DOM=YAHOO.util.Dom;var lel=this.getEl();var del=this.getDragEl();DOM.setStyle(del,"visibility","");DOM.setStyle(lel,"visibility","hidden");YAHOO.util.DDM.moveToEl(lel,del);DOM.setStyle(del,"visibility","hidden");DOM.setStyle(lel,"visibility","");},toString:function(){return("DDProxy "+this.id);}});YAHOO.util.DDTarget=function(id,sGroup,config){if(id){this.initTarget(id,sGroup,config);}};YAHOO.extend(YAHOO.util.DDTarget,YAHOO.util.DragDrop,{toString:function(){return("DDTarget "+this.id);}}); |