From 0c77ae681cb9c5b2853100c83b9bb52616b1865f Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Wed, 5 Dec 2012 13:04:25 -0500 Subject: [PATCH] Refactor modal concept into one bit of code --- css/app.css | 8 +++--- index.html | 1 + js/id/id.js | 22 +++++++-------- js/id/oauth.js | 65 +++++++++++++++++++++------------------------ js/id/ui/loading.js | 17 ++++-------- js/id/ui/modal.js | 26 ++++++++++++++++++ 6 files changed, 75 insertions(+), 64 deletions(-) create mode 100644 js/id/ui/modal.js 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; +};