Merge pull request #49 from shawnbot/d3-aight

now with d3.ie8.js, better CSSOM support, and a working opacity shim fix!
shawnbot · Jan 30, 2015 · 63d6192 · 63d6192
2 parents e15abe7 + 12c475d
commit 63d6192
Show file tree

Hide file tree

Showing 16 changed files with 19,230 additions and 89 deletions.
diff --git a/Makefile b/Makefile
@@ -14,14 +14,28 @@ JS_FILES = \
 
 JS_COMPILER ?= uglifyjs
 
-all: aight.js aight.min.js
-# TODO aight.d3.min.js
+all: \
+	aight.js \
+	aight.min.js \
+	d3.ie8.js \
+	d3.ie8.min.js
 
 aight.js: $(JS_FILES)
 	cat $(JS_FILES) > $@
 
+d3.ie8.js: d3/d3.js
+	cat $^ | ./bin/aight >> $@
+	cat src/d3.ie8.js >> $@
+
 %.min.js: %.js
 	$(JS_COMPILER) $< > $@
 
+d3/d3.js:
+	curl http://d3js.org/d3.v3.js > $@
+
 clean:
 	rm -f aight.js aight.min.js
+	rm -f d3.ie8.js d3.ie8.min.js
+
+distclean: clean
+	rm -f d3/d3.js
diff --git a/README.md b/README.md
@@ -35,6 +35,8 @@ and other libraries that rely on them. It includes:
   need to bring your own
   [html5shiv-printshiv.js](https://github.com/aFarkas/html5shiv/#html5shiv-printshivjs).
 
+* An [IE8-friendly build](#d3-ie8) of [D3](http://d3js.org).
+
 ## Installation
 You have some options:
 
@@ -87,7 +89,7 @@ comment](http://www.quirksmode.org/css/condcom.html) inside the `<head>`:
 
 ```html
 <!--[if lte IE 9]>
-<script type="text/javascript" src="aight.min.js"></script>
+<script src="aight.min.js"></script>
 <![endif]-->
 ```
 
@@ -110,6 +112,26 @@ Bringing it all together, you end up with:
 
 For your convenience, this snippet is included with aight in `template.html`.
 
+## D3 for IE8 <a name="d3-ie8"></a>
+IE8 barfs on [some parts](https://github.com/mbostock/d3/pull/2209) of
+[D3](http://d3js.org)'s JavaScript. The included `d3.ie8.js` and minified
+`d3.ie8.min.js` are IE8-friendly builds of [d3.v3.js](http://d3js.org/d3.v3.js)
+with shams for some CSS properties, namely `opacity`. You'll need to tweak your
+HTML to use these, e.g.:
+
+```html
+<!--[if lte IE 9]><script src="aight.js"></script><![endif]-->
+<script src="http://d3js.org/d3.v3.min.js"></script>
+<!--[if IE 8]><script src="d3.ie8.js"></script><![endif]-->
+```
+
+Since conditional comments are inaccessible to other browsers, we
+have to download the "modern" d3.js (which will throw errors in IE8)
+*and* the shimmed one (which won't). It's an imperfect solution,
+obviously. You *may* serve `d3.ie8.js` to modern browsers, but there
+will probably be performance implications depending on how you use
+D3.
+
 ## What about SVG? <a name="svg"></a>
 Shimming SVG support is tricky business. If you need to support IE8, my
 suggestion is either to [degrade gracefully](https://www.google.com/search?q=graceful%20degradation)

diff --git a/aight.d3.js b/aight.d3.js
diff --git a/aight.js b/aight.js
@@ -5,7 +5,7 @@
  */
 ;(function(aight) {
 
-  aight.version = "2.0.5";
+  aight.version = "2.1.0";
 
   var nav = null,
       version = 0,
@@ -1000,16 +1000,24 @@ if (aight.browser.ie < 9) {
 /* CSS Object Model patches */
 (function(CSSSDProto) {
 
+  function getAttribute(property) {
+    return property.replace(/-[a-z]/g, function(bit) {
+      return bit[1].toUpperCase();
+    });
+  }
+
   // patch CSSStyleDeclaration.prototype using IE8's methods
   if (typeof CSSSDProto.setAttribute !== "undefined") {
     CSSSDProto.setProperty = function(property, value) {
-      return this.setAttribute(String(property), value /*, important */ );
+      return this.setAttribute(getAttribute(property), String(value) /*, important */ );
     };
     CSSSDProto.getPropertyValue = function(property) {
-      return this.getAttribute(property);
+      return this.getAttribute(getAttribute(property)) || null;
     };
     CSSSDProto.removeProperty = function(property) {
-      return this.removeAttribute(property);
+      var value = this.getPropertyValue(property);
+      this.removeAttribute(getAttribute(property));
+      return value;
     };
   }
 

diff --git a/aight.min.js b/aight.min.js
diff --git a/bin/aight b/bin/aight
@@ -24,11 +24,15 @@ var transforms = {
           right = node.right.source(),
           wrapped = !!node.body.source().match(/^\s*\{/);
       node.body.update([
-        "if (", right, ".hasOwnProperty(", left, ")) ",
+        "if (__hasOwnProperty(", left, ")) ",
         wrapped ? "" : "{ ",
         node.body.source(),
         wrapped ? "" : " }",
       ].join(""));
+      node.update([
+        "\nvar __hasOwnProperty = Object.prototype.hasOwnProperty.bind(", right, ");\n",
+        node.source()
+      ].join(""));
     }
   },
   transform = function(node) {

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "aight",
   "main": "./aight.js",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "homepage": "https://github.com/shawnbot/aight",
   "authors": [
     "Shawn Allen <[email protected]>"