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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
|
<html>
<head>
<script src="../OLLoader.js"></script>
<script type="text/javascript">
var log, buttonClick, events, element, button;
function init() {
element = document.getElementById("map");
button = document.getElementById("button");
}
function trigger(evt) {
OpenLayers.Util.applyDefaults(evt, {
button: 1,
target: button
});
events.handleBrowserEvent(evt);
}
function logEvent(evt) {
log.push(evt);
}
function test_ButtonClick(t) {
t.plan(1);
events = new OpenLayers.Events({}, element);
buttonClick = new OpenLayers.Events.buttonclick(events);
t.ok(buttonClick.target === events, "target set from constructor arg");
buttonClick.destroy();
events.destroy();
}
function test_getPressedButton(t) {
t.plan(4);
// set up
events = new OpenLayers.Events({}, element);
buttonClick = new OpenLayers.Events.buttonclick(events);
var button = document.createElement('button'),
span1 = document.createElement('span'),
span2 = document.createElement('span'),
span3 = document.createElement('span');
button.className = 'olButton';
button.appendChild(span1);
span1.appendChild(span2);
span2.appendChild(span3);
t.ok(buttonClick.getPressedButton(button) === button,
'getPressedButton returns button when element is button');
t.ok(buttonClick.getPressedButton(span1) === button,
'getPressedButton returns button when element is button descendant level 1');
t.ok(buttonClick.getPressedButton(span2) === button,
'getPressedButton returns button when element is button descendant level 2');
t.eq(buttonClick.getPressedButton(span3), undefined,
'getPressedButton returns undefined when element is button descendant level 3');
// test
// tear down
buttonClick.destroy();
events.destroy();
}
function test_ignore(t) {
t.plan(5);
// set up
events = new OpenLayers.Events({}, element);
buttonClick = new OpenLayers.Events.buttonclick(events);
var link = document.createElement('a'),
span1 = document.createElement('span'),
span2 = document.createElement('span'),
span3 = document.createElement('span');
link.appendChild(span1);
span1.appendChild(span2);
span2.appendChild(span3);
t.eq(buttonClick.ignore(link), true,
'ignore returns true when element is a link');
t.eq(buttonClick.ignore(span1), true,
'ignore returns true when element is link descendant level 1');
t.eq(buttonClick.ignore(span2), true,
'ignore returns true when element is link descendant level 2');
t.eq(buttonClick.ignore(span3), false,
'ignore returns false when element is link descendant level 3');
t.eq(buttonClick.ignore(element), false,
'ignore returns false when element is not a link');
// tear down
buttonClick.destroy();
events.destroy();
}
function test_ButtonClick_buttonClick(t) {
t.plan(27);
events = new OpenLayers.Events({}, element);
events.on({
"buttonclick": logEvent,
"mousedown": logEvent,
"mouseup": logEvent,
"click": logEvent,
"dblclick": logEvent,
"touchstart": logEvent,
"touchend": logEvent,
"keydown": logEvent
});
buttonClick = events.extensions["buttonclick"];
// a complete click
log = [];
trigger({type: "mousedown"});
trigger({type: "mouseup"});
t.eq(log.length, 1, "one event fired for mousedown-mouseup");
t.eq(log[0].type, "buttonclick", "buttonclick event fired");
// a complete tap
log = [];
trigger({type: "touchstart"});
trigger({type: "touchend"});
t.eq(log.length, 1, "one event fired for touchstart-touchend");
t.eq(log[0].type, "buttonclick", "buttonclick event fired");
// mouse sequence started on button
log = [];
trigger({type: "mousedown"});
trigger({type: "mouseup", target: element});
t.eq(log.length, 1, "one event fired for mousedown-(leave)-mouseup");
t.eq(log[0].type, "mouseup", "mouseup event goes through when sequence not finished on button");
// touch sequence started on button
log = [];
trigger({type: "touchstart"});
trigger({type: "touchmove"});
trigger({type: "touchend"});
t.eq(log.length, 1, "one event fired for touchstart-(leave)-touchend");
t.eq(log[0].type, "touchend", "touchend event goes through when sequence not finished on button");
// mouse sequence finished on button
log = [];
trigger({type: "mousedown", target: element});
trigger({type: "mouseup"});
t.eq(log.length, 2, "two event fired for mousedown-(enter)-mouseup");
t.eq(log[0].type, "mousedown", "mousedown unrelated to button goes through");
t.eq(log[1].type, "mouseup", "mouseup goes through when sequence started outside button");
// touch sequence finished on button
log = [];
trigger({type: "touchstart", target: element});
trigger({type: "touchend"});
t.eq(log.length, 2, "two event fired for touchstart-(enter)-touchend");
t.eq(log[0].type, "touchstart", "touchstart unrelated to button goes through");
t.eq(log[1].type, "touchend", "touchend goes through when sequence started outside button");
// dblclick
log = [];
trigger({type: "mousedown"});
trigger({type: "mouseup"});
trigger({type: "click"});
trigger({type: "mousedown"});
trigger({type: "mouseup"});
trigger({type: "click"});
trigger({type: "dblclick"});
t.eq(log.length, 2, "two events fired for doubleclick");
t.eq(log[0].type, "buttonclick", "buttonclick for 1st click");
t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click");
// dblclick - IE
log = [];
trigger({type: "mousedown"});
trigger({type: "mouseup"});
trigger({type: "mouseup"});
trigger({type: "dblclick"});
t.eq(log.length, 2, "two events fired for dblclick in IE");
t.eq(log[0].type, "buttonclick", "buttonclick for 1st click in IE");
t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click IE");
// rightclick
log = [];
trigger({type: "mousedown", button: 2});
trigger({type: "mouseup", button: 2});
t.eq(log.length, 2, "two events fired for rightclick");
t.eq(log[0].type, "mousedown", "mousedown from rightclick goes through");
t.eq(log[1].type, "mouseup", "mouseup from rightclick goes through");
// keydown RETURN
log = [];
trigger({type: "keydown", keyCode: OpenLayers.Event.KEY_RETURN});
trigger({type: "click"});
t.eq(log.length, 1, "one event fired for RETURN keydown");
t.eq(log[0].type, "buttonclick", "buttonclick for RETURN keydown");
// keydown SPACE
log = [];
trigger({type: "keydown", keyCode: OpenLayers.Event.KEY_SPACE});
trigger({type: "click"});
t.eq(log.length, 1, "one event fired for SPACE keydown");
t.eq(log[0].type, "buttonclick", "buttonclick for SPACE keydown");
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 600px; height: 300px;">
<div id="button" class="olButton">
<img class="olAlphaImg">
</div>
</div>
</body>
</html>
|
