add member variables, constants, getters and setters, and tests for id, px, size, content html, background color, opacity, border

git-svn-id: http://svn.openlayers.org/trunk/openlayers@232 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
euzuro
2006-05-21 17:55:49 +00:00
parent 8487728e09
commit e5f4e4aa4a
3 changed files with 212 additions and 29 deletions

View File

@@ -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"
};

View File

@@ -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);
}
// -->
</script>
</head>
<body onload="init()">
<h1>OpenLayers Example</h1>
<div id="map"></div>
<div style="background-color:blue" onclick="away()"> hello</div>
<div style="background-color:blue" onclick="changer()"> changer</div>
<div style="background-color:red" onclick="destroy()"> destroy</div>
<div style="background-color:green" onclick="remove()"> remove</div>
</body>
</html>

View File

@@ -4,50 +4,94 @@
<script type="text/javascript"><!--
var popup;
function test_01_Popup_constructor (t) {
t.plan( 6 );
function test_01_Popup_default_constructor(t) {
t.plan( 11 );
popup = new OpenLayers.Popup();
t.ok( popup instanceof OpenLayers.Popup, "new OpenLayers.Popup returns Popup object" );
t.ok(popup.id.startsWith("Popup"), "good default popup.id");
t.eq(popup.px.x, OpenLayers.Popup.PX.x, "good default popup.px.x");
t.eq(popup.px.y, OpenLayers.Popup.PX.y, "good default popup.px.y");
t.eq(popup.size.w, OpenLayers.Popup.SIZE.w, "good default popup.size.w");
t.eq(popup.size.h, OpenLayers.Popup.SIZE.h, "good default popup.size.h");
t.eq(popup.contentHTML, "", "good default popup.contentHTML");
t.eq(popup.backgroundColor, OpenLayers.Popup.COLOR, "good default popup.backgroundColor");
t.eq(popup.opacity, OpenLayers.Popup.OPACITY, "good default popup.opacity");
t.eq(popup.border, OpenLayers.Popup.BORDER, "good default popup.border");
var oldIndex = parseInt(popup.id.slice("Popup".length));
popup = new OpenLayers.Popup();
var newIndex = parseInt(popup.id.slice("Popup".length));
t.eq(newIndex, oldIndex + 1, "default id generator incrementing correctly");
}
function test_02_Popup_constructor (t) {
t.plan( 7 );
var id = "chicken";
var x = 50;
var y = 100;
var w = 500;
var h = 400;
var content = "foo";
popup = new OpenLayers.Popup(id,
new OpenLayers.Pixel(x, y),
new OpenLayers.Size(w, h));
new OpenLayers.Size(w, h),
content);
t.ok( popup instanceof OpenLayers.Popup, "new OpenLayers.Popup returns Popup object" );
t.eq(popup.id, id, "popup.id set correctly");
t.eq(popup.px.x, x, "left position of popup.px set correctly");
t.eq(popup.px.y, y, "top position of popup.px set correctly");
t.eq(popup.size.w, w, "width position of popup.size set correctly");
t.eq(popup.size.h, h, "heightposition of popup.size set correctly");
t.eq(popup.size.w, w, "width of popup.size set correctly");
t.eq(popup.size.h, h, "height of popup.size set correctly");
t.eq(popup.contentHTML, content, "contentHTML porpoerty of set correctly");
}
function test_03_Popup_draw(t) {
function test_02_Popup_draw(t) {
t.plan( 5 );
t.plan( 9 );
var id = "chicken";
var x = 50;
var y = 100;
var w = 500;
var h = 400;
var content = "charlie";
var color = "red";
var opacity = 0.5;
var border = "1px solid";
popup = new OpenLayers.Popup(id,
new OpenLayers.Pixel(x, y),
new OpenLayers.Size(w, h));
new OpenLayers.Size(w, h),
content);
popup.draw();
popup.setBackgroundColor(color);
popup.setOpacity(opacity);
popup.setBorder(border);
t.eq(popup.div.id, id + "_div", "popup.div.id set correctly");
t.eq(popup.div.style.left, x + "px", "left position of popup.div set correctly");
t.eq(popup.div.style.top, y + "px", "top position of popup.div set correctly");
t.eq(popup.div.style.width, w + "px", "width position of popup.div set correctly");
t.eq(popup.div.style.height, h + "px", "heightposition of popup.div set correctly");
t.eq(popup.div.innerHTML, content, "good default popup.contentHTML");
t.eq(popup.div.style.backgroundColor, color, "good default popup.backgroundColor");
if (navigator.appName.indexOf("Microsoft") == -1) {
t.eq(parseFloat(popup.div.style.opacity), opacity, "good default popup.opacity");
} else {
t.eq(popup.div.style.filter, "alpha(opacity=" + opacity*100 + ")", "good default popup.opacity");
}
t.ok(popup.div.style.border.indexOf(border) != -1, "good default popup.border");
}