changeset 835:9fa078dcb493 jquery

predefine region content with a rel=
author hertzhaft
date Tue, 01 Mar 2011 17:12:25 +0100
parents e4133946a9ad
children a7e157d258e8
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, 35 insertions(+), 38 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-full.html	Tue Mar 01 01:31:26 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Tue Mar 01 17:12:25 2011 +0100
@@ -72,7 +72,7 @@
                     scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler',
                     showRegionNumbers : true,
                     autoRegionLinks : false,
-                    includeRegionContent : false
+                    includeRegionContent : true 
                     };
                 var $div = $('div.digilib');
                 $div.digilib(opts);
@@ -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="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="area=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	Tue Mar 01 01:31:26 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Tue Mar 01 17:12:25 2011 +0100
@@ -66,7 +66,7 @@
 	opacity: 0.5;
 }
 
-div.regionnumber a {
+div.region a {
     color: white;
     text-decoration: none;
     font-size: 11px;
@@ -78,23 +78,9 @@
 
 div.regioncontent {
     display: none;
-    padding: 3px;
 }
 
-div.regioncontent a {
-    color: white;
-    text-decoration: none;
-    font-size: 11px;
-	font-weight: bold;
-}
-
-div.regioninfo {
-    display: none;
-    color: white;
-    background-color: black;
-}
-
-div.regionhtml {
+div.regionHTML {
     display: none;
     position: absolute;
 	top: 100px;
@@ -107,6 +93,13 @@
 	z-index: 1000;
 }
 
+div.regionHTML a {
+    color: white;
+    text-decoration: none;
+    font-size: 11px;
+	font-weight: bold;
+}
+
 /* special definitions for fullscreen */
 div.digilib.dl_fullscreen div.buttons {
 	position: fixed;
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js	Tue Mar 01 01:31:26 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.regions.js	Tue Mar 01 17:12:25 2011 +0100
@@ -168,13 +168,15 @@
                 return;
             }
             // empty the div for HTML display
+            $html.append($('<div/>').text('<div class="keep regioncontent">'));
             $.each(data.regions, function(index, region) {
-                var title = "area="
+                    var area = "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.append($('<div/>').text('<a href="" rel="' + area + '">'));
+                $html.append($('<div/>').text('</a>'));
                 });
+            $html.append($('<div/>').text('</div>'));
             $html.fadeIn();
         }
     };
@@ -239,18 +241,19 @@
     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 title = $div.attr('title');
-            var r = title.replace(/^area=/i, '');
-            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();
         });
     };
 
@@ -410,15 +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 HTML div
-        var $html = $('<div class="keep regionhtml"/>');
+        // regions div
+        var $html = $('<div class="keep regionHTML"/>');
+        $elem.append($html);
         data.$htmlDiv = $html;
-        data.$elem.append($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
@@ -432,6 +436,7 @@
             }
         }
         // install event handler
+        var $data = $(data);
         $data.bind('setup', handleSetup);
         $data.bind('update', handleUpdate);
         $data.bind('redisplay', handleRedisplay);