Ticket #926: patch-326-r5997-A0.diff

theme/default/style.css

@@ -94 +94 @@
-    float:left;font-size:1.2em;
-}
-
-.olPopupContent {
-    padding:5px;
-}    
-.olControlNavToolbar { 
-    width:0px;
-    height:0px;
@@ -179 +176 @@
-    opacity: 0.50;
-    font-size: 1px;
-    filter: alpha(opacity=50);
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

lib/OpenLayers/Popup/FramedBubble.js

@@ +1 @@
+/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
+ * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license. */
+
+OpenLayers.Position = {
+    TOP_LEFT: "top-left",
+    TOP_RIGHT: "top-right",
+    BOTTOM_LEFT: "bottom-left",
+    BOTTOM_RIGHT: "bottom-right"   
+};
+
+/**
+ * Class: OpenLayers.Popup.FramedBubble
+ */
+OpenLayers.Popup.FramedBubble = OpenLayers.Class({
+
+    /**
+     * Property: bubble
+     * hash of properties for the bubble decoration
+     */
+    bubble: {
+        /**
+         * src - {String} url to the global popup image
+         * size - {<OpenLayers.Size>} size of the global popup image
+         */
+        image: {
+            src: OpenLayers.Util.getImagesLocation() + 'popup.png',
+            size: new OpenLayers.Size(676, 736)
+        },
+        /**
+         * popup minimum size
+         */
+        minSize: new OpenLayers.Size(105, 10),
+        /**
+         * outside margin of the popup including bubble decoration
+         * usefull to prevent the popup to be too close to the map border
+         */
+        margin: new OpenLayers.Bounds(5, 5, 5, 5),
+        /**
+         * inside padding of the bubble
+         * usefull for the contentDiv
+         */
+        padding: [15, 32, 61, 15],
+        /**
+         * Relative position in the lower right corner
+         */
+        relativePosition: OpenLayers.Position.BOTTOM_RIGHT,
+        /**
+         * The x and y offset needed position the stem image over the marker.
+         */
+        offset: new OpenLayers.Pixel(55, -10),
+        /**
+         * size - {Array} width and height of the clipping div (accepts 'auto' values)
+         * anchor - {Array} top, right, bottom, left values to position the clipping div
+         * position - {<OpenLayers.Pixel>} left and top position of the image, 
+         *     in order to show a specific part of the global popup image
+         */
+        blocks: [
+            { // top-left
+                size: ['auto', 'auto'],
+                anchor: [0, 38, 68, 0],
+                position: new OpenLayers.Pixel(0, 0)
+            },
+            { //top-right
+                size: [38, 'auto'],
+                anchor: [0, 0, 68, null],
+                position: new OpenLayers.Pixel(-638, 0)
+            },
+            { //bottom-left
+                size: ['auto', 39],
+                anchor: [null, 97, 29, 0],
+                position: new OpenLayers.Pixel(0, -629)
+            },
+            { // stem
+                size: [97, 68],
+                anchor: [null, 0, 0, null],
+                position: new OpenLayers.Pixel(0, -668)
+            }
+        ]
+    },
+    
+    div: null,
+    contentDiv: null,
+    
+    /**
+     * APIMethod: onLoad
+     * {Function} Optional function to be called when the popup is fully drawn.
+     */
+    onLoad: function() {},
+    
+    /**
+     * APIMethod: onClose
+     * {Function} Optional function to be called when close button is clicked.
+     */
+    onClose: function() {},
+    
+    /**
+     * Property: decorated
+     * {Boolean} tells if popup is already decorated, if true decorate() only updates sizes
+     */
+    decorated: false,
+    
+    /** 
+     * Constructor: OpenLayers.Popup.FramedBubble
+     * 
+     * Parameters:
+     * id - {String}
+     * lonlat - {<OpenLayers.LonLat>}
+     * size - {<OpenLayers.Size>}
+     * contentHTML - {String}
+     * anchor - {Object} Object to which we'll anchor the popup. Must expose 
+     *     a 'size' (<OpenLayers.Size>) and 'offset' (<OpenLayers.Pixel>) 
+     *     (Note that this is generally an <OpenLayers.Icon>).
+     * closeBox - {Boolean}
+     * closeBoxCallback - {Function} Function to be called on closeBox click.
+     */
+    initialize:function(id, lonlat, size, contentHTML, anchor, closeBox,
+                        closeBoxCallback) {
+        
+        if (id == null) {
+            id = OpenLayers.Util.createUniqueID(this.CLASS_NAME + "_");
+        }
+
+        this.id = id;
+        this.lonlat = lonlat;
+        this.size = (size != null) ? size 
+                                  : new OpenLayers.Size(
+                                                   OpenLayers.Popup.WIDTH,
+                                                   OpenLayers.Popup.HEIGHT);
+        
+        if (contentHTML != null) { 
+             this.contentHTML = contentHTML;
+        }
+     
+        // compute the div size (ie. popup with bubble)
+        
+        this.div = OpenLayers.Util.createDiv(this.id + "Frame", null, null,
+                                             null, "absolute");
+        this.div.className = "olBubbleFrame";
+        
+        this.contentDiv = OpenLayers.Util.createDiv(id, null, null, 
+                                                    null, "absolute", null,
+                                                    "hidden");
+        // TODO: when popup is created by a feature using createPopup(), the overflow
+        // is reset to auto, which causes display flickr when popup is outside the map viewport
+        this.contentDiv.className = 'olPopupContent';
+        
+        // determine actual render dimensions
+        this.size = this.getRenderedDimensions();
+        
+        this.contentDiv.style.left = this.bubble.padding[3] + "px";
+        this.contentDiv.style.top = this.bubble.padding[0] + "px";
+        
+        if (closeBox) {
+            // TODO : we should probably use the bubble properties
+            
+            // close icon
+            var oBtnClose = document.createElement("A");
+            oBtnClose.id = "olPopupCloseButton";
+            oBtnClose.className = "close";
+            oBtnClose.style.position = "absolute";
+            oBtnClose.title = "close popup";
+            oBtnClose.href = "#";
+            this.div.appendChild(oBtnClose);
+            
+            var closePopup = closeBoxCallback ||
+            function(e){
+                this.hide();
+                OpenLayers.Event.stop(e);
+            };
+            OpenLayers.Event.observe(oBtnClose, "click",
+                OpenLayers.Function.bindAsEventListener(closePopup, this));
+        }        
+    },
+
+    /** 
+     * APIMethod: destroy
+     * nullify references to prevent circular references and memory leaks
+     */
+    destroy: function() {
+        if (this.map != null) {
+            this.map.removePopup(this);
+        }
+        this.div = null;
+        this.contentDiv = null;
+        this.map = null;
+    },
+
+    /** 
+     * Method: draw
+     * 
+     * Parameters:
+     * px - {<OpenLayers.Pixel>}
+     * 
+     * Returns:
+     * {DOMElement} Reference to a div that contains the drawn popup.
+     */
+    draw: function(px) {
+        this.setSize(this.size);
+        this.setContentHTML();
+        
+        this.onLoad();
+        
+        /*
+         * by Pierre GIRAUD: I would prefer something like if (!viewable) { .. doSomething .. }
+         */
+        this.shiftMapIfNotViewable();
+          
+        return this.div;
+    },
+
+    /**
+     * Method: moveTo
+     * 
+     * Parameters:
+     * px - {<OpenLayers.Pixel>} the top and left position of the popup div. 
+     */
+    moveTo: function(px) {
+        px = this.calculateRelativePosition(px);
+        
+        this.div.style.left = px.x + "px";
+        this.div.style.top = px.y + "px";
+    },
+    
+    /** 
+     * Method: updatePosition
+     * if the popup has a lonlat and its map member set, 
+     * then have it move itself to its proper position
+     */
+    updatePosition: function() {
+        this.shiftMapIfNotViewable();
+        
+        if ((this.lonlat) && (this.map)) {
+            var px = this.map.getLayerPxFromLonLat(this.lonlat);
+            if (px) {
+                this.moveTo(px);           
+            }
+        }
+    },
+
+    /** 
+     * APIMethod: Set the size of the popup. 
+     *     Given size is intended to be used for the content.
+     *     This function also makes sure the popup does not get sized larger than
+     *     the viewport.
+     * 
+     * Parameters:
+     * size {OpenLayers.Size} - size of the content of the popup
+     */
+    setSize: function(size) {
+        size = this.constrainSizeToViewPort(size);
+        
+        // pgiraud: to my point of view, the popup given size correspond
+        // to the size of the content, it's easier to user to set this size
+        // (to show an image in the popup for example)
+        
+        // first set the contentDiv style with the given size
+        this.contentDiv.style.width = size.w + "px";
+        this.contentDiv.style.height = size.h + "px";
+        
+        // then compute the size of the frame using the bubble properties
+        var w = size.w + this.bubble.padding[1] + this.bubble.padding[3];
+        var h = size.h + this.bubble.padding[0] + this.bubble.padding[2];
+        size.w = w;
+        size.h = h;
+        this.frameSize = size;
+        
+        this.div.style.width = this.frameSize.w + "px";
+        this.div.style.height = this.frameSize.h + "px";
+        
+        this.updatePosition();
+        
+        this.decorate();
+    },
+    
+    /**
+     * Method: getRenderedDimensions
+     * Renders the contentHTML offscreen to determine actual dimensions for
+     *     popup sizing. As we need layout to determine dimensions the content
+     *     is rendered -9999px to the left and absolute to ensure the scrollbars do not flicker
+     *     
+     * Returns:
+     * {OpenLayers.Size}
+     */
+    getRenderedDimensions : function() {
+        
+        // create temp container div with restricted size
+        var container = document.createElement("div");
+        container.className = 'olBubbleFrame';
+        container.style.overflow="";
+        container.style.position = "absolute";
+        container.style.left="-9999px";
+            
+        // create temp content div and assign content
+        var content = document.createElement("div");
+        content.innerHTML = this.contentHTML;
+        content.className = 'olPopupContent';
+        
+        // add content to restricted container 
+        container.appendChild(content);
+        
+        // append container to body for rendering
+        document.body.appendChild(container);
+        
+        // calculate scroll width of content and add corners and shadow width
+        var w = parseInt(content.scrollWidth);//
+        
+        // update container width to allow height to adjust
+        container.style.width = w + "px";
+        
+        // capture height and add shadow and corner image widths
+        var h = parseInt(content.scrollHeight);//
+            
+        // remove elements
+        document.body.removeChild(container);
+        
+        // cleanup
+        container = null;
+        content = null;
+        
+        // prevent the popup from being smaller than a given minimal size
+        if (w < this.bubble.minSize.w) {
+            w = this.bubble.minSize.w;
+        }
+        if (h < this.bubble.minSize.h) {
+            h = this.bubble.minSize.h;
+        }
+        
+        return new OpenLayers.Size(w, h);
+    },
+    
+    /**
+     * Method: constrainSizeToViewPort
+     * Ensure that popup size doesn't get larger than the map viewport size
+     * 
+     * Returns:
+     * {OpenLayers.Size}
+     */
+    constrainSizeToViewPort: function(size) {
+        size = size.clone();
+        
+        // Restrict the size if it's greater than the map's viewport.
+        var mapSize = this.map.size;
+        
+        // Calculate the difference between the container and the content
+        // and scale the content accordingly.
+        var heightDifference = size.h - 
+            (mapSize.h - 
+             this.bubble.margin.top - 
+             this.bubble.margin.bottom);
+        
+        if (heightDifference > 0) {
+            size.h -= heightDifference;
+        }
+        
+        var widthDifference = size.w - 
+            (mapSize.w - 
+             this.bubble.margin.left - 
+             this.bubble.margin.right +
+             OpenLayers.Popup.SCROLL_BAR_WIDTH);
+        
+        if (widthDifference > 0) {
+            size.w -= widthDifference;
+        } else if (size.w + OpenLayers.Popup.SCROLL_BAR_WIDTH < mapSize.w){
+            size.w += OpenLayers.Popup.SCROLL_BAR_WIDTH;
+        }
+        
+        return size;
+    },
+    
+    /**
+     * Method: shiftMapIfNotViewable
+     * Shifts the map (pan) if the popup isn't totaly viewable (includes bubble.margin)
+     * TODO use the panTo (animated method)
+     */
+    shiftMapIfNotViewable : function() {
+        
+        var mapSize = this.map.getSize();
+        var popupPosition = this.calculateRelativePosition(this.map.getViewPortPxFromLonLat(this.lonlat), this.frameSize);
+    
+        // Get the current center before any shift.
+        var center = this.map.getViewPortPxFromLonLat(this.map.getCenter());
+        var newCenter = center.clone();
+        
+        var top = popupPosition.y;
+        var right = popupPosition.x + this.frameSize.w;
+        var bottom = popupPosition.y + this.frameSize.h;
+        var left = popupPosition.x;
+        
+        // TODO: check race condition
+        // what if left is not visible and right is not visible ?
+        
+        // If left is not visible...
+        if (left < this.bubble.margin.left) {
+            newCenter.x += left - this.bubble.margin.left;
+        }
+         
+        // If right is not visible...
+        if (right > mapSize.w - this.bubble.margin.right) {
+            newCenter.x += parseInt(right - mapSize.w + this.bubble.margin.right);
+        }
+        
+        // If top is not visible...
+        if (top < this.bubble.margin.top) {
+            newCenter.y += top - this.bubble.margin.top;
+        }
+        
+        // If bottom is not visible...
+        if (bottom > mapSize.h - this.bubble.margin.bottom) {
+            newCenter.y += parseInt(bottom - mapSize.h + this.bubble.margin.bottom);
+        }
+        
+//        this.map.shiftToViewPortPx(newCenter);
+        var dx = newCenter.x - center.x;
+        var dy = newCenter.y - center.y;
+        
+        // TODO: this will be the place to call panTo (animated panning)
+        this.map.pan(dx, dy);
+    },
+    
+    /**
+     * Method: calculateRelativePosition
+     * 
+     * Calculate the position of the popup (or what the popup should be)
+     * given a starting pixel position and a size value.
+     * 
+     * Parameters:
+     * px - {<OpenLayers.Pixel>} The top and left position of the popup div.
+     * 
+     * Returns: 
+     * {<OpenLayers.Pixel>} The new top and left position of the popup div.
+     */
+    calculateRelativePosition: function(px) {
+        px = px.clone();
+        
+        px.x += this.bubble.offset.x;
+        px.y += this.bubble.offset.y;
+        
+        if (this.bubble.relativePosition == OpenLayers.Position.TOP_RIGHT ||
+            this.bubble.relativePosition == OpenLayers.Position.BOTTOM_RIGHT) {
+            px.x -= this.frameSize.w;
+        }
+        
+        if (this.bubble.relativePosition == OpenLayers.Position.BOTTOM_LEFT ||
+            this.bubble.relativePosition == OpenLayers.Position.BOTTOM_RIGHT) {
+            px.y -= this.frameSize.h;
+        }
+        
+        return px; 
+    },
+    
+    /**
+     * Method: setContentHTML
+     * Allows the user to set the HTML content of the popup.
+     *
+     * Parameters:
+     * contentHTML - {String} HTML for the div.
+     */
+    setContentHTML:function(contentHTML) {
+        if (contentHTML != null) {
+            this.contentHTML = contentHTML;
+        }
+        
+        if (this.contentDiv != null) {
+            this.contentDiv.innerHTML = this.contentHTML;
+        }    
+    },
+    
+    /****************************
+     *        Styling           *
+     ****************************/
+    
+    /**
+     * Method: decorate
+     * Append the bubble images (corners) to the frame
+     */
+    decorate: function() {
+        var src = this.bubble.image.src;
+        var blocks = this.bubble.blocks;
+        for (var i in blocks) {
+            var block = blocks[i];
+            var divId = this.id + '_FrameDecorationDiv_' + i;
+            var imgId = this.id + '_FrameDecorationImg_' + i;
+            
+            var div, image;
+            if (this.decorated) {
+                div = OpenLayers.Util.getElement(divId);
+                image = OpenLayers.Util.getElement(imgId);
+            } else {
+                div = OpenLayers.Util.createDiv(divId, null, null, null, "absolute", null, "hidden", null);
+                image = OpenLayers.Util.createAlphaImageDiv(imgId, null, this.bubble.image.size, src, "absolute", null, null, null);
+                div.appendChild(image);
+                this.div.appendChild(div);
+            }
+            
+            // adjust sizes
+            var t = block.anchor[0];
+            var r = block.anchor[1];
+            var b = block.anchor[2];
+            var l = block.anchor[3];
+            
+            var w = (block.size[0] == 'auto') ?
+                 this.frameSize.w - (r + l) : block.size[0];
+            var h = (block.size[1] == 'auto') ?
+                 this.frameSize.h - (b + t) : block.size[1];
+                 
+            div.style.width = parseInt(w) + 'px';
+            
+            div.style.height = h + 'px';
+
+            div.style.top = (t != null) ? t + 'px' : '';
+            div.style.right = (r != null) ? r + 'px' : '';            
+            div.style.bottom = (b != null) ? b + 'px' : '';
+            div.style.left = (l != null) ? l + 'px' : '';
+            
+            image.style.left = block.position.x + 'px';
+            image.style.top = block.position.y + 'px';
+            
+        }
+        this.div.appendChild(this.contentDiv);
+        this.decorated = true;
+    },
+
+    /**
+     * APIMethod: visible
+     *
+     * Returns:      
+     * {Boolean} Boolean indicating whether or not the popup is visible
+     */
+    visible: function() {
+        return OpenLayers.Element.visible(this.div);
+    },
+
+    /**
+     * APIMethod: toggle
+     * Toggles visibility of the popup.
+     */
+    toggle: function() {
+        OpenLayers.Element.toggle(this.div);
+    },
+
+    /**
+     * APIMethod: show
+     * Makes the popup visible.
+     */
+    show: function() {
+        OpenLayers.Element.show(this.div);
+    },
+
+    /**
+     * APIMethod: hide
+     * Makes the popup invisible.
+     */
+    hide: function() {
+        if (this.map) {
+            this.map.removePopup(this);
+        }
+        OpenLayers.Element.hide(this.div);
+        this.onClose();
+    },
+
+    /**
+     * APIMethod: setBackgroundColor
+     * Kept here for compatibility with possible old application code
+     */
+    setBackgroundColor:function(color) {},  
+    
+    /**
+     * APIMethod: setOpacity
+     * Sets the opacity of the popup.
+     * 
+     * Parameters:
+     * opacity - {float} A value between 0.0 (transparent) and 1.0 (solid).   
+     */
+    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 + ')';
+        }
+    },
+    
+    /**
+     * Method: setBorder
+     * Kept here for compatibility with possible old application code
+     */
+    setBorder:function() {},      
+
+    CLASS_NAME: "OpenLayers.Popup.FramedBubble"
+});

lib/OpenLayers/Popup/Anchored.js

@@ -118 +118 @@
-     * size - {<OpenLayers.Size>}
-     */
-    setSize:function(size) { 
+        // pgiraud : we can imagine to resize the popup using an animation tween
-        OpenLayers.Popup.prototype.setSize.apply(this, arguments);
-
-        if ((this.lonlat) && (this.map)) {
-            var px = this.map.getLayerPxFromLonLat(this.lonlat);
-            this.moveTo(px);
-        }
-  
+
-    
-    /** 
-     * Method: calculateNewPx

lib/OpenLayers/Util.js

@@ -1321 +1321 @@
-    }
-    
-    return browserName;
-
+

lib/OpenLayers.js

@@ -117 +117 @@
-            "OpenLayers/Layer/TileCache.js",
-            "OpenLayers/Popup/Anchored.js",
-            "OpenLayers/Popup/AnchoredBubble.js",
+            "OpenLayers/Popup/FramedBubble.js",
-            "OpenLayers/Feature.js",
-            "OpenLayers/Feature/Vector.js",
-            "OpenLayers/Feature/WFS.js",

examples/framedPopups.html

@@ +1 @@
+<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
+  <head>
+    <style type="text/css">
+        #map {
+            width: 512px;
+            height: 400px;
+            border: 1px solid black;
+        }
+    </style>
+<!--    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>-->
+
+    <script src="../lib/Firebug/firebug.js"></script>
+    <script src="../lib/OpenLayers.js"></script>
+    <script type="text/javascript">
+        var map, layer, popup;
+        var markers, feature, marker;
+        var initialDecoration, backToInitDecoration;
+        
+        function init(){
+            map = new OpenLayers.Map('map');
+            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
+            map.addLayer(layer);
+            layer = new OpenLayers.Layer.Google( "Google" );
+            map.addLayer(layer);
+
+            map.addControl(new OpenLayers.Control.LayerSwitcher());
+            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
+            addMarker();
+            
+            initialDecoration = OpenLayers.Popup.FramedBubble.prototype.bubble;
+        }
+        
+        function addMarker() {
+    
+            markers = new OpenLayers.Layer.Markers("zibo");
+            map.addLayer(markers);
+
+            feature = new OpenLayers.Feature(layer, 
+                                                 new OpenLayers.LonLat(0,0));
+
+
+            marker = feature.createMarker();
+            
+            markers.addMarker(marker);
+            marker.events.register("mousedown", marker, mousedown);
+                                                             
+        }
+        
+        function mousedown(evt) {
+             // check to see if the popup was hidden by the close box
+             // if so, then destroy it before continuing
+            if (popup != null) {
+                if (!popup.visible()) {
+                    markers.map.removePopup(popup);
+                    popup.destroy();
+                    popup = null;
+                }
+            }
+            if (popup == null) {
+                popup = new OpenLayers.Popup.FramedBubble("chicken", 
+                                         feature.lonlat,
+                                         new OpenLayers.Size(200,200),
+                                         "<a href='http://www.somethingconstructive.net' target='_blank'>click me</a><br />" +
+                                         "<img src='http://www.openlayers.org/images/OpenLayers.trac.png' /><br />" + 
+                                         "OpenLayers rocks !",
+                                         marker.icon,
+                                         true);
+                                         
+                markers.map.addPopup(popup);
+            } else {
+                markers.map.removePopup(popup);
+                popup.destroy();
+                popup = null;
+            }
+            OpenLayers.Event.stop(evt);
+        }        
+
+        /**
+         * @param {Event} evt
+         */
+        function onPopupMouseDown(evt) {
+            markers.map.removePopup(popup);
+            popup.destroy();
+            popup = null;
+            OpenLayers.Event.stop(evt);
+        }
+
+
+        function destroy() {
+            popup.destroy();
+        }
+
+        function remove() {
+            markers.removeMarker(marker);
+        }
+
+        function removelayer() {
+            layer.destroy();
+//            map.removeLayer(markers);
+        }
+        
+        function changeDecoration() {
+            if (popup != null) {
+                markers.map.removePopup(popup);
+                popup.destroy();
+                popup = null;
+            }
+            
+            if (backToInitDecoration) {
+                OpenLayers.Popup.FramedBubble.prototype.bubble = initialDecoration;
+                backToInitDecoration = false;
+            } else {
+                OpenLayers.Popup.FramedBubble.prototype.bubble = {
+                    image: {
+                        src: OpenLayers.Util.getImagesLocation() + 'popup_orange.png',
+                        size: new OpenLayers.Size(598, 588)
+                    },
+                    minSize: new OpenLayers.Size(105, 10),
+                    margin: new OpenLayers.Bounds(5, 5, 5, 5),
+                    padding: [15, 26, 30, 40],
+                    relativePosition: OpenLayers.Position.BOTTOM_LEFT,
+                    offset: new OpenLayers.Pixel(0, -10),
+                    blocks: [
+                        { // top-left
+                            size: ['auto', 'auto'],
+                            anchor: [0, 19, 29, 0],
+                            position: new OpenLayers.Pixel(0, 0)
+                        },
+                        { //top-right
+                            size: [19, 'auto'],
+                            anchor: [0, 0, 29, null],
+                            position: new OpenLayers.Pixel(-579, 0)
+                        },
+                        { //bottom-right
+                            size: [19, 29],
+                            anchor: [null, 0, 0, null],
+                            position: new OpenLayers.Pixel(-579, -559)
+                        },
+                        { // stem
+                            size: ['auto', 29],
+                            anchor: [null, 19, 0, 0],
+                            position: new OpenLayers.Pixel(0, -559)
+                        }
+                    ]
+                };
+                backToInitDecoration = true;
+            }
+        }
+    </script>
+  </head>
+  <body onload="init()">
+  <h1 id="title">Popup Mayhem</h1>
+
+  <div id="tags">
+  </div>
+  <p id="shortdesc">
+    All kinds of ways to create and interact with Popups.
+  </p>
+
+  <div id="map"></div>
+    <div id="docs">
+    Detailed description of this example needs to be written.<br />
+    <a href="javascript:changeDecoration();void(0)" >change popup decoration</a> You'll need to reopen the popup to see it rendered differently.<br />
+    Below you can find the way bubble decoration dimensions are calculated.<br />
+    <img src="../img/popup_orange_dimensions.png" />
+    
+   </div>
+  </body>
+</html>

examples/popups.html

@@ -1 @@
-
+ debug="true"
-  <head>
-    <style type="text/css">
-        #map {
@@ -7 +7 @@
-            border: 1px solid black;
-        }
-    </style>
-
+
+
+
-    <script src="../lib/OpenLayers.js"></script>
-    <script type="text/javascript">
-        var map, layer, popup;
@@ -22 +24 @@
-            map.addLayer(layer);
-
-            map.addControl(new OpenLayers.Control.LayerSwitcher());
-zoomToMaxExtent(
-
+setCenter(new OpenLayers.LonLat(0, 0), 3
+addMarker();
-        }
-
-
-
-
-
-
-
-
+
+
+
+
+
-        }
-
-        function add() {
@@ -81 +81 @@
-                }
-            }
-            if (popup == null) {
-
-
-
+
+
+
+
+
+
+
+
+
-                popup.setOpacity(0.7);
-                markers.map.addPopup(popup);
-            } else {
@@ -131 +137 @@
-  <div id="map"></div>
-    <p>If you open an anchoredbubble and switch to google, it shouldn't crash. If it does, don't release OpenLayers.</p>  
-    <div style="background-color:purple" onclick="add()"> click to add Popup to map</div>
-Anchor
+Fram
-    <div style="background-color:blue" onclick="changer()"> click to modify popup's attributes</div>
-    <div style="background-color:red" onclick="remove()"> click to remove the popup from map</div>
-    <div style="background-color:grey" onclick="removelayer()"> click to remove the markers layer</div>

examples/select-feature-openpopup.html

@@ -19 +19 @@
-        }
-        function onFeatureSelect(feature) {
-            selectedFeature = feature;
-Anchored
+FramedBubble
-                                     feature.geometry.getBounds().getCenterLonLat(),
-                                     new OpenLayers.Size(250,75),
-                                     "<div style='font-size:.8em'>Feature: " + feature.id +"<br />Area: " + feature.geometry.getArea()+"</div>",