ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add AnchoredBubble.js, include it in dynamic load, add a bit of demo test.

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@349 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
euzuro
2006-05-25 02:27:29 +00:00
parent 79295569a3
commit b036da46f5
3 changed files with 198 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
examples/popups.html
View File

@@ -27,9 +27,9 @@
function changer() {
popup.setBackgroundColor("red");
popup.setSize(new OpenLayers.Size(200,20));
popup.moveTo(new OpenLayers.Pixel(120,120));
popup.setOpacity(.9);
popup.setSize(new OpenLayers.Size(100,600));
// popup.moveTo(new OpenLayers.Pixel(120,120));
// popup.setOpacity(.5);
popup.setBorder("2px solid");
popup.setContentHTML("High Chickens");
}
@@ -52,6 +52,16 @@
map.addPopup(popup);
}
function addAnchorBubble() {
popup = new OpenLayers.Popup.AnchoredBubble("chicken",
new OpenLayers.LonLat(5,40),
new OpenLayers.Size(200,200),
"example popup");
popup.setBackgroundColor("yellow");
popup.setOpacity(0.7);
map.addPopup(popup);
}
function destroy() {
popup.destroy();
}
@@ -65,11 +75,11 @@
</script>
</head>
<body onload="init()">
<h1>OpenLayers Example</h1>
<div id="map"></div>
<div style="background-color:purple" onclick="add()"> click to add popup to map</div>
<div style="background-color:purple" onclick="add()"> click to add Popup to map</div>
<div style="background-color:green" onclick="addAnchor()"> click to add an Popup.Anchored</div>
<div style="background-color:orange" onclick="addAnchorBubble()"> click to add Popup.AnchoredBubble</div>
<div style="background-color:blue" onclick="changer()"> click to modify popup's attributes</div>
<div style="background-color:red" onclick="addAnchor()"> click to add an anchored popup</div>
<div style="background-color:green" onclick="remove()"> click to remove the popup from map</div>
<div style="background-color:red" onclick="remove()"> click to remove the popup from map</div>
</body>
</html>

1
lib/OpenLayers.js
View File

@@ -54,6 +54,7 @@ catch(e){
"OpenLayers/Layer/WMS.js",
"OpenLayers/Layer/WFS.js",
"OpenLayers/Popup/Anchored.js",
"OpenLayers/Popup/AnchoredBubble.js",
"OpenLayers/Control.js",
"OpenLayers/Control/MouseDefaults.js",
"OpenLayers/Control/KeyboardDefaults.js",

180
lib/OpenLayers/Popup/AnchoredBubble.js Normal file
View File

@@ -0,0 +1,180 @@
// @require: OpenLayers/Popup/Anchored.js
/**
* @class
*/
OpenLayers.Popup.AnchoredBubble = Class.create();
//Border space for the rico corners
OpenLayers.Popup.AnchoredBubble.CORNER_SIZE = 5;
OpenLayers.Popup.AnchoredBubble.prototype =
Object.extend( new OpenLayers.Popup.Anchored(), {
/** @type DOMElement */
contentDiv:null,
/**
* @constructor
*
* @param {String} id
* @param {OpenLayers.LonLat} lonlat
* @param {OpenLayers.Size} size
* @param {String} contentHTML
*/
initialize:function(id, lonlat, size, contentHTML, anchorSize) {
OpenLayers.Popup.Anchored.prototype.initialize.apply(this, arguments);
},
/**
* @param {OpenLayers.Pixel} px
*
* @returns Reference to a div that contains the drawn popup
* @type DOMElement
*/
draw: function(px) {
OpenLayers.Popup.Anchored.prototype.draw.apply(this, arguments);
// make the content Div
var contentSize = this.size.copyOf();
contentSize.h -= (2 * OpenLayers.Popup.AnchoredBubble.CORNER_SIZE);
this.contentDiv = OpenLayers.Util.createDiv(
this.div.id + "-contentDiv",
null,
contentSize,
"auto",
null,
"relative");
this.div.appendChild(this.contentDiv);
this.setContentHTML();
this.setRicoCorners(true);
//set the popup color and opacity
this.setBackgroundColor();
this.setOpacity();
return this.div;
},
/**
* @param {OpenLayers.Size} size
*/
setSize:function(size) {
OpenLayers.Popup.Anchored.prototype.setSize.apply(this, arguments);
if (this.contentDiv != null) {
var contentSize = this.size.copyOf();
contentSize.h -= (2 * OpenLayers.Popup.AnchoredBubble.CORNER_SIZE);
this.contentDiv.style.height = contentSize.h + "px";
//size has changed - must redo corners
this.setRicoCorners(false);
}
},
/**
* @param {String} color
*/
setBackgroundColor:function(color) {
if (color != undefined) {
this.backgroundColor = color;
}
if (this.div != null) {
if (this.contentDiv != null) {
this.div.style.background = "transparent";
Rico.Corner.changeColor(this.contentDiv, this.backgroundColor);
}
}
},
/**
* @param {float} opacity
*/
setOpacity:function(opacity) {
if (opacity != undefined) {
this.opacity = opacity;
}
if (this.div != null) {
if (this.contentDiv != null) {
Rico.Corner.changeOpacity(this.contentDiv, this.opacity);
}
}
},
/** Bubble Popups can not have a border
*
* @param {int} border
*/
setBorder:function(border) {
this.border = 0;
},
/**
* @param {String} contentHTML
*/
setContentHTML:function(contentHTML) {
if (contentHTML != null) {
this.contentHTML = contentHTML;
}
if (this.contentDiv != null) {
this.contentDiv.innerHTML = this.contentHTML;
}
},
/**
* @private
*
* @param {Boolean} firstTime Is this the first time the corners are being
* rounded?
*
* update the rico corners according to the popup's
* current relative postion
*/
setRicoCorners:function(firstTime) {
var corners = this.getCornersToRound(this.relativePosition);
var options = {corners: corners,
color: this.backgroundColor,
bgColor: "transparent",
blend: false};
if (firstTime) {
Rico.Corner.round(this.div, options);
} else {
Rico.Corner.reRound(this.contentDiv, options);
//set the popup color and opacity
this.setBackgroundColor();
this.setOpacity();
}
},
/**
* @private
*
* @returns The proper corners string ("tr tl bl br") for rico
* to round
* @type String
*/
getCornersToRound:function() {
var corners = ['tl', 'tr', 'bl', 'br'];
//we want to round all the corners _except_ the opposite one.
var corner = OpenLayers.Bounds.oppositeQuadrant(this.relativePosition);
corners.remove(corner);
return corners.join(" ");
},
CLASS_NAME: "OpenLayers.Popup.AnchoredBubble"
});