Mercurial > hg > digilib-old
changeset 1092:4964a1e252eb
first step towards a find region functionality
author | hertzhaft |
---|---|
date | Thu, 18 Oct 2012 17:22:55 +0200 |
parents | 897268e47ce4 |
children | 75a54db031dd |
files | webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.regions.js |
diffstat | 2 files changed, 69 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css Fri Oct 12 20:16:40 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.css Thu Oct 18 17:22:55 2012 +0200 @@ -123,6 +123,12 @@ display: none; } +div.dl-digilib div.dl-findregion { + background-color: transparent; + border: 2px solid lightcyan; + opacity: 1.0; +} + div.dl-digilib #dl-calibration { background: url('img/blue.png'); position: absolute;
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Fri Oct 12 20:16:40 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Thu Oct 18 17:22:55 2012 +0200 @@ -61,6 +61,11 @@ tooltip : "show or hide regions", icon : "regions.png" }, + findcoords : { + onclick : "findCoords", + tooltip : "find coords and display as a new region", + icon : "regions.png" + }, regioninfo : { onclick : "showRegionInfo", tooltip : "show information about user defined regions", @@ -88,7 +93,7 @@ // css selector for area/a elements (must also be marked with class "dl-keep") 'htmlRegionsSelector' : 'map.dl-regioncontent area, map.dl-regioncontent a', // buttonset of this plugin - 'regionSet' : ['regions', 'defineregion', 'removeregion', 'removeallregions', 'regioninfo', 'lessoptions'], + 'regionSet' : ['regions', 'defineregion', 'removeregion', 'removeallregions', 'regioninfo', 'findcoords', 'lessoptions'], // url param for regions 'rg' : null, // region attributes to copy from HTML @@ -275,16 +280,51 @@ return false; }); $input.on('keypress.regioninfo', function (event) { - fn.withdraw($info); - return false; + fn.withdraw($info); // OBS: "return false" disables copy! }); $input.prop("readonly",true); $info.fadeIn(); fn.centerOnScreen(data, $info); $input.focus(); console.debug('showRegionCoords', coords); + }, - } + // 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">\ + <form class="'+cssPrefix+'form">\ + <div>\ + <input class="'+cssPrefix+'input" name="coords" type="text" size="30" maxlength="40"/> \ + </div>\ + <input class="'+cssPrefix+'submit" type="submit" name="sub" value="Ok"/>\ + <input class="'+cssPrefix+'cancel" type="button" value="Cancel"/>\ + </form>\ + </div>'; + var $info = $(html); + $info.appendTo($elem); + var $form = $info.find('form'); + var $input = $info.find('input.'+cssPrefix+'input'); + // handle submit + $form.on('submit', function () { + var coords = $input.val(); + var attr = { 'class' : cssPrefix+'regionURL '+cssPrefix+'findregion' }; + console.debug('findCoords', coords); + createRegionFromCoords(data, data.userRegions, coords, attr); + fn.withdraw($info); + redisplay(data); + return false; + }); + // handle cancel + $form.find('.'+cssPrefix+'cancel').on('click', function () { + fn.withdraw($info); + }); + $info.fadeIn(); + fn.centerOnScreen(data, $info); + $input.focus(); + }, }; // store a region div @@ -413,6 +453,20 @@ return $regionDiv; }; + // create regions from a string with coordinates + var createRegionFromCoords = function (data, regions, coords, attributes) { + var pos = coords.split(/[,\/ ]+/, 4); // TODO: check validity? + var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]); + if (rect == null) { + console.debug('createRegionsFromCoords: bad coords:', coords); + return null; + } + var index = regions.length; + regions.push(rect); + var $regionDiv = createRegionDiv(data, regions, index, attributes); + return rect; + }; + // create regions from URL parameters var createRegionsFromURL = function (data) { var cssPrefix = data.settings.cssPrefix; @@ -435,10 +489,6 @@ var $area = $(area); // the "coords" attribute contains the region coords (0..1) var coords = $area.attr('coords'); - var pos = coords.split(',', 4); - var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]); - rect.fromHtml = true; - regions.push(rect); // copy some attributes var attributes = {}; for (var n in data.settings.regionAttributes) { @@ -451,8 +501,11 @@ } else { attributes['class'] = regionClass } - // create the div - var $regionDiv = createRegionDiv(data, regions, index, attributes); + // create the region + var rect = createRegionFromCoords(data, regions, coords, attributes); + if (rect == null) return; + rect.fromHtml = true; + var $regionDiv = rect.$div; var $contents = $area.contents().clone(); if (attributes.href != null) { // wrap contents in a-tag