Mercurial > hg > digilib
comparison client/digitallibrary/jquery/jquery.digilib.js @ 762:08a4c2ddbf4b jquery
Merge
with 1eef11308195be8e9913c7437c348850815994be
| author | robcast |
|---|---|
| date | Thu, 10 Feb 2011 21:13:54 +0100 |
| parents | abee36cd7688 c988cfaa6e42 |
| children | 5c04652f3660 cef1ef426366 |
comparison
equal
deleted
inserted
replaced
| 761:abee36cd7688 | 762:08a4c2ddbf4b |
|---|---|
| 38 (function($) { | 38 (function($) { |
| 39 var buttons = { | 39 var buttons = { |
| 40 reference : { | 40 reference : { |
| 41 onclick : "reference", | 41 onclick : "reference", |
| 42 tooltip : "get a reference URL", | 42 tooltip : "get a reference URL", |
| 43 img : "reference.png" | 43 icon : "reference.png" |
| 44 }, | 44 }, |
| 45 zoomin : { | 45 zoomin : { |
| 46 onclick : ["zoomBy", 1.4], | 46 onclick : ["zoomBy", 1.4], |
| 47 tooltip : "zoom in", | 47 tooltip : "zoom in", |
| 48 img : "zoom-in.png" | 48 icon : "zoom-in.png" |
| 49 }, | 49 }, |
| 50 zoomout : { | 50 zoomout : { |
| 51 onclick : ["zoomBy", 0.7], | 51 onclick : ["zoomBy", 0.7], |
| 52 tooltip : "zoom out", | 52 tooltip : "zoom out", |
| 53 img : "zoom-out.png" | 53 icon : "zoom-out.png" |
| 54 }, | 54 }, |
| 55 zoomarea : { | 55 zoomarea : { |
| 56 onclick : "zoomArea", | 56 onclick : "zoomArea", |
| 57 tooltip : "zoom area", | 57 tooltip : "zoom area", |
| 58 img : "zoom-area.png" | 58 icon : "zoom-area.png" |
| 59 }, | 59 }, |
| 60 zoomfull : { | 60 zoomfull : { |
| 61 onclick : "zoomFull", | 61 onclick : "zoomFull", |
| 62 tooltip : "view the whole image", | 62 tooltip : "view the whole image", |
| 63 img : "zoom-full.png" | 63 icon : "zoom-full.png" |
| 64 }, | 64 }, |
| 65 pagewidth : { | 65 pagewidth : { |
| 66 onclick : ["zoomFull", "width"], | 66 onclick : ["zoomFull", "width"], |
| 67 tooltip : "page width", | 67 tooltip : "page width", |
| 68 img : "pagewidth.png" | 68 icon : "pagewidth.png" |
| 69 }, | 69 }, |
| 70 back : { | 70 back : { |
| 71 onclick : ["gotoPage", "-1"], | 71 onclick : ["gotoPage", "-1"], |
| 72 tooltip : "goto previous image", | 72 tooltip : "goto previous image", |
| 73 img : "back.png" | 73 icon : "back.png" |
| 74 }, | 74 }, |
| 75 fwd : { | 75 fwd : { |
| 76 onclick : ["gotoPage", "+1"], | 76 onclick : ["gotoPage", "+1"], |
| 77 tooltip : "goto next image", | 77 tooltip : "goto next image", |
| 78 img : "fwd.png" | 78 icon : "fwd.png" |
| 79 }, | 79 }, |
| 80 page : { | 80 page : { |
| 81 onclick : "gotoPage", | 81 onclick : "gotoPage", |
| 82 tooltip : "goto image number", | 82 tooltip : "goto image number", |
| 83 img : "page.png" | 83 icon : "page.png" |
| 84 }, | 84 }, |
| 85 bird : { | 85 bird : { |
| 86 onclick : "showBirdDiv", | 86 onclick : "showBirdDiv", |
| 87 tooltip : "show bird's eye view", | 87 tooltip : "show bird's eye view", |
| 88 img : "birds-eye.png" | 88 icon : "birds-eye.png" |
| 89 }, | 89 }, |
| 90 help : { | 90 help : { |
| 91 onclick : "showAboutDiv", | 91 onclick : "showAboutDiv", |
| 92 tooltip : "about Digilib", | 92 tooltip : "about Digilib", |
| 93 img : "help.png" | 93 icon : "help.png" |
| 94 }, | 94 }, |
| 95 reset : { | 95 reset : { |
| 96 onclick : "reset", | 96 onclick : "reset", |
| 97 tooltip : "reset image", | 97 tooltip : "reset image", |
| 98 img : "reset.png" | 98 icon : "reset.png" |
| 99 }, | 99 }, |
| 100 mark : { | 100 mark : { |
| 101 onclick : "setMark", | 101 onclick : "setMark", |
| 102 tooltip : "set a mark", | 102 tooltip : "set a mark", |
| 103 img : "mark.png" | 103 icon : "mark.png" |
| 104 }, | 104 }, |
| 105 delmark : { | 105 delmark : { |
| 106 onclick : "removeMark", | 106 onclick : "removeMark", |
| 107 tooltip : "delete the last mark", | 107 tooltip : "delete the last mark", |
| 108 img : "delmark.png" | 108 icon : "delmark.png" |
| 109 }, | 109 }, |
| 110 hmir : { | 110 hmir : { |
| 111 onclick : ["mirror", "h"], | 111 onclick : ["mirror", "h"], |
| 112 tooltip : "mirror horizontally", | 112 tooltip : "mirror horizontally", |
| 113 img : "mirror-horizontal.png" | 113 icon : "mirror-horizontal.png" |
| 114 }, | 114 }, |
| 115 vmir : { | 115 vmir : { |
| 116 onclick : ["mirror", "v"], | 116 onclick : ["mirror", "v"], |
| 117 tooltip : "mirror vertically", | 117 tooltip : "mirror vertically", |
| 118 img : "mirror-vertical.png" | 118 icon : "mirror-vertical.png" |
| 119 }, | 119 }, |
| 120 rot : { | 120 rot : { |
| 121 onclick : "rotate", | 121 onclick : "rotate", |
| 122 tooltip : "rotate image", | 122 tooltip : "rotate image", |
| 123 img : "rotate.png" | 123 icon : "rotate.png" |
| 124 }, | 124 }, |
| 125 brgt : { | 125 brgt : { |
| 126 onclick : "brightness", | 126 onclick : "brightness", |
| 127 tooltip : "set brightness", | 127 tooltip : "set brightness", |
| 128 img : "brightness.png" | 128 icon : "brightness.png" |
| 129 }, | 129 }, |
| 130 cont : { | 130 cont : { |
| 131 onclick : "contrast", | 131 onclick : "contrast", |
| 132 tooltip : "set contrast", | 132 tooltip : "set contrast", |
| 133 img : "contrast.png" | 133 icon : "contrast.png" |
| 134 }, | 134 }, |
| 135 rgb : { | 135 rgb : { |
| 136 onclick : "javascript:setParamWin('rgb', '...')", | 136 onclick : "javascript:setParamWin('rgb', '...')", |
| 137 tooltip : "set rgb values", | 137 tooltip : "set rgb values", |
| 138 img : "rgb.png" | 138 icon : "rgb.png" |
| 139 }, | 139 }, |
| 140 quality : { | 140 quality : { |
| 141 onclick : "setQuality", | 141 onclick : "setQuality", |
| 142 tooltip : "set image quality", | 142 tooltip : "set image quality", |
| 143 img : "quality.png" | 143 icon : "quality.png" |
| 144 }, | 144 }, |
| 145 size : { | 145 size : { |
| 146 onclick : "javascript:toggleSizeMenu()", | 146 onclick : "javascript:toggleSizeMenu()", |
| 147 tooltip : "set page size", | 147 tooltip : "set page size", |
| 148 img : "size.png" | 148 icon : "size.png" |
| 149 }, | 149 }, |
| 150 calibrationx : { | 150 calibrationx : { |
| 151 onclick : "calibrate", | 151 onclick : "calibrate", |
| 152 tooltip : "calibrate screen resolution", | 152 tooltip : "calibrate screen resolution", |
| 153 img : "calibration-x.png" | 153 icon : "calibration-x.png" |
| 154 }, | 154 }, |
| 155 scale : { | 155 scale : { |
| 156 onclick : "setScaleMode", | 156 onclick : "setScaleMode", |
| 157 tooltip : "change image scale", | 157 tooltip : "change image scale", |
| 158 img : "original-size.png" | 158 icon : "original-size.png" |
| 159 }, | 159 }, |
| 160 toggleoptions : { | 160 toggleoptions : { |
| 161 onclick : "moreButtons", | 161 onclick : "moreButtons", |
| 162 tooltip : "more options", | 162 tooltip : "more options", |
| 163 img : "options.png" | 163 icon : "options.png" |
| 164 }, | 164 }, |
| 165 moreoptions : { | 165 moreoptions : { |
| 166 onclick : ["moreButtons", "+1"], | 166 onclick : ["moreButtons", "+1"], |
| 167 tooltip : "more options", | 167 tooltip : "more options", |
| 168 img : "options.png" | 168 icon : "options.png" |
| 169 }, | 169 }, |
| 170 lessoptions : { | 170 lessoptions : { |
| 171 onclick : ["moreButtons", "-1"], | 171 onclick : ["moreButtons", "-1"], |
| 172 tooltip : "less options", | 172 tooltip : "less options", |
| 173 img : "options.png" | 173 icon : "options.png" |
| 174 }, | 174 }, |
| 175 SEP : { | 175 SEP : { |
| 176 img : "sep.png" | 176 icon : "sep.png" |
| 177 } | 177 } |
| 178 }; | 178 }; |
| 179 | 179 |
| 180 var defaults = { | 180 var defaults = { |
| 181 // version of this script | 181 // version of this script |
| 232 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","bird","help","reset","toggleoptions"], | 232 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","bird","help","reset","toggleoptions"], |
| 233 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","toggleoptions"], | 233 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","toggleoptions"], |
| 234 'buttonSets' : ['standardSet', 'specialSet'] | 234 'buttonSets' : ['standardSet', 'specialSet'] |
| 235 } | 235 } |
| 236 }, | 236 }, |
| 237 | |
| 237 // number of visible button groups | 238 // number of visible button groups |
| 238 'visibleButtonSets' : 1, | 239 'visibleButtonSets' : 1, |
| 239 // is birdView shown? | 240 // is birdView shown? |
| 240 'isBirdDivVisible' : false, | 241 'isBirdDivVisible' : false, |
| 241 // dimensions of bird's eye div | 242 // dimensions of bird's eye div |
| 336 } else { | 337 } else { |
| 337 var url = elemSettings.scalerBaseUrl; | 338 var url = elemSettings.scalerBaseUrl; |
| 338 if (url) { | 339 if (url) { |
| 339 // build it from scaler URL | 340 // build it from scaler URL |
| 340 var bp = url.indexOf('/servlet/Scaler'); | 341 var bp = url.indexOf('/servlet/Scaler'); |
| 341 elemSettings.digilibBaseUrl = url.substring(0, bp) + '/digilib.jsp'; | 342 elemSettings.digilibBaseUrl = url.substring(0, bp) + '/digilib.jsp'; |
| 342 } | 343 } |
| 343 } | 344 } |
| 344 } | 345 } |
| 345 // get image info from server if needed | 346 // get image info from server if needed |
| 346 if (data.scaleMode === 'pixel' || data.scaleMode === 'size') { | 347 if (data.scaleMode === 'pixel' || data.scaleMode === 'size') { |
| 350 setupScalerDiv(data); | 351 setupScalerDiv(data); |
| 351 // add buttons | 352 // add buttons |
| 352 for (var i = 0; i < elemSettings.visibleButtonSets; ++i) { | 353 for (var i = 0; i < elemSettings.visibleButtonSets; ++i) { |
| 353 showButtons(data, true, i); | 354 showButtons(data, true, i); |
| 354 } | 355 } |
| 356 highlightButtons(data); | |
| 355 // bird's eye view creation | 357 // bird's eye view creation |
| 356 if (elemSettings.isBirdDivVisible) { | 358 if (elemSettings.isBirdDivVisible) { |
| 357 setupBirdDiv(data); | 359 setupBirdDiv(data); |
| 358 data.$birdDiv.show(); | 360 data.$birdDiv.show(); |
| 359 } | 361 } |
| 374 }); | 376 }); |
| 375 }, | 377 }, |
| 376 | 378 |
| 377 // show or hide the 'about' window | 379 // show or hide the 'about' window |
| 378 showAboutDiv : function(data, show) { | 380 showAboutDiv : function(data, show) { |
| 379 data.settings.isAboutDivVisible = showDiv(data.settings.isAboutDivVisible, data.$aboutDiv, show); | 381 var on = showDiv(data.settings.isAboutDivVisible, data.$aboutDiv, show); |
| 382 data.settings.isAboutDivVisible = on; | |
| 383 highlightButtons(data, 'help', on); | |
| 380 }, | 384 }, |
| 381 | 385 |
| 382 // event handler: toggles the visibility of the bird's eye window | 386 // event handler: toggles the visibility of the bird's eye window |
| 383 showBirdDiv : function (data, show) { | 387 showBirdDiv : function (data, show) { |
| 384 var settings = data.settings; | 388 var settings = data.settings; |
| 385 if (data.$birdDiv == null) { | 389 if (data.$birdDiv == null) { |
| 386 // no bird div -> create | 390 // no bird div -> create |
| 387 setupBirdDiv(data); | 391 setupBirdDiv(data); |
| 388 } | 392 } |
| 389 settings.isBirdDivVisible = showDiv(settings.isBirdDivVisible, data.$birdDiv, show); | 393 var on = showDiv(settings.isBirdDivVisible, data.$birdDiv, show); |
| 394 settings.isBirdDivVisible = on; | |
| 395 highlightButtons(data, 'bird', on); | |
| 390 updateBirdDiv(data); | 396 updateBirdDiv(data); |
| 391 storeOptions(data); | 397 storeOptions(data); |
| 392 }, | 398 }, |
| 393 | 399 |
| 394 // goto given page nr (+/-: relative) | 400 // goto given page nr (+/-: relative) |
| 877 // embedded mode -- just change img src | 883 // embedded mode -- just change img src |
| 878 var url = getScalerUrl(data); | 884 var url = getScalerUrl(data); |
| 879 data.$img.attr('src', url); | 885 data.$img.attr('src', url); |
| 880 // redisplay bird img | 886 // redisplay bird img |
| 881 updateBirdDiv(data); | 887 updateBirdDiv(data); |
| 888 highlightButtons(data); | |
| 882 } | 889 } |
| 883 }; | 890 }; |
| 884 | 891 |
| 885 // update display (overlays etc.) | 892 // update display (overlays etc.) |
| 886 var updateDisplay = function (data) { | 893 var updateDisplay = function (data) { |
| 998 $elem.digilib(action); | 1005 $elem.digilib(action); |
| 999 return false; | 1006 return false; |
| 1000 }; | 1007 }; |
| 1001 } | 1008 } |
| 1002 })()); | 1009 })()); |
| 1003 $img.attr('src', buttonSettings.imagePath + buttonConfig.img); | 1010 $img.attr('src', buttonSettings.imagePath + buttonConfig.icon); |
| 1004 } | 1011 } |
| 1005 // make buttons div scroll if too large for window | 1012 // make buttons div scroll if too large for window |
| 1006 if ($buttonsDiv.height() > $(window).height() - 10) { | 1013 if ($buttonsDiv.height() > $(window).height() - 10) { |
| 1007 $buttonsDiv.css('position', 'absolute'); | 1014 $buttonsDiv.css('position', 'absolute'); |
| 1008 } | 1015 } |
| 1112 $set = data.$buttonSets[setIdx]; | 1119 $set = data.$buttonSets[setIdx]; |
| 1113 } else { | 1120 } else { |
| 1114 $set = createButtons(data, setIdx); | 1121 $set = createButtons(data, setIdx); |
| 1115 } | 1122 } |
| 1116 if ($set == null) return false; | 1123 if ($set == null) return false; |
| 1117 var btnWidth = $set.width(); | 1124 // include border in calculation |
| 1125 var btnWidth = $set.outerWidth(); | |
| 1118 // move remaining sets left and show new set | 1126 // move remaining sets left and show new set |
| 1119 if ($otherSets.length > 0) { | 1127 if ($otherSets.length > 0) { |
| 1120 $otherSets.animate({right : '+='+btnWidth+'px'}, atime, | 1128 $otherSets.animate({right : '+='+btnWidth+'px'}, atime, |
| 1121 function () {$set.show();}); | 1129 function () {$set.show();}); |
| 1122 } else { | 1130 } else { |
| 1134 $otherSets.animate({right : '-='+btnWidth+'px'}, atime); | 1142 $otherSets.animate({right : '-='+btnWidth+'px'}, atime); |
| 1135 } | 1143 } |
| 1136 return true; | 1144 return true; |
| 1137 }; | 1145 }; |
| 1138 | 1146 |
| 1147 // check for buttons to highlight | |
| 1148 var highlightButtons = function (data, name, on) { | |
| 1149 var $buttons = data.$elem.find('div.buttons:visible'); // include hidden? | |
| 1150 // add a class for highlighted button | |
| 1151 var highlight = function (name, on) { | |
| 1152 var $button = $buttons.find('div.button-' + name); | |
| 1153 if (on) { | |
| 1154 $button.addClass('button-on'); | |
| 1155 } else { | |
| 1156 $button.removeClass('button-on'); | |
| 1157 } | |
| 1158 }; | |
| 1159 if (name != null) { | |
| 1160 return highlight(name, on); | |
| 1161 } | |
| 1162 var flags = data.scalerFlags; | |
| 1163 var settings = data.settings; | |
| 1164 highlight('rot', settings.rot); | |
| 1165 highlight('brgt', settings.brgt); | |
| 1166 highlight('cont', settings.cont); | |
| 1167 highlight('bird', settings.isBirdDivVisible); | |
| 1168 highlight('help', settings.isAboutDivVisible); | |
| 1169 highlight('hmir', flags.hmir); | |
| 1170 highlight('vmir', flags.vmir); | |
| 1171 highlight('quality', flags.q1 || flags.q2); | |
| 1172 highlight('zoomin', ! isFullArea(data.zoomArea)); | |
| 1173 }; | |
| 1174 | |
| 1139 // create Transform from area and $img | 1175 // create Transform from area and $img |
| 1140 var getImgTrafo = function ($img, area, rot, hmir, vmir, mode, imgInfo) { | 1176 var getImgTrafo = function ($img, area, rot, hmir, vmir, mode, imgInfo) { |
| 1141 var picrect = geom.rectangle($img); | 1177 var picrect = geom.rectangle($img); |
| 1142 if (mode != null) { | 1178 if (mode != null) { |
| 1143 if (mode === 'pixel') { | 1179 if (mode === 'pixel') { |
