openlayers/tests/Control/PanZoom.html

   1 <html>
   2 <head>
   3   <script src="../../lib/OpenLayers.js"></script>
   4   <script type="text/javascript">
   5     var map;
   6     function test_Control_PanZoom_constructor (t) {
   7         t.plan( 4 );
   8
   9         control = new OpenLayers.Control.PanZoom();
  10         t.ok( control instanceof OpenLayers.Control.PanZoom, "new OpenLayers.Control.PanZoom returns object" );
  11         t.eq( control.displayClass,  "olControlPanZoom", "displayClass is correct" );
  12         control = new OpenLayers.Control.PanZoom({position: new OpenLayers.Pixel(100,100)});
  13         t.eq( control.position.x, 100, "PanZoom X Set correctly.");
  14         t.eq( control.position.y, 100, "PanZoom y Set correctly.");
  15     }
  16     function test_Control_PanZoom_addControl (t) {
  17         t.plan( 8 );
  18         map = new OpenLayers.Map('map');
  19         control = new OpenLayers.Control.PanZoom();
  20         t.ok( control instanceof OpenLayers.Control.PanZoom, "new OpenLayers.Control.PanZoom returns object" );
  21         t.ok( map instanceof OpenLayers.Map, "new OpenLayers.Map creates map" );
  22         map.addControl(control);
  23         t.ok( control.map === map, "Control.map is set to the map object" );
  24         t.ok( map.controls[4] === control, "map.controls contains control" );
  25         t.eq( parseInt(control.div.style.zIndex), map.Z_INDEX_BASE['Control'] + 5, "Control div zIndexed properly" );
  26         t.eq( parseInt(map.viewPortDiv.lastChild.style.zIndex), map.Z_INDEX_BASE['Control'] + 5, "Viewport div contains control div" );
  27         t.eq( control.div.style.top, "4px", "Control div top located correctly by default");
  28
  29         var control2 = new OpenLayers.Control.PanZoom();
  30         map.addControl(control2, new OpenLayers.Pixel(100,100));
  31         t.eq( control2.div.style.top, "100px", "2nd control div is located correctly");
  32     }
  33
  34     function test_Control_PanZoom_removeButtons(t) {
  35         t.plan(2);
  36         map = new OpenLayers.Map("map");
  37         control = new OpenLayers.Control.PanZoom();
  38         map.addControl(control);
  39         control.removeButtons();
  40         t.eq(control.buttons.length, 0, "buttons array cleared correctly");
  41         t.eq(control.div.childNodes.length, 0, "control div is empty");
  42     }
  43
  44     function test_Control_PanZoom_control_events (t) {
  45
  46         if ( !window.document.createEvent || OpenLayers.Util.getBrowserName() == "opera" || !t.open_window) {
  47             //ie can't simulate mouseclicks
  48             t.plan(0);
  49             t.debug_print("FIXME: This browser does not support the PanZoom test at this time.");
  50         } else {
  51             t.plan(35);
  52             t.open_window( "Control/PanZoom.html", function( wnd ) {
  53                 t.delay_call( 3, function() {
  54                     var flag;
  55                     function setFlag(evt) {
  56                         flag[evt.type] = true;
  57                     }
  58                     function resetFlags() {
  59                         flag = {
  60                             mousedown: false,
  61                             mouseup: false,
  62                             click: false,
  63                             dblclick: false
  64                         };
  65                     }
  66                     resetFlags();
  67
  68                     wnd.mapper.events.register("mousedown", mapper, setFlag);
  69                     wnd.mapper.events.register("mouseup", mapper, setFlag);
  70                     wnd.mapper.events.register("click", mapper, setFlag);
  71                     wnd.mapper.events.register("dblclick", mapper, setFlag);
  72
  73                     simulateClick(wnd, wnd.control.buttons[0]);
  74                     t.delay_call(2, function() {
  75                         t.ok( wnd.mapper.getCenter().lat > wnd.centerLL.lat, "Pan up works correctly" );
  76                         t.ok(!flag.mousedown, "mousedown does not get to the map");
  77                         t.ok(flag.mouseup, "mouseup does get to the map");
  78                         t.ok(!flag.click, "click does not get to the map");
  79                         t.ok(!flag.dblclick, "dblclick does not get to the map");
  80                         resetFlags();
  81
  82                         simulateClick(wnd, wnd.control.buttons[1]);
  83                     }, 2, function() {
  84                     t.ok( wnd.mapper.getCenter().lon < wnd.centerLL.lon, "Pan left works correctly" );
  85                     t.ok(!flag.mousedown, "mousedown does not get to the map");
  86                     t.ok(flag.mouseup, "mouseup does get to the map");
  87                     t.ok(!flag.click, "click does not get to the map");
  88                     t.ok(!flag.dblclick, "dblclick does not get to the map");
  89                     resetFlags();
  90
  91                     simulateClick(wnd, wnd.control.buttons[2]);
  92                     }, 2, function() {
  93                     t.ok( wnd.mapper.getCenter().lon == wnd.centerLL.lon, "Pan right works correctly" );
  94                     t.ok(!flag.mousedown, "mousedown does not get to the map");
  95                     t.ok(flag.mouseup, "mouseup does get to the map");
  96                     t.ok(!flag.click, "click does not get to the map");
  97                     t.ok(!flag.dblclick, "dblclick does not get to the map");
  98                     resetFlags();
  99
 100                     simulateClick(wnd, wnd.control.buttons[3]);
 101                     }, 2, function() {
 102                     t.ok( wnd.mapper.getCenter().lat == wnd.centerLL.lat, "Pan down works correctly" );
 103                     t.ok(!flag.mousedown, "mousedown does not get to the map");
 104                     t.ok(flag.mouseup, "mouseup does get to the map");
 105                     t.ok(!flag.click, "click does not get to the map");
 106                     t.ok(!flag.dblclick, "dblclick does not get to the map");
 107                     resetFlags();
 108
 109                     simulateClick(wnd, wnd.control.buttons[4]);
 110                     }, 2, function() {
 111                     t.eq( wnd.mapper.getZoom(), 6, "zoomin works correctly" );
 112                     t.ok(!flag.mousedown, "mousedown does not get to the map");
 113                     t.ok(flag.mouseup, "mouseup does get to the map");
 114                     t.ok(!flag.click, "click does not get to the map");
 115                     t.ok(!flag.dblclick, "dblclick does not get to the map");
 116                     resetFlags();
 117
 118                     simulateClick(wnd, wnd.control.buttons[6]);
 119                     }, 2, function() {
 120                     t.eq( wnd.mapper.getZoom(), 5, "zoomout works correctly" );
 121                     t.ok(!flag.mousedown, "mousedown does not get to the map");
 122                     t.ok(flag.mouseup, "mouseup does get to the map");
 123                     t.ok(!flag.click, "click does not get to the map");
 124                     t.ok(!flag.dblclick, "dblclick does not get to the map");
 125                     resetFlags();
 126
 127                     simulateClick(wnd, wnd.control.buttons[5]);
 128                     }, 2, function() {
 129                     t.eq( wnd.mapper.getZoom(), 2, "zoomworld works correctly" );
 130                     t.ok(!flag.mousedown, "mousedown does not get to the map");
 131                     t.ok(flag.mouseup, "mouseup does get to the map");
 132                     t.ok(!flag.click, "click does not get to the map");
 133                     t.ok(!flag.dblclick, "dblclick does not get to the map");
 134                     resetFlags();
 135                     });
 136                 });
 137             });
 138         }
 139     }
 140
 141     function test_slideRatio(t) {
 142         t.plan(4);
 143
 144         var control = new OpenLayers.Control.PanZoom({
 145             slideRatio: .5
 146         });
 147
 148         var map = new OpenLayers.Map();
 149
 150         map.addControl(control);
 151         control.draw();
 152         control.activate();
 153
 154         map.getSize = function() {
 155             return {
 156                 w: 250,
 157                 h: 100
 158             }
 159         };
 160
 161         var delta, dir;
 162         var evt = {which: 1}; // a fake left click
 163         var buttons = control.buttons;
 164         map.pan = function(dx, dy){
 165             t.eq([dx,dy],delta,"Panning " + dir + " sets right delta with slideRatio");
 166         };
 167
 168         //up
 169         var delta = [0, -50];
 170         var dir = "up";
 171         control.buttonDown.call(buttons[0], evt);
 172
 173         //left
 174         var delta = [-125, 0];
 175         var dir = "left";
 176         control.buttonDown.call(buttons[1], evt);
 177
 178         //right
 179         var delta = [125, 0];
 180         var dir = "right";
 181         control.buttonDown.call(buttons[2], evt);
 182
 183         //down
 184         var delta = [0, 50];
 185         var dir = "down";
 186         control.buttonDown.call(buttons[3], evt);
 187
 188         map.destroy();
 189     }
 190
 191     function simulateClick(wnd, elem) {
 192       var evt = wnd.document.createEvent("MouseEvents");
 193       evt.initMouseEvent("mousedown", true, true, wnd, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
 194       elem.dispatchEvent(evt);
 195
 196       evt = wnd.document.createEvent("MouseEvents");
 197       evt.initMouseEvent("mouseup", true, true, wnd, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
 198       elem.dispatchEvent(evt);
 199
 200       evt = wnd.document.createEvent("MouseEvents");
 201       evt.initMouseEvent("click", true, true, wnd, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
 202       elem.dispatchEvent(evt);
 203
 204       evt = wnd.document.createEvent("MouseEvents");
 205       evt.initMouseEvent("dblclick", true, true, wnd, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
 206       elem.dispatchEvent(evt);
 207     }
 208
 209     function loader() {
 210         control = new OpenLayers.Control.PanZoom();
 211
 212         mapper = new OpenLayers.Map('map', { controls: [control]});
 213
 214
 215         var layer = new OpenLayers.Layer.WMS("Test Layer",
 216             "http://labs.metacarta.com/wms-c/Basic.py?",
 217             {layers: "basic"});
 218         mapper.addLayer(layer);
 219
 220         centerLL = new OpenLayers.LonLat(0,0);
 221         mapper.setCenter(centerLL, 5);
 222     }
 223
 224
 225   </script>
 226 </head>
 227 <body onload="loader()">
 228     <div id="map" style="width: 1024px; height: 512px;"/>
 229 </body>
 230 </html>