Skip to content
Permalink
Browse files

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

…te mouse/keys real events.
  • Loading branch information
eduardolundgren committed May 26, 2008
1 parent c28d263 commit 76525dc99d08fe03ed584c5db86a5bfb599f68e8
Showing with 109 additions and 71 deletions.
  1. +103 −0 ui/tests/resizable.html
  2. +6 −71 ui/tests/resizable.js
@@ -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>
@@ -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;

0 comments on commit 76525dc

Please sign in to comment.
You can’t perform that action at this time.