aboutsummaryrefslogtreecommitdiffstats
path: root/ui/tests/resizable.js
blob: 1fd2a9b0b81b1ad619d7ec062a9f9ac357e0a14f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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) {
	var evt = document.createEvent("MouseEvents");
	evt.initMouseEvent(type, true, true, window, 0, 0, 0, co.x, co.y, false, false, false, false, 0, null);
	
	el.dispatchEvent(evt);
	
	if (/^mouseup|mousedown|click$/i.test(type)) {
		animateClick(co);
	}
	
	return evt;
};


$.fn.triggerMousedown = function(co) {
	return initMouseEvent("mousedown", this[0], co);
};

$.fn.triggerMouseup = function(co) {
	return initMouseEvent("mouseup", this[0],  co);
};

$.fn.triggerMousemove = function(co, target) {
	return initMouseEvent("mousemove", this[0],  co);
};

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() {

	$("#resizable1").resizable({
		
		start: function(e, ui) {
			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)
		},
		
		resize: function(e) {
			console.log(e);
		}
	});
	
	var handler = $(this).find('.ui-resizable-s');
	
	handler.mousedown(function() {	/*console.log('down')*/ });
	handler.mouseup(function() { /*console.log('up')*/ });
	
	handler.triggerMousedown( xy(handler) );
	
	for (var x = 0; x < 50; x += 10) {
		var evt = $(handler).triggerMousemove( xy(handler, [x, x]) );
		console.log(evt)
	}
	
	handler.triggerMouseup( xy(handler, [50, 50]) );

	
	
	return; 
	
	module("resizable: simple resize");
	
	test("simple drag", function() {

		expect(1);
		ok(true, "Resize element on the same position");
		
	});

});