Add a button to trigger file browser for GPX (fixes #1758)

This commit is contained in:
John Firebaugh
2013-10-15 12:54:52 -04:00
parent 958c919763
commit a9964589fc
4 changed files with 54 additions and 32 deletions

View File

@@ -2040,13 +2040,20 @@ img.wiki-image {
height:18px;
}
.background-control .layer-toggle-gpx .layer-extent {
.background-control .layer-toggle-gpx button {
float: right;
height: 100%;
width: 10%;
border-left: 1px solid #CCC;
border-radius: 0 4px 4px 0;
border-radius: 0;
}
.background-control .layer-toggle-gpx.selected .layer-extent {
display:inline-block;
.background-control .layer-toggle-gpx button .icon {
opacity: 0.5;
}
.background-control .layer-toggle-gpx button.layer-extent {
border-radius: 0 3px 3px 0;
}
/* Geolocator */

View File

@@ -135,6 +135,23 @@ iD.Background = function(context) {
return background.hasGpxLayer() && gpxLayer.enable();
};
function toDom(x) {
return (new DOMParser()).parseFromString(x, 'text/xml');
}
background.gpxLayerFiles = function(fileList) {
var f = fileList[0],
reader = new FileReader();
reader.onload = function(e) {
gpxLayer.geojson(toGeoJSON.gpx(toDom(e.target.result)));
dispatch.change();
context.map().pan([0, 0]);
};
reader.readAsText(f);
};
background.zoomToGpxLayer = function() {
if (background.hasGpxLayer()) {
context.map()

View File

@@ -53,10 +53,6 @@ iD.GpxLayer = function(context, dispatch) {
}
}
function toDom(x) {
return (new DOMParser()).parseFromString(x, 'text/xml');
}
render.projection = function(_) {
if (!arguments.length) return projection;
projection = _;
@@ -95,16 +91,7 @@ iD.GpxLayer = function(context, dispatch) {
d3.event.stopPropagation();
d3.event.preventDefault();
if (!iD.detect().filedrop) return;
var f = d3.event.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function(e) {
render.geojson(toGeoJSON.gpx(toDom(e.target.result)));
dispatch.change();
context.map().pan([0, 0]);
};
reader.readAsText(f);
context.background().gpxLayerFiles(d3.event.dataTransfer.files);
})
.on('dragenter.localgpx', over)
.on('dragexit.localgpx', over)

View File

@@ -242,6 +242,29 @@ iD.ui.Background = function(context) {
.title(t('gpx.drag_drop'))
.placement('left'));
gpxLayerItem.append('button')
.attr('class', 'layer-extent')
.on('click', function() {
d3.event.preventDefault();
d3.event.stopPropagation();
context.background().zoomToGpxLayer();
})
.append('span')
.attr('class', 'icon geolocate');
gpxLayerItem.append('button')
.attr('class', 'layer-browse')
.on('click', function() {
d3.select(document.createElement('input'))
.attr('type', 'file')
.on('change', function() {
context.background().gpxLayerFiles(d3.event.target.files);
})
.node().click();
})
.append('span')
.attr('class', 'icon geocode');
label = gpxLayerItem.append('label');
label.append('input')
@@ -252,18 +275,7 @@ iD.ui.Background = function(context) {
label.append('span')
.text(t('gpx.local_layer'));
label.append('button')
.attr('class', 'minor layer-extent')
.on('click', function() {
d3.event.preventDefault();
d3.event.stopPropagation();
context.background().zoomToGpxLayer();
})
.append('span')
.attr('class', 'icon geocode' );
var adjustments = content
.append('div')
var adjustments = content.append('div')
.attr('class', 'adjustments');
adjustments.append('a')
@@ -278,8 +290,7 @@ iD.ui.Background = function(context) {
d3.event.preventDefault();
});
var nudgeContainer = adjustments
.append('div')
var nudgeContainer = adjustments.append('div')
.attr('class', 'nudge-container cf')
.style('display', 'none');