24 |
24 |
25 // the (x, y) co-ordinates |
25 // the (x, y) co-ordinates |
26 var x = col * this.tile_width; |
26 var x = col * this.tile_width; |
27 var y = row * this.tile_height; |
27 var y = row * this.tile_height; |
28 |
28 |
29 var url = this.path + "?x=" + x + "&y=" + y + "&zoom=" + zl + "&sw=" + sw + "&sh=" + sh; |
29 var url = this.path + "?x=" + x + "&y=" + y + "&zl=" + zl; // + "&sw=" + sw + "&sh=" + sh; |
30 |
30 |
31 if (this.refresh) |
31 if (this.refresh) |
32 url += "&ts=" + new Date().getTime(); |
32 url += "&ts=" + new Date().getTime(); |
33 |
33 |
34 if (this.opt_key && this.opt_value) |
34 if (this.opt_key && this.opt_value) |
35 url += "&" + this.opt_key + "=" + this.opt_value; |
35 url += "&" + this.opt_key + "=" + this.opt_value; |
36 |
36 |
37 return url; |
37 return url; |
38 }, |
38 }, |
|
39 |
|
40 // build an URL for a full image |
|
41 build_image_url: function (cx, cy, w, h, zl) { |
|
42 return (this.path + "?cx=" + cx + "&cy=" + cy + "&w=" + w + "&h=" + h + "&zl=" + zl); |
|
43 } |
39 }); |
44 }); |
40 |
45 |
41 // a viewport that contains a substrate which contains several zoom layers which contain many tiles |
46 // a viewport that contains a substrate which contains several zoom layers which contain many tiles |
42 var Viewport = Class.create({ |
47 var Viewport = Class.create({ |
43 initialize: function (source, viewport_id) { |
48 initialize: function (source, viewport_id) { |
81 if (this.btn_zoom_out) |
86 if (this.btn_zoom_out) |
82 Event.observe(this.btn_zoom_out, "click", this.zoom_out.bindAsEventListener(this)); |
87 Event.observe(this.btn_zoom_out, "click", this.zoom_out.bindAsEventListener(this)); |
83 |
88 |
84 // set viewport size |
89 // set viewport size |
85 this.update_size(); |
90 this.update_size(); |
|
91 |
|
92 // this comes after update_size, since it must be updated once we have the size and zoom layer... |
|
93 this.image_link = $("lnk-image"); |
86 |
94 |
87 // initial location? |
95 // initial location? |
88 if (document.location.hash) { |
96 if (document.location.hash) { |
89 // x:y:z tuple |
97 // x:y:z tuple |
90 var pt = document.location.hash.substr(1).split(":"); |
98 var pt = document.location.hash.substr(1).split(":"); |
280 this.view_width = this.div.getWidth(); |
288 this.view_width = this.div.getWidth(); |
281 this.view_height = this.div.getHeight(); |
289 this.view_height = this.div.getHeight(); |
282 |
290 |
283 this.center_offset_x = Math.floor(this.view_width / 2); |
291 this.center_offset_x = Math.floor(this.view_width / 2); |
284 this.center_offset_y = Math.floor(this.view_height / 2); |
292 this.center_offset_y = Math.floor(this.view_height / 2); |
|
293 |
|
294 this.update_image_link(); |
285 }, |
295 }, |
286 |
296 |
287 // figure out the scroll offset as absolute pixel co-ordinates at the top left |
297 // figure out the scroll offset as absolute pixel co-ordinates at the top left |
288 update_scroll: function() { |
298 update_scroll: function() { |
289 this.scroll_x = -parseInt(this.substrate.style.left); |
299 this.scroll_x = -parseInt(this.substrate.style.left); |
352 if (this.btn_zoom_in) |
362 if (this.btn_zoom_in) |
353 (this.zoom_layer.level >= this.source.zoom_max) ? this.btn_zoom_in.disable() : this.btn_zoom_in.enable(); |
363 (this.zoom_layer.level >= this.source.zoom_max) ? this.btn_zoom_in.disable() : this.btn_zoom_in.enable(); |
354 |
364 |
355 if (this.btn_zoom_out) |
365 if (this.btn_zoom_out) |
356 (this.zoom_layer.level <= this.source.zoom_min) ? this.btn_zoom_out.disable() : this.btn_zoom_out.enable(); |
366 (this.zoom_layer.level <= this.source.zoom_min) ? this.btn_zoom_out.disable() : this.btn_zoom_out.enable(); |
|
367 |
|
368 this.update_image_link(); |
357 }, |
369 }, |
358 |
370 |
359 // ensure that all tiles that are currently visible are loaded |
371 // ensure that all tiles that are currently visible are loaded |
360 update_tiles: function() { |
372 update_tiles: function() { |
361 // short names for some vars... |
373 // short names for some vars... |
412 touch_tile(t, col, row); |
424 touch_tile(t, col, row); |
413 |
425 |
414 } |
426 } |
415 } |
427 } |
416 } |
428 } |
|
429 |
|
430 this.update_scroll_ui(); |
|
431 }, |
|
432 |
|
433 // update scroll-dependant UI elements |
|
434 update_scroll_ui: function () { |
|
435 // update link-to-image |
|
436 this.update_image_link(); |
417 |
437 |
418 // update the link-to-this-page thing |
438 // update the link-to-this-page thing |
419 document.location.hash = "#" + (this.scroll_x + this.center_offset_x) + ":" + (this.scroll_y + this.center_offset_y) + ":" + this.zoom_layer.level; |
439 document.location.hash = "#" + (this.scroll_x + this.center_offset_x) + ":" + (this.scroll_y + this.center_offset_y) + ":" + this.zoom_layer.level; |
420 }, |
440 }, |
|
441 |
|
442 // update image link with size, zoom, pos |
|
443 update_image_link: function () { |
|
444 if (!this.image_link) |
|
445 return; |
|
446 |
|
447 this.image_link.href = this.source.build_image_url( |
|
448 this.scroll_x + this.center_offset_x, |
|
449 this.scroll_y + this.center_offset_y, |
|
450 this.view_width, this.view_height, |
|
451 this.zoom_layer.level |
|
452 ); |
|
453 |
|
454 this.image_link.innerHTML = this.view_width + "x" + this.view_height + "@" + this.zoom_layer.level; |
|
455 }, |
421 |
456 |
422 // do update_tiles after 100ms, unless we are called again |
457 // do update_tiles after 100ms, unless we are called again |
423 update_after_timeout: function () { |
458 update_after_timeout: function () { |
424 this._update_idle = false; |
459 this._update_idle = false; |
425 |
460 |