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') {