Hide modals with click on outer. Fixes #120

js/iD/OAuth.js

@@ -21,6 +21,7 @@ iD.OAuth = function() {
         return o;
     }
 
+    // token getter/setter, namespaced to the current `apibase` value.
     function token(k, x) {
         if (arguments.length == 2) {
             localStorage[keyclean(apibase) + k] = x;
@@ -58,7 +59,11 @@ iD.OAuth = function() {
         if (oauth.authenticated()) return callback();
 
         var shaded = d3.select(document.body)
-            .append('div').attr('class', 'shaded');
+            .append('div')
+            .attr('class', 'shaded')
+            .on('click', function() {
+                if (d3.event.target == this) shaded.remove();
+            });
         var modal = shaded.append('div').attr('class', 'modal');
         var ifr = modal.append('iframe')
             .attr({ width: 640, height: 550, frameborder: 'no' });

js/iD/id.js

@@ -68,22 +68,23 @@ var iD = function(container) {
         .attr('class', 'save')
         .html("Save<small id='as-username'></small>")
         .on('click', function() {
+            function save() {
+                connection.putChangeset(map.history.changes(), e.comment, function() {
+                    shaded.remove();
+                });
+            }
             connection.authenticate(function() {
-                var commitpane = iD.Commit();
                 var shaded = d3.select(document.body)
-                    .append('div').attr('class', 'shaded');
+                    .append('div').attr('class', 'shaded')
+                    .on('click', function() {
+                        if (d3.event.target == this) shaded.remove();
+                    });
                 var modal = shaded.append('div')
                     .attr('class', 'modal commit-pane')
                     .datum(map.history.changes());
-                modal.call(commitpane);
-                commitpane.on('cancel', function() {
-                    shaded.remove();
-                });
-                commitpane.on('save', function(e) {
-                    connection.putChangeset(map.history.changes(), e.comment, function() {
-                        shaded.remove();
-                    });
-                });
+                modal.call(iD.commit()
+                    .on('cancel', shaded.remove)
+                    .on('save', save));
             });
         });
 

js/iD/ui/commit.js

@@ -1,10 +1,10 @@
-iD.Commit = function() {
+iD.commit = function() {
     var event = d3.dispatch('cancel', 'save');
 
     function commit(selection) {
-        var changes = selection.datum();
-        var header = selection.append('div').attr('class', 'header');
-        var body = selection.append('div').attr('class', 'body');
+        var changes = selection.datum(),
+            header = selection.append('div').attr('class', 'header'),
+            body = selection.append('div').attr('class', 'body');
 
         header.append('h2').text('Save Changes to OpenStreetMap');