tests/manual/simulate_minimal.html

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>sim only test</title>

<!-- Source File and Seed for YUI3-->
<link rel="stylesheet" type="text/css" href="/build/cssreset/reset-min.css">
<link type="text/css" rel="stylesheet" href="/build/cssfonts/fonts-min.css">

<script src="/build/yui/yui.js"></script>
</head>
<style>
.obj{
    display:inline-block;
    position:absolute;
    top:30px;
    left:20px;
    width:400px;
    height:400px;
    background-color:#eee;
    border:solid 1px #aaa;

}
.obj p {
    margin:1em;
}
.end-here {
    position:absolute;
    top:300px;
    left:300px;
    border:solid 1px #f00;
    width:40px;
    height:40px;
}
.thing {
    position:absolute;
    top:70px;
    left:40px;
    border:solid 1px #000;
    width:20px;
    height:20px;
    background-color:#8080ff;
}
.btn-container{
    position:absolute;
    top:200px;
    left:460px;
    width:200px;
}

</style>
<body class="yui3-skin-sam">
    <div class="obj">
        <p>
            Click anywhere in the gray rect. to move A to the place you clicked. This is a native event.
        </p>
        <div class="end-here">B</div>
        <div class="thing">A</div>

    </div>
    <div class="btn-container">
        This button should <button class=sim-md>Simulate</button> a click in the gray rectangle that would place A in B.
        <p> There seems to be a problem in IE9 with e.pageX, e.pageY in an event that receives a simulated event...</p>
    </div>
</body>
</html>
<script type="text/javascript">
YUI({filter:'raw'}).use('node','node-event-simulate','event-move', function(Y) {          //, filter:'raw'  this make it really hard to clear cache on iPad


	var obj = Y.one('obj'),
    eventX = 330, //Set the X for event simulation.
    eventY = 340; //Set the Y for event simulation.


    // clicked the button
    var handleSimMd = function(e){
        var scrollT = Y.one('document').get('scrollTop'),
        scrollL = Y.one('document').get('scrollLeft');
        Y.one('.obj').simulate("click", {clientX: eventX, clientY: eventY});

        //Y.one('.obj').simulate("click", {clientX: (eventX - scrollL), clientY: (eventY - scrollT)});	 // same as line above, only handles scrolled page

/* this also does not dispatch an event object that contains e.pageX/Y in IE9
        Y.one('.obj').simulate("click", {
            clientX: eventX,
            pageX: (eventX),
            clientY: eventY,
            pageY: (eventY)
        });
*/
    }

    // a click (or simulated click) is handled by handleObjEvent
    var handleObjEvent = function(e){
        Y.one('.thing').setXY([(e.pageX),(e.pageY)]);
        // in IE 9:
        // native event the e.pageX and e.pageY have valid values, but,
        // simulated event the e.pageX and e.pageY == 0
        // e.clientX, and e.clientY have valid values in native events and simulated events.

        // this will work in both simulated and native
        //Y.one('.thing').setXY([(e.clientX),(e.clientY)]);
        // Changing Dial.js to use e.clientX/Y, seems too risky, post test-fest

    }


    // a click on the button goes to handler that simulates a click on the .obj
    Y.on('click', handleSimMd, '.sim-md');

    // a click (or simulated click) is handled by handleObjEvent
    Y.on('click', handleObjEvent, '.obj');

});


</script>