Hook up radio inputs

js/id/ui/background.js

@@ -33,19 +33,26 @@ iD.ui.Background = function(context) {
         }
 
         function selectLayer() {
+            function active(d) {
+                var overlay = context.map().layers[2].source();
+                return d.data.name === context.background().source().data.name ||
+                    (overlay.data && overlay.data.name === d.data.name);
+            }
+
             content.selectAll('label.layer')
-                .classed('active', function(d) {
-                    var overlay = context.map().layers[2].source();
-                    return d.data.name === context.background().source().data.name ||
-                        (overlay.data && overlay.data.name === d.data.name);
-                });
+                .classed('active', active)
+                .selectAll('input')
+                .property('checked', active);
         }
 
         function clickSetSource(d) {
             d3.event.preventDefault();
             if (d.data.name === 'Custom') {
                 var configured = d();
-                if (!configured) return;
+                if (!configured) {
+                    selectLayer();
+                    return;
+                }
                 d = configured;
             }
             context.background().source(d);
@@ -83,7 +90,7 @@ iD.ui.Background = function(context) {
             }
         }
 
-        function drawList(layerList, click, filter) {
+        function drawList(layerList, type, change, filter) {
 
             var layerLinks = layerList.selectAll('label.layer')
                 .data(getSources().filter(filter), function(d) {
@@ -91,11 +98,8 @@ iD.ui.Background = function(context) {
                 });
 
             var layerInner = layerLinks.enter()
-                .append('label');
-
-            layerInner
-                .attr('class', 'layer')
-                .on('click.set-source', click);
+                .append('label')
+                .attr('class', 'layer');
 
             // only set tooltips for layers with tooltips
             layerInner
@@ -105,10 +109,11 @@ iD.ui.Background = function(context) {
                     .placement('right')
                 );
 
-            layerInner.insert('input')
-                .attr('type','radio')
-                .attr('name','layers')
-                .attr('value',function(d) { return d.data.name;});
+            layerInner.append('input')
+                .attr('type', type)
+                .attr('name', 'layers')
+                .attr('value', function(d) { return d.data.name; })
+                .on('change', change);
 
             layerInner.insert('span').text(function(d) {
                 return d.data.name;
@@ -122,11 +127,11 @@ iD.ui.Background = function(context) {
 
         function update() {
 
-            backgroundList.call(drawList, clickSetSource, function(d) {
+            backgroundList.call(drawList, 'radio', clickSetSource, function(d) {
                 return !d.data.overlay;
             });
 
-            overlayList.call(drawList, clickSetOverlay, function(d) {
+            overlayList.call(drawList, 'checkbox', clickSetOverlay, function(d) {
                 return d.data.overlay;
             });
 

js/id/ui/preset/radio.js

@@ -1,7 +1,7 @@
 iD.ui.preset.radio = function(field) {
 
     var event = d3.dispatch('change'),
-        buttons;
+        labels, radios;
 
     function radio(selection) {
         selection.classed('preset-radio', true);
@@ -12,28 +12,25 @@ iD.ui.preset.radio = function(field) {
         var buttonWrap = wrap.enter().append('div')
             .attr('class', 'preset-input-wrap toggle-list');
 
-        buttons = wrap.selectAll('label')
+        labels = wrap.selectAll('label')
             .data(field.options || field.keys);
 
-        var button = buttons.enter().append('label');
+        var enter = labels.enter().append('label');
 
-        button.append('input')
-            .attr('type','radio')
-            .attr('name',field.label)
-            .attr('value', function(d) { return field.t('options.' + d, { 'default': d }); });
+        enter.append('input')
+            .attr('type', 'radio')
+            .attr('name', field.id)
+            .attr('value', function(d) { return field.t('options.' + d, { 'default': d }); })
+            .attr('checked', false);
 
-        button.append('span')
+        enter.append('span')
             .text(function(d) { return field.t('options.' + d, { 'default': d }); });
 
-        buttons
-            .on('click', function(d) {
-                d3.event.preventDefault();
-                buttons.classed('active', function(e) { return d === e; });
-                change();
-            });
+        radios = labels.selectAll('input')
+            .on('change', change);
 
         buttonWrap.append('span')
-            .attr('class','placeholder')
+            .attr('class', 'placeholder')
             .text(field.placeholder());
 
         var remove = wrap.selectAll('label.remove')
@@ -48,17 +45,16 @@ iD.ui.preset.radio = function(field) {
         remove
             .on('click', function() {
                 d3.event.preventDefault();
-                buttons.classed('active', false);
+                radios.property('checked', false);
                 change();
             });
-
     }
 
     function change() {
         var t = {};
         if (field.key) t[field.key] = undefined;
-        buttons.each(function(d) {
-            var active = d3.select(this).classed('active');
+        radios.each(function(d) {
+            var active = d3.select(this).property('checked');
             if (field.key) {
                 if (active) t[field.key] = d;
             } else {
@@ -69,17 +65,20 @@ iD.ui.preset.radio = function(field) {
     }
 
     radio.tags = function(tags) {
-        buttons.classed('active', function(d) {
+        function checked(d) {
             if (field.key) {
                 return tags[field.key] === d;
             } else {
-                return tags[d] && tags[d] !== 'no';
+                return !!(tags[d] && tags[d] !== 'no');
             }
-        });
+        }
+
+        labels.classed('active', checked);
+        radios.property('checked', checked);
     };
 
     radio.focus = function() {
-        buttons.node().focus();
+        radios.node().focus();
     };
 
     return d3.rebind(radio, event, 'on');