Mercurial > hg > digilib-old
annotate client/digitallibrary/greyskin/dllib.js @ 451:a6c83fa262b2
still somewhat experimental intermediary release
- Digilib is now an object with methods
- in theory we could now have more than one digilib instance on a page
- for compatibility one instance is created and wrapper methods exist
- setting a mark recenters the view for some (unrelated) reason
author | robcast |
---|---|
date | Mon, 23 Jan 2006 22:36:29 +0100 |
parents | 4255c09a8147 |
children | 6edd60cfa47f |
rev | line source |
---|---|
400 | 1 /* Copyright (C) 2003,2004 IT-Group MPIWG, WTWG Uni Bern and others |
2 | |
3 This program is free software; you can redistribute it and/or | |
4 modify it under the terms of the GNU General Public License | |
5 as published by the Free Software Foundation; either version 2 | |
6 of the License, or (at your option) any later version. | |
7 | |
8 This program is distributed in the hope that it will be useful, | |
9 but WITHOUT ANY WARRANTY; without even the implied warranty of | |
10 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
11 GNU General Public License for more details. | |
12 | |
13 You should have received a copy of the GNU General Public License | |
14 along with this program; if not, write to the Free Software | |
15 Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA | |
16 | |
17 Authors: | |
18 Christian Luginbuehl, 01.05.2003 (first version) | |
19 DW 24.03.2004 (Changed for digiLib in Zope) | |
20 Robert Casties, 8.11.2005 | |
411 | 21 Martin Raspe <hertzhaft@biblhertz.it>, 12.12.2005 |
400 | 22 |
23 ! Requires baselib.js ! | |
24 | |
25 */ | |
411 | 26 digilibVersion = "Digilib NG"; |
450 | 27 dllibVersion = "2.040"; |
28 | |
451 | 29 MAX_AREA = new Rectangle(0.0, 0.0, 1.0, 1.0); |
30 | |
31 // default inset (for scalerImg relativ to scalerDiv | |
32 INSET = 40; // because of scrollbars of main window and scaler [Firefox bug?] | |
33 | |
34 // mouse drag area that counts as one click | |
35 MIN_AREA_SIZE = 3 * 3 + 1; | |
36 | |
37 // standard zoom factor | |
38 ZOOMFACTOR = Math.sqrt(2); | |
39 | |
40 // bird's eye view dimensions | |
41 BIRD_MAXX = 100; | |
42 BIRD_MAXY = 100; | |
43 | |
44 // with of arrow bars | |
45 ARROW_WIDTH = 32; | |
46 | |
47 // with of calibration bar | |
48 CALIBRATION_WIDTH = 64; | |
49 | |
50 function identify() { | |
51 // used for identifying a digilib instance | |
52 // Relato uses that function - lugi | |
53 return digilibVersion; | |
54 } | |
55 | |
56 function createMarkDiv(index) { | |
57 var div = document.createElement("div"); | |
58 div.className = "mark"; | |
59 div.id = "mark" + index; | |
60 div.innerHTML = index + 1; | |
61 document.body.appendChild(div); | |
62 return div; | |
63 } | |
64 | |
65 function bestPicSize(elem, inset) { | |
66 // returns a Size with the best image size for the given element | |
67 if (! defined(inset)) { | |
68 inset = 25; | |
69 } | |
70 var ws = getWinSize(); | |
71 var es = getElementPosition(elem); | |
72 if (es) { | |
73 ws.width = ws.width - es.x - inset; | |
74 ws.height = ws.height - es.y - inset; | |
75 } | |
76 return ws; | |
77 } | |
78 | |
79 | |
450 | 80 /**************************************************** |
81 * digilib specific classes (must be defined first) | |
82 ****************************************************/ | |
83 | |
84 /* | |
85 * Marks class | |
86 */ | |
87 function Marks() { | |
88 return this; | |
89 } | |
90 // Marks inherits from Array | |
91 Marks.prototype = new Array(); | |
92 Marks.prototype.parse = function(query) { | |
93 this.length = 0; | |
94 if (query.indexOf(";") >= 0) { | |
95 var pa = query.split(";"); // old format with ";" | |
96 } else { | |
97 var pa = query.split(","); // new format | |
98 } | |
99 for (var i = 0; i < pa.length ; i++) { | |
100 var pos = pa[i].split("/"); | |
101 if (pos.length > 1) this.push(new Position(pos[0], pos[1])); | |
102 } | |
103 } | |
104 Marks.prototype.getAll = function() { | |
105 var ma = new Array(); | |
106 for (var i = 0; i < this.length; i++) { | |
107 ma.push(cropFloat(this[i].x) + "/" + cropFloat(this[i].y)); | |
108 } | |
109 return ma.join(","); | |
110 } | |
451 | 111 Marks.prototype.addEvent = function(evt, digilib) { |
450 | 112 // add a mark from a screen event |
451 | 113 if (!digilib) digilib = dl; |
114 var pos = digilib.trafo.invtransform(evtPosition(evt)); | |
450 | 115 this.push(pos); |
116 } | |
429
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
117 |
450 | 118 /* |
451 | 119 * DLParameters -- digilib parameter class |
450 | 120 */ |
121 function DLParameters() { | |
122 // flags for parameter sets | |
123 this.PARAM_FILE = 1; | |
124 this.PARAM_MODE = 2; | |
125 this.PARAM_DIM = 4; | |
126 this.PARAM_IMAGE = 8; | |
127 this.PARAM_DPI = 16; | |
128 this.PARAM_SIZE = 32; | |
129 this.PARAM_MARK = 64; | |
130 this.PARAM_PAGES = 128; | |
131 this.PARAM_ALL = 255; | |
132 /* request parameters */ | |
451 | 133 with (this) { |
450 | 134 // file |
135 define('fn', '', PARAM_FILE); | |
136 define('pn', '1', PARAM_FILE); | |
137 // mode | |
138 define('mo', '', PARAM_MODE); | |
139 // relative dimensions of zoomed image | |
140 define('wx', '0.0', PARAM_DIM); | |
141 define('wy', '0.0', PARAM_DIM); | |
142 define('ww', '1.0', PARAM_DIM); | |
143 define('wh', '1.0', PARAM_DIM); | |
144 // image manipulation | |
145 define('brgt', '0.0', PARAM_IMAGE); | |
146 define('cont', '0.0', PARAM_IMAGE); | |
147 define('rot', '0.0', PARAM_IMAGE); | |
148 define('rgba', '', PARAM_IMAGE); | |
149 define('rgbm', '', PARAM_IMAGE); | |
150 // resolution | |
151 define('ddpi', '', PARAM_DPI); | |
152 define('ddpix', '', PARAM_DPI); | |
153 define('ddpiy', '', PARAM_DPI); | |
154 // marks | |
155 define('mk', '', PARAM_MARK); | |
156 // pages total | |
157 define('pt', '0', PARAM_PAGES); | |
158 // size | |
159 define('ws', '1.0', PARAM_SIZE); | |
451 | 160 } |
161 return this; | |
162 } | |
163 DLParameters.prototype = new Parameters(); | |
164 // move the inherited getAll because we need it later | |
165 DLParameters.prototype._getAll = Parameters.prototype.getAll; | |
166 DLParameters.prototype.getAll = function(paDetail, moDetail, digilib) { | |
167 // get Flags and Marks first | |
168 if (!digilib) digilib = dl; | |
169 var mo = digilib.flags.getAll(moDetail); | |
170 this.set("mo", mo); | |
171 var mk = digilib.marks.getAll(); | |
172 this.set("mk", mk); | |
173 var ret = this._getAll(paDetail); | |
174 return ret; | |
175 } | |
176 | |
177 /* | |
178 * DLModes -- digilib flags class | |
179 */ | |
180 function DLFlags() { | |
181 // flags for mode sets | |
182 this.MODE_QUAL = 1; | |
183 this.MODE_SIZE = 2; | |
184 this.MODE_MIR = 4; | |
185 this.MODE_OTHER = 128; | |
186 this.MODE_ALL = 255; | |
450 | 187 /* mode flags */ |
451 | 188 with (this) { |
450 | 189 define('q0', MODE_QUAL); |
190 define('q1', MODE_QUAL); | |
191 define('q2', MODE_QUAL); | |
192 define('fit', MODE_SIZE); | |
193 define('clip', MODE_SIZE); | |
194 define('osize', MODE_SIZE); | |
195 define('vmir', MODE_MIR); | |
196 define('hmir', MODE_MIR); | |
197 } | |
451 | 198 return this; |
450 | 199 } |
451 | 200 // inherits from Flags |
201 DLFlags.prototype = new Flags(); | |
202 | |
416 | 203 |
451 | 204 /* |
205 * Digilib -- digilib base class | |
206 */ | |
207 function Digilib() { | |
208 if (!baseLibVersion) alert("ERROR: baselib.js not loaded!"); | |
209 this.trafo = null; | |
210 // page elements | |
211 this.scalerDiv = null; | |
212 this.scalerImg = null; | |
213 /* parse parameters */ | |
214 // put the query parameters (sans "?") in the parameters array | |
215 this.params = new DLParameters(); | |
216 this.params.parse(location.search.slice(1)); | |
217 // treat special parameters | |
218 this.area = this.parseArea(); | |
219 this.marks = new Marks(); | |
220 this.marks.parse(this.params.get("mk")); | |
221 this.flags = new DLFlags(); | |
222 this.flags.parse(this.params.get("mo")); | |
400 | 223 |
451 | 224 return this; |
225 } | |
226 Digilib.prototype.parseArea = function() { | |
227 // returns area Rectangle from current parameters | |
228 return new Rectangle( | |
229 this.params.get("wx"), | |
230 this.params.get("wy"), | |
231 this.params.get("ww"), | |
232 this.params.get("wh")); | |
233 } | |
234 Digilib.prototype.setParamFromArea = function(rect) { | |
235 // sets digilib wx etc. from rect | |
236 this.params.set("wx", cropFloat(rect.x)); | |
237 this.params.set("wy", cropFloat(rect.y)); | |
238 this.params.set("ww", cropFloat(rect.width)); | |
239 this.params.set("wh", cropFloat(rect.height)); | |
240 return true; | |
241 } | |
242 Digilib.prototype.parseTrafo = function(elem) { | |
400 | 243 // returns Transform from current dlArea and picsize |
244 var picsize = getElementRect(elem); | |
245 var trafo = new Transform(); | |
246 // subtract area offset and size | |
451 | 247 trafo.concat(getTranslation(new Position(-this.area.x, -this.area.y))); |
248 trafo.concat(getScale(new Size(1/this.area.width, 1/this.area.height))); | |
400 | 249 // scale to screen size |
250 trafo.concat(getScale(picsize)); | |
251 trafo.concat(getTranslation(picsize)); | |
416 | 252 // FIX ME: Robert, kannst Du mal nachsehen, ob das folgende tut, was es soll? |
450 | 253 // oder gibt es dafuer neuen Code? -- ROC: Bisher funktioniert es nicht! |
400 | 254 // rotate |
451 | 255 //var rot = getRotation(- dl.params.get("rot"), new Position(0.5*picsize.width, 0.5*picsize.height)); |
450 | 256 //trafo.concat(rot); |
400 | 257 // mirror |
450 | 258 //if (hasFlag("hmir")) trafo.m00 = - trafo.m00; // ?? |
259 //if (hasFlag("vmir")) trafo.m11 = - trafo.m11; // ?? | |
400 | 260 return trafo; |
261 } | |
451 | 262 Digilib.prototype.setDLParam = function(e, s, relative) { |
416 | 263 // sets parameter based on HTML event |
264 var nam; | |
400 | 265 var val; |
266 if (s.type && (s.type == "select-one")) { | |
267 nam = s.name; | |
268 val = s.options[s.selectedIndex].value; | |
269 } else if (s.name && s.value) { | |
270 nam = s.name; | |
271 val = s.value; | |
272 } | |
273 if (nam && val) { | |
451 | 274 dl.params.set(nam, val, relative); |
400 | 275 display(); |
276 } else { | |
277 alert("ERROR: unable to process event!"); | |
278 } | |
279 return true; | |
280 } | |
451 | 281 Digilib.prototype.onLoad = function() { |
282 // initialize digilib; called by body.onload | |
283 this.scalerDiv = getElement("scaler", true); | |
284 this.scalerImg = getElement("pic", true); | |
285 if (this.scalerImg == null && this.scalerDiv) { | |
286 // in N4 pic is in the scaler layer | |
287 this.scalerImg = this.scalerDiv.document.images[0]; | |
288 } | |
289 if ((!this.scalerImg)||(!this.scalerDiv)) { | |
290 alert("Sorry, digilib doesn't work here!"); | |
291 return false; | |
292 } | |
293 this.setScalerImage(); // setzt auch onImgLoad | |
294 this.loadBirdImage(); // l?dt das Bird's Eye Bild | |
450 | 295 } |
451 | 296 Digilib.prototype.setScalerImage = function(detail) { |
450 | 297 // set the scaler image source (needs the browser size) |
451 | 298 var picsize = bestPicSize(this.scalerDiv, 50); |
416 | 299 var src = "../servlet/Scaler?" |
451 | 300 + this.params.getAll(this.params.PARAM_ALL & ~(this.params.PARAM_MARK | this.params.PARAM_PAGES)) |
416 | 301 + "&dw=" + picsize.width |
302 + "&dh=" + picsize.height; | |
303 // debug(src); | |
451 | 304 this.scalerImg.onload = onImgLoad; |
305 this.scalerImg.src = src; | |
306 | |
307 var digilib = this; | |
308 // this is a local callback function that can use the current scope | |
309 function onImgLoad() { | |
310 // make sure the image is loaded so we know its size | |
311 if (defined(digilib.scalerImg.complete) && !digilib.scalerImg.complete && !digilib.browserType.isN4 ) { | |
312 alert("ERROR: the image seems not to be complete!?"); | |
313 } | |
314 digilib.trafo = digilib.parseTrafo(digilib.scalerImg); | |
315 // display marks | |
316 digilib.renderMarks(); | |
317 digilib.showBirdDiv(isBirdDivVisible); | |
318 digilib.showArrows(); // show arrow overlays for zoom navigation | |
319 digilib.moveCenter(true); // click to move point to center | |
320 // new Slider("sizes", 1, 5, 2); | |
321 focus(); | |
322 } | |
450 | 323 } |
451 | 324 Digilib.prototype.display = function(detail, moDetail) { |
416 | 325 // redisplay the page |
451 | 326 var queryString = this.params.getAll(detail, moDetail); |
450 | 327 location.href |
328 = location.protocol + "//" | |
329 + location.host | |
330 + location.pathname | |
331 + "?" + queryString; | |
332 } | |
451 | 333 Digilib.prototype.renderMarks = function() { |
416 | 334 // make sure the image is loaded so we know its size |
451 | 335 if (!this.trafo) { |
450 | 336 alert("ERROR: cannot render marks!"); |
337 return; | |
338 } | |
416 | 339 // debugProps(dlArea, "dlArea"); |
451 | 340 for (var i = 0; i < this.marks.length; i++) { |
341 var div = getElement("mark" + i, true) || createMarkDiv(i); | |
342 var mark = this.marks[i]; | |
343 // debugProps(mark, "mark"); | |
344 if (this.area.containsPosition(mark)) { | |
345 var mpos = this.trafo.transform(mark); | |
346 // debugProps(mark, "mpos"); | |
450 | 347 // suboptimal to place -5 pixels and not half size of mark-image |
348 // better not hide the marked spot (MR) | |
349 // mpos.x = mpos.x -5; | |
350 // mpos.y = mpos.y -5; | |
351 moveElement(div, mpos); | |
352 showElement(div, true); | |
353 } else { | |
354 // hide the other marks | |
355 showElement(div, false); | |
356 } | |
400 | 357 } |
450 | 358 } |
400 | 359 |
451 | 360 /* ********************************************** |
361 * interactive digilib functions | |
362 * ******************************************** */ | |
400 | 363 |
451 | 364 Digilib.prototype.setMark = function(reload) { |
365 // add a mark where clicked | |
366 window.focus(); | |
367 this.moveCenter(false); | |
368 // start event capturing | |
369 registerEvent("mousedown", this.scalerDiv, markEvent); | |
370 | |
371 // our own reference to this for the local function | |
372 var digilib = this; | |
373 | |
416 | 374 function markEvent(evt) { |
375 // event handler adding a new mark | |
451 | 376 unregisterEvent("mousedown", digilib.scalerDiv, markEvent); |
377 digilib.marks.addEvent(evt); | |
416 | 378 if ( defined(reload) && !reload ) { |
379 // don't redisplay | |
451 | 380 digilib.renderMarks(); |
381 return stopEvent(evt); | |
450 | 382 } |
451 | 383 digilib.display(); |
434 | 384 return stopEvent(evt); |
450 | 385 } |
416 | 386 |
450 | 387 } |
400 | 388 |
451 | 389 Digilib.prototype.removeMark = function(reload) { |
400 | 390 // remove the last mark |
451 | 391 this.marks.pop(); |
400 | 392 if (defined(reload)&&(!reload)) { |
393 // don't redisplay | |
451 | 394 this.renderMarks(); |
400 | 395 return; |
396 } | |
451 | 397 this.display(); |
400 | 398 } |
399 | |
451 | 400 Digilib.prototype.zoomArea = function() { |
416 | 401 var pt1, pt2; |
402 var zoomdiv = getElement("zoom"); | |
403 var overlay = getElement("overlay"); | |
404 // use overlay div to avoid <img> mousemove problems | |
451 | 405 var picRect = getElementRect(this.scalerImg); |
416 | 406 // FIX ME: is there a way to query the border width from CSS info? |
407 // rect.x -= 2; // account for overlay borders | |
408 // rect.y -= 2; | |
434 | 409 moveElement(overlay, picRect); |
416 | 410 showElement(overlay, true); |
411 // start event capturing | |
412 registerEvent("mousedown", overlay, zoomStart); | |
451 | 413 registerEvent("mousedown", this.scalerImg, zoomStart); |
416 | 414 window.focus(); |
400 | 415 |
451 | 416 // our own reference to this for the local function |
417 var digilib = this; | |
418 | |
411 | 419 // mousedown handler: start moving |
416 | 420 function zoomStart(evt) { |
421 pt1 = evtPosition(evt); | |
422 unregisterEvent("mousedown", overlay, zoomStart); | |
451 | 423 unregisterEvent("mousedown", digilib.scalerImg, zoomStart); |
416 | 424 // setup and show zoom div |
425 moveElement(zoomdiv, Rectangle(pt1.x, pt1.y, 0, 0)); | |
426 showElement(zoomdiv, true); | |
434 | 427 // register events |
428 registerEvent("mousemove", document, zoomMove); | |
429 registerEvent("mouseup", document, zoomEnd); | |
416 | 430 return stopEvent(evt); |
450 | 431 } |
416 | 432 |
411 | 433 // mouseup handler: end moving |
416 | 434 function zoomEnd(evt) { |
435 pt2 = evtPosition(evt); | |
436 // assume a click if the area is too small (up to 3 x 3 pixel) | |
450 | 437 var clickRect = new Rectangle(pt1, pt2); |
438 clickRect.normalize(); | |
434 | 439 if (clickRect.getArea() <= MIN_AREA_SIZE) return stopEvent(evt); |
416 | 440 // hide zoom div |
441 showElement(zoomdiv, false); | |
442 showElement(overlay, false); | |
434 | 443 // unregister events |
444 unregisterEvent("mousemove", document, zoomMove); | |
445 unregisterEvent("mouseup", document, zoomMove); | |
450 | 446 // clip and transform |
434 | 447 clickRect.clipTo(picRect); |
451 | 448 var area = digilib.trafo.invtransform(clickRect); |
449 digilib.setParamFromArea(area); | |
416 | 450 // zoomed is always fit |
451 | 451 digilib.params.set("ws", 1); |
452 digilib.display(); | |
416 | 453 return stopEvent(evt); |
450 | 454 } |
416 | 455 |
411 | 456 // mouse move handler |
416 | 457 function zoomMove(evt) { |
458 pt2 = evtPosition(evt); | |
450 | 459 var rect = new Rectangle(pt1, pt2); |
460 rect.normalize(); | |
434 | 461 rect.clipTo(picRect); |
416 | 462 // update zoom div |
434 | 463 moveElement(zoomdiv, rect); |
416 | 464 return stopEvent(evt); |
450 | 465 } |
400 | 466 } |
467 | |
451 | 468 Digilib.prototype.zoomBy = function(factor) { |
400 | 469 // zooms by the given factor |
451 | 470 var newarea = this.area.copy(); |
400 | 471 newarea.width /= factor; |
472 newarea.height /= factor; | |
451 | 473 newarea.x -= 0.5 * (newarea.width - this.area.width); |
474 newarea.y -= 0.5 * (newarea.height - this.area.height); | |
475 newarea = MAX_AREA.fit(newarea); | |
476 this.setParamFromArea(newarea); | |
477 this.display(); | |
400 | 478 } |
479 | |
480 | |
451 | 481 Digilib.prototype.zoomFullpage = function() { |
400 | 482 // zooms out to show the whole image |
451 | 483 this.params.set("wx", 0.0); |
484 this.params.set("wy", 0.0); | |
485 this.params.set("ww", 1.0); | |
486 this.params.set("wh", 1.0); | |
487 this.display(); | |
400 | 488 } |
489 | |
490 | |
451 | 491 Digilib.prototype.moveCenter = function(on) { |
400 | 492 // move visible area so that it's centered around the clicked point |
451 | 493 if (this.isFullArea()) return; // nothing to do |
434 | 494 // starting event capture |
451 | 495 if (on) registerEvent("mousedown", this.scalerImg, moveCenterEvent); |
496 else unregisterEvent("mousedown", this.scalerImg, moveCenterEvent); | |
400 | 497 window.focus(); |
451 | 498 |
499 // our own reference to this for the local function | |
500 var digilib = this; | |
501 | |
502 function moveCenterEvent(evt) { | |
503 // move to handler | |
504 var pt = digilib.trafo.invtransform(evtPosition(evt)); | |
505 var newarea = digilib.area.copy(); | |
506 newarea.setCenter(pt); | |
507 newarea.stayInside(MAX_AREA); | |
508 // newarea = dlMaxArea.fit(newarea); | |
509 // debugProps(newarea, "newarea"); | |
510 // debugProps(dlArea, "dlArea"); | |
511 if (newarea.equals(digilib.area)) return; // keep event handler | |
512 unregisterEvent("mousedown", digilib.scalerImg, moveCenterEvent); | |
513 // set parameters | |
514 digilib.setParamFromArea(newarea); | |
515 digilib.display(); | |
516 } | |
434 | 517 } |
400 | 518 |
451 | 519 Digilib.prototype.isFullArea = function(area) { |
520 if (!area) area = this.area; | |
443 | 521 // pixel by pixel is not always full area |
522 return (area.width == 1.0) && (area.height == 1.0) && ! hasFlag("clip"); | |
434 | 523 } |
416 | 524 |
451 | 525 Digilib.prototype.canMove = function(movx, movy) { |
526 if (this.isFullArea()) return false; | |
527 var x2 = this.area.x + this.area.width; | |
528 var y2 = this.area.y + this.area.height; | |
429
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
529 // debugProps(dlArea); |
451 | 530 return ((movx < 0) && (this.area.x > 0)) |
434 | 531 || ((movx > 0) && (x2 < 1.0)) |
451 | 532 || ((movy < 0) && (this.area.y > 0)) |
434 | 533 || ((movy > 0) && (y2 < 1.0)) |
534 } | |
416 | 535 |
451 | 536 Digilib.prototype.moveBy = function(movx, movy) { |
400 | 537 // move visible area by movx and movy (in units of ww, wh) |
451 | 538 if (!this.canMove(movx, movy)) return; // nothing to do |
539 var newarea = this.area.copy(); | |
540 newarea.x += parseFloat(movx)*this.area.width; | |
541 newarea.y += parseFloat(movy)*this.area.height; | |
542 newarea = MAX_AREA.fit(newarea); | |
400 | 543 // set parameters |
451 | 544 this.setParamFromArea(newarea); |
545 this.display(); | |
400 | 546 } |
547 | |
451 | 548 Digilib.prototype.getRef = function(baseUrl) { |
400 | 549 // returns a reference to the current digilib set |
429
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
550 if (!baseUrl) baseUrl |
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
551 = location.protocol |
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
552 + "//" |
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
553 + location.host |
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
554 + location.pathname; |
400 | 555 var hyperlinkRef = baseUrl; |
451 | 556 with (this.params) { |
557 var ps = getAll(PARAM_ALL & ~(PARAM_DPI | PARAM_PAGES)); // all without ddpi, pt | |
558 } | |
559 if (ps.length > 0) hyperlinkRef += "?" + ps; | |
411 | 560 return hyperlinkRef; |
450 | 561 } |
400 | 562 |
451 | 563 Digilib.prototype.getRefWin = function(type, msg) { |
400 | 564 // shows an alert with a reference to the current digilib set |
411 | 565 if (! msg) msg = "URL reference to the current view"; |
451 | 566 prompt(msg, this.getRef()); |
450 | 567 } |
400 | 568 |
451 | 569 Digilib.prototype.getQuality = function() { |
411 | 570 // returns the current q setting |
400 | 571 for (var i = 0; i < 3; i++) { |
451 | 572 if (this.flags.get("q"+i)) return i; |
450 | 573 } |
411 | 574 return 1 |
450 | 575 } |
400 | 576 |
451 | 577 Digilib.prototype.setQuality = function(qual) { |
400 | 578 // set the image quality |
450 | 579 if ((qual < 0)||(qual > 2)) return alert("Quality setting not supported"); |
451 | 580 for (var i = 0; i < 3; i++) this.flags.reset("q" + i); |
581 this.flags.set("q" + qual); | |
582 this.display(); | |
411 | 583 } |
400 | 584 |
451 | 585 Digilib.prototype.setQualityWin = function(msg) { |
416 | 586 // dialog for setting quality |
587 if (! msg) msg = "Quality (0..2)"; | |
451 | 588 var q = this.getQuality(); |
416 | 589 var newq = window.prompt(msg, q); |
451 | 590 if (newq) this.setQuality(newq); |
450 | 591 } |
400 | 592 |
451 | 593 Digilib.prototype.mirror = function(dir) { |
400 | 594 // mirror the image horizontally or vertically |
450 | 595 if (dir == "h") { |
451 | 596 this.flags.toggle("hmir"); |
450 | 597 } else { |
451 | 598 this.flags.toggle("vmir"); |
450 | 599 } |
451 | 600 this.display(); |
400 | 601 } |
602 | |
451 | 603 Digilib.prototype.gotoPage = function(gopage, keep) { |
416 | 604 // goto given page nr (+/-: relative) |
451 | 605 var oldpn = parseInt(this.params.get("pn")); |
606 // set with relative=true uses the sign | |
607 this.params.set("pn", gopage, true); | |
608 // now check the outcome | |
609 var pn = parseInt(this.params.get("pn")); | |
416 | 610 if (pn < 1) { |
611 alert("No such page! (Page number too low)"); | |
451 | 612 this.params.set("pn", oldpn); |
416 | 613 return; |
614 } | |
451 | 615 if (this.params.isSet("pt")) { |
616 pt = parseInt(this.params.get("pt")) | |
416 | 617 if (pn > pt) { |
618 alert("No such page! (Page number too high)"); | |
451 | 619 this.params.set("pn", oldpn); |
416 | 620 return; |
621 } | |
622 } | |
623 if (keep) { | |
451 | 624 this.display(this.params.PARAM_ALL & ~this.params.PARAM_MARK); // all, no mark |
416 | 625 } else { |
451 | 626 this.display(this.params.PARAM_FILE | this.params.PARAM_MODE | this.params.PARAM_PAGES, this.params.MODE_QUAL | this.params.MODE_OTHER); // fn, pn, ws, mo + pt |
416 | 627 } |
400 | 628 } |
629 | |
451 | 630 Digilib.prototype.gotoPageWin = function() { |
416 | 631 // dialog to ask for new page nr |
451 | 632 var pn = this.params.get("pn"); |
416 | 633 var gopage = window.prompt("Go to page", pn); |
451 | 634 if (gopage) this.gotoPage(gopage); |
635 } | |
400 | 636 |
451 | 637 Digilib.prototype.setParamWin = function(param, text, relative) { |
416 | 638 // dialog to ask for new parameter value |
451 | 639 var val = this.params.get(param); |
416 | 640 var newval = window.prompt(text, val); |
641 if (newval) { | |
451 | 642 this.params.set(param, newval, relative); |
643 this.display(); | |
416 | 644 } |
400 | 645 } |
646 | |
451 | 647 Digilib.prototype.showOptions = function(show) { |
416 | 648 // show or hide option div |
649 var elem = getElement("dloptions"); | |
650 showElement(elem, show); | |
651 // FIX ME: get rid of the dotted line around the buttons when focused | |
652 } | |
411 | 653 |
451 | 654 Digilib.prototype.showAboutDiv = function(show) { |
416 | 655 // show or hide "about" div |
656 var elem = getElement("about"); | |
657 if (elem == null) { | |
443 | 658 if (show) alert("About Digilib - dialog missing in HTML code!" |
416 | 659 + "\nDigilib Version: " + digilibVersion |
434 | 660 + "\JSP Version: " + jspVersion |
416 | 661 + "\ndlLib Version: " + dllibVersion |
662 + "\nbaseLib Version: " + baseLibVersion); | |
663 return; | |
664 } | |
443 | 665 if (show) { |
666 getElement("digilib-version").innerHTML = "Digilib Version: " + digilibVersion; | |
667 getElement("jsp-version").innerHTML = "JSP Version: " + jspVersion; | |
668 getElement("baselib-version").innerHTML = "baseLib Version: " + baseLibVersion; | |
669 getElement("dllib-version").innerHTML = "dlLib Version: " + dllibVersion; | |
670 var aboutRect = getElementRect(elem); | |
671 aboutRect.setCenter(getWinRect().getCenter()); | |
672 moveElement(elem, aboutRect); | |
673 } | |
416 | 674 showElement(elem, show); |
675 } | |
676 | |
451 | 677 Digilib.prototype.loadBirdImage = function() { |
416 | 678 var img = getElement("bird-image"); |
679 var src = "../servlet/Scaler?" | |
451 | 680 + this.params.getAll(this.params.PARAM_FILE) |
416 | 681 + "&dw=" + BIRD_MAXX |
682 + "&dh=" + BIRD_MAXY; | |
683 img.src = src; | |
451 | 684 } |
416 | 685 |
451 | 686 Digilib.prototype.showBirdDiv = function(show) { |
416 | 687 // show or hide "bird's eye" div |
688 var startPos; // anchor for dragging | |
689 var newRect; // position after drag | |
690 var birdImg = getElement("bird-image"); | |
434 | 691 var birdArea = getElement("bird-area"); |
692 var overlay = getElement("overlay"); | |
416 | 693 showElement(birdImg, show); |
434 | 694 // dont show selector if area has full size |
451 | 695 if (!show || this.isFullArea()) { |
416 | 696 // hide area |
697 showElement(birdArea, false); | |
434 | 698 showElement(overlay, false); |
416 | 699 return; |
451 | 700 }; |
416 | 701 var birdImgRect = getElementRect(birdImg); |
451 | 702 var area = this.area; |
416 | 703 // scale area down to img size |
704 var birdAreaRect = new Rectangle( | |
705 // what about borders ?? | |
706 birdImgRect.x + birdImgRect.width * area.x, | |
707 birdImgRect.y + birdImgRect.height * area.y, | |
708 birdImgRect.width * area.width, | |
709 birdImgRect.height * area.height | |
710 ); | |
711 moveElement(birdArea, birdAreaRect); | |
434 | 712 showElement(birdArea, true); |
713 moveElement(overlay, birdImgRect); | |
714 showElement(overlay, true); | |
715 registerEvent("mousedown", overlay, birdAreaStartDrag); | |
716 registerEvent("mousedown", birdImg, birdAreaStartDrag); | |
416 | 717 |
451 | 718 // our own reference to this for local functions |
719 var digilib = this; | |
720 | |
416 | 721 function birdAreaStartDrag(evt) { |
722 // mousedown handler: start drag | |
723 startPos = evtPosition(evt); | |
434 | 724 unregisterEvent("mousedown", overlay, birdAreaStartDrag); |
725 unregisterEvent("mousedown", birdImg, birdAreaStartDrag); | |
726 registerEvent("mousemove", document, birdAreaMove); | |
727 registerEvent("mouseup", document, birdAreaEndDrag); | |
416 | 728 // debugProps(getElementRect(bird)) |
729 return stopEvent(evt); | |
451 | 730 } |
416 | 731 |
732 function birdAreaMove(evt) { | |
733 // mousemove handler: drag | |
734 var pos = evtPosition(evt); | |
735 var dx = pos.x - startPos.x; | |
736 var dy = pos.y - startPos.y; | |
737 // move birdArea div, keeping size | |
738 newRect = new Rectangle( | |
739 birdAreaRect.x + dx, | |
740 birdAreaRect.y + dy, | |
741 birdAreaRect.width, | |
742 birdAreaRect.height); | |
743 // stay within image | |
744 newRect.stayInside(birdImgRect); | |
745 moveElement(birdArea, newRect); | |
746 showElement(birdArea, true); | |
747 return stopEvent(evt); | |
451 | 748 } |
416 | 749 |
750 function birdAreaEndDrag(evt) { | |
751 // mouseup handler: reload page | |
434 | 752 unregisterEvent("mousemove", document, birdAreaMove); |
753 unregisterEvent("mouseup", document, birdAreaEndDrag); | |
754 showElement(overlay, false); | |
755 if (newRect == null) { // no movement happened | |
756 startPos = birdAreaRect.getCenter(); | |
757 birdAreaMove(evt); // set center to click position | |
758 } | |
451 | 759 digilib.params.set("wx", cropFloat((newRect.x - birdImgRect.x) / birdImgRect.width)); |
760 digilib.params.set("wy", cropFloat((newRect.y - birdImgRect.y) / birdImgRect.height)); | |
416 | 761 // zoomed is always fit |
451 | 762 digilib.params.set("ws", 1); |
763 digilib.display(); | |
416 | 764 return stopEvent(evt); |
765 } | |
451 | 766 } |
416 | 767 |
451 | 768 Digilib.prototype.showArrow = function(name, rect, show) { |
429
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
769 var arrow = getElement(name); |
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
770 moveElement(arrow, rect); |
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
771 showElement(arrow, show); |
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
772 } |
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
773 |
451 | 774 Digilib.prototype.showArrows = function() { |
443 | 775 // show the 4 arrow bars on top of scaler img according to current dlArea |
451 | 776 if (defined(this.scalerImg.complete) && !this.scalerImg.complete && !browserType.isN4 ) { |
777 alert("ERROR: scaler img not complete in showArrows!"); | |
429
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
778 } |
451 | 779 var r = getElementRect(this.scalerImg); |
780 this.showArrow('up', | |
429
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
781 new Rectangle(r.x, r.y, r.width, ARROW_WIDTH), |
451 | 782 this.canMove(0, -1) |
429
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
783 ); |
451 | 784 this.showArrow('down', |
429
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
785 new Rectangle(r.x, r.y + r.height - ARROW_WIDTH, r.width, ARROW_WIDTH), |
451 | 786 this.canMove(0, 1) |
429
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
787 ); |
451 | 788 this.showArrow('left', |
429
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
789 new Rectangle(r.x, r.y, ARROW_WIDTH, r.height), |
451 | 790 this.canMove(-1, 0) |
429
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
791 ); |
451 | 792 this.showArrow('right', |
429
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
793 new Rectangle(r.x + r.width - ARROW_WIDTH, r.y, ARROW_WIDTH, r.height), |
451 | 794 this.canMove(1, 0) |
429
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
795 ); |
813a155d1338
added showArrows() function (navigation arrows overlay)
hertzhaft
parents:
416
diff
changeset
|
796 } |
416 | 797 |
451 | 798 Digilib.prototype.calibrate = function(direction) { |
434 | 799 // calibrate screen |
800 var startPos; // anchor for dragging | |
801 var newRect; // position after drag | |
802 var calDiv = getElement("calibration"); | |
439 | 803 var pixel = calDiv.getElementsByTagName("p")[0]; |
434 | 804 var overlay = getElement("overlay"); |
805 moveElement(overlay, getWinRect()); | |
806 showElement(overlay, true); | |
807 var xDir = direction == "x"; | |
808 moveCenter(false); | |
809 registerEvent("mousedown", document, calibrationStartDrag); | |
810 | |
811 function calibrationStartDrag(evt) { | |
812 // mousedown handler: start drag | |
813 startPos = evtPosition(evt); | |
814 unregisterEvent("mousedown", document, calibrationStartDrag); | |
815 registerEvent("mousemove", document, calibrationMove); | |
816 registerEvent("mouseup", document, calibrationEndDrag); | |
817 newRect = new Rectangle( | |
818 startPos.x, | |
819 startPos.y, | |
820 xDir ? 1 : CALIBRATION_WIDTH, | |
821 xDir ? CALIBRATION_WIDTH : 1 | |
822 ); | |
823 moveElement(calDiv, newRect); | |
824 showElement(calDiv, true); | |
825 // debugProps(getElementRect(bird)) | |
826 return stopEvent(evt); | |
827 } | |
828 | |
829 function calibrationMove(evt) { | |
830 // mousemove handler: drag | |
831 var pos = evtPosition(evt); | |
832 var dx = (xDir) ? pos.x - startPos.x : CALIBRATION_WIDTH; | |
833 var dy = (xDir) ? CALIBRATION_WIDTH : pos.y - startPos.y; | |
834 // move birdArea div, keeping size | |
835 newRect = new Rectangle(startPos.x, startPos.y, dx, dy); | |
439 | 836 pixel.innerHTML = (xDir ? dx : dy) + " px"; |
434 | 837 moveElement(calDiv, newRect); |
838 showElement(calDiv, true); | |
839 return stopEvent(evt); | |
840 } | |
841 | |
842 function calibrationEndDrag(evt) { | |
843 // mouseup handler: calibrate | |
844 unregisterEvent("mousemove", document, calibrationMove); | |
845 unregisterEvent("mouseup", document, calibrationEndDrag); | |
439 | 846 if (xDir) { |
847 var val = newRect.width * 0.254; // ratio dm/inch | |
848 cookie.add("ddpi", val); | |
849 cookie.add("ddpix", val); | |
850 } else { | |
851 var val = newRect.height * 0.254; | |
852 cookie.add("ddpiy", val); | |
853 } | |
434 | 854 showElement(calDiv, false); |
855 showElement(overlay, false); | |
856 moveCenter(true); | |
857 return stopEvent(evt); | |
858 } | |
859 } | |
860 | |
451 | 861 Digilib.prototype.originalSize = function(on) { |
443 | 862 // set osize flag, needs calibrated screen |
863 if (on) { | |
864 var dpi = cookie.get("ddpi"); | |
865 if (dpi == null) { | |
866 alert("Screen has not yet been calibrated - using default value of 72 dpi"); | |
867 dpi = 72; | |
868 } | |
451 | 869 this.params.set("ddpi", dpi); |
870 this.flags.set("osize"); | |
871 this.display(); | |
872 } else { | |
873 this.flags.reset("osize"); | |
874 } | |
439 | 875 } |
451 | 876 |
877 Digilib.prototype.pixelByPixel = function(on) { | |
443 | 878 // sets clip flag |
879 if (on) { | |
451 | 880 this.flags.set("clip"); |
881 this.display(); | |
443 | 882 } |
451 | 883 else this.flags.reset("clip"); |
439 | 884 } |
440 | 885 |
451 | 886 Digilib.prototype.pageWidth = function() { |
887 var divSize = getElementSize(this.scalerDiv); | |
445 | 888 divSize.width -= INSET; // allow for scrollbars [Firefox bug?] |
451 | 889 var imgSize = getElementSize(this.scalerImg); |
445 | 890 if (imgSize.width < divSize.width) { |
451 | 891 this.params.set("ws", cropFloat(divSize.width / imgSize.width)); |
892 this.display(this.params.PARAM_ALL & ~this.params.PARAM_DIM); // no zoom | |
445 | 893 }; |
894 // TODO: how to calculate correct width if zoom is on? (plus size?) | |
895 } | |
896 | |
451 | 897 Digilib.prototype.resize = function(factor) { |
898 this.params.set("ws", factor); | |
899 this.showSizeMenu(false); | |
900 this.display(); | |
440 | 901 } |
902 | |
451 | 903 Digilib.prototype.showSizeMenu = function(show) { |
440 | 904 var menu = getElement("sizes"); |
443 | 905 if (show) { |
906 // align menu with button | |
907 var buttonPos = getElementPosition(getElement("size")); | |
908 moveElement(menu, new Position(buttonPos.x - 50, buttonPos.y)); | |
909 } | |
910 showElement(menu, show); | |
440 | 911 } |
451 | 912 |
913 | |
914 /******************************** | |
915 * global variables | |
916 ********************************/ | |
917 | |
918 var dl = new Digilib(); | |
919 | |
920 /* old parameter function compatibility stuff */ | |
921 function newParameter(a,b,c) {return dl.params.define(a,b,c)}; | |
922 function resetParameter(a) {return dl.params.reset(a)}; | |
923 function deleteParameter(a) {return dl.params.remove(a)}; | |
924 function getParameter(a) {return dl.params.get(a)}; | |
925 function setParameter(a,b,c) {return dl.params.set(a,b,c)}; | |
926 function hasParameter(a) {return dl.params.isSet(a)}; | |
927 function getAllParameters(a) {return dl.params.getAll(a)}; | |
928 getQueryString = getAllParameters; | |
929 function parseParameters(a) {return dl.params.parse(a)}; | |
930 function getAllMarks() {return dl.marks.getAll()}; | |
931 getMarksQueryString = getAllMarks; | |
932 function addMark(evt) {return dl.marks.addEvent(evt)}; | |
933 function deleteMark() {return dl.marks.pop()}; | |
934 function deleteAllMarks() {return dl.marks = new Marks()}; | |
935 function hasFlag(mode) {return dl.flags.get(mode)}; | |
936 function addFlag(mode) {return dl.flags.set(mode)}; | |
937 function removeFlag(mode) {return dl.flags.reset(mode)}; | |
938 function toggleFlag(mode) {return dl.flags.toggle(mode)}; | |
939 function getAllFlags() {return dl.flags.getAll()}; | |
940 /* old digilib function compatibility */ | |
941 function setDLParam(e, s, relative) {dl.setDLParam(e, s, relative)}; | |
942 function display(detail, moDetail) {dl.display(detail, moDetail)}; | |
943 function setMark(reload) {dl.setMark(reload)}; | |
944 function removeMark(reload) {dl.removeMark(reload)}; | |
945 function zoomArea() {dl.zoomArea()}; | |
946 function zoomBy(factor) {dl.zoomBy(factor)}; | |
947 function zoomFullpage() {dl.zoomFullpage()}; | |
948 function moveCenter(on) {dl.moveCenter(on)}; | |
949 function isFullArea(area) {dl.isFullArea(area)}; | |
950 function canMove(movx, movy) {dl.canMove(movx, movy)}; | |
951 function moveBy(movx, movy) {dl.moveBy(movx, movy)}; | |
952 function getRef(baseURL) {dl.getRef(baseURL)}; | |
953 function getRefWin(type, msg) {dl.getRefWin(type, msg)}; | |
954 function getQuality() {dl.getQuality()}; | |
955 function setQuality(qual) {dl.setQuality(qual)}; | |
956 function setQualityWin(msg) {dl.setQualityWin(msg)}; | |
957 function mirror(dir) {dl.mirror(dir)}; | |
958 function gotoPage(gopage, keep) {dl.gotoPage(gopage, keep)}; | |
959 function gotoPageWin() {dl.gotoPageWin()}; | |
960 function setParamWin(param, text, relative) {dl.setParamWin(param, text, relative)}; | |
961 function showOptions(show) {dl.showOptions(show)}; | |
962 function showBirdDiv(show) {dl.showBirdDiv(show)}; | |
963 function showAboutDiv(show) {dl.showAboutDiv(show)}; | |
964 function calibrate(direction) {dl.calibrate(direction)}; | |
965 function originalSize(on) {dl.originalSize(on)}; | |
966 function pixelByPixel(on) {dl.pixelByPixel(on)}; | |
967 function pageWidth() {dl.pageWidth()}; | |
968 function resize(factor) {dl.resize(factor)}; | |
969 function showSizeMenu(show) {dl.showSizeMenu(show)}; | |
970 | |
971 | |
434 | 972 // :tabSize=4:indentSize=4:noTabs=true: |
973 |