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

comparison webapp/src/main/webapp/jquery/jquery.digilib.regions.js @ 1091:897268e47ce4

some events: newRegion and regionClick

author	hertzhaft
date	Fri, 12 Oct 2012 20:16:40 +0200
parents	16215fc22fbf
children	4964a1e252eb

comparison

equal deleted inserted replaced

-:436b59ff76fd
+:897268e47ce4
 };
 // affine geometry plugin
 var geom = null;
 var buttons = {
-defineurlregion : {
+defineregion : {
-onclick : "defineURLRegion",
+onclick : "defineUserRegion",
 tooltip : "define a region",
 icon : "addregion.png"
 },
-removeurlregion : {
+removeregion : {
-onclick : "removeURLRegion",
+onclick : "removeUserRegion",
-tooltip : "delete the last region",
+tooltip : "delete the last user defined region",
 icon : "delregion.png"
 },
-removeallurlregions : {
+removeallregions : {
-onclick : "removeAllURLRegions",
+onclick : "removeAllUserRegions",
-tooltip : "delete all regions",
+tooltip : "delete all user defined regions",
 icon : "delallregions.png"
 },
 regions : {
 onclick : "toggleRegions",
 tooltip : "show or hide regions",
 icon : "regions.png"
 },
 regioninfo : {
 onclick : "showRegionInfo",
-tooltip : "show information about regions",
+tooltip : "show information about user defined regions",
 icon : "regioninfo.png"
 }
 };
 var defaults = {
 'processHtmlRegions' : false,
 // region defined by users and in the URL
 'processUserRegions' : true,
 // callback for click on region
 'onClickRegion' : null,
+// callback when new user region is defined
+'onNewRegion' : 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")
+// css selector for area/a elements (must also be marked with class "dl-keep")
 'htmlRegionsSelector' : 'map.dl-regioncontent area, map.dl-regioncontent a',
 // buttonset of this plugin
-'regionSet' : ['regions', 'defineurlregion', 'removeurlregion', 'removeallurlregions', 'regioninfo', 'lessoptions'],
+'regionSet' : ['regions', 'defineregion', 'removeregion', 'removeallregions', 'regioninfo', 'lessoptions'],
 // url param for regions
 'rg' : null,
 // region attributes to copy from HTML
 'regionAttributes' : {
 'id'    :1,
 };
 var actions = {
 // define a region interactively with two clicked points
-defineURLRegion : function(data) {
+defineUserRegion : function(data) {
 if (!data.settings.isRegionVisible) {
 alert("Please turn on regions visibility!");
 return;
 }
 var cssPrefix = data.settings.cssPrefix;
 // 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 attr = {'class' : cssPrefix+"regionURL"};
-var $regionDiv = addRegionDiv(data, data.regionsURL, data.regionsURL.length, attr);
+var $regionDiv = addRegionDiv(data, data.userRegions, data.userRegions.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);
-storeURLRegion(data, $regionDiv);
+var region = storeUserRegion(data, $regionDiv);
 // fn.redisplay(data);
-fn.highlightButtons(data, 'addregion', 0);
+fn.highlightButtons(data, 'defineregion', 0);
 redisplay(data);
+$(data).trigger('newRegion', region);
 return false;
 };
 // bind start zoom handler
 $overlay.one('mousedown.dlRegion', regionStart);
-fn.highlightButtons(data, 'addregion', 1);
+fn.highlightButtons(data, 'defineregion', 1);
 },
 // remove the last added URL region
-removeURLRegion : function (data) {
+removeUserRegion : function (data) {
 if (!data.settings.isRegionVisible) {
 alert("Please turn on regions visibility!");
 return;
 }
-var r = data.regionsURL.pop();
+var r = data.userRegions.pop();
 // no more URL regions to delete
 if (r == null) return;
 var $regionDiv = r.$div;
 $regionDiv.remove();
 redisplay(data);
 },
 // remove all manually added regions (defined through URL "rg" parameter)
-removeAllURLRegions : function (data) {
+removeAllUserRegions : 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+'regionURL');
 $regions.remove();
-data.regionsURL = []; // remove only URL regions
+data.userRegions = []; // remove only URL regions
 redisplay(data);
 },
 // show/hide regions
 toggleRegions : function (data) {
 });
 $info.fadeIn();
 fn.centerOnScreen(data, $info);
 },
-// show region coordinates in an edit line
+// display region coordinates in an edit line
-showRegionCoords : function (data) {
+showRegionCoords : function (data, region) {
 var $elem = data.$elem;
 var cssPrefix = data.settings.cssPrefix;
-var infoselector = '#'+cssPrefix+'regionInfo';
+// var infoselector = '#'+cssPrefix+'regionInfo';
-if (fn.find(data, infoselector)) {
+// var $info = fn.find(data, infoselector);
-fn.withdraw($info);
+var coords = regionCoordsString(region, ',');
-return;
-}
 var html = '\
 <div id="'+cssPrefix+'regionInfo" class="'+cssPrefix+'keep '+cssPrefix+'regionInfo">\
-<input name="coords" type="text" size="30" maxlength="40"/>\
+<input name="coords" type="text" size="30" maxlength="40" value="'+coords+'"/>\
-<input type="button" name="close" />\
 </div>';
-$info = $(html);
+var $info = $(html);
 $info.appendTo($elem);
-var bind = function(name) {
+$input = $info.find('input');
-$info.find('.'+name).on('click.regioninfo', function () {
+$input.on('focus.regioninfo', function (event) {
-$info.find('div.'+cssPrefix+'info').hide();
+this.select();
-$info.find('div.'+cssPrefix+name).show();
+});
-fn.centerOnScreen(data, $info);
+$input.on('blur.regioninfo', function (event) {
-});
-};
-$info.bind('button').on('click.regioninfo', function () {
 fn.withdraw($info);
+return false;
 });
+$input.on('keypress.regioninfo', function (event) {
+fn.withdraw($info);
+return false;
+});
+$input.prop("readonly",true);
 $info.fadeIn();
 fn.centerOnScreen(data, $info);
-}
+$input.focus();
+console.debug('showRegionCoords', coords);
+}
 };
 // store a region div
-var storeURLRegion = function (data, $regionDiv) {
+var storeUserRegion = function (data, $regionDiv) {
-var regions = data.regionsURL;
+var regions = data.userRegions;
 var rect = geom.rectangle($regionDiv);
 var rectangle = data.imgTrafo.invtransform(rect);
 rectangle.$div = $regionDiv;
 regions.push(rectangle);
-console.debug("storeURLregion", data.regionsURL, "rectangle", rectangle);
+console.debug("storeUserRegion", data.userRegions, "rectangle", rectangle);
+return rectangle;
 };
 // open region as detail
 var openDetail = function (data, region) {
 digilib.actions.zoomArea(data, region);
 };
 // make a coords string
 var regionCoordsString = function (rect, sep) {
+if (sep == null) sep = ','; // comma as default separator
 return [
 fn.cropFloatStr(rect.x),
 fn.cropFloatStr(rect.y),
 fn.cropFloatStr(rect.width),
 fn.cropFloatStr(rect.height)
 // 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.regionsURL, function(index, r) {
+$.each(data.userRegions, function(index, r) {
 var coords = regionCoordsString(r, ',');
 $infoDiv.append($('<div/>').text('<area coords="' + coords + '"/>'));
 });
 $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.regionsURL, function(index, r) {
+$.each(data.userRegions, function(index, r) {
 var coords = regionCoordsString(r, ' ');
 $infoDiv.append($('<div/>').text('"' + coords + '"'));
 });
 return $infoDiv;
 };
 // CSV-style
 var regionInfoCSV = function (data) {
 var cssPrefix = data.settings.cssPrefix;
 var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'csv"/>');
-$.each(data.regionsURL, function(index, r) {
+$.each(data.userRegions, function(index, r) {
 var coords = regionCoordsString(r, ',');
 $infoDiv.append($('<div/>').text(index+1 + ": " + coords));
 });
 return $infoDiv;
 };
 // 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.regionsURL, function(index, r) {
+$.each(data.userRegions, function(index, r) {
 if (r.fromHtml) return;
 var coords = r.toString();
 $infoDiv.append($('<div/>').text(coords));
 });
 return $infoDiv;
 if (settings.showRegionNumbers) {
 var $regionLink = $('<a class="'+cssPrefix+'regionnumber">'+index+'</a>');
 if (attributes) $regionLink.attr(attributes);
 $regionDiv.append($regionLink);
 }
-var url = null;
 if (attributes) {
 // copy attributes to div except href
 if (attributes.href) {
-url = attributes.href;
+region.href = attributes.href;
 // copy attributes
 var attrs = $.extend({}, attributes);
 delete attrs.href;
 $regionDiv.attr(attrs);
 } else {
 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) {
+$(data).trigger('regionClick', region);
-//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;
 };
 // create a region div from the data.regions array
 // create regions from URL parameters
 var createRegionsFromURL = function (data) {
 var cssPrefix = data.settings.cssPrefix;
 var attr = {'class' : cssPrefix+"regionURL"};
 unpackRegions(data);
-var regions = data.regionsURL;
+var regions = data.userRegions;
 $.each(regions, function(index, region) {
 createRegionDiv(data, regions, index, attr);
 });
 };
 // create regions from HTML
 var createRegionsFromHTML = function (data) {
 var cssPrefix = data.settings.cssPrefix;
-var regions = data.regionsHTML;
+var regions = data.htmlRegions;
 // regions are defined in "area" tags
 var $content = data.$elem.find(data.settings.htmlRegionsSelector);
 console.debug("createRegionsFromHTML. Number of elems: ", $content.length);
 $content.each(function(index, area) {
 var $area = $(area);
 }
 };
 // show regions
 var renderRegions = function (data, anim) {
-$.each(data.regionsHTML, function(index, region) {
+$.each(data.htmlRegions, function(index, region) {
 renderRegion(data, region, anim);
 });
-$.each(data.regionsURL, function(index, region) {
+$.each(data.userRegions, function(index, region) {
 renderRegion(data, region, anim);
 });
 };
+// read region data from URL parameters
 var unpackRegions = function (data) {
-// create regions from parameters
 var rg = data.settings.rg;
 if (rg == null) return;
-var regions = data.regionsURL;
+var regions = data.userRegions;
 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]);
 regions.push(rect);
 }
 };
-// pack regions array into a parameter string
+// pack user regions array into a URL parameter string
 var packRegions = function (data) {
-var regions = data.regionsURL;
+var regions = data.userRegions;
 if (!regions.length) {
 data.settings.rg = null;
 return;
 }
 var rg = '';
 var redisplay = function (data) {
 if (data.settings.processUserRegions) {
 packRegions(data);
 }
 fn.redisplay(data);
+};
+// event handler, gets called when a newRegion event is triggered
+var handleNewRegion = function (evt, region) {
+var data = this;
+var settings = data.settings;
+console.debug("regions: handleNewRegion", region);
+if (typeof settings.onNewRegion === 'function') {
+// execute callback
+return settings.onNewRegion(data, region);
+}
+if (typeof settings.onNewRegion === 'string') {
+// execute action
+return actions[settings.onNewRegion](data, region);
+}
+};
+// event handler, gets called when a regionClick event is triggered
+var handleRegionClick = function (evt, region) {
+var data = this;
+var settings = data.settings;
+console.debug("regions: handleRegionClick", region);
+if (region.href) {
+// follow the href attribute of the region area
+window.location = region.href; //TODO: how about target?
+}
+if (typeof settings.onClickRegion === 'function') {
+// execute callback
+return settings.onClickRegion(data, region);
+}
+if (typeof settings.onClickRegion === 'string') {
+// execute action
+return actions[settings.onClickRegion](data, region);
+}
 };
 // event handler, reads region parameter and creates region divs
 var handleSetup = function (evt) {
 var data = this;
 console.debug('initialising regions plugin. data:', data);
 var $elem = data.$elem;
 var settings = data.settings;
 var cssPrefix = data.settings.cssPrefix;
 // region arrays
-data.regionsURL = [];
+data.userRegions = [];
-data.regionsHTML = [];
+data.htmlRegions = [];
 // install event handlers
 var $data = $(data);
 $data.on('setup', handleSetup);
 $data.on('update', handleUpdate);
+$data.on('newRegion', handleNewRegion);
+$data.on('regionClick', handleRegionClick);
 // install buttons
 if (settings.processUserRegions) {
-// add "rg" to digilibParamNames: TODO - check with settings.additionalParamNames?
+// add "rg" to digilibParamNames
 // settings.digilibParamNames.push('rg');
+// TODO: this leads double params, because
+// settings.additionalParamNames is created earlier than this plugin's init() action
 if (digilib.plugins.buttons != null) {
 installButtons(data);
 }
 }
 };