]> dev.renevier.net Git - syp.git/blob - openlayers/tests/Handler/Drag.html
initial commit
[syp.git] / openlayers / tests / Handler / Drag.html
1 <html>
2 <head>
3   <script src="../../lib/OpenLayers.js"></script>
4   <script type="text/javascript">
5     function test_Handler_Drag_constructor(t) {
6         t.plan(3);
7         var control = new OpenLayers.Control();
8         control.id = Math.random();
9         var callbacks = {foo: "bar"};
10         var options = {bar: "foo"};
11         
12         var oldInit = OpenLayers.Handler.prototype.initialize;
13         
14         OpenLayers.Handler.prototype.initialize = function(con, call, opt) {
15             t.eq(con.id, control.id,
16                  "constructor calls parent with the correct control");
17             t.eq(call, callbacks,
18                  "constructor calls parent with the correct callbacks");
19             t.eq(opt, options,
20                  "constructor calls parent with the correct options");
21         }
22         var handler = new OpenLayers.Handler.Drag(control, callbacks, options);
23
24         OpenLayers.Handler.prototype.initialize = oldInit;
25     }
26
27     function test_Handler_Drag_activate(t) {
28         t.plan(3);
29         var map = new OpenLayers.Map('map');
30         var control = new OpenLayers.Control();
31         map.addControl(control);
32         var handler = new OpenLayers.Handler.Drag(control);
33         handler.active = true;
34         var activated = handler.activate();
35         t.ok(!activated,
36              "activate returns false if the handler was already active");
37         handler.active = false;
38         handler.dragging = true;
39         activated = handler.activate();
40         t.ok(activated,
41              "activate returns true if the handler was not already active");
42         t.ok(!handler.dragging,
43              "activate sets dragging to false");
44         
45     }
46     
47     function test_Handler_Drag_events(t) {
48         t.plan(25);
49         
50         var map = new OpenLayers.Map('map');
51         var control = new OpenLayers.Control();
52         map.addControl(control);
53         var handler = new OpenLayers.Handler.Drag(control);
54
55         // list below events that should be handled (events) and those
56         // that should not be handled (nonevents) by the handler
57         var events = ["mousedown", "mouseup", "mousemove", "mouseout", "click"];
58         var nonevents = ["dblclick", "resize", "focus", "blur"];
59         map.events.registerPriority = function(type, obj, func) {
60             var r = func();
61             if(typeof r == "string") {
62                 // this is one of the mock handler methods
63                 t.eq(OpenLayers.Util.indexOf(nonevents, type), -1,
64                      "registered method is not one of the events " +
65                      "that should not be handled");
66                 t.ok(OpenLayers.Util.indexOf(events, type) > -1,
67                      "activate calls registerPriority with browser event: " + type);
68                 t.eq(typeof func, "function",
69                      "activate calls registerPriority with a function");
70                 t.eq(func(), type,
71                      "activate calls registerPriority with the correct method");
72                 t.eq(obj["CLASS_NAME"], "OpenLayers.Handler.Drag",
73                      "activate calls registerPriority with the handler");
74             }
75         }
76         
77         // set browser event like properties on the handler
78         for(var i=0; i<events.length; ++i) {
79             setMethod(events[i]);
80         }
81         function setMethod(key) {
82             handler[key] = function() {return key};
83         }
84
85         var activated = handler.activate();
86
87     }
88
89     function test_Handler_Drag_callbacks(t) {
90         t.plan(33);
91         
92         var map = new OpenLayers.Map('map', {controls: []});
93
94         var control = new OpenLayers.Control();
95         map.addControl(control);
96         
97         // set callback methods (out doesn't get an xy)
98         var events = ["down", "move", "up", "done"];
99         var testEvents = {};
100         var xys = {};
101         var callbacks = {};
102         for(var i=0; i<events.length; ++i) {
103             var px = new OpenLayers.Pixel(Math.random(), Math.random());
104             testEvents[events[i]] = {xy: px};
105             setCallback(events[i]);
106         }
107         function setCallback(key) {
108             callbacks[key] = function(evtxy) {
109                 t.ok(evtxy.x == testEvents[key].xy.x &&
110                      evtxy.y == testEvents[key].xy.y,
111                      key + " callback called with the proper evt.xy");
112             }
113         }
114
115         var handler = new OpenLayers.Handler.Drag(control, callbacks);
116         handler.activate();
117         
118         var oldIsLeftClick = OpenLayers.Event.isLeftClick;
119         var oldStop = OpenLayers.Event.stop;
120         var oldCheckModifiers = handler.checkModifiers;
121
122         // test mousedown with right click
123         OpenLayers.Event.isLeftClick = function() {
124             return false;
125         }
126         handler.checkModifiers = function() {
127             return true;
128         }
129         handler.started = true;
130         handler.start = {x: "foo", y: "bar"};
131         handler.last = {x: "foo", y: "bar"};
132         map.events.triggerEvent("mousedown", testEvents.down);
133         t.ok(!handler.started, "right-click sets started to false");
134         t.eq(handler.start, null, "right-click sets start to null");
135         t.eq(handler.last, null, "right-click sets last to null");
136
137         // test mousedown with improper modifier
138         OpenLayers.Event.isLeftClick = function() {
139             return true;
140         }
141         handler.checkModifiers = function() {
142             return false;
143         }
144         handler.started = true;
145         handler.start = {x: "foo", y: "bar"};
146         handler.last = {x: "foo", y: "bar"};
147         map.events.triggerEvent("mousedown", testEvents.down);
148         t.ok(!handler.started, "bad modifier sets started to false");
149         t.eq(handler.start, null, "bad modifier sets start to null");
150         t.eq(handler.last, null, "bad modifier sets last to null");
151
152         // test mousedown
153         handler.checkModifiers = function(evt) {
154             t.ok(evt.xy.x == testEvents.down.xy.x &&
155                  evt.xy.y == testEvents.down.xy.y,
156                  "mousedown calls checkModifiers with the proper event");
157             return true;
158         }
159         OpenLayers.Event.isLeftClick = function(evt) {
160             t.ok(evt.xy.x == testEvents.down.xy.x &&
161                  evt.xy.y == testEvents.down.xy.y,
162                  "mousedown calls isLeftClick with the proper event");
163             return true;
164         }
165         OpenLayers.Event.stop = function(evt, allowDefault) {
166             if(!allowDefault) {
167                 t.ok(evt.xy.x == testEvents.down.xy.x &&
168                      evt.xy.y == testEvents.down.xy.y,
169                      "mousedown default action is disabled");
170             } else {
171                 t.fail(
172                      "mousedown is prevented from falling to other elements");
173             }
174         }
175         map.events.triggerEvent("mousedown", testEvents.down);
176         t.ok(handler.started, "mousedown sets the started flag to true");
177         t.ok(!handler.dragging, "mouse down sets the dragging flag to false");
178         t.ok(handler.start.x == testEvents.down.xy.x &&
179              handler.start.y == testEvents.down.xy.y,
180              "mouse down sets handler.start correctly");
181         t.ok(handler.last.x == testEvents.down.xy.x &&
182              handler.last.y == testEvents.down.xy.y,
183              "mouse down sets handler.last correctly");
184         
185         OpenLayers.Event.stop = oldStop;        
186         OpenLayers.Event.isLeftClick = oldIsLeftClick;
187         handler.checkModifiers = oldCheckModifiers;
188
189         // test mouseup before mousemove
190         var realUp = testEvents.up;
191         testEvents.up = testEvents.down;
192         // this will fail with notice about the done callback being called
193         // if done is called when it shouldn't be
194         map.events.triggerEvent("mouseup", testEvents.up);
195         testEvents.up = realUp;
196
197         // test mousemove
198         handler.started = false;
199         map.events.triggerEvent("mousemove", {xy: {x: null, y: null}});
200         // if the handler triggers the move callback, it will be with the
201         // incorrect evt.xy
202         t.ok(true,
203              "mousemove before the handler has started doesn't call move");
204         
205         handler.started = true;
206         map.events.triggerEvent("mousemove", testEvents.move);
207         t.ok(handler.dragging, "mousemove sets the dragging flag to true");
208         t.ok(handler.start.x == testEvents.down.xy.x &&
209              handler.start.y == testEvents.down.xy.y,
210              "mouse move leaves handler.start alone");
211         t.ok(handler.last.x == testEvents.move.xy.x &&
212              handler.last.y == testEvents.move.xy.y,
213              "mouse move sets handler.last correctly");
214         
215         // a second move with the same evt.xy should not trigger move callback
216         // if it does, the test page will complain about a bad plan number
217         var oldMove = handler.callbacks.move;
218         handler.callbacks.move = function() {
219             t.ok(false,
220                  "a second move with the same evt.xy should not trigger a move callback");
221         }
222         map.events.triggerEvent("mousemove", testEvents.move);
223         handler.callbacks.move = oldMove;
224         
225         // test mouseup
226         handler.started = false;
227         map.events.triggerEvent("mouseup", {xy: {x: null, y: null}});
228         // if the handler triggers the up callback, it will be with the
229         // incorrect evt.xy
230         t.ok(true,
231              "mouseup before the handler has started doesn't call up");
232         
233         handler.started = true;
234         // mouseup triggers the up and done callbacks
235         testEvents.done = testEvents.up;
236         map.events.triggerEvent("mouseup", testEvents.up);
237         t.ok(!this.started, "mouseup sets the started flag to false");
238         t.ok(!this.dragging, "mouseup sets the dragging flag to false");
239         
240         // test mouseout
241         handler.started = false;
242         map.events.triggerEvent("mouseout", {xy: {x: null, y: null}});
243         // if the handler triggers the out or done callback, it will be with the
244         // incorrect evt.xy
245         t.ok(true,
246              "mouseout before the handler has started doesn't call out or done");
247         
248         handler.started = true;
249         var oldMouseLeft = OpenLayers.Util.mouseLeft;
250         OpenLayers.Util.mouseLeft = function(evt, element) {
251             t.ok(evt.xy.x == testEvents.done.xy.x &&
252                  evt.xy.y == testEvents.done.xy.y,
253                  "mouseout calls Util.mouseLeft with the correct event");
254             t.eq(element.id, map.div.id,
255                  "mouseout calls Util.mouseLeft with the correct element");
256             return true;
257         }
258         // mouseup triggers the out and done callbacks
259         // out callback gets no arguments
260         handler.callbacks.out = function() {
261             t.eq(arguments.length, 0,
262                  "mouseout calls out callback with no arguments");
263         }
264         map.events.triggerEvent("mouseout", testEvents.done);
265         t.ok(!handler.started, "mouseout sets started flag to false");
266         t.ok(!handler.dragging, "mouseout sets dragging flag to false");
267         OpenLayers.Util.mouseLeft = oldMouseLeft;
268         
269         // test click with the click.html example - the click method on the
270         // drag handler returns (handler.start == handler.last), stopping
271         // propagation of the click event if the mouse moved during a drag.
272         
273         // regression tests will assure that the drag handler doesn't mess
274         // with anything else on a click
275         function getProperties(obj) {
276             var props = {};
277             for(key in obj) {
278                 if(typeof obj[key] != "function" && typeof obj[key] != "object") {
279                     props[key] = obj[key];
280                 }
281             }
282             return props;
283         }
284         var before = getProperties(handler);
285         map.events.triggerEvent("click", null);
286         var after = getProperties(handler);
287         t.eq(before, after, "click doesn't mess with handler");
288         
289     }
290
291     function test_Handler_Drag_submethods(t) {
292         t.plan(4);
293         
294         var map = new OpenLayers.Map('map', {controls: []});
295
296         var control = new OpenLayers.Control();
297         map.addControl(control);
298         
299
300         var handler = new OpenLayers.Handler.Drag(control, {});
301         // set test events
302         var events = ["down", "move", "up", "out"];
303         var testEvents = {};
304         var type, px;
305         for(var i=0; i<events.length; ++i) {
306             type = events[i];
307             px = new OpenLayers.Pixel(Math.random(), Math.random());
308             testEvents[type] = {xy: px};
309             setMethod(type);
310         }
311         function setMethod(type) {
312             handler[type] = function(evt) {
313                 t.ok(evt.xy.x == testEvents[type].xy.x &&
314                      evt.xy.y == testEvents[type].xy.y,
315                      "handler." + type + " called with the right event");
316             }
317         }
318         handler.activate();
319         
320         // test mousedown
321         handler.checkModifiers = function(evt) {
322             return true;
323         }
324         var oldIsLeftClick = OpenLayers.Event.isLeftClick;
325         OpenLayers.Event.isLeftClick = function(evt) {
326             return true;
327         }
328         map.events.triggerEvent("mousedown", testEvents.down);
329         OpenLayers.Event.isLeftClick = oldIsLeftClick;
330
331         // test mousemove
332         map.events.triggerEvent("mousemove", testEvents.move);
333         
334         // test mouseup
335         map.events.triggerEvent("mouseup", testEvents.up);
336         
337         // test mouseout
338         var oldMouseLeft = OpenLayers.Util.mouseLeft;
339         OpenLayers.Util.mouseLeft = function() {
340             return true;
341         };
342         handler.started = true;
343         map.events.triggerEvent("mouseout", testEvents.out);
344         OpenLayers.Util.mouseLeft = oldMouseLeft;
345         
346     }
347
348     function test_Handler_Drag_deactivate(t) {
349         t.plan(6);
350         var map = new OpenLayers.Map('map');
351         var control = new OpenLayers.Control();
352         map.addControl(control);
353         var handler = new OpenLayers.Handler.Drag(control);
354         handler.active = false;
355         var deactivated = handler.deactivate();
356         t.ok(!deactivated,
357              "deactivate returns false if the handler was not already active");
358         handler.active = true;
359         handler.dragging = true;
360         deactivated = handler.deactivate();
361         t.ok(deactivated,
362              "deactivate returns true if the handler was active already");
363         t.ok(!handler.started,
364              "deactivate sets started to false");
365         t.ok(!handler.dragging,
366              "deactivate sets dragging to false");
367         t.ok(handler.start == null,
368              "deactivate sets start to null");
369         t.ok(handler.last == null,
370              "deactivate sets start to null");
371     }
372
373
374   </script>
375 </head>
376 <body>
377     <div id="map" style="width: 300px; height: 150px;"/>
378 </body>
379 </html>