aboutsummaryrefslogtreecommitdiffstats
path: root/web/js.js
diff options
context:
space:
mode:
Diffstat (limited to 'web/js.js')
-rw-r--r--web/js.js327
1 files changed, 327 insertions, 0 deletions
diff --git a/web/js.js b/web/js.js
new file mode 100644
index 000000000..81b979b7a
--- /dev/null
+++ b/web/js.js
@@ -0,0 +1,327 @@
+window.onload = init;
+var mapFOO;
+var log;
+function init() {
+ log = new Log('log');
+ log.log('<em>Debug log</em>');
+ map = new Map('map');
+}
+
+function Map(m) {
+ // Public variables
+ this.map = document.getElementById(m);
+ this.pos = YAHOO.util.Dom.getXY(this.map);
+ this.width = this.map.offsetWidth - 2;
+ this.height = this.map.offsetHeight - 2;
+ this.tilewidth = 250;
+ this.tileheight = 250;
+ if (this.width != 500 || this.height != 500) {
+ return false;
+ }
+ this.point = new Point();
+ this.zoomed = false;
+ this.drag = this.map.getElementsByTagName('div')[0];
+
+ // Private variables
+ var drag_x = 0;
+ var drag_y = 0;
+ var self = this;
+
+ // Event handlers
+ this.map.onmousedown = associateObjWithEvent(this, 'drag_start');
+// this.map.ondblclick = associateObjWithEvent(this, 'centre');
+ 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*250) + 'px';
+ img.xx += x;
+ }
+ if (y) {
+ img.style.top = (img.offsetTop + y*250) + 'px';
+ img.yy += y;
+ }
+ var url = img.xx + '.' + img.yy + '.png';
+ if (self.zoomed) {
+ url = 'tl/' + url;
+ } else {
+ url = 't/' + url;
+ }
+ img.src = url;
+ }
+
+ // Moving the map, loading more tiles as necessary
+ 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';
+ }
+
+ 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) {
+ if (!img.xx) { img.xx = xx; }
+ if (!img.yy) { img.yy = yy; }
+ if (!img.galleryimg) { img.galleryimg = false; }
+ if (drag_x + img.offsetLeft > 750) {
+ image_rotate(img, -6, 0);
+ } else if (drag_x + img.offsetLeft < -500) {
+ image_rotate(img, 6, 0);
+ } else if (drag_y + img.offsetTop > 750) {
+ image_rotate(img, 0, -6);
+ } else if (drag_y + img.offsetTop < -500) {
+ image_rotate(img, 0, 6);
+ }
+ continue;
+ }
+ img = document.createElement('img');
+ img.id = id;
+ img.style.position = 'absolute';
+ img.style.width = this.tilewidth + 'px';
+ img.style.height = this.tileheight + 'px';
+ img.style.left = ((i-2)*self.tilewidth) + 'px';
+ img.style.top = ((j-2)*self.tileheight) + 'px';
+ img.galleryimg = false;
+ img.xx = xx;
+ img.yy = yy;
+ image_rotate(img, 0, 0);
+ img.alt = 'Loading...';
+ this.drag.appendChild(img);
+ }
+ }
+ return false;
+ };
+ 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);
+ return false;
+ }
+}
+
+Map.prototype = {
+ myAnim : null,
+ in_drag : false,
+
+ setCursor : function(s) {
+ this.map.style.cursor = s;
+ },
+
+ 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);
+ },
+
+ pan : function(x,y) {
+ if (!this.myAnim || !this.myAnim.isAnimated()) {
+ this.update(x,y, true);
+ this.myAnim = new YAHOO.util.Motion('drag', {points: { by:[x,y] } }, 0.5, YAHOO.util.Easing.easeBoth);
+ this.myAnim.animate();
+ }
+ },
+ drag_move : function(e, point){
+ this.in_drag = true;
+ this.last_mouse_pos = this.mouse_pos;
+ this.mouse_pos = point;
+ this.update(this.mouse_pos.x-this.last_mouse_pos.x, this.mouse_pos.y-this.last_mouse_pos.y);
+ return false;
+ },
+ drag_start : function(e, point){
+ //log.log('mousedown')
+ this.mouse_pos = point;
+ this.setCursor('move');
+ document.onmousemove = associateObjWithEvent(this, 'drag_move');
+ document.onmouseup = associateObjWithEvent(this, 'drag_end');
+ return false;
+ },
+ drag_end : function(e){
+ //log.log('mouseup')
+ document.onmousemove = null;
+ document.onmouseup = null;
+ this.setCursor('auto');
+// this.in_drag = false;
+ return false;
+ },
+ drag_end_out : function(e){
+ 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;
+ this.setCursor('auto');
+ }
+ 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 new Point(posx, posy);
+}
+
+function associateObjWithEvent(obj, methodName) {
+ return (function(e) {
+ e = e || window.event;
+ var point = get_posn(e);
+ return obj[methodName](e, point);
+ });
+}
+
+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;
+}
+Point.prototype.toString = function(){
+ return "("+this.x+", "+this.y+")";
+};
+
+function Pin(x,y) {
+ this.x = x || 0;
+ this.y = y || 0;
+ this.x -= 6;
+ this.y -= 20;
+ pin = document.createElement('div');
+ pin.style.position = 'absolute';
+ pin.style.top = this.y + 'px';
+ pin.style.left = this.x + 'px';
+ shadow = document.createElement('img');
+ shadow.style.top = '0px';
+ shadow.style.left = '0px';
+ shadow.src = 'i/pin_shadow.png';
+ pin.appendChild(shadow);
+ img = document.createElement('img');
+ img.style.top = '0px';
+ img.style.left = '0px';
+ img.src = 'i/pin_yellow.png';
+ pin.appendChild(img);
+ this.pin = pin;
+}
+Pin.prototype.toString = function() {
+ return "("+this.x+", "+this.y+")";
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-27 16:30:59 +0000