From a9964589fcecffaabfe34205d2c7e0500eb76b15 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Tue, 15 Oct 2013 12:54:52 -0400
Subject: [PATCH] Add a button to trigger file browser for GPX (fixes #1758)

---
 css/app.css                  | 15 ++++++++++----
 js/id/renderer/background.js | 17 ++++++++++++++++
 js/id/renderer/gpx_layer.js  | 15 +-------------
 js/id/ui/background.js       | 39 +++++++++++++++++++++++-------------
 4 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/css/app.css b/css/app.css
index 9cdcc8bb4..eaa56a65d 100644
--- a/css/app.css
+++ b/css/app.css
@@ -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 */
diff --git a/js/id/renderer/background.js b/js/id/renderer/background.js
index 53e2d0b0a..06d0136e6 100644
--- a/js/id/renderer/background.js
+++ b/js/id/renderer/background.js
@@ -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()
diff --git a/js/id/renderer/gpx_layer.js b/js/id/renderer/gpx_layer.js
index f44c38d94..96bf512ad 100644
--- a/js/id/renderer/gpx_layer.js
+++ b/js/id/renderer/gpx_layer.js
@@ -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)
diff --git a/js/id/ui/background.js b/js/id/ui/background.js
index f08c679fc..e2db27c87 100644
--- a/js/id/ui/background.js
+++ b/js/id/ui/background.js
@@ -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');