|
1
|
/* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license.
|
|
2
|
* See http://svn.openlayers.org/trunk/openlayers/license.txt for the full
|
|
3
|
* text of the license. */
|
|
4
|
|
|
5
|
/**
|
|
6
|
* @class
|
|
7
|
*/
|
|
8
|
OpenLayers.Popup = Class.create();
|
|
9
|
|
|
10
|
OpenLayers.Popup.count = 0;
|
|
11
|
OpenLayers.Popup.WIDTH = 200;
|
|
12
|
OpenLayers.Popup.HEIGHT = 200;
|
|
13
|
OpenLayers.Popup.COLOR = "white";
|
|
14
|
OpenLayers.Popup.OPACITY = 1;
|
|
15
|
OpenLayers.Popup.BORDER = "0px";
|
|
16
|
|
|
17
|
OpenLayers.Popup.prototype = {
|
|
18
|
|
|
19
|
/** @type OpenLayers.Events*/
|
|
20
|
events: null,
|
|
21
|
|
|
22
|
/** @type String */
|
|
23
|
id: "",
|
|
24
|
|
|
25
|
/** @type OpenLayers.LonLat */
|
|
26
|
lonlat: null,
|
|
27
|
|
|
28
|
/** @type DOMElement */
|
|
29
|
div: null,
|
|
30
|
|
|
31
|
/** @type OpenLayers.Size*/
|
|
32
|
size: null,
|
|
33
|
|
|
34
|
/** @type String */
|
|
35
|
contentHTML: "",
|
|
36
|
|
|
37
|
/** @type String */
|
|
38
|
backgroundColor: "",
|
|
39
|
|
|
40
|
/** @type float */
|
|
41
|
opacity: "",
|
|
42
|
|
|
43
|
/** @type String */
|
|
44
|
border: "",
|
|
45
|
|
|
46
|
/** this gets set in Map.js when the popup is added to the map
|
|
47
|
* @type OpenLayers.Map */
|
|
48
|
map: null,
|
|
49
|
|
|
50
|
/**
|
|
51
|
* @constructor
|
|
52
|
*
|
|
53
|
* @param {String} id
|
|
54
|
* @param {OpenLayers.LonLat} lonlat
|
|
55
|
* @param {OpenLayers.Size} size
|
|
56
|
* @param {String} contentHTML
|
|
57
|
*/
|
|
58
|
initialize:function(id, lonlat, size, contentHTML) {
|
|
59
|
OpenLayers.Popup.count += 1;
|
|
60
|
this.id = (id != null) ? id : "Popup" + OpenLayers.Popup.count;
|
|
61
|
this.lonlat = lonlat;
|
|
62
|
this.size = (size != null) ? size
|
|
63
|
: new OpenLayers.Size(
|
|
64
|
OpenLayers.Popup.WIDTH,
|
|
65
|
OpenLayers.Popup.HEIGHT);
|
|
66
|
if (contentHTML != null) {
|
|
67
|
this.contentHTML = contentHTML;
|
|
68
|
}
|
|
69
|
this.backgroundColor = OpenLayers.Popup.COLOR;
|
|
70
|
this.opacity = OpenLayers.Popup.OPACITY;
|
|
71
|
this.border = OpenLayers.Popup.BORDER;
|
|
72
|
|
|
73
|
this.div = OpenLayers.Util.createDiv(this.id + "_div", null, null,
|
|
74
|
null, null, null, "hidden");
|
|
75
|
|
|
76
|
this.events = new OpenLayers.Events(this, this.div, null);
|
|
77
|
},
|
|
78
|
|
|
79
|
/**
|
|
80
|
*/
|
|
81
|
destroy: function() {
|
|
82
|
if (this.map != null) {
|
|
83
|
this.map.removePopup(this);
|
|
84
|
}
|
|
85
|
this.div = null;
|
|
86
|
this.map = null;
|
|
87
|
},
|
|
88
|
|
|
89
|
/**
|
|
90
|
* @param {OpenLayers.Pixel} px
|
|
91
|
*
|
|
92
|
* @returns Reference to a div that contains the drawn popup
|
|
93
|
* @type DOMElement
|
|
94
|
*/
|
|
95
|
draw: function(px) {
|
|
96
|
if (px == null) {
|
|
97
|
if ((this.lonlat != null) && (this.map != null)) {
|
|
98
|
px = this.map.getLayerPxFromLonLat(this.lonlat);
|
|
99
|
}
|
|
100
|
}
|
|
101
|
|
|
102
|
this.setSize();
|
|
103
|
this.setBackgroundColor();
|
|
104
|
this.setOpacity();
|
|
105
|
this.setBorder();
|
|
106
|
this.setContentHTML();
|
|
107
|
this.moveTo(px);
|
|
108
|
|
|
109
|
return this.div;
|
|
110
|
},
|
|
111
|
|
|
112
|
/**
|
|
113
|
* if the popup has a lonlat and its map members set,
|
|
114
|
* then have it move itself to its proper position
|
|
115
|
*/
|
|
116
|
updatePosition: function() {
|
|
117
|
if ((this.lonlat) && (this.map)) {
|
|
118
|
var px = this.map.getLayerPxFromLonLat(this.lonlat);
|
|
119
|
this.moveTo(px);
|
|
120
|
}
|
|
121
|
},
|
|
122
|
|
|
123
|
/**
|
|
124
|
* @param {OpenLayers.Pixel} px
|
|
125
|
*/
|
|
126
|
moveTo: function(px) {
|
|
127
|
if ((px != null) && (this.div != null)) {
|
|
128
|
this.div.style.left = px.x + "px";
|
|
129
|
this.div.style.top = px.y + "px";
|
|
130
|
}
|
|
131
|
},
|
|
132
|
|
|
133
|
/**
|
|
134
|
* @returns Boolean indicating whether or not the popup is visible
|
|
135
|
* @type Boolean
|
|
136
|
*/
|
|
137
|
visible: function() {
|
|
138
|
return Element.visible(this.div);
|
|
139
|
},
|
|
140
|
|
|
141
|
/**
|
|
142
|
*
|
|
143
|
*/
|
|
144
|
toggle: function() {
|
|
145
|
Element.toggle(this.div);
|
|
146
|
},
|
|
147
|
|
|
148
|
/**
|
|
149
|
*
|
|
150
|
*/
|
|
151
|
show: function() {
|
|
152
|
Element.show(this.div);
|
|
153
|
},
|
|
154
|
|
|
155
|
/**
|
|
156
|
*
|
|
157
|
*/
|
|
158
|
hide: function() {
|
|
159
|
Element.hide(this.div);
|
|
160
|
},
|
|
161
|
|
|
162
|
/**
|
|
163
|
* @param {OpenLayers.Size} size
|
|
164
|
*/
|
|
165
|
setSize:function(size) {
|
|
166
|
if (size != undefined) {
|
|
167
|
this.size = size;
|
|
168
|
}
|
|
169
|
|
|
170
|
if (this.div != null) {
|
|
171
|
this.div.style.width = this.size.w + "px";
|
|
172
|
this.div.style.height = this.size.h + "px";
|
|
173
|
}
|
|
174
|
},
|
|
175
|
|
|
176
|
/**
|
|
177
|
* @param {String} color
|
|
178
|
*/
|
|
179
|
setBackgroundColor:function(color) {
|
|
180
|
if (color != undefined) {
|
|
181
|
this.backgroundColor = color;
|
|
182
|
}
|
|
183
|
|
|
184
|
if (this.div != null) {
|
|
185
|
this.div.style.backgroundColor = this.backgroundColor;
|
|
186
|
}
|
|
187
|
},
|
|
188
|
|
|
189
|
/**
|
|
190
|
* @param {float} opacity
|
|
191
|
*/
|
|
192
|
setOpacity:function(opacity) {
|
|
193
|
if (opacity != undefined) {
|
|
194
|
this.opacity = opacity;
|
|
195
|
}
|
|
196
|
|
|
197
|
if (this.div != null) {
|
|
198
|
// for Mozilla and Safari
|
|
199
|
this.div.style.opacity = this.opacity;
|
|
200
|
|
|
201
|
// for IE
|
|
202
|
this.div.style.filter = 'alpha(opacity=' + this.opacity*100 + ')';
|
|
203
|
}
|
|
204
|
},
|
|
205
|
|
|
206
|
/**
|
|
207
|
* @param {int} border
|
|
208
|
*/
|
|
209
|
setBorder:function(border) {
|
|
210
|
if (border != undefined) {
|
|
211
|
this.border = border;
|
|
212
|
}
|
|
213
|
|
|
214
|
if (this.div != null) {
|
|
215
|
this.div.style.border = this.border;
|
|
216
|
}
|
|
217
|
},
|
|
218
|
|
|
219
|
/**
|
|
220
|
* @param {String} contentHTML
|
|
221
|
*/
|
|
222
|
setContentHTML:function(contentHTML) {
|
|
223
|
if (contentHTML != null) {
|
|
224
|
this.contentHTML = contentHTML;
|
|
225
|
}
|
|
226
|
|
|
227
|
if (this.div != null) {
|
|
228
|
this.div.innerHTML = this.contentHTML;
|
|
229
|
}
|
|
230
|
},
|
|
231
|
|
|
232
|
CLASS_NAME: "OpenLayers.Popup"
|
|
233
|
};
|