digilib: client/digitallibrary/jquery/jquery.digilib.regions.js comparison

comparison client/digitallibrary/jquery/jquery.digilib.regions.js @ 844:8aa2891583f1 jquery

fixed region position bug in embedded mode, sigh

author	hertzhaft
date	Mon, 07 Mar 2011 09:30:55 +0100
parents	76c23870ac0b
children	a2b90ad772a0

comparison

equal deleted inserted replaced

-:76c23870ac0b
+:8aa2891583f1
 // class name for content divs (must additionally be marked with class "keep")
 'regionContentSelector' : 'div.regioncontent',
 // buttonset of this plugin
 'regionSet' : ['regions', 'addregion', 'delregion', 'regionhtml', 'lessoptions'],
 // url param for regions
-'rg' : null,
+'rg' : null
 };
 var actions = {
 // define a region interactively with two clicked points
 regions.push(regionRect);
 console.debug("regions", data.regions, "regionRect", regionRect);
 };
 // add a region to data.$elem
-var addRegionDiv = function (data, index) {
+var addRegionDiv = function (data, index, url) {
 var nr = index + 1; // we count regions from 1
 // create a digilib URL for this detail
-var regionUrl = getRegionUrl(data, index);
+url = url || getRegionUrl(data, index);
 var $regionDiv = $('<div class="region overlay" style="display:none"/>');
 $regionDiv.attr("id", ID_PREFIX + nr);
 data.$elem.append($regionDiv);
 if (data.settings.showRegionNumbers) {
-var $regionNr = $('<div class="regionnumber"/>');
+var $regionLink = $('<a class="regionnumber"/>');
-var $regionLink = $('<a/>');
+$regionLink.attr('href', url);
-$regionLink.attr('href', regionUrl);
 $regionLink.text(nr);
-$regionNr.append($regionLink);
+$regionDiv.append($regionLink);
-$regionDiv.append($regionNr);
 }
 if (data.settings.autoRegionLinks) {
 $regionDiv.bind('click.dlRegion', function() {
-window.location = regionUrl;
+window.location = url;
-})
+});
 }
 return $regionDiv;
 };
-// add region content
+// create a region div from the data.regions array
-var addRegionContent = function (region, $elem) {
+var createRegionDiv = function (regions, index, url) {
-var $regionDiv = region.$div;
+var $regionDiv = addRegionDiv(data, index, url);
-$regionDiv.append($elem);
-}
-// create a region div from the data.regions collection
-var createRegionDiv = function (regions, index) {
 var region = regions[index];
-var $regionDiv = addRegionDiv(data, index);
 region.$div = $regionDiv;
 return $regionDiv;
 };
-// create regions
+// create regions from URL parameters
-var createRegionDivs = function (data) {
+var createRegionsFromURL = function (data) {
+unpackRegions(data);
 var regions = data.regions;
 $.each(regions, function(i) {
 createRegionDiv(regions, i);
 });
 };
 var createRegionsFromHTML = function (data) {
 var regions = data.regions;
 var selector = data.settings.regionContentSelector;
 // regions are defined in "a" tags
 var $content = data.$elem.contents(selector).contents('a');
-console.debug("createRegionsFromHTML", $content);
+console.debug("createRegionsFromHTML. elems: ", $content);
 $content.each(function(index, a) {
 var $a = $(a);
-// the "rel" attribute has area coords
+// the "rel" attribute contains the region coords
 var rel = $a.attr('rel');
 var area = rel.replace(/^area:/i, '');
 var pos = area.split("/", 4);
 var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
 regions.push(rect);
-var $regionDiv = createRegionDiv(regions, index);
+// create the div
 var href = $a.attr('href');
-var text = $a.text();
+var $regionDiv = createRegionDiv(regions, index, href);
-$regionDiv.append($a.clone());
+var $contents = $a.contents().clone();
-// $a.show();
+$regionDiv.append($contents);
 });
 };
 // show a region on top of the scaler image
 var renderRegion = function (data, index, anim) {
 if (!data.imgTrafo) return;
 var $elem = data.$elem;
 var regions = data.regions;
 if (index > regions.length) return;
-var region = regions[index]
+var region = regions[index];
 var $regionDiv = region.$div;
 if (!$regionDiv) {
 console.debug("renderRegion: region has no $div", region);
 // alert("renderRegion: region has no $div to show");
 return;
 var regionRect = region.copy();
 var show = data.settings.isRegionVisible;
 if (show && data.zoomArea.overlapsRect(regionRect)) {
 regionRect.clipTo(data.zoomArea);
 var screenRect = data.imgTrafo.transform(regionRect);
-// console.debug('renderRegion:', screenRect, regionRect, "imgTrafo=", data.imgTrafo);
+console.debug("renderRegion: pos=",geom.position(screenRect));
-console.debug("renderRegion: mpos=",geom.position(screenRect));
-screenRect.adjustDiv($regionDiv);
 if (anim) {
 $regionDiv.fadeIn();
 } else{
 $regionDiv.show();
 }
+// for some reason adjustDiv sets wrong coords when called BEFORE show()?
+screenRect.adjustDiv($regionDiv);
 } else {
 if (anim) {
 $regionDiv.fadeOut();
 } else{
 $regionDiv.hide();
 // regions with content are given in HTML divs
 if (data.settings.hasRegionContent) {
 createRegionsFromHTML(data);
 // regions are defined in the URL
 } else {
-unpackRegions(data);
+createRegionsFromURL(data);
-createRegionDivs(data);
 fn.highlightButtons(data, 'regionhtml', data.settings.showRegionHTML);
 }
 };
-// event handler, sets buttons and shows regions
+// event handler, sets buttons and shows regions when scaler img is reloaded
 var handleUpdate = function (evt) {
 data = this;
 console.debug("regions: handleUpdate");
 var settings = data.settings;
 fn.highlightButtons(data, 'regions' , settings.isRegionVisible);
 // event handler, redisplays regions (e.g. in a new position)
 var handleRedisplay = function (evt) {
 data = this;
 console.debug("regions: handleRedisplay");
-renderRegions(data);
+// renderRegions(data);
 };
 // event handler
 var handleDragZoom = function (evt, zoomArea) {
 // console.debug("regions: handleDragZoom, zoomArea:", zoomArea);
 var buttonSettings = settings.buttonSettings[mode];
 // configure buttons through digilib "regionSet" option
 var buttonSet = settings.regionSet || regionSet;
 // set regionSet to [] or '' for no buttons (when showing regions only)
 if (buttonSet.length && buttonSet.length > 0) {
-buttonSettings['regionSet'] = buttonSet;
+buttonSettings.regionSet = buttonSet;
 buttonSettings.buttonSets.push('regionSet');
 }
 }
 };