allow for setting opacity of alpha image divs. also give both Icon and Marker setOpacity() functions. added tests and modified examples/markers.html to show how to do it.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@1541 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2006-10-03 17:36:03 +00:00
parent 634588abf0
commit 348b0b388d
7 changed files with 90 additions and 10 deletions
--- a/examples/markers.html
+++ b/examples/markers.html
@@ -21,20 +21,29 @@
                
            map.addLayer(layer);
            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
-            var markers = new OpenLayers.Layer.Markers( "Markers" );
-            map.addLayer(markers);
+
            var newl = new OpenLayers.Layer.Text( "text", { location:"./textfile.txt"} );
            map.addLayer(newl);
+
+            var markers = new OpenLayers.Layer.Markers( "Markers" );
+            map.addLayer(markers);
+
            var size = new OpenLayers.Size(10,17);
            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png',size,offset);
            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
-            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,45),icon.clone()));
+
+            var halfIcon = icon.clone();
+            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,45),halfIcon));
+
            marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone());
+            marker.setOpacity(0.2);
            marker.events.register('mousedown', marker, function(evt) { alert(this.icon.url); Event.stop(evt); });
            markers.addMarker(marker); 
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.zoomToMaxExtent();
+
+            halfIcon.setOpacity(0.5);
        }
        // -->
    </script>
--- a/lib/OpenLayers/Icon.js
+++ b/lib/OpenLayers/Icon.js
@@ -87,6 +87,16 @@ OpenLayers.Icon.prototype = {
        return this.imageDiv;
    }, 

+    
+    /** Change the icon's opacity
+     * @param {float} opacity
+     */
+    setOpacity: function(opacity) {
+        OpenLayers.Util.modifyAlphaImageDiv(this.imageDiv, null, null, null, 
+                                            null, null, null, null, opacity);
+
+    },
+    
    /**
    * @param {OpenLayers.Pixel} px
    */
--- a/lib/OpenLayers/Marker.js
+++ b/lib/OpenLayers/Marker.js
@@ -98,6 +98,15 @@ OpenLayers.Marker.prototype = {
        }        
    },
    
+    /** Change the opacity of the marker by changin the opacity of 
+     *   its icon
+     * 
+     * @param {float} opacity Specified as fraction (0.4, etc)
+     */
+    setOpacity: function(opacity) {
+        this.icon.setOpacity(opacity);
+    },
+
    /** Hide or show the icon
     * 
     * @param {Boolean} display
--- a/lib/OpenLayers/Util.js
+++ b/lib/OpenLayers/Util.js
@@ -169,9 +169,11 @@ OpenLayers.Util.alphaHack = function() {
 * @param {String} position
 * @param {String} border
 * @param {String} sizing 'crop', 'scale', or 'image'. Default is "scale"
+* @param {float} opacity Specified as fraction (0.4, etc)
 */ 
 OpenLayers.Util.modifyAlphaImageDiv = function(div, id, px, sz, imgURL, 
-                                               position, border, sizing) {
+                                               position, border, sizing, 
+                                               opacity) {

    OpenLayers.Util.modifyDOMElement(div, id, px, sz);

@@ -182,15 +184,25 @@ OpenLayers.Util.modifyAlphaImageDiv = function(div, id, px, sz, imgURL,
    }
    OpenLayers.Util.modifyDOMElement(img, div.id + "_innerImage", null, sz, 
                                     "relative", border);
-
+    if (opacity) {
+        div.style.opacity = opacity;
+        div.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
+    }
+    
    if (OpenLayers.Util.alphaHack()) {
+
        div.style.display = "inline-block";
        if (sizing == null) {
            sizing = "scale";
        }
+        
        div.style.filter = "progid:DXImageTransform.Microsoft" +
                           ".AlphaImageLoader(src='" + img.src + "', " +
                           "sizingMethod='" + sizing + "')";
+        if (div.style.opacity) {
+            div.style.filter += " alpha(opacity=" + div.style.opacity * 100 + ")";
+        }
+
        img.style.filter = "progid:DXImageTransform.Microsoft" +
                                ".Alpha(opacity=0)";
    }
--- a/tests/test_Icon.html
+++ b/tests/test_Icon.html
@@ -24,6 +24,18 @@
        t.eq( cloned.url, "b", "cloned.url does change when edited" );
    }

+    function test_02_Marker_setOpacity(t) {
+        t.plan( 2 );
+        
+        icon = new OpenLayers.Icon("a",new OpenLayers.Size(5,6));
+
+        t.ok(!icon.imageDiv.style.opacity, "default icon has no opacity");
+        
+        icon.setOpacity(0.5);
+
+        t.eq(icon.imageDiv.style.opacity + "", "0.5", "icon.setOpacity() works");
+    }
+
  // -->
  </script>
 </head>
--- a/tests/test_Marker.html
+++ b/tests/test_Marker.html
@@ -45,6 +45,32 @@
        
    }

+    function test_02_Marker_setOpacity(t) {
+        t.plan( 2 );
+        
+        var map = new OpenLayers.Map("map");
+
+        var url = "http://octo.metacarta.com/cgi-bin/mapserv";
+        layer = new OpenLayers.Layer.WMS(name, url);
+
+        map.addLayer(layer);
+        
+        mlayer = new OpenLayers.Layer.Markers('Test Layer');
+        map.addLayer(mlayer);
+               
+        map.zoomToExtent(new OpenLayers.Bounds(-50,-50,50,50));
+
+        //onscreen marker
+        var ll = new OpenLayers.LonLat(0,0);
+        var marker = new OpenLayers.Marker(ll);
+        mlayer.addMarker(marker);
+
+        t.ok(!marker.icon.imageDiv.style.opacity, "default marker has no opacity");
+        
+        marker.setOpacity(0.5);
+
+        t.eq(marker.icon.imageDiv.style.opacity + "", "0.5", "marker.setOpacity() works");
+    }

  // -->
  </script>
--- a/tests/test_Util.html
+++ b/tests/test_Util.html
@@ -279,7 +279,7 @@
    }

    function test_09_Util_modifyAlphaImageDiv(t) {
-        t.plan( 17 );
+        t.plan( 18 );

        var imageDiv = OpenLayers.Util.createAlphaImageDiv();

@@ -290,8 +290,9 @@
        var id = "boo";
        var border = "1px solid";
        var sizing = "crop";
+        var opacity = "0.5";

-        OpenLayers.Util.modifyAlphaImageDiv(imageDiv, id, xy, sz, img, position, border, sizing);
+        OpenLayers.Util.modifyAlphaImageDiv(imageDiv, id, xy, sz, img, position, border, sizing, opacity);

        if (!isMozilla)
            t.ok( true, "skipping element test outside of Mozilla");
@@ -305,7 +306,8 @@
        t.eq( imageDiv.style.width, sz.w + "px", "image.style.width set correctly");    
        t.eq( imageDiv.style.height, sz.h + "px", "image.style.height set correctly");    

-        t.eq( imageDiv.style.position, position, "image.style.positionset correctly");    
+        t.eq( imageDiv.style.position, position, "image.style.position set correctly");    
+        t.eq( imageDiv.style.opacity, opacity, "image.style.opacity set correctly");    


        image = imageDiv.firstChild;
@@ -328,7 +330,7 @@

            var filter = "progid:DXImageTransform.Microsoft" +
                         ".AlphaImageLoader(src='" + img + "', " +
-                         "sizingMethod='" + sizing + "')";
+                         "sizingMethod='" + sizing + "') alpha(opacity=" + opacity *100 + ")";
            t.eq(imageDiv.style.filter, filter, "div filter value correctly set");

            filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
@@ -340,7 +342,7 @@
            t.ok(true, "image filter value not set (not in IE)");
        }

-        var imageDiv = OpenLayers.Util.createAlphaImageDiv(id, xy, sz, img, position, border);
+        var imageDiv = OpenLayers.Util.createAlphaImageDiv(id, xy, sz, img, position, border, "scale", opacity);
        if (OpenLayers.Util.alphaHack()) {
            var filter = "progid:DXImageTransform.Microsoft" +
                         ".AlphaImageLoader(src='" + img + "', " +