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 }