# HG changeset patch
# User hertzhaft
# Date 1477770455 -7200
# Node ID f747edb6cc9aa2bd1bbe2954604ba588308d19f1
# Parent  9d754003c2d32c9d9c9993ed7ec4658ee9c2ca55
refactor hiding the foreground of the scaler image when the zoom area changes

diff -r 9d754003c2d3 -r f747edb6cc9a webapp/src/main/webapp/jquery/jquery-test-measure.html
--- a/webapp/src/main/webapp/jquery/jquery-test-measure.html	Fri Oct 28 15:54:43 2016 +0200
+++ b/webapp/src/main/webapp/jquery/jquery-test-measure.html	Sat Oct 29 21:47:35 2016 +0200
@@ -16,7 +16,6 @@
         <script type="text/javascript" src="jquery.cookie.js"></script>
         <script type="text/javascript" src="jquery.digilib.js"></script>
         <script type="text/javascript" src="jquery.digilib.geometry.js"></script>
-        <script type="text/javascript" src="jquery.digilib.arrows.js"></script>
         <script type="text/javascript" src="jquery.range.js"></script>
         <link rel="stylesheet" type="text/css" href="jquery.range.css"/>
         <script type="text/javascript" src="jquery.digilib.buttons.js"></script>
diff -r 9d754003c2d3 -r f747edb6cc9a webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js	Fri Oct 28 15:54:43 2016 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js	Sat Oct 29 21:47:35 2016 +0200
@@ -274,6 +274,8 @@
             // grow rectangle by border width
             newRect = null;
             data.$elem.find('.'+cssPrefix+'overlay').hide(); // hide all overlays (marks/regions)
+            // hide image
+            digilib.fn.fadeScalerImg(data, 0);
             $document.on("mousemove.dlBirdMove", birdZoomMove);
             $document.on("mouseup.dlBirdMove", birdZoomEndDrag);
             return false;
diff -r 9d754003c2d3 -r f747edb6cc9a webapp/src/main/webapp/jquery/jquery.digilib.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Fri Oct 28 15:54:43 2016 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Sat Oct 29 21:47:35 2016 +0200
@@ -102,6 +102,8 @@
         'previewImgParamNames' : ['fn','pn','dw','dh','mo','rot'],
         // reserved space in full page display (default value accounts for body margins)
         'scalerInsets' : { 'x' : 26, 'y': 20 },
+        // how transparent does the background image get while changing the zoom area?
+        'scalerFadedOpacity' : 0.7,
         // number of decimal places, for cropping parameters wx,wy,wh,ww
         'decimals' : 4
         };
@@ -375,6 +377,8 @@
                 // interactively
                 var onComplete = function(data, rect) {
                     if (rect == null) return;
+                    // hide image
+                    fadeScalerImg(data, 0);
                     setZoomArea(data, rect);
                     // reset modes
                     setFitMode(data, 'both');
@@ -395,6 +399,8 @@
          */
         zoomFull : function (data, mode) {
             setZoomArea(data, FULL_AREA.copy());
+            // hide image
+            fadeScalerImg(data, 0);
             setFitMode(data, mode);
             // zoom full only works in screen mode
             setScaleMode(data, 'screen');
@@ -562,8 +568,7 @@
             }
             return url;
         },
-        
-        
+
         /** set image quality
          * 
          * @param data
@@ -1279,10 +1284,7 @@
             // adjust scaler div size (beware: setting position makes the element relative)
             imgRect.getSize().adjustDiv($scaler);
             // show image in case it was hidden (for example in zoomDrag)
-            $img.css('visibility', 'visible');
-            $img.fadeIn();
-            // $scaler.css({'opacity' : '1'});
-            $scaler.fadeTo('slow', 1);
+            fadeScalerImg(data, 1);
             data.hasPreviewBg = false;
             // update display (render marks, etc.)
             updateDisplay(data);
@@ -1328,6 +1330,8 @@
         newarea.y -= 0.5 * (newarea.height - area.height);
         newarea = FULL_AREA.fit(newarea);
         setZoomArea(data, newarea);
+        // hide image
+        fadeScalerImg(data, 0);
         // reset modes
         setScaleMode(data, 'screen');
         setFitMode(data, 'both');
@@ -1489,9 +1493,7 @@
             startPos = geom.position(evt);
             delta = null;
             // hide the scaler img, show background of div instead
-            $img.css('visibility', 'hidden');
-            $img.hide();
-            $scaler.fadeTo('slow', 0.7);
+            fadeScalerImg(data, 0);
             // set low res background immediately on mousedown
             setPreviewBg(data);
             $document.on("mousemove.dlZoomDrag", dragMove);
@@ -1519,12 +1521,9 @@
             $document.off("mousemove.dlZoomDrag", dragMove);
             $document.off("mouseup.dlZoomDrag", dragEnd);
             if (delta == null || delta.distance() < 2) {
-                // no movement
-                $img.css('visibility', 'visible');
-                $img.fadeIn();
-                $scaler.fadeTo('slow', 1);
-                // $scaler.css({'opacity' : '1', 'background-image' : 'none'});
+                // no change, show image again
                 data.hasPreviewBg = false;
+                fadeScalerImg(data, 1);
                 // unhide marks etc.
                 updateDisplay(data);
                 return false; 
@@ -1581,6 +1580,23 @@
         return parseInt(q[1], 10);
     };
 
+    /** hide or show image, fade scaler background
+     * 
+     */
+    var fadeScalerImg = function (data, show) {
+        var $img = data.$img;
+        var $scaler = data.$scaler;
+        if (show == null || show == 0) {
+          $scaler.fadeTo('fast', data.settings.scalerFadedOpacity);
+          // $img.css('visibility', 'hidden');
+          $img.fadeOut();
+        } else {
+          $scaler.fadeTo('slow', 1);
+          // $img.css('visibility', 'visible');
+          $img.fadeIn();
+        }
+    };
+
     /** set image quality as a number (0..2).
      * 
      */
@@ -1882,6 +1898,7 @@
             storeOptions : storeOptions,
             redisplay : redisplay,
             updateDisplay : updateDisplay,
+            fadeScalerImg : fadeScalerImg,
             showDiv : showDiv,
             defineArea : defineArea,
             setZoomArea : setZoomArea,
diff -r 9d754003c2d3 -r f747edb6cc9a webapp/src/main/webapp/jquery/jquery.digilib.regions.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Fri Oct 28 15:54:43 2016 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Sat Oct 29 21:47:35 2016 +0200
@@ -688,6 +688,8 @@
         za.setProportion(1, true); // avoid extreme zoomArea proportions
         za.setCenter(rect.getCenter()).stayInside(FULL_AREA);
         fn.setZoomArea(data, za);
+        // hide image
+        fn.fadeScalerImg(data, 0);
         fn.redisplay(data);
     };