Mercurial > hg > digilib-old

changeset 715:c1b1c463bc44 jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
getting rid of bg div in zoomDrag
author hertzhaft
date Sun, 30 Jan 2011 18:32:40 +0100
parents 667a316edb89
children 6b9b8e1401d8
files client/digitallibrary/jquery/jquery-test-embedded.html client/digitallibrary/jquery/jquery-test-full.html client/digitallibrary/jquery/jquery.digilib.js
diffstat 3 files changed, 28 insertions(+), 22 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-embedded.html	Sun Jan 30 18:11:07 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-embedded.html	Sun Jan 30 18:32:40 2011 +0100
@@ -34,6 +34,11 @@
                 z-index: 1;
                 }
 
+            div.scaler {
+                background-color: grey;
+                z-index: 0;
+                }
+
             div.about {
                 position: absolute;
                 width: 200px;
@@ -48,11 +53,11 @@
                 display: none;
                 z-index: 1000;
                 }
-                
+
             td {
                 vertical-align: top;
                 }
-                
+
             #debug {
                 background-color: beige;
                 position: absolute;
@@ -61,7 +66,7 @@
                 font-family: Arial;
                 font-size: 9pt;
                 }
-               
+
             div._log {
                 color: grey;
                 }
@@ -73,7 +78,7 @@
             div._error {
                 color: red;
                 }
-                
+
             div#test:hover {
                 background-color: cornsilk;
                 }
--- a/client/digitallibrary/jquery/jquery-test-full.html	Sun Jan 30 18:11:07 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Sun Jan 30 18:32:40 2011 +0100
@@ -69,8 +69,8 @@
                 display: none;
                 z-index: 1000;
                 }
-                
-            div.bgDrag {
+
+            div.scaler {
                 background-color: grey;
                 z-index: 0;
                 }
--- a/client/digitallibrary/jquery/jquery.digilib.js	Sun Jan 30 18:11:07 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Sun Jan 30 18:32:40 2011 +0100
@@ -799,10 +799,12 @@
         if (settings.interactionMode === 'fullscreen') {
             var imgSize = getFullscreenImgSize($elem);
             // fitwidth/height omits destination height/width
-            if (data.dlOpts.fitheight !== '1') {
+            // if (data.dlOpts['fitheight'] !== '1') {
+            if (data.dlOpts['fitheight'] == null) {
                 settings.dw = imgSize.width;
             }
-            if (data.dlOpts.fitwidth !== '1') {
+            // if (data.dlOpts['fitwidth'] !== '1') {
+            if (data.dlOpts['fitwidth'] == null) {
                 settings.dh = imgSize.height;
             }
             $img = $('<img/>');
@@ -830,6 +832,9 @@
         // setup image load handler before setting the src attribute (IE bug)
         $img.load(scalerImgLoadedHandler(data));
         $img.attr('src', scalerUrl);
+        // set scaler div size explicitly in case $img is hidden (for zoomDrag)
+        $imgRect = geom.rectangle($img);
+        $imgRect.adjustDiv(data.$scaler); 
     };
 
     // creates HTML structure for buttons in elem
@@ -1043,13 +1048,15 @@
 
     // returns function for load event of scaler img
     var scalerImgLoadedHandler = function (data) {
-        var $img = data.$img;
         return function () {
             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);
+            var $img = data.$img;
+            // show image in case it was hidden (for example in zoomDrag)
+            $img.show();
             // display marks
             renderMarks(data);
             // TODO: digilib.showArrows(); // show arrow overlays for zoom navigation
@@ -1285,11 +1292,6 @@
         var $elem = data.$elem;
         var $scaler = data.$scaler;
         var $img = data.$img;
-        var $bg = $elem.has('div.bgDrag');
-        if ($bg.length === 0) {
-            $bg = $('<div class="bgDrag" style="display:none; position:absolute"/>');
-            $scaler.before($bg); // set as background
-            }
 
         var dragStart = function (evt) {
         // drag the image and load a new detail on mouse up
@@ -1297,36 +1299,36 @@
             if (isFullArea(data.zoomArea)) return false;
             pt1 = geom.position(evt);
             $imgRect = geom.rectangle($img);
-            $imgRect.adjustDiv($bg); // set background size
+            // 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
-            $bg.css({
+            $scaler.css({
                 'background-image' : 'url(' + $img.attr('src') + ')',
                 'background-repeat' : 'no-repeat',
                 'background-position' : 'top left',
                 'cursor' : 'move'
                 });
             $img.hide(); 
-            $bg.show();
             $(document).bind("mousemove.digilib", dragMove);
             $(document).bind("mouseup.digilib", dragEnd);
             return false;
             };
 
         var dragMove = function (evt) {
-        // mousemove handler: drag
+        // mousemove handler: drag zoomed image
             var pos = geom.position(evt);
             dx = pos.x - pt1.x;
             dy = pos.y - pt1.y;
             // move the background image to the new position
-            $bg.css({
+            $scaler.css({
                 'background-position' : dx + "px " + dy + "px"
                 });
             return false;
             };
 
         var dragEnd = function (evt) {
-        // mouseup handler: reload digilib
-            $bg.css({
+        // mouseup handler: reload zoomed image in new position
+            $scaler.css({
                 'cursor' : 'default'
                 });
             $(document).unbind("mousemove.digilib", dragMove);
@@ -1339,7 +1341,6 @@
             var newPos = data.imgTrafo.invtransform(pos);
             var newArea = data.zoomArea.setPt1(newPos);
             data.zoomArea = MAX_ZOOMAREA.fit(newArea);
-            $bg.hide(); 
             redisplay(data);
             return false;
             };