Mercurial > hg > digilib-old

changeset 655:72acc47f1831 jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
first try at birdview indicator
author hertzhaft
date Fri, 21 Jan 2011 00:33:33 +0100
parents b21c1a539af3
children 436e10669df8
files client/digitallibrary/jquery/dlGeometry.js client/digitallibrary/jquery/jquery-test-full.html client/digitallibrary/jquery/jquery.digilib.js
diffstat 3 files changed, 58 insertions(+), 19 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/dlGeometry.js	Thu Jan 20 20:21:11 2011 +0100
+++ b/client/digitallibrary/jquery/dlGeometry.js	Fri Jan 21 00:33:33 2011 +0100
@@ -255,7 +255,7 @@
             that.getRotation = transform.getRotation;
             that.getTranslation = transform.getTranslation;
             that.getScale = transform.getScale;
-            
+
             return that;
         };
 
--- a/client/digitallibrary/jquery/jquery-test-full.html	Thu Jan 20 20:21:11 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Fri Jan 21 00:33:33 2011 +0100
@@ -50,6 +50,10 @@
                 z-index: 1000;
                 }
 
+            div.birdzoom {
+                border: 2px solid yellow;
+                }
+
         </style>
 
         <script type="text/javascript" src="jquery-1.4.4.js"></script>
--- a/client/digitallibrary/jquery/jquery.digilib.js	Thu Jan 20 20:21:11 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Fri Jan 21 00:33:33 2011 +0100
@@ -2,7 +2,7 @@
  * digilib jQuery plugin
  *
  */
-    
+
 // fallback for console.log calls
 if (typeof(console) === 'undefined') {
     var console = {
@@ -198,12 +198,12 @@
         'isAboutDivVisible' : false
 
         };
- 
+
     // affine geometry classes
     var geom = dlGeometry();
-    
+
     var MAX_ZOOMAREA = geom.rectangle(0, 0, 1, 1);
-    
+
     var actions = {
             // digilib initialization
             init : function(options) {
@@ -283,9 +283,11 @@
                     // no bird div -> create
                     setupBirdDiv(data);
                 }
+                // TODO: keep bird view visible after reload (parameter, cookie?)
                 data.settings.isBirdDivVisible = showDiv(data.settings.isBirdDivVisible, data.$birdDiv, show);
+                showBirdIndicator(data);
             },
-            
+
             // goto given page nr (+/-: relative)
             gotoPage : function (data, pageNr) {
                 var settings = data.settings;
@@ -310,7 +312,7 @@
                 // then reload
                 redisplay(data);
             },
-            
+
             // zoom by a given factor
             zoomBy : function (data, factor) {
                 zoomBy(data, factor);
@@ -356,7 +358,7 @@
     var parseQueryParams = function() {
         return parseQueryString(window.location.search.slice(1));
     };
-        
+
     // returns parameters from embedded img-element
     var parseImgParams = function($elem) {
         var src = $elem.find('img').first().attr('src');
@@ -430,7 +432,7 @@
         return newurl;
     };
 
-    // processes some parameters into objects and stuff     
+    // processes some parameters into objects and stuff
     var unpackParams = function (data) {
         var settings = data.settings;
         // zoom area
@@ -471,8 +473,8 @@
             }
         }
         data.dlOpts = opts;
-    };    
-         
+    };
+
     // put objects back into parameters
     var packParams = function (data) {
         var settings = data.settings;
@@ -516,7 +518,7 @@
             settings.clop = clop;
         }
     };
-    
+
     // returns maximum size for scaler img in fullscreen mode
     var getFullscreenImgSize = function($elem) {
         var winH = $(window).height();
@@ -524,7 +526,7 @@
         // TODO: account for borders?
         return geom.size(winW, winH);
     };
-    
+
     // (re)load the img from a new scaler URL
     var redisplay = function (data) {
         var settings = data.settings; 
@@ -643,7 +645,7 @@
         // the bird's eye div
         var $birdviewDiv = $('<div class="birdview" style="display:none"/>');
         // the detail indicator frame
-        var $birdzoomDiv = $('<div class="birdzoom"/>');
+        var $birdzoomDiv = $('<div class="birdzoom" style="position: absolute; background-color: transparent;"/>');
         // the small image
         var $birdImg = $('<img class="birdimg"/>');
         $elem.append($birdviewDiv);
@@ -698,12 +700,38 @@
         return isVisible;
     };
 
+    // shows bird view indicator
+    var showBirdIndicator = function (data) {
+        if (!data.settings.isBirdDivVisible || isFullArea(data)) return;
+        // TODO: more conditions: original size, pixel by pixel?
+        var $birdDiv = data.$birdDiv;
+        var $birdImg = $birdDiv.find('img.birdimg');
+        var pos = $birdImg.offset();
+        var birdRect = geom.rectangle(pos.left, pos.top, $birdImg.width(), $birdImg.height());
+        var area = data.zoomArea;
+        // TODO: couldn't we do a trafo here? :-)
+  		var indRect = geom.rectangle(
+  		    birdRect.x + birdRect.width  * area.x,
+	        birdRect.y + birdRect.height * area.y,
+	        birdRect.width  * area.width,
+	        birdRect.height * area.height
+	        );
+        var $ind = $birdDiv.find('div.birdzoom');
+        // TODO: set the coordinates all in one call?
+        $ind.width(indRect.width);
+        $ind.height(indRect.height);
+        $ind.offset({ left : indRect.x, top : indRect.y });
+        // TODO: how to override this style with a CSS stylesheet?
+        if (!$ind.css('border')) $ind.css('border', '2px solid #ff0000');
+        return;
+    };
+
     // returns function for load event of scaler img
     var scalerImgLoadedHandler = function (data) {
         var settings = data.settings;
         var $elem = data.$elem;
         var $img = data.$img;
-        
+
         return function () {
             console.debug("img loaded! this=", this, " data=", data);
             var area = data.zoomArea;
@@ -724,6 +752,7 @@
             // done -- hide about div --- 
             // --- why? This only leads to suprise effects when displayed programmatically
             // settings.isAboutDivVisible = showDiv(null, data.$aboutDiv, 0);
+            showBirdIndicator(data);
         };
     };
 
@@ -744,7 +773,7 @@
             }
         }
     };
-    
+
     // zooms by the given factor
     var zoomBy = function(data, factor) {
         var area = data.zoomArea;
@@ -791,17 +820,23 @@
         }
         return settings[key];
     };
-        
+
+    // auxiliary function (from old dllib.js)
+    isFullArea = function(data) {
+        var area = data.zoomArea;
+        return (area.width == 1.0) && (area.height == 1.0);
+    };
+
     // auxiliary function (from Douglas Crockford, A.10)
     var isNumber = function isNumber(value) {
             return typeof value === 'number' && isFinite(value);
     };
-    
+
     // auxiliary function to crop senseless precision
     var cropFloat = function (x) {
         return parseInt(10000 * x, 10) / 10000;
     };
-    
+
     // hook plugin into jquery
     $.fn.digilib = function(action) {
         if (actions[action]) {