# 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 @@
-
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);
};