diff --git a/js/iD/actions/modes.js b/js/iD/actions/modes.js index e7812c805..69ce3d7d7 100644 --- a/js/iD/actions/modes.js +++ b/js/iD/actions/modes.js @@ -16,10 +16,8 @@ iD.modes._node = function(ll) { }; iD.modes.AddPlace = { + title: "+ Place", enter: function() { - d3.selectAll('button').classed('active', false); - d3.selectAll('button#place').classed('active', true); - var surface = this.map.surface; var teaser = surface.selectAll('g#temp-g') .append('g').attr('id', 'addplace'); @@ -54,11 +52,11 @@ iD.modes.AddPlace = { this.map.surface.on('click.addplace', null); d3.select(document).on('keydown.addplace', null); d3.selectAll('#addplace').remove(); - d3.selectAll('button#place').classed('active', false); } }; iD.modes.AddRoad = { + title: "+ Road", way: function(ll) { return iD.Entity({ type: 'way', @@ -71,9 +69,6 @@ iD.modes.AddRoad = { }); }, enter: function() { - d3.selectAll('button').classed('active', false); - d3.selectAll('button#road').classed('active', true); - var surface = this.map.surface; this.map.handleDrag(false); var teaser = surface.selectAll('g#temp-g') @@ -120,7 +115,6 @@ iD.modes.AddRoad = { this.map.handleDrag(true); d3.select(document).on('keydown.addroad', null); d3.selectAll('#addroad').remove(); - d3.selectAll('button#road').classed('active', false); } }; @@ -184,6 +178,7 @@ iD.modes.DrawRoad = function(way) { }; iD.modes.AddArea = { + title: "+ Area", way: function(ll) { return iD.Entity({ type: 'way', @@ -196,9 +191,6 @@ iD.modes.AddArea = { }); }, enter: function() { - d3.selectAll('button').classed('active', false); - d3.selectAll('button#area').classed('active', true); - var surface = this.map.surface; var teaser = surface.selectAll('g#temp-g') .append('g').attr('id', 'addroad'); @@ -236,7 +228,6 @@ iD.modes.AddArea = { this.map.surface.on('mousemove.addarea', null); d3.select(document).on('keydown.addarea', null); d3.selectAll('#addroad').remove(); - d3.selectAll('button#area').classed('active', false); } }; @@ -296,8 +287,6 @@ iD.modes.DrawArea = function(way) { }; iD.modes.Move = { - enter: function() { - d3.selectAll('button').classed('active', false); - }, + enter: function() { }, exit: function() { } }; diff --git a/js/iD/controller/Controller.js b/js/iD/controller/Controller.js index 20146be05..bf5115900 100644 --- a/js/iD/controller/Controller.js +++ b/js/iD/controller/Controller.js @@ -1,6 +1,7 @@ // A controller holds a single action at a time and calls `.enter` and `.exit` // to bind and unbind actions. iD.Controller = function(map) { + var event = d3.dispatch('enter', 'exit'); var controller = { mode: null }; controller.enter = function(mode) { @@ -8,12 +9,14 @@ iD.Controller = function(map) { mode.map = map; if (controller.mode) { controller.mode.exit(); + event.exit(controller.mode); } mode.enter(); controller.mode = mode; + event.enter(mode); }; controller.enter(iD.modes.Move); - return controller; + return d3.rebind(controller, event, 'on'); }; diff --git a/js/iD/id.js b/js/iD/id.js index 3a4710e2c..dc549474d 100644 --- a/js/iD/id.js +++ b/js/iD/id.js @@ -14,26 +14,15 @@ var iD = function(container) { var bar = container.append('div') .attr('id', 'bar'); - bar.append('button') - .attr('id', 'place') - .html('+ Place') - .on('click', function() { - controller.enter(iD.modes.AddPlace); - }); + var buttons = bar.selectAll('button') + .data([iD.modes.AddPlace, iD.modes.AddRoad, iD.modes.AddArea]) + .enter().append('button') + .text(function (mode) { return mode.title; }) + .on('click', function (mode) { controller.enter(mode); }); - bar.append('button') - .attr('id', 'road') - .html('+ Road') - .on('click', function() { - controller.enter(iD.modes.AddRoad); - }); - - bar.append('button') - .attr('id', 'area') - .html('+ Area') - .on('click', function() { - controller.enter(iD.modes.AddArea); - }); + controller.on('enter', function (entered) { + buttons.classed('active', function (mode) { return entered === mode; }) + }); bar.append('button') .attr('id', 'undo')