Mercurial > hg > digilib-old
changeset 1027:ff19b9e936d3
allow predefined and user regions at the same time.
hasRegionContent is now processHtmlRegions.
new separate option processUserRegions.
author | robcast |
---|---|
date | Wed, 07 Mar 2012 17:25:52 +0100 |
parents | c75858ee4452 |
children | 7c401c168a95 |
files | webapp/src/main/webapp/jquery/jquery.digilib.regions.js |
diffstat | 1 files changed, 35 insertions(+), 21 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Tue Mar 06 23:53:22 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Wed Mar 07 17:25:52 2012 +0100 @@ -52,7 +52,9 @@ // is window with region HTML shown? 'showRegionInfo' : false, // is there region content in the page? - 'hasRegionContent' : false, + 'processHtmlRegions' : false, + // region defined by users and in the URL + 'processUserRegions' : true, // turn any region into a clickable link to its detail view 'autoZoomRegionLinks' : false, // use full region as klickable link (instead of only number and text) @@ -217,16 +219,16 @@ var regionInfoHTML = function (data) { var cssPrefix = data.settings.cssPrefix; var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'html"/>'); - $infoDiv.append($('<div/>').text('<div class="'+cssPrefix+'keep '+cssPrefix+'regioncontent">')); + $infoDiv.append($('<div/>').text('<map class="'+cssPrefix+'keep '+cssPrefix+'regioncontent">')); $.each(data.regions, function(index, r) { var area = [ fn.cropFloatStr(r.x), fn.cropFloatStr(r.y), fn.cropFloatStr(r.width), fn.cropFloatStr(r.height)].join(','); - $infoDiv.append($('<div/>').text('<a coords="' + area + '" >')); + $infoDiv.append($('<div/>').text('<area coords="' + area + '"/>')); }); - $infoDiv.append($('<div/>').text('</div>')); + $infoDiv.append($('<div/>').text('</map>')); return $infoDiv; }; @@ -280,14 +282,19 @@ } var url = null; if (attributes) { - $regionDiv.attr(attributes); - // UGLY: if we added href, remove it + // copy attributes to div except href if (attributes.href) { url = attributes.href; - $regionDiv.removeAttr('href'); + // copy attributes + var attrs = $.extend({}, attributes); + delete attrs.href; + $regionDiv.attr(attrs); + } else { + $regionDiv.attr(attributes); } } if (settings.autoZoomRegionLinks || settings.fullRegionLinks) { + // handle click events on div var region = data.regions[index]; $regionDiv.on('click.dlRegion', function(evt) { if (settings.fullRegionLinks && url) { @@ -309,8 +316,11 @@ // create a region div from the data.regions array var createRegionDiv = function (data, regions, index, attributes) { + var region = regions[index]; + // check if div exists + if (region.$div != null) return region.$div; + // create and add div var $regionDiv = addRegionDiv(data, index, attributes); - var region = regions[index]; region.$div = $regionDiv; return $regionDiv; }; @@ -321,7 +331,7 @@ var regions = data.regions; $.each(regions, function(i) { createRegionDiv(data, regions, i); - }); + }); }; // create regions from HTML @@ -334,8 +344,9 @@ var $a = $(a); // the "coords" attribute contains the region coords (0..1) var coords = $a.attr('coords'); - var pos = coords.split(",", 4); + var pos = coords.split(',', 4); var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]); + rect.fromHtml = true; regions.push(rect); // copy some attributes var attributes = {}; @@ -349,6 +360,7 @@ // wrap contents in a-tag var $ca = $('<a href="'+attributes.href+'"/>'); $ca.append($contents); + // alt attribute is also content (BTW: area-tag has no content()) $ca.append($a.attr('alt')); $regionDiv.append($ca); } else { @@ -362,7 +374,6 @@ // 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; var zoomArea = data.zoomArea; if (index > regions.length) return; @@ -426,7 +437,9 @@ var rg = ''; for (var i = 0; i < regions.length; i++) { var region = regions[i]; - if (i) { + // skip regions from HTML + if (region.fromHtml != null) continue; + if (rg) { rg += ','; } rg += [ @@ -441,7 +454,7 @@ // reload display after a region has been added or removed var redisplay = function (data) { - if (!data.settings.hasRegionContent) { + if (data.settings.processUserRegions) { packRegions(data); } fn.redisplay(data); @@ -450,12 +463,14 @@ // event handler, reads region parameter and creates region divs var handleSetup = function (evt) { var data = this; - console.debug("regions: handleSetup", data.settings.rg); - // regions with content are given in HTML divs - if (data.settings.hasRegionContent) { + var settings = data.settings; + console.debug("regions: handleSetup", settings.rg); + if (settings.processHtmlRegions) { + // regions with content are given in HTML divs createRegionsFromHTML(data); - // regions are defined in the URL - } else { + } + if (settings.processUserRegions) { + // regions are defined in the URL createRegionsFromURL(data); fn.highlightButtons(data, 'regionhtml', data.settings.showRegionInfo); } @@ -488,6 +503,7 @@ var init = function (data) { console.debug('initialising regions plugin. data:', data); var $elem = data.$elem; + var settings = data.settings; var cssPrefix = data.settings.cssPrefix; // regions array data.regions = []; @@ -499,9 +515,7 @@ var $data = $(data); $data.on('setup', handleSetup); $data.on('update', handleUpdate); - var settings = data.settings; - // neither URL-defined regions nor buttons when regions are predefined in HTML - if (!settings.hasRegionContent) { + if (settings.processUserRegions) { var mode = settings.interactionMode; // add "rg" to digilibParamNames settings.digilibParamNames.push('rg');