Mercurial > hg > digilib
annotate client/digitallibrary/jquery/jquery.digilib.js @ 628:a78491a53c2a jquery
changed button onclick binding to use closure
toggleAboutDiv action is now showAboutDiv(), dito for BirdDiv
showXXDiv function is now showDiv
| author | robcast |
|---|---|
| date | Tue, 18 Jan 2011 19:27:20 +0100 |
| parents | adb852652441 |
| children | 6b24ad042d7b |
| rev | line source |
|---|---|
| 597 | 1 /* |
| 2 * digilib jQuery plugin | |
| 3 * | |
| 4 */ | |
| 5 | |
| 6 (function($) { | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
7 var actions = { |
| 603 | 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 : { | |
| 616 | 39 onclick : ["gotoPage", "-1"], |
| 603 | 40 tooltip : "goto previous image", |
| 41 img : "back.png" | |
| 42 }, | |
| 43 fwd : { | |
| 616 | 44 onclick : ["gotoPage", "+1"], |
| 603 | 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 : { | |
| 628 | 54 onclick : "showBirdDiv", |
| 603 | 55 tooltip : "show bird's eye view", |
| 56 img : "birds-eye.png" | |
| 57 }, | |
| 58 help : { | |
| 628 | 59 onclick : "showAboutDiv", |
| 603 | 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 }; | |
|
610
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
137 |
| 598 | 138 var defaults = { |
|
610
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
139 // the root digilib element, for easy retrieval |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
140 'digilibRoot' : null, |
| 609 | 141 // version of this script |
| 628 | 142 'version' : 'jquery.digilib.js 0.9', |
| 609 | 143 // logo url |
| 144 'logoUrl' : '../img/digilib-logo-text1.png', | |
| 628 | 145 // homepage url (behind logo) |
| 146 'homeUrl' : 'http://digilib.berlios.de', | |
| 603 | 147 // base URL to Scaler servlet |
| 148 'scalerBaseUrl' : 'http://digilib.mpiwg-berlin.mpg.de/digitallibrary/servlet/Scaler', | |
| 149 // list of Scaler parameters | |
| 620 | 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, | |
| 603 | 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', | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
162 // actions |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
163 'actions' : actions, |
| 605 | 164 // path to button images (must end with a slash) |
| 165 'buttonsImagePath' : '../greyskin/', | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
166 // actions groups |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
167 '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
|
168 '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
|
169 'actionsCustom' : [], |
| 609 | 170 // is birdView shown? |
| 171 'isBirdDivVisible' : false, | |
| 608 | 172 // dimensions of bird's eye window |
| 173 'birdMaxX' : 200, | |
| 609 | 174 'birdMaxY' : 200, |
| 175 // is the "about" window shown? | |
| 176 'isAboutDivVisible' : false | |
| 177 | |
| 603 | 178 }; |
| 598 | 179 |
| 601 | 180 // parameters from the query string |
| 600 | 181 var queryParams = {}; |
| 601 | 182 |
| 183 // affine geometry classes | |
| 184 var geom = dlGeometry(); | |
| 597 | 185 |
| 186 var methods = { | |
| 601 | 187 // digilib initialization |
| 597 | 188 init : function(options) { |
| 601 | 189 // settings for this digilib instance are merged from defaults and options |
| 600 | 190 var settings = $.extend({}, defaults, options); |
| 191 var isFullscreen = settings.interactionMode === 'fullscreen'; | |
| 192 if (isFullscreen) { | |
| 193 queryParams = parseQueryParams(); | |
| 627 | 194 } |
| 597 | 195 return this.each(function() { |
| 598 | 196 var $elem = $(this); |
| 197 var data = $elem.data('digilib'); | |
| 600 | 198 var elemSettings; |
| 601 | 199 // if the plugin hasn't been initialized yet |
| 597 | 200 if (!data) { |
| 598 | 201 // merge query parameters |
| 600 | 202 if (isFullscreen) { |
| 203 elemSettings = $.extend({}, settings, queryParams); | |
| 204 } else { | |
| 205 elemSettings = $.extend({}, settings, parseImgParams($elem)); | |
| 627 | 206 } |
|
610
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
207 // store $(this) element in the settings |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
208 elemSettings.digilibRoot = $elem; |
| 620 | 209 data = { |
| 210 target : $elem, | |
| 211 settings : elemSettings | |
| 212 }; | |
| 598 | 213 // store in data element |
| 620 | 214 $elem.data('digilib', data); |
| 597 | 215 } |
| 626 | 216 unpackParams(data); |
| 601 | 217 // create HTML structure |
| 620 | 218 setupScalerDiv(data); |
|
621
7f97716b901c
changed methods to pass "data" around instead of "settings"
robcast
parents:
620
diff
changeset
|
219 setupButtons(data, 'actionsStandard'); |
| 620 | 220 // 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
|
221 setupBirdviewDiv(data); |
| 620 | 222 // 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
|
223 setupAboutDiv(data); |
| 597 | 224 }); |
| 225 }, | |
| 601 | 226 |
| 227 // clean up digilib | |
| 597 | 228 destroy : function() { |
| 229 return this.each(function(){ | |
| 230 var $this = $(this); | |
| 231 var data = $this.data('digilib'); | |
| 232 // Namespacing FTW | |
| 598 | 233 $(window).unbind('.digilib'); // unbinds all digilibs(?) |
| 597 | 234 data.digilib.remove(); |
| 235 $this.removeData('digilib'); | |
| 236 }); | |
|
610
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
237 }, |
|
2f2cd8c44a1c
toggle view event handlers for bird's eye and 'about windows
hertzhaft
parents:
609
diff
changeset
|
238 |
| 628 | 239 // show or hide the 'about' window |
| 240 showAboutDiv : function(show) { | |
| 627 | 241 var $this = $(this); |
| 242 var data = $this.data('digilib'); | |
| 628 | 243 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
|
244 }, |
|
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 // event handler: toggles the visibility of the bird's eye window |
| 628 | 247 showBirdDiv : function (show) { |
| 248 var $this = $(this); | |
| 249 var data = $this.data('digilib'); | |
| 250 data.settings.isBirdDivVisible = showDiv(data.settings.isBirdDivVisible, data.$birdDiv, show); | |
| 616 | 251 }, |
| 252 | |
| 253 // goto given page nr (+/-: relative) | |
| 254 gotoPage : function(pageNr, keepMarks) { | |
| 255 var $elem = $(this); // the clicked button | |
| 256 var settings = $elem.data('digilib').settings; | |
| 257 var oldpn = settings.pn; | |
| 617 | 258 var pn = setNumValue(settings, "pn", pageNr); |
| 259 if (pn == null) return false; // nothing happened | |
| 616 | 260 if (pn < 1) { |
| 261 alert("no such page (page number too low)"); | |
| 262 settings.pn = oldpn; | |
| 263 return false; | |
| 627 | 264 } |
| 616 | 265 if (settings.pt) { |
| 266 if (pn > settings.pt) { | |
| 267 alert("no such page (page number too high)"); | |
| 268 settings.pn = oldpn; | |
| 269 return false; | |
| 270 } | |
| 627 | 271 } |
| 616 | 272 // TODO: keepMarks |
| 273 var $root = settings.digilibRoot; | |
| 274 var $img = $root.find('img.pic'); | |
| 275 display($img, settings); | |
| 617 | 276 return false; |
| 597 | 277 } |
| 598 | 278 }; |
| 597 | 279 |
| 616 | 280 // sets a key to a value (relative values with +/- if relative=true) |
| 281 var setNumValue = function(settings, key, value) { | |
| 282 // TODO: type and error checking | |
| 283 if (settings[key] == null) return null; | |
| 284 var sign = value.substring(0,1); | |
| 285 if (sign === '+' || sign === '-') { | |
| 286 settings[key] = parseFloat(settings[key]) + parseFloat(value); | |
| 287 } else { | |
| 288 settings[key] = value; | |
| 289 } | |
| 290 return settings[key]; | |
| 291 }; | |
| 292 | |
| 601 | 293 // returns parameters from page url |
| 600 | 294 var parseQueryParams = function() { |
| 295 return parseQueryString(location.search.slice(1)); | |
| 296 }; | |
| 297 | |
| 601 | 298 // returns parameters taken from embedded img-element |
| 600 | 299 var parseImgParams = function($elem) { |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
300 var src = $elem.find('img').first().attr('src'); |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
301 if (!src) { |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
302 return null; |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
303 } |
| 600 | 304 var pos = src.indexOf('?'); |
| 305 var query = (pos < 0) ? '' : src.substring(pos + 1); | |
| 306 var scalerUrl = src.substring(0, pos); | |
| 620 | 307 var params = parseQueryString(query); |
| 308 params.scalerBaseUrl = scalerUrl; | |
| 600 | 309 // console.log(hash); |
| 620 | 310 return params; |
| 600 | 311 }; |
| 312 | |
| 601 | 313 // parses query parameter string into parameter object |
| 600 | 314 var parseQueryString = function(query) { |
| 315 var pairs = query.split("&"); | |
| 620 | 316 var params = {}; |
| 600 | 317 for (var i = 0; i < pairs.length; i++) { |
| 318 var pair = pairs[i].split("="); | |
| 319 if (pair.length === 2) { | |
| 620 | 320 params[pair[0]] = pair[1]; |
| 627 | 321 } |
| 322 } | |
| 620 | 323 return params; |
| 600 | 324 }; |
| 597 | 325 |
| 608 | 326 // 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
|
327 var getParamString = function (settings, keys) { |
| 608 | 328 var paramString = ''; |
| 329 var latter = false; | |
| 330 for (i = 0; i < keys.length; ++i) { | |
| 331 var key = keys[i]; | |
| 332 if (settings[key]) { | |
| 333 // first param gets no '&' | |
| 334 paramString += latter ? '&' : ''; | |
| 335 latter = true; | |
| 336 // add parm=val | |
| 337 paramString += key + '=' + settings[key]; | |
| 627 | 338 } |
| 608 | 339 } |
| 340 return paramString; | |
| 624 | 341 }; |
| 342 | |
| 343 // processes some parameters into objects and stuff | |
| 344 var unpackParams = function (data) { | |
| 345 var settings = data.settings; | |
| 346 // read zoom area | |
| 347 var zoomArea = geom.rectangle(settings.wx, settings.wy, settings.ww, settings.wh); | |
| 348 settings.zoomArea = zoomArea; | |
| 608 | 349 |
| 624 | 350 // read marks |
| 351 var marks = []; | |
| 626 | 352 var mk = settings.mk || ''; |
| 353 if (mk.indexOf(";") >= 0) { | |
| 354 var pa = mk.split(";"); // old format with ";" | |
| 624 | 355 } else { |
| 626 | 356 var pa = mk.split(","); // new format |
| 624 | 357 } |
| 358 for (var i = 0; i < pa.length ; i++) { | |
| 359 var pos = pa[i].split("/"); | |
| 626 | 360 if (pos.length > 1) { |
| 361 marks.push(geom.position(pos[0], pos[1])); | |
| 362 } | |
| 624 | 363 } |
| 364 settings.marks = marks; | |
| 365 }; | |
| 366 | |
| 367 // put objects back into parameters | |
| 368 var packParams = function (data) { | |
| 369 var settings = data.settings; | |
| 370 if (settings.zoomArea) { | |
| 371 settings.wx = settings.zoomArea.x; | |
| 372 settings.wy = settings.zoomArea.y; | |
| 373 settings.ww = settings.zoomArea.width; | |
| 374 settings.wh = settings.zoomArea.height; | |
| 375 } | |
| 376 if (settings.marks) { | |
| 377 var ma = []; | |
| 378 for (var i = 0; i < settings.marks.length; i++) { | |
| 379 ma.push(cropFloat(settings.marks[i].x) + "/" + cropFloat(settings.marks[i].y)); | |
| 380 } | |
| 381 settings.mk = ma.join(","); | |
| 382 } | |
| 383 }; | |
| 384 | |
| 601 | 385 // returns URL and query string for Scaler |
| 386 var getScalerString = function (settings) { | |
| 608 | 387 var keys = settings.scalerParamNames; |
|
621
7f97716b901c
changed methods to pass "data" around instead of "settings"
robcast
parents:
620
diff
changeset
|
388 var queryString = getParamString(settings, keys); |
| 608 | 389 var url = settings.scalerBaseUrl + '?' + queryString; |
| 602 | 390 return url; |
| 391 }; | |
| 608 | 392 |
| 602 | 393 // returns maximum size for scaler img in fullscreen mode |
| 394 var getFullscreenImgSize = function($elem) { | |
| 395 var winH = $(window).height(); | |
| 396 var winW = $(window).width(); | |
| 397 // TODO: account for borders? | |
| 398 return geom.size(winW, winH); | |
| 601 | 399 }; |
| 400 | |
| 615 | 401 // (re)load the img from a new scaler URL |
| 402 var display = function ($img, settings) { | |
| 616 | 403 // TODO: update location.href (browser URL) in fullscreen mode |
| 615 | 404 var scalerUrl = getScalerString(settings); |
| 405 $img.attr('src', scalerUrl); | |
| 616 | 406 // TODO: update bird view? |
| 615 | 407 }; |
| 408 | |
| 601 | 409 // creates HTML structure for digilib in elem |
| 620 | 410 var setupScalerDiv = function (data) { |
| 411 var settings = data.settings; | |
| 412 var $elem = data.target; | |
| 616 | 413 var $img; |
| 601 | 414 if (settings.interactionMode === 'fullscreen') { |
| 602 | 415 // fullscreen |
| 416 var imgSize = getFullscreenImgSize($elem); | |
| 417 settings.dw = imgSize.width; | |
| 418 settings.dh = imgSize.height; | |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
419 $img = $('<img/>'); |
| 622 | 420 display($img, settings); // TODO: is display the right thing here? |
| 602 | 421 } else { |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
422 // embedded mode -- try to keep img tag |
| 616 | 423 $img = $elem.find('img'); |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
424 if ($img.length > 0) { |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
425 console.debug("img detach:",$img); |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
426 $img.detach(); |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
427 } else { |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
428 $img = $('<img/>'); |
| 622 | 429 display($img, settings); // dito |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
430 } |
| 601 | 431 } |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
432 // create new html |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
433 $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
|
434 var $scaler = $('<div class="scaler"/>'); |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
435 $elem.append($scaler); |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
436 $scaler.append($img); |
| 615 | 437 $img.addClass('pic'); |
| 620 | 438 data.img = $img; |
| 439 $img.load(scalerImgLoadedFn(data)); | |
| 601 | 440 }; |
| 608 | 441 |
| 603 | 442 // creates HTML structure for buttons in elem |
|
621
7f97716b901c
changed methods to pass "data" around instead of "settings"
robcast
parents:
620
diff
changeset
|
443 var setupButtons = function (data, actionGroup) { |
|
7f97716b901c
changed methods to pass "data" around instead of "settings"
robcast
parents:
620
diff
changeset
|
444 var $elem = data.target; |
|
7f97716b901c
changed methods to pass "data" around instead of "settings"
robcast
parents:
620
diff
changeset
|
445 var settings = data.settings; |
| 603 | 446 if (settings.interactionMode === 'fullscreen') { |
| 447 // fullscreen -- create new | |
| 605 | 448 var $buttonsDiv = $('<div class="buttons"></div>'); |
| 449 $elem.append($buttonsDiv); | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
450 var actionNames = settings[actionGroup]; |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
451 for (var i = 0; i < actionNames.length; i++) { |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
452 var actionName = actionNames[i]; |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
453 var actionSettings = settings.actions[actionName]; |
| 605 | 454 // construct the button html |
| 455 var $button = $('<div class="button"></div>'); | |
| 456 var $a = $('<a/>'); | |
| 607 | 457 var $img = $('<img class="button"/>'); |
| 605 | 458 $buttonsDiv.append($button); |
| 459 $button.append($a); | |
| 460 $a.append($img); | |
| 461 // add attributes and bindings | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
462 $button.attr('title', actionSettings.tooltip); |
|
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
463 $button.addClass('button-' + actionName); |
| 628 | 464 // create handler for the buttons |
| 465 $a.bind('click', (function () { | |
| 466 // we create a new closure to capture the value of method | |
| 467 var method = actionSettings.onclick; | |
| 612 | 468 if ($.isArray(method)) { |
| 628 | 469 // the handler function calls digilib with method and parameters |
| 470 return function () { | |
| 471 console.debug('click method=', method); | |
| 472 $elem.digilib.apply($elem, method); | |
| 612 | 473 }; |
| 628 | 474 } else { |
| 475 // the handler function calls digilib with method | |
| 476 return function () { | |
| 477 console.debug('click method=', method); | |
| 478 $elem.digilib(method); | |
| 479 }; | |
| 480 } | |
| 481 })()); | |
|
611
d332c61da1b0
some refactoring, onclick handlers now work with arguments
hertzhaft
parents:
610
diff
changeset
|
482 $img.attr('src', settings.buttonsImagePath + actionSettings.img); |
| 604 | 483 }; |
| 484 } | |
| 605 | 485 return $buttonsDiv; |
| 603 | 486 }; |
| 608 | 487 |
| 488 // 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
|
489 var setupBirdviewDiv = function (data) { |
|
7f97716b901c
changed methods to pass "data" around instead of "settings"
robcast
parents:
620
diff
changeset
|
490 var $elem = data.target; |
|
7f97716b901c
changed methods to pass "data" around instead of "settings"
robcast
parents:
620
diff
changeset
|
491 var settings = data.settings; |
| 608 | 492 // use only the relevant parameters |
| 493 var keys = ['fn','pn','dw','dh']; | |
| 494 var birdDimensions = { | |
| 495 'dw' : settings.birdMaxX, | |
| 496 'dh' : settings.birdMaxY | |
| 497 }; | |
| 498 var birdSettings = $.extend({}, settings, birdDimensions); | |
|
621
7f97716b901c
changed methods to pass "data" around instead of "settings"
robcast
parents:
620
diff
changeset
|
499 var birdUrl = settings.scalerBaseUrl + '?' + getParamString(birdSettings, keys); |
| 608 | 500 // the bird's eye div |
| 618 | 501 var $birdviewDiv = $('<div class="birdview" style="display:none"/>'); |
| 608 | 502 // the detail indicator frame |
| 503 var $birdzoomDiv = $('<div class="birdzoom"/>'); | |
| 504 // the small image | |
| 505 var $birdImg = $('<img class="birdimg"/>'); | |
| 506 $elem.append($birdviewDiv); | |
| 507 $birdviewDiv.append($birdzoomDiv); | |
| 508 $birdviewDiv.append($birdImg); | |
| 509 $birdImg.attr('src', birdUrl); | |
| 628 | 510 data.$birdDiv = $birdviewDiv; |
| 608 | 511 }; |
| 512 | |
| 618 | 513 // 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
|
514 var setupAboutDiv = function (data) { |
|
7f97716b901c
changed methods to pass "data" around instead of "settings"
robcast
parents:
620
diff
changeset
|
515 var $elem = data.target; |
|
7f97716b901c
changed methods to pass "data" around instead of "settings"
robcast
parents:
620
diff
changeset
|
516 var settings = data.settings; |
| 618 | 517 var $aboutDiv = $('<div class="about" style="display:none"/>'); |
| 609 | 518 var $header = $('<p>Digilib Graphic Viewer</p>'); |
| 519 var $link = $('<a/>'); | |
| 520 var $logo = $('<img class="logo" title="digilib"/>'); | |
| 521 var $content = $('<p/>'); | |
| 522 $elem.append($aboutDiv); | |
| 523 $aboutDiv.append($header); | |
| 524 $aboutDiv.append($link); | |
| 525 $aboutDiv.append($content); | |
| 526 $link.append($logo); | |
| 527 $logo.attr('src', settings.logoUrl); | |
| 628 | 528 $link.attr('href', settings.homeUrl); |
| 609 | 529 $content.text('Version: ' + settings.version); |
| 628 | 530 // click hides |
| 531 $aboutDiv.bind('click', function () { showDiv(settings.isAboutDivVisible, $aboutDiv, 0); }); | |
| 532 data.$aboutDiv = $aboutDiv; | |
| 627 | 533 }; |
| 534 | |
| 628 | 535 // shows some window e.g. 'about' (toggle visibility if show is null) |
| 536 var showDiv = function (isVisible, $div, show) { | |
| 537 if (typeof(show) !== 'number') { | |
| 538 // toggle visibility | |
| 539 isVisible = !isVisible; | |
| 540 } else { | |
| 541 // set visibility | |
| 542 isVisible = show; | |
| 543 } | |
| 544 if (isVisible) { | |
| 545 $div.fadeIn(); | |
| 546 } else { | |
| 547 $div.fadeOut(); | |
| 548 } | |
| 549 return isVisible; | |
| 627 | 550 }; |
| 609 | 551 |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
552 // returns function for load event of scaler img |
| 626 | 553 var scalerImgLoadedFn = function (data) { |
| 620 | 554 var settings = data.settings; |
| 555 var $elem = data.target; | |
| 556 var $img = data.img; | |
| 557 | |
| 626 | 558 return function () { |
| 620 | 559 console.debug("img loaded! this=", this, " data=", data); |
| 624 | 560 var area = settings.zoomArea; |
| 620 | 561 // create Transform from current area and picsize |
| 562 var picpos = $img.offset(); | |
| 563 var picrect = geom.rectangle(picpos.left, picpos.top, $img.width(), $img.height()); | |
| 564 var trafo = geom.transform(); | |
| 565 // subtract area offset and size | |
| 566 trafo.concat(trafo.getTranslation(geom.position(area.x, area.y))); | |
| 567 trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height))); | |
| 568 // scale to screen size | |
| 569 trafo.concat(trafo.getScale(picrect)); | |
| 570 trafo.concat(trafo.getTranslation(picrect)); | |
| 571 data.imgTrafo = trafo; | |
| 572 // display marks | |
| 626 | 573 renderMarks(data); |
| 628 | 574 // show birds eye view |
| 575 //showDiv(settings.isBirdDivVisible); | |
| 620 | 576 //digilib.showArrows(); // show arrow overlays for zoom navigation |
| 627 | 577 // done -- hide about div |
| 628 | 578 settings.isAboutDivVisible = showDiv(null, data.$aboutDiv, 0); |
|
606
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
579 }; |
|
d08d095430c3
keeping img tag for embedded mode seems to work now
robcast
parents:
605
diff
changeset
|
580 }; |
| 626 | 581 |
| 582 // place marks on the image | |
| 583 var renderMarks = function (data) { | |
| 584 var $elem = data.target; | |
| 585 var marks = data.settings.marks; | |
| 586 for (var i = 0; i < marks.length; i++) { | |
| 587 var mark = marks[i]; | |
| 588 if (data.settings.zoomArea.containsPosition(mark)) { | |
| 589 var mpos = data.imgTrafo.transform(mark); | |
| 590 // create mark | |
| 591 var html = '<div class="mark">'+(i+1)+'</div>'; | |
| 592 var $mark = $(html); | |
| 593 $elem.append($mark); | |
| 594 $mark.offset({ left : mpos.x, top : mpos.y}); | |
| 595 } | |
| 596 } | |
| 597 }; | |
| 624 | 598 |
| 599 // auxiliary function to crop senseless precision | |
| 600 var cropFloat = function (x) { | |
| 601 return parseInt(10000 * x) / 10000; | |
| 602 }; | |
| 603 | |
| 598 | 604 // hook plugin into jquery |
| 605 $.fn.digilib = function(method) { | |
| 606 if (methods[method]) { | |
| 627 | 607 // call method on this with the remaining arguments |
| 598 | 608 return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); |
| 609 } else if (typeof(method) === 'object' || !method) { | |
| 627 | 610 // call init on this |
| 598 | 611 return methods.init.apply(this, arguments); |
| 612 } else { | |
| 627 | 613 $.error( 'Method ' + method + ' does not exist on jQuery.digilib' ); |
| 598 | 614 } |
| 615 }; | |
| 597 | 616 |
| 617 })(jQuery); |