# HG changeset patch # User hertzhaft # Date 1296227672 -3600 # Node ID e1995c54066795f517d62a9b8c1883ff633712d4 # Parent cdf6a0d04bf95c64608f8856217385871eaa821a drag zoomed image diff -r cdf6a0d04bf9 -r e1995c540667 client/digitallibrary/jquery/jquery.digilib.js --- a/client/digitallibrary/jquery/jquery.digilib.js Fri Jan 28 11:52:06 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.js Fri Jan 28 16:14:32 2011 +0100 @@ -1023,11 +1023,15 @@ // display marks renderMarks(data); // TODO: digilib.showArrows(); // show arrow overlays for zoom navigation - // TODO: the birdview should adapt to mirror or rotation? var $birdImg = data.$birdImg; + // should the birdview adapt to mirror or rotation? decision: No. :-) if ($birdImg) { $birdImg.triggerHandler('load'); }; + // TODO: the actual moving code + if (!isFullArea(data.zoomArea)) { + setupZoomDrag(data); + }; }; }; @@ -1250,12 +1254,77 @@ $birdZoom.bind("mousedown.digilib", birdZoomStartDrag); }; + var setupZoomDrag = function(data) { + // setup handlers for dragging the zoomed image + var pt1, pt2; + var dx = 0; + var dy = 0; + var $elem = data.$elem; + var $scaler = data.$scaler; + var $img = data.$img; + var $bg = $('
'); + $scaler.before($bg); // set as background + + var dragStart = function (evt) { + // drag the image and load a new detail on mouse up + // useless if not zoomed + if (isFullArea(data.zoomArea)) return false; + if(evt.preventDefault) evt.preventDefault(); // no Firefox drag and drop (NEEDED?) + pt1 = geom.position(evt); + $imgRect = geom.rectangle($img); + $imgRect.adjustDiv($bg); // set background size + // hide the scaler image, show it as background of div instead + $bg.css({ + 'background-image' : 'url(' + $img.attr('src') + ')', + 'background-repeat' : 'no-repeat', + 'cursor' : 'move' + }); + $img.hide(); + $bg.show(); + $(document).bind("mousemove.digilib", dragMove); + $(document).bind("mouseup.digilib", dragEnd); + window.focus(); + }; + + var dragMove = function (evt) { + // mousemove handler: drag + var pos = geom.position(evt); + if(evt.preventDefault) evt.preventDefault(); // no Firefox drag and drop (NEEDED?) + dx = pos.x - pt1.x; + dy = pos.y - pt1.y; + // move the background image to the new position + $bg.css({ + 'background-position' : dx + "px " + dy + "px" + }); + return false; + }; + + var dragEnd = function (evt) { + // mouseup handler: reload digilib + $bg.css({ + 'cursor' : 'default' + }); + $(document).unbind("mousemove.digilib", dragMove); + $(document).unbind("mouseup.digilib", dragEnd); + // calculate relative offset + var x = -dx / $img.width(); + var y = -dy / $img.height(); + if (dx == 0 && dy == 0) + return false // no movement + // reload with scaler image showing the new ausschnitt + // digilib.moveBy(x, y); + return false; + }; + + $scaler.bind("mousedown.digilib", dragStart); + }; + // get image quality as a number (0..2) var getQuality = function (data) { var flags = data.scalerFlags; var q = flags.q2 || flags.q1 || 'q0'; // assume q0 as default return parseInt(q[1], 10); - }; + }; // set image quality as a number (0..2) var setQuality = function (data, qual) { @@ -1265,7 +1334,7 @@ delete flags['q'+i]; } flags['q'+qual] = 'q'+qual; - }; + }; // sets a key to a value (relative values with +/- if relative=true) var setNumValue = function(settings, key, value) {