diff --git a/css/app.css b/css/app.css index a75cc97de..a7931a2da 100644 --- a/css/app.css +++ b/css/app.css @@ -1895,6 +1895,10 @@ div.full-screen > button:hover { max-width: 160px; } +.layer-list li.switch { + background: #fffce8; +} + .layer-list label { display: block; padding: 5px 10px; diff --git a/js/id/ui/background.js b/js/id/ui/background.js index 1143af386..abf846801 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -8,7 +8,8 @@ iD.ui.Background = function(context) { ['bottom', [0, 0.5]]], opacityDefault = (context.storage('background-opacity') !== null) ? (+context.storage('background-opacity')) : 1.0, - customTemplate = context.storage('background-custom-template') || ''; + customTemplate = context.storage('background-custom-template') || '', + latestBg = [context.background().baseLayerSource(), null]; // Can be 0 from <1.3.0 use or due to issue #1923. if (opacityDefault === 0) opacityDefault = 1.0; @@ -43,13 +44,21 @@ iD.ui.Background = function(context) { return context.background().showsLayer(d); } + function bgswitch(d) { + return latestBg[1] === d; + } + content.selectAll('.layer, .custom_layer') .classed('active', active) + .classed('switch', bgswitch) .selectAll('input') .property('checked', active); } function clickSetSource(d) { + latestBg[1] = latestBg[0]; + latestBg[0] = d; + d3.event.preventDefault(); context.background().baseLayerSource(d); selectLayer(); @@ -242,6 +251,20 @@ iD.ui.Background = function(context) { setVisible(!button.classed('active')); } + function interchangeBg() { + var d = latestBg[1]; + if (d == null) { + toggle(); + return; + } + + latestBg[1] = latestBg[0]; + latestBg[0] = d; + + context.background().baseLayerSource(d); + selectLayer(); + } + function setVisible(show) { if (show !== shown) { button.classed('active', show); @@ -448,6 +471,7 @@ iD.ui.Background = function(context) { var keybinding = d3.keybinding('background') .on(key, toggle) + .on('I', interchangeBg) .on('F', hide) .on('H', hide);