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

comparison client/digitallibrary/jquery/jquery.digilib.regions.js @ 825:f07b8ed13194 jquery

display regions as HTML for use in digilib element

author	hertzhaft
date	Tue, 01 Mar 2011 01:31:26 +0100
parents	874d781dd7ec
children	7b3e5c666269

comparison

equal deleted inserted replaced

-:874d781dd7ec
+:f07b8ed13194
 regions : {
 onclick : "toggleRegions",
 tooltip : "show or hide regions",
 icon : "regions.png"
 },
-regioninfo : {
+regionhtml : {
-onclick : "toggleRegionInfo",
+onclick : "showRegionHTML",
 tooltip : "show information about regions",
 icon : "regioninfo.png"
 }
 };
 var defaults = {
 // are regions shown?
 'isRegionVisible' : true,
 // are region numbers shown?
 'showRegionNumbers' : false,
-// is region info shown?
+// is window with region HTML shown?
-'showRegionInfo' : false,
+'showRegionHTML' : false,
 // should digilib look for region content in the page?
 'includeRegionContent' : 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
-'regionSet' : ['regions', 'addregion', 'delregion', 'regioninfo', 'lessoptions'],
+'regionSet' : ['regions', 'addregion', 'delregion', 'regionhtml', 'lessoptions'],
 // url param for regions
 'rg' : null,
 };
 var actions = {
 data.settings.isRegionVisible = show;
 fn.highlightButtons(data, 'regions', show);
 showRegionDivs(data, 1);
 },
-// show/hide region info
+// show/hide region HTML code
-"toggleRegionInfo" : function (data) {
+"showRegionHTML" : function (data) {
-var show = !data.settings.showRegionInfo;
+var show = !data.settings.showRegionHTML;
-data.settings.showRegionInfo = show;
+data.settings.showRegionHTML = show;
-fn.highlightButtons(data, 'regioninfo', show);
+fn.highlightButtons(data, 'regionhtml', show);
-var $info = $('.regioninfo');
+var $html = data.$htmlDiv;
-if (show) {
+if (!show) {
-$info.fadeIn();
+$html.fadeOut(function () {
-} else {
+$html.contents().remove();
-$info.fadeOut();
+});
-}
+return;
 }
-};
+// empty the div for HTML display
+$.each(data.regions, function(index, region) {
-var addRegion = actions.addRegion;
+var title = "area="
++ region.x + "/" + region.y + "/"
++ region.width + "/" + region.height;
+$html.append($('<div/>').text('<div class="keep regioncontent" title="' + title + '">'));
+$html.append($('<div/>').text('</div>'));
+});
+$html.fadeIn();
+}
+};
 // store a region div
 var storeRegion = function (data, $regionDiv) {
 var regions = data.regions;
 var rect = geom.rectangle($regionDiv);
 })
 }
 return $regionDiv;
 };
-// add region info
-var addRegionInfo = function (region) {
-var $regionDiv = region.$div;
-var $regionInfoDiv = $('<div class="regioninfo" />');
-$regionInfoDiv.text(region.toString());
-$regionDiv.append($regionInfoDiv);
-}
 // add region content
 var addRegionContent = function (region, $elem) {
 var $regionDiv = region.$div;
 $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;
-addRegionInfo(region);
 return $regionDiv;
 };
 // create regions
 var createRegionDivs = function (data) {
 var regions = data.regions;
-for (var i = 0; i < regions.length ; i++) {
+$.each(regions, function(i) {
 createRegionDiv(regions, i);
-}
+});
 };
 // create regions from HTML
 var createRegionsFromHTML = function (data) {
 var regions = data.regions;
 var selector = data.settings.regionContentSelector;
 var $content = data.$elem.find(selector);
 console.debug("createRegionsFromHTML", $content);
 $content.each(function(index, elem) {
 var $div = $(elem);
-var r = $div.attr('title');
+var title = $div.attr('title');
+var r = title.replace(/^area=/i, '');
 var pos = r.split("/", 4);
 var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
 regions.push(rect);
 var $regionDiv = createRegionDiv(regions, index);
 $regionDiv.append($div);
 createRegionsFromHTML(data);
 // regions are defined in the URL
 } else {
 unpackRegions(data);
 createRegionDivs(data);
+fn.highlightButtons(data, 'regionhtml', data.settings.showRegionHTML);
 }
 };
 // event handler, sets buttons and shows regions
 var handleUpdate = function (evt) {
 data = this;
 fn.highlightButtons(data, 'regions' , data.settings.isRegionVisible);
-fn.highlightButtons(data, 'regioninfo' , data.settings.showRegionInfo);
+fn.highlightButtons(data, 'regionhtml' , data.settings.showRegionHTML);
 showRegionDivs(data);
 console.debug("regions: handleUpdate", data.settings.rg);
 };
 // event handler, redisplays regions (e.g. in a new position)
 var init = function (data) {
 console.debug('initialising regions plugin. data:', data);
 var $data = $(data);
 // regions array
 data.regions = [];
+// regions HTML div
+var $html = $('<div class="keep regionhtml"/>');
+data.$htmlDiv = $html;
+data.$elem.append($html);
 // no URL-defined regions, no buttons when regions are predefined in HTML
 if (!data.settings.includeRegionContent) {
 // add "rg" to digilibParamNames
 data.settings.digilibParamNames.push('rg');
 // additional buttons