comparison client/digitallibrary/jquery/jquery.digilib.js @ 703:d16dffcaeee1 jquery

cosmetics
author hertzhaft
date Sat, 29 Jan 2011 23:50:06 +0100
parents 89ff5133d1c1
children 1e45fb7f2e8b
comparison
equal deleted inserted replaced
702:89ff5133d1c1 703:d16dffcaeee1
280 // create HTML structure for scaler 280 // create HTML structure for scaler
281 setupScalerDiv(data); 281 setupScalerDiv(data);
282 // add buttons 282 // add buttons
283 for (var i = 0; i < elemSettings.visibleButtonSets; ++i) { 283 for (var i = 0; i < elemSettings.visibleButtonSets; ++i) {
284 showButtons(data, true, i); 284 showButtons(data, true, i);
285 } 285 };
286 // bird's eye view creation 286 // bird's eye view creation
287 if (elemSettings.isBirdDivVisible ) { 287 if (elemSettings.isBirdDivVisible) {
288 setupBirdDiv(data); 288 setupBirdDiv(data);
289 } 289 };
290 // about window creation - TODO: could be deferred? restrict to only one item? 290 // about window creation - TODO: could be deferred? restrict to only one item?
291 setupAboutDiv(data); 291 setupAboutDiv(data);
292 // TODO: the actual moving code 292 // TODO: the actual moving code
293 setupZoomDrag(data); 293 setupZoomDrag(data);
294 }); 294 });
295 }, 295 },
296 296
297 // destroy: clean up digilib 297 // destroy: clean up digilib
434 factor = window.prompt("Contrast (-8, 8)", cont); 434 factor = window.prompt("Contrast (-8, 8)", cont);
435 } 435 }
436 data.settings.cont = factor; 436 data.settings.cont = factor;
437 redisplay(data); 437 redisplay(data);
438 }, 438 },
439 439
440 // display more (or less) button sets 440 // display more (or less) button sets
441 morebuttons : function (data, more) { 441 morebuttons : function (data, more) {
442 var settings = data.settings; 442 var settings = data.settings;
443 if (more == null) { 443 if (more == null) {
444 // toggle more or less (only works for 2 sets) 444 // toggle more or less (only works for 2 sets)
502 if (noprompt == null) { 502 if (noprompt == null) {
503 window.prompt("URL reference to the current view", url); 503 window.prompt("URL reference to the current view", url);
504 } 504 }
505 return url; 505 return url;
506 }, 506 },
507 507
508 // set image quality 508 // set image quality
509 setquality : function (data, qual) { 509 setquality : function (data, qual) {
510 var oldq = getQuality(data); 510 var oldq = getQuality(data);
511 if (qual == null) { 511 if (qual == null) {
512 qual = window.prompt("Image quality (0..2)", oldq); 512 qual = window.prompt("Image quality (0..2)", oldq);
525 }; 525 };
526 526
527 // returns parameters from embedded img-element 527 // returns parameters from embedded img-element
528 var parseImgParams = function($elem) { 528 var parseImgParams = function($elem) {
529 var src = $elem.find('img').first().attr('src'); 529 var src = $elem.find('img').first().attr('src');
530 if (!src) { 530 if (!src) return null;
531 return null;
532 }
533 var pos = src.indexOf('?'); 531 var pos = src.indexOf('?');
534 var query = (pos < 0) ? '' : src.substring(pos + 1); 532 var query = (pos < 0) ? '' : src.substring(pos + 1);
535 var scalerUrl = src.substring(0, pos); 533 var scalerUrl = src.substring(0, pos);
536 var params = parseQueryString(query); 534 var params = parseQueryString(query);
537 params.scalerBaseUrl = scalerUrl; 535 params.scalerBaseUrl = scalerUrl;
577 // returns URL and query string for Scaler 575 // returns URL and query string for Scaler
578 var getScalerUrl = function (data) { 576 var getScalerUrl = function (data) {
579 var settings = data.settings; 577 var settings = data.settings;
580 if (settings.scalerBaseUrl == null) { 578 if (settings.scalerBaseUrl == null) {
581 alert("ERROR: URL of digilib Scaler servlet missing!"); 579 alert("ERROR: URL of digilib Scaler servlet missing!");
582 } 580 };
583 packParams(data); 581 packParams(data);
584 var keys = settings.scalerParamNames; 582 var keys = settings.scalerParamNames;
585 var queryString = getParamString(settings, keys, defaults); 583 var queryString = getParamString(settings, keys, defaults);
586 var url = settings.scalerBaseUrl + '?' + queryString; 584 var url = settings.scalerBaseUrl + '?' + queryString;
587 return url; 585 return url;
611 var mk = settings.mk; 609 var mk = settings.mk;
612 if (mk.indexOf(";") >= 0) { 610 if (mk.indexOf(";") >= 0) {
613 var pa = mk.split(";"); // old format with ";" 611 var pa = mk.split(";"); // old format with ";"
614 } else { 612 } else {
615 var pa = mk.split(","); // new format 613 var pa = mk.split(","); // new format
616 } 614 };
617 for (var i = 0; i < pa.length ; i++) { 615 for (var i = 0; i < pa.length ; i++) {
618 var pos = pa[i].split("/"); 616 var pos = pa[i].split("/");
619 if (pos.length > 1) { 617 if (pos.length > 1) {
620 marks.push(geom.position(pos[0], pos[1])); 618 marks.push(geom.position(pos[0], pos[1]));
621 } 619 };
622 } 620 };
623 } 621 };
624 data.marks = marks; 622 data.marks = marks;
625 // mo (Scaler flags) 623 // mo (Scaler flags)
626 var flags = {}; 624 var flags = {};
627 if (settings.mo) { 625 if (settings.mo) {
628 var pa = settings.mo.split(","); 626 var pa = settings.mo.split(",");
629 for (var i = 0; i < pa.length ; i++) { 627 for (var i = 0; i < pa.length ; i++) {
630 flags[pa[i]] = pa[i]; 628 flags[pa[i]] = pa[i];
631 } 629 };
632 } 630 };
633 data.scalerFlags = flags; 631 data.scalerFlags = flags;
634 retrieveOptionsCookie(data); 632 retrieveOptionsCookie(data);
635 }; 633 };
636 634
637 // put objects back into parameters 635 // put objects back into parameters
641 if (data.zoomArea) { 639 if (data.zoomArea) {
642 settings.wx = cropFloat(data.zoomArea.x); 640 settings.wx = cropFloat(data.zoomArea.x);
643 settings.wy = cropFloat(data.zoomArea.y); 641 settings.wy = cropFloat(data.zoomArea.y);
644 settings.ww = cropFloat(data.zoomArea.width); 642 settings.ww = cropFloat(data.zoomArea.width);
645 settings.wh = cropFloat(data.zoomArea.height); 643 settings.wh = cropFloat(data.zoomArea.height);
646 } 644 };
647 // marks 645 // marks
648 if (data.marks) { 646 if (data.marks) {
649 settings.mk = ''; 647 settings.mk = '';
650 for (var i = 0; i < data.marks.length; i++) { 648 for (var i = 0; i < data.marks.length; i++) {
651 if (i) { 649 if (i) {
652 settings.mk += ','; 650 settings.mk += ',';
653 } 651 };
654 settings.mk += cropFloat(data.marks[i].x).toString() + '/' + cropFloat(data.marks[i].y).toString(); 652 settings.mk
655 } 653 += cropFloat(data.marks[i].x).toString() + '/'
656 } 654 + cropFloat(data.marks[i].y).toString();
655 };
656 };
657 // Scaler flags 657 // Scaler flags
658 if (data.scalerFlags) { 658 if (data.scalerFlags) {
659 var mo = ''; 659 var mo = '';
660 for (var f in data.scalerFlags) { 660 for (var f in data.scalerFlags) {
661 if (mo) { 661 if (mo) {
663 } 663 }
664 mo += f; 664 mo += f;
665 } 665 }
666 settings.mo = mo; 666 settings.mo = mo;
667 } 667 }
668 // user interface options
668 storeOptionsCookie(data); 669 storeOptionsCookie(data);
669 }; 670 };
670 671
671 var storeOptionsCookie = function (data) { 672 var storeOptionsCookie = function (data) {
672 // save digilib options in cookie 673 // save digilib options in cookie
689 data.dlOpts.buttons = settings.visibleButtonSets; 690 data.dlOpts.buttons = settings.visibleButtonSets;
690 var clop = ''; 691 var clop = '';
691 for (var o in data.dlOpts) { 692 for (var o in data.dlOpts) {
692 if (clop) { 693 if (clop) {
693 clop += '&'; 694 clop += '&';
694 } 695 };
695 clop += o + '=' + data.dlOpts[o]; 696 clop += o + '=' + data.dlOpts[o];
696 } 697 };
697 if (jQuery.cookie) { 698 if (jQuery.cookie) {
698 var ck = "digilib:fn:" + escape(settings.fn) + ":pn:" + settings.pn; 699 var ck = "digilib:fn:" + escape(settings.fn) + ":pn:" + settings.pn;
699 console.debug("set cookie=", ck, " value=", clop); 700 console.debug("set cookie=", ck, " value=", clop);
700 jQuery.cookie(ck, clop); 701 jQuery.cookie(ck, clop);
701 }; 702 };
746 // update location.href (browser URL) in fullscreen mode 747 // update location.href (browser URL) in fullscreen mode
747 var url = getDigilibUrl(data); 748 var url = getDigilibUrl(data);
748 var history = window.history; 749 var history = window.history;
749 if (typeof(history.pushState) === 'function') { 750 if (typeof(history.pushState) === 'function') {
750 console.debug("we could modify history, but we don't..."); 751 console.debug("we could modify history, but we don't...");
751 } 752 };
752 window.location = url; 753 window.location = url;
753 } else { 754 } else {
754 // embedded mode -- just change img src 755 // embedded mode -- just change img src
755 var url = getScalerUrl(data); 756 var url = getScalerUrl(data);
756 data.$img.attr('src', url); 757 data.$img.attr('src', url);
757 // and update bird's eye view 758 };
758 //if (settings.isBirdDivVisible) {
759 // renderBirdZoom(data);
760 //}
761 };
762 }; 759 };
763 760
764 // returns maximum size for scaler img in fullscreen mode 761 // returns maximum size for scaler img in fullscreen mode
765 var getFullscreenImgSize = function($elem) { 762 var getFullscreenImgSize = function($elem) {
766 var $win = $(window); 763 var $win = $(window);
929 $content.text('Version: ' + settings.version); 926 $content.text('Version: ' + settings.version);
930 // click hides 927 // click hides
931 $aboutDiv.bind('click.digilib', function () { 928 $aboutDiv.bind('click.digilib', function () {
932 settings.isAboutDivVisible = showDiv(settings.isAboutDivVisible, $aboutDiv, 0); 929 settings.isAboutDivVisible = showDiv(settings.isAboutDivVisible, $aboutDiv, 0);
933 return false; 930 return false;
934 }); 931 });
935 data.$aboutDiv = $aboutDiv; 932 data.$aboutDiv = $aboutDiv;
936 }; 933 };
937 934
938 // shows some window e.g. 'about' (toggle visibility if show is null) 935 // shows some window e.g. 'about' (toggle visibility if show is null)
939 var showDiv = function (isVisible, $div, show) { 936 var showDiv = function (isVisible, $div, show) {
941 // toggle visibility 938 // toggle visibility
942 isVisible = !isVisible; 939 isVisible = !isVisible;
943 } else { 940 } else {
944 // set visibility 941 // set visibility
945 isVisible = show; 942 isVisible = show;
946 } 943 };
947 if (isVisible) { 944 if (isVisible) {
948 $div.fadeIn(); 945 $div.fadeIn();
949 } else { 946 } else {
950 $div.fadeOut(); 947 $div.fadeOut();
951 } 948 };
952 return isVisible; 949 return isVisible;
953 }; 950 };
954 951
955 // display more (or less) button sets 952 // display more (or less) button sets
956 var showButtons = function (data, more, setIdx, animated) { 953 var showButtons = function (data, more, setIdx, animated) {
961 if (data.$buttonSets && data.$buttonSets[setIdx]) { 958 if (data.$buttonSets && data.$buttonSets[setIdx]) {
962 // set exists 959 // set exists
963 $set = data.$buttonSets[setIdx]; 960 $set = data.$buttonSets[setIdx];
964 } else { 961 } else {
965 $set = createButtons(data, setIdx); 962 $set = createButtons(data, setIdx);
966 } 963 };
967 if ($set == null) return false; 964 if ($set == null) return false;
968 var btnWidth = $set.width(); 965 var btnWidth = $set.width();
969 // move remaining sets left and show new set 966 // move remaining sets left and show new set
970 if (animated) { 967 if (animated) {
971 $otherSets.animate({left : '-='+btnWidth+'px'}, 'fast', 968 $otherSets.animate({left : '-='+btnWidth+'px'}, 'fast',
972 function () {$set.show();}); 969 function () {$set.show();});
973 } else { 970 } else {
974 var oldpos = $otherSets.position(); 971 var oldpos = $otherSets.position();
975 if (oldpos) { 972 if (oldpos) {
976 $otherSets.css({left : oldpos.left-btnWidth+'px'}); 973 $otherSets.css({left : oldpos.left-btnWidth+'px'});
977 } 974 };
978 $set.show(); 975 $set.show();
979 } 976 };
980 } else { 977 } else {
981 // remove set 978 // remove set
982 var $set = data.$buttonSets[setIdx]; 979 var $set = data.$buttonSets[setIdx];
983 if ($set == null) return false; 980 if ($set == null) return false;
984 var btnWidth = $set.width(); 981 var btnWidth = $set.width();
988 var $otherSets = data.$elem.find('div.buttons:visible'); 985 var $otherSets = data.$elem.find('div.buttons:visible');
989 if (animated) { 986 if (animated) {
990 $otherSets.animate({left : '+='+btnWidth+'px'}, 'fast'); 987 $otherSets.animate({left : '+='+btnWidth+'px'}, 'fast');
991 } else { 988 } else {
992 $otherSets.css({left : '+='+btnWidth+'px'}); 989 $otherSets.css({left : '+='+btnWidth+'px'});
993 } 990 };
994 } 991 };
995 return true; 992 return true;
996 }; 993 };
997 994
998 // create Transform from area and $img 995 // create Transform from area and $img
999 var getImgTrafo = function ($img, area, rot, hmir, vmir) { 996 var getImgTrafo = function ($img, area, rot, hmir, vmir) {
1008 // move [0.5,0.5] to center 1005 // move [0.5,0.5] to center
1009 trafo.concat(trafo.getTranslation(geom.position(-0.5, -0.5))); 1006 trafo.concat(trafo.getTranslation(geom.position(-0.5, -0.5)));
1010 if (hmir) { 1007 if (hmir) {
1011 // mirror about center 1008 // mirror about center
1012 trafo.concat(trafo.getMirror('y')); 1009 trafo.concat(trafo.getMirror('y'));
1013 } 1010 };
1014 if (vmir) { 1011 if (vmir) {
1015 // mirror about center 1012 // mirror about center
1016 trafo.concat(trafo.getMirror('x')); 1013 trafo.concat(trafo.getMirror('x'));
1017 } 1014 };
1018 if (rot) { 1015 if (rot) {
1019 // rotate around center 1016 // rotate around center
1020 trafo.concat(trafo.getRotation(parseFloat(rot))); 1017 trafo.concat(trafo.getRotation(parseFloat(rot)));
1021 } 1018 };
1022 // move back 1019 // move back
1023 trafo.concat(trafo.getTranslation(geom.position(0.5, 0.5))); 1020 trafo.concat(trafo.getTranslation(geom.position(0.5, 0.5)));
1024 } 1021 };
1025 // scale to screen position and size 1022 // scale to screen position and size
1026 trafo.concat(trafo.getScale(picrect)); 1023 trafo.concat(trafo.getScale(picrect));
1027 trafo.concat(trafo.getTranslation(picrect)); 1024 trafo.concat(trafo.getTranslation(picrect));
1028 return trafo; 1025 return trafo;
1029 }; 1026 };
1073 // create mark 1070 // create mark
1074 var html = '<div class="mark">'+(i+1)+'</div>'; 1071 var html = '<div class="mark">'+(i+1)+'</div>';
1075 var $mark = $(html); 1072 var $mark = $(html);
1076 $elem.append($mark); 1073 $elem.append($mark);
1077 $mark.offset({left : mpos.x, top : mpos.y}); 1074 $mark.offset({left : mpos.x, top : mpos.y});
1078 } 1075 };
1079 } 1076 };
1080 }; 1077 };
1081 1078
1082 // show zoom area indicator on bird's eye view 1079 // show zoom area indicator on bird's eye view
1083 var renderbirdZoom = function (data) { 1080 var renderbirdZoom = function (data) {
1084 var $birdZoom = data.$birdZoom; 1081 var $birdZoom = data.$birdZoom;
1170 // mouseup handler: end moving 1167 // mouseup handler: end moving
1171 var zoomEnd = function (evt) { 1168 var zoomEnd = function (evt) {
1172 pt2 = geom.position(evt); 1169 pt2 = geom.position(evt);
1173 // assume a click and continue if the area is too small 1170 // assume a click and continue if the area is too small
1174 var clickRect = geom.rectangle(pt1, pt2); 1171 var clickRect = geom.rectangle(pt1, pt2);
1175 if (clickRect.getArea() <= 5) { 1172 if (clickRect.getArea() <= 5) return false;
1176 return false;
1177 }
1178 // hide zoom div 1173 // hide zoom div
1179 $zoomDiv.remove(); 1174 $zoomDiv.remove();
1180 // unregister events 1175 // unregister events
1181 $elem.unbind("mousemove.digilib", zoomMove); 1176 $elem.unbind("mousemove.digilib", zoomMove);
1182 $elem.unbind("mouseup.digilib", zoomEnd); 1177 $elem.unbind("mouseup.digilib", zoomEnd);
1278 var $bg = $elem.has('div.bgDrag'); 1273 var $bg = $elem.has('div.bgDrag');
1279 if ($bg.length === 0) { 1274 if ($bg.length === 0) {
1280 $bg = $('<div class="bgDrag" style="display:none; position:absolute"/>'); 1275 $bg = $('<div class="bgDrag" style="display:none; position:absolute"/>');
1281 $scaler.before($bg); // set as background 1276 $scaler.before($bg); // set as background
1282 }; 1277 };
1283 1278
1284 var dragStart = function (evt) { 1279 var dragStart = function (evt) {
1285 // drag the image and load a new detail on mouse up 1280 // drag the image and load a new detail on mouse up
1286 // useless if not zoomed 1281 // useless if not zoomed
1287 if (isFullArea(data.zoomArea)) return false; 1282 if (isFullArea(data.zoomArea)) return false;
1288 if(evt.preventDefault) evt.preventDefault(); // no Firefox drag and drop (NEEDED?) 1283 if(evt.preventDefault) evt.preventDefault(); // no Firefox drag and drop (NEEDED?)
1300 $bg.show(); 1295 $bg.show();
1301 $(document).bind("mousemove.digilib", dragMove); 1296 $(document).bind("mousemove.digilib", dragMove);
1302 $(document).bind("mouseup.digilib", dragEnd); 1297 $(document).bind("mouseup.digilib", dragEnd);
1303 window.focus(); 1298 window.focus();
1304 }; 1299 };
1305 1300
1306 var dragMove = function (evt) { 1301 var dragMove = function (evt) {
1307 // mousemove handler: drag 1302 // mousemove handler: drag
1308 var pos = geom.position(evt); 1303 var pos = geom.position(evt);
1309 if(evt.preventDefault) evt.preventDefault(); // no Firefox drag and drop (NEEDED?) 1304 if(evt.preventDefault) evt.preventDefault(); // no Firefox drag and drop (NEEDED?)
1310 dx = pos.x - pt1.x; 1305 dx = pos.x - pt1.x;
1313 $bg.css({ 1308 $bg.css({
1314 'background-position' : dx + "px " + dy + "px" 1309 'background-position' : dx + "px " + dy + "px"
1315 }); 1310 });
1316 return false; 1311 return false;
1317 }; 1312 };
1318 1313
1319 var dragEnd = function (evt) { 1314 var dragEnd = function (evt) {
1320 // mouseup handler: reload digilib 1315 // mouseup handler: reload digilib
1321 $bg.css({ 1316 $bg.css({
1322 'cursor' : 'default' 1317 'cursor' : 'default'
1323 }); 1318 });
1324 $(document).unbind("mousemove.digilib", dragMove); 1319 $(document).unbind("mousemove.digilib", dragMove);
1325 $(document).unbind("mouseup.digilib", dragEnd); 1320 $(document).unbind("mouseup.digilib", dragEnd);
1326 // calculate relative offset 1321 // calculate relative offset
1327 if (dx == 0 && dy == 0) 1322 if (dx == 0 && dy == 0) return false // no movement
1328 return false // no movement
1329 // reload with scaler image showing the new ausschnitt 1323 // reload with scaler image showing the new ausschnitt
1330 // digilib.moveBy(x, y); 1324 // digilib.moveBy(x, y);
1331 var pos = geom.position(-dx, -dy); 1325 var pos = geom.position(-dx, -dy);
1332 var newPos = data.imgTrafo.invtransform(pos); 1326 var newPos = data.imgTrafo.invtransform(pos);
1333 var newArea = data.zoomArea.setPt1(newPos); 1327 var newArea = data.zoomArea.setPt1(newPos);
1351 var setQuality = function (data, qual) { 1345 var setQuality = function (data, qual) {
1352 var flags = data.scalerFlags; 1346 var flags = data.scalerFlags;
1353 // clear flags 1347 // clear flags
1354 for (var i = 0; i < 3; ++i) { 1348 for (var i = 0; i < 3; ++i) {
1355 delete flags['q'+i]; 1349 delete flags['q'+i];
1356 } 1350 };
1357 flags['q'+qual] = 'q'+qual; 1351 flags['q'+qual] = 'q'+qual;
1358 }; 1352 };
1359 1353
1360 // sets a key to a value (relative values with +/- if relative=true) 1354 // sets a key to a value (relative values with +/- if relative=true)
1361 var setNumValue = function(settings, key, value) { 1355 var setNumValue = function(settings, key, value) {
1362 if (isNumber(value)) return settings[key] = value; 1356 if (isNumber(value)) return settings[key] = value;
1363 var sign = value.substring(0,1); 1357 var sign = value.substring(0,1);
1364 if (sign === '+' || sign === '-') { 1358 if (sign === '+' || sign === '-') {
1365 if (settings[key] == null) { 1359 if (settings[key] == null) {
1366 // this isn't perfect but still... 1360 // this isn't perfect but still...
1367 settings[key] = 0; 1361 settings[key] = 0;
1368 } 1362 };
1369 settings[key] = parseFloat(settings[key]) + parseFloat(value); 1363 settings[key] = parseFloat(settings[key]) + parseFloat(value);
1370 } else { 1364 } else {
1371 settings[key] = value; 1365 settings[key] = value;
1372 } 1366 };
1373 return settings[key]; 1367 return settings[key];
1374 }; 1368 };
1375 1369
1376 // auxiliary function (from old dllib.js) 1370 // auxiliary function (from old dllib.js)
1377 isFullArea = function(area) { 1371 isFullArea = function(area) {
1378 return (area.width === 1.0) && (area.height === 1.0); 1372 return (area.width === 1.0) && (area.height === 1.0);
1379 }; 1373 };
1380 1374
1381 // auxiliary function (from Douglas Crockford, A.10) 1375 // auxiliary function (from Douglas Crockford, A.10)
1382 var isNumber = function isNumber(value) { 1376 var isNumber = function isNumber(value) {
1383 return typeof value === 'number' && isFinite(value); 1377 return typeof value === 'number' && isFinite(value);
1384 }; 1378 };
1385 1379
1386 // auxiliary function to crop senseless precision 1380 // auxiliary function to crop senseless precision
1387 var cropFloat = function (x) { 1381 var cropFloat = function (x) {
1388 return parseInt(10000 * x, 10) / 10000; 1382 return parseInt(10000 * x, 10) / 10000;
1419 } else if (typeof(action) === 'object' || !action) { 1413 } else if (typeof(action) === 'object' || !action) {
1420 // call init on this 1414 // call init on this
1421 return actions.init.apply(this, arguments); 1415 return actions.init.apply(this, arguments);
1422 } else { 1416 } else {
1423 $.error( 'action ' + action + ' does not exist on jQuery.digilib' ); 1417 $.error( 'action ' + action + ' does not exist on jQuery.digilib' );
1424 } 1418 };
1425 }; 1419 };
1426 1420
1427 })(jQuery); 1421 })(jQuery);