Mercurial > hg > digilib-old

comparison client/digitallibrary/greyskin/diginew.jsp @ 415:de7200c3a3e2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
support for bird's eye view; arrows for navigation
author hertzhaft
date Tue, 20 Dec 2005 17:33:39 +0100
parents 395db075906d
children ec504da8f69a
comparison
equal deleted inserted replaced
414:68c26335e880 415:de7200c3a3e2
46 46
47 <script language="JavaScript"> 47 <script language="JavaScript">
48 48
49 var isOptionDivVisible = false; 49 var isOptionDivVisible = false;
50 var isAboutDivVisible = false; 50 var isAboutDivVisible = false;
51 var isBirdDivVisible = false;
51 var dlTarget = window.name; 52 var dlTarget = window.name;
52 var baseUrl = '<%= dlRequest.getAsString("base.url") %>'; 53 var baseUrl = '<%= dlRequest.getAsString("base.url") %>';
53 var toolbarEnabledURL = window.location.href; 54 var toolbarEnabledURL = window.location.href;
54 var timeOut; 55 var timeOut;
55 56
61 function toggleAboutDiv() { 62 function toggleAboutDiv() {
62 isAboutDivVisible = !isAboutDivVisible; 63 isAboutDivVisible = !isAboutDivVisible;
63 showAboutDiv(isAboutDivVisible); 64 showAboutDiv(isAboutDivVisible);
64 } 65 }
65 66
66 function highlightPNG(id, on) { 67 function toggleBirdDiv() {
67 var img = document.getElementById(id); 68 isBirdDivVisible = !isBirdDivVisible;
68 var a = img.parentNode 69 showBirdDiv(isBirdDivVisible);
69 var div = a.parentNode; 70 }
70 var src = img.src; 71
71 // FIXME: IE - transparente PNGs offenbar nicht nachladbar 72 // replace img src and display "on" status
73 function setOnImage(id, src) {
74 var elem = getElement(id);
75 elem.src = src;
76 elem.title += ": on";
77 }
78
79 // change icons if image functions are on
80 function reflectImageStatus() {
81 if (hasFlag("hmir")) setOnImage("hmir", "mirror-horizontal-on.png");
82 if (hasFlag("vmir")) setOnImage("vmir", "mirror-vertical-on.png");
83 if (hasParameter("brgt")) setOnImage("brgt", "brightness-on.png");
84 if (hasParameter("cont")) setOnImage("cont", "contrast-on.png");
85 if (hasParameter("rot")) setOnImage("rot", "rotate-on.png");
86 if (hasParameter("rgb")) setOnImage("rgb", "rgb-on.png");
87 }
72 88
73 if (browserType.isIE)
74 img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "');"
75 div.style.backgroundImage = on
76 ? "url('corona.png')"
77 : "";
78 }
79
80 // initialize image; called by body.onload 89 // initialize image; called by body.onload
81 function onBodyLoaded() { 90 function onBodyLoaded() {
82 document.id = 'digilib'; 91 document.id = 'digilib';
83 resetParameters(); // set default values if not given 92 initParameters(); // load default values and detail
84 dl_param_init(); // parse parameter values 93 dl_param_init(); // parse parameter values
85 loadScalerImage(); 94 loadScalerImage(); // ruft auch dl_init() / initScaler auf
86 dl_init(); 95 loadBirdImage(); // lädt das Bird's Eye Bild
96 reflectImageStatus(); // adjust icons
97 showArrows();
87 } 98 }
88 99
89 // base_init(); // now done on loading baselib.js 100 // base_init(); // now done on loading baselib.js
90 101
91 </script> 102 </script>
93 104
94 <body onload="onBodyLoaded();"> 105 <body onload="onBodyLoaded();">
95 106
96 <!-- slot for the scaled image --> 107 <!-- slot for the scaled image -->
97 <div id="scaler-table"> 108 <div id="scaler-table">
98 <div id="scaler" style="visibility:visible"> 109 <div id="scaler">
99 <img id="pic"></img> 110 <img id="pic"></img>
100 </div> 111 </div>
101 </div> 112 </div>
102 113
103 <!-- sensitive overlay for zoom area etc --> 114 <!-- sensitive overlay for zoom area etc -->
106 117
107 <!-- the zoom area selection rectangle --> 118 <!-- the zoom area selection rectangle -->
108 <div id="zoom"> 119 <div id="zoom">
109 </div> 120 </div>
110 121
122 <!-- the bird's eye overview image -->
123 <img id="bird-image"></img>
124
125 <!-- the bird's eye select area -->
126 <div id="bird-area">
127 </div>
128
129 <!-- the arrows -->
130 <a class="arrow" id="up" href="javascript:moveBy(0, -0.5)"></a>
131 <a class="arrow" id="down" href="javascript:moveBy(0, 0.5)"></a>
132 <a class="arrow" id="left" href="javascript:moveBy(-0.5, 0)"></a>
133 <a class="arrow" id="right" href="javascript:moveBy(0.5, 0)"></a>
134
135 <!-- the about window -->
111 <div id="about" class="about" onclick="toggleAboutDiv()"> 136 <div id="about" class="about" onclick="toggleAboutDiv()">
112 <p>Digilib Graphic Viewer</p> 137 <p>Digilib Graphic Viewer</p>
113 <a href="http://digilib.berlios.de" target="_blank" > 138 <a href="http://digilib.berlios.de" target="_blank" >
114 <img class="logo" src="../img/digilib-logo-text1.png" title="digilib"></img> 139 <img class="logo" src="../img/digilib-logo-text1.png" title="digilib"></img>
115 </a> 140 </a>
226 </div> 251 </div>
227 252
228 <div class="button"> 253 <div class="button">
229 <a 254 <a
230 class="icon" 255 class="icon"
256 href="javascript:toggleBirdDiv()"
257 >
258
259 <img
260 class="png"
261 id="bird"
262 title="show bird's eye view"
263 src="birds-eye.png"
264 >
265 </a>
266 </div>
267
268 <div class="button">
269 <a
270 class="icon"
231 href="javascript:toggleAboutDiv()" 271 href="javascript:toggleAboutDiv()"
232 > 272 >
233 273
234 <img 274 <img
235 class="png" 275 class="png"
296 href="javascript:mirror('h')" 336 href="javascript:mirror('h')"
297 > 337 >
298 338
299 <img 339 <img
300 class="png" 340 class="png"
301 id="mirror-h" 341 id="hmir"
302 title="mirror horizontally" 342 title="mirror horizontally"
303 src="mirror-horizontal.png" 343 src="mirror-horizontal.png"
304 > 344 >
305 </a> 345 </a>
306 </div> 346 </div>
311 href="javascript:mirror('v')" 351 href="javascript:mirror('v')"
312 > 352 >
313 353
314 <img 354 <img
315 class="png" 355 class="png"
316 id="mirror-v" 356 id="vmir"
317 title="mirror vertically" 357 title="mirror vertically"
318 src="mirror-vertical.png" 358 src="mirror-vertical.png"
319 > 359 >
320 </a> 360 </a>
321 </div> 361 </div>
326 href="javascript:setParamWin('rot', 'Rotate (0..360) clockwise')" 366 href="javascript:setParamWin('rot', 'Rotate (0..360) clockwise')"
327 > 367 >
328 368
329 <img 369 <img
330 class="png" 370 class="png"
331 id="rotate" 371 id="rot"
332 title="rotate image" 372 title="rotate image"
333 src="rotate.png" 373 src="rotate.png"
334 > 374 >
335 </a> 375 </a>
336 </div> 376 </div>
341 href="javascript:setParamWin('brgt', 'Brightness (-255..255)')" 381 href="javascript:setParamWin('brgt', 'Brightness (-255..255)')"
342 > 382 >
343 383
344 <img 384 <img
345 class="png" 385 class="png"
346 id="brightness" 386 id="brgt"
347 title="set brightness" 387 title="set brightness"
348 src="brightness.png" 388 src="brightness.png"
349 > 389 >
350 </a> 390 </a>
351 </div> 391 </div>
356 href="javascript:setParamWin('cont', 'Contrast (0..8)')" 396 href="javascript:setParamWin('cont', 'Contrast (0..8)')"
357 > 397 >
358 398
359 <img 399 <img
360 class="png" 400 class="png"
361 id="contrast" 401 id="cont"
362 title="set contrast" 402 title="set contrast"
363 src="contrast.png" 403 src="contrast.png"
364 > 404 >
365 </a> 405 </a>
366 </div> 406 </div>