Mercurial > hg > digilib-old

changeset 855:2c401f68d577 jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
better region info
author hertzhaft
date Mon, 07 Mar 2011 15:16:51 +0100
parents 4658ec2f9565
children 5795b9cae183
files client/digitallibrary/jquery/jquery-test-full.html client/digitallibrary/jquery/jquery.digilib.css client/digitallibrary/jquery/jquery.digilib.regions.js
diffstat 3 files changed, 104 insertions(+), 24 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-full.html	Mon Mar 07 09:54:36 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Mon Mar 07 15:16:51 2011 +0100
@@ -84,13 +84,13 @@
 
         <div id="digilib-1" class="digilib">
             <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&amp;dh=200&amp;fn=/digisprint/jquery/FransHals-WillemVanHeythuysen" />
-                        <div class="keep regioncontent">
-                            <a href="http://www.mpiwg-berlin.mpg.de" coords="0.1,0.1,0.4,0.1">MPI fuer Wissenschaftsgeschichte</a>
-                            <a href="http://www.biblhertz.it" coords="0.5,0.8,0.4,0.1">Bibliotheca Hertziana</a>
-                            <a coords="0.3,0.5,0.15,0.1" />
-                        </div>
         </div>
         <div id="debug">DEBUG</div>
+        <div class="keep regioncontent">
+            <a href="http://www.mpiwg-berlin.mpg.de" coords="0.1,0.1,0.4,0.1">MPI fuer Wissenschaftsgeschichte</a>
+            <a href="http://www.biblhertz.it" coords="0.5,0.8,0.4,0.1">Bibliotheca Hertziana</a>
+            <a coords="0.3,0.5,0.15,0.1" />
+        </div>
     </body>
 </html>
 
--- a/client/digitallibrary/jquery/jquery.digilib.css	Mon Mar 07 09:54:36 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Mon Mar 07 15:16:51 2011 +0100
@@ -92,7 +92,6 @@
     display: none;
     position: absolute;
 	top: 100px;
-	left: 250px;
 	padding: 10px;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 12px;
@@ -108,6 +107,25 @@
 	font-weight: bold;
 }
 
+div.infobutton {
+    background-color: white;
+    color: grey;
+    padding: 0px 4px;
+    margin: 0px 2px;
+    float: left;
+}
+
+div.info {
+    clear: both;
+    display: none;
+    margin: 10px;
+}
+
+div.infoheader {
+    width: 300px;
+    margin-bottom: 20px;
+}
+
 /* special definitions for fullscreen */
 div.digilib.dl_fullscreen div.buttons {
 	position: fixed;
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js	Mon Mar 07 09:54:36 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.regions.js	Mon Mar 07 15:16:51 2011 +0100
@@ -37,7 +37,7 @@
             icon : "regions.png"
             },
         regionhtml : {
-            onclick : "showRegionHTML",
+            onclick : "showRegionInfo",
             tooltip : "show information about regions",
             icon : "regioninfo.png"
             }
@@ -49,7 +49,7 @@
         // are region numbers shown?
         'showRegionNumbers' : false,
         // is window with region HTML shown?
-        'showRegionHTML' : false,
+        'showRegionInfo' : false,
         // is there region content in the page?
         'hasRegionContent' : false,
         // turn any region into a clickable link to its detail view
@@ -152,28 +152,19 @@
         },
 
         // show/hide region HTML code 
-        "showRegionHTML" : function (data) {
-            var show = !data.settings.showRegionHTML;
-            data.settings.showRegionHTML = show;
+        "showRegionInfo" : function (data) {
+            var show = !data.settings.showRegionInfo;
+            data.settings.showRegionInfo = show;
             fn.highlightButtons(data, 'regionhtml', show);
             var $html = data.$htmlDiv;
             if (!show) {
+                // empty the div
                 $html.fadeOut(function () { 
                     $html.contents().remove();
                     });
                 return;
             }
-            // empty the div for HTML display
-            $html.append($('<div/>').text('<div class="keep regioncontent">'));
-            $.each(data.regions, function(index, region) {
-                    var area = "area:"
-                    + region.x + "/" + region.y + "/"
-                    + region.width + "/" + region.height;
-                $html.append($('<div/>').text('<a href="" rel="' + area + '">'));
-                $html.append($('<div/>').text('</a>'));
-                });
-            $html.append($('<div/>').text('</div>'));
-            $html.fadeIn();
+            regionInfo(data);
         },
 
         "redraw" : function (data) {
@@ -191,6 +182,77 @@
         console.debug("regions", data.regions, "regionRect", regionRect);
     };
 
+    // clickable header
+    var regionInfoHeader = function (data) {
+        var $infoDiv = $('<div class="infoheader"/>');
+        var $h01 = $('<div class="infobutton">HTML</div>'); 
+        var $h02 = $('<div class="infobutton">SVG</div>'); 
+        var $h03 = $('<div class="infobutton">Digilib</div>'); 
+        var $h04 = $('<div class="infobutton">X</div>');
+        var bind = function($div, name) {
+            $div.bind('click.regioninfo', function () {
+                var $top = $(this).parent().parent();
+                $top.find('.info').hide();
+                $top.find('.' + name).show();
+                });
+            };
+        bind($h01, 'html');
+        bind($h02, 'svgattr');
+        bind($h03, 'digilib');
+        var $html = data.$htmlDiv;
+        $h04.bind('click.regioninfo', function () {
+            data.settings.showRegionInfo = false;
+            fn.highlightButtons(data, 'regionhtml', false);
+            $html.fadeOut(function () { 
+                $html.contents().remove();
+                });
+            });
+        $infoDiv.append($h01, $h02, $h03, $h04);
+        return $infoDiv;
+    };
+
+    // html for later insertion
+    var regionInfoHTML = function (data) {
+        var $infoDiv = $('<div class="info html"/>');
+        $infoDiv.append($('<div/>').text('<div class="keep regioncontent">'));
+        $.each(data.regions, function(index, r) {
+            var area = [r.x, r.y, r.width, r.height].join(',');
+            $infoDiv.append($('<div/>').text('<a coords="' + area + '" >'));
+            });
+        $infoDiv.append($('<div/>').text('</div>'));
+        return $infoDiv;
+    };
+
+    // SVG-style
+    var regionInfoSVG = function (data) {
+        var $infoDiv = $('<div class="info svgattr"/>');
+        $.each(data.regions, function(index, r) {
+            var area = [r.x, r.y, r.width, r.height].join(' ');
+            $infoDiv.append($('<div/>').text('"' + area + '"'));
+            });
+        return $infoDiv;
+    };
+
+    // digilib-style
+    var regionInfoDigilib = function (data) {
+        var $infoDiv = $('<div class="info digilib"/>');
+        $.each(data.regions, function(index, r) {
+            var area = r.width + 'x' + r.height + '@' + r.x + ',' + r.y;
+            $infoDiv.append($('<div/>').text(area));
+            });
+        return $infoDiv;
+    };
+
+    // show region info in a window
+    var regionInfo = function (data) {
+        var $html = data.$htmlDiv;
+        $html.append(regionInfoHeader(data))
+        $html.append(regionInfoHTML(data));
+        $html.append(regionInfoSVG(data));
+        $html.append(regionInfoDigilib(data));
+        $html.fadeIn();
+    };
+
     // add a region to data.$elem
     var addRegionDiv = function (data, index, url) {
         var nr = index + 1; // we count regions from 1
@@ -366,7 +428,7 @@
         // regions are defined in the URL
         } else {
             createRegionsFromURL(data);
-            fn.highlightButtons(data, 'regionhtml', data.settings.showRegionHTML);
+            fn.highlightButtons(data, 'regionhtml', data.settings.showRegionInfo);
         }
     };
 
@@ -376,7 +438,7 @@
         console.debug("regions: handleUpdate");
         var settings = data.settings;
         fn.highlightButtons(data, 'regions' , settings.isRegionVisible);
-        fn.highlightButtons(data, 'regionhtml' , settings.showRegionHTML);
+        fn.highlightButtons(data, 'regionhtml' , settings.showRegionInfo);
         renderRegions(data);
     };