Mercurial > hg > digilib-old

changeset 775:65cdf970934d jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
minor precisations
author hertzhaft
date Fri, 11 Feb 2011 23:11:04 +0100
parents 6d7c51e4724b
children e49beded69d7
files client/digitallibrary/jquery/jquery-test-full.html client/digitallibrary/jquery/jquery.digilib.js client/digitallibrary/jquery/svg/svgBasics.html
diffstat 3 files changed, 102 insertions(+), 35 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-full.html	Thu Feb 10 22:46:17 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Fri Feb 11 23:11:04 2011 +0100
@@ -6,7 +6,7 @@
 
         <style type="text/css">
             body {
-                 background: silver;
+                 background: grey;
             }
 
             div.digilib {
--- a/client/digitallibrary/jquery/jquery.digilib.js	Thu Feb 10 22:46:17 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js	Fri Feb 11 23:11:04 2011 +0100
@@ -234,7 +234,7 @@
                 'buttonSets' : ['standardSet', 'specialSet']
                 }
         },
-        
+
         // number of visible button groups
         'visibleButtonSets' : 1,
         // is birdView shown?
@@ -244,10 +244,6 @@
         'birdDivHeight' : 200,
         // parameters used by bird's eye div
         'birdDivParams' : ['fn','pn','dw','dh'],
-        // style of the zoom area indicator in the bird's eye div 
-        'birdIndicatorStyle' : {'border' : '2px solid #ff0000' },
-        // style of zoom area "rubber band"
-        'zoomrectStyle' : {'border' : '2px solid #ff0000' },
         // is the "about" window shown?
         'isAboutDivVisible' : false,
         // maximum width of background image for drag-scroll
@@ -607,7 +603,7 @@
         calibrate : function (data) {
             loadImageInfo(data);
         },
-        
+
         // set image scale mode
         setScaleMode : function (data, mode) {
             var oldM = getScaleMode(data);
@@ -620,7 +616,7 @@
                 redisplay(data);
             }
         }
-        
+
     // end of actions
     };
 
@@ -743,7 +739,7 @@
             }
         });
     };
-    
+
     // processes some parameters into objects and stuff
     var unpackParams = function (data) {
         var settings = data.settings;
@@ -900,7 +896,7 @@
         }
         // TODO: update event subscriber?
     };
-    
+
     // returns maximum size for scaler img in fullscreen mode
     var getFullscreenImgSize = function ($elem) {
         var $win = $(window);
@@ -1041,7 +1037,7 @@
         $elem.append($birdDiv);
         $birdDiv.append($birdZoom);
         $birdDiv.append($birdImg);
-        $birdZoom.css(data.settings.birdIndicatorStyle);
+        // $birdZoom.css(data.settings.birdIndicatorStyle);
         var birdUrl = getBirdImgUrl(data);
         $birdImg.load(birdImgLoadedHandler(data));
         $birdImg.error(function () {console.error("error loading birdview image");});
@@ -1082,12 +1078,11 @@
         $logo.attr('src', settings.logoUrl);
         $link.attr('href', settings.homeUrl);
         $content.text('Version: ' + settings.version);
+        data.$aboutDiv = $aboutDiv;
         // click hides
-        $aboutDiv.bind('click.digilib', function () { 
-            settings.isAboutDivVisible = showDiv(settings.isAboutDivVisible, $aboutDiv, 0);
-            return false;
+        $aboutDiv.bind('click.digilib', function () {
+            actions['showAboutDiv'](data, false);
             });
-        data.$aboutDiv = $aboutDiv;
     };
 
     // shows some window e.g. 'about' (toggle visibility if show is null)
@@ -1171,7 +1166,7 @@
         highlight('quality', flags.q1 || flags.q2);
         highlight('zoomin', ! isFullArea(data.zoomArea));
         };
-        
+
     // create Transform from area and $img
     var getImgTrafo = function ($img, area, rot, hmir, vmir, mode, imgInfo) {
         var picrect = geom.rectangle($img);
@@ -1227,7 +1222,7 @@
             // console.debug("imgTrafo=", data.imgTrafo);
         }
     };
-    
+
     // returns function for load event of scaler img
     var scalerImgLoadedHandler = function (data) {
         return function () {
@@ -1299,7 +1294,8 @@
         var zoomRect = data.birdTrafo.transform(zoomArea);
         console.debug("renderBirdArea:", zoomRect, "zoomArea:", zoomArea, "$birdTrafo:", data.birdTrafo);
         // acount for border width
-        zoomRect.addPosition({x : -2, y : -2});
+        var bw = getBorderWidth($birdZoom);
+        zoomRect.addPosition({x : -bw, y : -bw});
         if (data.settings.interactionMode === 'fullscreen') {
             // no animation for fullscreen
             zoomRect.adjustDiv($birdZoom);
@@ -1356,7 +1352,7 @@
         var pt1, pt2;
         var $zoomDiv = $('<div class="zoomrect" style="display:none"/>');
         $elem.append($zoomDiv);
-        $zoomDiv.css(data.settings.zoomrectStyle);
+        // $zoomDiv.css(data.settings.zoomrectStyle);
         var picRect = geom.rectangle($scaler);
         // FIX ME: is there a way to query the border width from CSS info?
         // rect.x -= 2; // account for overlay borders
@@ -1422,6 +1418,7 @@
         var $document = $(document);
         var $scaler = data.$scaler;
         var startPos, newRect, birdImgRect, birdZoomRect, fullRect, scalerPos;
+        var bw = getBorderWidth($birdZoom);
 
         // mousedown handler: start dragging bird zoom to a new position
         var birdZoomStartDrag = function(evt) {
@@ -1461,7 +1458,7 @@
                 'background-position' : bgPos.x + "px " + bgPos.y + "px"
                 });
             // acount for border width
-            newRect.addPosition({x : -2, y : -2});
+            newRect.addPosition({x : -bw, y : -bw});
             newRect.adjustDiv($birdZoom);
             return false;
         };
@@ -1477,7 +1474,7 @@
                 birdZoomMove(evt); 
                 }
             // ugly, but needed to prevent double border width compensation
-            newRect.addPosition({x : +2, y : +2});
+            newRect.addPosition({x : bw, y : bw});
             var newArea = data.birdTrafo.invtransform(newRect);
             data.zoomArea = newArea;
             redisplay(data);
@@ -1501,8 +1498,10 @@
         // area = FULL_AREA.fit(part); // no, we want to see where we transcend the borders
         birdTrafo = getImgTrafo(data.$birdImg, FULL_AREA);
         var birdRect = birdTrafo.transform(part);
+        var $birdZoom = data.$birdZoom;
         // acount for border width
-        birdRect.addPosition({x : -2, y : -2});
+        var bw = getBorderWidth($birdZoom);
+        birdRect.addPosition({x : -bw, y : -bw});
         birdRect.adjustDiv(data.$birdZoom);
     };
 
@@ -1645,7 +1644,7 @@
         // mo=fit is default
         return 'screen';
     };
-    
+
     // set image scale mode (screen, pixel, size)
     var setScaleMode = function (data, mode) {
         delete data.scalerFlags.fit;
@@ -1658,7 +1657,7 @@
         }
         // mo=fit is default
     };
-    
+
      // sets a key to a value (relative values with +/- if relative=true)
     var setNumValue = function(settings, key, value) {
         if (value == null) return null;
@@ -1679,6 +1678,12 @@
         return settings[key];
     };
 
+    // auxiliary function, assuming equal border width on all sides
+    var getBorderWidth = function($elem) {
+        var border = $elem.outerWidth() - $elem.width();
+        return border/2;
+    };
+
     // auxiliary function (from old dllib.js)
     var isFullArea = function(area) {
         return (area.width === 1.0) && (area.height === 1.0);
--- a/client/digitallibrary/jquery/svg/svgBasics.html	Thu Feb 10 22:46:17 2011 +0100
+++ b/client/digitallibrary/jquery/svg/svgBasics.html	Fri Feb 11 23:11:04 2011 +0100
@@ -5,17 +5,24 @@
     <head>
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
         <title>jQuery SVG Basics</title>
-        <style type="text/css">
+
+<style type="text/css">
+
 @import "jquery.svg.css";
 
 #svgbasics { position: absolute; border: 1px solid blue; }
+
 #img img {width: 400px; }
 
-        </style>
-        <script type="text/javascript" src="../dlGeometry.js"></script>
-        <script type="text/javascript" src="../jquery-1.4.4.js"></script>
-        <script type="text/javascript" src="jquery.svg.js"></script>
-        <script type="text/javascript">
+</style>
+
+<script type="text/javascript" src="../dlGeometry.js"></script>
+<script type="text/javascript" src="../jquery-1.4.4.js"></script>
+<script type="text/javascript" src="jquery.svg.js"></script>
+<script type="text/javascript">
+
+var $resDiv;
+
 $(function() {
     var geom = dlGeometry();
     var svg = $('#svgbasics');
@@ -24,18 +31,37 @@
     divrect.addPosition({x: -1, y: -1}).adjustDiv(svg);
     svg.svg({onLoad: drawInitial});
 	$('button').click(drawShape);
+	$resDiv = $('div#res');
+	console.log($resDiv);
 });
 
 function drawInitial(svg) {
+    // svg.configure({viewBox: '0 0 400 300' }, true);
+    svg.configure({transform: 'scale(0.5)' }, true);
 	svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3});
 	var g = svg.group({stroke: 'black', 'stroke-width': 2});
 	svg.line(g, 15, 75, 135, 75);
 	svg.line(g, 75, 15, 75, 135);
-	svg.configure({viewPort: '0 0 100 100', overflow: 'visible' }, false);
+	var g = svg.group({stroke: 'yellow', 'stroke-width': 4});
+	svg.line(g, 0, 0, 400, 0);
+	svg.line(g, 0, 0, 0, 300);
+	svg.line(g, 400, 0, 400, 300);
+	svg.line(g, 400, 300, 0, 300);
+	// svg.configure({viewPort: '0 0 100 100', overflow: 'visible' }, false);
+
 }
 
 var colours = ['purple', 'red', 'orange', 'yellow', 'lime', 'green', 'blue', 'navy', 'black'];
 
+var x=0,y=0,w=400,h=300;
+
+function setViewBox(svg) {
+    var s = [x,y,w,h].join(' ');
+    svg.configure({viewBox: s }, true);
+    $resDiv.text(s);
+}
+
+
 function drawShape() {
 	var shape = this.id;
 	var svg = $('#svgbasics').svg('get');
@@ -61,9 +87,37 @@
 	else if (shape == 'clear') {
 		svg.clear();
 	}
-	else if (shape == 'zoom') {
-		svg.configure({viewBox: '0 0 800 1000'}, true);
-		//svg.animate({svgViewBox: '0, 0, 100, 100'}, 2000);
+	else if (shape == 'x+') {
+	    x+=10; 
+		setViewBox(svg);
+	}
+	else if (shape == 'x-') {
+	    x-=10; 
+		setViewBox(svg);
+	}
+	else if (shape == 'y+') {
+	    y+=10; 
+		setViewBox(svg);
+	}
+	else if (shape == 'y-') {
+	    y-=10; 
+		setViewBox(svg);
+	}
+	else if (shape == 'w+') {
+	    w+=10; 
+		setViewBox(svg);
+	}
+	else if (shape == 'w-') {
+	    w-=10; 
+		setViewBox(svg);
+	}
+	else if (shape == 'h+') {
+	    h+=10; 
+		setViewBox(svg);
+	}
+	else if (shape == 'h-') {
+	    h-=10; 
+		setViewBox(svg);
 	}
 	
 }
@@ -84,8 +138,16 @@
             <button id="line">Add line</button>
             <button id="circle">Add circle</button>
             <button id="ellipse">Add ellipse</button>
-            <button id="zoom">Zoom</button>
+            <button id="x+">x+</button>
+            <button id="x-">x-</button>
+            <button id="y+">y+</button>
+            <button id="y-">y-</button>
+            <button id="w+">w+</button>
+            <button id="w-">w-</button>
+            <button id="h+">h+</button>
+            <button id="h-">h-</button>
             <button id="clear">Clear</button>
         </p>
+        <div id="res"/>
     </body>
 </html>