diff --git a/examples/popups.html b/examples/popups.html index 7ac745cda3..681bc59729 100644 --- a/examples/popups.html +++ b/examples/popups.html @@ -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 @@ -

OpenLayers Example

-
click to add popup to map
+
click to add Popup to map
+
click to add an Popup.Anchored
+
click to add Popup.AnchoredBubble
click to modify popup's attributes
-
click to add an anchored popup
-
click to remove the popup from map
+
click to remove the popup from map
diff --git a/lib/OpenLayers.js b/lib/OpenLayers.js index 62fd4e0086..ce6e37fb4a 100644 --- a/lib/OpenLayers.js +++ b/lib/OpenLayers.js @@ -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", diff --git a/lib/OpenLayers/Popup/AnchoredBubble.js b/lib/OpenLayers/Popup/AnchoredBubble.js new file mode 100644 index 0000000000..9eacc2b3a4 --- /dev/null +++ b/lib/OpenLayers/Popup/AnchoredBubble.js @@ -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" +});