Mercurial > hg > digilib-old

changeset 1060:d9abeaa44c49

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
better region info
author hertzhaft
date Sat, 31 Mar 2012 19:56:53 +0200
parents c7fd2f239953
children 4f5c5c578aa4
files webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.js webapp/src/main/webapp/jquery/jquery.digilib.regions.js webapp/src/main/webapp/jquery/jquery.digilib.sliders.js
diffstat 4 files changed, 61 insertions(+), 67 deletions(-) [+]
line wrap: on
line diff
--- 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;
 }
 
--- 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
--- 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 = '\
                 <div id="'+cssPrefix+'regionInfo" class="'+cssPrefix+'keep '+cssPrefix+'regionInfo">\
-                    <div class="'+cssPrefix+'infoheader">\
-                        <div class="'+cssPrefix+'infobutton html">HTML</div>\
-                        <div class="'+cssPrefix+'infobutton svgattr">SVG</div>\
-                        <div class="'+cssPrefix+'infobutton digilib">Digilib</div>\
-                        <div class="'+cssPrefix+'infobutton x">X</div>\
-                    </div>\
+                    <table class="'+cssPrefix+'infoheader">\
+                        <tr>\
+                            <td class="'+cssPrefix+'infobutton html">HTML</td>\
+                            <td class="'+cssPrefix+'infobutton svgattr">SVG</td>\
+                            <td class="'+cssPrefix+'infobutton csv">CSV</td>\
+                            <td class="'+cssPrefix+'infobutton digilib">Digilib</td>\
+                            <td class="'+cssPrefix+'infobutton x">X</td>\
+                        </tr>\
+                    </table>\
                 </div>';
             $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 = $('<div class="'+cssPrefix+'info '+cssPrefix+'csv"/>');
+        $.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($('<div/>').text(index+1 + ": " + area));
+            });
+        return $infoDiv;
+    };
     // digilib-style
     var regionInfoDigilib = function (data) {
         var cssPrefix = data.settings.cssPrefix;
--- 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 @@
             $('<td class="'+css+'rgb"/>').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();