Changeset 6718

Timestamp:

03/31/08 00:43:36 (9 months ago)

Author:

euzuro

Message:

Adding support for new generation 'framed' popups. This patch includes numerous improvements to the main popups, including the addition of autoSizing, panIntoView, and full support for overflow:auto of the contents div. Thanks go out to the CloudAmber folks, to Pierre in la belle France, to the guys at TOPP and of course, to senior cr5 for his patience and help in the last and final stretch. this is a huge improvement in the popup arena and couldn't have been done without the broad help of everyone out there in the community. Thank you everyone for making this possible. Big step for OpenLayers. (Closes #926)

Files:

• trunk/openlayers/examples/popupMatrix.html (added)
• trunk/openlayers/examples/popupMatrix.jpg (added)
• trunk/openlayers/examples/popups.html (modified) (1 diff)
• trunk/openlayers/examples/sundials.html (added)
• trunk/openlayers/examples/sundials.kml (added)
• trunk/openlayers/examples/thinlong.jpg (added)
• trunk/openlayers/examples/widelong.jpg (added)
• trunk/openlayers/examples/wideshort.jpg (added)
• trunk/openlayers/img/cloud-popup-relative.png (added)
• trunk/openlayers/lib/OpenLayers.js (modified) (1 diff)
• trunk/openlayers/lib/OpenLayers/Control.js (modified) (2 diffs)
• trunk/openlayers/lib/OpenLayers/Map.js (modified) (3 diffs)
• trunk/openlayers/lib/OpenLayers/Popup.js (modified) (13 diffs)
• trunk/openlayers/lib/OpenLayers/Popup/Anchored.js (modified) (2 diffs)
• trunk/openlayers/lib/OpenLayers/Popup/AnchoredBubble.js (modified) (6 diffs)
• trunk/openlayers/lib/OpenLayers/Popup/Framed.js (added)
• trunk/openlayers/lib/OpenLayers/Popup/FramedCloud.js (added)
• trunk/openlayers/lib/OpenLayers/Util.js (modified) (1 diff)
• trunk/openlayers/tests/Layer/test_GeoRSS.html (modified) (4 diffs)
• trunk/openlayers/tests/test_Popup.html (modified) (4 diffs)
• trunk/openlayers/theme/default/framedCloud.css (added)
• trunk/openlayers/theme/default/style.css (modified) (2 diffs)

trunk/openlayers/examples/popups.html

@@ -73 +73 @@
-        
-        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 = feature.createPopup(true);
-a href='http://www.somethingconstructive.net' target='_blank'>click me</a
+div style='background-color:red; width:150;height:100'><a href='http://www.somethingconstructive.net' target='_blank'>click me</a></div
-                popup.setBackgroundColor("yellow");
-                popup.setOpacity(0.7);
-                markers.map.addPopup(popup);
-            } else {
-
-
-
-
+
+
-            OpenLayers.Event.stop(evt);
-        }        

trunk/openlayers/lib/OpenLayers.js

@@ -121 +121 @@
-            "OpenLayers/Popup/Anchored.js",
-            "OpenLayers/Popup/AnchoredBubble.js",
+            "OpenLayers/Popup/Framed.js",
+            "OpenLayers/Popup/FramedCloud.js",
-            "OpenLayers/Feature.js",
-            "OpenLayers/Feature/Vector.js",

trunk/openlayers/lib/OpenLayers/Control.js

@@ -80 +80 @@
-
-    /** 
-     * Property: allowSelection
-     * {Boolean} By deafault, controls do not allow selection, because
-     * it may interfere with map dragging. If this is true, OpenLayers
-     * will not prevent selection of the control.
-     * Default is false.
-     */
-    allowSelection: false,  
-
-    /** 
-     * Property: displayClass 
-     * {string}  This property is used for CSS related to the drawing of the
@@ -250 +241 @@
-            this.div = OpenLayers.Util.createDiv(this.id);
-            this.div.className = this.displayClass;
-            if (!this.allowSelection) {
-                this.div.className += " olControlNoSelect";
-                this.div.setAttribute("unselectable", "on", 0);
-                this.div.onselectstart = function() { return(false); }; 
-            }    
-            if (this.title != "") {
-                this.div.title = this.title;

trunk/openlayers/lib/OpenLayers/Map.js

@@ -355 +355 @@
-    
-    /**
+     * Property: paddingForPopups
+     * {<OpenLayers.Bounds>} Outside margin of the popup. Used to prevent 
+     *     the popup from getting too close to the map border.
+     */
+    paddingForPopups : null,
+    
+    /**
-     * Constructor: OpenLayers.Map
-     * Constructor for a new OpenLayers.Map instance.
@@ -385 +392 @@
-        
-        this.maxExtent = new OpenLayers.Bounds(-180, -90, 180, 90);
+        
+        this.paddingForPopups = new OpenLayers.Bounds(15, 15, 15, 15);
-
-        this.theme = OpenLayers._getScriptLocation() + 
@@ -526 +535 @@
-            this.events.unregister("resize", this, this.updateSize);
-        }    
+        
+        this.paddingForPopups = null;    
-
-        if (this.controls != null) {

trunk/openlayers/lib/OpenLayers/Popup.js

@@ -87 +87 @@
-    /** 
-     * Property: groupDiv 
-
+
+
-     */
-    groupDiv: null,
@@ -98 +99 @@
-
-    /** 
+     * APIProperty: autoSize
+     * {Boolean} Resize the popup to auto-fit the contents.
+     *     Default is false.
+     */
+    autoSize: false,
+
+    /**
+     * APIProperty: minSize
+     * {<OpenLayers.Size>} Minimum size allowed for the popup's contents.
+     */
+    minSize: null,
+
+    /**
+     * APIProperty: maxSize
+     * {<OpenLayers.Size>} Maximum size allowed for the popup's contents.
+     */
+    maxSize: null,
+
+    /** 
-     * Property: padding 
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    /** 
-     * Property: map 
@@ -148 +201 @@
-        this.div.className = 'olPopup';
-        
-
+
+
-                                                    null, "relative", null,
-                                                    "hidden");
@@ -154 +208 @@
-        var id = this.div.id + "_contentDiv";
-        this.contentDiv = OpenLayers.Util.createDiv(id, null, this.size.clone(), 
-
-
+
-        this.contentDiv.className = 'olPopupContent';                                            
-        this.groupDiv.appendChild(this.contentDiv);
@@ -161 +214 @@
-
-        if (closeBox) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-        this.registerEvents();
@@ -188 +225 @@
-     */
-    destroy: function() {
+
+        this.id = null;
+        this.lonlat = null;
+        this.size = null;
+        this.contentHTML = null;
+        
+        this.backgroundColor = null;
+        this.opacity = null;
+        this.border = null;
+        
+        this.events.destroy();
+        this.events = null;
+        
+        if (this.closeDiv) {
+            OpenLayers.Event.stopObservingElement(this.closeDiv); 
+            this.groupDiv.removeChild(this.closeDiv);
+        }
+        this.closeDiv = null;
+        
+        this.div.removeChild(this.groupDiv);
+        this.groupDiv = null;
+
-        if (this.map != null) {
-            this.map.removePopup(this);
-
-
-
-
+
+
-        this.div = null;
+        
+        this.autoSize = null;
+        this.minSize = null;
+        this.maxSize = null;
+        this.padding = null;
+        this.panMapIfOutOfView = null;
-    },
-
@@ -214 +277 @@
-        }
-        
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        this.setBackgroundColor();
-        this.setOpacity();
-        this.setBorder();
-        this.setContentHTML();
-
+
+
+
+
-
-        return this.div;
@@ -266 +356 @@
-     */
-    toggle: function() {
-
+
+
+
+
+
-    },
-
@@ -275 +369 @@
-    show: function() {
-        OpenLayers.Element.show(this.div);
+
+        if (this.panMapIfOutOfView) {
+            this.panIntoView();
+        }    
-    },
-
@@ -290 +388 @@
-     *
-     * Parameters:
-
+
+
-     */
-    setSize:function(size) { 
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        if (this.div != null) {
-            this.div.style.width = this.size.w + "px";
@@ -302 +431 @@
-        }
-        if (this.contentDiv != null){
-this.s
-this.s
+contentS
+contentS
-        }
-    },  
-
-    /**
-
-
-
-
-
-
+ 
+ 
+ 
+ 
+ 
+ 
-    setBackgroundColor:function(color) { 
-        if (color != undefined) {
@@ -374 +503 @@
-        }
-        
+        if (this.autoSize) {
+
+            // determine actual render dimensions of the contents
+            var realSize = 
+                 OpenLayers.Util.getRenderedDimensions(this.contentHTML);
+
+            // is the "real" size of the div is safe to display in our map?
+            var safeSize = this.getSafeContentSize(realSize);
+
+            var newSize = null;
+             
+            if (safeSize.equals(realSize)) {
+                //real size of content is small enough to fit on the map, 
+                // so we use real size.
+                newSize = realSize;
+
+            } else {
+
+                //make a new OL.Size object with the clipped dimensions 
+                // set or null if not clipped.
+                var fixedSize = new OpenLayers.Size();
+                fixedSize.w = (safeSize.w < realSize.w) ? safeSize.w : null;
+                fixedSize.h = (safeSize.h < realSize.h) ? safeSize.h : null;
+            
+                if (fixedSize.w && fixedSize.h) {
+                    //content is too big in both directions, so we will use 
+                    // max popup size (safeSize), knowing well that it will 
+                    // overflow both ways.                
+                    newSize = safeSize;
+                } else {
+                    //content is clipped in only one direction, so we need to 
+                    // run getRenderedDimensions() again with a fixed dimension
+                    var clippedSize = OpenLayers.Util.getRenderedDimensions(
+                        this.contentHTML, fixedSize
+                    );
+                    
+                    //if the clipped size is still the same as the safeSize, 
+                    // that means that our content must be fixed in the 
+                    // offending direction. If overflow is 'auto', this means 
+                    // we are going to have a scrollbar for sure, so we must 
+                    // adjust for that.
+                    //
+                    var currentOverflow = OpenLayers.Element.getStyle(
+                        this.contentDiv, "overflow"
+                    );
+                    if ( (currentOverflow != "hidden") && 
+                         (clippedSize.equals(safeSize)) ) {
+                        var scrollBar = OpenLayers.Util.getScrollbarWidth();
+                        if (fixedSize.w) {
+                            clippedSize.h += scrollBar;
+                        } else {
+                            clippedSize.w += scrollBar;
+                        }
+                    }
+                    
+                    newSize = this.getSafeContentSize(clippedSize);
+                }
+            }                        
+            this.setSize(newSize);     
+        }        
+
-        if (this.contentDiv != null) {
-            this.contentDiv.innerHTML = this.contentHTML;
@@ -380 +570 @@
-    
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    /** 
-     * Method: registerEvents

trunk/openlayers/lib/OpenLayers/Popup/Anchored.js

@@ -54 +54 @@
-    },
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-     * 
-     * Parameters:
-     * px - {<OpenLayers.Pixel>}
-     * 
-     * Returns: 
-     * {DOMElement} Reference to a div that contains the drawn popup.
-     */
-
-
-
-
-
-
-
-
+
+
-        this.relativePosition = this.calculateRelativePosition(px);
-        
-
+
+
+
+
+
+
+
+
+
+
-    },
+
+    /**
+     * APIMethod: setSize
+     * 
+     * Parameters:
+     * size - {<OpenLayers.Size>}
+     */
+    setSize:function(size) { 
+        OpenLayers.Popup.prototype.setSize.apply(this, arguments);
+
+        if ((this.lonlat) && (this.map)) {
+            var px = this.map.getLayerPxFromLonLat(this.lonlat);
+            this.moveTo(px);
+        }
+    },  
-    
-    /** 
@@ -96 +140 @@
-
-    /**
-moveTo
-Since the popup is moving to a new px, it might need also to be moved
-relative to where the marker is.
+updateRelativePosition
+The popup has been moved to a new relative location, so we may want to 
+make some cosmetic adjustments to it. 
-     * 
-
-
+
+
+
+
-     */
-
-
-
-
-
-
-
+
+
-    },
-    
-    /**
-     * Method: setSize
-     * 
-     * Parameters:
-     * size - {<OpenLayers.Size>}
-     */
-    setSize:function(size) { 
-        OpenLayers.Popup.prototype.setSize.apply(this, arguments);
-
-        if ((this.lonlat) && (this.map)) {
-            var px = this.map.getLayerPxFromLonLat(this.lonlat);
-            this.moveTo(px);
-        }
-    },  
-    
-    /** 
-     * Method: calculateNewPx

trunk/openlayers/lib/OpenLayers/Popup/AnchoredBubble.js

@@ -39 +39 @@
-    initialize:function(id, lonlat, size, contentHTML, anchor, closeBox,
-                        closeBoxCallback) {
+        
+        this.padding = new OpenLayers.Bounds(
+            0, OpenLayers.Popup.AnchoredBubble.CORNER_SIZE,
+            0, OpenLayers.Popup.AnchoredBubble.CORNER_SIZE
+        );
-        OpenLayers.Popup.Anchored.prototype.initialize.apply(this, arguments);
-    },
@@ -65 +70 @@
-
-    /**
-moveTo
-may have
+updateRelativePosition
+has
-     *     we will want to re-do the rico corners.
-     * 
-     * Parameters:
-     * px - {<OpenLayers.Pixel>}
-     */
-
-
-
-
+
+
-    },
-
@@ -86 +86 @@
-    setSize:function(size) { 
-        OpenLayers.Popup.Anchored.prototype.setSize.apply(this, arguments);
-        
-        if (this.contentDiv != null) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-    },  
-
@@ -118 +104 @@
-            if (this.contentDiv != null) {
-                this.div.style.background = "transparent";
-content
+group
-                                                   this.backgroundColor);
-            }
@@ -155 +141 @@
-     * 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.
-     */
-firstTime
+
-    
-        var corners = this.getCornersToRound(this.relativePosition);
@@ -167 +150 @@
-                         blend: false};
-
-firstTime
+!this.rounded
-            OpenLayers.Rico.Corner.round(this.div, options);
+            this.rounded = true;
-        } else {
-            OpenLayers.Rico.Corner.reRound(this.groupDiv, options);

trunk/openlayers/lib/OpenLayers/Util.js

@@ -1322 +1322 @@
-    return browserName;
-};
+
+
+
+    
+/**
+ * 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
+ *     
+ * Parameters:
+ * size - {<OpenLayers.Size>} If either the 'w' or 'h' properties is 
+ *     specified, we fix that dimension of the div to be measured. This is 
+ *     useful in the case where we have a limit in one dimension and must 
+ *     therefore meaure the flow in the other dimension.
+ * 
+ * Returns:
+ * {OpenLayers.Size}
+ */
+OpenLayers.Util.getRenderedDimensions = function(contentHTML, size) {
+    
+    var w = h = null;
+    
+    // create temp container div with restricted size
+    var container = document.createElement("div");
+    container.style.overflow= "";
+    container.style.position = "absolute";
+    container.style.left = "-9999px";
+        
+    //fix a dimension, if specified.
+    if (size) {
+        if (size.w) {
+            w = container.style.width = size.w;
+        } else if (size.h) {
+            h = container.style.height = size.h;
+        }
+    }
+    
+    // create temp content div and assign content
+    var content = document.createElement("div");
+    content.innerHTML = contentHTML;
+    
+    // add content to restricted container 
+