diff --git a/js/id/ui/background.js b/js/id/ui/background.js index d62887fea..7f25f7c92 100644 --- a/js/id/ui/background.js +++ b/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; }); diff --git a/js/id/ui/preset/radio.js b/js/id/ui/preset/radio.js index f60efa718..ee4c8ef90 100644 --- a/js/id/ui/preset/radio.js +++ b/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');