Mercurial > hg > digilib
comparison client/digitallibrary/jquery/jquery.digilib.js @ 869:5396529b3f46 jquery
treat arrows as normal buttons; factor out createButton()
author | hertzhaft |
---|---|
date | Thu, 17 Mar 2011 12:20:36 +0100 |
parents | e5caceb1832b |
children | 5d811828347b |
comparison
equal
deleted
inserted
replaced
868:b7258b7334e3 | 869:5396529b3f46 |
---|---|
163 }, | 163 }, |
164 lessoptions : { | 164 lessoptions : { |
165 onclick : ["moreButtons", "-1"], | 165 onclick : ["moreButtons", "-1"], |
166 tooltip : "less options", | 166 tooltip : "less options", |
167 icon : "options.png" | 167 icon : "options.png" |
168 }, | |
169 up : { | |
170 onclick : ["moveZoomArea", 0, -1], | |
171 tooltip : "move up", | |
172 icon : "up.png" | |
173 }, | |
174 down : { | |
175 onclick : ["moveZoomArea", 0, 1], | |
176 tooltip : "move down", | |
177 icon : "down.png" | |
178 }, | |
179 left : { | |
180 onclick : ["moveZoomArea", -1, 0], | |
181 tooltip : "move left", | |
182 icon : "left.png" | |
183 }, | |
184 right : { | |
185 onclick : ["moveZoomArea", 1, 0], | |
186 tooltip : "move right", | |
187 icon : "right.png" | |
168 }, | 188 }, |
169 SEP : { | 189 SEP : { |
170 icon : "sep.png" | 190 icon : "sep.png" |
171 } | 191 } |
172 }; | 192 }; |
217 'fullscreen' : { | 237 'fullscreen' : { |
218 // path to button images (must end with a slash) | 238 // path to button images (must end with a slash) |
219 'imagePath' : 'img/fullscreen/', | 239 'imagePath' : 'img/fullscreen/', |
220 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","help","reset","toggleoptions"], | 240 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","help","reset","toggleoptions"], |
221 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","lessoptions"], | 241 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","lessoptions"], |
242 'arrowSet' : ["up", "down", "left", "right"], | |
222 'buttonSets' : ['standardSet', 'specialSet'] | 243 'buttonSets' : ['standardSet', 'specialSet'] |
223 }, | 244 }, |
224 'embedded' : { | 245 'embedded' : { |
225 'imagePath' : 'img/embedded/16/', | 246 'imagePath' : 'img/embedded/16/', |
226 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","help","reset","toggleoptions"], | 247 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","help","reset","toggleoptions"], |
227 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","lessoptions"], | 248 'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","lessoptions"], |
249 'arrowSet' : ["up", "down", "left", "right"], | |
228 'buttonSets' : ['standardSet', 'specialSet'] | 250 'buttonSets' : ['standardSet', 'specialSet'] |
229 } | 251 }, |
230 }, | 252 }, |
231 // arrow overlays for moving the zoomed area | 253 // arrow bar overlays for moving the zoomed area |
232 'zoomArrows' : true, | 254 'showZoomArrows' : true, |
233 // zoom arrow image info | 255 // zoom arrow bar minimal width (for small images) |
234 'zoomArrowsInfo' : { | 256 'zoomArrowMinWidth' : 6, |
235 // path to arrow images (must end with a slash) | 257 // zoom arrow bar standard width |
236 'imagePath' : 'img/', | 258 'zoomArrowWidth' : 32, |
237 // minimal width of the arrow bar (pixel) | 259 // by what percentage should the arrows move the zoomed area? |
238 'minwidth' : 6, | 260 'zoomArrowMoveFactor' : 0.5, |
239 // image file names | |
240 'up' : 'up.png', | |
241 'down' : 'down.png', | |
242 'left' : 'left.png', | |
243 'right' : 'right.png' | |
244 }, | |
245 // number of visible button groups | 261 // number of visible button groups |
246 'visibleButtonSets' : 1, | 262 'visibleButtonSets' : 1, |
247 // is the "about" window shown? | 263 // is the "about" window shown? |
248 'isAboutDivVisible' : false, | 264 'isAboutDivVisible' : false, |
249 // default size of background image for drag-scroll (same as Bird's Eye View image) | 265 // default size of background image for drag-scroll (same as Bird's Eye View image) |
470 delete data.dlOpts.fitheight; | 486 delete data.dlOpts.fitheight; |
471 } | 487 } |
472 redisplay(data); | 488 redisplay(data); |
473 }, | 489 }, |
474 | 490 |
491 // move zoomed area | |
492 moveZoomArea : function (data, dx, dy) { | |
493 var za = data.zoomArea; | |
494 var factor = data.settings.zoomArrowMoveFactor; | |
495 var deltaX = dx * factor * za.width; | |
496 var deltaY = dy * factor * za.height; | |
497 za.addPosition(geom.position(deltaX, deltaY)); | |
498 data.zoomArea = FULL_AREA.fit(za); | |
499 redisplay(data); | |
500 }, | |
501 | |
475 // set a mark by clicking (or giving a position) | 502 // set a mark by clicking (or giving a position) |
476 setMark : function (data, mpos) { | 503 setMark : function (data, mpos) { |
477 if (mpos == null) { | 504 if (mpos == null) { |
478 // interactive | 505 // interactive |
479 setMark(data); | 506 setMark(data); |
1009 $img.load(scalerImgLoadedHandler(data)); | 1036 $img.load(scalerImgLoadedHandler(data)); |
1010 $img.error(function () {console.error("error loading scaler image");}); | 1037 $img.error(function () {console.error("error loading scaler image");}); |
1011 $img.attr('src', scalerUrl); | 1038 $img.attr('src', scalerUrl); |
1012 }; | 1039 }; |
1013 | 1040 |
1041 // creates HTML structure for a single button | |
1042 var createButton = function (data, $div, buttonName) { | |
1043 var $elem = data.$elem; | |
1044 var settings = data.settings; | |
1045 var mode = settings.interactionMode; | |
1046 var imagePath = settings.buttonSettings[mode].imagePath; | |
1047 var buttonConfig = settings.buttons[buttonName]; | |
1048 // button properties | |
1049 var action = buttonConfig.onclick; | |
1050 var tooltip = buttonConfig.tooltip; | |
1051 var icon = imagePath + buttonConfig.icon; | |
1052 // construct the button html | |
1053 var $button = $('<div class="button"></div>'); | |
1054 var $a = $('<a/>'); | |
1055 var $img = $('<img class="button"/>'); | |
1056 $div.append($button); | |
1057 $button.append($a); | |
1058 $a.append($img); | |
1059 // add attributes and bindings | |
1060 $button.attr('title', tooltip); | |
1061 $button.addClass('button-' + buttonName); | |
1062 $img.attr('src', icon); | |
1063 // create handler for the buttons | |
1064 $a.bind('click.digilib', (function () { | |
1065 // we create a new closure to capture the value of action | |
1066 if ($.isArray(action)) { | |
1067 // the handler function calls digilib with action and parameters | |
1068 return function (evt) { | |
1069 console.debug('click action=', action, ' evt=', evt); | |
1070 $elem.digilib.apply($elem, action); | |
1071 return false; | |
1072 }; | |
1073 } else { | |
1074 // the handler function calls digilib with action | |
1075 return function (evt) { | |
1076 console.debug('click action=', action, ' evt=', evt); | |
1077 $elem.digilib(action); | |
1078 return false; | |
1079 }; | |
1080 } | |
1081 })()); | |
1082 }; | |
1083 | |
1014 // creates HTML structure for buttons in elem | 1084 // creates HTML structure for buttons in elem |
1015 var createButtons = function (data, buttonSetIdx) { | 1085 var createButtons = function (data, buttonSetIdx) { |
1016 var $elem = data.$elem; | 1086 var $elem = data.$elem; |
1017 var settings = data.settings; | 1087 var settings = data.settings; |
1018 var mode = settings.interactionMode; | 1088 var mode = settings.interactionMode; |
1025 // button divs are marked with class "keep" | 1095 // button divs are marked with class "keep" |
1026 var $buttonsDiv = $('<div class="keep buttons"/>'); | 1096 var $buttonsDiv = $('<div class="keep buttons"/>'); |
1027 var buttonNames = buttonSettings[buttonGroup]; | 1097 var buttonNames = buttonSettings[buttonGroup]; |
1028 for (var i = 0; i < buttonNames.length; i++) { | 1098 for (var i = 0; i < buttonNames.length; i++) { |
1029 var buttonName = buttonNames[i]; | 1099 var buttonName = buttonNames[i]; |
1030 var buttonConfig = settings.buttons[buttonName]; | 1100 createButton(data, $buttonsDiv, buttonName); |
1031 // construct the button html | |
1032 var $button = $('<div class="button"></div>'); | |
1033 var $a = $('<a/>'); | |
1034 var $img = $('<img class="button"/>'); | |
1035 $buttonsDiv.append($button); | |
1036 $button.append($a); | |
1037 $a.append($img); | |
1038 // add attributes and bindings | |
1039 $button.attr('title', buttonConfig.tooltip); | |
1040 $button.addClass('button-' + buttonName); | |
1041 // create handler for the buttons | |
1042 $a.bind('click.digilib', (function () { | |
1043 // we create a new closure to capture the value of action | |
1044 var action = buttonConfig.onclick; | |
1045 if ($.isArray(action)) { | |
1046 // the handler function calls digilib with action and parameters | |
1047 return function (evt) { | |
1048 console.debug('click action=', action, ' evt=', evt); | |
1049 $elem.digilib.apply($elem, action); | |
1050 return false; | |
1051 }; | |
1052 } else { | |
1053 // the handler function calls digilib with action | |
1054 return function (evt) { | |
1055 console.debug('click action=', action, ' evt=', evt); | |
1056 $elem.digilib(action); | |
1057 return false; | |
1058 }; | |
1059 } | |
1060 })()); | |
1061 $img.attr('src', buttonSettings.imagePath + buttonConfig.icon); | |
1062 } | 1101 } |
1063 // make buttons div scroll if too large for window | 1102 // make buttons div scroll if too large for window |
1064 if ($buttonsDiv.height() > $(window).height() - 10) { | 1103 if ($buttonsDiv.height() > $(window).height() - 10) { |
1065 $buttonsDiv.css('position', 'absolute'); | 1104 $buttonsDiv.css('position', 'absolute'); |
1066 } | 1105 } |