# HG changeset patch
# User hertzhaft
# Date 1349111025 -7200
# Node ID 16215fc22fbf22f83a51b6f7f101be4b33daae8a
# Parent e1b29f51d224428bfbe0bcad3551404b82da2dbf
better separation of HTML and user defined regions
diff -r e1b29f51d224 -r 16215fc22fbf webapp/src/main/webapp/jquery/jquery.digilib.css
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css Thu Jul 26 21:38:09 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css Mon Oct 01 19:03:45 2012 +0200
@@ -42,32 +42,17 @@
div.dl-digilib div.dl-mark {
position: absolute;
color: white;
- background: url('img/mark-bg-16.png');
+ background: url('../greyskin/mark-bg-16.png');
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
- height: 16px;
+ height: 15px;
width: 16px;
padding-top: 1px;
text-align: center;
z-index: 10;
}
-div.dl-digilib div.dl-annotationmark {
- position: absolute;
- color: black;
- background: url('img/annotationmark-bg-16.png');
- /* background-color: yellow; */
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-weight: bold;
- font-size: 11px;
- height: 16px;
- width: 16px;
- padding-top: 1px;
- text-align: center;
- z-index: 10;
-}
-
div.dl-digilib div.dl-about {
position: absolute;
padding: 10px;
@@ -103,6 +88,10 @@
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
+div.dl-digilib div.dl-regionHTML {
+ background-color: purple;
+}
+
div.dl-digilib div.dl-region a.dl-regionnumber {
color: white;
text-decoration: none;
@@ -183,27 +172,26 @@
position: absolute;
top: 0px;
}
-
-div.dl-digilib div.dl-rgbsliderpreview,
-div.dl-digilib div.dl-singlesliderpreview {
+div.dl-digilib div.dl-rgbsliderindicator,
+div.dl-digilib div.dl-singlesliderindicator {
border: 2px solid lightcyan;
margin: 10px 0px;
}
div.dl-digilib table.dl-rgbslider,
div.dl-digilib table.dl-rgbslidergrey,
-div.dl-digilib table.dl-rgbsliderpreview,
+div.dl-digilib table.dl-rgbsliderindicator,
div.dl-digilib table.dl-singleslider,
div.dl-digilib table.dl-singleslidergrey,
-div.dl-digilib table.dl-singlesliderpreview {
+div.dl-digilib table.dl-singlesliderindicator {
width: 100%;
border-collapse: collapse;
}
div.dl-digilib table.dl-rgbslidergrey td,
-div.dl-digilib table.dl-rgbsliderpreview td,
+div.dl-digilib table.dl-rgbsliderindicator td,
div.dl-digilib table.dl-singleslidergrey td,
-div.dl-digilib table.dl-singlesliderpreview td {
+div.dl-digilib table.dl-singlesliderindicator td {
height: 20px;
}
diff -r e1b29f51d224 -r 16215fc22fbf webapp/src/main/webapp/jquery/jquery.digilib.regions.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Thu Jul 26 21:38:09 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Mon Oct 01 19:03:45 2012 +0200
@@ -41,18 +41,18 @@
var geom = null;
var buttons = {
- addregion : {
- onclick : "defineRegion",
+ defineurlregion : {
+ onclick : "defineURLRegion",
tooltip : "define a region",
icon : "addregion.png"
},
- delregion : {
- onclick : "removeRegion",
+ removeurlregion : {
+ onclick : "removeURLRegion",
tooltip : "delete the last region",
icon : "delregion.png"
},
- delallregions : {
- onclick : "removeAllRegions",
+ removeallurlregions : {
+ onclick : "removeAllURLRegions",
tooltip : "delete all regions",
icon : "delallregions.png"
},
@@ -69,6 +69,8 @@
};
var defaults = {
+ // are regions being edited?
+ 'editRegions' : false,
// are regions shown?
'isRegionVisible' : true,
// are region numbers shown?
@@ -77,22 +79,31 @@
'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)
- 'fullRegionLinks' : false,
+ // callback for click on region
+ 'onClickRegion' : null,
+ // turn any region into a clickable link to its detail view (DEPRECATED)
+ 'autoZoomOnClick' : false,
// css selector for area elements (must also be marked with class "dl-keep")
'htmlRegionsSelector' : 'map.dl-regioncontent area, map.dl-regioncontent a',
// buttonset of this plugin
- 'regionSet' : ['regions', 'addregion', 'delregion', 'delallregions', 'regioninfo', 'lessoptions'],
+ 'regionSet' : ['regions', 'defineurlregion', 'removeurlregion', 'removeallurlregions', 'regioninfo', 'lessoptions'],
// url param for regions
- 'rg' : null
+ 'rg' : null,
+ // region attributes to copy from HTML
+ 'regionAttributes' : {
+ 'id' :1,
+ 'href' :1,
+ 'title' :1,
+ 'target':1,
+ 'style' :1,
+ 'class' :1
+ }
};
var actions = {
// define a region interactively with two clicked points
- defineRegion : function(data) {
+ defineURLRegion : function(data) {
if (!data.settings.isRegionVisible) {
alert("Please turn on regions visibility!");
return;
@@ -108,7 +119,8 @@
var $overlay = $('');
$body.append($overlay);
bodyRect.adjustDiv($overlay);
- var $regionDiv = addRegionDiv(data, data.regions.length);
+ var attr = {'class' : cssPrefix+"regionURL"};
+ var $regionDiv = addRegionDiv(data, data.regionsURL, data.regionsURL.length, attr);
// mousedown handler: start sizing
var regionStart = function (evt) {
@@ -146,7 +158,7 @@
// clip region
clickRect.clipTo(scalerRect);
clickRect.adjustDiv($regionDiv);
- storeRegion(data, $regionDiv);
+ storeURLRegion(data, $regionDiv);
// fn.redisplay(data);
fn.highlightButtons(data, 'addregion', 0);
redisplay(data);
@@ -158,29 +170,30 @@
fn.highlightButtons(data, 'addregion', 1);
},
- // remove the last added region
- removeRegion : function (data) {
+ // remove the last added URL region
+ removeURLRegion : function (data) {
if (!data.settings.isRegionVisible) {
alert("Please turn on regions visibility!");
return;
}
- var region = data.regions.pop();
- if (region == null) return;
- var $regionDiv = region.$div;
+ var r = data.regionsURL.pop();
+ // no more URL regions to delete
+ if (r == null) return;
+ var $regionDiv = r.$div;
$regionDiv.remove();
redisplay(data);
},
- // remove the last added region
- removeAllRegions : function (data) {
+ // remove all manually added regions (defined through URL "rg" parameter)
+ removeAllURLRegions : function (data) {
if (!data.settings.isRegionVisible) {
alert("Please turn on regions visibility!");
return;
}
var cssPrefix = data.settings.cssPrefix;
- var $regions = data.$elem.find('div.'+cssPrefix+'region');
+ var $regions = data.$elem.find('div.'+cssPrefix+'regionURL');
$regions.remove();
- data.regions = [];
+ data.regionsURL = []; // remove only URL regions
redisplay(data);
},
@@ -235,17 +248,63 @@
});
$info.fadeIn();
fn.centerOnScreen(data, $info);
+ },
+
+ // show region coordinates in an edit line
+ showRegionCoords : function (data) {
+ var $elem = data.$elem;
+ var cssPrefix = data.settings.cssPrefix;
+ var infoselector = '#'+cssPrefix+'regionInfo';
+ if (fn.find(data, infoselector)) {
+ fn.withdraw($info);
+ return;
+ }
+ var html = '\
+
\
+ \
+ \
+
';
+ $info = $(html);
+ $info.appendTo($elem);
+ 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);
+ });
+ };
+ $info.bind('button').on('click.regioninfo', function () {
+ fn.withdraw($info);
+ });
+ $info.fadeIn();
+ fn.centerOnScreen(data, $info);
}
+
};
// store a region div
- var storeRegion = function (data, $regionDiv) {
- var regions = data.regions;
+ var storeURLRegion = function (data, $regionDiv) {
+ var regions = data.regionsURL;
var rect = geom.rectangle($regionDiv);
- var regionRect = data.imgTrafo.invtransform(rect);
- regionRect.$div = $regionDiv;
- regions.push(regionRect);
- console.debug("regions", data.regions, "regionRect", regionRect);
+ var rectangle = data.imgTrafo.invtransform(rect);
+ rectangle.$div = $regionDiv;
+ regions.push(rectangle);
+ console.debug("storeURLregion", data.regionsURL, "rectangle", rectangle);
+ };
+
+ // open region as detail
+ var openDetail = function (data, region) {
+ digilib.actions.zoomArea(data, region);
+ };
+
+ // make a coords string
+ var regionCoordsString = function (rect, sep) {
+ return [
+ fn.cropFloatStr(rect.x),
+ fn.cropFloatStr(rect.y),
+ fn.cropFloatStr(rect.width),
+ fn.cropFloatStr(rect.height)
+ ].join(sep);
};
// html for later insertion
@@ -253,14 +312,9 @@
var cssPrefix = data.settings.cssPrefix;
var $infoDiv = $('');
$infoDiv.append($('').text(''));
return $infoDiv;
@@ -270,54 +324,50 @@
var regionInfoSVG = function (data) {
var cssPrefix = data.settings.cssPrefix;
var $infoDiv = $('');
- $.each(data.regions, function(index, r) {
- if (r.fromHtml) return;
- var area = [
- fn.cropFloatStr(r.x),
- fn.cropFloatStr(r.y),
- fn.cropFloatStr(r.width),
- fn.cropFloatStr(r.height)].join(' ');
- $infoDiv.append($('').text('"' + area + '"'));
+ $.each(data.regionsURL, function(index, r) {
+ var coords = regionCoordsString(r, ' ');
+ $infoDiv.append($('').text('"' + coords + '"'));
});
return $infoDiv;
};
- // SVG-style
+ // CSV-style
var regionInfoCSV = function (data) {
var cssPrefix = data.settings.cssPrefix;
var $infoDiv = $('');
- $.each(data.regions, function(index, r) {
- if (r.fromHtml) return;
- var area = [
- fn.cropFloatStr(r.x),
- fn.cropFloatStr(r.y),
- fn.cropFloatStr(r.width),
- fn.cropFloatStr(r.height)].join(',');
- $infoDiv.append($('').text(index+1 + ": " + area));
+ $.each(data.regionsURL, function(index, r) {
+ var coords = regionCoordsString(r, ',');
+ $infoDiv.append($('').text(index+1 + ": " + coords));
});
return $infoDiv;
};
- // digilib-style
+
+ // digilib-style (h,w@x,y)
var regionInfoDigilib = function (data) {
var cssPrefix = data.settings.cssPrefix;
var $infoDiv = $('');
- $.each(data.regions, function(index, r) {
+ $.each(data.regionsURL, function(index, r) {
if (r.fromHtml) return;
- var area = r.toString();
- $infoDiv.append($('').text(area));
+ var coords = r.toString();
+ $infoDiv.append($('').text(coords));
});
return $infoDiv;
};
// add a region to data.$elem
- var addRegionDiv = function (data, index, attributes) {
+ var addRegionDiv = function (data, regions, index, attributes) {
var settings = data.settings;
var cssPrefix = settings.cssPrefix;
- var nr = index + 1; // we count regions from 1
- var $regionDiv = $('');
+ // var nr = regions.length; // we count regions from 1
+ var cls = cssPrefix+'region '+cssPrefix+'overlay';
+ if (attributes && attributes['class']) {
+ cls = cls+' '+attributes['class'];
+ delete attributes['class'];
+ }
+ var $regionDiv = $('');
data.$elem.append($regionDiv);
if (settings.showRegionNumbers) {
- var $regionLink = $(''+nr+'');
+ var $regionLink = $(''+index+'');
if (attributes) $regionLink.attr(attributes);
$regionDiv.append($regionLink);
}
@@ -334,24 +384,26 @@
$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) {
- //TODO: how about target?
- window.location = url;
- }
- if (evt.target !== $regionDiv.get(0)) {
- // this was not our event
- return;
- }
- if (settings.autoZoomRegionLinks) {
- // zoom to region
- digilib.actions.zoomArea(data, region);
- }
- });
+ // DEPRECATED
+ if (settings.autoZoomOnClick) {
+ if (settings.onClickRegion == null) settings.onClickRegion = openDetail;
}
+ // handle click events on div
+ var region = regions[index];
+ $regionDiv.on('click.dlRegion', function(evt) {
+ if (settings.fullRegionLinks && url) {
+ //TODO: how about target?
+ window.location = url;
+ }
+ if (evt.target !== $regionDiv.get(0)) {
+ // this was not our event
+ return;
+ }
+ if (typeof settings.onClickRegion === 'function') {
+ // execute callback
+ settings.onClickRegion(data, region);
+ }
+ });
return $regionDiv;
};
@@ -361,64 +413,71 @@
// check if div exists
if (region.$div != null) return region.$div;
// create and add div
- var $regionDiv = addRegionDiv(data, index, attributes);
+ var $regionDiv = addRegionDiv(data, regions, index, attributes);
region.$div = $regionDiv;
return $regionDiv;
};
// create regions from URL parameters
var createRegionsFromURL = function (data) {
+ var cssPrefix = data.settings.cssPrefix;
+ var attr = {'class' : cssPrefix+"regionURL"};
unpackRegions(data);
- var regions = data.regions;
- $.each(regions, function(i) {
- createRegionDiv(data, regions, i);
+ var regions = data.regionsURL;
+ $.each(regions, function(index, region) {
+ createRegionDiv(data, regions, index, attr);
});
};
// create regions from HTML
var createRegionsFromHTML = function (data) {
- var regions = data.regions;
+ var cssPrefix = data.settings.cssPrefix;
+ var regions = data.regionsHTML;
// regions are defined in "area" tags
var $content = data.$elem.find(data.settings.htmlRegionsSelector);
- console.debug("createRegionsFromHTML. elems: ", $content);
- $content.each(function(index, a) {
- var $a = $(a);
+ 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 = $a.attr('coords');
+ var coords = $area.attr('coords');
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 = {};
- for (var n in {'id':1, 'href':1, 'title':1, 'target':1, 'style':1}) {
- attributes[n] = $a.attr(n);
+ for (var n in data.settings.regionAttributes) {
+ attributes[n] = $area.attr(n);
+ }
+ // mark div as regionHTML
+ regionClass = cssPrefix+'regionHTML';
+ if (attributes['class']) {
+ attributes['class'] += ' ' + regionClass
+ } else {
+ attributes['class'] = regionClass
}
// create the div
var $regionDiv = createRegionDiv(data, regions, index, attributes);
- var $contents = $a.contents().clone();
+ var $contents = $area.contents().clone();
if (attributes.href != null) {
// wrap contents in a-tag
var $ca = $('');
$ca.append($contents);
// alt attribute is also content (BTW: area-tag has no content())
- $ca.append($a.attr('alt'));
+ $ca.append($area.attr('alt'));
$regionDiv.append($ca);
} else {
$regionDiv.append($contents);
// alt attribute is also content (BTW: area-tag has no content())
- $regionDiv.append($a.attr('alt'));
+ $regionDiv.append($area.attr('alt'));
}
});
};
// show a region on top of the scaler image
- var renderRegion = function (data, index, anim) {
+ var renderRegion = function (data, region, anim) {
if (!data.imgTrafo) return;
- var regions = data.regions;
var zoomArea = data.zoomArea;
- if (index > regions.length) return;
- var region = regions[index];
var $regionDiv = region.$div;
if (!$regionDiv) {
console.error("renderRegion: region has no $div", region);
@@ -449,16 +508,19 @@
// show regions
var renderRegions = function (data, anim) {
- for (var i = 0; i < data.regions.length ; i++) {
- renderRegion(data, i, anim);
- }
+ $.each(data.regionsHTML, function(index, region) {
+ renderRegion(data, region, anim);
+ });
+ $.each(data.regionsURL, function(index, region) {
+ renderRegion(data, region, anim);
+ });
};
var unpackRegions = function (data) {
// create regions from parameters
var rg = data.settings.rg;
if (rg == null) return;
- var regions = data.regions;
+ var regions = data.regionsURL;
var rs = rg.split(",");
for (var i = 0; i < rs.length; i++) {
var r = rs[i];
@@ -470,7 +532,7 @@
// pack regions array into a parameter string
var packRegions = function (data) {
- var regions = data.regions;
+ var regions = data.regionsURL;
if (!regions.length) {
data.settings.rg = null;
return;
@@ -478,19 +540,13 @@
var rg = '';
for (var i = 0; i < regions.length; i++) {
var region = regions[i];
- // skip regions from HTML
- if (region.fromHtml != null) continue;
if (rg) {
rg += ',';
}
- rg += [
- fn.cropFloatStr(region.x),
- fn.cropFloatStr(region.y),
- fn.cropFloatStr(region.width),
- fn.cropFloatStr(region.height)
- ].join('/');
+ rg += regionCoordsString(region, '/');
}
data.settings.rg = rg;
+ console.debug('pack regions:', rg);
};
// reload display after a region has been added or removed
@@ -559,16 +615,17 @@
var $elem = data.$elem;
var settings = data.settings;
var cssPrefix = data.settings.cssPrefix;
- // regions array
- data.regions = [];
+ // region arrays
+ data.regionsURL = [];
+ data.regionsHTML = [];
// install event handlers
var $data = $(data);
$data.on('setup', handleSetup);
$data.on('update', handleUpdate);
// install buttons
if (settings.processUserRegions) {
- // add "rg" to digilibParamNames
- settings.digilibParamNames.push('rg');
+ // add "rg" to digilibParamNames: TODO - check with settings.additionalParamNames?
+ // settings.digilibParamNames.push('rg');
if (digilib.plugins.buttons != null) {
installButtons(data);
}