digilib-old: webapp/src/main/webapp/jquery/jquery.digilib.regions.js comparison

comparison webapp/src/main/webapp/jquery/jquery.digilib.regions.js @ 1088:16215fc22fbf

better separation of HTML and user defined regions

author	hertzhaft
date	Mon, 01 Oct 2012 19:03:45 +0200
parents	a45894a81e40
children	897268e47ce4

comparison

equal deleted inserted replaced

-:e1b29f51d224
+:16215fc22fbf
 };
 // affine geometry plugin
 var geom = null;
 var buttons = {
-addregion : {
+defineurlregion : {
-onclick : "defineRegion",
+onclick : "defineURLRegion",
 tooltip : "define a region",
 icon : "addregion.png"
 },
-delregion : {
+removeurlregion : {
-onclick : "removeRegion",
+onclick : "removeURLRegion",
 tooltip : "delete the last region",
 icon : "delregion.png"
 },
-delallregions : {
+removeallurlregions : {
-onclick : "removeAllRegions",
+onclick : "removeAllURLRegions",
 tooltip : "delete all regions",
 icon : "delallregions.png"
 },
 regions : {
 onclick : "toggleRegions",
 icon : "regioninfo.png"
 }
 };
 var defaults = {
+// are regions being edited?
+'editRegions' : false,
 // are regions shown?
 'isRegionVisible' : true,
 // are region numbers shown?
 'showRegionNumbers' : true,
 // is there region content in the page?
 'processHtmlRegions' : false,
 // region defined by users and in the URL
 'processUserRegions' : true,
-// turn any region into a clickable link to its detail view
+// callback for click on region
-'autoZoomRegionLinks' : false,
+'onClickRegion' : null,
-// use full region as klickable link (instead of only number and text)
+// turn any region into a clickable link to its detail view (DEPRECATED)
-'fullRegionLinks' : false,
+'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;
 }
 var cssPrefix = data.settings.cssPrefix;
 var pt1, pt2;
 // overlay prevents other elements from reacting to mouse events
 var $overlay = $('<div class="'+cssPrefix+'overlay" style="position:absolute"/>');
 $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) {
 pt1 = geom.position(evt);
 // setup and show zoom div
 $overlay.off("mouseup.dlRegion", regionEnd);
 $overlay.remove();
 // clip region
 clickRect.clipTo(scalerRect);
 clickRect.adjustDiv($regionDiv);
-storeRegion(data, $regionDiv);
+storeURLRegion(data, $regionDiv);
 // fn.redisplay(data);
 fn.highlightButtons(data, 'addregion', 0);
 redisplay(data);
 return false;
 };
 // bind start zoom handler
 $overlay.one('mousedown.dlRegion', regionStart);
 fn.highlightButtons(data, 'addregion', 1);
 },
-// remove the last added region
+// remove the last added URL region
-removeRegion : function (data) {
+removeURLRegion : function (data) {
 if (!data.settings.isRegionVisible) {
 alert("Please turn on regions visibility!");
 return;
 }
-var region = data.regions.pop();
+var r = data.regionsURL.pop();
-if (region == null) return;
+// no more URL regions to delete
-var $regionDiv = region.$div;
+if (r == null) return;
+var $regionDiv = r.$div;
 $regionDiv.remove();
 redisplay(data);
 },
-// remove the last added region
+// remove all manually added regions (defined through URL "rg" parameter)
-removeAllRegions : function (data) {
+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);
 },
 // show/hide regions
 toggleRegions : function (data) {
 $info.find('.x').on('click.regioninfo', function () {
 fn.withdraw($info);
 });
 $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 = '\
+<div id="'+cssPrefix+'regionInfo" class="'+cssPrefix+'keep '+cssPrefix+'regionInfo">\
+<input name="coords" type="text" size="30" maxlength="40"/>\
+<input type="button" name="close" />\
+</div>';
+$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 storeURLRegion = function (data, $regionDiv) {
-var regions = data.regions;
+var regions = data.regionsURL;
 var rect = geom.rectangle($regionDiv);
-var regionRect = data.imgTrafo.invtransform(rect);
+var rectangle = data.imgTrafo.invtransform(rect);
-regionRect.$div = $regionDiv;
+rectangle.$div = $regionDiv;
-regions.push(regionRect);
+regions.push(rectangle);
-console.debug("regions", data.regions, "regionRect", regionRect);
+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
 var regionInfoHTML = function (data) {
 var cssPrefix = data.settings.cssPrefix;
 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'html"/>');
 $infoDiv.append($('<div/>').text('<map class="'+cssPrefix+'keep '+cssPrefix+'regioncontent">'));
-$.each(data.regions, function(index, r) {
+$.each(data.regionsURL, function(index, r) {
-if (r.fromHtml) return;
+var coords = regionCoordsString(r, ',');
-var area = [
+$infoDiv.append($('<div/>').text('<area coords="' + coords + '"/>'));
-fn.cropFloatStr(r.x),
-fn.cropFloatStr(r.y),
-fn.cropFloatStr(r.width),
-fn.cropFloatStr(r.height)].join(',');
-$infoDiv.append($('<div/>').text('<area coords="' + area + '"/>'));
 });
 $infoDiv.append($('<div/>').text('</map>'));
 return $infoDiv;
 };
 // SVG-style
 var regionInfoSVG = function (data) {
 var cssPrefix = data.settings.cssPrefix;
 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'svgattr"/>');
-$.each(data.regions, function(index, r) {
+$.each(data.regionsURL, function(index, r) {
-if (r.fromHtml) return;
+var coords = regionCoordsString(r, ' ');
-var area = [
+$infoDiv.append($('<div/>').text('"' + coords + '"'));
-fn.cropFloatStr(r.x),
-fn.cropFloatStr(r.y),
-fn.cropFloatStr(r.width),
-fn.cropFloatStr(r.height)].join(' ');
-$infoDiv.append($('<div/>').text('"' + area + '"'));
 });
 return $infoDiv;
 };
-// SVG-style
+// CSV-style
 var regionInfoCSV = function (data) {
 var cssPrefix = data.settings.cssPrefix;
 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'csv"/>');
-$.each(data.regions, function(index, r) {
+$.each(data.regionsURL, function(index, r) {
-if (r.fromHtml) return;
+var coords = regionCoordsString(r, ',');
-var area = [
+$infoDiv.append($('<div/>').text(index+1 + ": " + coords));
-fn.cropFloatStr(r.x),
-fn.cropFloatStr(r.y),
-fn.cropFloatStr(r.width),
-fn.cropFloatStr(r.height)].join(',');
-$infoDiv.append($('<div/>').text(index+1 + ": " + area));
 });
 return $infoDiv;
 };
-// digilib-style
+// digilib-style (h,w@x,y)
 var regionInfoDigilib = function (data) {
 var cssPrefix = data.settings.cssPrefix;
 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'digilib"/>');
-$.each(data.regions, function(index, r) {
+$.each(data.regionsURL, function(index, r) {
 if (r.fromHtml) return;
-var area = r.toString();
+var coords = r.toString();
-$infoDiv.append($('<div/>').text(area));
+$infoDiv.append($('<div/>').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 nr = regions.length; // we count regions from 1
-var $regionDiv = $('<div class="'+cssPrefix+'region '+cssPrefix+'overlay" style="display:none"/>');
+var cls = cssPrefix+'region '+cssPrefix+'overlay';
+if (attributes && attributes['class']) {
+cls = cls+' '+attributes['class'];
+delete attributes['class'];
+}
+var $regionDiv = $('<div class="'+cls+'" style="display:none"/>');
 data.$elem.append($regionDiv);
 if (settings.showRegionNumbers) {
-var $regionLink = $('<a class="'+cssPrefix+'regionnumber">'+nr+'</a>');
+var $regionLink = $('<a class="'+cssPrefix+'regionnumber">'+index+'</a>');
 if (attributes) $regionLink.attr(attributes);
 $regionDiv.append($regionLink);
 }
 var url = null;
 if (attributes) {
 $regionDiv.attr(attrs);
 } else {
 $regionDiv.attr(attributes);
 }
 }
-if (settings.autoZoomRegionLinks || settings.fullRegionLinks) {
+// DEPRECATED
-// handle click events on div
+if (settings.autoZoomOnClick) {
-var region = data.regions[index];
+if (settings.onClickRegion == null) settings.onClickRegion = openDetail;
-$regionDiv.on('click.dlRegion', function(evt) {
+}
-if (settings.fullRegionLinks && url) {
+// handle click events on div
-//TODO: how about target?
+var region = regions[index];
-window.location = url;
+$regionDiv.on('click.dlRegion', function(evt) {
-}
+if (settings.fullRegionLinks && url) {
-if (evt.target !== $regionDiv.get(0)) {
+//TODO: how about target?
-// this was not our event
+window.location = url;
-return;
+}
-}
+if (evt.target !== $regionDiv.get(0)) {
-if (settings.autoZoomRegionLinks) {
+// this was not our event
-// zoom to region
+return;
-digilib.actions.zoomArea(data, region);
+}
-}
+if (typeof settings.onClickRegion === 'function') {
-});
+// execute callback
-}
+settings.onClickRegion(data, region);
+}
+});
 return $regionDiv;
 };
 // 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 $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;
+var regions = data.regionsURL;
-$.each(regions, function(i) {
+$.each(regions, function(index, region) {
-createRegionDiv(data, regions, i);
+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);
+console.debug("createRegionsFromHTML. Number of elems: ", $content.length);
-$content.each(function(index, a) {
+$content.each(function(index, area) {
-var $a = $(a);
+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}) {
+for (var n in data.settings.regionAttributes) {
-attributes[n] = $a.attr(n);
+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 = $('<a href="'+attributes.href+'"/>');
 $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);
 // alert("renderRegion: region has no $div to show");
 return;
 }
 };
 // show regions
 var renderRegions = function (data, anim) {
-for (var i = 0; i < data.regions.length ; i++) {
+$.each(data.regionsHTML, function(index, region) {
-renderRegion(data, i, anim);
+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];
 var pos = r.split("/", 4);
 var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
 }
 };
 // 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;
 }
 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 += [
+rg += regionCoordsString(region, '/');
-fn.cropFloatStr(region.x),
-fn.cropFloatStr(region.y),
-fn.cropFloatStr(region.width),
-fn.cropFloatStr(region.height)
-].join('/');
 }
 data.settings.rg = rg;
+console.debug('pack regions:', rg);
 };
 // reload display after a region has been added or removed
 var redisplay = function (data) {
 if (data.settings.processUserRegions) {
 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
+// region arrays
-data.regions = [];
+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
+// add "rg" to digilibParamNames: TODO - check with settings.additionalParamNames?
-settings.digilibParamNames.push('rg');
+// settings.digilibParamNames.push('rg');
 if (digilib.plugins.buttons != null) {
 installButtons(data);
 }
 }
 };