From: Richard Worth <rdworth@gmail.com>
Date: Sat, 24 May 2008 20:52:04 +0000 (+0000)
Subject: tests automated draggable - improved to work in IE6, FF2, Safari, Opera
X-Git-Tag: 1.5.1~324
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=9449c3f2b1589b8ac83cc4fe3c8bbdbd47b9f4d6;p=jquery-ui.git

tests automated draggable - improved to work in IE6, FF2, Safari, Opera
---

diff --git a/ui/tests/autodrag.html b/ui/tests/autodrag.html
index 50ce36d3a..a262830db 100644
--- a/ui/tests/autodrag.html
+++ b/ui/tests/autodrag.html
@@ -3,17 +3,13 @@
 <head>
 	<title>Draggable - Automated Test Page</title>
 	<script type="text/javascript" src="../../jquery/jquery-1.2.5.js"></script>
+	<script type="text/javascript" src="jquery.pngfix.js"></script>
 	<script type="text/javascript" src="../../ui/source/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/source/ui.draggable.js"></script>
 
 <style type="text/css">
 
 html, body { height: 100%; }
-#realmouse { display: none; position: absolute; z-index: 1000; }
-#fakemouse { display: none; position: absolute; z-index: 2000; }
-.testing, .testing * { cursor: url(images/blank.cur), crosshair; }
-.testing #fakemouse { display: block !important; }
-.testing #realmouse { display: block !important; }
 #main { height: 100%; }
 #drag { width: 200px; height: 200px; background: #eef; }
 
@@ -23,29 +19,50 @@ html, body { height: 100%; }
 
 var mouseX = 0, mouseY = 0;
 
-$(function() {
-
-$(document).mousemove(function(e) {
-	if (e.originalEvent && e.originalEvent.isTrusted) {
+function trackMouse(e) {
+	if (e.isTrusted !== false) {
 		mouseX = e.pageX;
 		mouseY = e.pageY;
 	}
-});
+}
+
+$(function() {
+
+$(document).bind("mousemove", trackMouse);
 
 });
 
 function testMouse(type, el, x, y) {
-	var evt = document.createEvent("MouseEvents");
-	evt.initMouseEvent("mouse" + type, true, true, window, 0, 0, 0, x, y, false, false, false, false, 0, null);
-	el.dispatchEvent(evt);
+	var evt, e = {bubbles: true, cancelable: (type != "mousemove"), view: window, detail: 0,
+		screenX: 0, screenY: 0, clientX: x, clientY: y,
+		ctrlKey: false, altKey: false, shiftKey: false, metaKey: false,
+		button: 0, relatedTarget: null, isTrusted: false};
+	if ($.isFunction(document.createEvent)) {
+		evt = document.createEvent("MouseEvents");
+		if ($.isFunction(evt.initMouseEvent)) {
+			evt.initMouseEvent(type, e.bubbles, e.cancelable, e.view, e.detail,
+				e.screenX, e.screenY, e.clientX, e.clientY,
+				e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+				e.button, e.relatedTarget);
+		} else {
+			evt = document.createEvent("UIEvents");
+			evt.initEvent(type, bubbles, cancelable);
+			$.extend(evt, e);
+		}
+		el.dispatchEvent(evt);
+	} else if (document.createEventObject) {
+		evt = document.createEventObject();
+		$.extend(evt, e);
+		evt.button = 1;
+		el.fireEvent('on' + type, evt)  
+	}
 }
-function testMouseDown(el, x, y) { testMouse("down", el, x, y); }
-function testMouseMove(el, x, y) { testMouse("move", el, x, y); }
-function testMouseUp(el, x, y) { testMouse("up", el, x, y); }
+function testMouseDown(el, x, y) { testMouse("mousedown", el, x, y); }
+function testMouseMove(el, x, y) { testMouse("mousemove", el, x, y); }
+function testMouseUp(el, x, y) { testMouse("mouseup", el, x, y); }
 
 function draggableTest(el, dx, dy) {
-	var realmouse = $("#realmouse");
-	
+
 	var findCenter = function(el, offset) {
 		var o = el.offset();
 		return {
@@ -58,44 +75,55 @@ function draggableTest(el, dx, dy) {
 	var left = center.x;
 	var top = center.y;
 
-	var fakemouse = $('<img src="images/cursor.png" id="fakemouse>');
-	var realmouse = $('<img src="images/cursor.png" id="realmouse>');
+	var fakemouse = $('<img src="images/cursor.png" id="fakemouse"/>');
+	var realmouse = $('<img src="images/cursor.png" id="realmouse"/>');
+	if ($.browser.msie && $.browser.version == 6) {
+		fakemouse = $('<div id="fakemouse" style="height:23;width:16;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/cursor.png\', sizingMethod=\'scale\');" ></div>');
+		realmouse = $('<div><div id="realmouse" style="height:23;width:16;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/cursor.png\', sizingMethod=\'scale\');" ></div></div>');
+	}
 	var mousescreen = $('<div id="mousescreen"/>');
-
+	
 	var testStart = function() {
-		fakemouse.appendTo('body').css({ left: mouseX, top: mouseY, opacity: 1.0 });
-		realmouse.appendTo('body').css({ left: mouseX, top: mouseY, opacity: 0.2 })
+		fakemouse.appendTo('body').css({ position: 'absolute', left: mouseX, top: mouseY, zIndex: 5000 });
+		realmouse.appendTo('body').css({ position: 'absolute', left: mouseX, top: mouseY, zIndex: 5000, opacity: 0.1 })
 			.mousedown(function() { return false; });
 		mousescreen.appendTo('body').css({ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0, zIndex: 5000 })
 			.mousemove(function(e) { realmouse.css({ left: e.pageX, top: e.pageY }); return false; })
 			.mousedown(function() { return false; })
-			.mouseup(function() { return false; })
-		$("body").addClass("testing");
+			.mouseup(function() { return false; });
+		(!$.browser.safari && mousescreen.css({ cursor: 'url(images/blank.cur), auto' }));
 	}
 	var testStop = function() {
-		$("body").removeClass("testing");
 		mousescreen.remove();
+		mouseX = realmouse.css("left");
+		mouseY = realmouse.css("top");
 		realmouse.remove();
 		fakemouse.remove();
 	}
-
+	
 	testStart();
 
 	var lastX = null;
+
 	fakemouse
-		.animate({ left: left, top: top, opacity: 1.0 }, "fast", function() {
+		.animate({ left: left, top: top }, "fast", function() {
 			testMouseDown(el, left, top);
+			testMouseMove(el, left, top);
 		})
 		.animate({ left: left + dx, top: top + dy }, {
 			speed: "fast",
 			easing: "swing",
 			step: function (xory) {
-				if (!lastX) { lastX = xory; }
-				else { testMouseMove(el, lastX, xory); lastX = null; }
+				if (!lastX) {
+					lastX = xory;
+				} else {
+					testMouseMove(el, lastX, xory);
+					lastX = null;
+				}
 			},
 			complete: function() {
 				testMouseUp(el, 0, 0);
-				$(this).animate({ left: realmouse.css("left"), top: realmouse.css("top"), opacity: 1.0 }, {
+				$(this).animate({ left: realmouse.css("left"), top: realmouse.css("top") }, {
 					speed: "fast",
 					complete: function() {
 						testStop();
@@ -103,6 +131,7 @@ function draggableTest(el, dx, dy) {
 				})
 			}
 		});
+
 }
 
 </script>
