$('div.target').userAction("click", x, y); UserAvtion Plugin - Simula…

…te mouse/keys real events.
jquery · May 26, 2008 · 76525dc · 76525dc
1 parent c28d263
commit 76525dc
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 71 deletions.
diff --git a/ui/tests/resizable.html b/ui/tests/resizable.html
@@ -12,6 +12,7 @@
 
 <script type="text/javascript" src="../../qunit/testrunner.js"></script>
 <script type="text/javascript" src="resizable.js"></script>
+<script type="text/javascript" src="jquery.useraction.js"></script>
 </head>
 <body>
 
@@ -26,5 +27,107 @@ <h2 id="log"></h2>
 
 	<ol id="tests"></ol>
 
+	<button id="btn">Start user action</button>
+
+	<input type="text" id="key">
+
 </body>
 </html>
+
+<script>
+
+	var animateClick = function(co) {
+	var img = $("<img src='images/click.png' width='1'>").appendTo("body")
+					.css({ position: "absolute", zIndex: 1000, left: co.x, top: co.y })
+					.animate({ width: 80, height: 80, left: co.x-40, top: co.y-40, opacity: 'hide' }, 1000, function() { $(this).remove(); });
+	};
+
+	$('#btn').click(function() {
+
+		/*$('#resizable1').mouseover(function() {
+			$(this).css('background', 'red');
+		});
+		
+		$('#resizable1').mouseout(function() {
+			$(this).css('background', 'yellow');
+		});*/
+
+		$('#key').keydown(function() {
+			//alert('keydown')
+			//console.log('keydown')
+		});
+
+		/*
+		 // TODO - works in all browsers, but have to fix a bug on opera
+		 $('#key').userAction("keydown", {
+			charCode: 67,
+			keyCOde: 67,
+			after: function(e) {
+				//console.log(e)
+			}
+		});
+		*/
+
+		// mouseover on the center of the target
+		$('.ui-resizable-e').userAction("mouseover");
+
+		$('.ui-resizable-e').userAction("mousedown", {
+			after: function(e, x, y) {
+				animateClick({x:x, y:y})
+			}
+		});
+
+		for (var x = 0; x < 40; x++) {
+
+			// offset the center(x,y) in [dx, dy]
+			$('.ui-resizable-e').userAction("mousemove", [x++, 0]);
+
+			// pre defined x, y
+			//$('.ui-resizable-e').userAction("mousemove", 200, 0);
+
+			// with extended options
+			/*$('.ui-resizable-e').userAction("mousemove", { 
+				center: [x++, 0]
+			});*/
+
+		}
+
+		$('.ui-resizable-e').userAction("mouseup", {
+			after: function(e, x, y) {
+				animateClick({x:x, y:y})
+			}
+		});
+
+		/*$('#main').userAction("mouseout", {
+			
+			target: '.ui-resizable-e',
+			//relatedTarget: '#resizable1',
+			//x: $('#resizable1').offset().left,
+			//y:  $('#resizable1').offset().top,
+			//bubbles: true,
+			//cancelable: false, 
+			//view: window,
+			//ctrlKey: false, 
+			//altKey: false, 
+			//shiftKey: false, 
+			//relatedTarget: null, 
+			//screenX: 0, 
+			//screenY: 0,
+			//metaKey: false, 
+			//button: 0,
+			//center: false,
+			//center: [100, 100],
+			
+			before: function(e, o) {
+				//console.log('before')
+			},
+			after: function(e, o) {
+				//console.log('after')
+			}
+		});*/
+
+	});
+
+
+
+</script>
diff --git a/ui/tests/resizable.js b/ui/tests/resizable.js
@@ -1,61 +1,13 @@
 var console = console || {
 	log: function(l) {
-		$('log').append(l + <br/>);
+		$('log').append(l + '<br/>');
 	}
 };
 
 var num = function(i) {
 	return parseInt(i, 10);
 };
 
-var animateClick = function(co) {
-	var img = $("<img src='images/click.png' width='1'>").appendTo("body")
-				.css({ position: "absolute", zIndex: 1000, left: co.x, top: co.y })
-				.animate({ width: 80, height: 80, left: co.x-40, top: co.y-40, opacity: 'hide' }, 1000, function() { $(this).remove(); });
-};
-
-var initMouseEvent = function(type, el, co, relatedTarget) {
-
-	//check for DOM-compliant browsers
-	if ($.isFunction(document.createEvent)) {
-
-		var evt = document.createEvent("MouseEvents");
-		evt.initMouseEvent(type, true, true, window, 0, 0, 0, co.x, co.y, false, false, false, false, 0, null);
-
-		if (relatedTarget && !evt.relatedTarget) {
-			if (type == "mouseout") {
-				evt.toElement = relatedTarget;
-			}
-			else 
-				if (type == "mouseover") {
-					evt.fromElement = relatedTarget;
-				}
-		}
-
-		el.dispatchEvent(evt);
-	}
-
-	// IE
-	if (document.createEventObject) {
-
-	}
-
-	if (/^mouseup|mousdemove|mousedown|click$/i.test(type)) {
-		animateClick(co);
-	}
-
-	return evt;
-};
-
-
-$.fn.triggerMouse = function(type, co, relatedTarget) {
-	return initMouseEvent(type, this[0], co, relatedTarget);
-};
-
-var xy = function(el, offset) {
-	var o = el.offset();
-	return { x: o.left + (offset || [0, 0])[0]||0, 	y: o.top + (offset || [0, 0])[1]||0	};
-};
 
 $(document).ready(function() {
 
@@ -64,37 +16,20 @@ $(document).ready(function() {
 		//maxHeight: 200,
 
 		start: function(e, ui) {
-			console.log('start: [' + e.pageX + ', ' + e.pageY + ']' )
-			console.log(ui.instance.size, ui.instance.position)
+			//console.log('start: [' + e.pageX + ', ' + e.pageY + ']' )
+			//console.log(ui.instance.size, ui.instance.position)
 		},
 
 		stop: function(e, ui) {
-			console.log('stop: [' + e.pageX + ', ' + e.pageY + ']' )
-			console.log(ui.instance.size, ui.instance.position)
+			//console.log('stop: [' + e.pageX + ', ' + e.pageY + ']' )
+			//console.log(ui.instance.size, ui.instance.position)
 		},
 
 		resize: function(e) {
-			console.log(e);
+			//console.log(e);
 		}
 	});
 
-	var handler = $(this).find('.ui-resizable-s');
-
-	handler.mousedown(function() {	/*console.log('down')*/ });
-	handler.mouseup(function() { /*console.log('up')*/ });
-
-	handler.triggerMouse( "mouseover", xy(handler), handler[0] );
-	handler.triggerMouse( "mousedown", xy(handler) );
-
-	var lastco = [], distance = 30;
-
-	for (var x = 0; x < distance; x++) {
-		var evt = $(handler).triggerMouse( "mousemove", lastco = xy(handler, [x, x]) );
-	}
-
-	handler.triggerMouse( "mouseup", lastco );
-
-
 
 	return;