Mercurial > hg > digilib-old

comparison client/digitallibrary/greyskin/diginew.jsp @ 410:395db075906d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
removed mark divs and images, they are added programmatically now; moved resetParameters() function to baselib.js; moved all initalization code to onload function; added "about" div with slots for version number display; added "overlay" div for better mousemove control (for "zoom area"); added "debug" div and script
author hertzhaft
date Tue, 13 Dec 2005 13:36:28 +0100
parents dbeb240fa170
children de7200c3a3e2
comparison
equal deleted inserted replaced
409:84c20b64e1de 410:395db075906d
34 <html> 34 <html>
35 35
36 <head> 36 <head>
37 <title>Digital Document Library NG</title> 37 <title>Digital Document Library NG</title>
38 38
39 <style type="text/css"> 39 <link rel="stylesheet" type="text/css" href="diginew.css" />
40 40
41 body { background-color: #E0E0E0; color: black; font-size: 8pt } 41 <script type="text/javascript" src="debug.js"></script>
42 code { font-family: monospace; color: blue; } 42
43 pre { color: #006060; } 43 <script type="text/javascript" src="baselib.js"></script>
44 44
45 a.icon { margin: 0px; padding: 0px; } 45 <script type="text/javascript" src="dllib.js"></script>
46 46
47 img.png { border: none; } 47 <script language="JavaScript">
48 img.png:hover { background-image: url('corona.png'); } 48
49 img.mark { border: none; } 49 var isOptionDivVisible = false;
50 50 var isAboutDivVisible = false;
51 div.button { padding: 0px; } 51 var dlTarget = window.name;
52 div.dot { position: absolute; left: -20; top: 100; visibility: hidden } 52 var baseUrl = '<%= dlRequest.getAsString("base.url") %>';
53 div#scaler-table { padding-right: 40px; } 53 var toolbarEnabledURL = window.location.href;
54 54 var timeOut;
55 div#buttons { position: absolute; right: 5px; top: 5px; background-color: #E0E0E0; } 55
56 div#dloptions { position: absolute; right: 5px; top: 5px; background-color: #E0E0E0; visibility: hidden; } 56 function toggleOptionDiv() {
57 div#zoom { position: absolute; border: 2px solid red; visibility: hidden; } 57 isOptionDivVisible = !isOptionDivVisible;
58 showOptions(isOptionDivVisible);
59 }
60
61 function toggleAboutDiv() {
62 isAboutDivVisible = !isAboutDivVisible;
63 showAboutDiv(isAboutDivVisible);
64 }
65
66 function highlightPNG(id, on) {
67 var img = document.getElementById(id);
68 var a = img.parentNode
69 var div = a.parentNode;
70 var src = img.src;
71 // FIXME: IE - transparente PNGs offenbar nicht nachladbar
58 72
59 </style> 73 if (browserType.isIE)
60 74 img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "');"
61 <script type="text/javascript" src="baselib.js"></script> 75 div.style.backgroundImage = on
62 76 ? "url('corona.png')"
63 <script type="text/javascript" src="dllib.js"></script> 77 : "";
64
65 <script language="JavaScript">
66 var isOptionDivVisible = false;
67 var dlTarget = window.name;
68 var baseUrl = '<%= dlRequest.getAsString("base.url") %>';
69 var toolbarEnabledURL = window.location.href;
70
71 function resetParams() {
72 newParameter('fn', '', 1);
73 newParameter('pn', '1', 1);
74 newParameter('ws', '1.0', 1);
75 newParameter('mo', '', 1);
76 newParameter('mk', '', 3);
77 newParameter('wx', '0.0', 2);
78 newParameter('wy', '0.0', 2);
79 newParameter('ww', '1.0', 2);
80 newParameter('wh', '1.0', 2);
81 newParameter('pt', '<%= dlRequest.getAsString("pt") %>', 1);
82 newParameter('brgt', '0.0', 1);
83 newParameter('cont', '0.0', 1);
84 newParameter('rot', '0.0', 1);
85 newParameter('rgba', '', 1);
86 newParameter('rgbm', '', 1);
87 newParameter('ddpix', '', 1);
88 newParameter('ddpiy', '', 1);
89 document.id='digilib';
90 }
91
92
93 function toggleOptionDiv() {
94 isOptionDivVisible = !isOptionDivVisible;
95 showOptions(isOptionDivVisible);
96 }
97
98 function highlightPNG(id, on) {
99 var img = document.getElementById(id);
100 var a = img.parentNode
101 var div = a.parentNode;
102 var src = img.src;
103 // FIXME: IE - transparente PNGs offenbar nicht nachladbar
104
105 // if (browserType.isIE)
106 // img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "');"
107 div.style.backgroundImage = on
108 ? "url('corona.png')"
109 : "";
110 } 78 }
111 79
112 // initialize image; called by body.onload 80 // initialize image; called by body.onload
113 function onBodyLoaded() { 81 function onBodyLoaded() {
114 var scaler = getElement('scaler'); 82 document.id = 'digilib';
115 var pic = getElement('pic'); 83 resetParameters(); // set default values if not given
116 var ps = bestPicSize(scaler, 50);
117 var src = "../servlet/Scaler?" + getQueryString() + "&dw=" + ps.width + "&dh=" + ps.height;
118 pic.src = src;
119 dl_init(); // dl_init braucht die endgültigen Maße des pic Elements
120 }
121
122 base_init(); // browser recognition
123 resetParams(); // default values
124 dl_param_init(); // parse parameter values 84 dl_param_init(); // parse parameter values
125 85 loadScalerImage();
86 dl_init();
87 }
88
89 // base_init(); // now done on loading baselib.js
90
126 </script> 91 </script>
127 </head> 92 </head>
128 93
129 <body onload="onBodyLoaded();"> 94 <body onload="onBodyLoaded();">
130 95
133 <div id="scaler" style="visibility:visible"> 98 <div id="scaler" style="visibility:visible">
134 <img id="pic"></img> 99 <img id="pic"></img>
135 </div> 100 </div>
136 </div> 101 </div>
137 102
138 <!-- slot for the zoom --> 103 <!-- sensitive overlay for zoom area etc -->
104 <div id="overlay">
105 </div>
106
107 <!-- the zoom area selection rectangle -->
139 <div id="zoom"> 108 <div id="zoom">
140 </div> 109 </div>
141 110
142 <!-- marks as dynamically created divs with numbers or text? --> 111 <div id="about" class="about" onclick="toggleAboutDiv()">
143 <div id="dot0" class="dot"><img class="mark" src="../img/mark1.gif" ></div> 112 <p>Digilib Graphic Viewer</p>
144 <div id="dot1" class="dot"><img class="mark" src="../img/mark2.gif" ></div> 113 <a href="http://digilib.berlios.de" target="_blank" >
145 <div id="dot2" class="dot"><img class="mark" src="../img/mark3.gif" ></div> 114 <img class="logo" src="../img/digilib-logo-text1.png" title="digilib"></img>
146 <div id="dot3" class="dot"><img class="mark" src="../img/mark4.gif" ></div> 115 </a>
147 <div id="dot4" class="dot"><img class="mark" src="../img/mark5.gif" ></div> 116 <p id="digilib-version"></p>
148 <div id="dot5" class="dot"><img class="mark" src="../img/mark6.gif" ></div> 117 <p id="baselib-version"></p>
149 <div id="dot6" class="dot"><img class="mark" src="../img/mark7.gif" ></div> 118 <p id="dllib-version"></p>
150 <div id="dot7" class="dot"><img class="mark" src="../img/mark8.gif" ></div> 119 </div>
120
151 121
152 <div id="buttons"> 122 <div id="buttons">
153 <div class="button"> 123 <div class="button">
154 <a 124 <a
155 class="icon" 125 class="icon"
157 > 127 >
158 128
159 <img 129 <img
160 class="png" 130 class="png"
161 id="reference" 131 id="reference"
162
163 title="get a reference URL" 132 title="get a reference URL"
164 src="reference.png" 133 src="reference.png"
165 > 134 >
166 </a> 135 </a>
167 </div> 136 </div>
173 > 142 >
174 143
175 <img 144 <img
176 class="png" 145 class="png"
177 id="zoom-in" 146 id="zoom-in"
178
179 title="zoom in" 147 title="zoom in"
180 src="zoom-in.png" 148 src="zoom-in.png"
181 > 149 >
182 </a> 150 </a>
183 </div> 151 </div>
189 > 157 >
190 158
191 <img 159 <img
192 class="png" 160 class="png"
193 id="zoom-out" 161 id="zoom-out"
194
195 title="zoom out" 162 title="zoom out"
196 src="zoom-out.png" 163 src="zoom-out.png"
197 > 164 >
198 </a> 165 </a>
199 </div> 166 </div>
205 > 172 >
206 173
207 <img 174 <img
208 class="png" 175 class="png"
209 id="zoom-area" 176 id="zoom-area"
210
211 title="zoom area" 177 title="zoom area"
212 src="zoom-area.png" 178 src="zoom-area.png"
213 > 179 >
214 </a> 180 </a>
215 </div> 181 </div>
221 > 187 >
222 188
223 <img 189 <img
224 class="png" 190 class="png"
225 id="zoom-full" 191 id="zoom-full"
226
227 title="view the whole image" 192 title="view the whole image"
228 src="zoom-full.png" 193 src="zoom-full.png"
229 > 194 >
230 </a> 195 </a>
231 </div> 196 </div>
237 > 202 >
238 203
239 <img 204 <img
240 class="png" 205 class="png"
241 id="back" 206 id="back"
242
243 title="goto previous image" 207 title="goto previous image"
244 src="back.png" 208 src="back.png"
245 > 209 >
246 </a> 210 </a>
247 </div> 211 </div>
253 > 217 >
254 218
255 <img 219 <img
256 class="png" 220 class="png"
257 id="fwd" 221 id="fwd"
258
259 title="goto next image" 222 title="goto next image"
260 src="fwd.png" 223 src="fwd.png"
261 > 224 >
262 </a> 225 </a>
263 </div> 226 </div>
264 227
265 <div class="button"> 228 <div class="button">
266 <a 229 <a
267 class="icon" 230 class="icon"
268 href="javascript:help()" 231 href="javascript:toggleAboutDiv()"
269 > 232 >
270 233
271 <img 234 <img
272 class="png" 235 class="png"
273 id="help" 236 id="help"
274 237 title="about Digilib"
275 title="help"
276 src="help.png" 238 src="help.png"
277 > 239 >
278 </a> 240 </a>
279 </div> 241 </div>
280 242
285 > 247 >
286 248
287 <img 249 <img
288 class="png" 250 class="png"
289 id="options" 251 id="options"
290
291 title="more options" 252 title="more options"
292 src="options.png" 253 src="options.png"
293 > 254 >
294 </a> 255 </a>
295 </div> 256 </div>
300 261
301 <div id="dloptions"> 262 <div id="dloptions">
302 <div class="button"> 263 <div class="button">
303 <a 264 <a
304 class="icon" 265 class="icon"
305 href="javascript:setMark()" 266 href="javascript:setMark();"
306 > 267 >
307 268
308 <img 269 <img
309 class="png" 270 class="png"
310 id="mark" 271 id="mark"
311
312 title="set a mark" 272 title="set a mark"
313 src="mark.png" 273 src="mark.png"
314 > 274 >
315 </a> 275 </a>
316 </div> 276 </div>
322 > 282 >
323 283
324 <img 284 <img
325 class="png" 285 class="png"
326 id="delmark" 286 id="delmark"
327
328 title="delete the last mark" 287 title="delete the last mark"
329 src="delmark.png" 288 src="delmark.png"
330 > 289 >
331 </a> 290 </a>
332 </div> 291 </div>
338 > 297 >
339 298
340 <img 299 <img
341 class="png" 300 class="png"
342 id="mirror-h" 301 id="mirror-h"
343
344 title="mirror horizontally" 302 title="mirror horizontally"
345 src="mirror-horizontal.png" 303 src="mirror-horizontal.png"
346 > 304 >
347 </a> 305 </a>
348 </div> 306 </div>
354 > 312 >
355 313
356 <img 314 <img
357 class="png" 315 class="png"
358 id="mirror-v" 316 id="mirror-v"
359
360 title="mirror vertically" 317 title="mirror vertically"
361 src="mirror-vertical.png" 318 src="mirror-vertical.png"
362 > 319 >
363 </a> 320 </a>
364 </div> 321 </div>
370 > 327 >
371 328
372 <img 329 <img
373 class="png" 330 class="png"
374 id="rotate" 331 id="rotate"
375
376 title="rotate image" 332 title="rotate image"
377 src="rotate.png" 333 src="rotate.png"
378 > 334 >
379 </a> 335 </a>
380 </div> 336 </div>
386 > 342 >
387 343
388 <img 344 <img
389 class="png" 345 class="png"
390 id="brightness" 346 id="brightness"
391
392 title="set brightness" 347 title="set brightness"
393 src="brightness.png" 348 src="brightness.png"
394 > 349 >
395 </a> 350 </a>
396 </div> 351 </div>
402 > 357 >
403 358
404 <img 359 <img
405 class="png" 360 class="png"
406 id="contrast" 361 id="contrast"
407
408 title="set contrast" 362 title="set contrast"
409 src="contrast.png" 363 src="contrast.png"
410 > 364 >
411 </a> 365 </a>
412 </div> 366 </div>
418 > 372 >
419 373
420 <img 374 <img
421 class="png" 375 class="png"
422 id="rgb" 376 id="rgb"
423
424 title="set rgb values" 377 title="set rgb values"
425 src="rgb.png" 378 src="rgb.png"
426 > 379 >
427 </a> 380 </a>
428 </div> 381 </div>
434 > 387 >
435 388
436 <img 389 <img
437 class="png" 390 class="png"
438 id="size" 391 id="size"
439
440 title="resize page" 392 title="resize page"
441 src="size.png" 393 src="size.png"
442 > 394 >
443 </a> 395 </a>
444 </div> 396 </div>
450 > 402 >
451 403
452 <img 404 <img
453 class="png" 405 class="png"
454 id="quality" 406 id="quality"
455
456 title="set image quality" 407 title="set image quality"
457 src="quality.png" 408 src="quality.png"
458 > 409 >
459 </a> 410 </a>
460 </div> 411 </div>
466 > 417 >
467 418
468 <img 419 <img
469 class="png" 420 class="png"
470 id="page" 421 id="page"
471
472 title="specify image" 422 title="specify image"
473 src="page.png" 423 src="page.png"
474 > 424 >
475 </a> 425 </a>
476 </div> 426 </div>
482 > 432 >
483 433
484 <img 434 <img
485 class="png" 435 class="png"
486 id="pixel-by-pixel" 436 id="pixel-by-pixel"
487
488 title="view image pixel by pixel" 437 title="view image pixel by pixel"
489 src="pixel-by-pixel.png" 438 src="pixel-by-pixel.png"
490 > 439 >
491 </a> 440 </a>
492 </div> 441 </div>
498 > 447 >
499 448
500 <img 449 <img
501 class="png" 450 class="png"
502 id="original-size" 451 id="original-size"
503
504 title="view image in original size" 452 title="view image in original size"
505 src="original-size.png" 453 src="original-size.png"
506 > 454 >
507 </a> 455 </a>
508 </div> 456 </div>
514 > 462 >
515 463
516 <img 464 <img
517 class="png" 465 class="png"
518 id="options-1" 466 id="options-1"
519
520 title="hide options" 467 title="hide options"
521 src="options.png" 468 src="options.png"
522 > 469 >
523 </a> 470 </a>
524 </div> 471 </div>
525 </div> 472 </div>
526 473
474 <div class="debug" id="debug"><p class="debug">Debug</p></div>
475
527 </body> 476 </body>
528 477
529 </html> 478 </html>