# HG changeset patch
# User hertzhaft
# Date 1351289189 -7200
# Node ID 365f95a1405798585bb3b3d6e34b9cbe568f5cd6
# Parent  68756216e0187271d092bc679ab69c2d211df576
factor out defineArea, using overlay div

diff -r 68756216e018 -r 365f95a14057 webapp/src/main/webapp/jquery/jquery.digilib.css
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Fri Oct 26 17:56:27 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Sat Oct 27 00:06:29 2012 +0200
@@ -22,17 +22,22 @@
 	height: 0px;
 }
 
+div.dl-digilib div.dl-area {
+    display: none;
+	position: absolute;
+	border: 2px solid #ff0000;
+}
+
+div.dl-digilib div.dl-areaoverlay {
+	position: absolute;
+	z-index: 100;
+}
+
 div.dl-digilib div.dl-birdview {
 	border: 1px solid white;
 	z-index: 10;
 }
 
-div.dl-digilib div.dl-zoomrect {
-	position: absolute;
-	border: 2px solid #ff0000;
-	z-index: 100;
-}
-
 div.dl-digilib div.dl-birdzoom {
     position: absolute;
     border: 2px solid #ff0000;
@@ -81,6 +86,7 @@
 
 div.dl-digilib div.dl-region {
 	position: absolute;
+	border: none;
     color: white;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
@@ -103,6 +109,12 @@
 	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); 
 }
 
+div.dl-digilib div.dl-regionArea {
+	background-color: red;
+	border: none;
+    opacity: 0.3;
+}
+
 div.dl-digilib div.dl-regionHTML {
 	background-color: purple;
 }
@@ -125,8 +137,8 @@
 
 div.dl-digilib div.dl-findregion {
 	background-color: transparent;
-	border: 2px solid lightcyan;
-	opacity: 1.0;
+	border: 5px solid orange;
+	opacity: 0.8;
 }
 
 div.dl-digilib #dl-calibration {
@@ -135,7 +147,7 @@
 	border: 2px solid lightcyan;
 	width: 400px;
 	display: none;
-	z-index: 9999;
+	z-index: 100;
 	}
 
 div.dl-digilib #dl-ruler {
@@ -290,20 +302,6 @@
     margin-bottom: 20px;
 }
 
-/* annotations */
-div.dl-digilib div.dl-annotationbody {
-     background-color: yellow;
-     border-radius: 5px;  
-}
-div.dl-digilib div.dl-annotationbody div.dl-text {
-    padding: 10px;
-}
-div.dl-digilib div.dl-annotationbody div.dl-creator {
-    color: gray;
-    padding: 5px;
-    border-top: 1px solid silver;
-}
-
 /* scroll arrows */
 div.dl-digilib table.dl-scalertable {
 	border: 0;
diff -r 68756216e018 -r 365f95a14057 webapp/src/main/webapp/jquery/jquery.digilib.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Fri Oct 26 17:56:27 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Sat Oct 27 00:06:29 2012 +0200
@@ -38,7 +38,7 @@
 
     var defaults = {
         // version of this script
-        'version' : 'jquery.digilib.js 2.1.8a1',
+        'version' : 'jquery.digilib.js 2.1.9',
         // logo url
         'logoUrl' : 'img/digilib-logo-text1.png',
         // homepage url (behind logo)
@@ -342,7 +342,15 @@
         zoomArea : function (data, area) {
             if (area == null) {
                 // interactively
-                zoomArea(data);
+                var onComplete = function(data, rect) {
+                    if (rect == null) return;
+                    setZoomArea(data, rect);
+                    // reset modes
+                    setFitMode(data, 'both');
+                    setScaleMode(data, 'screen');
+                    redisplay(data);
+                    };
+                defineArea(data, onComplete);
             } else {
                 data.zoomArea = geom.rectangle(area);
                 redisplay(data);
@@ -1215,71 +1223,75 @@
         redisplay(data);
     };
 
-    /** zoom to the area around two clicked points.
+    /** define an area by click and drag
      * 
      */
-    var zoomArea = function(data) {
-        $elem = data.$elem;
-        $scaler = data.$scaler;
-        var pt1, pt2;
-        var $zoomDiv = $('<div class="'+data.settings.cssPrefix+'zoomrect" style="display:none"/>');
-        $elem.append($zoomDiv);
-        // $zoomDiv.css(data.settings.zoomrectStyle);
+    var defineArea = function(data, onComplete, cls) {
+        var CSS = data.settings.cssPrefix;
+        var $elem = data.$elem;
+        var $scaler = data.$scaler;
         var picRect = geom.rectangle($scaler);
-        // FIX ME: is there a way to query the border width from CSS info?
-        // rect.x -= 2; // account for overlay borders
-        // rect.y -= 2;
+        var $body = $('body');
+        var bodyRect = geom.rectangle($body);
+        var pt1, pt2;
+        // overlay div prevents other elements from reacting to mouse events 
+        var $overlayDiv = $('<div class="'+CSS+'areaoverlay"/>');
+        $body.append($overlayDiv);
+        bodyRect.adjustDiv($overlayDiv);
+        // area div 
+        var $areaDiv = $('<div class="'+CSS+'area"/>');
+        if (cls) {
+            $areaDiv.addClass(cls); // individual styling
+        }
+        $elem.append($areaDiv);
 
-        var zoomStart = function (evt) {
+        var areaStart = function (evt) {
             pt1 = geom.position(evt);
-            // setup and show zoom div
-            pt1.adjustDiv($zoomDiv);
-            $zoomDiv.width(0).height(0);
-            $zoomDiv.show();
+            // setup and show area div
+            pt1.adjustDiv($areaDiv);
+            $areaDiv.width(0).height(0);
+            $areaDiv.show();
             // register events
-            $elem.on("mousemove.dlZoomArea", zoomMove);
-            $elem.on("mouseup.dlZoomArea", zoomEnd);
+            $overlayDiv.on("mousemove.dlArea", areaMove);
+            $overlayDiv.on("mouseup.dlArea", areaEnd);
             return false;
         };
 
         // mouse move handler
-        var zoomMove = function (evt) {
+        var areaMove = function (evt) {
             pt2 = geom.position(evt);
             var rect = geom.rectangle(pt1, pt2);
             rect.clipTo(picRect);
-            // update zoom div
-            rect.adjustDiv($zoomDiv);
+            // update area div
+            rect.adjustDiv($areaDiv);
             return false;
         };
 
         // mouseup handler: end moving
-        var zoomEnd = function (evt) {
+        var areaEnd = function (evt) {
             pt2 = geom.position(evt);
             // assume a click and continue if the area is too small
             var clickRect = geom.rectangle(pt1, pt2);
-            if (clickRect.getArea() <= 5) return false;
-            // hide zoom div
-            $zoomDiv.remove();
+            if (clickRect.getArea() <= 5) {
+                onComplete(data, null);
+                return false;
+                };
             // unregister events
-            $elem.off("mousemove.dlZoomArea", zoomMove);
-            $elem.off("mouseup.dlZoomArea", zoomEnd);
+            $overlayDiv.off("mousemove.dlArea", areaMove);
+            $overlayDiv.off("mouseup.dlArea", areaEnd);
             // clip and transform
             clickRect.clipTo(picRect);
-            var area = data.imgTrafo.invtransform(clickRect);
-            setZoomArea(data, area);
-            // reset modes
-            setFitMode(data, 'both');
-            setScaleMode(data, 'screen');
-            redisplay(data);
+            var rect = data.imgTrafo.invtransform(clickRect);
+            // execute callback
+            onComplete(data, rect);
+            // destroy area div
+            withdraw($areaDiv);
+            withdraw($overlayDiv);
             return false;
         };
 
-        // clear old handler (also ZoomDrag)
-        $scaler.off('.dlZoomArea');
-        $scaler.off(".dlZoomDrag");
-        $elem.off('.dlZoomArea');
-        // bind start zoom handler
-        $scaler.one('mousedown.dlZoomArea', zoomStart);
+        // start by clicking
+        $overlayDiv.one('mousedown.dlArea', areaStart);
     };
 
     /** set preview background.
@@ -1363,7 +1375,7 @@
             console.debug("dragstart at=", evt);
             // don't start dragging if not zoomed
             if (isFullArea(data.zoomArea)) return false;
-            $elem.find(".overlay").hide(); // hide all overlays (marks/regions)
+            $elem.find('.'+data.settings.cssPrefix+'overlay').hide(); // hide all overlays (marks/regions)
             startPos = geom.position(evt);
             delta = null;
             // set low res background immediately on mousedown
@@ -1612,7 +1624,7 @@
     var endsWith = function (str, suffix) {
         return str.indexOf(suffix, str.length - suffix.length) !== -1;
     };
-    
+
     /** center an item on the visible screen rect
     */
     var centerOnScreen = function (data, $div) {
@@ -1681,6 +1693,7 @@
             redisplay : redisplay,
             updateDisplay : updateDisplay,
             showDiv : showDiv,
+            defineArea : defineArea,
             setZoomArea : setZoomArea,
             setPreviewBg : setPreviewBg,
             getImgTrafo : getImgTrafo,
diff -r 68756216e018 -r 365f95a14057 webapp/src/main/webapp/jquery/jquery.digilib.regions.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Fri Oct 26 17:56:27 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Sat Oct 27 00:06:29 2012 +0200
@@ -96,8 +96,6 @@
         };
 
     var defaults = {
-        // are regions being edited?
-        'editRegions' : false,
         // are regions shown?
         'isRegionVisible' : true,
         // are region numbers shown?
@@ -144,67 +142,18 @@
                 alert("Please turn on regions visibility!");
                 return;
             }
-            var $elem = data.$elem;
-            var $body = $('body');
-            var bodyRect = geom.rectangle($body);
-            var $scaler = data.$scaler;
-            var scalerRect = geom.rectangle($scaler);
-            var pt1, pt2;
-            // overlay prevents other elements from reacting to mouse events 
-            var $overlay = $('<div class="'+CSS+'overlay" style="position:absolute"/>');
-            $body.append($overlay);
-            bodyRect.adjustDiv($overlay);
-            var attr = {'class' : CSS+"regionURL"};
-            var $regionDiv = newRegionDiv(data, attr);
-
-            // mousedown handler: start sizing
-            var regionStart = function (evt) {
-                pt1 = geom.position(evt);
-                // setup and show zoom div
-                pt1.adjustDiv($regionDiv);
-                $regionDiv.width(0).height(0);
-                $regionDiv.show();
-                // register mouse events
-                $overlay.on("mousemove.dlRegion", regionMove);
-                $overlay.on("mouseup.dlRegion", regionEnd);
-                return false;
-            };
-
-            // mousemove handler: size region
-            var regionMove = function (evt) {
-                pt2 = geom.position(evt);
-                var rect = geom.rectangle(pt1, pt2);
-                rect.clipTo(scalerRect);
-                // update region
-                rect.adjustDiv($regionDiv);
-                return false;
-            };
-
-            // mouseup handler: end sizing
-            var regionEnd = function (evt) {
-                pt2 = geom.position(evt);
-                // assume a click and continue if the area is too small
-                var clickRect = geom.rectangle(pt1, pt2);
-                if (clickRect.getArea() <= 5) return false;
-                // unregister mouse events and get rid of overlay
-                $overlay.off("mousemove.dlRegion", regionMove);
-                $overlay.off("mouseup.dlRegion", regionEnd);
-                $overlay.remove();
-                // clip region
-                clickRect.clipTo(scalerRect);
-                clickRect.adjustDiv($regionDiv);
-                regionTrafo(data, $regionDiv);
+            var onComplete = function(data, rect) {
+                if (rect == null) return;
                 var count = getRegions(data, 'regionURL').length;
-                addRegionNumber(data, $regionDiv, count);
+                var attr = {'class' : CSS+'regionURL '+CSS+'overlay'};
+                var item = {'rect' : rect, 'index' : count, 'attributes' : attr};
+                var $regionDiv = addRegionDiv(data, item);
                 fn.highlightButtons(data, 'defineregion', 0);
                 redisplay(data);
                 $(data).trigger('newRegion', [$regionDiv]);
-                return false;
-            };
-
-            // bind start zoom handler
-            $overlay.one('mousedown.dlRegion', regionStart);
+                };
             fn.highlightButtons(data, 'defineregion', 1);
+            fn.defineArea(data, onComplete, CSS+'regionArea');
         },
 
         // remove the last added URL region
@@ -215,6 +164,7 @@
             }
             var selector = 'div.'+CSS+'regionURL';
             var $regionDiv = data.$elem.find(selector).last();
+            if ($regionDiv.length == 0) return;
             $regionDiv.remove();
             redisplay(data);
         },
@@ -227,6 +177,7 @@
             }
             var selector = 'div.'+CSS+'regionURL';
             var $regionDivs = data.$elem.find(selector);
+            if ($regionDivs.length == 0) return;
             $regionDivs.remove();
             redisplay(data);
         },
@@ -268,12 +219,16 @@
                     $info.find('div.'+CSS+'info').hide();
                     $info.find('div.'+CSS+name).show();
                     fn.centerOnScreen(data, $info);
+                    return false;
                     });
                 };
             bind('html');
             bind('svgattr');
             bind('csv');
             bind('digilib');
+            $info.on('click.regioninfo', function () {
+                fn.withdraw($info);
+                });
             $info.find('.x').on('click.regioninfo', function () {
                 fn.withdraw($info);
                 });
@@ -321,7 +276,7 @@
                 alert('invalid coordinates: ' + coords);
                 return;
                 }
-            var attr = { 'class' : CSS+'regionURL '+CSS+'findregion' };
+            var attr = { 'class' : CSS+'findregion' };
             var item = { 'rect' : rect, 'attributes' : attr };
             var $regionDiv = addRegionDiv(data, item);
             var za = data.zoomArea;
@@ -363,6 +318,10 @@
                 fn.withdraw($info);
                 return false;
                 });
+            // handle blur
+            $input.on('blur', function () {
+                fn.withdraw($info);
+                });
             // handle cancel
             $form.find('.'+CSS+'cancel').on('click', function () {
                 fn.withdraw($info);
@@ -449,21 +408,12 @@
     // create a new regionDiv and add it to data.$elem
     var newRegionDiv = function (data, attr) {
         var cls = CSS+'region';
-        var $regionDiv = $('<div class="'+cls+'" style="display:none"/>');
+        var $regionDiv = $('<div class="'+cls+'"/>');
         addRegionAttributes(data, $regionDiv, attr);
         data.$elem.append($regionDiv);
         return $regionDiv;
     };
 
-    // calculate the digilib coordinates of a completed user-defined region
-    var regionTrafo = function (data, $regionDiv) {
-        var screenRect = geom.rectangle($regionDiv);
-        var rect = data.imgTrafo.invtransform(screenRect);
-        $regionDiv.data('rect', rect);
-        console.debug("regionTrafo", $regionDiv, rect);
-        return rect;
-    };
-
     // copy attributes to a region div
     var addRegionAttributes = function (data, $regionDiv, attributes) {
         if (attributes == null) return;
@@ -541,7 +491,7 @@
             }
             // mark div class as regionHTML
             var cls = $area.attr('class') || '';
-            cls += ' '+CSS+'regionHTML';
+            cls += ' '+CSS+'regionHTML '+CSS+'overlay';
             var attr = {'class' : cls};
             // copy attributes
             for (var n in data.settings.regionAttributes) {
@@ -679,7 +629,7 @@
         var regions = $.map(coords, function(coord, index) {
             var pos = coord.split("/", 4);
             var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
-            var attr = {'class' : CSS+"regionURL"};
+            var attr = {'class' : CSS+"regionURL "+CSS+"overlay"};
             var item = {'rect' : rect, 'index' : index+1, 'attributes' : attr};
             return item;
             });
diff -r 68756216e018 -r 365f95a14057 webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.js
--- a/webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.js	Fri Oct 26 17:56:27 2012 +0200
+++ b/webapp/src/main/webapp/jquery/svg/jquery.digilibSVG.js	Sat Oct 27 00:06:29 2012 +0200
@@ -14,27 +14,17 @@
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
  
 Authors:
-  Martin Raspe, Robert Casties, 9.2.2011
+  Martin Raspe, Robert Casties, 9.2.2011 - 26.3.2012
+
 */
 
 /**
  * digilib SVG plugin (measuring tool for use within the digilib jQuery plugin)
 **/ 
 
-
 /* jslint browser: true, debug: true, forin: true
 */
 
-// fallback for console.log calls
-if (typeof(console) === 'undefined') {
-    var console = {
-        log : function(){}, 
-        debug : function(){}, 
-        error : function(){}
-        };
-    var customConsole = true;
-}
-
 (function($) {
 
     // plugin object with digilib data
diff -r 68756216e018 -r 365f95a14057 webapp/src/main/webapp/jquery/test-regions.html
--- a/webapp/src/main/webapp/jquery/test-regions.html	Fri Oct 26 17:56:27 2012 +0200
+++ b/webapp/src/main/webapp/jquery/test-regions.html	Sat Oct 27 00:06:29 2012 +0200
@@ -45,7 +45,7 @@
         <div id="digilib">
             <p>digilib doesn't work! Please switch on Javascript or notify the server administrator!</p>
             <img src="http://digilib.berlios.de/images/digilib-logo-big.png" />
-            <map class="dl-keep dl-regioncontent">
+            <map class="dl-keep dl-regioncontent test1">
                 <area title="A: Basilica S. Petri in Vaticano cum Porticu et P. Pontificio" coords="0.0599,0.7277,0.0371,0.0577"/>
                 <area title="B: Basilica S. Joannis Lateranensis cum Palatio" coords="0.6324,0.1208,0.0337,0.0317"/>
                 <area title="C: Basilica S. Mariae Maioris" coords="0.4114,0.1343,0.032,0.0345"/>
@@ -56,6 +56,8 @@
                 <area title="H: Temp. et Monas SS. Trinitatis Montium" coords="0.206,0.2397,0.0284,0.0304"/>
                 <area title="I: Temp. D. Mariae Populi ab Alex. VII restau." coords="0.0523,0.3085,0.012,0.0207"/>
                 <area title="K: Temp. S. Athanasii Grecorum" coords="0.1608,0.3157,0.0138,0.0238"/>
+            </map>
+            <map class="dl-keep dl-regioncontent test2">
                 <area title="L: Temp. D. Mariae Rotundae olim Patheon Agrippae" coords="0.3874,0.4144,0.0151,0.0228"/>
                 <area title="M: Tem. D. Mariae Super Minervam" coords="0.4077,0.3991,0.0115,0.0197"/>
                 <area title="N: Tem. D. M. in Valicella Vulgo Chiesa Nuova" coords="0.3914,0.526,0.026,0.0318"/>
@@ -63,10 +65,13 @@
                 <area title="Q: Tem. et Monas S. Andreae delle fratte" coords="0.2884,0.2788,0.0146,0.028"/>
                 <area title="R: Tem. D. M. Pacis ab Alex VII denuo constructa" coords="0.3012,0.3435,0.0159,0.0124"/>
                 <area title="S: Tem. et Hospitale B. Mariae de Anima nationis Germanorum et Flandrorum" coords="0.3252,0.3559,0.0145,0.0196"/>
+            </map>
+            <map class="dl-keep dl-regioncontent test3">
                 <area title="T: Tem. et Hospitale S. Lodouici nationis Gallicanae" coords="0.3672,0.446,0.0083,0.0143"/>
                 <area title="V: Tem. et Hospitale S. Iacobi nationis Hispanorum" coords="0.4037,0.463,0.0073,0.0162"/>
                 <area title="X: Tem. et Hospitale S. Spiritus in Sassia" coords="0.2288,0.658,0.0386,0.0462"/>
                 <a title="test a tag" coords="0.05,0.05,0.3,0.1">Testing an <b>a tag</b> with content</a>
+                <a title="what's up" coords="0.35,0.35,0.2,0.1">another tag</a>
             </map>
         </div>
     </body>