digilib-old: client/digitallibrary/jquery/jquery.digilib.js comparison

comparison client/digitallibrary/jquery/jquery.digilib.js @ 733:25f2898696a2 jquery

fixed setupZoomDrag

author	robcast
date	Tue, 01 Feb 2011 19:30:59 +0100
parents	55f2dd197ca9
children	609e5bf29d1a 790a7673bef0

comparison

equal deleted inserted replaced

-:55f2dd197ca9
+:25f2898696a2
 console.debug("img loaded! this=", this, " data=", data);
 // create Transform from current area and picsize
 data.imgTrafo = getImgTrafo($img, data.zoomArea,
 data.settings.rot, data.scalerFlags.hmir, data.scalerFlags.vmir);
 console.debug("imgTrafo=", data.imgTrafo);
-// set scaler div size explicitly in case $img is hidden (for zoomDrag)
+// adjust scaler div size
-var $imgRect = geom.rectangle(data.$img);
+var imgRect = geom.rectangle(data.$img);
-console.debug("imgrect=", $imgRect);
+console.debug("imgrect=", imgRect);
-$imgRect.adjustDiv(data.$scaler);
+imgRect.adjustDiv(data.$scaler);
 // show image in case it was hidden (for example in zoomDrag)
-$img.show();
+$img.css('visibility', 'visible');
 // display marks
 renderMarks(data);
 // TODO: digilib.showArrows(); // show arrow overlays for zoom navigation
 };
 };
 var $birdImg = data.$birdImg;
 var $birdZoom = data.$birdZoom;
 var $document = $(document);
 var startPos, newRect, birdImgRect, birdZoomRect;
+// mousemove handler: drag
 var birdZoomMove = function(evt) {
-// mousemove handler: drag
 var pos = geom.position(evt);
 var delta = startPos.delta(pos);
 // move birdZoom div, keeping size
 newRect = birdZoomRect.copy();
-newRect.addPt1(delta);
+newRect.addPosition(delta);
 // stay within birdimage
 newRect.stayInside(birdImgRect);
 newRect.adjustDiv($birdZoom);
 return false;
 };
+// mouseup handler: reload page
 var birdZoomEndDrag = function(evt) {
-// mouseup handler: reload page
 var settings = data.settings;
 $document.unbind("mousemove.dlBirdMove", birdZoomMove);
 $document.unbind("mouseup.dlBirdMove", birdZoomEndDrag);
 $birdZoom.unbind("mousemove.dlBirdMove", birdZoomMove);
 $birdZoom.unbind("mouseup.dlBirdMove", birdZoomEndDrag);
 data.zoomArea = newArea;
 redisplay(data);
 return false;
 };
+// mousedown handler: start dragging bird zoom to a new position
 var birdZoomStartDrag = function(evt) {
-// mousedown handler: start dragging bird zoom to a new position
 startPos = geom.position(evt);
 // position may have changed
 data.birdTrafo = getImgTrafo($birdImg, MAX_ZOOMAREA);
 birdImgRect = geom.rectangle($birdImg);
 birdZoomRect = geom.rectangle($birdZoom);
 $birdZoom.bind("mousedown.dlBirdMove", birdZoomStartDrag);
 }
 };
 var setupZoomDrag = function(data) {
 // setup handlers for dragging the zoomed image
-var pt1, pt2;
+var startPos, delta;
-var dx = 0;
+var $document = $(document);
-var dy = 0;
 var $elem = data.$elem;
 var $scaler = data.$scaler;
 var $img = data.$img;
+// drag the image and load a new detail on mouse up
 var dragStart = function (evt) {
-// drag the image and load a new detail on mouse up
+startPos = geom.position(evt);
-// useless if not zoomed
-if (isFullArea(data.zoomArea)) return false;
-pt1 = geom.position(evt);
 $imgRect = geom.rectangle($img);
-// keep scaler div size while $img is hidden (for embedded mode)
-$imgRect.adjustDiv($scaler);
 // hide the scaler image, show it as background of div instead
 $scaler.css({
 'background-image' : 'url(' + $img.attr('src') + ')',
 'background-repeat' : 'no-repeat',
 'background-position' : 'top left',
 'cursor' : 'move'
 });
 $img.css('visibility', 'hidden');
-$(document).bind("mousemove.digilib", dragMove);
+$document.bind("mousemove.dlZoomDrag", dragMove);
-$(document).bind("mouseup.digilib", dragEnd);
+$document.bind("mouseup.dlZoomDrag", dragEnd);
 return false;
 };
+// mousemove handler: drag zoomed image
 var dragMove = function (evt) {
-// mousemove handler: drag zoomed image
 var pos = geom.position(evt);
-dx = pos.x - pt1.x;
+delta = pos.delta(startPos);
-dy = pos.y - pt1.y;
 // move the background image to the new position
 $scaler.css({
-'background-position' : dx + "px " + dy + "px"
+'background-position' : (-delta.x) + "px " + (-delta.y) + "px"
 });
 return false;
 };
+// mouseup handler: reload zoomed image in new position
 var dragEnd = function (evt) {
-// mouseup handler: reload zoomed image in new position
 $scaler.css({
 'background-image' : 'none',
 'cursor' : 'default'
 });
-$(document).unbind("mousemove.digilib", dragMove);
+$document.unbind("mousemove.dlZoomDrag", dragMove);
-$(document).unbind("mouseup.digilib", dragEnd);
+$document.unbind("mouseup.dlZoomDrag", dragEnd);
-// calculate relative offset
+if (delta == null || delta.distance() < 2) {
-if (dx === 0 && dy === 0) return false; // no movement
+// no movement
-// reload with scaler image showing the new ausschnitt
+$img.css('visibility', 'visible');
-// digilib.moveBy(x, y);
+return false;
-var pos = geom.position(-dx, -dy);
+}
-var newPos = data.imgTrafo.invtransform(pos);
+// get old zoom area (screen coordinates)
-var newArea = data.zoomArea.setPt1(newPos);
+var za = data.imgTrafo.transform(data.zoomArea);
+// move
+za.addPosition(delta);
+// transform back
+var newArea = data.imgTrafo.invtransform(za);
 data.zoomArea = MAX_ZOOMAREA.fit(newArea);
 redisplay(data);
 return false;
 };
-$scaler.bind("mousedown.digilib", dragStart);
+// clear old handler
+$document.unbind(".dlZoomDrag");
+$scaler.unbind(".dlBirdMove");
+if (! isFullArea(data.zoomArea)) {
+// set new handler
+$scaler.bind("mousedown.dlZoomDrag", dragStart);
+}
 };
 // get image quality as a number (0..2)
 var getQuality = function (data) {
 var flags = data.scalerFlags;