CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-19 15:08:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor geocoder into ui component, refactor clickoutside technique.

Browse Source 
Fixes #251
This commit is contained in:
Tom MacWright
2012-12-13 14:18:49 -05:00
parent c52a8fe637
commit 8e14a9a13c
6 changed files with 87 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -43,6 +43,7 @@
<script src='js/id/ui/loading.js'></script>
<script src='js/id/ui/userpanel.js'></script>
<script src='js/id/ui/layerswitcher.js'></script>
<script src='js/id/ui/geocoder.js'></script>
<script src='js/id/ui/notice.js'></script>
<script src='js/id/actions.js'></script>
js/id/id.js
+2 -27
View File
@@ -134,33 +134,8 @@ window.iD = function(container) {
return d[0] + ' icon';
});
var gc = this.append('div').attr('class', 'geocode-control map-control');
gc.append('button')
.attr('class','narrow')
.html("<span class='geocode icon'></span>")
.on('click', function() {
d3.select(this).classed('active', gcForm.classed('hide'));
gcForm.classed('hide', !gcForm.classed('hide'));
if (!gcForm.classed('hide')) d3.select('.map-overlay input').node().focus();
else map.surface.node().focus();
});
var gcForm = gc.append('form');
gcForm.attr('class','content map-overlay hide')
.append('input')
.attr({
type: 'text',
placeholder: 'find a place'
})
.on('keydown', function () {
if (d3.event.keyCode !== 13) return;
d3.event.preventDefault();
d3.json('http://api.tiles.mapbox.com/v3/mapbox/geocode/' +
encodeURIComponent(this.value) + '.json', function(err, resp) {
gc.select('button').on('click').apply(gc.select('button').node());
map.center([resp.results[0][0].lon, resp.results[0][0].lat]);
});
});
var gc = this.append('div').attr('class', 'geocode-control map-control')
.call(iD.geocoder().map(map));
this.append('div').attr('class', 'map-control layerswitcher-control')
.call(iD.layerswitcher(map));
js/id/ui/geocoder.js
+57
View File
@@ -0,0 +1,57 @@
iD.geocoder = function() {
var map;
function geocoder(selection) {
function keydown() {
if (d3.event.keyCode !== 13) return;
d3.event.preventDefault();
d3.json('http://api.tiles.mapbox.com/v3/mapbox/geocode/' +
encodeURIComponent(this.value) + '.json', function(err, resp) {
hide();
map.center([resp.results[0][0].lon, resp.results[0][0].lat]);
});
}
function clickoutside(selection) {
selection
.on('click.geocoder-inside', function() {
return d3.event.stopPropagation();
});
d3.select('body').on('click.geocoder-outside', hide);
}
function show() { setVisible(true); }
function hide() { setVisible(false); }
function toggle() { setVisible(gcForm.classed('hide')); }
function setVisible(show) {
button.classed('active', show);
gcForm.classed('hide', !show);
if (show) d3.select('.map-overlay input').node().focus();
else map.surface.node().focus();
}
var button = selection.append('button')
.attr('class','narrow')
.html('<span class=\'geocode icon\'></span>')
.on('click', toggle);
var gcForm = selection.append('form');
gcForm.attr('class','content map-overlay hide')
.append('input')
.attr({ type: 'text', placeholder: 'find a place' })
.on('keydown', keydown);
selection.call(clickoutside);
}
geocoder.map = function(_) {
if (!arguments.length) return map;
map = _;
return geocoder;
};
return geocoder;
};
js/id/ui/layerswitcher.js
+19 -25
View File
@@ -20,37 +20,29 @@ iD.layerswitcher = function(map) {
var content = selection
.append('div').attr('class', 'content map-overlay hide');
var toggle = selection
var button = selection
.append('button')
.attr('class', 'narrow')
.html("<span class='layers icon'></span>")
.on('click.toggle', function() {
d3.select(this)
.classed('active', function() {
return content.classed('hide');
});
content.classed('hide', function() {
if (content.classed('hide')) clickoutside(selection);
else {
d3.select('body').on('click.outside', null);
selection.on('click.inside', null);
}
return !content.classed('hide');
});
});
.on('click.layerswitcher-toggle', toggle);
function clickoutside(selection) {
selection
.on('click.inside', function() {
return d3.event.stopPropagation();
});
d3.select('body')
.on('click.outside', function() {
toggle.on('click.toggle').apply(toggle.node(), d3.event);
});
function show() { setVisible(true); }
function hide() { setVisible(false); }
function toggle() { setVisible(content.classed('hide')); }
function setVisible(show) {
button.classed('active', show);
content.classed('hide', !show);
}
opa = content
function clickoutside(selection) {
selection.on('click.layerswitcher-inside', function() {
return d3.event.stopPropagation();
});
d3.select('body').on('click.layerswitcher-outside', hide);
}
var opa = content
.append('div')
.attr('class', 'opacity-options-wrapper fillL2')
.html("<em>Layers</em>")
@@ -116,6 +108,8 @@ iD.layerswitcher = function(map) {
.insert('span')
.attr('class','icon toggle');
selection.call(clickoutside);
selectLayer(map.background.source());
}
test/index.html
+2
View File
@@ -42,6 +42,7 @@
<script src='../js/id/ui/commit.js'></script>
<script src='../js/id/ui/loading.js'></script>
<script src='../js/id/ui/userpanel.js'></script>
<script src='../js/id/ui/geocoder.js'></script>
<script src='../js/id/ui/notice.js'></script>
<script src='../js/id/actions.js'></script>
@@ -107,6 +108,7 @@
<script src="spec/renderer/map.js"></script>
<script src="spec/renderer/style.js"></script>
<script src="spec/ui/inspector.js"></script>
<script src="spec/ui/geocoder.js"></script>
<script src="spec/connection.js"></script>
<script src="spec/oauth.js"></script>
<script src="spec/util.js"></script>
test/spec/ui/geocoder.js
+6
View File
@@ -0,0 +1,6 @@
describe("Geocoder", function () {
it('can be instantiated', function () {
var geocoder = iD.geocoder();
expect(geocoder).to.be.ok;
});
});