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:
@@ -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"
|
||||
};
|
||||
27
popups.html
27
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);
|
||||
}
|
||||
|
||||
|
||||
// -->
|
||||
</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>
|
||||
|
||||
@@ -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");
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user