# HG changeset patch # User hertzhaft # Date 1333216613 -7200 # Node ID d9abeaa44c497bdea42567d12b84c8402a24a3ce # Parent c7fd2f23995362c0a72de38735c17d42017ba61f better region info diff -r c7fd2f239953 -r d9abeaa44c49 webapp/src/main/webapp/jquery/jquery.digilib.css --- a/webapp/src/main/webapp/jquery/jquery.digilib.css Sat Mar 31 15:27:20 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.css Sat Mar 31 19:56:53 2012 +0200 @@ -104,26 +104,6 @@ display: none; } -div.dl-digilib div.dl-regionInfo { - display: none; - position: absolute; - top: 100px; - padding: 10px; - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 12px; - border: 2px solid lightcyan; - color: black; - background-color: lightgrey; - z-index: 1000; -} - -div.dl-digilib div.dl-regionInfo a { - color: white; - text-decoration: none; - font-size: 11px; - font-weight: bold; -} - div.dl-digilib #dl-calibration { background: url('img/blue.png'); position: absolute; @@ -221,51 +201,44 @@ div.dl-digilib div.dl-slider { border: 1px solid lightcyan; margin: 30px; - z-index: 9999; + z-index: 100; height: 6px; } -div.dl-digilib div.dl-panel { +div.dl-digilib div.dl-regionInfo { + display: none; position: absolute; - width: 500px; - text-align: center; - background: url('img/blue.png'); - border: 1px solid lightcyan; - display: none; - } - -div.dl-digilib div.dl-sliderhandle { - border: 1px solid lightcyan; - background: url('img/blue.png'); - position: absolute; - z-index: 10000; - } - -div.dl-digilib div.dl-sliderlabel, -div.dl-digilib div.dl-slidernumber { - position: absolute; - padding: 2px; + overflow: visible; + padding: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; - color: white; - } - -div.dl-infobutton { - background-color: white; + border: 2px solid lightcyan; + color: black; + background-color: lightgrey; + width: 300px; + z-index: 100; +} + +div.dl-digilib div.dl-regionInfo a { + color: white; + text-decoration: none; + font-size: 11px; + font-weight: bold; + width: 300px; +} + +.dl-infobutton { + background-color: lightcyan; color: grey; padding: 0px 4px; - margin: 0px 2px; - float: left; } div.dl-info { - clear: both; display: none; margin: 10px; } div.dl-infoheader { - width: 300px; margin-bottom: 20px; } diff -r c7fd2f239953 -r d9abeaa44c49 webapp/src/main/webapp/jquery/jquery.digilib.js --- a/webapp/src/main/webapp/jquery/jquery.digilib.js Sat Mar 31 15:27:20 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.js Sat Mar 31 19:56:53 2012 +0200 @@ -38,7 +38,7 @@ var defaults = { // version of this script - 'version' : 'jquery.digilib.js 2.1.6a3', + 'version' : 'jquery.digilib.js 2.1.6a4', // logo url 'logoUrl' : 'img/digilib-logo-text1.png', // homepage url (behind logo) @@ -1602,7 +1602,7 @@ var r = geom.rectangle($div); var s = fn.getFullscreenRect(data); r.setCenter(s.getCenter()); - r.adjustDiv($div); + r.getPosition().adjustDiv($div); }; /** find an element in digilib $elem diff -r c7fd2f239953 -r d9abeaa44c49 webapp/src/main/webapp/jquery/jquery.digilib.regions.js --- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Sat Mar 31 15:27:20 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Sat Mar 31 19:56:53 2012 +0200 @@ -73,7 +73,7 @@ var actions = { // define a region interactively with two clicked points - "defineRegion" : function(data) { + defineRegion : function(data) { if (!data.settings.isRegionVisible) { alert("Please turn on regions visibility!"); return; @@ -140,7 +140,7 @@ }, // remove the last added region - "removeRegion" : function (data) { + removeRegion : function (data) { if (!data.settings.isRegionVisible) { alert("Please turn on regions visibility!"); return; @@ -153,7 +153,7 @@ }, // show/hide regions - "toggleRegions" : function (data) { + toggleRegions : function (data) { var show = !data.settings.isRegionVisible; data.settings.isRegionVisible = show; fn.highlightButtons(data, 'regions', show); @@ -161,41 +161,48 @@ }, // show region info in a window - "showRegionInfo" : function (data) { + showRegionInfo : function (data) { var $elem = data.$elem; var cssPrefix = data.settings.cssPrefix; - var $info = $elem.find('#'+cssPrefix+'regionInfo'); - if ($info.length > 0) { + var infoselector = '#'+cssPrefix+'regionInfo'; + if (fn.find(data, infoselector)) { fn.withdraw($info); return; } var html = '\
\ -
\ -
HTML
\ -
SVG
\ -
Digilib
\ -
X
\ -
\ + \ + \ + \ + \ + \ + \ + \ + \ +
HTMLSVGCSVDigilibX
\
'; $info = $(html); $info.appendTo($elem); $info.append(regionInfoHTML(data)); $info.append(regionInfoSVG(data)); + $info.append(regionInfoCSV(data)); $info.append(regionInfoDigilib(data)); var bind = function(name) { - $info.find('div.'+name).on('click.regioninfo', function () { + $info.find('.'+name).on('click.regioninfo', function () { $info.find('div.'+cssPrefix+'info').hide(); $info.find('div.'+cssPrefix+name).show(); + fn.centerOnScreen(data, $info); }); }; bind('html'); bind('svgattr'); + bind('csv'); bind('digilib'); $info.find('.x').on('click.regioninfo', function () { fn.withdraw($info); }); $info.fadeIn(); + fn.centerOnScreen(data, $info); } }; @@ -241,6 +248,20 @@ return $infoDiv; }; + // SVG-style + var regionInfoCSV = function (data) { + var cssPrefix = data.settings.cssPrefix; + var $infoDiv = $('
'); + $.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($('
').text(index+1 + ": " + area)); + }); + return $infoDiv; + }; // digilib-style var regionInfoDigilib = function (data) { var cssPrefix = data.settings.cssPrefix; diff -r c7fd2f239953 -r d9abeaa44c49 webapp/src/main/webapp/jquery/jquery.digilib.sliders.js --- a/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js Sat Mar 31 15:27:20 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js Sat Mar 31 19:56:53 2012 +0200 @@ -282,12 +282,12 @@ $('').append($cont).appendTo($tr); } $.each(primaryColors, setupTableRow); - var greyValues = function (index) { + var setGreyValue = function (index) { var val = index * 32; $(this).css('background-color', 'rgb('+val+','+val+','+val+')'); }; - $div.find('div.'+cls+'grey span').each(greyValues); - $div.find('div.'+cls+'indicator span').each(greyValues); + $div.find('div.'+cls+'grey span').each(setGreyValue); + $div.find('div.'+cls+'indicator span').each(setGreyValue); var getValues = function () { // get values from sliders var input = $table.data();