Mercurial > hg > digilib-old
comparison client/digitallibrary/jquery/jquery.digilib.js @ 705:e1995c540667 jquery
drag zoomed image
author | hertzhaft |
---|---|
date | Fri, 28 Jan 2011 16:14:32 +0100 |
parents | 0d49c33646da |
children | f345b9657f5c |
comparison
equal
deleted
inserted
replaced
704:cdf6a0d04bf9 | 705:e1995c540667 |
---|---|
1021 data.settings.rot, data.scalerFlags.hmir, data.scalerFlags.vmir); | 1021 data.settings.rot, data.scalerFlags.hmir, data.scalerFlags.vmir); |
1022 console.debug("imgTrafo=", data.imgTrafo); | 1022 console.debug("imgTrafo=", data.imgTrafo); |
1023 // display marks | 1023 // display marks |
1024 renderMarks(data); | 1024 renderMarks(data); |
1025 // TODO: digilib.showArrows(); // show arrow overlays for zoom navigation | 1025 // TODO: digilib.showArrows(); // show arrow overlays for zoom navigation |
1026 // TODO: the birdview should adapt to mirror or rotation? | |
1027 var $birdImg = data.$birdImg; | 1026 var $birdImg = data.$birdImg; |
1027 // should the birdview adapt to mirror or rotation? decision: No. :-) | |
1028 if ($birdImg) { | 1028 if ($birdImg) { |
1029 $birdImg.triggerHandler('load'); | 1029 $birdImg.triggerHandler('load'); |
1030 }; | |
1031 // TODO: the actual moving code | |
1032 if (!isFullArea(data.zoomArea)) { | |
1033 setupZoomDrag(data); | |
1030 }; | 1034 }; |
1031 }; | 1035 }; |
1032 }; | 1036 }; |
1033 | 1037 |
1034 // returns function for load event of bird's eye view img | 1038 // returns function for load event of bird's eye view img |
1248 | 1252 |
1249 $birdImg.bind("mousedown.digilib", birdZoomStartDrag); | 1253 $birdImg.bind("mousedown.digilib", birdZoomStartDrag); |
1250 $birdZoom.bind("mousedown.digilib", birdZoomStartDrag); | 1254 $birdZoom.bind("mousedown.digilib", birdZoomStartDrag); |
1251 }; | 1255 }; |
1252 | 1256 |
1257 var setupZoomDrag = function(data) { | |
1258 // setup handlers for dragging the zoomed image | |
1259 var pt1, pt2; | |
1260 var dx = 0; | |
1261 var dy = 0; | |
1262 var $elem = data.$elem; | |
1263 var $scaler = data.$scaler; | |
1264 var $img = data.$img; | |
1265 var $bg = $('<div class="bgDrag" style="display:none"/>'); | |
1266 $scaler.before($bg); // set as background | |
1267 | |
1268 var dragStart = function (evt) { | |
1269 // drag the image and load a new detail on mouse up | |
1270 // useless if not zoomed | |
1271 if (isFullArea(data.zoomArea)) return false; | |
1272 if(evt.preventDefault) evt.preventDefault(); // no Firefox drag and drop (NEEDED?) | |
1273 pt1 = geom.position(evt); | |
1274 $imgRect = geom.rectangle($img); | |
1275 $imgRect.adjustDiv($bg); // set background size | |
1276 // hide the scaler image, show it as background of div instead | |
1277 $bg.css({ | |
1278 'background-image' : 'url(' + $img.attr('src') + ')', | |
1279 'background-repeat' : 'no-repeat', | |
1280 'cursor' : 'move' | |
1281 }); | |
1282 $img.hide(); | |
1283 $bg.show(); | |
1284 $(document).bind("mousemove.digilib", dragMove); | |
1285 $(document).bind("mouseup.digilib", dragEnd); | |
1286 window.focus(); | |
1287 }; | |
1288 | |
1289 var dragMove = function (evt) { | |
1290 // mousemove handler: drag | |
1291 var pos = geom.position(evt); | |
1292 if(evt.preventDefault) evt.preventDefault(); // no Firefox drag and drop (NEEDED?) | |
1293 dx = pos.x - pt1.x; | |
1294 dy = pos.y - pt1.y; | |
1295 // move the background image to the new position | |
1296 $bg.css({ | |
1297 'background-position' : dx + "px " + dy + "px" | |
1298 }); | |
1299 return false; | |
1300 }; | |
1301 | |
1302 var dragEnd = function (evt) { | |
1303 // mouseup handler: reload digilib | |
1304 $bg.css({ | |
1305 'cursor' : 'default' | |
1306 }); | |
1307 $(document).unbind("mousemove.digilib", dragMove); | |
1308 $(document).unbind("mouseup.digilib", dragEnd); | |
1309 // calculate relative offset | |
1310 var x = -dx / $img.width(); | |
1311 var y = -dy / $img.height(); | |
1312 if (dx == 0 && dy == 0) | |
1313 return false // no movement | |
1314 // reload with scaler image showing the new ausschnitt | |
1315 // digilib.moveBy(x, y); | |
1316 return false; | |
1317 }; | |
1318 | |
1319 $scaler.bind("mousedown.digilib", dragStart); | |
1320 }; | |
1321 | |
1253 // get image quality as a number (0..2) | 1322 // get image quality as a number (0..2) |
1254 var getQuality = function (data) { | 1323 var getQuality = function (data) { |
1255 var flags = data.scalerFlags; | 1324 var flags = data.scalerFlags; |
1256 var q = flags.q2 || flags.q1 || 'q0'; // assume q0 as default | 1325 var q = flags.q2 || flags.q1 || 'q0'; // assume q0 as default |
1257 return parseInt(q[1], 10); | 1326 return parseInt(q[1], 10); |
1258 }; | 1327 }; |
1259 | 1328 |
1260 // set image quality as a number (0..2) | 1329 // set image quality as a number (0..2) |
1261 var setQuality = function (data, qual) { | 1330 var setQuality = function (data, qual) { |
1262 var flags = data.scalerFlags; | 1331 var flags = data.scalerFlags; |
1263 // clear flags | 1332 // clear flags |
1264 for (var i = 0; i < 3; ++i) { | 1333 for (var i = 0; i < 3; ++i) { |
1265 delete flags['q'+i]; | 1334 delete flags['q'+i]; |
1266 } | 1335 } |
1267 flags['q'+qual] = 'q'+qual; | 1336 flags['q'+qual] = 'q'+qual; |
1268 }; | 1337 }; |
1269 | 1338 |
1270 // sets a key to a value (relative values with +/- if relative=true) | 1339 // sets a key to a value (relative values with +/- if relative=true) |
1271 var setNumValue = function(settings, key, value) { | 1340 var setNumValue = function(settings, key, value) { |
1272 if (isNumber(value)) return settings[key] = value; | 1341 if (isNumber(value)) return settings[key] = value; |
1273 var sign = value.substring(0,1); | 1342 var sign = value.substring(0,1); |