Support for IE8 standards mode. Thanks ahayes, crschmidt, pspencer and madair, who all provided patches and valuable research to make this happen. r=crschmidt,ngerber999,Quelbs,ksgeograf (pullup #1910)

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

lib/OpenLayers/Renderer/VML.js

@@ -53,8 +53,12 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
         if (!document.namespaces.olv) {
             document.namespaces.add("olv", this.xmlns);
             var style = document.createStyleSheet();
-            style.addRule('olv\\:*', "behavior: url(#default#VML); " +
+            var shapes = ['shape','rect', 'oval', 'fill', 'stroke', 'imagedata', 'group','textbox']; 
-                                   "position: absolute; display: inline-block;");
+            for (var i = 0, len = shapes.length; i < len; i++) {
+
+                style.addRule('olv\\:' + shapes[i], "behavior: url(#default#VML); " +
+                              "position: absolute; display: inline-block;");
+            }                  
         }
         
         OpenLayers.Renderer.Elements.prototype.initialize.apply(this, 
@@ -111,14 +115,14 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
 
         
         var org = left + " " + top;
-        this.root.setAttribute("coordorigin", org);
+        this.root.coordorigin = org;
         var roots = [this.root, this.vectorRoot, this.textRoot];
         var root;
         for(var i=0, len=roots.length; i<len; ++i) {
             root = roots[i];
 
             var size = this.size.w + " " + this.size.h;
-            root.setAttribute("coordsize", size);
+            root.coordsize = size;
             
         }
         // flip the VML display Y axis upside down so it 
@@ -240,11 +244,10 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
                 options.isStroked = false;
             } else if (this.isComplexSymbol(style.graphicName)) {
                 var cache = this.importSymbol(style.graphicName);
-                node.setAttribute("path", cache.path);
+                node.path = cache.path;
-                node.setAttribute("coordorigin", cache.left + "," +
+                node.coordorigin = cache.left + "," + cache.bottom;
-                                                                cache.bottom);
                 var size = cache.size;
-                node.setAttribute("coordsize", size + "," + size);        
+                node.coordsize = size + "," + size;        
                 this.drawCircle(node, geometry, style.pointRadius);
                 node.style.flip = "y";
             } else {
@@ -254,9 +257,9 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
 
         // fill 
         if (options.isFilled) { 
-            node.setAttribute("fillcolor", style.fillColor); 
+            node.fillcolor = style.fillColor; 
         } else { 
-            node.setAttribute("filled", "false"); 
+            node.filled = "false"; 
         }
         var fills = node.getElementsByTagName("fill");
         var fill = (fills.length == 0) ? null : fills[0];
@@ -268,18 +271,18 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
             if (!fill) {
                 fill = this.createNode('olv:fill', node.id + "_fill");
             }
-            fill.setAttribute("opacity", style.fillOpacity);
+            fill.opacity = style.fillOpacity;
 
             if (node._geometryClass == "OpenLayers.Geometry.Point" &&
                     style.externalGraphic) {
 
                 // override fillOpacity
                 if (style.graphicOpacity) {
-                    fill.setAttribute("opacity", style.graphicOpacity);
+                    fill.opacity = style.graphicOpacity;
                 }
                 
-                fill.setAttribute("src", style.externalGraphic);
+                fill.src = style.externalGraphic;
-                fill.setAttribute("type", "frame");
+                fill.type = "frame";
                 
                 if (!(style.graphicWidth && style.graphicHeight)) {
                   fill.aspect = "atmost";
@@ -298,7 +301,7 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
                 // the graphic as imagedata element. We cannot just remove
                 // the fill, because this is part of the hack described
                 // in graphicRotate
-                fill.setAttribute("opacity", 0);
+                fill.opacity = 0;
             } else {
                 node.style.rotation = style.rotation;
             }
@@ -306,10 +309,10 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
 
         // stroke 
         if (options.isStroked) { 
-            node.setAttribute("strokecolor", style.strokeColor); 
+            node.strokecolor = style.strokeColor; 
-            node.setAttribute("strokeweight", style.strokeWidth + "px"); 
+            node.strokeweight = style.strokeWidth + "px"; 
         } else { 
-            node.setAttribute("stroked", "false"); 
+            node.stroked = false; 
         }
         var strokes = node.getElementsByTagName("stroke");
         var stroke = (strokes.length == 0) ? null : strokes[0];
@@ -322,9 +325,9 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
                 stroke = this.createNode('olv:stroke', node.id + "_stroke");
                 node.appendChild(stroke);
             }
-            stroke.setAttribute("opacity", style.strokeOpacity);
+            stroke.opacity = style.strokeOpacity;
-            stroke.setAttribute("endcap", !style.strokeLinecap || style.strokeLinecap == 'butt' ? 'flat' : style.strokeLinecap);
+            stroke.endcap = !style.strokeLinecap || style.strokeLinecap == 'butt' ? 'flat' : style.strokeLinecap;
-            stroke.setAttribute("dashstyle", this.dashStyle(style));
+            stroke.dashstyle = this.dashStyle(style);
         }
         
         if (style.cursor != "inherit" && style.cursor != null) {
@@ -453,12 +456,12 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
         var fillColor = node._style.fillColor;
         var strokeColor = node._style.strokeColor;
         if (fillColor == "none" &&
-                node.getAttribute("fillcolor") != fillColor) {
+                node.fillcolor != fillColor) {
-            node.setAttribute("fillcolor", fillColor);
+            node.fillcolor = fillColor;
         }
         if (strokeColor == "none" &&
-                node.getAttribute("strokecolor") != strokeColor) {
+                node.strokecolor != strokeColor) {
-            node.setAttribute("strokecolor", strokeColor);
+            node.strokecolor = strokeColor;
         }
     },
 
@@ -544,12 +547,12 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
     createNode: function(type, id) {
         var node = document.createElement(type);
         if (id) {
-            node.setAttribute('id', id);
+            node.id = id;
         }
         
         // IE hack to make elements unselectable, to prevent 'blue flash'
         // while dragging vectors; #1410
-        node.setAttribute('unselectable', 'on', 0);
+        node.unselectable = 'on';
         node.onselectstart = function() { return(false); };
         
         return node;