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

comparison webapp/src/main/webapp/jquery/jquery.digilib.regions.js @ 1096:3c75dda660bf

more refactoring: use jquery selections instead of arrays

author	hertzhaft
date	Tue, 23 Oct 2012 23:20:45 +0200
parents	20ad0034f1e5
children	f677b9ac5110

comparison

equal deleted inserted replaced

-:20ad0034f1e5
+:3c75dda660bf
 // callback when new user region is defined
 'onNewRegion' : null,
 // turn any region into a clickable link to its detail view (DEPRECATED)
 'autoZoomOnClick' : false,
 // css selector for area/a elements (must also be marked with class "dl-keep")
-'htmlRegionsSelector' : 'map.dl-regioncontent area, map.dl-regioncontent a',
+'areaSelector' : 'map.dl-regioncontent area, map.dl-regioncontent a',
 // buttonset of this plugin
 'regionSet' : ['regions', 'defineregion', 'removeregion', 'removeallregions', 'regioninfo', 'findcoords', 'lessoptions'],
 // url param for regions
 'rg' : null,
 // region attributes to copy from HTML
 // overlay prevents other elements from reacting to mouse events
 var $overlay = $('<div class="'+cssPrefix+'overlay" style="position:absolute"/>');
 $body.append($overlay);
 bodyRect.adjustDiv($overlay);
 var $regionDiv = newRegionDiv(data);
-copyRegionAttributes(data, $regionDiv, {'class' : cssPrefix+"regionURL"});
+addRegionAttributes(data, $regionDiv, {'class' : cssPrefix+"regionURL"});
 // mousedown handler: start sizing
 var regionStart = function (evt) {
 pt1 = geom.position(evt);
 // setup and show zoom div
 $overlay.off("mouseup.dlRegion", regionEnd);
 $overlay.remove();
 // clip region
 clickRect.clipTo(scalerRect);
 clickRect.adjustDiv($regionDiv);
-storeRegionDiv(data, $regionDiv);
+regionTrafo(data, $regionDiv);
-// fn.redisplay(data);
 fn.highlightButtons(data, 'defineregion', 0);
 redisplay(data);
 $(data).trigger('newRegion', [$regionDiv]);
 return false;
 };
 removeUserRegion : function (data) {
 if (!data.settings.isRegionVisible) {
 alert("Please turn on regions visibility!");
 return;
 }
-var r = data.userRegions.pop();
+var selector = 'div.'+data.settings.cssPrefix+'regionURL';
-// no more URL regions to delete
+var $regionDiv = data.$elem.find(selector).last();
-if (r == null) return;
-var $regionDiv = r.$div; // DEPRECATED
 $regionDiv.remove();
 redisplay(data);
 },
 // remove all manually added regions (defined through URL "rg" parameter)
 removeAllUserRegions : function (data) {
 if (!data.settings.isRegionVisible) {
 alert("Please turn on regions visibility!");
 return;
 }
-var cssPrefix = data.settings.cssPrefix;
+var selector = 'div.'+data.settings.cssPrefix+'regionURL';
-var $regions = data.$elem.find('div.'+cssPrefix+'regionURL');
+var $regionDivs = data.$elem.find(selector);
-$regions.remove();
+$regionDivs.remove();
-data.userRegions = []; // remove only URL regions
 redisplay(data);
 },
 // show/hide regions
 toggleRegions : function (data) {
 </tr>\
 </table>\
 </div>';
 $info = $(html);
 $info.appendTo($elem);
-$info.append(regionInfoHTML(data));
+var $regions = getRegions(data, 'regionURL');
-$info.append(regionInfoSVG(data));
+$info.append(regionInfoHTML(data, $regions));
-$info.append(regionInfoCSV(data));
+$info.append(regionInfoSVG(data, $regions));
-$info.append(regionInfoDigilib(data));
+$info.append(regionInfoCSV(data, $regions));
+$info.append(regionInfoDigilib(data, $regions));
 var bind = function(name) {
 $info.find('.'+name).on('click.regioninfo', function () {
 $info.find('div.'+cssPrefix+'info').hide();
 $info.find('div.'+cssPrefix+name).show();
 fn.centerOnScreen(data, $info);
 // display region coordinates in an edit line
 showRegionCoords : function (data, $regionDiv) {
 var $elem = data.$elem;
 var cssPrefix = data.settings.cssPrefix;
 var rect = $regionDiv.data('rect');
-var coords = packCoords(rect, ',');
+var text = $regionDiv.data('text');
+var coordString = packCoords(rect, ',');
 var html = '\
 <div id="'+cssPrefix+'regionInfo" class="'+cssPrefix+'keep '+cssPrefix+'regionInfo">\
-<input name="coords" type="text" size="30" maxlength="40" value="'+coords+'"/>\
+<div/>\
+<input name="coords" type="text" size="30" maxlength="40" value="'+coordString+'"/>\
 </div>';
 var $info = $(html);
 $info.appendTo($elem);
+$div = $info.find('div');
+$div.text(text);
 $input = $info.find('input');
 $input.on('focus.regioninfo', function (event) {
 this.select();
 });
 $input.on('blur.regioninfo', function (event) {
 });
 $input.prop("readonly",true);
 $info.fadeIn();
 fn.centerOnScreen(data, $info);
 $input.focus();
-console.debug('showRegionCoords', coords);
+console.debug('showRegionCoords', coordString);
 },
 // draw a find region from coords and move into view
 regionFromCoords : function (data, coords) {
 var rect = parseCoords(data, coords);
 alert('invalid coordinates: ' + coords);
 return;
 }
 var cssPrefix = data.settings.cssPrefix;
 var attr = { 'class' : cssPrefix+'regionURL '+cssPrefix+'findregion' };
-createRegion(data, data.userRegions, rect, attr);
+addRegionDiv(data, 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();
 var $regionDiv = $('<div class="'+cls+'" style="display:none"/>');
 data.$elem.append($regionDiv);
 return $regionDiv;
 };
-// push the digilib coordinates of a completed user-defined region onto the stack
+// calculate the digilib coordinates of a completed user-defined region
-var storeRegionDiv = function (data, $regionDiv) {
+var regionTrafo = function (data, $regionDiv) {
-var regions = data.userRegions;
+var screenRect = geom.rectangle($regionDiv);
-var rectangle = geom.rectangle($regionDiv);
+var rect = data.imgTrafo.invtransform(screenRect);
-var rect = data.imgTrafo.invtransform(rectangle);
 $regionDiv.data('rect', rect);
-rect.$div = $regionDiv; // DEPRECATED
+console.debug("regionTrafo", $regionDiv, rect);
-regions.push(rect);
-console.debug("storeRegionDiv", data.userRegions, "rect", rect);
 return rect;
 };
 // copy attributes to a region div
-var copyRegionAttributes = function (data, $regionDiv, attributes) {
+var addRegionAttributes = function (data, $regionDiv, attributes) {
 if (attributes == null) return;
 var settings = data.settings;
 var cssPrefix = settings.cssPrefix;
 if (attributes['class']) {
 $regionDiv.addClass(attributes['class']);
 delete attributes['class'];
 }
-$regionDiv.data('href', attributes.href); // TODO: href from HTML?
+if (attributes['href']) {
-delete attributes.href;
+$regionDiv.data('href', attributes['href']); // TODO: href from HTML?
+delete attributes['href'];
+}
+if (attributes['title']) {
+$regionDiv.data('text', attributes['title']);
+}
 $regionDiv.attr(attributes);
 };
 // set region number
 var addRegionNumber = function (data, $regionDiv, index) {
 var settings = data.settings;
 var cssPrefix = settings.cssPrefix;
-if (!settings.showRegionNumbers) return;
 var $number = $('<a class="'+cssPrefix+'regionnumber">'+index+'</a>');
 $regionDiv.append($number);
 return $regionDiv;
 };
-// add a region to data.$elem
+// construct a region from a rectangle
-var addRegionDiv = function (data, regions, index, attributes) {
+var addRegionDiv = function (data, rect, attributes, number) { // ###
 var settings = data.settings;
 var cssPrefix = settings.cssPrefix;
 var $regionDiv = newRegionDiv(data);
-copyRegionAttributes(data, $regionDiv, attributes);
+addRegionAttributes(data, $regionDiv, attributes);
-addRegionNumber(data, $regionDiv, index);
+if (settings.showRegionNumbers && number) {
+addRegionNumber(data, $regionDiv, number);
+}
+$regionDiv.data('rect', rect);
 // handle click events on div
 $regionDiv.on('click.dlRegion', function(evt) {
 $(data).trigger('regionClick', [$regionDiv]);
 });
 return $regionDiv;
 };
-// create a region div from the data.regions array
-var createRegionDiv = function (data, regions, index, attributes) {
-var rect = regions[index];
-// check if div exists, DEPRECATED
-if (rect.$div != null) return rect.$div;
-// create and add div
-var $regionDiv = addRegionDiv(data, regions, index, attributes);
-$regionDiv.data('rect', rect);
-rect.$div = $regionDiv; // DEPRECATED
-return $regionDiv;
-};
-// create a region 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 $regionDiv;
-};
 // create regions from URL parameters
 var createRegionsFromURL = function (data) {
 var cssPrefix = data.settings.cssPrefix;
 var attr = {'class' : cssPrefix+"regionURL"};
-var regions = unpackRegions(data);
+var userRegions = unpackRegions(data);
-data.userRegions = regions;
+$.each(userRegions, function(index, rect) {
-$.each(regions, function(index, region) {
+addRegionDiv(data, rect, attr, index+1);
-createRegionDiv(data, regions, index, attr);
 });
 };
 // create regions from HTML
 var createRegionsFromHTML = function (data) {
+// regions are defined in "area" tags
+var $content = data.$elem.find(data.settings.areaSelector);
 var cssPrefix = data.settings.cssPrefix;
-var regions = data.htmlRegions;
+console.debug("createRegionsFromHTML. elems found: ", $content.length);
-// regions are defined in "area" tags
-var $content = data.$elem.find(data.settings.htmlRegionsSelector);
-console.debug("createRegionsFromHTML. Number of elems: ", $content.length);
 $content.each(function(index, area) {
 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 = parseCoords(data, coords);
 // copy attributes
 var attributes = {};
 for (var n in data.settings.regionAttributes) {
 attributes[n] = $area.attr(n);
 }
+var $regionDiv = addRegionDiv(data, rect, attributes);
 // mark div as regionHTML
-regionClass = cssPrefix+'regionHTML';
+$regionDiv.addClass(cssPrefix+'regionHTML');
-if (attributes['class']) {
-attributes['class'] += ' ' + regionClass
-} else {
-attributes['class'] = regionClass
-}
-var $regionDiv = createRegion(data, regions, rect, attributes);
 var $contents = $area.contents().clone();
 if (attributes.href != null) { // TODO: href set in region???
 // wrap contents in a-tag
 var $ca = $('<a href="'+attributes.href+'"/>');
 $ca.append($contents);
 $regionDiv.append($area.attr('alt'));
 }
 });
 };
+// select region divs (HTML or URL)
+var getRegions = function (data, selector) {
+var cssPrefix = data.settings.cssPrefix;
+var $regions = data.$elem.find('div.'+cssPrefix+selector);
+return $regions;
+};
 // list of HTML regions matching text in its title attribute
 var matchRegionText = function (data, text) {
-var regions = data.htmlRegions;
+var $regions = getRegions(data, 'regionsHTML');
 var re = new RegExp(text);
-return $.grep(regions, function(item, index) {
+return $.grep($regions, function($item, index) {
-return re.match(item.text);
+return re.match($item.data('text'));
 });
 };
 // html for later insertion
-var regionInfoHTML = function (data) {
+var regionInfoHTML = function (data, $regions) {
 var cssPrefix = data.settings.cssPrefix;
 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'html"/>');
 $infoDiv.append($('<div/>').text('<map class="'+cssPrefix+'keep '+cssPrefix+'regioncontent">'));
-$.each(data.userRegions, function(index, r) {
+$regions.each(function(index, region) {
-var coords = packCoords(r, ',');
+var rect = $(region).data('rect');
+var coords = packCoords(rect, ',');
 $infoDiv.append($('<div/>').text('<area coords="' + coords + '"/>'));
 });
 $infoDiv.append($('<div/>').text('</map>'));
 return $infoDiv;
 };
 // SVG-style
-var regionInfoSVG = function (data) {
+var regionInfoSVG = function (data, $regions) {
 var cssPrefix = data.settings.cssPrefix;
 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'svgattr"/>');
-$.each(data.userRegions, function(index, r) {
+$regions.each(function(index, region) {
-var coords = packCoords(r, ' ');
+var rect = $(region).data('rect');
+var coords = packCoords(rect, ',');
 $infoDiv.append($('<div/>').text('"' + coords + '"'));
 });
 return $infoDiv;
 };
 // CSV-style
-var regionInfoCSV = function (data) {
+var regionInfoCSV = function (data, $regions) {
 var cssPrefix = data.settings.cssPrefix;
 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'csv"/>');
-$.each(data.userRegions, function(index, r) {
+$regions.each(function(index, region) {
-var coords = packCoords(r, ',');
+var rect = $(region).data('rect');
+var coords = packCoords(rect, ',');
 $infoDiv.append($('<div/>').text(index+1 + ": " + coords));
 });
 return $infoDiv;
 };
 // digilib-style (h,w@x,y)
-var regionInfoDigilib = function (data) {
+var regionInfoDigilib = function (data, $regions) {
 var cssPrefix = data.settings.cssPrefix;
 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'digilib"/>');
-$.each(data.userRegions, function(index, r) {
+$regions.each(function(index, region) {
-var coords = r.toString();
+var rect = $(region).data('rect');
+var coords = packCoords(rect, ',');
 $infoDiv.append($('<div/>').text(coords));
 });
 return $infoDiv;
 };
 // show a region on top of the scaler image
-var renderRegion = function (data, rect, anim) {
+var renderRegion = function (data, $regionDiv, anim) {
 if (!data.imgTrafo) return;
 var zoomArea = data.zoomArea;
-var $regionDiv = rect.$div; // DEPRECATED
+var rect = $regionDiv.data('rect').copy();
-if (!$regionDiv) {
-console.error("renderRegion: rect has no $div", rect);
-// alert("renderRegion: region has no $div to show");
-return;
-}
-var regionRect = rect.copy();
 var show = data.settings.isRegionVisible;
-if (show && zoomArea.overlapsRect(regionRect) && !regionRect.containsRect(zoomArea)) {
+if (show && zoomArea.overlapsRect(rect) && !rect.containsRect(zoomArea)) {
-regionRect.clipTo(zoomArea);
+rect.clipTo(zoomArea);
-var screenRect = data.imgTrafo.transform(regionRect);
+var screenRect = data.imgTrafo.transform(rect);
 // console.debug("renderRegion: pos=",geom.position(screenRect));
 if (anim) {
 $regionDiv.fadeIn();
 } else{
 $regionDiv.show();
 }
 };
 // show regions
 var renderRegions = function (data, anim) {
-$.each(data.htmlRegions, function(index, region) {
+var render = function(index, region) {
-renderRegion(data, region, anim);
+renderRegion(data, $(region), anim);
-});
+};
-$.each(data.userRegions, function(index, region) {
+var $regions = getRegions(data, 'region')
-renderRegion(data, region, anim);
+$regions.each(render);
-});
 };
 // read region data from URL parameters
 var unpackRegions = function (data) {
 var rg = data.settings.rg;
 return regions;
 };
 // pack user regions array into a URL parameter string
 var packRegions = function (data) {
-var regions = data.userRegions;
+var $regions = getRegions(data, 'regionsURL');
-if (!regions.length) {
+if ($regions.length == 0) {
 data.settings.rg = null;
 return;
 }
-var coords = $.map(regions, function(region, index) {
+var coords = $.map($regions, function($region, index) {
-packCoords(region, '/');
+packCoords($region, '/');
 });
 var rg = coords.join(',');
 data.settings.rg = rg;
 console.debug('pack regions:', rg);
 };
 console.debug('initialising regions plugin. data:', data);
 var $elem = data.$elem;
 var settings = data.settings;
 var cssPrefix = data.settings.cssPrefix;
 FULL_AREA  = geom.rectangle(0, 0, 1, 1);
-// region arrays
-data.userRegions = [];
-data.htmlRegions = [];
 // install event handlers
 var $data = $(data);
 $data.on('setup', handleSetup);
 $data.on('update', handleUpdate);
 $data.on('newRegion', handleNewRegion);