Mercurial > hg > digilib-old

changeset 862:7ebdc106a61a jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
second step towards zoom arrows
author hertzhaft
date Wed, 09 Mar 2011 00:39:17 +0100
parents 5795b9cae183
children 5431156f7b9d 44ee29f20791
files client/digitallibrary/jquery/jquery-test-full.html client/digitallibrary/jquery/jquery.digilib.css client/digitallibrary/jquery/jquery.digilib.js client/digitallibrary/jquery/jquery.digilib.regions.js
diffstat 4 files changed, 62 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-full.html	Tue Mar 08 09:07:07 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Wed Mar 09 00:39:17 2011 +0100
@@ -86,11 +86,13 @@
             <img src="http://digilib.biblhertz.it/digilib04/servlet/Scaler?dw=200&amp;dh=200&amp;fn=/digisprint/jquery/FransHals-WillemVanHeythuysen" />
         </div>
         <div id="debug">DEBUG</div>
+        <!-- 
         <div class="keep regioncontent">
             <a href="http://www.mpiwg-berlin.mpg.de" coords="0.1,0.1,0.4,0.1">MPI fuer Wissenschaftsgeschichte</a>
             <a href="http://www.biblhertz.it" coords="0.5,0.8,0.4,0.1">Bibliotheca Hertziana</a>
             <a coords="0.3,0.5,0.15,0.1" />
         </div>
+         -->
     </body>
 </html>
 
--- a/client/digitallibrary/jquery/jquery.digilib.css	Tue Mar 08 09:07:07 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css	Wed Mar 09 00:39:17 2011 +0100
@@ -126,6 +126,17 @@
     margin-bottom: 20px;
 }
 
+div.arrow {
+    position: absolute;
+    text-align: center;
+    background-color: black;
+    opacity: 0.08;
+}
+
+div.arrow:hover {
+    opacity: 0.5;
+}
+
 /* special definitions for fullscreen */
 div.digilib.dl_fullscreen div.buttons {
 	position: fixed;
--- a/client/digitallibrary/jquery/jquery.digilib.js	Tue Mar 08 09:07:07 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Wed Mar 09 00:39:17 2011 +0100
@@ -231,7 +231,7 @@
         // arrow overlays for moving the zoomed area
         'zoomArrows' : true,
         // zoom arrow image info
-        'zoomArrowImg' : {
+        'zoomArrowsInfo' : {
              // path to arrow images (must end with a slash)
             'imagePath' : 'img/',
             // minimal width of the arrow bar (pixel)
@@ -928,6 +928,7 @@
         updateImgTrafo(data);
         renderMarks(data);
         setupZoomDrag(data);
+        renderZoomArrows(data);
         // send event
         $(data).trigger('update');
     };
@@ -1078,8 +1079,53 @@
         var show = settings.zoomArrows;
         console.log('zoom arrows:', show);
         if (!show) return;
+        data.$arrows = {};
+        var $arrows = data.$arrows;
+        var info = settings.zoomArrowsInfo;
+        $.each(['up','down','left','right'], function(i, s){
+            var src = info.imagePath + info[s];
+            var $div = $('<div class="keep arrow arrow-' + s + '"/>');
+            var $img = $('<img src="' + src + '"/>');
+            $div.attr('title', s);
+            $img.attr('alt', s);
+            $div.append($img);
+            $elem.append($div);
+            $arrows[s] = $div;
+        });
+        $arrows.up.bind('click.digilib', function(event) {
+            //za.addPosition(delta.neg());
+            // transform back
+            // var newArea = data.imgTrafo.invtransform(za);
+            // data.zoomArea = FULL_AREA.fit(newArea);
+            redisplay(data);
+        });
+        $arrows.down.bind('click.digilib', function(event) {
+            redisplay(data);
+        });
+        $arrows.left.bind('click.digilib', function(event) {
+            redisplay(data);
+        });
+        $arrows.right.bind('click.digilib', function(event) {
+            redisplay(data);
+        });
     };
 
+    // size and show arrow overlays, called after scaler img is loaded
+    var renderZoomArrows = function (data) {
+        var $arrows = data.$arrows;
+        var r = FULL_AREA.copy();
+        r.height = 0.05;
+        data.imgTrafo.transform(r).adjustDiv($arrows.up);
+        r.y = 0.95;
+        data.imgTrafo.transform(r).adjustDiv($arrows.down);
+        r = FULL_AREA.copy();
+        r.width = 0.05;
+        data.imgTrafo.transform(r).adjustDiv($arrows.left);
+        r.x = 0.95;
+        data.imgTrafo.transform(r).adjustDiv($arrows.right);
+    };
+
+
     // creates HTML structure for the about view in elem
     var setupAboutDiv = function (data) {
         var $elem = data.$elem;
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js	Tue Mar 08 09:07:07 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.regions.js	Wed Mar 09 00:39:17 2011 +0100
@@ -227,7 +227,7 @@
     var regionInfoSVG = function (data) {
         var $infoDiv = $('<div class="info svgattr"/>');
         $.each(data.regions, function(index, r) {
-            var area = [r.x, r.y, r.width, r.height].join(' ');
+            var area = r.getAsSvg();
             $infoDiv.append($('<div/>').text('"' + area + '"'));
             });
         return $infoDiv;
@@ -237,7 +237,7 @@
     var regionInfoDigilib = function (data) {
         var $infoDiv = $('<div class="info digilib"/>');
         $.each(data.regions, function(index, r) {
-            var area = r.width + 'x' + r.height + '@' + r.x + ',' + r.y;
+            var area = r.toString();
             $infoDiv.append($('<div/>').text(area));
             });
         return $infoDiv;