Mercurial > hg > digilib-old

changeset 1067:a45894a81e40

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
#26: minor enhancements for the regions plugin
author hertzhaft
date Wed, 04 Apr 2012 01:59:13 +0200
parents 555f6f0d6be5
children c1df386f2464
files webapp/src/main/webapp/jquery/img/fullscreen/delallregions.png webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.regions.js webapp/src/main/webapp/jquery/test-regions.html
diffstat 4 files changed, 119 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
Binary file webapp/src/main/webapp/jquery/img/fullscreen/delallregions.png has changed
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Mon Apr 02 08:19:21 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Wed Apr 04 01:59:13 2012 +0200
@@ -83,9 +83,9 @@
 div.dl-digilib div.dl-region:hover {
 	background-color: transparent;
 	border: 2px solid red;
-	/* opacity: 0.5; */
+	opacity: 0.6;
     /* do we still need this IE6-stuff? */
-	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
+	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); 
 }
 
 div.dl-digilib div.dl-region a.dl-regionnumber {
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Mon Apr 02 08:19:21 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js	Wed Apr 04 01:59:13 2012 +0200
@@ -11,6 +11,20 @@
    <area coords="0.3,0.5,0.15,0.1" />
 </map>
 
+According to the HTML specs, "area" and "a" elements are allowed inside of a "map".
+Both can have a "coords" attribute, but "area" elements can't contain child nodes.
+To have regions with content use "a" tags, e.g.
+
+<map class="dl-keep dl-regioncontent">
+   <a href="http://www.mpiwg-berlin.mpg.de" coords="0.4907,0.3521,0.1458,0.107">
+       MPI fuer Wissenschaftsgeschichte
+   </a>
+   <a href="http://www.biblhertz.it" coords="0.3413,0.2912,0.4345,0.2945">
+       Bibliotheca Hertziana
+   </a>
+   <area coords="0.3,0.5,0.15,0.1" />
+</map>
+
 */
 
 (function($) {
@@ -37,6 +51,11 @@
             tooltip : "delete the last region",
             icon : "delregion.png"
             },
+        delallregions : {
+            onclick : "removeAllRegions",
+            tooltip : "delete all regions",
+            icon : "delallregions.png"
+            },
         regions : {
             onclick : "toggleRegions",
             tooltip : "show or hide regions",
@@ -62,10 +81,10 @@
         'autoZoomRegionLinks' : false,
         // use full region as klickable link (instead of only number and text)
         'fullRegionLinks' : false,
-        // css selector for area elements (should additionally be marked with class "keep")
-        'regionContentSelector' : 'map.dl-regioncontent area',
+        // css selector for area elements (must also be marked with class "dl-keep")
+        'htmlRegionsSelector' : 'map.dl-regioncontent area, map.dl-regioncontent a',
         // buttonset of this plugin
-        'regionSet' : ['regions', 'addregion', 'delregion', 'regioninfo', 'lessoptions'],
+        'regionSet' : ['regions', 'addregion', 'delregion', 'delallregions', 'regioninfo', 'lessoptions'],
         // url param for regions
         'rg' : null
         };
@@ -152,6 +171,19 @@
             redisplay(data);
         },
 
+        // remove the last added region
+        removeAllRegions : function (data) {
+            if (!data.settings.isRegionVisible) {
+                alert("Please turn on regions visibility!");
+                return;
+            }
+            var cssPrefix = data.settings.cssPrefix;
+            var $regions = data.$elem.find('div.'+cssPrefix+'region');
+            $regions.remove();
+            data.regions = [];
+            redisplay(data);
+        },
+
         // show/hide regions 
         toggleRegions : function (data) {
             var show = !data.settings.isRegionVisible;
@@ -222,7 +254,8 @@
         var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'html"/>');
         $infoDiv.append($('<div/>').text('<map class="'+cssPrefix+'keep '+cssPrefix+'regioncontent">'));
         $.each(data.regions, function(index, r) {
-            var area = [
+                if (r.fromHtml) return;
+                var area = [
                 fn.cropFloatStr(r.x),
                 fn.cropFloatStr(r.y),
                 fn.cropFloatStr(r.width),
@@ -238,6 +271,7 @@
         var cssPrefix = data.settings.cssPrefix;
         var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'svgattr"/>');
         $.each(data.regions, function(index, r) {
+            if (r.fromHtml) return;
             var area = [
                 fn.cropFloatStr(r.x),
                 fn.cropFloatStr(r.y),
@@ -253,6 +287,7 @@
         var cssPrefix = data.settings.cssPrefix;
         var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'csv"/>');
         $.each(data.regions, function(index, r) {
+            if (r.fromHtml) return;
             var area = [
                 fn.cropFloatStr(r.x),
                 fn.cropFloatStr(r.y),
@@ -267,6 +302,7 @@
         var cssPrefix = data.settings.cssPrefix;
         var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'digilib"/>');
         $.each(data.regions, function(index, r) {
+            if (r.fromHtml) return;
             var area = r.toString();
             $infoDiv.append($('<div/>').text(area));
             });
@@ -343,7 +379,7 @@
     var createRegionsFromHTML = function (data) {
         var regions = data.regions;
         // regions are defined in "area" tags
-        var $content = data.$elem.find(data.settings.regionContentSelector);
+        var $content = data.$elem.find(data.settings.htmlRegionsSelector);
         console.debug("createRegionsFromHTML. elems: ", $content);
         $content.each(function(index, a) {
             var $a = $(a); 
@@ -391,10 +427,10 @@
         }
         var regionRect = region.copy();
         var show = data.settings.isRegionVisible;
-        if (show && zoomArea.overlapsRect(regionRect)) {
+        if (show && zoomArea.overlapsRect(regionRect) && !regionRect.containsRect(zoomArea)) {
             regionRect.clipTo(zoomArea);
             var screenRect = data.imgTrafo.transform(regionRect);
-            console.debug("renderRegion: pos=",geom.position(screenRect));
+            // console.debug("renderRegion: pos=",geom.position(screenRect));
             if (anim) {
                 $regionDiv.fadeIn();
             } else{
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/test-regions.html	Wed Apr 04 01:59:13 2012 +0200
@@ -0,0 +1,74 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="initial-scale=1.0"/>
+        <title>Digilib: Regions plugin test</title>
+        <!-- <base href="http://img.biblhertz.it/" target="_blank" /> -->
+
+        <style type="text/css">
+            body {
+                 background: silver;
+            }
+        </style>
+
+        <script type="text/javascript" src="jquery.js"></script>
+        <script type="text/javascript" src="jquery.cookie.js"></script>
+        <script type="text/javascript" src="jquery.digilib.js"></script>
+        <script type="text/javascript" src="jquery.digilib.geometry.js"></script>
+        <script type="text/javascript" src="jquery.digilib.arrows.js"></script>
+        <script type="text/javascript" src="jquery.range.js"></script>
+        <link rel="stylesheet" type="text/css" href="jquery.range.css" />
+        <script type="text/javascript" src="jquery.digilib.buttons.js"></script>
+        <script type="text/javascript" src="jquery.digilib.sliders.js"></script>
+        <script type="text/javascript" src="jquery.digilib.birdseye.js"></script>
+        <script type="text/javascript" src="jquery.digilib.marks.js"></script>
+        <script type="text/javascript" src="jquery.digilib.regions.js"></script>
+        <link rel="stylesheet" type="text/css" href="jquery.digilib.css" />
+
+        <script type="text/javascript">
+            $(document).ready(function(){
+                var opts = {
+                    interactionMode : 'fullscreen',
+                    processHtmlRegions : true,
+                    showRegionNumbers : false,
+                    autoZoomRegionLinks : true
+                    };
+                var $div = $('div#digilib');
+                $div.digilib(opts);
+            });
+
+        </script>
+    </head>
+
+    <body>
+        <div id="digilib">
+            <p>digilib doesn't work! Please switch on Javascript or notify the server administrator!</p>
+            <img src="http://digilib.berlios.de/images/digilib-logo-big.png" />
+            <map class="dl-keep dl-regioncontent">
+                <area title="A: Basilica S. Petri in Vaticano cum Porticu et P. Pontificio" coords="0.0599,0.7277,0.0371,0.0577"/>
+                <area title="B: Basilica S. Joannis Lateranensis cum Palatio" coords="0.6324,0.1208,0.0337,0.0317"/>
+                <area title="C: Basilica S. Mariae Maioris" coords="0.4114,0.1343,0.032,0.0345"/>
+                <area title="D: Ecclesia S. Crucis in Jerusalem" coords="0.599,0.053,0.0238,0.0308"/>
+                <area title="E: Ecclesia S. Andreae della Valle dicta" coords="0.4395,0.446,0.0236,0.0284"/>
+                <area title="F: Ecclesia Collegii Romani Societatis Jesu" coords="0.3995,0.3625,0.0225,0.0322"/>
+                <area title="G: Temp. Soc: Jesu, Vulgo Giesł" coords="0.4534,0.362,0.0269,0.0419"/>
+                <area title="H: Temp. et Monas SS. Trinitatis Montium" coords="0.206,0.2397,0.0284,0.0304"/>
+                <area title="I: Temp. D. Mariae Populi ab Alex. VII restau." coords="0.0523,0.3085,0.012,0.0207"/>
+                <area title="K: Temp. S. Athanasii Grecorum" coords="0.1608,0.3157,0.0138,0.0238"/>
+                <area title="L: Temp. D. Mariae Rotundae olim Patheon Agrippae" coords="0.3874,0.4144,0.0151,0.0228"/>
+                <area title="M: Tem. D. Mariae Super Minervam" coords="0.4077,0.3991,0.0115,0.0197"/>
+                <area title="N: Tem. D. M. in Valicella Vulgo Chiesa Nuova" coords="0.3914,0.526,0.026,0.0318"/>
+                <area title="P: Tem. S. Mariae in Ara Caeli" coords="0.5239,0.3242,0.0121,0.0166"/>
+                <area title="Q: Tem. et Monas S. Andreae delle fratte" coords="0.2884,0.2788,0.0146,0.028"/>
+                <area title="R: Tem. D. M. Pacis ab Alex VII denuo constructa" coords="0.3012,0.3435,0.0159,0.0124"/>
+                <area title="S: Tem. et Hospitale B. Mariae de Anima nationis Germanorum et Flandrorum" coords="0.3252,0.3559,0.0145,0.0196"/>
+                <area title="T: Tem. et Hospitale S. Lodouici nationis Gallicanae" coords="0.3672,0.446,0.0083,0.0143"/>
+                <area title="V: Tem. et Hospitale S. Iacobi nationis Hispanorum" coords="0.4037,0.463,0.0073,0.0162"/>
+                <area title="X: Tem. et Hospitale S. Spiritus in Sassia" coords="0.2288,0.658,0.0386,0.0462"/>
+                <a title="test a tag" coords="0.05,0.05,0.3,0.1">Testing an <b>a tag</b> with content</a>
+            </map>
+        </div>
+    </body>
+</html>
+