Mercurial > hg > digilib
changeset 1558:f747edb6cc9a
refactor hiding the foreground of the scaler image when the zoom area changes
| author | hertzhaft |
|---|---|
| date | Sat, 29 Oct 2016 21:47:35 +0200 |
| parents | 9d754003c2d3 |
| children | 9cf6cfa086b7 |
| files | webapp/src/main/webapp/jquery/jquery-test-measure.html webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js webapp/src/main/webapp/jquery/jquery.digilib.js webapp/src/main/webapp/jquery/jquery.digilib.regions.js |
| diffstat | 4 files changed, 35 insertions(+), 15 deletions(-) [+] |
line wrap: on
line diff
--- 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>
--- 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;
--- 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,
--- 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); };