Mercurial > hg > digilib-old
annotate client/digitallibrary/jquery/jquery.digilib.js @ 634:34ee220a664b jquery
trying showAboutDivFn...
author | robcast |
---|---|
date | Tue, 18 Jan 2011 17:16:46 +0100 |
parents | 73357f3dec20 |
children | 7293a42f44f5 |
rev | line source |
---|---|
604 | 1 /* |
2 * digilib jQuery plugin | |
3 * | |
4 */ | |
5 | |
6 (function($) { | |
618
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
7 var actions = { |
610 | 8 reference : { |
9 onclick : "javascript:getRefWin()", | |
10 tooltip : "get a reference URL", | |
11 img : "reference.png" | |
12 }, | |
13 zoomin : { | |
14 onclick : "javascript:dl.zoomBy(1.4)", | |
15 tooltip : "zoom in", | |
16 img : "zoom-in.png" | |
17 }, | |
18 zoomout : { | |
19 onclick : "javascript:zoomBy(0.7)", | |
20 tooltip : "zoom out", | |
21 img : "zoom-out.png" | |
22 }, | |
23 zoomarea : { | |
24 onclick : "javascript:zoomArea()", | |
25 tooltip : "zoom area", | |
26 img : "zoom-area.png" | |
27 }, | |
28 zoomfull : { | |
29 onclick : "javascript:zoomFullpage()", | |
30 tooltip : "view the whole image", | |
31 img : "zoom-full.png" | |
32 }, | |
33 pagewidth : { | |
34 onclick : "javascript:zoomFullpage('width')", | |
35 tooltip : "page width", | |
36 img : "pagewidth.png" | |
37 }, | |
38 back : { | |
623 | 39 onclick : ["gotoPage", "-1"], |
610 | 40 tooltip : "goto previous image", |
41 img : "back.png" | |
42 }, | |
43 fwd : { | |
623 | 44 onclick : ["gotoPage", "+1"], |
610 | 45 tooltip : "goto next image", |
46 img : "fwd.png" | |
47 }, | |
48 page : { | |
49 onclick : "javascript:gotoPageWin()", | |
50 tooltip : "specify image", | |
51 img : "page.png" | |
52 }, | |
53 bird : { | |
617
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
54 onclick : "toggleBirdDiv", |
610 | 55 tooltip : "show bird's eye view", |
56 img : "birds-eye.png" | |
57 }, | |
58 help : { | |
623 | 59 onclick : "toggleAboutDiv", |
610 | 60 tooltip : "about Digilib", |
61 img : "help.png" | |
62 }, | |
63 reset : { | |
64 onclick : "javascript:resetImage()", | |
65 tooltip : "reset image", | |
66 img : "reset.png" | |
67 }, | |
68 mark : { | |
69 onclick : "javascript:setMark()", | |
70 tooltip : "set a mark", | |
71 img : "mark.png" | |
72 }, | |
73 delmark : { | |
74 onclick : "javascript:removeMark()", | |
75 tooltip : "delete the last mark", | |
76 img : "delmark.png" | |
77 }, | |
78 hmir : { | |
79 onclick : "javascript:mirror('h')", | |
80 tooltip : "mirror horizontally", | |
81 img : "mirror-horizontal.png" | |
82 }, | |
83 vmir : { | |
84 onclick : "javascript:mirror('v')", | |
85 tooltip : "mirror vertically", | |
86 img : "mirror-vertical.png" | |
87 }, | |
88 rot : { | |
89 onclick : "javascript:setParamWin('rot', 'Rotate (0..360) clockwise')", | |
90 tooltip : "rotate image", | |
91 img : "rotate.png" | |
92 }, | |
93 brgt : { | |
94 onclick : "javascript:setParamWin('brgt', 'Brightness (-255..255)')", | |
95 tooltip : "set brightness", | |
96 img : "brightness.png" | |
97 }, | |
98 cont : { | |
99 onclick : "javascript:setParamWin('cont', 'Contrast (0..8)')", | |
100 tooltip : "set contrast", | |
101 img : "contrast.png" | |
102 }, | |
103 rgb : { | |
104 onclick : "javascript:setParamWin('rgb', '...')", | |
105 tooltip : "set rgb values", | |
106 img : "rgb.png" | |
107 }, | |
108 quality : { | |
109 onclick : "javascript:setQualityWin('Quality (0..2)')", | |
110 tooltip : "set image quality", | |
111 img : "quality.png" | |
112 }, | |
113 size : { | |
114 onclick : "javascript:toggleSizeMenu()", | |
115 tooltip : "set page size", | |
116 img : "size.png" | |
117 }, | |
118 calibrationx : { | |
119 onclick : "javascript:calibrate('x')", | |
120 tooltip : "calibrate screen x-ratio", | |
121 img : "calibration-x.png" | |
122 }, | |
123 scale : { | |
124 onclick : "javascript:toggleScaleMenu()", | |
125 tooltip : "change image scale", | |
126 img : "original-size.png" | |
127 }, | |
128 options : { | |
129 onclick : "javascript:toggleOptionDiv()", | |
130 tooltip : "hide options", | |
131 img : "options.png" | |
132 }, | |
133 SEP : { | |
134 img : "sep.png" | |
135 } | |
136 }; | |
617
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
137 |
605 | 138 var defaults = { |
617
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
139 // the root digilib element, for easy retrieval |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
140 'digilibRoot' : null, |
616 | 141 // version of this script |
142 'version' : 'jquery.digilib.js 1.0', | |
143 // logo url | |
144 'logoUrl' : '../img/digilib-logo-text1.png', | |
145 // repository url | |
146 'reposUrl' : 'http://digilib.berlios.de', | |
610 | 147 // base URL to Scaler servlet |
148 'scalerBaseUrl' : 'http://digilib.mpiwg-berlin.mpg.de/digitallibrary/servlet/Scaler', | |
149 // list of Scaler parameters | |
627 | 150 'scalerParamNames' : ['fn','pn','dw','dh','ww','wh','wx','wy','ws','mo', |
151 'rot','cont','brgt','rgbm','rgba','ddpi','ddpix','ddpiy'], | |
152 // Scaler parameter defaults | |
153 'ww' : 1.0, | |
154 'wh' : 1.0, | |
155 'wx' : 0.0, | |
156 'wy' : 0.0, | |
157 'ws' : 1.0, | |
610 | 158 // mode of operation. |
159 // fullscreen: takes parameters from page URL, keeps state in page URL | |
160 // embedded: takes parameters from Javascript options, keeps state inside object | |
161 'interactionMode' : 'fullscreen', | |
618
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
162 // actions |
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
163 'actions' : actions, |
612 | 164 // path to button images (must end with a slash) |
165 'buttonsImagePath' : '../greyskin/', | |
618
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
166 // actions groups |
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
167 'actionsStandard' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","SEP","help","reset","options"], |
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
168 'actionsSpecial' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"], |
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
169 'actionsCustom' : [], |
616 | 170 // is birdView shown? |
171 'isBirdDivVisible' : false, | |
615 | 172 // dimensions of bird's eye window |
173 'birdMaxX' : 200, | |
616 | 174 'birdMaxY' : 200, |
175 // is the "about" window shown? | |
176 'isAboutDivVisible' : false | |
177 | |
610 | 178 }; |
605 | 179 |
608 | 180 // parameters from the query string |
607 | 181 var queryParams = {}; |
608 | 182 |
183 // affine geometry classes | |
184 var geom = dlGeometry(); | |
604 | 185 |
186 var methods = { | |
608 | 187 // digilib initialization |
604 | 188 init : function(options) { |
608 | 189 // settings for this digilib instance are merged from defaults and options |
607 | 190 var settings = $.extend({}, defaults, options); |
191 var isFullscreen = settings.interactionMode === 'fullscreen'; | |
192 if (isFullscreen) { | |
193 queryParams = parseQueryParams(); | |
634 | 194 } |
604 | 195 return this.each(function() { |
605 | 196 var $elem = $(this); |
197 var data = $elem.data('digilib'); | |
607 | 198 var elemSettings; |
608 | 199 // if the plugin hasn't been initialized yet |
604 | 200 if (!data) { |
605 | 201 // merge query parameters |
607 | 202 if (isFullscreen) { |
203 elemSettings = $.extend({}, settings, queryParams); | |
204 } else { | |
205 elemSettings = $.extend({}, settings, parseImgParams($elem)); | |
634 | 206 } |
617
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
207 // store $(this) element in the settings |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
208 elemSettings.digilibRoot = $elem; |
627 | 209 data = { |
210 target : $elem, | |
211 settings : elemSettings | |
212 }; | |
605 | 213 // store in data element |
627 | 214 $elem.data('digilib', data); |
604 | 215 } |
633 | 216 unpackParams(data); |
608 | 217 // create HTML structure |
627 | 218 setupScalerDiv(data); |
628
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
219 setupButtons(data, 'actionsStandard'); |
627 | 220 // bird's eye view creation - TODO: could be deferred? |
628
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
221 setupBirdviewDiv(data); |
627 | 222 // about window creation - TODO: could be deferred? restrict to only one item? |
628
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
223 setupAboutDiv(data); |
604 | 224 }); |
225 }, | |
608 | 226 |
227 // clean up digilib | |
604 | 228 destroy : function() { |
229 return this.each(function(){ | |
230 var $this = $(this); | |
231 var data = $this.data('digilib'); | |
232 // Namespacing FTW | |
605 | 233 $(window).unbind('.digilib'); // unbinds all digilibs(?) |
604 | 234 data.digilib.remove(); |
235 $this.removeData('digilib'); | |
236 }); | |
617
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
237 }, |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
238 |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
239 // event handler: toggles the visibility of the 'about' window |
634 | 240 toggleAboutDiv : function() { |
241 var $this = $(this); | |
242 var data = $this.data('digilib'); | |
243 showAboutDivFn(data)(); | |
617
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
244 }, |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
245 |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
246 // event handler: toggles the visibility of the bird's eye window |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
247 toggleBirdDiv : function () { |
623 | 248 // TODO: red frame functionality |
617
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
249 var $elem = $(this); // the clicked button |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
250 var settings = $elem.data('digilib').settings; |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
251 var $root = settings.digilibRoot; |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
252 var $bird = $root.find('div.birdview'); |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
253 settings.isBirdDivVisible = !settings.isBirdDivVisible; |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
254 if (settings.isBirdDivVisible) { |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
255 $bird.fadeIn(); |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
256 } else { |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
257 $bird.fadeOut(); |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
258 }; |
cd846b5c8be8
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
616
diff
changeset
|
259 return false; |
623 | 260 }, |
261 | |
262 // goto given page nr (+/-: relative) | |
263 gotoPage : function(pageNr, keepMarks) { | |
264 var $elem = $(this); // the clicked button | |
265 var settings = $elem.data('digilib').settings; | |
266 var oldpn = settings.pn; | |
624 | 267 var pn = setNumValue(settings, "pn", pageNr); |
268 if (pn == null) return false; // nothing happened | |
623 | 269 if (pn < 1) { |
270 alert("no such page (page number too low)"); | |
271 settings.pn = oldpn; | |
272 return false; | |
634 | 273 } |
623 | 274 if (settings.pt) { |
275 if (pn > settings.pt) { | |
276 alert("no such page (page number too high)"); | |
277 settings.pn = oldpn; | |
278 return false; | |
279 } | |
634 | 280 } |
623 | 281 // TODO: keepMarks |
282 var $root = settings.digilibRoot; | |
283 var $img = $root.find('img.pic'); | |
284 display($img, settings); | |
624 | 285 return false; |
604 | 286 } |
605 | 287 }; |
604 | 288 |
623 | 289 // sets a key to a value (relative values with +/- if relative=true) |
290 var setNumValue = function(settings, key, value) { | |
291 // TODO: type and error checking | |
292 if (settings[key] == null) return null; | |
293 var sign = value.substring(0,1); | |
294 if (sign === '+' || sign === '-') { | |
295 settings[key] = parseFloat(settings[key]) + parseFloat(value); | |
296 } else { | |
297 settings[key] = value; | |
298 } | |
299 return settings[key]; | |
300 }; | |
301 | |
608 | 302 // returns parameters from page url |
607 | 303 var parseQueryParams = function() { |
304 return parseQueryString(location.search.slice(1)); | |
305 }; | |
306 | |
608 | 307 // returns parameters taken from embedded img-element |
607 | 308 var parseImgParams = function($elem) { |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
309 var src = $elem.find('img').first().attr('src'); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
310 if (!src) { |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
311 return null; |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
312 } |
607 | 313 var pos = src.indexOf('?'); |
314 var query = (pos < 0) ? '' : src.substring(pos + 1); | |
315 var scalerUrl = src.substring(0, pos); | |
627 | 316 var params = parseQueryString(query); |
317 params.scalerBaseUrl = scalerUrl; | |
607 | 318 // console.log(hash); |
627 | 319 return params; |
607 | 320 }; |
321 | |
608 | 322 // parses query parameter string into parameter object |
607 | 323 var parseQueryString = function(query) { |
324 var pairs = query.split("&"); | |
627 | 325 var params = {}; |
607 | 326 for (var i = 0; i < pairs.length; i++) { |
327 var pair = pairs[i].split("="); | |
328 if (pair.length === 2) { | |
627 | 329 params[pair[0]] = pair[1]; |
634 | 330 } |
331 } | |
627 | 332 return params; |
607 | 333 }; |
604 | 334 |
615 | 335 // returns a query string from key names from a parameter hash |
628
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
336 var getParamString = function (settings, keys) { |
615 | 337 var paramString = ''; |
338 var latter = false; | |
339 for (i = 0; i < keys.length; ++i) { | |
340 var key = keys[i]; | |
341 if (settings[key]) { | |
342 // first param gets no '&' | |
343 paramString += latter ? '&' : ''; | |
344 latter = true; | |
345 // add parm=val | |
346 paramString += key + '=' + settings[key]; | |
634 | 347 } |
615 | 348 } |
349 return paramString; | |
631 | 350 }; |
351 | |
352 // processes some parameters into objects and stuff | |
353 var unpackParams = function (data) { | |
354 var settings = data.settings; | |
355 // read zoom area | |
356 var zoomArea = geom.rectangle(settings.wx, settings.wy, settings.ww, settings.wh); | |
357 settings.zoomArea = zoomArea; | |
615 | 358 |
631 | 359 // read marks |
360 var marks = []; | |
633 | 361 var mk = settings.mk || ''; |
362 if (mk.indexOf(";") >= 0) { | |
363 var pa = mk.split(";"); // old format with ";" | |
631 | 364 } else { |
633 | 365 var pa = mk.split(","); // new format |
631 | 366 } |
367 for (var i = 0; i < pa.length ; i++) { | |
368 var pos = pa[i].split("/"); | |
633 | 369 if (pos.length > 1) { |
370 marks.push(geom.position(pos[0], pos[1])); | |
371 } | |
631 | 372 } |
373 settings.marks = marks; | |
374 }; | |
375 | |
376 // put objects back into parameters | |
377 var packParams = function (data) { | |
378 var settings = data.settings; | |
379 if (settings.zoomArea) { | |
380 settings.wx = settings.zoomArea.x; | |
381 settings.wy = settings.zoomArea.y; | |
382 settings.ww = settings.zoomArea.width; | |
383 settings.wh = settings.zoomArea.height; | |
384 } | |
385 if (settings.marks) { | |
386 var ma = []; | |
387 for (var i = 0; i < settings.marks.length; i++) { | |
388 ma.push(cropFloat(settings.marks[i].x) + "/" + cropFloat(settings.marks[i].y)); | |
389 } | |
390 settings.mk = ma.join(","); | |
391 } | |
392 }; | |
393 | |
608 | 394 // returns URL and query string for Scaler |
395 var getScalerString = function (settings) { | |
615 | 396 var keys = settings.scalerParamNames; |
628
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
397 var queryString = getParamString(settings, keys); |
615 | 398 var url = settings.scalerBaseUrl + '?' + queryString; |
609 | 399 return url; |
400 }; | |
615 | 401 |
609 | 402 // returns maximum size for scaler img in fullscreen mode |
403 var getFullscreenImgSize = function($elem) { | |
404 var winH = $(window).height(); | |
405 var winW = $(window).width(); | |
406 // TODO: account for borders? | |
407 return geom.size(winW, winH); | |
608 | 408 }; |
409 | |
622 | 410 // (re)load the img from a new scaler URL |
411 var display = function ($img, settings) { | |
623 | 412 // TODO: update location.href (browser URL) in fullscreen mode |
622 | 413 var scalerUrl = getScalerString(settings); |
414 $img.attr('src', scalerUrl); | |
623 | 415 // TODO: update bird view? |
622 | 416 }; |
417 | |
608 | 418 // creates HTML structure for digilib in elem |
627 | 419 var setupScalerDiv = function (data) { |
420 var settings = data.settings; | |
421 var $elem = data.target; | |
623 | 422 var $img; |
608 | 423 if (settings.interactionMode === 'fullscreen') { |
609 | 424 // fullscreen |
425 var imgSize = getFullscreenImgSize($elem); | |
426 settings.dw = imgSize.width; | |
427 settings.dh = imgSize.height; | |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
428 $img = $('<img/>'); |
629 | 429 display($img, settings); // TODO: is display the right thing here? |
609 | 430 } else { |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
431 // embedded mode -- try to keep img tag |
623 | 432 $img = $elem.find('img'); |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
433 if ($img.length > 0) { |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
434 console.debug("img detach:",$img); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
435 $img.detach(); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
436 } else { |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
437 $img = $('<img/>'); |
629 | 438 display($img, settings); // dito |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
439 } |
608 | 440 } |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
441 // create new html |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
442 $elem.empty(); // TODO: should we keep stuff for customization? |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
443 var $scaler = $('<div class="scaler"/>'); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
444 $elem.append($scaler); |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
445 $scaler.append($img); |
622 | 446 $img.addClass('pic'); |
627 | 447 data.img = $img; |
448 $img.load(scalerImgLoadedFn(data)); | |
608 | 449 }; |
615 | 450 |
610 | 451 // creates HTML structure for buttons in elem |
628
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
452 var setupButtons = function (data, actionGroup) { |
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
453 var $elem = data.target; |
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
454 var settings = data.settings; |
610 | 455 if (settings.interactionMode === 'fullscreen') { |
456 // fullscreen -- create new | |
612 | 457 var $buttonsDiv = $('<div class="buttons"></div>'); |
458 $elem.append($buttonsDiv); | |
618
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
459 var actionNames = settings[actionGroup]; |
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
460 for (var i = 0; i < actionNames.length; i++) { |
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
461 var actionName = actionNames[i]; |
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
462 var actionSettings = settings.actions[actionName]; |
612 | 463 // construct the button html |
464 var $button = $('<div class="button"></div>'); | |
465 var $a = $('<a/>'); | |
614 | 466 var $img = $('<img class="button"/>'); |
612 | 467 $buttonsDiv.append($button); |
468 $button.append($a); | |
469 $a.append($img); | |
470 // add attributes and bindings | |
618
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
471 $button.attr('title', actionSettings.tooltip); |
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
472 $button.addClass('button-' + actionName); |
612 | 473 // let the clicked <a> element know about the digilib context |
618
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
474 $a.data('digilib', { 'action' : actionName, 'settings' : settings } ); |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
475 $a.bind('click', function() { |
619 | 476 var $elem = $(this); |
477 // get the context data | |
478 var data = $elem.data('digilib'); | |
612 | 479 // find the action for the clicked element |
618
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
480 var method = data.settings.actions[data.action].onclick; |
619 | 481 if ($.isArray(method)) { |
482 $elem.digilib.apply(this, method); | |
483 } else { | |
484 $elem.digilib(method); | |
485 }; | |
618
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
486 console.log(method); |
612 | 487 }); |
488 // binding mit closure | |
619 | 489 //(function(){ var action = actionSettings.onclick; |
612 | 490 // $a.bind('click', function(){ console.log( action )} ); |
491 //})(); | |
618
09167ef1512e
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
617
diff
changeset
|
492 $img.attr('src', settings.buttonsImagePath + actionSettings.img); |
611 | 493 }; |
494 } | |
612 | 495 return $buttonsDiv; |
610 | 496 }; |
615 | 497 |
498 // creates HTML structure for the bird's eye view in elem | |
628
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
499 var setupBirdviewDiv = function (data) { |
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
500 var $elem = data.target; |
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
501 var settings = data.settings; |
615 | 502 // use only the relevant parameters |
503 var keys = ['fn','pn','dw','dh']; | |
504 var birdDimensions = { | |
505 'dw' : settings.birdMaxX, | |
506 'dh' : settings.birdMaxY | |
507 }; | |
508 var birdSettings = $.extend({}, settings, birdDimensions); | |
628
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
509 var birdUrl = settings.scalerBaseUrl + '?' + getParamString(birdSettings, keys); |
615 | 510 // the bird's eye div |
625 | 511 var $birdviewDiv = $('<div class="birdview" style="display:none"/>'); |
615 | 512 // the detail indicator frame |
513 var $birdzoomDiv = $('<div class="birdzoom"/>'); | |
514 // the small image | |
515 var $birdImg = $('<img class="birdimg"/>'); | |
516 $elem.append($birdviewDiv); | |
517 $birdviewDiv.append($birdzoomDiv); | |
518 $birdviewDiv.append($birdImg); | |
519 $birdImg.attr('src', birdUrl); | |
520 }; | |
521 | |
625 | 522 // creates HTML structure for the about view in elem |
628
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
523 var setupAboutDiv = function (data) { |
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
524 var $elem = data.target; |
1f077f8afc5e
changed methods to pass "data" around instead of "settings"
robcast
parents:
627
diff
changeset
|
525 var settings = data.settings; |
625 | 526 var $aboutDiv = $('<div class="about" style="display:none"/>'); |
616 | 527 var $header = $('<p>Digilib Graphic Viewer</p>'); |
528 var $link = $('<a/>'); | |
529 var $logo = $('<img class="logo" title="digilib"/>'); | |
530 var $content = $('<p/>'); | |
531 $elem.append($aboutDiv); | |
532 $aboutDiv.append($header); | |
533 $aboutDiv.append($link); | |
534 $aboutDiv.append($content); | |
535 $link.append($logo); | |
536 $logo.attr('src', settings.logoUrl); | |
537 $link.attr('href', settings.reposUrl); | |
538 $content.text('Version: ' + settings.version); | |
619 | 539 // let the element know about the digilib context |
540 $aboutDiv.data('digilib', { 'settings' : settings } ); | |
634 | 541 $aboutDiv.bind('click', showAboutDivFn(data, 0)); |
542 }; | |
543 | |
544 // returns handler for showing the 'about' window (toggle visibility if show is null) | |
545 var showAboutDivFn = function (data, show) { | |
546 var $elem = data.target; | |
547 var settings = data.settings; | |
548 // event handler: toggles the visibility of the 'about' window | |
549 return function () { | |
550 var $about = $elem.find('div.about'); | |
551 if (typeof(show) !== 'number') { | |
552 // toggle visibility | |
553 settings.isAboutDivVisible = !settings.isAboutDivVisible; | |
554 } else { | |
555 // set visibility | |
556 settings.isAboutDivVisible = show; | |
557 } | |
558 if (settings.isAboutDivVisible) { | |
559 $about.fadeIn(); | |
560 } else { | |
561 $about.fadeOut(); | |
562 } | |
616 | 563 }; |
634 | 564 }; |
616 | 565 |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
566 // returns function for load event of scaler img |
633 | 567 var scalerImgLoadedFn = function (data) { |
627 | 568 var settings = data.settings; |
569 var $elem = data.target; | |
570 var $img = data.img; | |
571 | |
633 | 572 return function () { |
627 | 573 console.debug("img loaded! this=", this, " data=", data); |
631 | 574 var area = settings.zoomArea; |
627 | 575 // create Transform from current area and picsize |
576 var picpos = $img.offset(); | |
577 var picrect = geom.rectangle(picpos.left, picpos.top, $img.width(), $img.height()); | |
578 var trafo = geom.transform(); | |
579 // subtract area offset and size | |
580 trafo.concat(trafo.getTranslation(geom.position(area.x, area.y))); | |
581 trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height))); | |
582 // scale to screen size | |
583 trafo.concat(trafo.getScale(picrect)); | |
584 trafo.concat(trafo.getTranslation(picrect)); | |
585 data.imgTrafo = trafo; | |
586 // display marks | |
633 | 587 renderMarks(data); |
627 | 588 //digilib.showBirdDiv(isBirdDivVisible); |
589 //digilib.showArrows(); // show arrow overlays for zoom navigation | |
634 | 590 // done -- hide about div |
591 showAboutDivFn(data, 0)(); | |
613
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
592 }; |
53ee659e2d00
keeping img tag for embedded mode seems to work now
robcast
parents:
612
diff
changeset
|
593 }; |
633 | 594 |
595 // place marks on the image | |
596 var renderMarks = function (data) { | |
597 var $elem = data.target; | |
598 var marks = data.settings.marks; | |
599 for (var i = 0; i < marks.length; i++) { | |
600 var mark = marks[i]; | |
601 if (data.settings.zoomArea.containsPosition(mark)) { | |
602 var mpos = data.imgTrafo.transform(mark); | |
603 // create mark | |
604 var html = '<div class="mark">'+(i+1)+'</div>'; | |
605 var $mark = $(html); | |
606 $elem.append($mark); | |
607 $mark.offset({ left : mpos.x, top : mpos.y}); | |
608 } | |
609 } | |
610 }; | |
631 | 611 |
612 // auxiliary function to crop senseless precision | |
613 var cropFloat = function (x) { | |
614 return parseInt(10000 * x) / 10000; | |
615 }; | |
616 | |
605 | 617 // hook plugin into jquery |
618 $.fn.digilib = function(method) { | |
619 if (methods[method]) { | |
634 | 620 // call method on this with the remaining arguments |
605 | 621 return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); |
622 } else if (typeof(method) === 'object' || !method) { | |
634 | 623 // call init on this |
605 | 624 return methods.init.apply(this, arguments); |
625 } else { | |
634 | 626 $.error( 'Method ' + method + ' does not exist on jQuery.digilib' ); |
605 | 627 } |
628 }; | |
604 | 629 |
630 })(jQuery); |