Mercurial > hg > digilib-old

changeset 670:11d96bc0ac09 jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
birdview: nice animation for embedded mode, none for fullscreen
author hertzhaft
date Mon, 24 Jan 2011 23:07:57 +0100
parents b93241aa017c
children a53c3e12995a
files client/digitallibrary/jquery/jquery-test-embedded.html client/digitallibrary/jquery/jquery-test-full.html client/digitallibrary/jquery/jquery.digilib.js
diffstat 3 files changed, 39 insertions(+), 16 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-embedded.html	Mon Jan 24 09:49:49 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-embedded.html	Mon Jan 24 23:07:57 2011 +0100
@@ -1,7 +1,7 @@
 <!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>
-        <title>Digilib jQuery Test HTML</title>
+        <title>Digilib jQuery Test: embedded</title>
 
         <style type="text/css">
             body {
--- a/client/digitallibrary/jquery/jquery-test-full.html	Mon Jan 24 09:49:49 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Mon Jan 24 23:07:57 2011 +0100
@@ -2,7 +2,7 @@
 <!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>
-        <title>Digilib jQuery Test HTML</title>
+        <title>Digilib jQuery Test: fullscreen</title>
 
         <style type="text/css">
             body {
--- a/client/digitallibrary/jquery/jquery.digilib.js	Mon Jan 24 09:49:49 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Mon Jan 24 23:07:57 2011 +0100
@@ -611,11 +611,7 @@
             // embedded mode -- just change img src
             var url = getScalerUrl(data);
             data.$img.attr('src', url);
-            var $birdImg = data.$birdImg;
-            if ($birdImg) {
-                $birdImg.triggerHandler('load');
-                };
-        }
+            };
     };
 
     // returns maximum size for scaler img in fullscreen mode
@@ -731,12 +727,16 @@
         // the bird's eye div
         var $birdDiv = $('<div class="birdview" style="display:none"/>');
         // the detail indicator frame
-        var $birdzoomDiv = $('<div class="birdzoom" style="position: absolute; background-color: transparent;"/>');
+        var $birdzoomDiv = $('<div class="birdzoom" style="display:none; position:absolute; background-color:transparent;"/>');
         // the small image
         var $birdImg = $('<img class="birdimg"/>');
         $elem.append($birdDiv);
         $birdDiv.append($birdzoomDiv);
         $birdDiv.append($birdImg);
+        $birdzoomDiv.css(data.settings.birdIndicatorStyle);
+        // $birdzoomDiv.offset($birdDiv.offset());
+        // $birdzoomDiv.width($birdDiv.width());
+        // $birdzoomDiv.height($birdDiv.height());
         data.$birdDiv = $birdDiv;
         data.$birdImg = $birdImg;
         $birdImg.load(birdImgLoadedHandler(data));
@@ -828,6 +828,10 @@
             // display marks
             renderMarks(data);
             //digilib.showArrows(); // show arrow overlays for zoom navigation
+            var $birdImg = data.$birdImg;
+            if ($birdImg) {
+                $birdImg.triggerHandler('load');
+                };
         };
     };
 
@@ -836,7 +840,7 @@
         var $img = data.$birdImg;
         return function () {
             if (!$img) return;
-            console.debug("birdimg loaded! this=", this, " data=", data);
+            // console.debug("birdimg loaded! this=", this, " data=", data);
             // create Transform from current area and picsize
             data.birdTrafo = getImgTrafo($img, MAX_ZOOMAREA);
             // display red indicator around zoomarea
@@ -867,13 +871,32 @@
         var $ind = data.$birdDiv.find('div.birdzoom');
         var zoomArea = data.zoomArea;
         var indRect = data.birdTrafo.transform(zoomArea);
-        if (isFullArea(zoomArea)) return $ind.hide(); 
-        // TODO: set the coordinates all in one call?
-        $ind.width(indRect.width);
-        $ind.height(indRect.height);
-        // offset minus frame width
-        $ind.offset({ left : indRect.x-2, top : indRect.y-2 });
-        $ind.css(data.settings.birdIndicatorStyle);
+        var coords = {
+            left : indRect.x-2, // acount for frame width
+            top : indRect.y-2,
+            width : indRect.width,
+            height: indRect.height
+            };
+        var normalSize = isFullArea(zoomArea);
+        if (data.settings.interactionMode === 'fullscreen') {
+            // no animation for fullscreen
+            if (normalSize) return $ind.hide(); 
+            $ind.width(coords.width);
+            $ind.height(coords.height);
+            $ind.offset(coords);
+            $ind.show();
+            return;
+            };
+        // nice animation for embedded mode :-)
+        var makeCompleteFunction = function($ind, normalSize) {
+            return function() { 
+                if (normalSize) $ind.hide(); }
+            };
+        var opts = {
+            'complete' : makeCompleteFunction($ind, normalSize)
+            };
+        if (!normalSize && $ind.css('display') === 'none') $ind.show();
+        $ind.animate(coords, opts);
     };
 
     // zooms by the given factor