Mercurial > hg > digilib

comparison client/digitallibrary/jskin/diginew.jsp @ 515:057ed991d9bd jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
zeroth version of new js skin
author robcast
date Mon, 07 Sep 2009 18:22:54 +0200
parents
children
comparison
equal deleted inserted replaced
14:fd23063ba2d9 515:057ed991d9bd
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <%@ page language="java" pageEncoding="UTF-8"%><%!
4 // -- JSP init -------------
5
6 // create DocumentBean instance for all JSP requests
7 digilib.servlet.DocumentBean docBean = new digilib.servlet.DocumentBean();
8
9 // initialize DocumentBean instance in JSP init
10 public void jspInit() {
11 try {
12 // set servlet init-parameter
13 docBean.setConfig(getServletConfig());
14 } catch (javax.servlet.ServletException e) {
15 System.out.println(e);
16 }
17 }
18 // -- end of JSP init -------------
19 %><%
20 // -- JSP request -------------
21
22 // parsing the query
23 // -----------------
24 digilib.servlet.DigilibRequest dlRequest = new digilib.servlet.DigilibRequest(request);
25 docBean.setRequest(dlRequest);
26 // check if authentication is needed and redirect if necessary
27 docBean.doAuthentication(response);
28 // add number of pages
29 dlRequest.setValue("pt", docBean.getNumPages());
30 // store objects for jsp:include
31 pageContext.setAttribute("docBean", docBean, pageContext.REQUEST_SCOPE);
32
33 %><html xmlns="http://www.w3.org/1999/xhtml">
34 <head>
35 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
36 <title>Digital Document Library NG</title>
37
38 <link rel="stylesheet" type="text/css" href="diginew.css" />
39
40 <!-- <script type="text/javascript" src="debug.js"></script> -->
41
42 <script type="text/javascript" src="baselib.js"></script>
43
44 <script type="text/javascript" src="dllib.js"></script>
45
46 <script language="JavaScript">
47
48 var jspVersion = "diginew.jsp 1.022";
49 var cookie = new Cookie();
50 // alert(strObject(cookie));
51
52 var isOptionDivVisible = cookie.getbool("isOptionDivVisible");
53 var isBirdDivVisible = cookie.getbool("isBirdDivVisible");
54 var isAboutDivVisible = false;
55 var isSizeMenuVisible = false;
56 var isScaleMenuVisible = false;
57 var isOriginalSize = false;
58 var isPixelByPixel = false;
59 var dlTarget = window.name;
60 var baseUrl = '<%= dlRequest.getAsString("base.url") %>';
61 var toolbarEnabledURL = window.location.href;
62 var waited = 0;
63
64 function toggleOptionDiv() {
65 isOptionDivVisible = !isOptionDivVisible;
66 cookie.addbool("isOptionDivVisible", isOptionDivVisible);
67 showOptions(isOptionDivVisible);
68 }
69
70 function toggleBirdDiv() {
71 isBirdDivVisible = !isBirdDivVisible;
72 cookie.addbool("isBirdDivVisible", isBirdDivVisible);
73 showBirdDiv(isBirdDivVisible);
74 }
75
76 function toggleAboutDiv() {
77 isAboutDivVisible = !isAboutDivVisible;
78 showAboutDiv(isAboutDivVisible);
79 }
80
81 function toggleSizeMenu() {
82 isSizeMenuVisible = !isSizeMenuVisible;
83 showMenu("size-menu", "size", isSizeMenuVisible);
84 }
85
86 function toggleScaleMenu() {
87 isScaleMenuVisible = !isScaleMenuVisible;
88 showMenu("scale-menu", "scale", isScaleMenuVisible);
89 }
90
91 function setOnImage(id, src, value) {
92 // replace img src and display "on" status
93 var elem = getElement(id);
94 elem.src = src;
95 if (value)
96 elem.title += ": " + value;
97 else
98 elem.title += ": on";
99 }
100
101 // change icons if image functions are on
102 function reflectImageStatus() {
103 if (hasFlag("hmir")) setOnImage("hmir", "mirror-horizontal-on.png");
104 if (hasFlag("vmir")) setOnImage("vmir", "mirror-vertical-on.png");
105 if (hasParameter("brgt"))
106 setOnImage("brgt", "brightness-on.png", getParameter("brgt"));
107 if (hasParameter("cont"))
108 setOnImage("cont", "contrast-on.png", getParameter("cont"));
109 if (hasParameter("rot"))
110 setOnImage("rot", "rotate-on.png", getParameter("rot"));
111 if (hasParameter("rgb"))
112 setOnImage("rgb", "rgb-on.png", getParameter("rgb"));
113 }
114
115
116 // initialize digilib; called by body.onload
117 function onBodyLoad() {
118 document.id = 'digilib';
119 dl.onLoad();
120 dl.showOptions(isOptionDivVisible);
121 reflectImageStatus(); // adjust icons
122 }
123
124 function onBodyUnload() {
125 // alert(strObject(cookie));
126 cookie.store();
127 }
128
129 </script>
130 </head>
131
132 <body onload="onBodyLoad();" onunload="onBodyUnload();">
133 <!-- slot for the scaled image -->
134 <div id="scaler">
135 <img id="pic"></img>
136 </div>
137
138 <!-- sensitive overlay for zoom area etc -->
139 <div id="overlay"></div>
140 <div id="bird-overlay"></div>
141
142 <!-- the zoom area selection rectangle -->
143 <div id="zoom"></div>
144
145 <!-- the bird's eye overview image -->
146 <img id="bird-image"></img>
147
148 <!-- the bird's eye select area -->
149 <div id="bird-area"></div>
150
151 <!-- the arrows -->
152 <a class="arrow" id="up" href="javascript:moveBy(0, -0.5)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
153 <a class="arrow" id="down" href="javascript:moveBy(0, 0.5)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
154 <a class="arrow" id="left" href="javascript:moveBy(-0.5, 0)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
155 <a class="arrow" id="right" href="javascript:moveBy(0.5, 0)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
156
157 <!-- the about window -->
158 <div id="about" class="about" onclick="toggleAboutDiv()">
159 <p>Digilib Graphic Viewer</p>
160 <a href="http://digilib.berlios.de" target="_blank" >
161 <img class="logo" src="../img/digilib-logo-text1.png" title="digilib"></img>
162 </a>
163 <p id="digilib-version"></p>
164 <p id="jsp-version"></p>
165 <p id="baselib-version"></p>
166 <p id="dllib-version"></p>
167 </div>
168
169 <!-- the calibration div -->
170 <div id="calibration">
171 <div>
172 <p class="cm">measure the length of this scale on your screen</p>
173 </div>
174 </div>
175
176 <!-- the size menu -->
177 <div id="size-menu" class="popup-menu">
178 <p><a href="javascript:setSize(1)">1 x</a></p>
179 <p><a href="javascript:setSize(1.41)">1.41 x</a></p>
180 <p><a href="javascript:setSize(2)">2 x</a></p>
181 <p><a href="javascript:setSize(3)">3 x</a></p>
182 <div id="sizes-bar">
183 <div id="sizes-slider"></div>
184 </div>
185 <p id="sizes-value"></p>
186 </div>
187
188 <!-- the scale menu -->
189 <div id="scale-menu" class="popup-menu">
190 <p><a href="javascript:setScale('fit')">fit to screen</a></p>
191 <p><a href="javascript:setScale('pixel')">pixel by pixel</a></p>
192 <p><a href="javascript:setScale('original')">original size</a></p>
193 </div>
194
195 <!-- the buttons -->
196 <div id="buttons">
197 <div class="separator">
198 </div>
199
200 <div class="button">
201 <a
202 class="icon"
203 href="javascript:getRefWin()"
204 >
205
206 <img
207 class="png"
208 id="reference"
209 title="get a reference URL"
210 src="reference.png"
211 >
212 </a>
213 </div>
214
215 <div class="button">
216 <a
217 class="icon"
218 href="javascript:dl.zoomBy(1.4)"
219 >
220
221 <img
222 class="png"
223 id="zoom-in"
224 title="zoom in"
225 src="zoom-in.png"
226 >
227 </a>
228 </div>
229
230 <div class="button">
231 <a
232 class="icon"
233 href="javascript:zoomBy(0.7)"
234 >
235
236 <img
237 class="png"
238 id="zoom-out"
239 title="zoom out"
240 src="zoom-out.png"
241 >
242 </a>
243 </div>
244
245 <div class="button">
246 <a
247 class="icon"
248 href="javascript:zoomArea()"
249 >
250
251 <img
252 class="png"
253 id="zoom-area"
254 title="zoom area"
255 src="zoom-area.png"
256 >
257 </a>
258 </div>
259
260 <div class="button">
261 <a
262 class="icon"
263 href="javascript:zoomFullpage()"
264 >
265
266 <img
267 class="png"
268 id="zoom-full"
269 title="view the whole image"
270 src="zoom-full.png"
271 >
272 </a>
273 </div>
274
275 <div class="button">
276 <a
277 class="icon"
278 href="javascript:zoomFullpage('width')"
279 >
280
281 <img
282 class="png"
283 id="page-width"
284 title="page width"
285 src="pagewidth.png"
286 >
287 </a>
288 </div>
289
290 <div class="button">
291 <a
292 class="icon"
293 href="javascript:gotoPage('-1')"
294 >
295
296 <img
297 class="png"
298 id="back"
299 title="goto previous image"
300 src="back.png"
301 >
302 </a>
303 </div>
304
305 <div class="button">
306 <a
307 class="icon"
308 href="javascript:gotoPage('+1')"
309 >
310
311 <img
312 class="png"
313 id="fwd"
314 title="goto next image"
315 src="fwd.png"
316 >
317 </a>
318 </div>
319
320 <div class="button">
321 <a
322 class="icon"
323 href="javascript:gotoPageWin()"
324 >
325
326 <img
327 class="png"
328 id="page"
329 title="specify image"
330 src="page.png"
331 >
332 </a>
333 </div>
334
335 <div class="button">
336 <a
337 class="icon"
338 href="javascript:toggleBirdDiv()"
339 >
340
341 <img
342 class="png"
343 id="bird"
344 title="show bird's eye view"
345 src="birds-eye.png"
346 >
347 </a>
348 </div>
349
350 <div class="separator">
351 </div>
352
353 <div class="button">
354 <a
355 class="icon"
356 href="javascript:toggleAboutDiv()"
357 >
358
359 <img
360 class="png"
361 id="help"
362 title="about Digilib"
363 src="help.png"
364 >
365 </a>
366 </div>
367
368 <div class="button">
369 <a
370 class="icon"
371 href="javascript:toggleOptionDiv()"
372 >
373
374 <img
375 class="png"
376 id="options"
377 title="more options"
378 src="options.png"
379 >
380 </a>
381 </div>
382
383 <div class="separator">
384 </div>
385 </div>
386
387 <!-- options div -->
388
389 <div id="dloptions">
390 <div class="separator">
391 </div>
392
393 <div class="button">
394 <a
395 class="icon"
396 href="javascript:setMark();"
397 >
398
399 <img
400 class="png"
401 id="mark"
402 title="set a mark"
403 src="mark.png"
404 >
405 </a>
406 </div>
407
408 <div class="button">
409 <a
410 class="icon"
411 href="javascript:removeMark()"
412 >
413
414 <img
415 class="png"
416 id="delmark"
417 title="delete the last mark"
418 src="delmark.png"
419 >
420 </a>
421 </div>
422
423 <div class="button">
424 <a
425 class="icon"
426 href="javascript:mirror('h')"
427 >
428
429 <img
430 class="png"
431 id="hmir"
432 title="mirror horizontally"
433 src="mirror-horizontal.png"
434 >
435 </a>
436 </div>
437
438 <div class="button">
439 <a
440 class="icon"
441 href="javascript:mirror('v')"
442 >
443
444 <img
445 class="png"
446 id="vmir"
447 title="mirror vertically"
448 src="mirror-vertical.png"
449 >
450 </a>
451 </div>
452
453 <div class="button">
454 <a
455 class="icon"
456 href="javascript:setParamWin('rot', 'Rotate (0..360) clockwise')"
457 >
458
459 <img
460 class="png"
461 id="rot"
462 title="rotate image"
463 src="rotate.png"
464 >
465 </a>
466 </div>
467
468 <div class="button">
469 <a
470 class="icon"
471 href="javascript:setParamWin('brgt', 'Brightness (-255..255)')"
472 >
473
474 <img
475 class="png"
476 id="brgt"
477 title="set brightness"
478 src="brightness.png"
479 >
480 </a>
481 </div>
482
483 <div class="button">
484 <a
485 class="icon"
486 href="javascript:setParamWin('cont', 'Contrast (0..8)')"
487 >
488
489 <img
490 class="png"
491 id="cont"
492 title="set contrast"
493 src="contrast.png"
494 >
495 </a>
496 </div>
497
498 <div class="button">
499 <a
500 class="icon"
501 href="javascript:setParamWin('rgb', '...')"
502 >
503
504 <img
505 class="png"
506 id="rgb"
507 title="set rgb values"
508 src="rgb.png"
509 >
510 </a>
511 </div>
512
513 <div class="button">
514 <a
515 class="icon"
516 href="javascript:setQualityWin('Quality (0..2)')"
517 >
518
519 <img
520 class="png"
521 id="quality"
522 title="set image quality"
523 src="quality.png"
524 >
525 </a>
526 </div>
527
528 <div class="button">
529 <a
530 class="icon"
531 href="javascript:toggleSizeMenu()"
532 >
533
534 <img
535 class="png"
536 id="size"
537 title="set page size"
538 src="size.png"
539 >
540 </a>
541 </div>
542
543 <div class="button">
544 <a
545 class="icon"
546 href="javascript:calibrate('x')"
547 >
548
549 <img
550 class="png"
551 id="calibration-x"
552 title="calibrate screen x-ratio"
553 src="calibration-x.png"
554 >
555 </a>
556 </div>
557
558 <div class="button">
559 <a
560 class="icon"
561 href="javascript:toggleScaleMenu()"
562 >
563
564 <img
565 class="png"
566 id="scale"
567 title="change image scale"
568 src="original-size.png"
569 >
570 </a>
571 </div>
572
573 <div class="separator">
574 </div>
575
576 <div class="button">
577 <a
578 class="icon"
579 href="javascript:toggleOptionDiv()"
580 >
581
582 <img
583 class="png"
584 id="options-1"
585 title="hide options"
586 src="options.png"
587 >
588 </a>
589 </div>
590
591 <div class="separator">
592 </div>
593
594 </div>
595
596 <div class="debug" id="debug"><p class="debug">Debug</p></div>
597
598 </body>
599
600 </html>