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 };