Mercurial > hg > digilib

comparison client/digitallibrary/jquery/jquery.digilib.js @ 738:bd283b2cdbbc jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
move birdview zoom indicator along with zoom drag
author hertzhaft
date Thu, 03 Feb 2011 21:50:25 +0100
parents f527959baa3e
children 58fcf8d8649f
comparison
equal deleted inserted replaced
737:f527959baa3e 738:bd283b2cdbbc
17 Martin Raspe, Robert Casties, 11.1.2011 17 Martin Raspe, Robert Casties, 11.1.2011
18 */ 18 */
19 19
20 /** 20 /**
21 * digilib jQuery plugin 21 * digilib jQuery plugin
22 * 22 **/
23 */ 23
24 24
25 /*jslint browser: true, debug: true, forin: true */ 25 /* jslint browser: true, debug: true, forin: true
26 */
26 27
27 // fallback for console.log calls 28 // fallback for console.log calls
28 if (typeof(console) === 'undefined') { 29 if (typeof(console) === 'undefined') {
29 var console = { 30 var console = {
30 log : function(){}, 31 log : function(){},
668 settings.birdDivParams.concat(moreParams), defaults); 669 settings.birdDivParams.concat(moreParams), defaults);
669 } 670 }
670 var url = settings.scalerBaseUrl + '?' + params; 671 var url = settings.scalerBaseUrl + '?' + params;
671 return url; 672 return url;
672 }; 673 };
673 674
674 // returns URL and query string for current digilib 675 // returns URL and query string for current digilib
675 var getDigilibUrl = function (data) { 676 var getDigilibUrl = function (data) {
676 packParams(data); 677 packParams(data);
677 var settings = data.settings; 678 var settings = data.settings;
678 var queryString = getParamString(settings, settings.digilibParamNames, defaults); 679 var queryString = getParamString(settings, settings.digilibParamNames, defaults);
981 renderBirdArea(data); 982 renderBirdArea(data);
982 // enable click and drag 983 // enable click and drag
983 setupBirdDrag(data); 984 setupBirdDrag(data);
984 } 985 }
985 }; 986 };
986 987
987 // creates HTML structure for the about view in elem 988 // creates HTML structure for the about view in elem
988 var setupAboutDiv = function (data) { 989 var setupAboutDiv = function (data) {
989 var $elem = data.$elem; 990 var $elem = data.$elem;
990 var settings = data.settings; 991 var settings = data.settings;
991 var $aboutDiv = $('<div class="about" style="display:none"/>'); 992 var $aboutDiv = $('<div class="about" style="display:none"/>');
1249 rect.clipTo(picRect); 1250 rect.clipTo(picRect);
1250 // update zoom div 1251 // update zoom div
1251 rect.adjustDiv($zoomDiv); 1252 rect.adjustDiv($zoomDiv);
1252 return false; 1253 return false;
1253 }; 1254 };
1254 1255
1255 // mouseup handler: end moving 1256 // mouseup handler: end moving
1256 var zoomEnd = function (evt) { 1257 var zoomEnd = function (evt) {
1257 pt2 = geom.position(evt); 1258 pt2 = geom.position(evt);
1258 // assume a click and continue if the area is too small 1259 // assume a click and continue if the area is too small
1259 var clickRect = geom.rectangle(pt1, pt2); 1260 var clickRect = geom.rectangle(pt1, pt2);
1345 $birdImg.bind("mousedown.dlBirdMove", birdZoomStartDrag); 1346 $birdImg.bind("mousedown.dlBirdMove", birdZoomStartDrag);
1346 $birdZoom.bind("mousedown.dlBirdMove", birdZoomStartDrag); 1347 $birdZoom.bind("mousedown.dlBirdMove", birdZoomStartDrag);
1347 } 1348 }
1348 }; 1349 };
1349 1350
1351 // set bird zoom indicator to img rect
1352 var setBirdZoom = function(data, rect) {
1353 var part = data.imgTrafo.invtransform(rect);
1354 // area = FULL_AREA.fit(part);
1355 birdTrafo = getImgTrafo(data.$birdImg, FULL_AREA);
1356 var birdRect = birdTrafo.transform(part);
1357 // acount for border width
1358 birdRect.addPosition({x : -2, y : -2});
1359 birdRect.adjustDiv(data.$birdZoom);
1360 };
1361
1350 // setup handlers for dragging the zoomed image 1362 // setup handlers for dragging the zoomed image
1351 var setupZoomDrag = function(data) { 1363 var setupZoomDrag = function(data) {
1352 var startPos, delta, fullRect, isBgReady; 1364 var startPos, delta, fullRect, isBgReady;
1353 var $document = $(document); 1365 var $document = $(document);
1354 var $elem = data.$elem; 1366 var $elem = data.$elem;
1366 isBgReady = false; 1378 isBgReady = false;
1367 $document.bind("mousemove.dlZoomDrag", dragMove); 1379 $document.bind("mousemove.dlZoomDrag", dragMove);
1368 $document.bind("mouseup.dlZoomDrag", dragEnd); 1380 $document.bind("mouseup.dlZoomDrag", dragEnd);
1369 return false; 1381 return false;
1370 }; 1382 };
1371 1383
1372
1373 // mousemove handler: drag zoomed image 1384 // mousemove handler: drag zoomed image
1374 var dragMove = function (evt) { 1385 var dragMove = function (evt) {
1375 var pos = geom.position(evt); 1386 var pos = geom.position(evt);
1376 delta = startPos.delta(pos); 1387 delta = startPos.delta(pos);
1377 if (!isBgReady) { 1388 if (!isBgReady) {
1410 } 1421 }
1411 // move the background image to the new position 1422 // move the background image to the new position
1412 $scaler.css({ 1423 $scaler.css({
1413 'background-position' : bgPos.x + "px " + bgPos.y + "px" 1424 'background-position' : bgPos.x + "px " + bgPos.y + "px"
1414 }); 1425 });
1426 // get old zoom area (screen coordinates)
1427 var za = geom.rectangle($img);
1428 // move
1429 za.addPosition(delta.neg());
1430 setBirdZoom(data, za);
1415 return false; 1431 return false;
1416 }; 1432 };
1417 1433
1418 // mouseup handler: reload zoomed image in new position 1434 // mouseup handler: reload zoomed image in new position
1419 var dragEnd = function (evt) { 1435 var dragEnd = function (evt) {