CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-21 07:46:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor modal concept into one bit of code

Browse Source
This commit is contained in:
Tom MacWright
2012-12-05 13:04:25 -05:00
parent fbe56c795e
commit 0c77ae681c
6 changed files with 75 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+4 -4
View File
@@ -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;
index.html
+1
View File
@@ -32,6 +32,7 @@
<script src='js/id/renderer/hash.js'></script>
<script src='js/id/renderer/markers.js'></script>
<script src='js/id/ui/inspector.js'></script>
<script src='js/id/ui/modal.js'></script>
<script src='js/id/ui/commit.js'></script>
<script src='js/id/ui/loading.js'></script>
<script src='js/id/ui/userpanel.js'></script>
js/id/id.js
+9 -13
View File
@@ -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));
});
});
js/id/oauth.js
+30 -35
View File
@@ -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();
});
}
});
}
});
};
js/id/ui/loading.js
+5 -12
View File
@@ -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;
};
js/id/ui/modal.js
+26
View File
@@ -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;
};