comparison client/digitallibrary/jquery/jquery.digilib.js @ 623:7ba95f12d172 jquery

first attempt at switching images by page number
author hertzhaft
date Mon, 17 Jan 2011 16:25:58 +0100
parents cc3d81f02d4e
children 7d13b7e5140e
comparison
equal deleted inserted replaced
622:cc3d81f02d4e 623:7ba95f12d172
34 onclick : "javascript:zoomFullpage('width')", 34 onclick : "javascript:zoomFullpage('width')",
35 tooltip : "page width", 35 tooltip : "page width",
36 img : "pagewidth.png" 36 img : "pagewidth.png"
37 }, 37 },
38 back : { 38 back : {
39 onclick : "javascript:gotoPage('-1')", 39 onclick : ["gotoPage", "-1"],
40 tooltip : "goto previous image", 40 tooltip : "goto previous image",
41 img : "back.png" 41 img : "back.png"
42 }, 42 },
43 fwd : { 43 fwd : {
44 onclick : "javascript:gotoPage('+1')", 44 onclick : ["gotoPage", "+1"],
45 tooltip : "goto next image", 45 tooltip : "goto next image",
46 img : "fwd.png" 46 img : "fwd.png"
47 }, 47 },
48 page : { 48 page : {
49 onclick : "javascript:gotoPageWin()", 49 onclick : "javascript:gotoPageWin()",
54 onclick : "toggleBirdDiv", 54 onclick : "toggleBirdDiv",
55 tooltip : "show bird's eye view", 55 tooltip : "show bird's eye view",
56 img : "birds-eye.png" 56 img : "birds-eye.png"
57 }, 57 },
58 help : { 58 help : {
59 onclick : ["toggleAboutDiv", 0.2], 59 onclick : "toggleAboutDiv",
60 tooltip : "about Digilib", 60 tooltip : "about Digilib",
61 img : "help.png" 61 img : "help.png"
62 }, 62 },
63 reset : { 63 reset : {
64 onclick : "javascript:resetImage()", 64 onclick : "javascript:resetImage()",
243 return false; 243 return false;
244 }, 244 },
245 245
246 // event handler: toggles the visibility of the bird's eye window 246 // event handler: toggles the visibility of the bird's eye window
247 toggleBirdDiv : function () { 247 toggleBirdDiv : function () {
248 // xxx: red frame functionality still to be done! 248 // TODO: red frame functionality
249 var $elem = $(this); // the clicked button 249 var $elem = $(this); // the clicked button
250 var settings = $elem.data('digilib').settings; 250 var settings = $elem.data('digilib').settings;
251 var $root = settings.digilibRoot; 251 var $root = settings.digilibRoot;
252 var $bird = $root.find('div.birdview'); 252 var $bird = $root.find('div.birdview');
253 settings.isBirdDivVisible = !settings.isBirdDivVisible; 253 settings.isBirdDivVisible = !settings.isBirdDivVisible;
255 $bird.fadeIn(); 255 $bird.fadeIn();
256 } else { 256 } else {
257 $bird.fadeOut(); 257 $bird.fadeOut();
258 }; 258 };
259 return false; 259 return false;
260 },
261
262 // goto given page nr (+/-: relative)
263 gotoPage : function(pageNr, keepMarks) {
264 var $elem = $(this); // the clicked button
265 var settings = $elem.data('digilib').settings;
266 var oldpn = settings.pn;
267 // set with relative=true uses the sign
268 setNumValue(settings, "pn", pageNr);
269 // now check the outcome
270 var pn = settings.pn;
271 if (pn < 1) {
272 alert("no such page (page number too low)");
273 settings.pn = oldpn;
274 return false;
275 };
276 if (settings.pt) {
277 if (pn > settings.pt) {
278 alert("no such page (page number too high)");
279 settings.pn = oldpn;
280 return false;
281 }
282 };
283 // TODO: keepMarks
284 var $root = settings.digilibRoot;
285 var $img = $root.find('img.pic');
286 display($img, settings);
260 } 287 }
261 }; 288 };
262 289
290 // sets a key to a value (relative values with +/- if relative=true)
291 var setNumValue = function(settings, key, value) {
292 // TODO: type and error checking
293 if (settings[key] == null) return null;
294 var sign = value.substring(0,1);
295 if (sign === '+' || sign === '-') {
296 settings[key] = parseFloat(settings[key]) + parseFloat(value);
297 } else {
298 settings[key] = value;
299 }
300 return settings[key];
301 };
302
263 // returns parameters from page url 303 // returns parameters from page url
264 var parseQueryParams = function() { 304 var parseQueryParams = function() {
265 return parseQueryString(location.search.slice(1)); 305 return parseQueryString(location.search.slice(1));
266 }; 306 };
267 307
326 return geom.size(winW, winH); 366 return geom.size(winW, winH);
327 }; 367 };
328 368
329 // (re)load the img from a new scaler URL 369 // (re)load the img from a new scaler URL
330 var display = function ($img, settings) { 370 var display = function ($img, settings) {
371 // TODO: update location.href (browser URL) in fullscreen mode
331 var scalerUrl = getScalerString(settings); 372 var scalerUrl = getScalerString(settings);
332 $img.attr('src', scalerUrl); 373 $img.attr('src', scalerUrl);
333 $img.load(scalerImgLoadedFn(settings)); 374 // TODO: update bird view?
334 }; 375 };
335 376
336 // creates HTML structure for digilib in elem 377 // creates HTML structure for digilib in elem
337 var setupScalerDiv = function ($elem, settings) { 378 var setupScalerDiv = function ($elem, settings) {
338 var rewrite; 379 var $img;
339 if (settings.interactionMode === 'fullscreen') { 380 if (settings.interactionMode === 'fullscreen') {
340 // fullscreen 381 // fullscreen
341 var imgSize = getFullscreenImgSize($elem); 382 var imgSize = getFullscreenImgSize($elem);
342 settings.dw = imgSize.width; 383 settings.dw = imgSize.width;
343 settings.dh = imgSize.height; 384 settings.dh = imgSize.height;
344 $img = $('<img/>'); 385 $img = $('<img/>');
345 display($img, settings); 386 display($img, settings);
346 } else { 387 } else {
347 // embedded mode -- try to keep img tag 388 // embedded mode -- try to keep img tag
348 var $img = $elem.find('img'); 389 $img = $elem.find('img');
349 if ($img.length > 0) { 390 if ($img.length > 0) {
350 console.debug("img detach:",$img); 391 console.debug("img detach:",$img);
351 $img.detach(); 392 $img.detach();
352 } else { 393 } else {
353 $img = $('<img/>'); 394 $img = $('<img/>');
358 $elem.empty(); // TODO: should we keep stuff for customization? 399 $elem.empty(); // TODO: should we keep stuff for customization?
359 var $scaler = $('<div class="scaler"/>'); 400 var $scaler = $('<div class="scaler"/>');
360 $elem.append($scaler); 401 $elem.append($scaler);
361 $scaler.append($img); 402 $scaler.append($img);
362 $img.addClass('pic'); 403 $img.addClass('pic');
404 $img.load(scalerImgLoadedFn(settings));
363 }; 405 };
364 406
365 // creates HTML structure for buttons in elem 407 // creates HTML structure for buttons in elem
366 var setupButtons = function ($elem, settings, actionGroup) { 408 var setupButtons = function ($elem, settings, actionGroup) {
367 if (settings.interactionMode === 'fullscreen') { 409 if (settings.interactionMode === 'fullscreen') {