Mercurial > hg > digilib-old
diff webapp/src/main/webapp/jquery/jquery.digilib.regions.js @ 1137:3b5968aeefac
new region icons; autozoom on click
author | hertzhaft |
---|---|
date | Fri, 16 Nov 2012 18:26:55 +0100 |
parents | 0a01d5cc66fe |
children | bbb09797d7fc |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Fri Nov 16 16:27:23 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Fri Nov 16 18:26:55 2012 +0100 @@ -73,27 +73,22 @@ removeallregions : { onclick : "removeAllUserRegions", tooltip : "delete all user defined regions", - icon : "delallregions.png" + icon : "delregions.png" }, regions : { onclick : "toggleRegions", tooltip : "show or hide regions", - icon : "regions.png" + icon : "showregions.png" }, findcoords : { onclick : "findCoords", tooltip : "find a region by entering its relative coordinates", - icon : "regions.png" + icon : "findcoords.png" }, finddata : { onclick : "findData", tooltip : "find a region by entering text", - icon : "regions.png" - }, - regioninfo : { - onclick : "showRegionInfo", - tooltip : "show information about user defined regions", - icon : "regioninfo.png" + icon : "findregion.png" } }; @@ -104,6 +99,8 @@ 'showRegionNumbers' : true, // default width for region when only point is given 'regionWidth' : 0.005, + // zoomfactor for displaying larger area around region (for autoZoomOnClick) + 'regionAutoZoomFactor' : 3, // is there region content in the page? 'processHtmlRegions' : false, // region defined by users and in the URL @@ -112,16 +109,16 @@ '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, + // turn any region into a clickable link to its detail view + 'autoZoomOnClick' : true, // zoom in when displaying the found region 'autoZoomOnFind' : false, // css selector for area/a elements (must also be marked with class "dl-keep") 'areaSelector' : 'map.dl-regioncontent area, map.dl-regioncontent a', // general buttonset of this plugin - 'regionSet' : ['regions', 'findcoords', 'finddata', 'lessoptions'], + 'regionSet' : ['regions', 'finddata', 'findcoords', 'lessoptions'], // buttonset for region editing by user - 'userRegionSet' : ['defineregion', 'removeregion', 'removeallregions', 'regioninfo'], + 'userRegionSet' : ['defineregion', 'removeregion', 'removeallregions'], // url param for regions 'rg' : null, // array with region data @@ -187,7 +184,7 @@ selector = 'div.'+CSS+'regionURL'; var $region = data.$elem.find(selector).last(); if ($region.length > 0) { - $regionDiv.remove(); + $region.remove(); redisplay(data); return; } @@ -214,53 +211,6 @@ renderRegions(data, 1); }, - // show region info in a window - showRegionInfo : function (data) { - var $elem = data.$elem; - var infoSelector = '#'+CSS+'regionInfo'; - if (fn.isOnScreen(data, infoSelector)) return; // already onscreen - var $regions = getRegions(data, 'regionURL'); - if ($regions.length == 0) return; // no user regions available - var html = '\ - <div id="'+CSS+'regionInfo" class="'+CSS+'keep '+CSS+'regionInfo">\ - <table class="'+CSS+'infoheader">\ - <tr>\ - <td class="'+CSS+'infobutton html">HTML</td>\ - <td class="'+CSS+'infobutton svgattr">SVG</td>\ - <td class="'+CSS+'infobutton csv">CSV</td>\ - <td class="'+CSS+'infobutton digilib">Digilib</td>\ - <td class="'+CSS+'infobutton x">X</td>\ - </tr>\ - </table>\ - </div>'; - $info = $(html); - $info.appendTo($elem); - $info.append(regionInfoHTML(data, $regions)); - $info.append(regionInfoSVG(data, $regions)); - $info.append(regionInfoCSV(data, $regions)); - $info.append(regionInfoDigilib(data, $regions)); - var bind = function (name) { - $info.find('.'+name).on('click.regioninfo', function () { - $info.find('div.'+CSS+'info').hide(); - $info.find('div.'+CSS+name).show(); - fn.centerOnScreen(data, $info); - return false; - }); - }; - bind('html'); - bind('svgattr'); - bind('csv'); - bind('digilib'); - $info.on('click.regioninfo', function () { - fn.withdraw($info); - }); - $info.find('.x').on('click.regioninfo', function () { - fn.withdraw($info); - }); - $info.fadeIn(); - fn.centerOnScreen(data, $info); - }, - // display region coordinates in a selected edit line (for copying) showRegionCoords : function (data, $regionDiv) { var $elem = data.$elem; @@ -400,7 +350,7 @@ var filterOptions = function (text) { if (!text) { // not text, display all options, select first (empty) - $options.show(); + // $options.show(); $select.prop("selectedIndex", 0); return; } @@ -633,52 +583,6 @@ return sorted.join(''); }; - // html for later insertion - var regionInfoHTML = function (data, $regions) { - var $infoDiv = $('<div class="'+CSS+'info '+CSS+'html"/>'); - $infoDiv.append($('<div/>').text('<map class="'+CSS+'keep '+CSS+'regioncontent">')); - $regions.each(function (index, region) { - var rect = $(region).data('rect'); - var coords = packCoords(rect, ','); - $infoDiv.append($('<div/>').text('<area coords="' + coords + '"/>')); - }); - $infoDiv.append($('<div/>').text('</map>')); - return $infoDiv; - }; - - // SVG-style - var regionInfoSVG = function (data, $regions) { - var $infoDiv = $('<div class="'+CSS+'info '+CSS+'svgattr"/>'); - $regions.each(function (index, region) { - var rect = $(region).data('rect'); - var coords = packCoords(rect, ','); - $infoDiv.append($('<div/>').text('"' + coords + '"')); - }); - return $infoDiv; - }; - - // CSV-style - var regionInfoCSV = function (data, $regions) { - var $infoDiv = $('<div class="'+CSS+'info '+CSS+'csv"/>'); - $regions.each(function (index, region) { - var rect = $(region).data('rect'); - var coords = packCoords(rect, ','); - $infoDiv.append($('<div/>').text(index+1 + ": " + coords)); - }); - return $infoDiv; - }; - - // digilib-style (h,w@x,y) - var regionInfoDigilib = function (data, $regions) { - var $infoDiv = $('<div class="'+CSS+'info '+CSS+'digilib"/>'); - $regions.each(function (index, region) { - var rect = $(region).data('rect'); - var coords = packCoords(rect, ','); - $infoDiv.append($('<div/>').text(coords)); - }); - return $infoDiv; - }; - // show a region on top of the scaler image var renderRegion = function (data, $regionDiv, anim) { if (!data.imgTrafo) return; @@ -748,9 +652,19 @@ console.debug('pack regions:', rg); }; - // zoom to the region coordinates - var zoomToRegion = function (data, rect) { - digilib.actions.zoomArea(data, rect); + // zoom in, displaying the region in the middle of the screen + var zoomToRegion = function (data, $regionDiv) { + var settings = data.settings; + var rect = $regionDiv.data('rect'); + var za = rect.copy(); + var factor = settings.regionAutoZoomFactor; + za.width *= factor; + za.height *= factor; + // var screen = fn.getFullscreenRect(data); + za.setProportion(1, true); // avoid extreme zoomArea proportions + za.setCenter(rect.getCenter()).stayInside(FULL_AREA); + fn.setZoomArea(data, za); + fn.redisplay(data); }; // reload display after a region has been added or removed @@ -868,7 +782,7 @@ $data.on('update', handleUpdate); $data.on('newRegion', handleNewRegion); $data.on('regionClick', handleRegionClick); - // default: autoZoom to region, when clicked - DEPRECATED + // default: autoZoom to region, when clicked if (settings.autoZoomOnClick && settings.onClickRegion == null) { settings.onClickRegion = zoomToRegion; }