From fddb6543195b2d5a768170afb5da2b2fa28a8bf7 Mon Sep 17 00:00:00 2001
From: Chris Viau <christopheviau@gmail.com>
Date: Fri, 4 Mar 2016 10:31:07 -0500
Subject: [PATCH] clickout event

---
 README.md     | 12 +++++++++++-
 d3-jetpack.js | 26 +++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 3f566d5..248e406 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ Here's what's in the package:
 
 #### selection.append / selection.insert
 
-Appending and inserting with classes/ids 
+Appending and inserting with classes/ids
 
 ```js
 selection.append("div.my-class");
@@ -86,3 +86,13 @@ var firstY = polygons.map(ƒ('points', 0, 'y'));
 ```
 
 If you don't know how to type ƒ (it's [alt] + f on Macs), you can use ``d3.f()``, too. Also, [in @1wheel's blog](http://roadtolarissa.com/blog/2014/06/23/even-fewer-lamdas-with-d3/) you can read more about the rationale behind ƒ.
+
+#### selection.on 'clickout' event
+
+'clickout' triggers when you click outside of a hierarchy of nodes. It can be used for example to unselect a widget.
+
+```js
+d3.select('.container')
+    .datum('dummy')
+    .on('clickout', function(d){ console.log(this, d); });
+```
diff --git a/d3-jetpack.js b/d3-jetpack.js
index 6fb631b..40238ed 100644
--- a/d3-jetpack.js
+++ b/d3-jetpack.js
@@ -134,6 +134,26 @@
         // store d3.f as convenient unicode character function (alt-f on macs)
         if (!window.hasOwnProperty('ƒ')) window.ƒ = d3.f;
         
+        // clickout function manager
+        function clickout(){
+            var callbacks = [];
+            document.querySelector('html').addEventListener('click', function(event){
+                for(var i=0; i<callbacks.length; i++){
+                    var element = callbacks[i].container;
+                    if(!element.contains(event.target)){
+                        callbacks[i].callback.call(element, element.__data__);
+                    }
+                }
+            });
+
+            return {
+                sub: function(_container, callback){
+                    var container = typeof _container === 'string' ? document.querySelector(_container) : _container;
+                    callbacks.push({container: container, callback: callback});
+                    return this;
+                }
+            };
+        };
         // this tweak allows setting a listener for multiple events, jquery style
         var d3_selection_on = d3.selection.prototype.on;
         d3.selection.prototype.on = function(type, listener, capture) {
@@ -142,7 +162,11 @@
                 for (var i = 0; i<type.length; i++) {
                     d3_selection_on.apply(this, [type[i], listener, capture]);
                 }
-            } else {
+            }
+            if(type === 'clickout'){
+                clickout().sub(this.node(), listener);
+            }
+            else {
                 d3_selection_on.apply(this, [type, listener, capture]);
             }
             return this;