# HG changeset patch # User hertzhaft # Date 1350667167 -7200 # Node ID 8d6bc18f7145e471f40d35ec0f3ac2699b566b42 # Parent 75a54db031ddc1ba8715d8ae9f47706c27e2a5da some polishing and refactoring, preparation for region text search diff -r 75a54db031dd -r 8d6bc18f7145 webapp/src/main/webapp/jquery/jquery.digilib.regions.js --- 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 = '\
\ +
coordinates to find:
\
\
\ \ @@ -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;