Mercurial > hg > digilib-old
changeset 1110:ffda96c2fde0
use RegExp for finding regions; use ID for highlighting
author | hertzhaft |
---|---|
date | Sun, 28 Oct 2012 15:10:41 +0100 |
parents | ae796bcac7f4 |
children | 0a01d5cc66fe |
files | webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.regions.js |
diffstat | 2 files changed, 58 insertions(+), 13 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css Sun Oct 28 00:53:31 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.css Sun Oct 28 15:10:41 2012 +0100 @@ -141,6 +141,7 @@ } div.dl-digilib div.dl-highlightregion { + background-color: transparent; border: 5px solid orange; opacity: 0.8; }
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Sun Oct 28 00:53:31 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Sun Oct 28 15:10:41 2012 +0100 @@ -56,6 +56,8 @@ var geom = null; // convenience variable, set in init() var CSS = ''; + // generate ids + var IDCOUNT = 20000; var buttons = { defineregion : { @@ -112,6 +114,8 @@ 'onNewRegion' : null, // turn any region into a clickable link to its detail view (DEPRECATED) 'autoZoomOnClick' : false, + // zoom in when displaying the found region + 'autoZoomOnFind' : false, // css selector for area/a elements (must also be marked with class "dl-keep") 'areaSelector' : 'map.dl-regioncontent area, map.dl-regioncontent a', // general buttonset of this plugin @@ -164,13 +168,22 @@ alert("Please turn on regions visibility!"); return; } - var selector = 'div.'+CSS+'findregion'; - var $regions = data.$elem.find(selector); - if ($regions.length > 0) { - $regions.remove(); + // remove highlights + var selector = 'div.'+CSS+'highlightregion'; + var $highlights = data.$elem.find(selector); + if ($highlights.length > 0) { + $highlights.removeClass(CSS+'highlightregion'); + return; + } + // remove findregion divs + selector = 'div.'+CSS+'findregion'; + var $findregions = data.$elem.find(selector); + if ($findregions.length > 0) { + $findregions.remove(); redisplay(data); return; } + // remove most recently added user region selector = 'div.'+CSS+'regionURL'; var $region = data.$elem.find(selector).last(); if ($region.length > 0) { @@ -248,7 +261,7 @@ fn.centerOnScreen(data, $info); }, - // display region coordinates in an edit line + // display region coordinates in a selected edit line (for copying) showRegionCoords : function (data, $regionDiv) { var $elem = data.$elem; var rect = $regionDiv.data('rect'); @@ -303,6 +316,14 @@ redisplay(data); }, + // highlight regions by id + highlightRegions : function (data, ids) { + if (ids == null || ids.length < 1) return; + var selector = '#'+ids.join(',#'); + var $regions = data.$elem.find(selector); + $regions.addClass(CSS+'highlightregion'); + }, + // find coordinates and display as new region findCoords : function (data) { var $elem = data.$elem; @@ -343,7 +364,7 @@ $input.focus(); }, - // find text data and display as new region + // find a region by text data and higlight it findData : function (data) { var $elem = data.$elem; var findSelector = '#'+CSS+'regionFindData'; @@ -372,14 +393,15 @@ var $options = $select.find('option'); // callback if a region is selected by name var findRegion = function () { - var coords = $select.val(); - actions.regionFromCoords(data, coords); + var id = [$select.val()]; + actions.highlightRegions(data, id); fn.withdraw($info); return false; }; // adapt dropdown, show only matching entries var filterOptions = function (text) { if (!text) { + // not text, display all options, select first (empty) $options.show(); $select.prop("selectedIndex", 0); return; @@ -388,7 +410,7 @@ $options.each(function (index) { var $option = $(this); // TODO: more sophisticated matching - if ($option.text().indexOf(text) > 1) { + if (matchText($option.text(), text)) { $option.show(); if (first) { $select.prop("selectedIndex", index); @@ -397,7 +419,7 @@ } else { if (index > 0) $option.hide(); } - if (first) { + if (first) { // no hit, display and select empty option $select.prop("selectedIndex", 0); } }); @@ -407,7 +429,10 @@ $select.on('change', findRegion); $input.on('keyup', function (event) { // ugly: we need setTimeout here to get an updated val(); - window.setTimeout(filterOptions, 50, $input.val()); + window.setTimeout(filterOptions, 100, $input.val()); + if (event.keyCode == '38' || event.keyCode == '40') { // arrows + $select.focus(); + } }); // handle cancel $form.find('.'+CSS+'cancel').on('click', function () { @@ -419,6 +444,19 @@ } }; + // match search text + var matchText = function (optiontext, text) { + // sanitize and split + var parts = text.replace(/([\\\(\)\-\!.+?*])/g, '\\$1').split(/\s+/); + // match all parts anywhere in optiontext + var regexparts = $.map(parts, function(part) { + return '(?=.*'+part+')'; // one lookahead for each part + }); + var RE = new RegExp(regexparts.join(''), 'i'); + var result = optiontext.match(RE); + return result; + }; + // make a coords string var packCoords = function (rect, sep) { if (sep == null) sep = ','; // comma as default separator @@ -472,6 +510,11 @@ if (attributes['title']) { $regionDiv.data('text', attributes['title']); } + // create an ID if none exists + if (!attributes['id']) { + attributes['id'] = CSS+IDCOUNT.toString(16); + IDCOUNT += 1; + } $regionDiv.attr(attributes); }; @@ -568,13 +611,14 @@ var rect = $region.data('rect'); if (rect == null) return null; - var coords = packCoords(rect, ','); + // var coords = packCoords(rect, ','); + var id = $region.attr('id'); var text = $region.data('text'); var sortstring = $region.data('sort') || (typeof sortfunc === 'function') ? sortfunc(text) : text; - var option = '<option value="'+coords+'">'+text+'</option>'; + var option = '<option value="'+id+'">'+text+'</option>'; options.push([sortstring, option]); }; var $regions = getRegions(data, selector);