digilib-old: webapp/src/main/webapp/jquery/jquery.digilib.regions.js comparison

comparison webapp/src/main/webapp/jquery/jquery.digilib.regions.js @ 1107:365f95a14057

factor out defineArea, using overlay div

author	hertzhaft
date	Sat, 27 Oct 2012 00:06:29 +0200
parents	415da4e4b76b
children	ae796bcac7f4

comparison

equal deleted inserted replaced

-:68756216e018
+:365f95a14057
 icon : "regioninfo.png"
 }
 };
 var defaults = {
-// are regions being edited?
-'editRegions' : false,
 // are regions shown?
 'isRegionVisible' : true,
 // are region numbers shown?
 'showRegionNumbers' : true,
 // default width for region when only point is given
 defineUserRegion : function(data) {
 if (!data.settings.isRegionVisible) {
 alert("Please turn on regions visibility!");
 return;
 }
-var $elem = data.$elem;
+var onComplete = function(data, rect) {
-var $body = $('body');
+if (rect == null) return;
-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 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
 removeUserRegion : function (data) {
 if (!data.settings.isRegionVisible) {
 alert("Please turn on regions visibility!");
 return;
 }
 var selector = 'div.'+CSS+'regionURL';
 var $regionDiv = data.$elem.find(selector).last();
+if ($regionDiv.length == 0) return;
 $regionDiv.remove();
 redisplay(data);
 },
 // remove all manually added regions (defined through URL "rg" parameter)
 alert("Please turn on regions visibility!");
 return;
 }
 var selector = 'div.'+CSS+'regionURL';
 var $regionDivs = data.$elem.find(selector);
+if ($regionDivs.length == 0) return;
 $regionDivs.remove();
 redisplay(data);
 },
 // show/hide regions
 var bind = function(name) {
 $info.find('.'+name).on('click.regioninfo', function () {
 $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);
 });
 $info.fadeIn();
 fn.centerOnScreen(data, $info);
 var rect = parseCoords(data, coords);
 if (rect == null) {
 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;
 if (!fn.isFullArea(za)) {
 za.setCenter(rect.getCenter()).stayInside(FULL_AREA);
 $form.on('submit', function () {
 var coords = $input.val();
 actions.regionFromCoords(data, coords);
 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);
 });
 };
 // 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;
 if (rect == null) {
 return console.error('bad coords in HTML:', title, coords);
 }
 // 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) {
 attr[n] = $area.attr(n);
 }
 if (rg == null) return [];
 var coords = rg.split(",");
 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;
 });
 return regions;
 };