Mercurial > hg > digilib-old

changeset 850:47a6b93bde43 jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
always show html-defined regions. wrong pos still not fixed
author hertzhaft
date Mon, 07 Mar 2011 00:38:20 +0100
parents a0ae2d86bcf4
children 5922c444cd11
files client/digitallibrary/jquery/jquery-test-embedded.html client/digitallibrary/jquery/jquery-test-full.html client/digitallibrary/jquery/jquery.digilib.js client/digitallibrary/jquery/jquery.digilib.regions.js
diffstat 4 files changed, 34 insertions(+), 30 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-embedded.html	Sun Mar 06 14:30:15 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-embedded.html	Mon Mar 07 00:38:20 2011 +0100
@@ -67,8 +67,7 @@
                     interactionMode : 'embedded',
                     scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler',
                     showRegionNumbers : true,
-                    autoRegionLinks : false,
-                    includeRegionContent : false 
+                    autoRegionLinks : false
                     };
                 var $div = $('div.digilib');
                 $div.digilib(opts);
--- a/client/digitallibrary/jquery/jquery-test-full.html	Sun Mar 06 14:30:15 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Mon Mar 07 00:38:20 2011 +0100
@@ -71,8 +71,7 @@
                     interactionMode : 'fullscreen',
                     scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler',
                     showRegionNumbers : true,
-                    autoRegionLinks : false,
-                    includeRegionContent : true 
+                    autoRegionLinks : false
                     };
                 var $div = $('div.digilib');
                 $div.digilib(opts);
--- a/client/digitallibrary/jquery/jquery.digilib.js	Sun Mar 06 14:30:15 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Mon Mar 07 00:38:20 2011 +0100
@@ -218,13 +218,13 @@
                 // path to button images (must end with a slash)
                 'imagePath' : 'img/fullscreen/',
                 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","help","reset","toggleoptions"],
-                'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","toggleoptions"],
+                'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","lessoptions"],
                 'buttonSets' : ['standardSet', 'specialSet']
                 },
             'embedded' : {
                 'imagePath' : 'img/embedded/16/',
                 'standardSet' : ["reference","zoomin","zoomout","zoomarea","zoomfull","help","reset","toggleoptions"],
-                'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","toggleoptions"],
+                'specialSet' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","scale","lessoptions"],
                 'buttonSets' : ['standardSet', 'specialSet']
                 }
         },
@@ -1252,7 +1252,7 @@
     // place marks on the image
     var renderMarks = function (data) {
         if (data.$img == null || data.imgTrafo == null) return;
-        console.debug("rendermarks img=",data.$img," imgtrafo=",data.imgTrafo);
+        console.debug("renderMarks: img=",data.$img," imgtrafo=",data.imgTrafo);
         var $elem = data.$elem;
         var marks = data.marks;
         // clear marks
@@ -1265,7 +1265,7 @@
                 // create mark
                 var html = '<div class="mark overlay">'+(i+1)+'</div>';
                 var $mark = $(html);
-                $mark.attr("id", "digilib-mark-" + i);
+                $mark.attr("id", "digilib-mark-"+(i+1));
                 $elem.append($mark);
                 mpos.adjustDiv($mark);
                 }
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js	Sun Mar 06 14:30:15 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.regions.js	Mon Mar 07 00:38:20 2011 +0100
@@ -3,11 +3,7 @@
 markup a digilib image with rectangular regions
 
 TODO:
-- store region in params/cookie, regarding zoom, mirror, rotation (like marks)
-- set regions programmatically
-- read regions from params/cookie and display
-- backlink mechanism
-- don't write to data.settings?
+    how to display regions correctly in embedded mode?
 */
 
 (function($) {
@@ -54,8 +50,8 @@
         'showRegionNumbers' : false,
         // is window with region HTML shown?
         'showRegionHTML' : false,
-        // should digilib look for region content in the page?
-        'includeRegionContent' : false,
+        // is there region content in the page?
+        'hasRegionContent' : 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")
@@ -152,7 +148,7 @@
             var show = !data.settings.isRegionVisible;
             data.settings.isRegionVisible = show;
             fn.highlightButtons(data, 'regions', show);
-            showRegionDivs(data, 1);
+            renderRegions(data, 1);
         },
 
         // show/hide region HTML code 
@@ -178,6 +174,10 @@
                 });
             $html.append($('<div/>').text('</div>'));
             $html.fadeIn();
+        },
+
+        "redraw" : function (data) {
+            renderRegions(data);
         }
     };
 
@@ -241,24 +241,27 @@
     var createRegionsFromHTML = function (data) {
         var regions = data.regions;
         var selector = data.settings.regionContentSelector;
+        // regions are defined in "a" tags
         var $content = data.$elem.contents(selector).contents('a');
         console.debug("createRegionsFromHTML", $content);
         $content.each(function(index, a) {
             var $a = $(a); 
-            var href = $a.attr('href');
+            // the "rel" attribute has area coords
             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);
+            var href = $a.attr('href');
+            var text = $a.text();
             $regionDiv.append($a.clone());
             // $a.show();
         });
     };
 
     // show a region on top of the scaler image 
-    var showRegionDiv = function (data, index, anim) {
+    var renderRegion = function (data, index, anim) {
         if (!data.imgTrafo) return;
         var $elem = data.$elem;
         var regions = data.regions;
@@ -266,8 +269,8 @@
         var region = regions[index]
         var $regionDiv = region.$div;
         if (!$regionDiv) {
-            console.debug("showRegionDiv: region has no $div", region);
-            // alert("showRegionDiv: region has no $div to show");
+            console.debug("renderRegion: region has no $div", region);
+            // alert("renderRegion: region has no $div to show");
             return;
         }
         var regionRect = region.copy();
@@ -275,6 +278,8 @@
         if (show && data.zoomArea.overlapsRect(regionRect)) {
             regionRect.clipTo(data.zoomArea);
             var screenRect = data.imgTrafo.transform(regionRect);
+            // console.debug('renderRegion:', screenRect, regionRect, "imgTrafo=", data.imgTrafo);
+            console.debug("renderRegion: mpos=",geom.position(screenRect));
             screenRect.adjustDiv($regionDiv);
             if (anim) {
                 $regionDiv.fadeIn();
@@ -291,9 +296,9 @@
     };
 
     // show regions 
-    var showRegionDivs = function (data, anim) {
+    var renderRegions = function (data, anim) {
         for (var i = 0; i < data.regions.length ; i++) {
-            showRegionDiv(data, i, anim);
+            renderRegion(data, i, anim);
         }
     };
 
@@ -336,7 +341,7 @@
 
     // reload display after a region has been added or removed
     var redisplay = function (data) {
-        if (!data.settings.includeRegionContent) {
+        if (!data.settings.hasRegionContent) {
             packRegions(data);
         }
         fn.redisplay(data);
@@ -364,7 +369,7 @@
         data = this;
         console.debug("regions: handleSetup", data.settings.rg);
         // regions with content are given in HTML divs
-        if (data.settings.includeRegionContent) {
+        if (data.settings.hasRegionContent) {
             createRegionsFromHTML(data);
         // regions are defined in the URL
         } else {
@@ -377,18 +382,18 @@
     // event handler, sets buttons and shows regions
     var handleUpdate = function (evt) {
         data = this;
+        console.debug("regions: handleUpdate");
         var settings = data.settings;
         fn.highlightButtons(data, 'regions' , settings.isRegionVisible);
         fn.highlightButtons(data, 'regionhtml' , settings.showRegionHTML);
-        showRegionDivs(data);
-        console.debug("regions: handleUpdate", settings.rg);
+        renderRegions(data);
     };
 
     // event handler, redisplays regions (e.g. in a new position)
     var handleRedisplay = function (evt) {
         data = this;
-        showRegionDivs(data);
         console.debug("regions: handleRedisplay");
+        renderRegions(data);
     };
 
     // event handler
@@ -428,9 +433,10 @@
         $data.bind('redisplay', handleRedisplay);
         $data.bind('dragZoom', handleDragZoom);
         var settings = data.settings;
-        var hasRegionContent = settings.includeRegionContent;
-        // no URL-defined regions, no buttons when regions are predefined in HTML
-        if (!hasRegionContent) {
+        var selector = data.settings.regionContentSelector;
+        settings.hasRegionContent = $elem.has(selector).length > 0;
+        // neither URL-defined regions nor buttons when regions are predefined in HTML
+        if (!settings.hasRegionContent) {
             var mode = settings.interactionMode;
             // add "rg" to digilibParamNames
             settings.digilibParamNames.push('rg');