# HG changeset patch
# User hertzhaft
# Date 1478479201 -3600
# Node ID 046d89ff70b35d8306d76e55134314822385e49e
# Parent  001e6fa1c7fbfb3a93dbc8bb31665867163b676f
merge in newer files from default branch

diff -r 001e6fa1c7fb -r 046d89ff70b3 webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js	Thu Nov 03 22:55:51 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js	Mon Nov 07 01:40:01 2016 +0100
@@ -35,7 +35,7 @@
     var FULL_AREA;
 
     var buttons = {
-            bird : {
+            bird: {
                 'onclick' : "showBirdDiv",
                 'tooltip' : "show bird's eye view",
                 'icon' : "birds-eye.png"
@@ -56,7 +56,7 @@
 
     var actions = {
             // event handler: toggles the visibility of the bird's eye window 
-            showBirdDiv : function (data, show) {
+            showBirdDiv: function (data, show) {
                 var settings = data.settings;
                 if (data.$birdDiv == null) {
                     // no bird div: create it
@@ -87,8 +87,11 @@
         // insert in button list -- not elegant
         if (digilib.plugins.buttons != null) {
             // if (digilib.defaults.buttonSettings != null) {
-            digilib.defaults.buttonSettings.fullscreen.standardSet.splice(9, 0, 'bird');
-            digilib.defaults.buttonSettings.embedded.standardSet.splice(5, 0, 'bird');
+            var fset = digilib.defaults.buttonSettings.fullscreen.standardSet;
+            var eset = digilib.defaults.buttonSettings.embedded.standardSet;
+            // dynamic insert before [about, reset, moreoptions]
+            fset.splice(fset.length - 3, 0, 'bird');
+            eset.splice(eset.length - 3, 0, 'bird');
         }
     };
 
@@ -140,8 +143,8 @@
     var getBirdImgUrl = function (data) {
         var settings = data.settings;
         var birdDivOptions = {
-            dw : settings.birdDivWidth,
-            dh : settings.birdDivHeight
+            dw: settings.birdDivWidth,
+            dh: settings.birdDivHeight
         };
         var birdSettings = $.extend({}, settings, birdDivOptions);
         // use only the relevant parameters
@@ -275,7 +278,7 @@
             newRect = null;
             data.$elem.find('.'+cssPrefix+'overlay').hide(); // hide all overlays (marks/regions)
             // hide image
-            digilib.fn.fadeScalerImg(data, 0);
+            digilib.fn.fadeScalerImg(data, 'hide');
             $document.on("mousemove.dlBirdMove", birdZoomMove);
             $document.on("mouseup.dlBirdMove", birdZoomEndDrag);
             return false;
diff -r 001e6fa1c7fb -r 046d89ff70b3 webapp/src/main/webapp/jquery/jquery.digilib.css
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Thu Nov 03 22:55:51 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Mon Nov 07 01:40:01 2016 +0100
@@ -113,7 +113,6 @@
 	background-color: red;
     opacity: 0.3;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-	filter: alpha(opacity=30);
 }
 
 div.dl-digilib div.dl-region a:link,
@@ -131,7 +130,6 @@
 	border: none;
     opacity: 0.3;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-	filter: alpha(opacity=30);
 }
 
 div.dl-digilib div.dl-regionHTML {
@@ -164,7 +162,6 @@
 	border: 5px solid aqua;
 	opacity: 0.8;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-	filter: alpha(opacity=80);
 }
 
 div.dl-digilib div.dl-findregion {
@@ -172,7 +169,6 @@
 	border: 5px solid aqua;
 	opacity: 0.8;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-	filter: alpha(opacity=80);
 }
 
 div.dl-digilib select.dl-finddata {
@@ -355,7 +351,6 @@
     background-color: black;
 	opacity: 0.3;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-	filter: alpha(opacity=30);
 }
 
 div.dl-digilib table.dl-scalertable img.button {
@@ -428,7 +423,6 @@
 	background-color: gray;
 	opacity: 0.5;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	filter: alpha(opacity=50);
 	z-index: 100;
 }
 
diff -r 001e6fa1c7fb -r 046d89ff70b3 webapp/src/main/webapp/jquery/jquery.digilib.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Thu Nov 03 22:55:51 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Mon Nov 07 01:40:01 2016 +0100
@@ -102,6 +102,10 @@
         '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.6,
+        // show a little window with file size and zoom information
+        'showZoomInfo' : false,
         // number of decimal places, for cropping parameters wx,wy,wh,ww
         'decimals' : 4
         };
@@ -261,6 +265,10 @@
                 // create HTML structure for scaler
                 setupScalerDiv(data);
                 // additional initializations before setup (e.g. for single nested settings)
+                if (settings.showZoomInfo) {
+                  actions.zoomInfo(data);
+                  loadImageInfo(data);
+                }
                 if (typeof hook === 'function') {
                   hook(data);
                   console.debug('init hook', hook, data);
@@ -320,6 +328,28 @@
             centerOnScreen(data, $about);
         },
 
+        /** show the 'zoominfo' window
+         * 
+         * @param data
+         */
+        zoomInfo : function(data) {
+            var $elem = data.$elem;
+            var settings = data.settings;
+            var cssPrefix = settings.cssPrefix;
+            var zoomInfoSelector = '#'+cssPrefix+'zoominfo';
+            if (isOnScreen(data, zoomInfoSelector)) {
+                $(zoomInfoSelector).fadeToggle();
+                return;
+            }
+            var html = '\
+                <div id="'+cssPrefix+'zoominfo" class="'+cssPrefix+'zoominfo" style="display:none">\
+                  <div id="'+cssPrefix+'zoominfo1" />\
+                  <div id="'+cssPrefix+'zoominfo2" />\
+                </div>';
+            var $zoominfo = $(html);
+            $zoominfo.appendTo($elem);
+        },
+
         /** goto given page nr (+/-: relative)
          * 
          * @param data
@@ -375,9 +405,9 @@
                 // interactively
                 var onComplete = function(data, rect) {
                     if (rect == null) return;
+                    // hide image, show dimmed background
+                    fadeScalerImg(data, 'fadeOut');
                     setZoomArea(data, rect);
-                    // reset modes
-                    setFitMode(data, 'both');
                     setScaleMode(data, 'screen');
                     redisplay(data);
                     };
@@ -394,9 +424,9 @@
          * @param mode
          */
         zoomFull : function (data, mode) {
+            setFitMode(data, mode);
+            data.$scaler.css('opacity', data.settings.scalerFadedOpacity);
             setZoomArea(data, FULL_AREA.copy());
-            setFitMode(data, mode);
-            // zoom full only works in screen mode
             setScaleMode(data, 'screen');
             redisplay(data);
         },
@@ -506,6 +536,8 @@
             var settings = data.settings;
             var paramNames = settings.digilibParamNames;
             var params = data.queryParams;
+            // dim image, show something is happening
+            data.$scaler.css('opacity', data.settings.scalerFadedOpacity);
             // delete all digilib parameters
             for (var i = 0; i < paramNames.length; i++) {
                 var paramName = paramNames[i];
@@ -562,8 +594,7 @@
             }
             return url;
         },
-        
-        
+
         /** set image quality
          * 
          * @param data
@@ -995,11 +1026,12 @@
                             loadImageInfo(data);
                         }
                     }
-                    // update if we have a preview
-                    if (data.hasPreviewBg) {
-                        $(data).trigger('update');
-                    }
-                    //FIXME: highlightButtons(data);
+                    // update if we have a preview 
+                    // --- too early here, 'update' is triggered by scalerImgLoadedHandler
+                    // if (data.hasPreviewBg) {
+                        // $(data).trigger('update');
+                    // }
+                    // FIXME: highlightButtons(data);
                     // send event
                     $(data).trigger('redisplay');
                 } catch (e) {
@@ -1059,6 +1091,20 @@
         var data = this;
         updateImgTrafo(data);
         setupZoomDrag(data);
+        updateZoomInfo(data);
+    };
+
+    var updateZoomInfo = function (data) {
+        if (!data.settings.showZoomInfo) {
+          return;
+        }
+        var $zoominfo = $('#'+data.settings.cssPrefix+'zoominfo');
+        // console.debug(data.$elem.width(), data.zoomArea.width, json.width);
+        var json = data.imgInfo;
+        var px = data.$img.width();
+        var percent = Math.round(px / data.zoomArea.width / json.width * 100);
+        $zoominfo.children().first().text(json.width+'x'+json.height);
+        $zoominfo.children().last().text('zoom '+percent+'%');
     };
 
     /** 
@@ -1278,14 +1324,15 @@
             $scaler.css('cursor', 'auto');
             // adjust scaler div size (beware: setting position makes the element relative)
             imgRect.getSize().adjustDiv($scaler);
+            // initial load of scaler background (for preview)
+            if (!data.hasPreviewBg) {
+                setPreviewBg(data, data.zoomArea);
+            }
             // 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);
-            data.hasPreviewBg = false;
+            fadeScalerImg(data, 'fadeIn');
             // update display (render marks, etc.)
             updateDisplay(data);
+            // console.debug("* load handler finished");
         };
     };
 
@@ -1300,6 +1347,8 @@
     var handleImageInfo = function (evt, json) {
         console.debug("handleImageInfo:", json);
         var data = this;
+        var $zoominfo = $('#'+data.settings.cssPrefix+'zoominfo');
+        $zoominfo.fadeIn();
         updateDisplay(data);
     };
 
@@ -1307,7 +1356,7 @@
      * 
      */
     var handleChangeZoomArea = function (evt, newZa) {
-        console.debug("handleChangeZoomArea:", newZa);
+        // console.debug("handleChangeZoomArea:", newZa);
         var data = this;
         // hide all overlays (marks/regions)
         data.$elem.find('.'+data.settings.cssPrefix+'overlay').hide();
@@ -1328,9 +1377,11 @@
         newarea.y -= 0.5 * (newarea.height - area.height);
         newarea = FULL_AREA.fit(newarea);
         setZoomArea(data, newarea);
+        // hide image, show dimmed background
+        fadeScalerImg(data, 'fadeOut');
         // reset modes
         setScaleMode(data, 'screen');
-        setFitMode(data, 'both');
+        // setFitMode(data, 'both'); // ###?
         redisplay(data);
     };
 
@@ -1423,14 +1474,15 @@
                 'cursor' : 'move'
         };
         if (newZoomArea != null) {
-            // check if aspect ratio has changed
-            if (Math.abs(newZoomArea.getAspect() - data.zoomArea.getAspect()) > 0.001 ) {
-                var newRect = data.imgTrafo.transform(newZoomArea);
+            // check if aspect ratio has changed 
+            if (Math.abs(newZoomArea.getAspect() - data.zoomArea.getAspect()) > 0.001) {
+                var newRect = imgTrafo.transform(newZoomArea);
                 var newAspect = newRect.getAspect();
                 var newSize = data.maxImgSize.fitAspect(newAspect);
                 // set scaler to presumed new size
                 newSize.adjustDiv($scaler);
-                console.debug("adjusting aspect ratio for preview", data.maxImgSize, newSize);
+                console.debug("adjusting aspect ratio of preview:",
+                  data.maxImgSize.toString(), '=>', newSize.toString());
             }
             // get transform for new zoomArea (use 'screen' instead of data.scaleMode)
             imgTrafo = getImgTrafo($scaler, newZoomArea, data.settings.rot,
@@ -1461,8 +1513,8 @@
                 scalerCss[data.bgSizeName] += ', ' + Math.round(fullRect.width) + 'px ' + Math.round(fullRect.height) + 'px';
                 scalerCss['background-position'] += ', ' + Math.round(fullRect.x) + 'px '+ Math.round(fullRect.y) + 'px';
             }
-            // console.debug('setPreviewBg', scalerCss);
         }
+        // console.debug('* setPreviewBg', scalerCss[data.bgSizeName], 'pos', scalerCss['background-position']);
         $scaler.css(scalerCss);
         data.hasPreviewBg = true;
     };
@@ -1488,10 +1540,8 @@
             $elem.find('.'+data.settings.cssPrefix+'overlay').hide(); // hide all overlays (marks/regions)
             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);
+            // hide image, show dimmed background
+            fadeScalerImg(data, 'hide');
             // set low res background immediately on mousedown
             setPreviewBg(data);
             $document.on("mousemove.dlZoomDrag", dragMove);
@@ -1519,12 +1569,8 @@
             $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'});
-                data.hasPreviewBg = false;
+                // no change, show image again
+                fadeScalerImg(data, 'fadeIn');
                 // unhide marks etc.
                 updateDisplay(data);
                 return false; 
@@ -1581,6 +1627,35 @@
         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 === 'hide') {
+          $scaler.css('opacity', data.settings.scalerFadedOpacity);
+          $img.fadeOut(function(){
+            // console.debug("* img hide", $img.css('display'));
+            });
+        } else if (show === 'fadeOut') {
+          $scaler.fadeTo('fast', data.settings.scalerFadedOpacity, function() {
+            // console.debug("* scaler fadeOut", $img.css('display'), $img.css('opacity'));
+            $img.fadeOut(function(){
+              console.debug("* img fadeOut", $img.css('display'));
+              });
+            });
+        } else {
+          data.hasPreviewBg = false;
+          $img.fadeIn(function(){
+            // console.debug("* img fadeIn", $img.css('display'));
+            });
+          $scaler.fadeTo('slow', 1, function() {
+            // console.debug("* scaler fadeIn", $img.css('display'), $img.css('opacity'));
+            });
+        }
+    };
+
     /** set image quality as a number (0..2).
      * 
      */
@@ -1882,6 +1957,7 @@
             storeOptions : storeOptions,
             redisplay : redisplay,
             updateDisplay : updateDisplay,
+            fadeScalerImg : fadeScalerImg,
             showDiv : showDiv,
             defineArea : defineArea,
             setZoomArea : setZoomArea,
diff -r 001e6fa1c7fb -r 046d89ff70b3 webapp/src/main/webapp/jquery/jquery.digilib.regions.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Thu Nov 03 22:55:51 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Mon Nov 07 01:40:01 2016 +0100
@@ -171,9 +171,9 @@
             }
             var onComplete = function (data, rect) {
                 if (rect == null) return;
-                var count = getRegions(data, 'regionURL').length;
+                var index = getRegions(data, 'regionURL').length + 1;
                 var attr = {'class' : CSS+'regionURL '+CSS+'overlay'};
-                var item = {'rect' : rect, 'index' : count, 'attributes' : attr};
+                var item = {'rect' : rect, 'index' : index, 'attributes' : attr};
                 var $regionDiv = addRegionDiv(data, item);
                 fn.highlightButtons(data, 'defineregion', 0);
                 redisplay(data);
@@ -232,7 +232,7 @@
             var show = !data.settings.isRegionVisible;
             data.settings.isRegionVisible = show;
             fn.highlightButtons(data, 'regions', show);
-            renderRegions(data, 0);
+            renderRegions(data, 1);
             return show;
         },
 
@@ -689,7 +689,7 @@
         za.setCenter(rect.getCenter()).stayInside(FULL_AREA);
         fn.setZoomArea(data, za);
         // hide image
-        fn.fadeScalerImg(data, 0);
+        fn.fadeScalerImg(data, 'fadeOut');
         fn.redisplay(data);
     };
 
@@ -762,7 +762,7 @@
         console.debug("regions: handleUpdate");
         var settings = data.settings;
         fn.highlightButtons(data, 'regions' , settings.isRegionVisible);
-        renderRegions(data);
+        renderRegions(data, 1);
     };
 
     // additional buttons
diff -r 001e6fa1c7fb -r 046d89ff70b3 webapp/src/main/webapp/jquery/jquery.digilib.sliders.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js	Thu Nov 03 22:55:51 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js	Mon Nov 07 01:40:01 2016 +0100
@@ -100,6 +100,9 @@
     var actions = {
         // shows brightness slider
         sliderBrgt : function (data) {
+            if (removeSlider(data)) {
+              return;
+            }
             // adjust min and max for contrast value (not nice to change sliderOptions)
             var maxBrgt = Math.max(Math.round(255 * Math.pow(2, data.settings.cont)), 255);
             var options = sliderOptions.brightness;
@@ -117,6 +120,9 @@
 
         // shows contrast slider
         sliderCont : function (data) {
+            if (removeSlider(data)) {
+              return;
+            }
             var options = sliderOptions.contrast;
             var onChange = function($slider, val) {
                 var m = Math.pow(2, parseFloat(val));
@@ -132,6 +138,9 @@
 
         // shows rotate slider
         sliderRot : function (data) {
+            if (removeSlider(data)) {
+              return;
+            }
             var options = sliderOptions.rotation;
             var onChange = null;
             var onSubmit = function(val) {
@@ -142,6 +151,9 @@
 
         // shows RGB sliders
         sliderRGB : function (data) {
+            if (removeSlider(data)) {
+              return;
+            }
             var onSubmit = function(m, a) {
                 digilib.actions.setRGB(data, m, a);
                 };
@@ -248,8 +260,6 @@
         var cls = cssPrefix + cssSuffix;
         var tiny = cssPrefix + 'tinyslider';
         var $elem = data.$elem;
-        var sliderSelector = '#'+cssPrefix+'slider';
-        if (fn.isOnScreen(data, sliderSelector)) return null; // already onscreen
         var html = '\
             <div id="'+cssPrefix+'slider" class="'+cls+'">\
                 <form class="'+cls+'">\
@@ -303,6 +313,19 @@
         return $div;
     };
 
+    /** removes slider window if on screen
+     */
+    var removeSlider = function (data) {
+        var selector = '#'+ data.settings.cssPrefix + 'slider';
+        if (fn.isOnScreen(data, selector)) {
+          var $div = $(selector);
+          fn.withdraw($div);
+          return true;
+        }
+        return false;
+    };
+
+
     /** creates a TinyRange slider
      */
     var tinySlider = function (data, options, startvalue) {
@@ -366,9 +389,10 @@
         the new value is passed to the "onSubmit" function.
      */
     var singleSlider = function (data, options, onChange, onSubmit) {
+        var settings = data.settings;
         var classname = 'singleslider';
-        var $div = $('<div/>');
-        var startvalue = data.settings[options.param] || options.start;
+        var $div = $('<div>');
+        var startvalue = settings[options.param] || options.start;
         var $slider = tinySlider(data, options, startvalue);
         var getValue = function () {
             // get the new value and do something with it
@@ -381,7 +405,7 @@
         setupFormDiv(data, $div, classname, getValue);
         var hasPreview = options.preview;
         if (hasPreview) {
-            var cls = data.settings.cssPrefix + classname;
+            var cls = settings.cssPrefix + classname;
             var $preview = preview(cls);
             $div.append($preview);
             $slider.data({
@@ -398,8 +422,8 @@
     var rgbSlider = function (data, onSubmit) {
         var css = data.settings.cssPrefix;
         var cls = css + 'rgbslider';
-        var $div = $('<div/>');
-        var $table = $('<table class="'+cls+'" />');
+        var $div = $('<div>');
+        var $table = $('<table>', { class: cls });
         var $preview = preview(cls);
         $div.append($table);
         $div.append($preview);
@@ -407,7 +431,7 @@
         var insertTableRow = function(index, value) {
             var color = colorVals[value];
             // start values are set in "handleSetup"
-            var $tr = $('<tr/>').appendTo($table);
+            var $tr = $('<tr>').appendTo($table);
             var html = '\
                 <td class="'+css+'color '+css+value+'">\
                     <div>'+color.label+'</div>\
@@ -417,8 +441,8 @@
             var $cont = tinySlider(data, sliderOptions.contrast, color.m);
             $table.data(value+'a', $brgt.data('$text'));
             $table.data(value+'m', $cont.data('$text'));
-            $('<td class="'+css+'rgb"/>').append($brgt).appendTo($tr);
-            $('<td class="'+css+'rgb"/>').append($cont).appendTo($tr);
+            $('<td>', { class: css+'rgb' }).append($brgt).appendTo($tr);
+            $('<td>', { class: css+'rgb' }).append($cont).appendTo($tr);
             };
         var onChange = function ($slider) {
             // show effects of color brightness/contrast on a grey scale