| 1 |
<!DOCTYPE html> |
|---|
| 2 |
<html debug="true"> |
|---|
| 3 |
<head> |
|---|
| 4 |
<script type="text/javascript" src="../../.././externals/ext/adapter/ext/ext-base.js"></script> |
|---|
| 5 |
<script type="text/javascript" src="../../../../externals/ext/ext-all-debug.js"></script> |
|---|
| 6 |
|
|---|
| 7 |
<script type="text/javascript" src="../../../../externals/openlayers/lib/OpenLayers.js"></script> |
|---|
| 8 |
|
|---|
| 9 |
<script> |
|---|
| 10 |
window.scriptLocation = "../../"; |
|---|
| 11 |
</script> |
|---|
| 12 |
<script type="text/javascript" src="../../lib/GeoExt.js"></script> |
|---|
| 13 |
|
|---|
| 14 |
<script type="text/javascript"> |
|---|
| 15 |
|
|---|
| 16 |
function makeFeature() { |
|---|
| 17 |
return new OpenLayers.Feature.Vector( |
|---|
| 18 |
new OpenLayers.Geometry.Point(100,50), |
|---|
| 19 |
{ |
|---|
| 20 |
name : "My Feature" |
|---|
| 21 |
} |
|---|
| 22 |
) |
|---|
| 23 |
} |
|---|
| 24 |
|
|---|
| 25 |
function setupContext() { |
|---|
| 26 |
var map = new OpenLayers.Map({ |
|---|
| 27 |
projection: new OpenLayers.Projection("EPSG:4326"), |
|---|
| 28 |
}) |
|---|
| 29 |
|
|---|
| 30 |
var vector = new OpenLayers.Layer.Vector("Vector Layer",{ |
|---|
| 31 |
styleMap: new OpenLayers.StyleMap() |
|---|
| 32 |
}); |
|---|
| 33 |
|
|---|
| 34 |
var feature = makeFeature(); |
|---|
| 35 |
|
|---|
| 36 |
vector.addFeatures(feature); |
|---|
| 37 |
map.addLayers([ |
|---|
| 38 |
new OpenLayers.Layer.WMS( |
|---|
| 39 |
"OpenLayers WMS", |
|---|
| 40 |
"http://labs.metacarta.com/wms/vmap0", |
|---|
| 41 |
{layers: 'basic'} ), |
|---|
| 42 |
vector |
|---|
| 43 |
]); |
|---|
| 44 |
|
|---|
| 45 |
var view = new Ext.Viewport({ |
|---|
| 46 |
layout : "border", |
|---|
| 47 |
items : [{ |
|---|
| 48 |
xtype: "gx_mappanel", |
|---|
| 49 |
region: "center", |
|---|
| 50 |
map : map |
|---|
| 51 |
}] |
|---|
| 52 |
}); |
|---|
| 53 |
|
|---|
| 54 |
return { |
|---|
| 55 |
feature : feature, |
|---|
| 56 |
vector : vector, |
|---|
| 57 |
map : map, |
|---|
| 58 |
mapPanel : view.items.items[0], |
|---|
| 59 |
view : view |
|---|
| 60 |
}; |
|---|
| 61 |
|
|---|
| 62 |
} |
|---|
| 63 |
|
|---|
| 64 |
|
|---|
| 65 |
function popup(feature){ |
|---|
| 66 |
pop = new GeoExt.popup.Popup({ |
|---|
| 67 |
title: 'My Popup', |
|---|
| 68 |
feature: feature, |
|---|
| 69 |
width:200, |
|---|
| 70 |
html: bogusMarkup, |
|---|
| 71 |
collapsible: true |
|---|
| 72 |
}); |
|---|
| 73 |
|
|---|
| 74 |
return pop; |
|---|
| 75 |
} |
|---|
| 76 |
|
|---|
| 77 |
var bogusMarkup = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit." |
|---|
| 78 |
|
|---|
| 79 |
function test_addtomappanel(t) { |
|---|
| 80 |
t.plan(1); |
|---|
| 81 |
|
|---|
| 82 |
var context = setupContext(); |
|---|
| 83 |
|
|---|
| 84 |
var pop = popup(context.feature, context.mapPanel); |
|---|
| 85 |
|
|---|
| 86 |
pop.addToMapPanel(context.mapPanel); |
|---|
| 87 |
|
|---|
| 88 |
t.ok(context.mapPanel.el.child("div." + pop.popupCls),"Map panel contains popup"); |
|---|
| 89 |
} |
|---|
| 90 |
|
|---|
| 91 |
function test_anchor(t) { |
|---|
| 92 |
t.plan(4); |
|---|
| 93 |
|
|---|
| 94 |
var context = setupContext(); |
|---|
| 95 |
|
|---|
| 96 |
var pop = popup(context.feature, context.mapPanel); |
|---|
| 97 |
|
|---|
| 98 |
pop.addToMapPanel(context.mapPanel); |
|---|
| 99 |
|
|---|
| 100 |
pop.on({ |
|---|
| 101 |
'move' : function(c,x,y){ |
|---|
| 102 |
t.ok(true,"Move event fired on " + action); |
|---|
| 103 |
}, |
|---|
| 104 |
scope : this |
|---|
| 105 |
}); |
|---|
| 106 |
|
|---|
| 107 |
t.ok(pop.getAnchorElement(), "Popup has anchor element"); |
|---|
| 108 |
|
|---|
| 109 |
var action = "map move"; |
|---|
| 110 |
context.map.events.triggerEvent("move"); |
|---|
| 111 |
|
|---|
| 112 |
action = "popup collapse"; |
|---|
| 113 |
pop.collapse(); |
|---|
| 114 |
|
|---|
| 115 |
action = "popup expand" |
|---|
| 116 |
pop.expand(); |
|---|
| 117 |
} |
|---|
| 118 |
|
|---|
| 119 |
|
|---|
| 120 |
function test_unanchor(t) { |
|---|
| 121 |
t.plan(6); |
|---|
| 122 |
|
|---|
| 123 |
var context = setupContext(); |
|---|
| 124 |
|
|---|
| 125 |
var pop = popup(context.feature, context.mapPanel); |
|---|
| 126 |
|
|---|
| 127 |
pop.addToMapPanel(context.mapPanel); |
|---|
| 128 |
|
|---|
| 129 |
pop.collapse(); |
|---|
| 130 |
|
|---|
| 131 |
var origPos = pop.getPosition(); |
|---|
| 132 |
|
|---|
| 133 |
pop.unanchor(); |
|---|
| 134 |
|
|---|
| 135 |
var newPos = pop.getPosition(); |
|---|
| 136 |
|
|---|
| 137 |
t.ok(!pop.getAnchorElement(),"Anchor element removed"); |
|---|
| 138 |
t.ok(!this.collapsed, "Preserved collapsed state"); |
|---|
| 139 |
t.ok(!context.mapPanel.el.child("div." + pop.popupCls),"Map panel does not contain popup"); |
|---|
| 140 |
t.ok(Ext.getBody().child("div." + pop.popupCls),"Document body contains popup element"); |
|---|
| 141 |
t.eq(origPos[0],newPos[0],"Popup remains in same position (X)"); |
|---|
| 142 |
t.eq(origPos[1],newPos[1],"Popup remains in same position (Y)"); |
|---|
| 143 |
|
|---|
| 144 |
pop.on({ |
|---|
| 145 |
'move' : function(c,x,y){ |
|---|
| 146 |
t.ok(false,"Move event fired improperly on " + action); |
|---|
| 147 |
}, |
|---|
| 148 |
scope : this |
|---|
| 149 |
}); |
|---|
| 150 |
|
|---|
| 151 |
var action = "map move"; |
|---|
| 152 |
context.map.events.triggerEvent("move"); |
|---|
| 153 |
|
|---|
| 154 |
action = "popup expand" |
|---|
| 155 |
pop.expand(); |
|---|
| 156 |
|
|---|
| 157 |
action = "popup collapse"; |
|---|
| 158 |
pop.collapse(); |
|---|
| 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 |
</script> |
|---|
| 201 |
<body> |
|---|
| 202 |
<div id="map"></div> |
|---|
| 203 |
</body> |
|---|
| 204 |
</html> |
|---|