Mercurial > hg > digilib
comparison client/digitallibrary/navigation_o6.js @ 39:57874b52c2fc
opera support done, bugfixes
author | luginbue |
---|---|
date | Tue, 21 May 2002 02:29:41 +0200 |
parents | |
children | 866e798e2bef |
comparison
equal
deleted
inserted
replaced
38:44f653ae5df5 | 39:57874b52c2fc |
---|---|
1 // this global variable has to be initialised before the frist use of the functions below | |
2 // to fill in the attributes you can use the function init provided below | |
3 // - array with all attributes | |
4 var att = new Array(); | |
5 | |
6 // fill in the values of the "att"-array | |
7 function init(fn, pn, ws, mo, mk, wx, wy, ww, wh) { | |
8 | |
9 // debug window to check the parameters passed | |
10 //alert ("DEBUG message (parameters in init):\n\npu = " + pu + "\npn = " + pn + "\nws = " + ws + "\nmo = " + mo + "\nmk = " + mk + "\nwx = " + wx + "\nwy = " + wy + "\nww = " + ww + "\nwh = " + wh); | |
11 | |
12 // attaching the values to the att-array | |
13 att[0] = fn; | |
14 att[1] = parseInt(pn); | |
15 att[2] = parseFloat(ws); | |
16 att[3] = mo; | |
17 att[4] = mk; | |
18 att[5] = parseFloat(wx); | |
19 att[6] = parseFloat(wy); | |
20 att[7] = parseFloat(ww); | |
21 att[8] = parseFloat(wh); | |
22 | |
23 // compatablility issue | |
24 if (att[3].indexOf("f") > -1) { | |
25 att[3] = "fit"; | |
26 } | |
27 | |
28 // converts the old mark format (0-1000) to new format(0.0 - 1.0) | |
29 // could even be useless now | |
30 if (att[4] != "0/0") { | |
31 var tmp = att[4].split(";"); | |
32 | |
33 att[4] = ""; | |
34 | |
35 for (i = 0; i < tmp.length; i++) { | |
36 tmp[i] = tmp[i].split("/"); | |
37 | |
38 if (tmp[i][0] > 1 && tmp[i][1] > 1) { | |
39 tmp[i][0] /= 1000; | |
40 tmp[i][1] /= 1000; | |
41 } | |
42 | |
43 att[4] += tmp[i][0] + "/" + tmp[i][1] + ";"; | |
44 } | |
45 att[4] = att[4].slice(0, -1); | |
46 } | |
47 | |
48 // initialisation stuff | |
49 // ==================== | |
50 | |
51 setMarks(); | |
52 | |
53 this.document.onkeypress = parseKeypress; | |
54 focus(); | |
55 | |
56 // give a name to the window containing digilib - this way one can test if there is already a | |
57 // digilib-window open and replace the contents of it (ex. digicat) | |
58 top.window.name = "digilib"; | |
59 } | |
60 | |
61 | |
62 // function that launches the ScaleServlet | |
63 // the different detailGrades: | |
64 // 0 -> back, next, page | |
65 // 1 -> zoomout | |
66 // 2 -> zoomarea, zoompoint, moveto, scaledef | |
67 | |
68 function loadPicture(detailGrade, keepArea) { | |
69 | |
70 var newQuery = "fn=" + att[0] + "&pn=" + att[1] + "&ws=" + att[2] + "&mo=" + att[3]; | |
71 | |
72 if (detailGrade == 0) { | |
73 att[4] = "0/0"; | |
74 } | |
75 | |
76 if ((detailGrade == 1) || (detailGrade == 0 && !keepArea)) { | |
77 att[5] = 0; | |
78 att[6] = 0; | |
79 att[7] = 1; | |
80 att[8] = 1; | |
81 } | |
82 | |
83 newQuery += "&mk=" + att[4] + "&wx=" + att[5] + "&wy=" + att[6] + "&ww=" + att[7] + "&wh=" + att[8]; | |
84 newQuery += "&dw=" + (innerWidth-30) + "&dh=" + (innerHeight-30); | |
85 | |
86 // debug window - checking the parameters passed to the next image | |
87 //alert ("DEBUG MESSAGE (query-string in loadPicture):\n\n" + newQuery); | |
88 | |
89 location.href = location.pathname + "?" + newQuery; | |
90 } | |
91 | |
92 | |
93 // constructor holding different values of a point | |
94 function Point(event) { | |
95 | |
96 this.pageX = parseInt(event.clientX); | |
97 this.pageY = parseInt(event.clientY); | |
98 | |
99 this.x = this.pageX-parseInt(document.getElementById("lay1").style.left); | |
100 this.y = this.pageY-parseInt(document.getElementById("lay1").style.top); | |
101 | |
102 this.relX = cropFloat(att[5]+(att[7]*this.x/document.pic.offsetWidth)); | |
103 this.relY = cropFloat(att[6]+(att[8]*this.y/document.pic.offsetHeight)); | |
104 | |
105 // alert ("page:\t" + this.pageX + "\t" + this.pageY + "\npic:\t" + this.x + "\t" + this.y + "\nrel:\t" + this.relX + "\t" + this.relY); | |
106 | |
107 return this; | |
108 } | |
109 | |
110 | |
111 function backPage(keepArea) { | |
112 | |
113 att[1] = parseInt(att[1]) - 1; | |
114 | |
115 if (att[1] > 0) { | |
116 loadPicture(0, keepArea); | |
117 } else { | |
118 att[1] = parseInt(att[1]) + 1; | |
119 alert("You are already on the first page!"); | |
120 } | |
121 } | |
122 | |
123 | |
124 function nextPage(keepArea) { | |
125 | |
126 att[1] = parseInt(att[1]) + 1; | |
127 | |
128 loadPicture(0, keepArea); | |
129 } | |
130 | |
131 | |
132 function page(keepArea) { | |
133 | |
134 do { | |
135 page = prompt("Goto Page:", 1); | |
136 } while ((page != null) && (page < 1)); | |
137 | |
138 if (page != null && page != att[1]) { | |
139 att[1] = page; | |
140 loadPicture(0, keepArea); | |
141 } | |
142 } | |
143 | |
144 | |
145 function digicat() { | |
146 var url = "http://" + location.host + "/docuserver/digitallibrary/digicat.html?" + att[0] + "+" + att[1]; | |
147 win = window.open(url, "digicat"); | |
148 win.focus(); | |
149 } | |
150 | |
151 | |
152 function ref(refselect) { | |
153 | |
154 var hyperlinkRef = "http://" + location.host + "/docuserver/digitallibrary/digilib.jsp?"; | |
155 hyperlinkRef += att[0] + "+" + att[1] + "+" + att[2] + "+" + att[3] + "+" + att[4]; | |
156 | |
157 if ((att[5] != 0) || (att[6] != 0) || (att[7] != 1) || (att[8] != 1)) { | |
158 hyperlinkRef += "+" + att[5] + "+" + att[6] + "+" + att[7] + "+" + att[8]; | |
159 } | |
160 | |
161 if (refselect == 1) { | |
162 prompt("Link for HTML--documents", hyperlinkRef); | |
163 } else { | |
164 prompt("Link for LaTeX--documents", "\\href{" + hyperlinkRef + "}{TEXT}"); | |
165 } | |
166 } | |
167 | |
168 | |
169 function mark() { | |
170 | |
171 if (att[4].split(";").length > 7) { | |
172 alert("Only 8 marks are possible at the moment!"); | |
173 return; | |
174 } | |
175 | |
176 function markEvent(event) { | |
177 var point = new Point(event); | |
178 | |
179 if ((att[4] != "") && (att[4] != "0/0")) { | |
180 att[4] += ";"; | |
181 } else { | |
182 att[4] = ""; | |
183 } | |
184 att[4] += point.relX + "/" + point.relY; | |
185 | |
186 document.getElementById("lay1").onmousedown = false; | |
187 setMarks(); | |
188 } | |
189 | |
190 document.getElementById("lay1").onmousedown = markEvent; | |
191 } | |
192 | |
193 | |
194 function zoomArea() { | |
195 var state = 0; | |
196 var pt1, pt2; | |
197 | |
198 function click(event) { | |
199 | |
200 if (state == 0) { | |
201 state = 1; | |
202 | |
203 pt1 = new Point(event); | |
204 pt2 = pt1; | |
205 | |
206 document.getElementById("eck1").style.left = pt1.pageX; | |
207 document.getElementById("eck1").style.top = pt1.pageY; | |
208 document.getElementById("eck2").style.left = pt2.pageX-12; | |
209 document.getElementById("eck2").style.top = pt1.pageY; | |
210 document.getElementById("eck3").style.left = pt1.pageX; | |
211 document.getElementById("eck3").style.top = pt2.pageY-12; | |
212 document.getElementById("eck4").style.left = pt2.pageX-12; | |
213 document.getElementById("eck4").style.top = pt2.pageY-12; | |
214 | |
215 document.getElementById("eck1").style.visibility="visible"; | |
216 document.getElementById("eck2").style.visibility="visible"; | |
217 document.getElementById("eck3").style.visibility="visible"; | |
218 document.getElementById("eck4").style.visibility="visible"; | |
219 | |
220 document.getElementById("lay1").onmousemove = move; | |
221 document.getElementById("eck4").onmousemove = move; | |
222 | |
223 } else { | |
224 | |
225 pt2 = new Point(event); | |
226 | |
227 document.getElementById("lay1").onmousedown = false; | |
228 document.getElementById("eck4").onmousedown = false; | |
229 | |
230 document.getElementById("eck1").style.visibility="hidden"; | |
231 document.getElementById("eck2").style.visibility="hidden"; | |
232 document.getElementById("eck3").style.visibility="hidden"; | |
233 document.getElementById("eck4").style.visibility="hidden"; | |
234 | |
235 att[5] = Math.min(pt1.relX, pt2.relX); | |
236 att[6] = Math.min(pt1.relY, pt2.relY); | |
237 | |
238 att[7] = Math.abs(pt1.relX-pt2.relX); | |
239 att[8] = Math.abs(pt1.relY-pt2.relY); | |
240 | |
241 if (att[7] != 0 && att[8] != 0) { | |
242 loadPicture(2); | |
243 } | |
244 } | |
245 } | |
246 | |
247 function move(event) { | |
248 | |
249 pt2 = new Point(event); | |
250 | |
251 document.getElementById("eck1").style.left = ((pt1.pageX < pt2.pageX) ? pt1.pageX : pt2.pageX); | |
252 document.getElementById("eck1").style.top = ((pt1.pageY < pt2.pageY) ? pt1.pageY : pt2.pageY); | |
253 document.getElementById("eck2").style.left = ((pt1.pageX < pt2.pageX) ? pt2.pageX : pt1.pageX)-12; | |
254 document.getElementById("eck2").style.top = ((pt1.pageY < pt2.pageY) ? pt1.pageY : pt2.pageY); | |
255 document.getElementById("eck3").style.left = ((pt1.pageX < pt2.pageX) ? pt1.pageX : pt2.pageX); | |
256 document.getElementById("eck3").style.top = ((pt1.pageY < pt2.pageY) ? pt2.pageY : pt1.pageY)-12; | |
257 document.getElementById("eck4").style.left = ((pt1.pageX < pt2.pageX) ? pt2.pageX : pt1.pageX)-12; | |
258 document.getElementById("eck4").style.top = ((pt1.pageY < pt2.pageY) ? pt2.pageY : pt1.pageY)-12; | |
259 } | |
260 | |
261 document.getElementById("lay1").onmousedown = click; | |
262 document.getElementById("eck4").onmousedown = click; | |
263 } | |
264 | |
265 | |
266 function zoomPoint() { | |
267 | |
268 function zoomPointEvent(event) { | |
269 var point = new Point(event); | |
270 | |
271 att[5] = cropFloat(point.relX-0.5*att[7]*0.7); | |
272 att[6] = cropFloat(point.relY-0.5*att[8]*0.7); | |
273 | |
274 att[7] = cropFloat(att[7]*0.7); | |
275 att[8] = cropFloat(att[8]*0.7); | |
276 | |
277 if (att[5] < 0) { | |
278 att[5] = 0; | |
279 } | |
280 if (att[6] < 0) { | |
281 att[6] = 0; | |
282 } | |
283 if (att[5]+att[7] > 1) { | |
284 att[5] = 1-att[7]; | |
285 } | |
286 if (att[6]+att[8] > 1) { | |
287 att[6] = 1-att[8]; | |
288 } | |
289 | |
290 document.getElementById("lay1").onmousedown = false; | |
291 | |
292 loadPicture(2); | |
293 } | |
294 | |
295 document.getElementById("lay1").onmousedown = zoomPointEvent; | |
296 } | |
297 | |
298 | |
299 function zoomOut() { | |
300 | |
301 loadPicture(1); | |
302 } | |
303 | |
304 | |
305 function moveTo() { | |
306 | |
307 function moveToEvent(event) { | |
308 | |
309 var point = new Point(event); | |
310 | |
311 att[5] = cropFloat(point.relX-0.5*att[7]); | |
312 att[6] = cropFloat(point.relY-0.5*att[8]); | |
313 | |
314 if (att[5] < 0) { | |
315 att[5] = 0; | |
316 } | |
317 if (att[6] < 0) { | |
318 att[6] = 0; | |
319 } | |
320 if (att[5]+att[7] > 1) { | |
321 att[5] = 1-att[7]; | |
322 } | |
323 if (att[6]+att[8] > 1) { | |
324 att[6] = 1-att[8]; | |
325 } | |
326 | |
327 document.getElementById("lay1").onmousedown = false; | |
328 | |
329 loadPicture(2); | |
330 } | |
331 | |
332 document.getElementById("lay1").onmousedown = moveToEvent; | |
333 } | |
334 | |
335 | |
336 function scale(scaledef) { | |
337 | |
338 att[2] = scaledef; | |
339 loadPicture(2); | |
340 } | |
341 | |
342 | |
343 function setMarks() { | |
344 | |
345 if (att[4] != "" && att[4] != "0/0") { | |
346 var mark = att[4].split(";"); | |
347 | |
348 var countMarks = mark.length; | |
349 | |
350 // maximum of marks is 8 | |
351 // we do not report this error because this is already done in func. "Mark" | |
352 if (countMarks > 8) countMarks = 8; | |
353 | |
354 var picWidth = document.pic.offsetWidth; | |
355 var picHeight = document.pic.offsetHeight; | |
356 | |
357 // catch the cases where the picture had not been loaded already and | |
358 // make a timeout so that the coordinates are calculated with the real dimensions | |
359 if (document.pic.complete) { | |
360 var xoffset = parseInt(document.getElementById("lay1").style.left); | |
361 var yoffset = parseInt(document.getElementById("lay1").style.top); | |
362 | |
363 for (var i = 0; i < countMarks; i++) { | |
364 mark[i] = mark[i].split("/"); | |
365 | |
366 if ((mark[i][0] > att[5]) && (mark[i][1] > att[6]) && (mark[i][0] < (att[5]+att[7])) && (mark[i][1] < (att[6]+att[8]))) { | |
367 | |
368 mark[i][0] = parseInt(xoffset+picWidth*(mark[i][0]-att[5])/att[7]); | |
369 mark[i][1] = parseInt(yoffset+picHeight*(mark[i][1]-att[6])/att[8]); | |
370 | |
371 | |
372 document.getElementById("dot" + i).style.left = mark[i][0]-5; | |
373 document.getElementById("dot" + i).style.top = mark[i][1]-5; | |
374 document.getElementById("dot" + i).style.visibility = "visible"; | |
375 } | |
376 } | |
377 } else { | |
378 setTimeout("setMarks()", 100); | |
379 } | |
380 } | |
381 } | |
382 | |
383 // capturing keypresses for next and previous page | |
384 // ascii-values of n = 110, b = 98 | |
385 function parseKeypress (event) { | |
386 | |
387 if (String.fromCharCode(event.which) == "n") { | |
388 nextPage(); | |
389 } | |
390 | |
391 // does not work currently, because Opera catches this key on it's own | |
392 // have to change the key or find another way - luginbuehl | |
393 if (String.fromCharCode(event.which) == "b") { | |
394 backPage(); | |
395 } | |
396 } | |
397 | |
398 | |
399 // auxiliary function to crop senseless precicsion | |
400 function cropFloat(tmp) { | |
401 return parseInt(10000*tmp)/10000; | |
402 } |