source: ether_iasi/trunk/web/resources/js/OpenLayers-2.12/tests/Events/buttonclick.html @ 738

Last change on this file since 738 was 738, checked in by vmipsl, 11 years ago

OpenLayers?
File size: 6.6 KB
Line 
1<html>
2<head>
3  <script src="../OLLoader.js"></script>
4  <script type="text/javascript">
5
6    var log, buttonClick, events, element, button;
7    function init() {
8        element = document.getElementById("map");
9        button = document.getElementById("button");
10    }
11    function trigger(evt) {
12        OpenLayers.Util.applyDefaults(evt, {
13            button: 1,
14            target: button
15        });
16        events.handleBrowserEvent(evt);
17    }
18    function logEvent(evt) {
19        log.push(evt);
20    }
21   
22    function test_ButtonClick(t) {
23        t.plan(1);
24        events = new OpenLayers.Events({}, element);
25        buttonClick = new OpenLayers.Events.buttonclick(events);
26        t.ok(buttonClick.target === events, "target set from constructor arg");
27        buttonClick.destroy();
28        events.destroy();
29    }
30
31    function test_getPressedButton(t) {
32        t.plan(4);
33
34        // set up
35
36        events = new OpenLayers.Events({}, element);
37        buttonClick = new OpenLayers.Events.buttonclick(events);
38
39        var button = document.createElement('button'),
40            span1 = document.createElement('span'),
41            span2 = document.createElement('span'),
42            span3 = document.createElement('span');
43        button.className = 'olButton';
44        button.appendChild(span1);
45        span1.appendChild(span2);
46        span2.appendChild(span3);
47
48        t.ok(buttonClick.getPressedButton(button) === button,
49             'getPressedButton returns button when element is button');
50        t.ok(buttonClick.getPressedButton(span1) === button,
51             'getPressedButton returns button when element is button descendant level 1');
52        t.ok(buttonClick.getPressedButton(span2) === button,
53             'getPressedButton returns button when element is button descendant level 2');
54        t.eq(buttonClick.getPressedButton(span3), undefined,
55             'getPressedButton returns undefined when element is button descendant level 3');
56
57        // test
58
59
60        // tear down
61
62        buttonClick.destroy();
63        events.destroy();
64    }
65   
66    function test_ButtonClick_buttonClick(t) {
67        t.plan(27);
68        events = new OpenLayers.Events({}, element);
69        events.on({
70            "buttonclick": logEvent,
71            "mousedown": logEvent,
72            "mouseup": logEvent,
73            "click": logEvent,
74            "dblclick": logEvent,
75            "touchstart": logEvent,
76            "touchend": logEvent,
77            "keydown": logEvent
78        });
79        buttonClick = events.extensions["buttonclick"];
80       
81        // a complete click
82        log = [];
83        trigger({type: "mousedown"});
84        trigger({type: "mouseup"});
85        t.eq(log.length, 1, "one event fired for mousedown-mouseup");
86        t.eq(log[0].type, "buttonclick", "buttonclick event fired");
87       
88        // a complete tap
89        log = [];
90        trigger({type: "touchstart"});
91        trigger({type: "touchend"});
92        t.eq(log.length, 1, "one event fired for touchstart-touchend");
93        t.eq(log[0].type, "buttonclick", "buttonclick event fired");
94       
95        // mouse sequence started on button
96        log = [];
97        trigger({type: "mousedown"});
98        trigger({type: "mouseup", target: element});
99        t.eq(log.length, 1, "one event fired for mousedown-(leave)-mouseup");
100        t.eq(log[0].type, "mouseup", "mouseup event goes through when sequence not finished on button");
101
102        // touch sequence started on button
103        log = [];
104        trigger({type: "touchstart"});
105        trigger({type: "touchmove"});
106        trigger({type: "touchend"});
107        t.eq(log.length, 1, "one event fired for touchstart-(leave)-touchend");
108        t.eq(log[0].type, "touchend", "touchend event goes through when sequence not finished on button");
109
110        // mouse sequence finished on button
111        log = [];
112        trigger({type: "mousedown", target: element});
113        trigger({type: "mouseup"});
114        t.eq(log.length, 2, "two event fired for mousedown-(enter)-mouseup");
115        t.eq(log[0].type, "mousedown", "mousedown unrelated to button goes through");
116        t.eq(log[1].type, "mouseup", "mouseup goes through when sequence started outside button");
117
118        // touch sequence finished on button
119        log = [];
120        trigger({type: "touchstart", target: element});
121        trigger({type: "touchend"});
122        t.eq(log.length, 2, "two event fired for touchstart-(enter)-touchend");
123        t.eq(log[0].type, "touchstart", "touchstart unrelated to button goes through");
124        t.eq(log[1].type, "touchend", "touchend goes through when sequence started outside button");
125       
126        // dblclick
127        log = [];
128        trigger({type: "mousedown"});
129        trigger({type: "mouseup"});
130        trigger({type: "click"});
131        trigger({type: "mousedown"});
132        trigger({type: "mouseup"});
133        trigger({type: "click"});
134        trigger({type: "dblclick"});
135        t.eq(log.length, 2, "two events fired for doubleclick");
136        t.eq(log[0].type, "buttonclick", "buttonclick for 1st click");
137        t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click");
138       
139        // dblclick - IE
140        log = [];
141        trigger({type: "mousedown"});
142        trigger({type: "mouseup"});
143        trigger({type: "mouseup"});
144        trigger({type: "dblclick"});
145        t.eq(log.length, 2, "two events fired for dblclick in IE");
146        t.eq(log[0].type, "buttonclick", "buttonclick for 1st click in IE");
147        t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click IE");
148
149        // rightclick
150        log = [];
151        trigger({type: "mousedown", button: 2});
152        trigger({type: "mouseup", button: 2});
153        t.eq(log.length, 2, "two events fired for rightclick");
154        t.eq(log[0].type, "mousedown", "mousedown from rightclick goes through");
155        t.eq(log[1].type, "mouseup", "mouseup from rightclick goes through");
156
157        // keydown RETURN
158        log = [];
159        trigger({type: "keydown", keyCode: OpenLayers.Event.KEY_RETURN});
160        trigger({type: "click"});
161        t.eq(log.length, 1, "one event fired for RETURN keydown");
162        t.eq(log[0].type, "buttonclick", "buttonclick for RETURN keydown");
163
164        // keydown SPACE
165        log = [];
166        trigger({type: "keydown", keyCode: OpenLayers.Event.KEY_SPACE});
167        trigger({type: "click"});
168        t.eq(log.length, 1, "one event fired for SPACE keydown");
169        t.eq(log[0].type, "buttonclick", "buttonclick for SPACE keydown");
170    }
171  </script>
172</head>
173<body onload="init()">
174    <div id="map" style="width: 600px; height: 300px;">
175        <div id="button" class="olButton">
176            <img class="olAlphaImg">
177        </div>
178    </div>
179</body>
180</html>
Note: See TracBrowser for help on using the repository browser.