From: Richard Worth <rdworth@gmail.com>
Date: Mon, 26 May 2008 12:41:59 +0000 (+0000)
Subject: Created ui.testMouse. Fixed none.png to work in Safari (needs at least one pixel... 
X-Git-Tag: 1.5.1~301
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=b6d16accb54d473d500831d091f237a7973d885e;p=jquery-ui.git

Created ui.testMouse. Fixed none.png to work in Safari (needs at least one pixel with 1% opacity)
---

diff --git a/ui/tests/autodrag.html b/ui/tests/autodrag.html
index 78caac169..044716f66 100644
--- a/ui/tests/autodrag.html
+++ b/ui/tests/autodrag.html
@@ -6,170 +6,33 @@
 	<script type="text/javascript" src="../../ui/source/ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/source/ui.draggable.js"></script>
 
+	<script type="text/javascript" src="ui.testmouse.js"></script>
+
 <style type="text/css">
 
-html, body { height: 95%; }
+html, body { height: 100%; }
 #main { height: 100%; }
-#drag { cursor: move; width: 200px; height: 200px; background: #eef; }
+.drag { position: relative; margin: 10px; padding: 10px; border: 3px solid black; cursor: move; width: 200px; height: 40px; background: #eef; }
 
 </style>
 
 <script type="text/javascript">
 
-var mouseX = 0, mouseY = 0;
-
-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, 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("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 findCenter = function(el, offset) {
-		var o = el.offset();
-		return {
-			x: (o.left + (offset || [0, 0])[0] || 0) + el.width() / 2,
-			y: (o.top + (offset || [0, 0])[1] || 0) + el.height() / 2
-		};
-	};
-
-	var center = findCenter($(el));
-	var left = center.x;
-	var top = center.y;
-
-	var OS = (/(win|mac|linux)/i.exec(navigator.platform) || ['other'])[0].toLowerCase();
-
-	var defaultUrl = ['cursors', OS == 'other' ? 'win' : OS, 'default.png'].join('/');
-	var cursorUrl = function() {
-		return ['cursors', OS == 'other' ? 'win' : OS, $(el).css('cursor') + '.png'].join('/');
-	}
-	var noneUrl = ['cursors', OS == 'other' ? 'win' : OS, 'none.cur'].join('/');
-
-	var fakemouse = $('<img src="' + defaultUrl + '" id="fakemouse" />');
-	var realmouse = $('<img src="' + defaultUrl + '" id="realmouse" />');
-	if ($.browser.msie && $.browser.version == 6) {
-		fakemouse = $('<div id="fakemouse" style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div>');
-		realmouse = $('<div><div id="realmouse" style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div></div>');
-	}
-	var mousescreen = $('<div id="mousescreen"/>');
-
-	var updateCursor = function() {
-		if ($.browser.msie && $.browser.version == 6) {
-			fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + cursorUrl() + '\', sizingMethod=\'scale\'');
-		} else {
-			fakemouse.attr('src', cursorUrl());
-		}
-	}
-	var resetCursor = function() {
-		if ($.browser.msie && $.browser.version == 6) {
-			fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\'');
-		} else {
-			fakemouse.attr('src', defaultUrl);
-		}
-	}
-	
-	var testStart = function() {
-		$(el).bind("mouseover", updateCursor).bind("mouseout", resetCursor);
-		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 });
-		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; });
-		mousescreen.css('cursor', 'url(' + noneUrl + '), crosshair');
-		(($.browser.safari || $.browser.opera) && mousescreen.css('cursor', 'crosshair'));
-	}
-	var testStop = function() {
-		$(el).unbind("mouseover", updateCursor).unbind("mouseout", resetCursor);
-		mousescreen.remove();
-		mouseX = realmouse.css("left");
-		mouseY = realmouse.css("top");
-		realmouse.remove();
-		fakemouse.remove();
-	}
-	
-	testStart();
-
-	var lastX = null;
-
-	fakemouse
-		.animate({ left: left, top: top }, "slow", function() {
-			$(el).triggerHandler('mouseover');
-			testMouseDown(el, left, top);
-			testMouseMove(el, left, top);
-		})
-		.animate({ left: left + dx, top: top + dy }, {
-			speed: "slow",
-			easing: "swing",
-			step: function (xory) {
-				if (!lastX) {
-					lastX = xory;
-				} else {
-					var x = lastX, y = xory;
-					testMouseMove(el, x, y);
-					lastX = null;
-				}
-			},
-			complete: function() {
-				$(el).triggerHandler('mouseout');
-				testMouseUp(el, 0, 0);
-				$(this).animate({ left: realmouse.css("left"), top: realmouse.css("top") }, {
-					speed: "slow",
-					complete: function() {
-						testStop();
-					}
-				})
-			}
-		});
-
-}
 
 </script>
 
 <script type="text/javascript">
 $(function() {
 
-	$("#drag").draggable();
+	$(".drag").draggable().testMouse({
+		speed: "fast"
+	});
 
 	$('#begin').click(function(e) {
-		draggableTest($("#drag")[0], 100, 10);
+		$("#status").text("Running...");
+		$(".drag:eq(0)").testMouse("drag", 100, 0, function() {
+			$('#status').text("Ready");
+		});
 	});
 
 });
@@ -182,10 +45,20 @@ $(function() {
 
 	<h1>jQuery UI Draggable - Automated Test</h1>
 
+	Status: <span id="status">Ready</span>
+
 	<div style="height: 3em;"><button id="begin">Run Test</button></div>
 
-	<div id="drag">
-		Drag me
+	<div class="drag">
+		Drag 1
+	</div>
+
+	<div class="drag">
+		Drag 2
+	</div>
+
+	<div class="drag">
+		Drag 3
 	</div>
 
 </div>
diff --git a/ui/tests/cursors/win/none.png b/ui/tests/cursors/win/none.png
index 3b34811c5..1764445c9 100644
Binary files a/ui/tests/cursors/win/none.png and b/ui/tests/cursors/win/none.png differ
diff --git a/ui/tests/ui.testmouse.js b/ui/tests/ui.testmouse.js
new file mode 100644
index 000000000..7d734693f
--- /dev/null
+++ b/ui/tests/ui.testmouse.js
@@ -0,0 +1,170 @@
+/*
+ * jQuery UI testMouse
+ *
+ * Copyright (c) 2008 Richard D. Worth (rdworth.org)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ * 
+ * Revision: $Id: $
+ */
+;(function($) {
+
+	$.widget("ui.testMouse", {
+		mouseX: 0,
+		mouseY: 0,
+		trackMouse: function() {},
+		init: function() {
+			var self = this;
+			this.trackMouse = function(e) {
+				if (e.isTrusted !== false) {
+					self.mouseX = e.pageX;
+					self.mouseY = e.pageY;
+				}
+			}
+			$(document).bind("mousemove", this.trackMouse);
+		},
+		destroy: function() {
+			$(document).unbind("mousemove", this.trackMouse);
+		},
+		center: function(offset) {
+			var o = this.element.offset();
+			return {
+				x: (o.left + (offset || [0, 0])[0] || 0) + this.element.width() / 2,
+				y: (o.top + (offset || [0, 0])[1] || 0) + this.element.height() / 2
+			};
+		},
+		dispatch: function(type, x, y, button, relatedTarget) {
+			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: button || 0, relatedTarget: relatedTarget, 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);
+				}
+				this.element[0].dispatchEvent(evt);
+			} else if (document.createEventObject) {
+				evt = document.createEventObject();
+				$.extend(evt, e);
+				evt.button = 1;
+				this.element[0].fireEvent('on' + type, evt)  
+			}
+		},
+		down: function(x, y) {
+			this.dispatch("mousedown", x, y);
+		},
+		move: function(x, y) {
+			this.dispatch("mousemove", x, y);
+		},
+		up: function(x, y) {
+			this.dispatch("mouseup", x, y);
+		},
+		drag: function(dx, dy, complete) {
+			var self = this;			
+
+			var center = this.center();
+			this.left = center.x;
+			this.top = center.y;
+		
+			var OS = (/(win|mac|linux)/i.exec(navigator.platform) || ['other'])[0].toLowerCase();
+		
+			var defaultUrl = ['cursors', OS == 'other' ? 'win' : OS, 'default.png'].join('/');
+			var cursorUrl = function() {
+				return ['cursors', OS == 'other' ? 'win' : OS, self.element.css('cursor') + '.png'].join('/');
+			}
+			var noneUrl = ['cursors', OS == 'other' ? 'win' : OS, 'none' + ($.browser.safari ? '.png' : '.cur')].join('/');
+		
+			var fakemouse = $('<img src="' + defaultUrl + '" />');
+			var realmouse = $('<img src="' + defaultUrl + '" />');
+			if ($.browser.msie && $.browser.version == 6) {
+				fakemouse = $('<div style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div>');
+				realmouse = $('<div><div style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div></div>');
+			}
+			var mousescreen = $('<div/>');
+		
+			var updateCursor = function() {
+				if ($.browser.msie && $.browser.version == 6) {
+					fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + cursorUrl() + '\', sizingMethod=\'scale\'');
+				} else {
+					fakemouse.attr('src', cursorUrl());
+				}
+			}
+			var resetCursor = function() {
+				if ($.browser.msie && $.browser.version == 6) {
+					fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\'');
+				} else {
+					fakemouse.attr('src', defaultUrl);
+				}
+			}
+			
+			var testStart = function() {
+				self.element.bind("mouseover", updateCursor).bind("mouseout", resetCursor);
+				fakemouse.appendTo('body').css({ position: 'absolute', left: self.mouseX, top: self.mouseY, zIndex: 5000 });
+				realmouse.appendTo('body').css({ position: 'absolute', left: self.mouseX, top: self.mouseY, zIndex: 5000, opacity: 0.1 });
+				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; });
+				mousescreen.css('cursor', 'url(' + noneUrl + '), crosshair');
+				($.browser.opera && mousescreen.css('cursor', 'crosshair'));
+			}
+			var testStop = function() {
+				self.element.unbind("mouseover", updateCursor).unbind("mouseout", resetCursor);
+				mousescreen.remove();
+				self.mouseX = realmouse.css("left");
+				self.mouseY = realmouse.css("top");
+				realmouse.remove();
+				fakemouse.remove();
+				($.isFunction(complete) && complete.apply());
+			}
+			
+			testStart();
+		
+			this.lastX = null;
+		
+			fakemouse
+				.animate({ left: this.left, top: this.top }, this.options.speed, function() {
+					self.element.triggerHandler('mouseover');
+					self.down(self.left, self.top);
+					self.move(self.left, self.top);
+				})
+				.animate({ left: this.left + dx, top: this.top + dy }, {
+					speed: self.options.speed,
+					easing: "swing",
+					step: function (xory) {
+						if (!self.lastX) {
+							self.lastX = xory;
+						} else {
+							var x = self.lastX, y = xory;
+							self.move(x, y);
+							self.lastX = null;
+						}
+					},
+					complete: function() {
+						self.element.triggerHandler('mouseout');
+						self.up(0, 0);
+						$(this).animate({ left: realmouse.css("left"), top: realmouse.css("top") }, {
+							speed: self.options.speed,
+							complete: function() {
+								testStop();
+							}
+						})
+					}
+				});
+		
+		}
+	});
+
+	$.ui.testMouse.defaults = {
+		speed: "slow"
+	}
+
+})(jQuery);