diff client/digitallibrary/jquery/jquery.digilib.js @ 665:0d3d9517e448 jquery

image transform works now under rotation!!! (at least for multiples of 90deg) rectangle has adjustDiv to postition and size a jQuery object rectangle constructor with two positions always returns a rectangle with positive width
author robcast
date Tue, 25 Jan 2011 17:47:36 +0100
parents dcd64ecdd64a
children 1e9d7d92135c
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery.digilib.js	Tue Jan 25 11:01:45 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Tue Jan 25 17:47:36 2011 +0100
@@ -672,7 +672,7 @@
         var $buttonsDiv = $('<div class="buttons"></div>');
         $elem.append($buttonsDiv);
         var mode = settings.interactionMode;
-        var buttonSettings = settings.buttonSettings[mode]
+        var buttonSettings = settings.buttonSettings[mode];
         var actionNames = buttonSettings[actionGroup];
         for (var i = 0; i < actionNames.length; i++) {
             var actionName = actionNames[i];
@@ -734,9 +734,6 @@
         $birdDiv.append($birdzoomDiv);
         $birdDiv.append($birdImg);
         $birdzoomDiv.css(data.settings.birdIndicatorStyle);
-        // $birdzoomDiv.offset($birdDiv.offset());
-        // $birdzoomDiv.width($birdDiv.width());
-        // $birdzoomDiv.height($birdDiv.height());
         data.$birdDiv = $birdDiv;
         data.$birdImg = $birdImg;
         $birdImg.load(birdImgLoadedHandler(data));
@@ -800,26 +797,13 @@
         if (data) {
             /* var rot = trafo.getRotationAround(parseFloat(data.settings.rot), 
                     geom.position(0.5 * area.width + area.x, 0.5 * area.height + area.y)); */
-            var rot = trafo.getRotation(parseFloat(data.settings.rot));
-            var trans1 = trafo.getTranslation(geom.position(-0.5 * area.width + area.x, -0.5 * area.height + area.y));
-            var trans2 = trafo.getTranslation(geom.position(0.5 * area.width + area.x, 0.5 * area.height + area.y));
-            trafo.concat(trans1);
+            var rot = trafo.getRotationAround(parseFloat(data.settings.rot), 
+                    geom.position(0.5, 0.5));
             trafo.concat(rot);
-            trafo.concat(trans2);
         }
         // scale to screen position and size
         trafo.concat(trafo.getScale(picrect));
         trafo.concat(trafo.getTranslation(picrect));
-        /* if (data && data.settings.rot) {
-            var rot = trafo.getRotationAround(-data.settings.rot, 
-                    geom.position(0.5 * picrect.width + picrect.x, 0.5 * picrect.height + picrect.y));
-            //var trans1 = trafo.getTranslation(geom.position(-0.5*picrect.width, -0.5*picrect.height));
-            //var rot = trafo.getRotation(data.settings.rot);
-            //var trans2 = trafo.getTranslation(geom.position(0.5*picrect.width, 0.5*pirect.height));
-            //trafo.concat(trans1);
-            trafo.concat(rot);
-            //trafo.concat(trans2);
-        } */
         return trafo;
     };
     
@@ -895,7 +879,8 @@
         // nice animation for embedded mode :-)
         var makeCompleteFunction = function($ind, normalSize) {
             return function() { 
-                if (normalSize) $ind.hide(); }
+                if (normalSize) $ind.hide(); 
+                };
             };
         var opts = {
             'complete' : makeCompleteFunction($ind, normalSize)
@@ -922,12 +907,10 @@
     // add a mark where clicked
     var setMark = function (data) {
         var $scaler = data.$scaler;
-        console.debug("setmark");
         // start event capturing
         $scaler.one('click.digilib', function (evt) {
             // event handler adding a new mark
-            console.debug("setmark.click evt=",evt);
-            var mpos = geom.position(evt.pageX, evt.pageY);
+            var mpos = geom.position(evt);
             var pos = data.imgTrafo.invtransform(mpos);
             data.marks.push(pos);
             redisplay(data);
@@ -942,17 +925,10 @@
         var $zoomDiv = $('<div class="zoomrect" style="display:none"/>');
         $elem.append($zoomDiv);
         $zoomDiv.css(data.settings.zoomrectStyle);
-        //var overlay = getElement("overlay");
-        // use overlay div to avoid <img> mousemove problems
         var picRect = geom.rectangle($scaler);
         // FIX ME: is there a way to query the border width from CSS info?
         // rect.x -= 2; // account for overlay borders
         // rect.y -= 2;
-        //moveElement(overlay, picRect);
-        //showElement(overlay, true);
-        // start event capturing
-        //registerEvent("mousedown", overlay, zoomStart);
-        //registerEvent("mousedown", this.scalerImg, zoomStart);
 
         var zoomStart = function (evt) {
             pt1 = geom.position(evt);
@@ -972,8 +948,6 @@
             pt2 = geom.position(evt);
             // assume a click and continue if the area is too small
             var clickRect = geom.rectangle(pt1, pt2);
-            clickRect.normalize();
-            console.debug("clickRect.getArea()=",clickRect.getArea());
             if (clickRect.getArea() <= 5) {
                 return false;
             }
@@ -996,11 +970,9 @@
         var zoomMove = function (evt) {
             pt2 = geom.position(evt);
             var rect = geom.rectangle(pt1, pt2);
-            rect.normalize();
             rect.clipTo(picRect);
             // update zoom div
-            $zoomDiv.offset({left : rect.x, top : rect.y});
-            $zoomDiv.width(rect.width).height(rect.height);
+            rect.adjustDiv($zoomDiv);
             return false;
         };