Mercurial > hg > digilib-old

changeset 828:ba708c57e57c stream

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
merge from jquery branch f0a5e4d2cba75bcb374ccae5624da0af11c11927
author robcast
date Wed, 23 Feb 2011 18:09:31 +0100
parents f210731dc6cc (current diff) f0a5e4d2cba7 (diff)
children a630d0303cce
files
diffstat 4 files changed, 221 insertions(+), 77 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-full.html	Wed Feb 23 18:03:27 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Wed Feb 23 18:09:31 2011 +0100
@@ -70,7 +70,9 @@
                 var opts = {
                     interactionMode : 'fullscreen',
                     scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler',
-                    showRegionNumbers : true
+                    showRegionNumbers : false,
+                    autoRegionLinks : false,
+                    includeRegionContent : true 
                     };
                 var $div = $('div.digilib');
                 $div.digilib(opts);
@@ -83,6 +85,12 @@
 
         <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>
         </div>
         <div id="debug">DEBUG</div>
     </body>
--- a/client/digitallibrary/jquery/jquery.digilib.css	Wed Feb 23 18:03:27 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Wed Feb 23 18:09:31 2011 +0100
@@ -66,8 +66,9 @@
 	opacity: 0.5;
 }
 
-div.regionnumber {
+div.regionnumber a {
     color: white;
+    text-decoration: none;
     font-size: 11px;
 	font-weight: bold;
 	height: 15px;
@@ -75,6 +76,24 @@
 	margin: 3px;
 }
 
+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;
+}
+
 /* special definitions for fullscreen */
 div.digilib.dl_fullscreen div.buttons {
 	position: fixed;
--- a/client/digitallibrary/jquery/jquery.digilib.js	Wed Feb 23 18:03:27 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Wed Feb 23 18:09:31 2011 +0100
@@ -774,40 +774,50 @@
         retrieveOptions(data);
     };
 
+    // put area into parameters
+    var packArea = function (settings, area) {
+        if (!area) return;
+        // zoom area
+        settings.wx = cropFloat(area.x);
+        settings.wy = cropFloat(area.y);
+        settings.ww = cropFloat(area.width);
+        settings.wh = cropFloat(area.height);
+    };
+
+    // put marks into parameters
+    var packMarks = function (settings, marks) {
+        if (!marks) return;
+        settings.mk = '';
+        for (var i = 0; i < marks.length; i++) {
+            if (i) {
+                settings.mk += ',';
+                }
+            settings.mk +=
+                cropFloatStr(marks[i].x) + '/' + 
+                cropFloatStr(marks[i].y);
+            }
+    };
+
+    // pack scaler flags into parameters
+    var packScalerFlags = function (settings, flags) {
+        if (!flags) return;
+        var mo = '';
+        for (var f in flags) {
+            if (mo) {
+                mo += ',';
+            }
+            mo += f;
+        }
+        settings.mo = mo;
+    };
+
     // put objects back into parameters
     var packParams = function (data) {
         var settings = data.settings;
-        // zoom area
-        if (data.zoomArea) {
-            settings.wx = cropFloat(data.zoomArea.x);
-            settings.wy = cropFloat(data.zoomArea.y);
-            settings.ww = cropFloat(data.zoomArea.width);
-            settings.wh = cropFloat(data.zoomArea.height);
-            }
-        // marks
-        if (data.marks) {
-            settings.mk = '';
-            for (var i = 0; i < data.marks.length; i++) {
-                if (i) {
-                    settings.mk += ',';
-                    }
-                settings.mk +=
-                    cropFloatStr(data.marks[i].x) + '/' + 
-                    cropFloatStr(data.marks[i].y);
-                }
-            }
-        // Scaler flags
-        if (data.scalerFlags) {
-            var mo = '';
-            for (var f in data.scalerFlags) {
-                if (mo) {
-                    mo += ',';
-                }
-                mo += f;
-            }
-            settings.mo = mo;
-        }
-        // user interface options
+        packArea(settings, data.zoomArea);
+        packMarks(settings, data.marks);
+        packScalerFlags(settings, data.scalerFlags);
+        // store user interface options in cookie
         storeOptions(data);
     };
 
@@ -961,8 +971,8 @@
                 $img = $('<img/>');
             }
         }
-        // create new inner html, keep buttons
-        $elem.contents(":not(div.buttons)").remove();
+        // create new inner html, keeping buttons and content marked with "keep" class
+        $elem.contents(":not(.keep)").remove();
         var $scaler = $('<div class="scaler"/>');
         // scaler should be the first child element?
         $elem.prepend($scaler);
@@ -987,7 +997,8 @@
             // no buttons here
             return;
         }
-        var $buttonsDiv = $('<div class="buttons"/>');
+        // button divs are marked with class "keep"
+        var $buttonsDiv = $('<div class="keep buttons"/>');
         var buttonNames = buttonSettings[buttonGroup];
         for (var i = 0; i < buttonNames.length; i++) {
             var buttonName = buttonNames[i];
@@ -1588,6 +1599,9 @@
             getDigilibUrl : getDigilibUrl,
             unpackParams : unpackParams,
             packParams : packParams,
+            packArea : packArea,
+            packMarks : packMarks,
+            packScalerFlags : packScalerFlags,
             storeOptions : storeOptions,
             redisplay : redisplay,
             updateDisplay : updateDisplay,
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js	Wed Feb 23 18:03:27 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.regions.js	Wed Feb 23 18:09:31 2011 +0100
@@ -41,8 +41,8 @@
             icon : "regions.png"
             },
         regioninfo : {
-            onclick : "infoRegions",
-            tooltip : "information about regions",
+            onclick : "toggleRegionInfo",
+            tooltip : "show information about regions",
             icon : "regioninfo.png"
             }
         };
@@ -52,8 +52,16 @@
         'isRegionVisible' : true,
         // are region numbers shown?
         'showRegionNumbers' : false,
+        // is region info shown?
+        'showRegionInfo' : false,
+        // should digilib look for region content in the page?
+        'includeRegionContent' : false,
+        // turn any region into a clickable link to its detail view
+        'autoRegionLinks' : false,
+        // class name for content divs (must additionally be marked with class "keep")
+        'regionContentSelector' : 'div.regioncontent',
         // buttonset of this plugin
-        'regionSet' : ['addregion', 'delregion', 'regions', 'regioninfo', 'lessoptions'],
+        'regionSet' : ['regions', 'addregion', 'delregion', 'regioninfo', 'lessoptions'],
         // url param for regions
         'rg' : null,
         };
@@ -76,8 +84,7 @@
             var $overlay = $('<div class="digilib-overlay"/>');
             $body.append($overlay);
             bodyRect.adjustDiv($overlay);
-             // we count regions from 1
-            var $regionDiv = addRegionDiv(data, data.regions.length + 1);
+            var $regionDiv = addRegionDiv(data, data.regions.length);
 
             // mousedown handler: start sizing
             var regionStart = function (evt) {
@@ -144,8 +151,21 @@
         "toggleRegions" : function (data) {
             var show = !data.settings.isRegionVisible;
             data.settings.isRegionVisible = show;
-            fn.highlightButtons(data, 'regions' , show);
-            showRegionDivs(data);
+            fn.highlightButtons(data, 'regions', show);
+            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();
+            }
         }
     };
 
@@ -162,38 +182,80 @@
     };
 
     // add a region to data.$elem
-    var addRegionDiv = function (data, nr) {
+    var addRegionDiv = function (data, index) {
+        var nr = index + 1; // we count regions from 1
+        // create a digilib URL for this detail
+        var regionUrl = getRegionUrl(data, index);
         var $regionDiv = $('<div class="region overlay" style="display:none"/>');
         $regionDiv.attr("id", ID_PREFIX + nr);
         data.$elem.append($regionDiv);
         if (data.settings.showRegionNumbers) {
-            var $regionNr = $('<div class="regionnumber" />');
-            $regionNr.text(nr);
+            var $regionNr = $('<div class="regionnumber"/>');
+            var $regionLink = $('<a/>');
+            $regionLink.attr('href', regionUrl);
+            $regionLink.text(nr);
+            $regionNr.append($regionLink);
             $regionDiv.append($regionNr);
         }
+        if (data.settings.autoRegionLinks) {
+            $regionDiv.bind('click.dlRegion', function() {
+                 window.location = regionUrl;
+            })
+        }
         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;
+        $regionDiv.append($elem);
+    }
+
     // create a region div from the data.regions collection
-    var createRegionDiv = function (data, index) {
-        var regions = data.regions;
-        if (index > regions.length) return null;
+    var createRegionDiv = function (regions, index) {
         var region = regions[index];
-        var $regionDiv = addRegionDiv(data, index + 1); // we count regions from 1
+        var $regionDiv = addRegionDiv(data, index);
         region.$div = $regionDiv;
-        // TODO store original coords in $regionDiv.data for embedded mode?
+        addRegionInfo(region);
         return $regionDiv;
     };
 
     // create regions 
     var createRegionDivs = function (data) {
-        for (var i = 0; i < data.regions.length ; i++) {
-            createRegionDiv(data, i);
+        var regions = data.regions;
+        for (var i = 0; i < regions.length ; 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);
+        console.debug("createRegionsFromHTML", $content);
+        $content.each(function(index, elem) {
+            var $div = $(elem); 
+            var r = $div.attr('title');
+            var pos = r.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();
+        });
+    };
+
     // show a region on top of the scaler image 
-    var showRegionDiv = function (data, index) {
+    var showRegionDiv = function (data, index, anim) {
         if (!data.imgTrafo) return;
         var $elem = data.$elem;
         var regions = data.regions;
@@ -211,16 +273,24 @@
             regionRect.clipTo(data.zoomArea);
             var screenRect = data.imgTrafo.transform(regionRect);
             screenRect.adjustDiv($regionDiv);
-            $regionDiv.show();
+            if (anim) {
+                $regionDiv.fadeIn();
+            } else{
+                $regionDiv.show();
+            }
         } else {
-            $regionDiv.hide();
+            if (anim) {
+                $regionDiv.fadeOut();
+            } else{
+                $regionDiv.hide();
+            }
         }
     };
 
     // show regions 
-    var showRegionDivs = function (data) {
+    var showRegionDivs = function (data, anim) {
         for (var i = 0; i < data.regions.length ; i++) {
-            showRegionDiv(data, i);
+            showRegionDiv(data, i, anim);
         }
     };
 
@@ -235,8 +305,6 @@
             var pos = r.split("/", 4);
             var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
             regions.push(rect);
-            // TODO: backlink mechanism
-            // var url = paramString.match(/http.*$/);
             }
     };
 
@@ -263,34 +331,65 @@
         data.settings.rg = rg;
     };
 
+    // reload display after a region has been added or removed
     var redisplay = function (data) {
-        packRegions(data);
+        if (!data.settings.includeRegionContent) {
+            packRegions(data);
+        }
         fn.redisplay(data);
-    }
+    };
 
+    // for turning region numbers/region divs into links to zoomed details 
+    var getRegionUrl = function (data, index) {
+        var region = data.regions[index];
+        var settings = data.settings;
+        var params = {
+            "fn" : settings.fn,
+            "pn" : settings.pn
+            };
+        fn.packArea(params, region);
+        fn.packMarks(params, data.marks);
+        fn.packScalerFlags(params, data.scalerFlags);
+        var paramNames = digilib.defaults.digilibParamNames;
+        // build our own digilib URL without storing anything
+        var queryString = fn.getParamString(params, paramNames, digilib.defaults);
+        return settings.digilibBaseUrl + '?' + queryString;
+    };
+
+    // event handler, reads region parameter and creates region divs
     var handleSetup = function (evt) {
         data = this;
         console.debug("regions: handleSetup", data.settings.rg);
-        unpackRegions(data);
-        createRegionDivs(data);
+        // regions with content are given in HTML divs
+        if (data.settings.includeRegionContent) {
+            createRegionsFromHTML(data);
+        // regions are defined in the URL
+        } else {
+            unpackRegions(data);
+            createRegionDivs(data);
+        }
     };
 
+    // event handler, sets buttons and shows regions
     var handleUpdate = function (evt) {
         data = this;
         fn.highlightButtons(data, 'regions' , data.settings.isRegionVisible);
+        fn.highlightButtons(data, 'regioninfo' , data.settings.showRegionInfo);
         showRegionDivs(data);
         console.debug("regions: handleUpdate", data.settings.rg);
     };
 
+    // event handler, redisplays regions (e.g. in a new position)
     var handleRedisplay = function (evt) {
         data = this;
         showRegionDivs(data);
         console.debug("regions: handleRedisplay");
     };
 
+    // event handler
     var handleDragZoom = function (evt, zoomArea) {
-        console.debug("regions: handleDragZoom, zoomArea:", zoomArea);
-        data = this;
+        // console.debug("regions: handleDragZoom, zoomArea:", zoomArea);
+        // data = this;
     };
 
     // plugin installation called by digilib on plugin object.
@@ -311,23 +410,27 @@
     var init = function (data) {
         console.debug('initialising regions plugin. data:', data);
         var $data = $(data);
-        var buttonSettings = data.settings.buttonSettings.fullscreen;
-        // configure buttons through digilib "regionSet" option
-        var buttonSet = data.settings.regionSet || regionSet; 
-        // set regionSet to [] or '' for no buttons (when showing regions only)
-        if (buttonSet.length && buttonSet.length > 0) {
-            buttonSettings['regionSet'] = buttonSet;
-            buttonSettings.buttonSets.push('regionSet');
+        // regions array
+        data.regions = [];
+        // no URL-defined regions, no buttons when regions are predefined in HTML
+        if (!data.settings.includeRegionContent) {
+            // add "rg" to digilibParamNames
+            data.settings.digilibParamNames.push('rg');
+            // additional buttons
+            var buttonSettings = data.settings.buttonSettings.fullscreen;
+            // configure buttons through digilib "regionSet" option
+            var buttonSet = data.settings.regionSet || regionSet; 
+            // set regionSet to [] or '' for no buttons (when showing regions only)
+            if (buttonSet.length && buttonSet.length > 0) {
+                buttonSettings['regionSet'] = buttonSet;
+                buttonSettings.buttonSets.push('regionSet');
+            }
         }
         // install event handler
         $data.bind('setup', handleSetup);
         $data.bind('update', handleUpdate);
         $data.bind('redisplay', handleRedisplay);
         $data.bind('dragZoom', handleDragZoom);
-        // regions array
-        data.regions = [];
-        // add "rg" to digilibParamNames
-        data.settings.digilibParamNames.push('rg');
     };
 
     // plugin object with name and install/init methods