Mercurial > hg > digilib-old

changeset 522:688620e8c015

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
drag zoomed image to new position
author hertzhaft
date Tue, 08 Sep 2009 19:50:27 +0200
parents 8b5d012e4d1b
children 7be5771b6473
files client/digitallibrary/greyskin/diginew.css client/digitallibrary/greyskin/diginew.jsp client/digitallibrary/greyskin/dllib.js
diffstat 3 files changed, 61 insertions(+), 38 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/greyskin/diginew.css	Tue Sep 08 14:19:58 2009 +0200
+++ b/client/digitallibrary/greyskin/diginew.css	Tue Sep 08 19:50:27 2009 +0200
@@ -6,6 +6,9 @@
 	background-color: #E0E0E0;
 	color: black;
 	font-size: 8pt;
+	margin: 8px 0px 0px 8px;
+	padding: 0px;
+	overflow: hidden;
 	}
 
 code {
@@ -92,18 +95,31 @@
 	padding-top: 1px;
 	text-align: center;
 	z-index: 10;
+	visibility: hidden;
 	/* filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mark-bg-16.png') */
 	}
 		
+div#bg {
+	position: absolute;
+	background-color: grey;
+    background-repeat:no-repeat;
+    cursor: move;
+    visibility: hidden;
+}
+	
 div#scaler {
 /*	position: absolute;
 	left: 8px;
 	top: 8px;
-	bottom: 30px;
+	bottom: 8px;
 	right: 44px;
 */	/* overflow: auto; */
 	}
 
+div#scaler img {
+    cursor: default;
+}
+
 div#overlay, div#bird-overlay {
 	position: fixed;
 	background-color: transparent;
@@ -137,8 +153,8 @@
 	position: absolute;
 	/* border: 2px solid #ffa060; */
 	border: 2px solid #ff0000;
+	z-index: 200;
 	visibility: hidden;
-	z-index: 200;
 	/* box-sizing: border-box;
 	-moz-box-sizing: border-box; */
 	}
@@ -147,11 +163,11 @@
 	position: fixed;
 	/* border: 2px solid #ffa060; */
 	border: 2px solid #ff0000;
-	visibility: hidden;
 	background-color: transparent;
 	/* box-sizing: border-box;
 	-moz-box-sizing: border-box; */
 	z-index: 10;
+	visibility: hidden;
 	}
 
 div#calibration {
--- a/client/digitallibrary/greyskin/diginew.jsp	Tue Sep 08 14:19:58 2009 +0200
+++ b/client/digitallibrary/greyskin/diginew.jsp	Tue Sep 08 19:50:27 2009 +0200
@@ -45,7 +45,7 @@
 
 	<script language="JavaScript">
 
-	var jspVersion = "diginew.jsp 1.022";
+	var jspVersion = "diginew.jsp 1.023";
 	var cookie = new Cookie();
 	// alert(strObject(cookie));
 
@@ -131,6 +131,9 @@
 
 <body onload="onBodyLoad();" onunload="onBodyUnload();">
  <!-- slot for the scaled image -->
+ 
+ <div id="bg"></div>
+ 
  <div id="scaler">
 	<img id="pic"></img>
  </div>
--- a/client/digitallibrary/greyskin/dllib.js	Tue Sep 08 14:19:58 2009 +0200
+++ b/client/digitallibrary/greyskin/dllib.js	Tue Sep 08 19:50:27 2009 +0200
@@ -24,7 +24,7 @@
   ! Requires baselib.js !
 */
 digilibVersion = "Digilib NG";
-dllibVersion = "2.041";
+dllibVersion = "2.042";
 
 function identify() {
         // used for identifying a digilib instance
@@ -44,8 +44,10 @@
 function bestPicSize(elem, inset) {
     // returns a Size with the best image size for the given element
     if (! defined(inset)) {
-        inset = 25;
-    }
+        inset = 0; 
+        // original value was 25 
+        // digilib seems to use the available space better without inset
+        }
     var ws = getWinSize();
     var es = getElementPosition(elem);
     if (es) {
@@ -352,8 +354,9 @@
         //digilib.moveCenter(true);	// click to move point to center
         // new Slider("sizes", 1, 5, 2);
         
-        //Drag Image (6.9.2009, not yet working)
-        //registerEvent("mousedown", digilib.scalerDiv, dragImage);
+        //Drag Image (8.9.2009)
+        if (!digilib.isFullArea())
+            registerEvent("mousedown", digilib.scalerDiv, dragImage);
 
         focus();
     }
@@ -437,50 +440,51 @@
     // makes sense only when zoomed
     if (this.isFullArea())
         return;
+    if(evt.preventDefault) evt.preventDefault(); // no Firefox drag and drop
+	var digilib = this; // our own reference to this for the local function
     var startPos = evtPosition(evt);
-    var picRect = getElementRect(this.scalerImg);
-    var newRect;  // position after drag
+    var pic = this.scalerImg;
+    var picRect = getElementRect(pic);
+     // fit the grey div to the scaler image
+    var div = getElement("bg");
+    var dx = 0;
+    var dy = 0;
+    moveElement(div, picRect);
+    // hide the scaler image, show it as background of div instead
+    showElement(pic, false); 
+    showElement(div, true);
+    div.style.backgroundImage = "url(" + pic.src + ")";
+    div.style.cursor = "move";
     // start event capturing
     registerEvent("mousemove", document, moveDragEvent);
     registerEvent("mouseup", document, moveEndEvent);
     window.focus();
-    
-	// our own reference to this for the local function
-	var digilib = this;
 
 	function moveDragEvent(evt) {
     // mousemove handler: drag
         var pos = evtPosition(evt);
-        var dx = pos.x - startPos.x;
-        var dy = pos.y - startPos.y;
-        // move scalerImg div
-        newRect = new Rectangle(
-            picRect.x + dx,
-            picRect.y + dy,
-            picRect.width,
-            picRect.height);
-        // move scalerImg to new position
-        moveElement(this.scalerImg, newRect);
+        // don't use Firefox Drag and Drop feature 
+        if(evt.preventDefault) evt.preventDefault();
+        dx = pos.x - startPos.x;
+        dy = pos.y - startPos.y;
+        // move the background image to the new position
+        div.style.backgroundPosition = dx + "px " + dy + "px";
         return stopEvent(evt);
 	    }
 
 	function moveEndEvent(evt) {
-    // mouseup handler: reload page
+    // mouseup handler: reload digilib
+        div.style.cursor = "default";
         unregisterEvent("mousemove", document, moveDragEvent);
         unregisterEvent("mouseup", document, moveEndEvent);
-        if (newRect == null) { // no movement happened
-            return stopEvent(evt);
-            }
-        var newX = cropFloat(newRect.x - picRect.x);
-        var newY = cropFloat(newRect.y - picRect.y);
-        // if (newX < 0) newX = 0; 
-        // if (newY < 0) newY = 0; 
-        digilib.params.set("wx", newX);
-        digilib.params.set("wy", newY);
-        // zoomed is always fit
-        // digilib.params.set("ws", 1);
-        digilib.display();
-        return stopEvent(evt);
+        // calculate relative offset
+        var x = -dx / pic.width;
+        var y = -dy / pic.height;
+        stopEvent(evt);
+        if (dx == 0 && dy == 0)
+            return // no movement
+        // reload with scaler image showing the new ausschnitt
+        return digilib.moveBy(x, y);
     }
 }