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

comparison client/digitallibrary/jquery/jquery.digilib.regions.js @ 843:76c23870ac0b jquery

always show html-defined regions. wrong pos still not fixed

author	hertzhaft
date	Mon, 07 Mar 2011 00:38:20 +0100
parents	f381d088da88
children	8aa2891583f1

comparison

equal deleted inserted replaced

-:10a6ea8b25ad
+:76c23870ac0b
 /** optional digilib regions plugin
 markup a digilib image with rectangular regions
 TODO:
-- store region in params/cookie, regarding zoom, mirror, rotation (like marks)
+how to display regions correctly in embedded mode?
-- set regions programmatically
-- read regions from params/cookie and display
-- backlink mechanism
-- don't write to data.settings?
 */
 (function($) {
 // the digilib object
 var digilib;
 'isRegionVisible' : true,
 // are region numbers shown?
 'showRegionNumbers' : false,
 // is window with region HTML shown?
 'showRegionHTML' : false,
-// should digilib look for region content in the page?
+// is there region content in the page?
-'includeRegionContent' : false,
+'hasRegionContent' : false,
 // turn any region into a clickable link to its detail view
 'autoRegionLinks' : false,
 // class name for content divs (must additionally be marked with class "keep")
 'regionContentSelector' : 'div.regioncontent',
 // buttonset of this plugin
 // show/hide regions
 "toggleRegions" : function (data) {
 var show = !data.settings.isRegionVisible;
 data.settings.isRegionVisible = show;
 fn.highlightButtons(data, 'regions', show);
-showRegionDivs(data, 1);
+renderRegions(data, 1);
 },
 // show/hide region HTML code
 "showRegionHTML" : function (data) {
 var show = !data.settings.showRegionHTML;
 $html.append($('<div/>').text('<a href="" rel="' + area + '">'));
 $html.append($('<div/>').text('</a>'));
 });
 $html.append($('<div/>').text('</div>'));
 $html.fadeIn();
+},
+"redraw" : function (data) {
+renderRegions(data);
 }
 };
 // store a region div
 var storeRegion = function (data, $regionDiv) {
 // create regions from HTML
 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);
 $content.each(function(index, a) {
 var $a = $(a);
-var href = $a.attr('href');
+// the "rel" attribute has area 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);
+var href = $a.attr('href');
+var text = $a.text();
 $regionDiv.append($a.clone());
 // $a.show();
 });
 };
 // show a region on top of the scaler image
-var showRegionDiv = function (data, index, anim) {
+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 $regionDiv = region.$div;
 if (!$regionDiv) {
-console.debug("showRegionDiv: region has no $div", region);
+console.debug("renderRegion: region has no $div", region);
-// alert("showRegionDiv: region has no $div to show");
+// 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: mpos=",geom.position(screenRect));
 screenRect.adjustDiv($regionDiv);
 if (anim) {
 $regionDiv.fadeIn();
 } else{
 $regionDiv.show();
 }
 }
 };
 // show regions
-var showRegionDivs = function (data, anim) {
+var renderRegions = function (data, anim) {
 for (var i = 0; i < data.regions.length ; i++) {
-showRegionDiv(data, i, anim);
+renderRegion(data, i, anim);
 }
 };
 var unpackRegions = function (data) {
 // create regions from parameters
 data.settings.rg = rg;
 };
 // reload display after a region has been added or removed
 var redisplay = function (data) {
-if (!data.settings.includeRegionContent) {
+if (!data.settings.hasRegionContent) {
 packRegions(data);
 }
 fn.redisplay(data);
 };
 // event handler, reads region parameter and creates region divs
 var handleSetup = function (evt) {
 data = this;
 console.debug("regions: handleSetup", data.settings.rg);
 // regions with content are given in HTML divs
-if (data.settings.includeRegionContent) {
+if (data.settings.hasRegionContent) {
 createRegionsFromHTML(data);
 // regions are defined in the URL
 } else {
 unpackRegions(data);
 createRegionDivs(data);
 };
 // event handler, sets buttons and shows regions
 var handleUpdate = function (evt) {
 data = this;
+console.debug("regions: handleUpdate");
 var settings = data.settings;
 fn.highlightButtons(data, 'regions' , settings.isRegionVisible);
 fn.highlightButtons(data, 'regionhtml' , settings.showRegionHTML);
-showRegionDivs(data);
+renderRegions(data);
-console.debug("regions: handleUpdate", settings.rg);
 };
 // event handler, redisplays regions (e.g. in a new position)
 var handleRedisplay = function (evt) {
 data = this;
-showRegionDivs(data);
 console.debug("regions: handleRedisplay");
+renderRegions(data);
 };
 // event handler
 var handleDragZoom = function (evt, zoomArea) {
 // console.debug("regions: handleDragZoom, zoomArea:", zoomArea);
 $data.bind('setup', handleSetup);
 $data.bind('update', handleUpdate);
 $data.bind('redisplay', handleRedisplay);
 $data.bind('dragZoom', handleDragZoom);
 var settings = data.settings;
-var hasRegionContent = settings.includeRegionContent;
+var selector = data.settings.regionContentSelector;
-// no URL-defined regions, no buttons when regions are predefined in HTML
+settings.hasRegionContent = $elem.has(selector).length > 0;
-if (!hasRegionContent) {
+// neither URL-defined regions nor buttons when regions are predefined in HTML
+if (!settings.hasRegionContent) {
 var mode = settings.interactionMode;
 // add "rg" to digilibParamNames
 settings.digilibParamNames.push('rg');
 // additional buttons
 var buttonSettings = settings.buttonSettings[mode];