Mercurial > hg > digilib
comparison client/digitallibrary/jquery/jquery.digilib.js @ 608:5de82bb5022d jquery
setup bird's eye view div
author | hertzhaft |
---|---|
date | Sun, 16 Jan 2011 19:21:16 +0100 |
parents | dc6b2e7f3621 |
children | e18dedef32fb |
comparison
equal
deleted
inserted
replaced
607:dc6b2e7f3621 | 608:5de82bb5022d |
---|---|
150 // path to button images (must end with a slash) | 150 // path to button images (must end with a slash) |
151 'buttonsImagePath' : '../greyskin/', | 151 'buttonsImagePath' : '../greyskin/', |
152 // button groups | 152 // button groups |
153 'buttonsStandard' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","SEP","help","reset","options"], | 153 'buttonsStandard' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","SEP","help","reset","options"], |
154 'buttonsSpecial' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"], | 154 'buttonsSpecial' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"], |
155 'buttonsCustom' : [] | 155 'buttonsCustom' : [], |
156 // dimensions of bird's eye window | |
157 'birdMaxX' : 200, | |
158 'birdMaxY' : 200 | |
156 }; | 159 }; |
157 | 160 |
158 // parameters from the query string | 161 // parameters from the query string |
159 var queryParams = {}; | 162 var queryParams = {}; |
160 | 163 |
189 }); | 192 }); |
190 } | 193 } |
191 // create HTML structure | 194 // create HTML structure |
192 setupScalerDiv($elem, elemSettings); | 195 setupScalerDiv($elem, elemSettings); |
193 setupButtons($elem, elemSettings, 'buttonsStandard'); | 196 setupButtons($elem, elemSettings, 'buttonsStandard'); |
197 setupBirdviewDiv($elem, elemSettings); | |
194 }); | 198 }); |
195 }, | 199 }, |
196 | 200 |
197 // clean up digilib | 201 // clean up digilib |
198 destroy : function() { | 202 destroy : function() { |
238 }; | 242 }; |
239 }; | 243 }; |
240 return hash; | 244 return hash; |
241 }; | 245 }; |
242 | 246 |
247 // returns a query string from key names from a parameter hash | |
248 var makeParamString = function (settings, keys) { | |
249 var paramString = ''; | |
250 var latter = false; | |
251 for (i = 0; i < keys.length; ++i) { | |
252 var key = keys[i]; | |
253 if (settings[key]) { | |
254 // first param gets no '&' | |
255 paramString += latter ? '&' : ''; | |
256 latter = true; | |
257 // add parm=val | |
258 paramString += key + '=' + settings[key]; | |
259 }; | |
260 } | |
261 return paramString; | |
262 }; | |
263 | |
243 // returns URL and query string for Scaler | 264 // returns URL and query string for Scaler |
244 var getScalerString = function (settings) { | 265 var getScalerString = function (settings) { |
245 var url = settings.scalerBaseUrl + '?'; | 266 var keys = settings.scalerParamNames; |
246 var i, parm, latter; | 267 var queryString = makeParamString(settings, keys); |
247 // go through param names and get values from settings | 268 var url = settings.scalerBaseUrl + '?' + queryString; |
248 for (i = 0; i < settings.scalerParamNames.length; ++i) { | |
249 parm = settings.scalerParamNames[i]; | |
250 if (settings[parm]) { | |
251 // first parm gets no '&' | |
252 url += latter ? '&' : ''; | |
253 latter = 1; | |
254 // add parm=val | |
255 url += parm + '=' + settings[parm]; | |
256 } | |
257 } | |
258 return url; | 269 return url; |
259 }; | 270 }; |
260 | 271 |
261 // returns maximum size for scaler img in fullscreen mode | 272 // returns maximum size for scaler img in fullscreen mode |
262 var getFullscreenImgSize = function($elem) { | 273 var getFullscreenImgSize = function($elem) { |
263 var winH = $(window).height(); | 274 var winH = $(window).height(); |
264 var winW = $(window).width(); | 275 var winW = $(window).width(); |
265 // TODO: account for borders? | 276 // TODO: account for borders? |
297 var $scaler = $('<div class="scaler"/>'); | 308 var $scaler = $('<div class="scaler"/>'); |
298 $elem.append($scaler); | 309 $elem.append($scaler); |
299 $scaler.append($img); | 310 $scaler.append($img); |
300 $img.load(scalerImgLoadedFn(settings)); | 311 $img.load(scalerImgLoadedFn(settings)); |
301 }; | 312 }; |
302 | 313 |
303 // creates HTML structure for buttons in elem | 314 // creates HTML structure for buttons in elem |
304 var setupButtons = function ($elem, settings, buttonGroup) { | 315 var setupButtons = function ($elem, settings, buttonGroup) { |
305 if (settings.interactionMode === 'fullscreen') { | 316 if (settings.interactionMode === 'fullscreen') { |
306 // fullscreen -- create new | 317 // fullscreen -- create new |
307 var $buttonsDiv = $('<div class="buttons"></div>'); | 318 var $buttonsDiv = $('<div class="buttons"></div>'); |
335 $img.attr('src', settings.buttonsImagePath + buttonSettings.img); | 346 $img.attr('src', settings.buttonsImagePath + buttonSettings.img); |
336 }; | 347 }; |
337 } | 348 } |
338 return $buttonsDiv; | 349 return $buttonsDiv; |
339 }; | 350 }; |
340 | 351 |
352 // creates HTML structure for the bird's eye view in elem | |
353 var setupBirdviewDiv = function ($elem, settings) { | |
354 // use only the relevant parameters | |
355 var keys = ['fn','pn','dw','dh']; | |
356 var birdDimensions = { | |
357 'dw' : settings.birdMaxX, | |
358 'dh' : settings.birdMaxY | |
359 }; | |
360 var birdSettings = $.extend({}, settings, birdDimensions); | |
361 var birdUrl = settings.scalerBaseUrl + '?' + makeParamString(birdSettings, keys); | |
362 // the bird's eye div | |
363 var $birdviewDiv = $('<div class="birdview"/>'); | |
364 // the detail indicator frame | |
365 var $birdzoomDiv = $('<div class="birdzoom"/>'); | |
366 // the small image | |
367 var $birdImg = $('<img class="birdimg"/>'); | |
368 $elem.append($birdviewDiv); | |
369 $birdviewDiv.append($birdzoomDiv); | |
370 $birdviewDiv.append($birdImg); | |
371 $birdImg.attr('src', birdUrl); | |
372 }; | |
373 | |
341 // returns function for load event of scaler img | 374 // returns function for load event of scaler img |
342 var scalerImgLoadedFn = function(settings) { | 375 var scalerImgLoadedFn = function(settings) { |
343 return function() { | 376 return function() { |
344 console.debug("img loaded! settings=", settings); | 377 console.debug("img loaded! settings=", settings); |
345 }; | 378 }; |