changeset 1094:8d6bc18f7145

some polishing and refactoring, preparation for region text search
author hertzhaft
date Fri, 19 Oct 2012 19:19:27 +0200
parents 75a54db031dd
children 20ad0034f1e5
files webapp/src/main/webapp/jquery/jquery.digilib.regions.js
diffstat 1 files changed, 66 insertions(+), 27 deletions(-) [+]
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Thu Oct 18 18:49:05 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Fri Oct 19 19:19:27 2012 +0200
@@ -30,8 +30,9 @@
 (function($) {
     // the digilib object
     var digilib = null;
+    // the normal zoom area
+    var FULL_AREA = null;
     // the functions made available by digilib
-    var FULL_AREA = null;
     var fn = {
         // dummy function to avoid errors, gets overwritten by buttons plugin
         highlightButtons : function () {
@@ -81,6 +82,8 @@
         'isRegionVisible' : true,
         // are region numbers shown?
         'showRegionNumbers' : true,
+        // default width for region when only point is given
+        'regionWidth' : 0.005,
         // is there region content in the page?
         'processHtmlRegions' : false,
         // region defined by users and in the URL
@@ -290,12 +293,35 @@
             console.debug('showRegionCoords', coords);
         },
 
+        // draw a find region from coords and move into view
+        regionFromCoords : function (data, coords) {
+            var rect = parseCoordsString(data, coords);
+            if (rect == null) {
+                alert('invalid coordinates: ' + coords);
+                return;
+                }
+            var cssPrefix = data.settings.cssPrefix;
+            var attr = { 'class' : cssPrefix+'regionURL '+cssPrefix+'findregion' };
+            createRegion(data, data.userRegions, rect, attr);
+            var za = data.zoomArea;
+            if (!fn.isFullArea(za)) {
+                za.setCenter(rect.getCenter()).stayInside(FULL_AREA);
+                if (!za.containsRect(rect)) {
+                    za = FULL_AREA.copy();
+                    }
+                fn.setZoomArea(data, za);
+                }
+            console.debug('regionFromCoords', coords, rect, za);
+            redisplay(data);
+            },
+
         // find coordinates and display as new region
         findCoords : function (data) {
             var $elem = data.$elem;
             var cssPrefix = data.settings.cssPrefix;
             var html = '\
                 <div id="'+cssPrefix+'regionInfo" class="'+cssPrefix+'keep '+cssPrefix+'regionInfo">\
+                    <div>coordinates to find:</div>\
                     <form class="'+cssPrefix+'form">\
                         <div>\
                             <input class="'+cssPrefix+'input" name="coords" type="text" size="30" maxlength="40"/> \
@@ -311,21 +337,8 @@
             // handle submit
             $form.on('submit', function () {
                 var coords = $input.val();
-                var attr = { 'class' : cssPrefix+'regionURL '+cssPrefix+'findregion' };
-                console.debug('findCoords', coords);
-                var rect = createRegionFromCoords(data, data.userRegions, coords, attr);
-                var za = data.zoomArea;
-                if (!fn.isFullArea(za)) {
-                    za.setCenter(rect.getCenter());
-                    za.clipTo(FULL_AREA);
-                    if (!za.containsRect(rect)) {
-                        fn.setZoomArea(data, FULL_AREA.copy());
-                    } else {
-                        fn.setZoomArea(data, za);
-                    }
-                }
+                actions.regionFromCoords(data, coords);
                 fn.withdraw($info);
-                redisplay(data);
                 return false;
             });
             // handle cancel
@@ -335,7 +348,7 @@
             $info.fadeIn();
             fn.centerOnScreen(data, $info);
             $input.focus();
-        },
+        }
     };
 
     // store a region div
@@ -464,18 +477,31 @@
         return $regionDiv;
     };
 
-    // create regions from a string with coordinates
-    var createRegionFromCoords = function (data, regions, coords, attributes) {
-        var pos = coords.split(/[,\/ ]+/, 4); // TODO: check validity?
+    // create a rectangle from a coords string
+    var parseCoordsString = function (data, coords) {
+        var pos = coords.match(/[0-9.]+/g); // TODO: check validity?
+        if (pos == null) {
+            return null;
+            }
         var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
-        if (rect == null) {
-            console.debug('createRegionsFromCoords: bad coords:', coords);
+        if (!fn.isNumber(rect.x) || !fn.isNumber(rect.y)) {
             return null;
-        }
+            }
+        if (!rect.getArea()) {
+            var pt = rect.getPosition();
+            rect.width = data.settings.regionWidth;
+            rect.height = rect.width;
+            rect.setCenter(pt);
+            }
+        return rect;
+    };
+
+    // create a regions from a rectangle
+    var createRegion = function (data, regions, rect, attributes) {
         var index = regions.length;
         regions.push(rect);
         var $regionDiv = createRegionDiv(data, regions, index, attributes);
-        return rect;
+        return $regionDiv;
     };
 
     // create regions from URL parameters
@@ -500,6 +526,12 @@
             var $area = $(area); 
             // the "coords" attribute contains the region coords (0..1)
             var coords = $area.attr('coords');
+            var title = $area.attr('title');
+            // create the rectangle
+            var rect = parseCoordsString(data, coords);
+            if (rect == null) {
+                return console.error('bad coords in HTML:', title, coords);
+            }
             // copy some attributes
             var attributes = {};
             for (var n in data.settings.regionAttributes) {
@@ -512,11 +544,9 @@
             } else {
                 attributes['class'] = regionClass
             }
-            // create the region
-            var rect = createRegionFromCoords(data, regions, coords, attributes);
-            if (rect == null) return;
+            rect.text = title;
             rect.fromHtml = true;
-            var $regionDiv = rect.$div;
+            var $regionDiv = createRegion(data, regions, rect, attributes);
             var $contents = $area.contents().clone();
             if (attributes.href != null) {
                 // wrap contents in a-tag
@@ -533,6 +563,15 @@
         });
     };
 
+    // list of HTML regions matching text in its title attribute
+    var matchRegionText = function (data, text) {
+        var regions = data.htmlRegions;
+        var re = new RegExp(text);
+        return $.grep(regions, function(item, index) {
+            return re.match(item.text);
+            });
+    };
+
     // show a region on top of the scaler image 
     var renderRegion = function (data, region, anim) {
         if (!data.imgTrafo) return;