Mercurial > hg > digilib

comparison client/digitallibrary/jquery/jquery.digilib.js @ 744:78ed5b49259d jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
zoom-drag background follows birdZoom also in embedded mode (still imprecise)
author hertzhaft
date Sat, 05 Feb 2011 17:12:45 +0100
parents 6bc89f3634a1
children 5d3da97089bc
comparison
equal deleted inserted replaced
743:e07080f24f56 744:78ed5b49259d
1287 // bird's eye view zoom area click and drag handler 1287 // bird's eye view zoom area click and drag handler
1288 var setupBirdDrag = function(data) { 1288 var setupBirdDrag = function(data) {
1289 var $birdImg = data.$birdImg; 1289 var $birdImg = data.$birdImg;
1290 var $birdZoom = data.$birdZoom; 1290 var $birdZoom = data.$birdZoom;
1291 var $document = $(document); 1291 var $document = $(document);
1292 var startPos, newRect, birdImgRect, birdZoomRect, fullRect; 1292 var $scaler = data.$scaler;
1293 var startPos, newRect, birdImgRect, birdZoomRect, fullRect, scalerPos;
1293 1294
1294 // mousedown handler: start dragging bird zoom to a new position 1295 // mousedown handler: start dragging bird zoom to a new position
1295 var birdZoomStartDrag = function(evt) { 1296 var birdZoomStartDrag = function(evt) {
1296 startPos = geom.position(evt); 1297 startPos = geom.position(evt);
1297 // position may have changed 1298 // position may have changed
1298 data.birdTrafo = getImgTrafo($birdImg, FULL_AREA); 1299 data.birdTrafo = getImgTrafo($birdImg, FULL_AREA);
1299 birdImgRect = geom.rectangle($birdImg); 1300 birdImgRect = geom.rectangle($birdImg);
1300 birdZoomRect = geom.rectangle($birdZoom); 1301 birdZoomRect = geom.rectangle($birdZoom);
1302 scalerPos = geom.position($scaler);
1301 newRect = null; 1303 newRect = null;
1302 fullRect = setZoomBG(data); // setup zoom background image 1304 fullRect = setZoomBG(data); // setup zoom background image
1303 $document.bind("mousemove.dlBirdMove", birdZoomMove); 1305 $document.bind("mousemove.dlBirdMove", birdZoomMove);
1304 $document.bind("mouseup.dlBirdMove", birdZoomEndDrag); 1306 $document.bind("mouseup.dlBirdMove", birdZoomEndDrag);
1305 return false; 1307 return false;
1311 var delta = startPos.delta(pos); 1313 var delta = startPos.delta(pos);
1312 // move birdZoom div, keeping size 1314 // move birdZoom div, keeping size
1313 newRect = birdZoomRect.copy(); 1315 newRect = birdZoomRect.copy();
1314 newRect.addPosition(delta); 1316 newRect.addPosition(delta);
1315 newRect.stayInside(birdImgRect); 1317 newRect.stayInside(birdImgRect);
1316 // acount for border width
1317 newRect.addPosition({x : -2, y : -2});
1318 newRect.adjustDiv($birdZoom);
1319 // reflect birdview zoom position in scaler image 1318 // reflect birdview zoom position in scaler image
1320 // TODO: account for scaler position in embedded mode?
1321 var area = data.birdTrafo.invtransform(newRect); 1319 var area = data.birdTrafo.invtransform(newRect);
1322 var imgArea = data.imgTrafo.transform(area); 1320 var imgArea = data.imgTrafo.transform(area);
1323 var offset = imgArea.getPosition().neg(); 1321 var offset = imgArea.getPosition().neg();
1322 offset.add(scalerPos);
1323 console.log('offset', offset);
1324 if (fullRect) { 1324 if (fullRect) {
1325 var bgPos = fullRect.getPosition().add(offset); 1325 var bgPos = fullRect.getPosition().add(offset);
1326 } else { 1326 } else {
1327 var bgPos = offset; 1327 var bgPos = offset;
1328 } 1328 }
1329 // move the background image to the new position 1329 // move the background image to the new position
1330 data.$scaler.css({ 1330 data.$scaler.css({
1331 'background-position' : bgPos.x + "px " + bgPos.y + "px" 1331 'background-position' : bgPos.x + "px " + bgPos.y + "px"
1332 }); 1332 });
1333 // acount for border width
1334 newRect.addPosition({x : -2, y : -2});
1335 newRect.adjustDiv($birdZoom);
1333 return false; 1336 return false;
1334 }; 1337 };
1335 1338
1336 // mouseup handler: reload page 1339 // mouseup handler: reload page
1337 var birdZoomEndDrag = function(evt) { 1340 var birdZoomEndDrag = function(evt) {
1390 if (data.hasBgSize) { 1393 if (data.hasBgSize) {
1391 // full-size background using CSS3-background-size 1394 // full-size background using CSS3-background-size
1392 fullRect = data.imgTrafo.transform(FULL_AREA); 1395 fullRect = data.imgTrafo.transform(FULL_AREA);
1393 if (fullRect.height < data.settings.maxBgSize && fullRect.width < data.settings.maxBgSize) { 1396 if (fullRect.height < data.settings.maxBgSize && fullRect.width < data.settings.maxBgSize) {
1394 // correct offset because background is relative 1397 // correct offset because background is relative
1395 var scalePos = geom.position($scaler); 1398 var scalerPos = geom.position($scaler);
1396 fullRect.addPosition(scalePos.neg()); 1399 fullRect.addPosition(scalerPos.neg());
1397 var url = getBirdImgUrl(data, ['rot', 'mo']); 1400 var url = getBirdImgUrl(data, ['rot', 'mo']);
1398 scalerCss['background-image'] = 'url(' + url + ')'; 1401 scalerCss['background-image'] = 'url(' + url + ')';
1399 scalerCss[data.bgSizeName] = fullRect.width + 'px ' + fullRect.height + 'px'; 1402 scalerCss[data.bgSizeName] = fullRect.width + 'px ' + fullRect.height + 'px';
1400 scalerCss['background-position'] = fullRect.x + 'px '+ fullRect.y + 'px'; 1403 scalerCss['background-position'] = fullRect.x + 'px '+ fullRect.y + 'px';
1401 } else { 1404 } else {
1442 // move the background image to the new position 1445 // move the background image to the new position
1443 $scaler.css({ 1446 $scaler.css({
1444 'background-position' : bgPos.x + "px " + bgPos.y + "px" 1447 'background-position' : bgPos.x + "px " + bgPos.y + "px"
1445 }); 1448 });
1446 // set birdview indicator to reflect new zoom position 1449 // set birdview indicator to reflect new zoom position
1447 // TODO: get rid of indicator wobble
1448 var za = geom.rectangle($img); 1450 var za = geom.rectangle($img);
1449 za.addPosition(delta.neg()); 1451 za.addPosition(delta.neg());
1450 setBirdZoom(data, za); 1452 setBirdZoom(data, za);
1451 return false; 1453 return false;
1452 }; 1454 };