Ticket #926: 2.5-google-style-bubbles.patch

lib/OpenLayers/Popup/AnchoredBubble.js

@@ -1 @@
-
-
+
+
+
+
+
- * for the full text of the license. */
-
-
-/**
-requires OpenLayers/Popup/Anchored.j
+clas
- * 
-
-
-
-
+
- */
-OpenLayers.Popup.AnchoredBubble = 
-  OpenLayers.Class(OpenLayers.Popup.Anchored, {
-
-
-
-
-
-
-
+
+
-    /** 
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        OpenLayers.Popup.Anchored.prototype.initialize.apply(this, arguments);
-    },
-
-    /** 
-
-
-
-
-
-
-
-
+
+
+
+
+
-    draw: function(px) {
-        
-        OpenLayers.Popup.Anchored.prototype.draw.apply(this, arguments);
-
-        this.setContentHTML();
-        
-        //set the popup color and opacity           
-        this.setBackgroundColor(); 
-        this.setOpacity();
-
-        return this.div;
-    },
-
-    /**
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-        OpenLayers.Popup.Anchored.prototype.setSize.apply(this, arguments);
-        
-        if (this.contentDiv != null) {
-
-            var contentSize = this.size.clone();
-            contentSize.h -= (2 * OpenLayers.Popup.AnchoredBubble.CORNER_SIZE);
-            contentSize.h -= (2 * this.padding);
-    
-            this.contentDiv.style.height = contentSize.h + "px";
-            this.contentDiv.style.width  = contentSize.w + "px";
-            
-            if (this.map) {
-                //size has changed - must redo corners        
-                this.setRicoCorners(!this.rounded);
-                this.rounded = true;
-            }    
-        }
-    },  
-
-    /**
-     * APIMethod: setBackgroundColor
-     * 
-     * Parameters:
-     * color - {String}
-     */
-    setBackgroundColor:function(color) { 
-        if (color != undefined) {
-            this.backgroundColor = color; 
-        }
-        
-        if (this.div != null) {
-            if (this.contentDiv != null) {
-                this.div.style.background = "transparent";
-                OpenLayers.Rico.Corner.changeColor(this.contentDiv, 
-                                                   this.backgroundColor);
-            }
-        }
-    },  
-    
-    /**
-
-
-
-
+
-     */
-
-
+
+
+
+
-            this.opacity = opacity; 
-        }
-        
-
-
-
-
+
+
+
+
+
-            }
-        }
-    },  
- 
-    /** 
-     * Method: setBorder
-     * Always sets border to 0. Bubble Popups can not have a border.
-     * 
-     * Parameters:
-     * border - {Integer}
-     */
-    setBorder:function(border) { 
-        this.border = 0;
-    },      
- 
-    /** 
-     * Method: setRicoCorners
-     * Update RICO corners according to the popup's current relative postion.
-     *  
-     * Parameters:
-     * firstTime - {Boolean} This the first time the corners are being rounded.
-     */
-    setRicoCorners:function(firstTime) {
-    
-        var corners = this.getCornersToRound(this.relativePosition);
-        var options = {corners: corners,
-                         color: this.backgroundColor,
-                       bgColor: "transparent",
-                         blend: false};
-
-        if (firstTime) {
-            OpenLayers.Rico.Corner.round(this.div, options);
-        } else {
-            OpenLayers.Rico.Corner.reRound(this.groupDiv, options);
-            //set the popup color and opacity
-            this.setBackgroundColor(); 
-            this.setOpacity();
-        }
-    },
-
-    /** 
-     * Method: getCornersToRound
-     *  
-     * Returns:
-     * {String} The proper corners string ("tr tl bl br") for rico to round.
-     */
-    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);
-        OpenLayers.Util.removeItem(corners, corner);
-
-        return corners.join(" ");
-    },
-
-    CLASS_NAME: "OpenLayers.Popup.AnchoredBubble"
-});
-
-/**
- * Constant: CORNER_SIZE
- * {Integer} 5. Border space for the RICO corners.
- */
-OpenLayers.Popup.AnchoredBubble.CORNER_SIZE = 5;
-
+

lib/OpenLayers/Popup/Anchored.js

@@ -1 @@
-
-
+
+
+
+
- * for the full text of the license. */
-
-
-/**
+ * @class
+ * 
- * @requires OpenLayers/Popup.js
- * 
- * Class: OpenLayers.Popup.Anchored
- * 
- * Inherits from:
- *  - <OpenLayers.Popup>
- */
-
-
+
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
+
+
+
-    anchor: null,
+    
+    /** number of X pixels required to pan the map for the popup to be visible
+     * @type Unsigned Integer */
+    differenceX : 0,
+    
+    /** number of Y pixels required to pan the map for the popup to be visible
+     * @type Unsigned Integer */
+    differenceY : 0,
-
-    /** 
-Constructor: OpenLayers.Popup.Anchored
+@constructor
-    * 
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-    */
-
+
+
-        var newArguments = new Array(id, lonlat, size, contentHTML, closeBox);
-        OpenLayers.Popup.prototype.initialize.apply(this, newArguments);
-
-
-                               : { size: new OpenLayers.Size(0,0),
-                                   offset: new OpenLayers.Pixel(0,0)}
+: { size: new OpenLayers.Size(0,0), offset: new OpenLayers.Pixel(0,0)};
+
+this.registerEvents()
-    },
-
-    /** 
- * Method: draw
- 
- * Parameters:
- * px - {<OpenLayers.Pixel>}
- * 
- * Returns:
- * {DOMElement} Reference to a div that contains the drawn popup.
-*/
-draw: function(px)
-if (px == null) {
-if ((this.lonlat != null) && (this.map != null)) 
+* @param {OpenLayers.Pixel} px
+
+* @returns Reference to a div that contains the drawn popup
+* @type DOMElement
+*/
+draw: function(px)
+{
+   if (px == null) 
+   
+    if ((this.lonlat != null) && (this.map != null)) 
+
-                px = this.map.getLayerPxFromLonLat(this.lonlat);
-            }
-        }
-        
-calculate relative position
-relativePosition = this.calculateRelativePosition(px
+ check the popup is in view, if not reposition it
+updatePos(
-        
+        // return result of base draw call
-        return OpenLayers.Popup.prototype.draw.apply(this, arguments);
-    },
-    
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-        
-
-
+
+
+
+
+
-        
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    /**
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-        var newPx = this.calculateNewPx(px);
-        
-        var newArguments = new Array(newPx);        
@@ -107 +137 @@
-    },
-    
-    /**
-
-
-
-
-
-
+
+
+
+
-        OpenLayers.Popup.prototype.setSize.apply(this, arguments);
-
-
+
+
-            var px = this.map.getLayerPxFromLonLat(this.lonlat);
-            this.moveTo(px);
-        }
-  
-
+
+    
-    /** 
-Method: calculateNewPx
+@private 
-     * 
-
-
+
-     * 
-Returns:
-{<OpenLayers.Pixel>} The the new px position of the popup on the screen
-    relative to the passed-in px.
+@returns The the new px position of the popup on the screen
+          relative to the passed-in px
+@type OpenLayers.Pixel
-     */
-    calculateNewPx:function(px) {
-        var newPx = px.offset(this.anchor.offset);
@@ -139 +167 @@
-        
-        var left = (this.relativePosition.charAt(1) == 'l');
-        newPx.x += (left) ? -this.size.w : this.anchor.size.w;
-
+
+
+
-        return newPx;   
-    },
-
-    CLASS_NAME: "OpenLayers.Popup.Anchored"
-});
+
+

lib/OpenLayers/Popup.js

@@ -1 @@
-a modified
-pository
+the
+lease
- * for the full text of the license. */
-
+/** Corners object contains image information for image required to create popup corners.
+ * I decided to simply call it corners in an attempt to keep the code readable later on.
+ * Created to simplify updating of the popup shape, still needs some work to make it truly generic.
+ * */
+CORNERS = {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-OpenLayers.Popup = OpenLayers.Class({
-
-
-
-
-
+
-    events: null,
-    
-
-
-
+
-    id: "",
-
-
-
-
-
+
-    lonlat: null,
-
-
-
-
-
+
-    div: null,
-
-
-
-
-
+
-    size: null,    
-
-
-
-
-
+
-    contentHTML: "",
-    
-
-
-
-
-
-
-
-
-
-
+
-    opacity: "",
-
-    /** 
-     * Property: border 
-     * {String} the border size of the popup.  (eg 2px)
-     */
-    border: "",
-    
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
+
+
-
+    /** this gets set in Map.js when the popup is added to the map
+     * @type OpenLayers.Map */
+    map: null,
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-     */
-    map
+   closeBoxCallback
-
-    /** 
-
-
+
-    * 
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-    */
-
-
+
+
+
+
+
+
+
+
+
+
+
-            id = OpenLayers.Util.createUniqueID(this.CLASS_NAME + "_");
-        }
-
+
-        this.id = id;
-        this.lonlat = lonlat;
-
-
-
-
-
-
-
-
-
-
+
+
+
-
-this.div = OpenLayers.Util.createDiv(this.id, null, null, 
-                                     null, null, null, "hidden"
+// construct container div (main)
+this.div = OpenLayers.Util.createDiv(this.id, null, null, null, null, null
-        this.div.className = 'olPopup';
+       
+        // construct content div
+        var id = this.div.id + "_contentDiv";
+        this.contentDiv = OpenLayers.Util.createDiv(id, null, this.size.clone(), null, "static", null);
+        this.contentDiv.className = 'olPopupContent';
+       
+        // determine actual render dimensions
+        this.getRenderedDimensions();
-        
-
-
-
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
-           // close icon
-            var closeSize = new OpenLayers.Size(17,17);
-            var img = OpenLayers.Util.getImagesLocation() + "close.gif";
@@ -163 +146 @@
-                                                                img);
-            closeImg.style.right = this.padding + "px";
-            closeImg.style.top = this.padding + "px";
-
+
+
-
-
+
+
+
+
+
+
+
+
-                this.hide();
-                OpenLayers.Event.stop(e);
-            }
-            OpenLayers.Event.observe(closeImg, "click", 
-OpenLayers.Function.bindAsEventListener(closePopup, this));
+                 closePopup.bindAsEventListener(this));*/
-
-        }
+    },
+    
+    /**
+     * inserts corners into main container and merges elements. Although this has been constructed in a generic manner, it still 
+     * requires more work before it can fully support unlimited shapes. The google drop shadow is achieved by inserting a shadow popup, this could be extended to offer
+     * the same functionallity but it would need some pondering to ensure the UI remains responsive.
+     */
+    insertCorners : function ()
+    {   
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    },
+    
+    /**
+     * renders the contentHTML offscreen to determine actual dimensions for popup sizing.
+     * as we need layout to determine dimensions the content is rendered -99999px to the left and absolute
+     * to ensure the scrollbars do not flicker
+     */
+    getRenderedDimensions : function()
+    {
+        // ensure content is set to contentDIV
+        this.setContentHTML();
+        
+        // create temp container div with restricted size
+        var container = document.createElement("div");
+            container.className = 'olPopup';
+            container.style.overflow="";
+            container.style.position = "absolute";
+            container.style.left="-9999999999px";
+            container.style.width="20px";
+            container.style.height="20px";
+            container.style.color="white";
+            
+        // create temp content div and assign content
+        var content = document.createElement("div");
+            content.innerHTML = this.contentHTML;
+            content.className = 'olPopupContent';
+            content.style.overflow = "auto";
+        
+        // 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);// + 49 + 30;
+        
+        // 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);// + 96 + 45;
+        
+        // update object size values
+        this.size = new OpenLayers.Size(w, h);
+            
+        // remove elements
+        document.body.removeChild(container);
+        
+        // cleanup
+        container = null;
+        content = null;
+    },
-
-    /** 
-
-
-
+
-    destroy: function() {
+    
-        if (this.map != null) {
-            this.map.removePopup(this);
-            this.map = null;
-        }
-        this.events.destroy();
-        this.events = null;
-        this.div = null;
+        this.map = null;
+        
+        
-    },
-
-    /** 
-
-
-
-
-
+
-    * 
-Returns:
-{DOMElement} Reference to a div that contains the drawn popup
+@returns Reference to a div that contains the drawn popup
+@type DOMElement
-    */
-
-
-
+
+
+
+
+
+
-                px = this.map.getLayerPxFromLonLat(this.lonlat);
-            }
-        }
-        
-        this.setSize();
-        this.setBackgroundColor();
-        this.setOpacity();
-        this.setBorder();
-        this.setContentHTML();
-        this.moveTo(px);
-
@@ -219 +339 @@
-    },
-
-    /** 
-     * Method: updatePosition
-     * if the popup has a lonlat and its map members set, 
-
+ 
-     */
- {
-    if ((this.lonlat) && (this.map)) 
-        var px = this.map.getLayerPxFromLonLat(this.lonlat);
-        if (px) 
-        this.moveTo(px);           
-    }
+
+
+if ((this.lonlat) && (this.map) && (this.anchor)) 
+
+var px = this.map.getLayerPxFromLonLat(this.lonlat);
+this.moveTo(px);       
-        }
-    },
-
-    /**
-
-
-
-
-
-
-
+
+
+
+
+
+
-            this.div.style.left = px.x + "px";
-            this.div.style.top = px.y + "px";
-        }
-    },
-
-    /**
-
-
-
-
+
+
-     */
-
+
+
-        return OpenLayers.Element.visible(this.div);
-    },
-
-    /**
-
-
+
-     */
-
+
+
-        OpenLayers.Element.toggle(this.div);
-    },
-
-    /**
-
-
+
-     */
-
+
+
-        OpenLayers.Element.show(this.div);
-    },
-
-    /**
-
-
+
-     */
-
+
+
+
+
+
+
-        OpenLayers.Element.hide(this.div);
-    },
-
-    /**
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-            this.size = size; 
-        }
-        
-
-
-
+
+
+
+
-        }
-        if (this.contentDiv != null){
-            this.contentDiv.style.width = this.size.w + "px";
-            this.contentDiv.style.height = this.size.h + "px";
-        }
-    },  
-
+
-    /**
-
-
-
-
+
-    */
-    setBackgroundColor:function(color) { 
-        if (color != undefined) {
-            this.backgroundColor = color; 
-        }
-        
-        if (this.div != null) {
-            this.div.style.backgroundColor = this.backgroundColor;
-        }
-    },  
-    
-    /**
-     * Method: 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; 
@@ -336 +432 @@
-            // for IE
-            this.div.style.filter = 'alpha(opacity=' + this.opacity*100 + ')';
-        }
-
+  
-    
-    /**
-
-
-
-
-
+
-     */
-    setBorder:function(border) { 
-        if (border != undefined) {
-            this.border = border;
-        }
-        
-        if (this.div != null) {
-            this.div.style.border = this.border;
-        }
-    },      
-    
-    /**
-     * 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;
@@ -371 +446 @@
-            this.contentDiv.innerHTML = this.contentHTML;
-        }    
-    },
-
-
-
-
-
-
-
-
+
+
-     *   choose to override it if they wish to deal differently
-     *   with mouse events
-     * 
@@ -397 +466 @@
-     */
-     registerEvents:function() {
-        this.events = new OpenLayers.Events(this, this.div, null, true);
-
-        this.events.register("mousedown", this, this.onmousedown);
-        this.events.register("mousemove", this, this.onmousemove);
-        this.events.register("mouseup", this, this.onmouseup);
-this.onclick
+OpenLayers.Util.safeStopPropagation
-        this.events.register("mouseout", this, this.onmouseout);
-this.ondblclick
+OpenLayers.Util.safeStopPropagation
-     },
-
-
-
-
+
+
-     *   it locally, and then do not propagate the mousedown 
-     *   (but do so safely so that user can select text inside)
-     * 
-
-
+
-     */
-    onmousedown: function (evt) {
-        this.mousedown = true;
-Event.stop(evt, true
+Util.safeStopPropagation(evt
-    },
-
-
-
-
+
-     *   do not propagate the mousemove (but do so safely
-     *   so that user can select text inside)
-     * 
-
-
+
-     */
-    onmousemove: function (evt) {
-        if (this.mousedown) {
-Event.stop(evt, true
+Util.safeStopPropagation(evt
-        }
-    },
-
-
-
-
+
-     *   in it, reset the flag, and then (once again) do not 
-     *   propagate the event, but do so safely so that user can 
-     *   select text inside
-     * 
-
-
+
-     */
-    onmouseup: function (evt) {
-        if (this.mousedown) {
-            this.mousedown = false;
-Event.stop(evt, true
+Util.safeStopPropagation(evt
-        }
-    },
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-     *   if they let go and then drag back in, we won't be confused.
-     * 
-
-
+
+
+
-     */
-    onmouseout: function (evt) {
-        this.mousedown = false;
-    },
-    
-    /** 
-     * Method: ondblclick
-     * Ignore double-clicks, but allowing default browser handling
-     * 
-     * Parameters:
-     * evt - {Event} 
-     */
-    ondblclick: function (evt) {
-        OpenLayers.Event.stop(evt, true);
-    },
-
-    CLASS_NAME: "OpenLayers.Popup"
-});
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+