Use d3 for modal, remove trailing slash, make modal prettier.

css/app.css

@@ -200,13 +200,13 @@ button small {
 }
 
 .modal {
-    width:600px;
-    height:400px;
+    width:640px;
+    height:550px;
     padding:10px;
     position:absolute;
-    background:#fff;
+    background:#f0f0f0;
     top:50px;
     left:50%;
-    margin-left:-305px;
+    margin-left:-330px;
     box-shadow:0 0 5px #000;
 }

js/iD/OAuth.js

@@ -30,6 +30,7 @@ iD.OAuth = function() {
         }
         o = timenonce(o);
         var url = apibase + options.path;
+        console.log(apibase, options.path);
         var oauth_token_secret = localStorage.oauth_token_secret;
         o.oauth_signature = ohauth.signature(oauth_secret, oauth_token_secret,
             ohauth.baseString(options.method, url, o));
@@ -43,12 +44,10 @@ iD.OAuth = function() {
         // TODO: deal with changing the api endpoint
         if (oauth.authenticated()) return callback();
 
-        var d = document.body.appendChild(document.createElement('div')),
-            ifr = d.appendChild(document.createElement('iframe'));
-        d.className = 'modal';
-        ifr.frameborder = 'no';
-        ifr.width = 600;
-        ifr.height = 400;
+        var d = d3.select(document.body)
+            .append('div').attr('class', 'modal'),
+            ifr = d.append('iframe')
+                .attr({ width: 640, height: 550, frameborder: 'no' });
 
         o = timenonce(o);
         var url = baseurl + '/oauth/request_token';
@@ -59,17 +58,17 @@ iD.OAuth = function() {
             var token = ohauth.stringQs(xhr.response);
             localStorage.oauth_request_token_secret = token.oauth_token_secret;
             var at = baseurl + '/oauth/authorize?';
-            ifr.src = at + ohauth.qsString({
+            ifr.attr('src', at + ohauth.qsString({
                 oauth_token: token.oauth_token, oauth_callback: location.href
-            });
+            }));
         });
-        ifr.onload = function() {
-            if (ifr.contentWindow.location.search) {
-                var search = ifr.contentWindow.location.search,
+        ifr.on('load', function() {
+            if (ifr.node().contentWindow.location.search) {
+                var search = ifr.node().contentWindow.location.search,
                     oauth_token = ohauth.stringQs(search.slice(1)),
                     url = baseurl + '/oauth/access_token';
                 o = timenonce(o);
-                d.parentNode.removeChild(d);
+                d.remove();
 
                 o.oauth_token = oauth_token.oauth_token;
                 var request_token_secret = localStorage.oauth_request_token_secret;
@@ -82,7 +81,7 @@ iD.OAuth = function() {
                     callback();
                 });
             }
-        };
+        });
     };
 
     oauth.setAPI = function(x) {

js/iD/actions/modes.js

@@ -70,7 +70,6 @@ iD.modes.AddRoad = {
     },
     enter: function() {
         var surface = this.map.surface;
-        this.map.handleDrag(false);
         var teaser = surface.selectAll('g#temp-g')
             .append('g').attr('id', 'addroad');
 
@@ -112,7 +111,6 @@ iD.modes.AddRoad = {
     exit: function() {
         this.map.surface.on('click.addroad', null);
         this.map.surface.on('mousemove.addroad', null);
-        this.map.handleDrag(true);
         d3.select(document).on('keydown.addroad', null);
         d3.selectAll('#addroad').remove();
     }

js/iD/graph/Graph.js

@@ -85,13 +85,13 @@ iD.Graph.prototype = {
 
     modifications: function() {
         return _.filter(this.entities, function(entity) {
-            return (entity.id > 0) && entity.modified;
+            return ((+entity.id.slice(1) > 0)) && entity.modified;
         });
     },
 
     creations: function() {
         return _.filter(this.entities, function(entity) {
-            return (entity.id < 0) && entity.modified;
+            return ((+entity.id.slice(1)) < 0) && entity.modified;
         });
     }
 };

js/iD/graph/History.js

@@ -54,5 +54,25 @@ iD.History.prototype = {
             if (this.stack[index].annotation) return this.stack[index].annotation;
             index++;
         }
+    },
+
+    modified: function() {
+        return this.stack[this.index].creations();
+    },
+
+    created: function() {
+        return this.stack[this.index].creations();
+    },
+
+    deleted: function() {
+        // return this.stack[this.index].();
+    },
+
+    changes: function() {
+        return {
+            modified: this.modified(),
+            created: this.created(),
+            deleted: this.deleted()
+        };
     }
 };

js/iD/id.js

@@ -5,7 +5,7 @@ var iD = function(container) {
         .attr('id', 'map');
 
     var connection = iD.Connection()
-        .url('http://api06.dev.openstreetmap.org/api/0.6/');
+        .url('http://api06.dev.openstreetmap.org/api/0.6');
 
     var map = iD.Map(m.node(), connection);
 
@@ -58,7 +58,6 @@ var iD = function(container) {
     bar.append('div')
         .attr('class', 'messages');
 
-
     bar.append('button')
         .attr('id', 'save')
         .html("Save<small id='as-username'></small>")
@@ -120,17 +119,13 @@ var iD = function(container) {
         if (d3.event.which === 90 && d3.event.metaKey && d3.event.shiftKey) {
             map.redo();
         }
-        // p
-        if (d3.event.which === 80) controller.enter(iD.modes.AddPlace);
-        // r
-        if (d3.event.which === 82) controller.enter(iD.modes.AddRoad);
-        // a
-        if (d3.event.which === 65) controller.enter(iD.modes.AddArea);
+        if (d3.event.which === 80) controller.enter(iD.modes.AddPlace); // p
+        if (d3.event.which === 82) controller.enter(iD.modes.AddRoad); // r
+        if (d3.event.which === 65) controller.enter(iD.modes.AddArea); // a
     });
 
     var hash = iD.Hash().map(map);
     if (!hash.hadHash) map.setZoom(19).setCenter([-1.49475, 51.87502]);
-
     if (connection.authenticated()) {
         connection.userDetails(function(user_details) {
             connection.user(user_details);

js/iD/renderer/Map.js

@@ -290,17 +290,6 @@ iD.Map = function(elem, connection) {
 
     function hideCasings() { casing_g.selectAll('path').remove(); }
 
-    // https://github.com/mbostock/d3/issues/894
-    function handleDrag(x) {
-        hit_g.selectAll('rect.handle')
-            .on('mousedown.drag', null)
-            .on('touchstart.drag', null);
-        if (x) {
-            hit_g.selectAll('rect.handle')
-                .call(dragbehavior);
-        }
-    }
-
     function setSize(x) {
         dimensions = x;
         var attr = { width: dimensions[0], height: dimensions[1] };
@@ -533,8 +522,6 @@ iD.Map = function(elem, connection) {
         });
     }
 
-    map.handleDrag = handleDrag;
-
     map.download = download;
     map.getExtent = getExtent;