Mercurial > hg > digilib-old
comparison client/digitallibrary/jquery/jquery.digilib.js @ 730:fec653a3094e jquery
better birdMoveArea, now called setupBirdDrag.
author | robcast |
---|---|
date | Tue, 01 Feb 2011 16:03:57 +0100 |
parents | 84ad95fd3202 |
children | d69a72e8562f |
comparison
equal
deleted
inserted
replaced
728:84ad95fd3202 | 730:fec653a3094e |
---|---|
983 $birdImg.attr('src', newsrc); | 983 $birdImg.attr('src', newsrc); |
984 // onload handler re-renders | 984 // onload handler re-renders |
985 } else { | 985 } else { |
986 // re-render | 986 // re-render |
987 renderBirdArea(data); | 987 renderBirdArea(data); |
988 // enable click and drag | |
989 birdMoveArea(data); | |
988 } | 990 } |
989 }; | 991 }; |
990 | 992 |
991 // creates HTML structure for the about view in elem | 993 // creates HTML structure for the about view in elem |
992 var setupAboutDiv = function (data) { | 994 var setupAboutDiv = function (data) { |
1162 $birdZoom.hide(); | 1164 $birdZoom.hide(); |
1163 return; | 1165 return; |
1164 } else { | 1166 } else { |
1165 $birdZoom.show(); | 1167 $birdZoom.show(); |
1166 } | 1168 } |
1169 // position may have changed | |
1170 data.birdTrafo = getImgTrafo(data.$birdImg, MAX_ZOOMAREA); | |
1167 var indRect = data.birdTrafo.transform(zoomArea); | 1171 var indRect = data.birdTrafo.transform(zoomArea); |
1168 var coords = { | 1172 var coords = { |
1169 left : indRect.x-2, // acount for frame width | 1173 left : indRect.x-2, // acount for frame width |
1170 top : indRect.y-2, | 1174 top : indRect.y-2, |
1171 width : indRect.width, | 1175 width : indRect.width, |
1277 | 1281 |
1278 // bird's eye view zoom area click and drag handler | 1282 // bird's eye view zoom area click and drag handler |
1279 var birdMoveArea = function(data) { | 1283 var birdMoveArea = function(data) { |
1280 var $birdImg = data.$birdImg; | 1284 var $birdImg = data.$birdImg; |
1281 var $birdZoom = data.$birdZoom; | 1285 var $birdZoom = data.$birdZoom; |
1286 var $document = $(document); | |
1282 var startPos, newRect, birdImgRect, birdZoomRect; | 1287 var startPos, newRect, birdImgRect, birdZoomRect; |
1283 | 1288 |
1284 var birdZoomMove = function(evt) { | 1289 var birdZoomMove = function(evt) { |
1285 // mousemove handler: drag | 1290 // mousemove handler: drag |
1286 var pos = geom.position(evt); | 1291 var pos = geom.position(evt); |
1287 var dx = pos.x - startPos.x; | 1292 var delta = startPos.delta(pos); |
1288 var dy = pos.y - startPos.y; | |
1289 // move birdZoom div, keeping size | 1293 // move birdZoom div, keeping size |
1290 newRect = geom.rectangle( | 1294 newRect = birdZoomRect.copy(); |
1291 birdZoomRect.x + dx, | 1295 newRect.addPt1(delta); |
1292 birdZoomRect.y + dy, | |
1293 birdZoomRect.width, | |
1294 birdZoomRect.height); | |
1295 // stay within birdimage | 1296 // stay within birdimage |
1296 newRect.stayInside(birdImgRect); | 1297 newRect.stayInside(birdImgRect); |
1297 $birdZoom.offset({left : newRect.x, top : newRect.y}); | 1298 newRect.adjustDiv($birdZoom); |
1298 // $birdZoom.show(); | |
1299 return false; | 1299 return false; |
1300 }; | 1300 }; |
1301 | 1301 |
1302 var birdZoomEndDrag = function(evt) { | 1302 var birdZoomEndDrag = function(evt) { |
1303 // mouseup handler: reload page | 1303 // mouseup handler: reload page |
1304 var settings = data.settings; | 1304 var settings = data.settings; |
1305 $(document).unbind("mousemove.digilib", birdZoomMove); | 1305 $document.unbind("mousemove.dlBirdMove", birdZoomMove); |
1306 $(document).unbind("mouseup.digilib", birdZoomEndDrag); | 1306 $document.unbind("mouseup.dlBirdMove", birdZoomEndDrag); |
1307 $birdZoom.unbind("mousemove.digilib", birdZoomMove); | 1307 $birdZoom.unbind("mousemove.dlBirdMove", birdZoomMove); |
1308 $birdZoom.unbind("mouseup.digilib", birdZoomEndDrag); | 1308 $birdZoom.unbind("mouseup.dlBirdMove", birdZoomEndDrag); |
1309 if (newRect == null) { // no movement happened | 1309 if (newRect == null) { |
1310 // no movement happened - set center to click position | |
1310 startPos = birdZoomRect.getCenter(); | 1311 startPos = birdZoomRect.getCenter(); |
1311 birdZoomMove(evt); // set center to click position | 1312 birdZoomMove(evt); |
1312 } | 1313 } |
1313 if (data.zoomArea) { | 1314 var newArea = data.birdTrafo.invtransform(newRect); |
1314 // should always be true | 1315 data.zoomArea = newArea; |
1315 var x = cropFloat((newRect.x - birdImgRect.x + 2) / birdImgRect.width); | |
1316 var y = cropFloat((newRect.y - birdImgRect.y + 2) / birdImgRect.height); | |
1317 data.zoomArea.x = x; | |
1318 data.zoomArea.y = y; | |
1319 } | |
1320 settings.ws = 1; // zoomed is always fit | |
1321 redisplay(data); | 1316 redisplay(data); |
1322 return false; | 1317 return false; |
1323 }; | 1318 }; |
1324 | 1319 |
1325 var birdZoomStartDrag = function(evt) { | 1320 var birdZoomStartDrag = function(evt) { |
1326 // mousedown handler: start dragging bird zoom to a new position | 1321 // mousedown handler: start dragging bird zoom to a new position |
1327 startPos = geom.position(evt); | 1322 startPos = geom.position(evt); |
1323 // position may have changed | |
1324 data.birdTrafo = getImgTrafo($birdImg, MAX_ZOOMAREA); | |
1328 birdImgRect = geom.rectangle($birdImg); | 1325 birdImgRect = geom.rectangle($birdImg); |
1329 birdZoomRect = geom.rectangle($birdZoom); | 1326 birdZoomRect = geom.rectangle($birdZoom); |
1330 $(document).bind("mousemove.digilib", birdZoomMove); | 1327 $document.bind("mousemove.dlBirdMove", birdZoomMove); |
1331 $(document).bind("mouseup.digilib", birdZoomEndDrag); | 1328 $document.bind("mouseup.dlBirdMove", birdZoomEndDrag); |
1332 $birdZoom.bind("mousemove.digilib", birdZoomMove); | 1329 $birdZoom.bind("mousemove.dlBirdMove", birdZoomMove); |
1333 $birdZoom.bind("mouseup.digilib", birdZoomEndDrag); | 1330 $birdZoom.bind("mouseup.dlBirdMove", birdZoomEndDrag); |
1334 return false; | 1331 return false; |
1335 }; | 1332 }; |
1336 | 1333 |
1337 $birdImg.bind("mousedown.digilib", birdZoomStartDrag); | 1334 // clear old handler |
1338 $birdZoom.bind("mousedown.digilib", birdZoomStartDrag); | 1335 $document.unbind(".dlBirdMove"); |
1336 $birdImg.unbind(".dlBirdMove"); | |
1337 $birdZoom.unbind(".dlBirdMove"); | |
1338 // set new handler | |
1339 $birdImg.bind("mousedown.dlBirdMove", birdZoomStartDrag); | |
1340 $birdZoom.bind("mousedown.dlBirdMove", birdZoomStartDrag); | |
1339 }; | 1341 }; |
1340 | 1342 |
1341 var setupZoomDrag = function(data) { | 1343 var setupZoomDrag = function(data) { |
1342 // setup handlers for dragging the zoomed image | 1344 // setup handlers for dragging the zoomed image |
1343 var pt1, pt2; | 1345 var pt1, pt2; |
1360 'background-image' : 'url(' + $img.attr('src') + ')', | 1362 'background-image' : 'url(' + $img.attr('src') + ')', |
1361 'background-repeat' : 'no-repeat', | 1363 'background-repeat' : 'no-repeat', |
1362 'background-position' : 'top left', | 1364 'background-position' : 'top left', |
1363 'cursor' : 'move' | 1365 'cursor' : 'move' |
1364 }); | 1366 }); |
1365 $img.hide(); | 1367 $img.css('visibility', 'hidden'); |
1366 $(document).bind("mousemove.digilib", dragMove); | 1368 $(document).bind("mousemove.digilib", dragMove); |
1367 $(document).bind("mouseup.digilib", dragEnd); | 1369 $(document).bind("mouseup.digilib", dragEnd); |
1368 return false; | 1370 return false; |
1369 }; | 1371 }; |
1370 | 1372 |