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