Mercurial > hg > digilib-old

changeset 844:73dd59b48c5e stream

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Merge from jquery branch a7e157d258e86b9ba7470239f6b49d73ff200486
author robcast
date Fri, 04 Mar 2011 17:49:15 +0100
parents ba449162d77f (current diff) a7e157d258e8 (diff)
children a29f53d8b7dd
files
diffstat 3 files changed, 68 insertions(+), 53 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-full.html	Thu Mar 03 17:51:54 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Fri Mar 04 17:49:15 2011 +0100
@@ -70,7 +70,7 @@
                 var opts = {
                     interactionMode : 'fullscreen',
                     scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler',
-                    showRegionNumbers : false,
+                    showRegionNumbers : true,
                     autoRegionLinks : false,
                     includeRegionContent : true 
                     };
@@ -85,11 +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">
-                <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">
-                <a href="http://www.biblhertz.it">Bibliotheca Hertziana</a>
+            <div class="keep regioncontent">
+                <a href="http://www.mpiwg-berlin.mpg.de" rel="area:0.1/0.1/0.4/0.1">MPI fuer Wissenschaftsgeschichte</a>
+                <a href="http://www.biblhertz.it" rel="area:0.5/0.8/0.4/0.1">Bibliotheca Hertziana</a>
+                <a rel="area:0.3/0.5/0.15/0.1" />
             </div>
         </div>
         <div id="debug">DEBUG</div>
--- a/client/digitallibrary/jquery/jquery.digilib.css	Thu Mar 03 17:51:54 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Fri Mar 04 17:49:15 2011 +0100
@@ -66,7 +66,7 @@
 	opacity: 0.5;
 }
 
-div.regionnumber a {
+div.region a {
     color: white;
     text-decoration: none;
     font-size: 11px;
@@ -78,22 +78,28 @@
 
 div.regioncontent {
     display: none;
-    padding: 3px;
 }
 
-div.regioncontent a {
+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;
+}
+
+div.regionHTML a {
     color: white;
     text-decoration: none;
     font-size: 11px;
 	font-weight: bold;
 }
 
-div.regioninfo {
-    display: none;
-    color: white;
-    background-color: black;
-}
-
 /* special definitions for fullscreen */
 div.digilib.dl_fullscreen div.buttons {
 	position: fixed;
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js	Thu Mar 03 17:51:54 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.regions.js	Fri Mar 04 17:49:15 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,32 @@
             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
+            $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();
         }
     };
 
-    var addRegion = actions.addRegion;
-
     // store a region div
     var storeRegion = function (data, $regionDiv) {
         var regions = data.regions;
@@ -205,14 +215,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,33 +226,34 @@
         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
     var createRegionsFromHTML = function (data) {
         var regions = data.regions;
         var selector = data.settings.regionContentSelector;
-        var $content = data.$elem.find(selector);
+        var $content = data.$elem.contents(selector).contents('a');
         console.debug("createRegionsFromHTML", $content);
-        $content.each(function(index, elem) {
-            var $div = $(elem); 
-            var r = $div.attr('title');
-            var pos = r.split("/", 4);
+        $content.each(function(index, a) {
+            var $a = $(a); 
+            var href = $a.attr('href');
+            var rel = $a.attr('rel');
+            var area = rel.replace(/^area:/i, '');
+            var pos = area.split("/", 4);
             var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
             regions.push(rect);
             var $regionDiv = createRegionDiv(regions, index);
-            $regionDiv.append($div);
-            $div.show();
+            $regionDiv.append($a.clone());
+            // $a.show();
         });
     };
 
@@ -367,6 +370,7 @@
         } else {
             unpackRegions(data);
             createRegionDivs(data);
+            fn.highlightButtons(data, 'regionhtml', data.settings.showRegionHTML);
         }
     };
 
@@ -374,7 +378,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);
     };
@@ -409,11 +413,16 @@
     // plugin initialization
     var init = function (data) {
         console.debug('initialising regions plugin. data:', data);
-        var $data = $(data);
+        var $elem = data.$elem;
         // regions array
         data.regions = [];
+        // regions div
+        var $html = $('<div class="keep regionHTML"/>');
+        $elem.append($html);
+        data.$htmlDiv = $html;
         // no URL-defined regions, no buttons when regions are predefined in HTML
-        if (!data.settings.includeRegionContent) {
+        var hasRegionContent = data.settings.includeRegionContent;
+        if (!hasRegionContent) {
             // add "rg" to digilibParamNames
             data.settings.digilibParamNames.push('rg');
             // additional buttons
@@ -427,6 +436,7 @@
             }
         }
         // install event handler
+        var $data = $(data);
         $data.bind('setup', handleSetup);
         $data.bind('update', handleUpdate);
         $data.bind('redisplay', handleRedisplay);