IE9 fixes - to make SVG maps compatible

devtools/test_dashboard/index.html

@@ -21,6 +21,7 @@
 
   <script type="text/javascript" src="../../dist/extras/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
   <script id="source" type="text/javascript" src="../../build/plotly.js"></script>
+  <script type="text/javascript" src="../../test/image/strict-d3.js" charset="utf-8"></script>
   <script type="text/javascript" src="../../build/test_dashboard-bundle.js"></script>
 </body>
 </html>

src/components/drawing/index.js

@@ -112,6 +112,7 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
 };
 
 drawing.dashLine = function(s, dash, lineWidth) {
+    lineWidth = +lineWidth || 0;
     var dlw = Math.max(lineWidth, 3);
 
     if(dash === 'solid') dash = '';

src/components/modebar/modebar.js

@@ -147,7 +147,7 @@ proto.createButton = function(config) {
     }
 
     button.setAttribute('data-toggle', config.toggle || false);
-    if(config.toggle) button.classList.add('active');
+    if(config.toggle) d3.select(button).classed('active', true);
 
     button.appendChild(this.createIcon(config.icon || Icons.question));
     button.setAttribute('data-gravity', config.gravity || 'n');

src/lib/index.js

@@ -556,6 +556,14 @@ lib.isIE = function() {
     return typeof window.navigator.msSaveBlob !== 'undefined';
 };
 
+/**
+ * Duck typing to recognize a d3 selection, mostly for IE9's benefit
+ * because it doesn't handle instanceof like modern browsers
+ */
+lib.isD3Selection = function(obj) {
+    return obj && (typeof obj.classed === 'function');
+};
+
 
 /**
  * Converts a string path to an object.

src/lib/loggers.js

@@ -28,11 +28,7 @@ loggers.log = function() {
             messages.push(arguments[i]);
         }
 
-        if(console.trace) {
-            console.trace.apply(console, messages);
-        } else {
-            console.log.apply(console, messages);
-        }
+        apply(console.trace || console.log, messages);
     }
 };
 
@@ -44,11 +40,7 @@ loggers.warn = function() {
             messages.push(arguments[i]);
         }
 
-        if(console.trace) {
-            console.trace.apply(console, messages);
-        } else {
-            console.log.apply(console, messages);
-        }
+        apply(console.trace || console.log, messages);
     }
 };
 
@@ -60,6 +52,21 @@ loggers.error = function() {
             messages.push(arguments[i]);
         }
 
-        console.error.apply(console, arguments);
+        apply(console.error, messages);
     }
 };
+
+/*
+ * Robust apply, for IE9 where console.log doesn't support
+ * apply like other functions do
+ */
+function apply(f, args) {
+    if(f.apply) {
+        f.apply(f, args);
+    }
+    else {
+        for(var i = 0; i < args.length; i++) {
+            f(args[i]);
+        }
+    }
+}

src/plots/cartesian/graph_interact.js

@@ -792,7 +792,9 @@ fx.loneHover = function(hoverItem, opts) {
 };
 
 fx.loneUnhover = function(containerOrSelection) {
-    var selection = containerOrSelection instanceof d3.selection ?
+    // duck type whether the arg is a d3 selection because ie9 doesn't
+    // handle instanceof like modern browsers do.
+    var selection = Lib.isD3Selection(containerOrSelection) ?
             containerOrSelection :
             d3.select(containerOrSelection);
 

src/traces/choropleth/attributes.js

@@ -37,7 +37,7 @@ module.exports = extendFlat({}, {
     marker: {
         line: {
             color: ScatterGeoMarkerLineAttrs.color,
-            width: ScatterGeoMarkerLineAttrs.width
+            width: extendFlat({}, ScatterGeoMarkerLineAttrs.width, {dflt: 1})
         }
     },
     hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {

src/traces/choropleth/plot.js

@@ -165,7 +165,7 @@ plotChoropleth.style = function(geo) {
                     d3.select(this)
                         .attr('fill', function(pt) { return sclFunc(pt.z); })
                         .call(Color.stroke, pt.mlc || markerLine.color)
-                        .call(Drawing.dashLine, '', pt.mlw || markerLine.width);
+                        .call(Drawing.dashLine, '', pt.mlw || markerLine.width || 0);
                 });
         });
 };

tasks/test_syntax.js

@@ -13,7 +13,7 @@ var bundleTestGlob = path.join(constants.pathToJasmineBundleTests, '**/*.js');
 
 // main
 assertJasmineSuites();
-assertHeaders();
+assertSrcContents();
 assertFileNames();
 assertCircularDeps();
 
@@ -44,8 +44,12 @@ function assertJasmineSuites() {
     });
 }
 
-// check for header in src and lib files
-function assertHeaders() {
+/*
+ * tests about the contents of source (and lib) files:
+ * - check for header comment
+ * - check that we don't have .classList
+ */
+function assertSrcContents() {
     var licenseSrc = constants.licenseSrc;
     var licenseStr = licenseSrc.substring(2, licenseSrc.length - 2);
     var logs = [];
@@ -56,7 +60,15 @@ function assertHeaders() {
 
             // parse through code string while keeping track of comments
             var comments = [];
-            falafel(code, {onComment: comments, locations: true}, function() {});
+            falafel(code, {onComment: comments, locations: true}, function(node) {
+                // look for .classList
+                if(node.type === 'MemberExpression') {
+                    var parts = node.source().split('.');
+                    if(parts[parts.length - 1] === 'classList') {
+                        logs.push(file + ' : contains .classList (IE failure)');
+                    }
+                }
+            });
 
             var header = comments[0];
 
@@ -70,7 +82,7 @@ function assertHeaders() {
             }
         });
 
-        log('correct headers in lib/ and src/', logs);
+        log('correct headers and contents in lib/ and src/', logs);
     });
 }
 

test/image/index.html

@@ -5,6 +5,7 @@
 <script type="text/javascript" src="../plotly.js/dist/extras/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
 <script type="text/javascript" src="../plotly.js/build/plotly.js" charset="utf-8"></script>
 <script type="text/javascript" src="../plotly.js/dist/plotly-geo-assets.js" charset="utf-8"></script>
+<script type="text/javascript" src="../plotly.js/test/image/strict-d3.js" charset="utf-8"></script>
 <script type="text/javascript" src="./main.js"></script>
 </body>
 </html>

test/image/strict-d3.js

@@ -0,0 +1,74 @@
+/*
+ * strict-d3: wrap selection.style to prohibit specific incorrect style values
+ * that are known to cause problems in IE (at least IE9)
+ */
+
+/* global Plotly:false */
+(function() {
+    'use strict';
+
+    var selProto = Plotly.d3.selection.prototype;
+
+    var originalSelStyle = selProto.style;
+
+    selProto.style = function() {
+        var sel = this,
+            obj = arguments[0];
+
+        if(sel.size()) {
+            if(typeof obj === 'string') {
+                checkVal(obj, arguments[1]);
+            }
+            else {
+                Object.keys(obj).forEach(function(key) { checkVal(key, obj[key]); });
+            }
+        }
+
+        return originalSelStyle.apply(sel, arguments);
+    };
+
+    function checkVal(key, val) {
+        if(typeof val === 'string') {
+            // in case of multipart styles (stroke-dasharray, margins, etc)
+            // test each part separately
+            val.split(/[, ]/g).forEach(function(valPart) {
+                var pxSplit = valPart.length - 2;
+                if(valPart.substr(pxSplit) === 'px' && !isNumeric(valPart.substr(0, pxSplit))) {
+                    throw new Error('d3 selection.style called with value: ' + val);
+                }
+            });
+        }
+
+    }
+
+    // below ripped from fast-isnumeric so I don't need to build this file
+
+    function allBlankCharCodes(str) {
+        var l = str.length,
+            a;
+        for(var i = 0; i < l; i++) {
+            a = str.charCodeAt(i);
+            if((a < 9 || a > 13) && (a !== 32) && (a !== 133) && (a !== 160) &&
+                (a !== 5760) && (a !== 6158) && (a < 8192 || a > 8205) &&
+                (a !== 8232) && (a !== 8233) && (a !== 8239) && (a !== 8287) &&
+                (a !== 8288) && (a !== 12288) && (a !== 65279)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    function isNumeric(n) {
+        var type = typeof n;
+        if(type === 'string') {
+            var original = n;
+            n = +n;
+            // whitespace strings cast to zero - filter them out
+            if(n === 0 && allBlankCharCodes(original)) return false;
+        }
+        else if(type !== 'number') return false;
+
+        return n - n < 1;
+    }
+
+})();