Use more d3 for mode button logic

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() { }
 };

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');
 };

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')