Mercurial > hg > digilib-old

changeset 832:e4133946a9ad jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
display regions as HTML for use in digilib element
author hertzhaft
date Tue, 01 Mar 2011 01:31:26 +0100
parents f0a5e4d2cba7
children 9fa078dcb493
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, 52 insertions(+), 34 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-full.html	Wed Feb 23 02:24:00 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Tue Mar 01 01:31:26 2011 +0100
@@ -70,9 +70,9 @@
                 var opts = {
                     interactionMode : 'fullscreen',
                     scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler',
-                    showRegionNumbers : false,
+                    showRegionNumbers : true,
                     autoRegionLinks : false,
-                    includeRegionContent : true 
+                    includeRegionContent : false
                     };
                 var $div = $('div.digilib');
                 $div.digilib(opts);
@@ -85,10 +85,10 @@
 
         <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" title="0.1/0.1/0.4/0.1">
+            <div class="keep regioncontent" title="area=0.1/0.1/0.4/0.1">
                 <a href="http://www.mpiwg-berlin.mpg.de">MPI fuer Wissenschaftsgeschichte</a>
             </div>
-            <div class="keep regioncontent" title="0.5/0.8/0.4/0.1">
+            <div class="keep regioncontent" title="area=0.5/0.8/0.4/0.1">
                 <a href="http://www.biblhertz.it">Bibliotheca Hertziana</a>
             </div>
         </div>
--- a/client/digitallibrary/jquery/jquery.digilib.css	Wed Feb 23 02:24:00 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Tue Mar 01 01:31:26 2011 +0100
@@ -94,6 +94,19 @@
     background-color: black;
 }
 
+div.regionhtml {
+    display: none;
+    position: absolute;
+	top: 100px;
+	left: 250px;
+	padding: 10px;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	border: 2px solid lightcyan;
+	background-color: lightgrey;
+	z-index: 1000;
+}
+
 /* special definitions for fullscreen */
 div.digilib.dl_fullscreen div.buttons {
 	position: fixed;
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js	Wed Feb 23 02:24:00 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.regions.js	Tue Mar 01 01:31:26 2011 +0100
@@ -40,8 +40,8 @@
             tooltip : "show or hide regions",
             icon : "regions.png"
             },
-        regioninfo : {
-            onclick : "toggleRegionInfo",
+        regionhtml : {
+            onclick : "showRegionHTML",
             tooltip : "show information about regions",
             icon : "regioninfo.png"
             }
@@ -52,8 +52,8 @@
         'isRegionVisible' : true,
         // are region numbers shown?
         'showRegionNumbers' : false,
-        // is region info shown?
-        'showRegionInfo' : false,
+        // is window with region HTML shown?
+        'showRegionHTML' : false,
         // should digilib look for region content in the page?
         'includeRegionContent' : false,
         // turn any region into a clickable link to its detail view
@@ -61,7 +61,7 @@
         // class name for content divs (must additionally be marked with class "keep")
         'regionContentSelector' : 'div.regioncontent',
         // buttonset of this plugin
-        'regionSet' : ['regions', 'addregion', 'delregion', 'regioninfo', 'lessoptions'],
+        'regionSet' : ['regions', 'addregion', 'delregion', 'regionhtml', 'lessoptions'],
         // url param for regions
         'rg' : null,
         };
@@ -155,22 +155,30 @@
             showRegionDivs(data, 1);
         },
 
-        // show/hide region info 
-        "toggleRegionInfo" : function (data) {
-            var show = !data.settings.showRegionInfo;
-            data.settings.showRegionInfo = show;
-            fn.highlightButtons(data, 'regioninfo', show);
-            var $info = $('.regioninfo');
-            if (show) {
-                $info.fadeIn();
-            } else {
-                $info.fadeOut();
+        // show/hide region HTML code 
+        "showRegionHTML" : function (data) {
+            var show = !data.settings.showRegionHTML;
+            data.settings.showRegionHTML = show;
+            fn.highlightButtons(data, 'regionhtml', show);
+            var $html = data.$htmlDiv;
+            if (!show) {
+                $html.fadeOut(function () { 
+                    $html.contents().remove();
+                    });
+                return;
             }
+            // empty the div for HTML display
+            $.each(data.regions, function(index, region) {
+                var title = "area="
+                    + region.x + "/" + region.y + "/"
+                    + region.width + "/" + region.height;
+                $html.append($('<div/>').text('<div class="keep regioncontent" title="' + title + '">'));
+                $html.append($('<div/>').text('</div>'));
+                });
+            $html.fadeIn();
         }
     };
 
-    var addRegion = actions.addRegion;
-
     // store a region div
     var storeRegion = function (data, $regionDiv) {
         var regions = data.regions;
@@ -205,14 +213,6 @@
         return $regionDiv;
     };
 
-    // add region info
-    var addRegionInfo = function (region) {
-        var $regionDiv = region.$div;
-        var $regionInfoDiv = $('<div class="regioninfo" />');
-        $regionInfoDiv.text(region.toString());
-        $regionDiv.append($regionInfoDiv);
-    }
-
     // add region content
     var addRegionContent = function (region, $elem) {
         var $regionDiv = region.$div;
@@ -224,16 +224,15 @@
         var region = regions[index];
         var $regionDiv = addRegionDiv(data, index);
         region.$div = $regionDiv;
-        addRegionInfo(region);
         return $regionDiv;
     };
 
     // create regions 
     var createRegionDivs = function (data) {
         var regions = data.regions;
-        for (var i = 0; i < regions.length ; i++) {
+        $.each(regions, function(i) {
             createRegionDiv(regions, i);
-        }
+            });
     };
 
     // create regions from HTML
@@ -244,7 +243,8 @@
         console.debug("createRegionsFromHTML", $content);
         $content.each(function(index, elem) {
             var $div = $(elem); 
-            var r = $div.attr('title');
+            var title = $div.attr('title');
+            var r = title.replace(/^area=/i, '');
             var pos = r.split("/", 4);
             var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
             regions.push(rect);
@@ -367,6 +367,7 @@
         } else {
             unpackRegions(data);
             createRegionDivs(data);
+            fn.highlightButtons(data, 'regionhtml', data.settings.showRegionHTML);
         }
     };
 
@@ -374,7 +375,7 @@
     var handleUpdate = function (evt) {
         data = this;
         fn.highlightButtons(data, 'regions' , data.settings.isRegionVisible);
-        fn.highlightButtons(data, 'regioninfo' , data.settings.showRegionInfo);
+        fn.highlightButtons(data, 'regionhtml' , data.settings.showRegionHTML);
         showRegionDivs(data);
         console.debug("regions: handleUpdate", data.settings.rg);
     };
@@ -412,6 +413,10 @@
         var $data = $(data);
         // regions array
         data.regions = [];
+        // regions HTML div
+        var $html = $('<div class="keep regionhtml"/>');
+        data.$htmlDiv = $html;
+        data.$elem.append($html);
         // no URL-defined regions, no buttons when regions are predefined in HTML
         if (!data.settings.includeRegionContent) {
             // add "rg" to digilibParamNames