diff --git a/lib/OpenLayers/Popup.js b/lib/OpenLayers/Popup.js index 74dec3d8c1..f7e82c02ed 100644 --- a/lib/OpenLayers/Popup.js +++ b/lib/OpenLayers/Popup.js @@ -2,11 +2,22 @@ * @class */ OpenLayers.Popup = Class.create(); + +OpenLayers.Popup.count = 0; +OpenLayers.Popup.PX = new OpenLayers.Pixel(0, 0); +OpenLayers.Popup.SIZE = new OpenLayers.Size(200, 200); +OpenLayers.Popup.COLOR = "white"; +OpenLayers.Popup.OPACITY = 0.5; +OpenLayers.Popup.BORDER = "0px"; + OpenLayers.Popup.prototype = { /** @type String */ id: "", + /** reference to the parent DIV to which this popup is @type DOMElement */ + parent: null, + /** @type DOMElement */ div: null, @@ -16,23 +27,48 @@ OpenLayers.Popup.prototype = { /** @type OpenLayers.Size*/ size: null, + /** @type String */ + contentHTML: "", + + /** @type String */ + backgroundColor: "", + + /** @type float */ + opacity: "", + + /** @type String */ + border: "", + + /** * @constructor * * @param {String} id * @param {OpenLayers.Pixel} px * @param {OpenLayers.Size} size + * @param {String} contentHTML */ - initialize:function(id, px, size) { - this.id = id; - this.px = px; - this.size = size; + initialize:function(id, px, size, contentHTML) { + OpenLayers.Popup.count += 1; + + this.id = (id != null) ? id : "Popup" + OpenLayers.Popup.count; + this.px = (px != null) ? px : OpenLayers.Popup.PX; + this.size = (size != null) ? size : OpenLayers.Popup.SIZE; + if (contentHTML != null) { + this.contentHTML = contentHTML; + } + this.backgroundColor = OpenLayers.Popup.COLOR; + this.opacity = OpenLayers.Popup.OPACITY; + this.border = OpenLayers.Popup.BORDER; }, /** */ destroy: function() { - + if ((this.div) && (this.div.parentNode)) { + this.div.parentNode.removeChild(this.div); + } + this.div = null; }, /** @@ -40,16 +76,104 @@ OpenLayers.Popup.prototype = { draw: function() { if (this.div == null) { this.div = OpenLayers.Util.createDiv(this.id + "_div", - this.px, - this.size - ); - - this.div.style.backgroundColor = "red"; + null, + null, + "hidden"); } + this.setPx(); + this.setSize(); + this.setBackgroundColor(); + this.setOpacity(); + this.setBorder(); + this.setContentHTML(); + return this.div; - }, + }, + + /** + * @param {OpenLayers.Size} size + */ + setSize:function(size) { + if (size != undefined) { + this.size = size; + } + + if (this.div != null) { + this.div.style.width = this.size.w; + this.div.style.height = this.size.h; + } + }, + + /** + * @param {OpenLayers.Pixel} px + */ + setPx:function(px) { + if (px != undefined) { + this.px = px; + } + + if (this.div != null) { + this.div.style.left = this.px.x; + this.div.style.top = this.px.y; + } + }, + + + /** + * @param {String} color + */ + setBackgroundColor:function(color) { + if (color != undefined) { + this.backgroundColor = color; + } + + if (this.div != null) { + this.div.style.backgroundColor = this.backgroundColor; + } + }, + /** + * @param {float} opacity + */ + setOpacity:function(opacity) { + if (opacity != undefined) { + this.opacity = opacity; + } + + if (this.div != null) { + // for Mozilla and Safari + this.div.style.opacity = this.opacity; + + // for IE + this.div.style.filter = 'alpha(opacity=' + this.opacity*100 + ')'; + } + }, + /** + * @param {int} border + */ + setBorder:function(border) { + if (border != undefined) { + this.border = border; + } + + if (this.div != null) { + this.div.style.border = this.border; + } + }, + /** + * @param {String} contentHTML + */ + setContentHTML:function(contentHTML) { + if (contentHTML != null) { + this.contentHTML = contentHTML; + } + + if (this.div != null) { + this.div.innerHTML = this.contentHTML; + } + }, + CLASS_NAME: "OpenLayers.Popup" }; \ No newline at end of file diff --git a/popups.html b/popups.html index 553e502b26..36974b7b08 100644 --- a/popups.html +++ b/popups.html @@ -21,10 +21,7 @@ map.addLayer(layer); - popup = new OpenLayers.Popup("chicken", - new OpenLayers.Pixel(20,240), - new OpenLayers.Size(500,100) - ); + popup = new OpenLayers.Popup("chicken"); map.addPopup(popup); @@ -32,15 +29,33 @@ map.addControl(new OpenLayers.Control.LayerSwitcher()); } - function away() { + function changer() { + popup.setBackgroundColor("red"); + popup.setSize(new OpenLayers.Size(20,200)); + popup.setPx(new OpenLayers.Pixel(120,120)); + popup.setOpacity(.9); + popup.setBorder("2px solid"); + popup.setContentHTML("High Chickens"); + } + + function destroy() { + alert(navigator.appName); + popup.destroy(); + } + + function remove() { map.removePopup(popup); } + + // -->

OpenLayers Example

-
hello
+
changer
+
destroy
+
remove
diff --git a/tests/test_Popup.html b/tests/test_Popup.html index d54268f7f8..e3e7da7487 100644 --- a/tests/test_Popup.html +++ b/tests/test_Popup.html @@ -4,50 +4,94 @@