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>