add member variables, constants, getters and setters, and tests for id, px, size, content html, background color, opacity, border

git-svn-id: http://svn.openlayers.org/trunk/openlayers@232 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Popup.js

@@ -2,11 +2,22 @@
 * @class
 */
 OpenLayers.Popup = Class.create();
+
+OpenLayers.Popup.count = 0;
+OpenLayers.Popup.PX = new OpenLayers.Pixel(0, 0);
+OpenLayers.Popup.SIZE = new OpenLayers.Size(200, 200);
+OpenLayers.Popup.COLOR = "white";
+OpenLayers.Popup.OPACITY = 0.5;
+OpenLayers.Popup.BORDER = "0px";
+
 OpenLayers.Popup.prototype = {
 
     /** @type String */
     id: "",
 
+    /** reference to the parent DIV to which this popup is @type DOMElement */
+    parent: null,
+
     /** @type DOMElement */
     div: null,
 
@@ -16,23 +27,48 @@ OpenLayers.Popup.prototype = {
     /** @type OpenLayers.Size*/
     size: null,    
 
+    /** @type String */
+    contentHTML: "",
+    
+    /** @type String */
+    backgroundColor: "",
+    
+    /** @type float */
+    opacity: "",
+
+    /** @type String */
+    border: "",
+
+
     /** 
     * @constructor
     * 
     * @param {String} id
     * @param {OpenLayers.Pixel} px
     * @param {OpenLayers.Size} size
+    * @param {String} contentHTML
     */
-    initialize:function(id, px, size) {
+    initialize:function(id, px, size, contentHTML) {
-        this.id = id;
+        OpenLayers.Popup.count += 1;
-        this.px = px;
+
-        this.size = size;
+        this.id = (id != null) ? id : "Popup" + OpenLayers.Popup.count;
+        this.px = (px != null) ? px : OpenLayers.Popup.PX;
+        this.size = (size != null) ? size : OpenLayers.Popup.SIZE;
+        if (contentHTML != null) { 
+             this.contentHTML = contentHTML;
+        }
+        this.backgroundColor = OpenLayers.Popup.COLOR;
+        this.opacity = OpenLayers.Popup.OPACITY;
+        this.border = OpenLayers.Popup.BORDER;
     },
 
     /** 
     */
     destroy: function() {
-    
+        if ((this.div) && (this.div.parentNode)) {
+            this.div.parentNode.removeChild(this.div);
+        }
+        this.div = null;
     },
 
     /** 
@@ -40,16 +76,104 @@ OpenLayers.Popup.prototype = {
     draw: function() {
         if (this.div == null) {
             this.div = OpenLayers.Util.createDiv(this.id + "_div",
-                                                 this.px,
+                                                  null,
-                                                 this.size
+                                                  null,
-                                                 );
+                                                  "hidden");
-                                                 
-            this.div.style.backgroundColor = "red";
         }
+        this.setPx();
+        this.setSize();
+        this.setBackgroundColor();
+        this.setOpacity();
+        this.setBorder();
+        this.setContentHTML();
+
         return this.div;
-    },    
+    },
+
+    /**
+    * @param {OpenLayers.Size} size
+    */
+    setSize:function(size) { 
+        if (size != undefined) {
+            this.size = size; 
+        }
+        
+        if (this.div != null) {
+    		this.div.style.width = this.size.w;
+    		this.div.style.height = this.size.h;
+    	}    	
+    },  
+
+    /**
+    * @param {OpenLayers.Pixel} px
+    */
+    setPx:function(px) { 
+        if (px != undefined) {
+            this.px = px; 
+        }
+        
+        if (this.div != null) {
+    		this.div.style.left = this.px.x;
+    		this.div.style.top = this.px.y;
+    	}    	
+    },  
+
+
+    /**
+    * @param {String} color
+    */
+    setBackgroundColor:function(color) { 
+        if (color != undefined) {
+            this.backgroundColor = color; 
+        }
+        
+        if (this.div != null) {
+    		this.div.style.backgroundColor = this.backgroundColor;
+    	}    	
+    },  
     
+    /**
+    * @param {float} opacity
+    */
+    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 + ')';
+    	}    	
+    },  
     
+    /**
+    * @param {int} border
+    */
+    setBorder:function(border) { 
+        if (border != undefined) {
+            this.border = border;
+        }
+        
+        if (this.div != null) {
+            this.div.style.border = this.border;
+    	}
+    },      
     
+    /**
+    * @param {String} contentHTML
+    */
+    setContentHTML:function(contentHTML) {
+        if (contentHTML != null) {
+            this.contentHTML = contentHTML;
+        }
+        
+        if (this.div != null) {
+            this.div.innerHTML = this.contentHTML;
+        }    
+    },
+
     CLASS_NAME: "OpenLayers.Popup"
 };

popups.html

@@ -21,10 +21,7 @@
                 
             map.addLayer(layer);
 
-            popup = new OpenLayers.Popup("chicken", 
+            popup = new OpenLayers.Popup("chicken");
-                                         new OpenLayers.Pixel(20,240),
-                                         new OpenLayers.Size(500,100)
-                                         );
         
             map.addPopup(popup);
  
@@ -32,15 +29,33 @@
             map.addControl(new OpenLayers.Control.LayerSwitcher());
         }
         
-        function away() {
+        function changer() {
+            popup.setBackgroundColor("red");
+            popup.setSize(new OpenLayers.Size(20,200));
+            popup.setPx(new OpenLayers.Pixel(120,120));
+            popup.setOpacity(.9);
+            popup.setBorder("2px solid");    
+            popup.setContentHTML("High Chickens");            
+        }
+        
+        function destroy() {
+            alert(navigator.appName);
+            popup.destroy();
+        }
+
+        function remove() {
             map.removePopup(popup);
         }
+
+
         // -->
     </script>
   </head>
   <body onload="init()">
     <h1>OpenLayers Example</h1>
     <div id="map"></div>
-    <div style="background-color:blue" onclick="away()"> hello</div>
+    <div style="background-color:blue" onclick="changer()"> changer</div>
+    <div style="background-color:red" onclick="destroy()"> destroy</div>
+    <div style="background-color:green" onclick="remove()"> remove</div>
   </body>
 </html>

tests/test_Popup.html

@@ -4,50 +4,94 @@
   <script type="text/javascript"><!--
     var popup; 
     
-    function test_01_Popup_constructor (t) {
+    function test_01_Popup_default_constructor(t) {
-        t.plan( 6 );
+        t.plan( 11 );
+
+        popup = new OpenLayers.Popup();
+
+        t.ok( popup instanceof OpenLayers.Popup, "new OpenLayers.Popup returns Popup object" );
+        t.ok(popup.id.startsWith("Popup"), "good default popup.id");
+        t.eq(popup.px.x, OpenLayers.Popup.PX.x, "good default popup.px.x");
+        t.eq(popup.px.y, OpenLayers.Popup.PX.y, "good default popup.px.y");
+        t.eq(popup.size.w, OpenLayers.Popup.SIZE.w, "good default popup.size.w");
+        t.eq(popup.size.h, OpenLayers.Popup.SIZE.h, "good default popup.size.h");
+        t.eq(popup.contentHTML, "", "good default popup.contentHTML");
+        t.eq(popup.backgroundColor, OpenLayers.Popup.COLOR, "good default popup.backgroundColor");
+        t.eq(popup.opacity, OpenLayers.Popup.OPACITY, "good default popup.opacity");
+        t.eq(popup.border, OpenLayers.Popup.BORDER, "good default popup.border");
+
+        
+        var oldIndex = parseInt(popup.id.slice("Popup".length));
+
+        popup = new OpenLayers.Popup();
+        var newIndex = parseInt(popup.id.slice("Popup".length));
+        
+        t.eq(newIndex, oldIndex + 1, "default id generator incrementing correctly");
+    }
+    
+    function test_02_Popup_constructor (t) {
+        t.plan( 7 );
 
         var id = "chicken";
         var x = 50;
         var y = 100;
         var w = 500;
         var h = 400;
-        
+        var content = "foo";
 
         popup = new OpenLayers.Popup(id,
                                      new OpenLayers.Pixel(x, y),
-                                     new OpenLayers.Size(w, h));
+                                     new OpenLayers.Size(w, h),
+                                     content);
 
         t.ok( popup instanceof OpenLayers.Popup, "new OpenLayers.Popup returns Popup object" );
         t.eq(popup.id, id, "popup.id set correctly");
         t.eq(popup.px.x, x, "left position of popup.px set correctly");
         t.eq(popup.px.y, y, "top position of popup.px set correctly");
-        t.eq(popup.size.w, w, "width position of popup.size set correctly");
+        t.eq(popup.size.w, w, "width of popup.size set correctly");
-        t.eq(popup.size.h, h, "heightposition of popup.size set correctly");
+        t.eq(popup.size.h, h, "height of popup.size set correctly");
+        t.eq(popup.contentHTML, content, "contentHTML porpoerty of set correctly");
     }
+
+    function test_03_Popup_draw(t) {
     
-    function test_02_Popup_draw(t) {
+        t.plan( 9 );
-    
-        t.plan( 5 );
         
         var id = "chicken";
         var x = 50;
         var y = 100;
         var w = 500;
         var h = 400;
-        
+        var content = "charlie";
+        var color = "red";
+        var opacity = 0.5;
+        var border = "1px solid";
+
 
         popup = new OpenLayers.Popup(id,
                                      new OpenLayers.Pixel(x, y),
-                                     new OpenLayers.Size(w, h));
+                                     new OpenLayers.Size(w, h),
+                                     content);
         popup.draw();
+        popup.setBackgroundColor(color);
+        popup.setOpacity(opacity);
+        popup.setBorder(border);
                                      
         t.eq(popup.div.id, id + "_div", "popup.div.id set correctly");
         t.eq(popup.div.style.left, x + "px", "left position of popup.div set correctly");
         t.eq(popup.div.style.top, y + "px", "top position of popup.div set correctly");
         t.eq(popup.div.style.width, w + "px", "width position of popup.div set correctly");
         t.eq(popup.div.style.height, h + "px", "heightposition of popup.div set correctly");
-    
+        t.eq(popup.div.innerHTML, content, "good default popup.contentHTML");
+        t.eq(popup.div.style.backgroundColor, color, "good default popup.backgroundColor");
+
+        if (navigator.appName.indexOf("Microsoft") == -1) {
+            t.eq(parseFloat(popup.div.style.opacity), opacity, "good default popup.opacity");
+        } else {
+            t.eq(popup.div.style.filter, "alpha(opacity=" + opacity*100 + ")", "good default popup.opacity");
+        }
+        t.ok(popup.div.style.border.indexOf(border) != -1, "good default popup.border");
+
     }