diff --git a/css/app.css b/css/app.css
index 72f3b8dc6..3daa32ffa 100644
--- a/css/app.css
+++ b/css/app.css
@@ -278,7 +278,7 @@ div.typeahead a.active {
left:0px; right:0px; top:0px; bottom:0px;
}
-.commit-pane h3 small.count {
+.commit-modal h3 small.count {
font-size:12px;
font-weight: normal;
line-height:40px;
@@ -289,17 +289,17 @@ div.typeahead a.active {
color:#fff;
}
-.commit-pane ul {
+.commit-modal ul {
border-bottom:1px solid #ccc;
background:#fff;
}
-.commit-pane li {
+.commit-modal li {
border-top:1px solid #ccc;
padding:2px 10px;
}
-.commit-pane .changeset-comment {
+.commit-modal .changeset-comment {
width:630px;
/* firefox uses monospace in textareas */
font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
diff --git a/index.html b/index.html
index 09a96b9ed..7698e4fd8 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,7 @@
+
diff --git a/js/id/id.js b/js/id/id.js
index d7211d593..5f191fc3c 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -85,19 +85,15 @@ window.iD = function(container) {
});
}
connection.authenticate(function() {
- shaded = d3.select(document.body)
- .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(history.changes());
- modal.call(iD.commit()
- .on('cancel', function() {
- shaded.remove();
- })
- .on('save', save));
+ var modal = iD.modal();
+ modal.select('.content')
+ .classed('commit-modal', true)
+ .datum(history.changes())
+ .call(iD.commit()
+ .on('cancel', function() {
+ modal.remove();
+ })
+ .on('save', save));
});
});
diff --git a/js/id/oauth.js b/js/id/oauth.js
index cdf2dcb3a..874800a9f 100644
--- a/js/id/oauth.js
+++ b/js/id/oauth.js
@@ -59,15 +59,6 @@ iD.OAuth = function() {
if (oauth.authenticated()) return callback();
oauth.logout();
- var shaded = d3.select(document.body)
- .append('div')
- .attr('class', 'shaded')
- .on('click', function() {
- if (d3.event.target == this) shaded.remove();
- });
- var modal = shaded.append('div').attr('class', 'modal').style('display', 'none');
- var ifr = modal.append('iframe')
- .attr({ width: 640, height: 550, frameborder: 'no' });
o = timenonce(o);
var url = baseurl + '/oauth/request_token';
@@ -75,37 +66,41 @@ iD.OAuth = function() {
ohauth.baseString('POST', url, o));
var l = iD.loading('contacting openstreetmap...');
- ohauth.xhr('POST', url, o, null, {}, function(xhr) {
+ ohauth.xhr('POST', url, o, null, {}, function(err, xhr) {
l.remove();
- modal.style('display', 'block');
var resp = ohauth.stringQs(xhr.response);
token('oauth_request_token_secret', resp.oauth_token_secret);
- var at = baseurl + '/oauth/authorize?';
- ifr.attr('src', at + ohauth.qsString({
- oauth_token: resp.oauth_token, oauth_callback: location.href
- }));
- });
- 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);
- shaded.remove();
+ var modal = iD.modal();
+ modal
+ .select('.content')
+ .append('iframe')
+ .attr({ width: 640, height: 550, frameborder: 'no' })
+ .attr('src', baseurl + '/oauth/authorize?' + ohauth.qsString({
+ oauth_token: resp.oauth_token,
+ oauth_callback: location.href
+ }))
+ .on('load', function() {
+ if (this.contentWindow.location.search) {
+ var search = this.contentWindow.location.search,
+ oauth_token = ohauth.stringQs(search.slice(1)),
+ url = baseurl + '/oauth/access_token';
+ o = timenonce(o);
+ modal.remove();
- o.oauth_token = oauth_token.oauth_token;
- var request_token_secret = token('oauth_request_token_secret');
- o.oauth_signature = ohauth.signature(oauth_secret, request_token_secret,
- ohauth.baseString('POST', url, o));
- var l = iD.loading('contacting openstreetmap...');
- ohauth.xhr('POST', url, o, null, {}, function(xhr) {
- l.remove();
- var access_token = ohauth.stringQs(xhr.response);
- token('oauth_token', access_token.oauth_token);
- token('oauth_token_secret', access_token.oauth_token_secret);
- callback();
+ o.oauth_token = oauth_token.oauth_token;
+ var request_token_secret = token('oauth_request_token_secret');
+ o.oauth_signature = ohauth.signature(oauth_secret, request_token_secret,
+ ohauth.baseString('POST', url, o));
+ var l = iD.loading('contacting openstreetmap...');
+ ohauth.xhr('POST', url, o, null, {}, function(err, xhr) {
+ l.remove();
+ var access_token = ohauth.stringQs(xhr.response);
+ token('oauth_token', access_token.oauth_token);
+ token('oauth_token_secret', access_token.oauth_token_secret);
+ callback();
+ });
+ }
});
- }
});
};
diff --git a/js/id/ui/loading.js b/js/id/ui/loading.js
index 99d2959a2..4a8212ca3 100644
--- a/js/id/ui/loading.js
+++ b/js/id/ui/loading.js
@@ -1,16 +1,9 @@
iD.loading = function(message) {
- var loading = d3.select('div.loading');
- if (loading.empty()) loading = d3.select(document.body)
- .append('div').attr('class', 'loading shaded');
- loading.append('div')
- .attr('class', 'modal loading-pane')
+ var modal = iD.modal();
+
+ modal.select('.content')
+ .classed('loading-modal', true)
.text(message || '');
- var l = {};
-
- l.remove = function() {
- d3.select('div.loading').remove();
- };
-
- return l;
+ return modal;
};
diff --git a/js/id/ui/modal.js b/js/id/ui/modal.js
new file mode 100644
index 000000000..6b74504c8
--- /dev/null
+++ b/js/id/ui/modal.js
@@ -0,0 +1,26 @@
+iD.modal = function() {
+ var animate = d3.select('div.modal').empty();
+
+ d3.select('div.modal').transition()
+ .style('opacity', 0).remove();
+
+ var shaded = d3.select(document.body)
+ .append('div').attr('class', 'shaded')
+ .style('opacity', 0)
+ .on('click', function() {
+ if (d3.event.target == this) this.remove();
+ });
+
+ shaded.append('div')
+ .attr('class', 'modal')
+ .append('div')
+ .attr('class', 'content');
+
+ if (animate) {
+ shaded.transition().style('opacity', 1);
+ } else {
+ shaded.style('opacity', 1);
+ }
+
+ return shaded;
+};