Better system for identifying steps

js/iD/controller/shape/DrawWay.js

@@ -34,7 +34,7 @@ declare("iD.controller.shape.DrawWay", [iD.controller.ControllerState], {
 		this.wayUI.setStateClass('selected');
 		this.wayUI.setStateClass('shownodes');
 		this.wayUI.redraw();
-		this.controller.stepper.highlight(2);
+		this.controller.stepper.highlight('draw');
 	},
 	exitState:function() {
 		this.controller.map.clearElastic();
@@ -93,12 +93,12 @@ declare("iD.controller.shape.DrawWay", [iD.controller.ControllerState], {
 					// Click on node
 					if (entity==this.getDrawingNode()) {
 						// Double-click, so complete drawing
-						this.controller.stepper.highlight(3);
+						this.controller.stepper.highlight('tag');
 						return new iD.controller.edit.SelectedWay(this.way);
 					} else if (entity==this.getStartNode()) {
 						// Start of this way, so complete drawing
 						this.appendNode(entity, this.undoAdder() );
-						this.controller.stepper.highlight(3);
+						this.controller.stepper.highlight('tag');
 						return new iD.controller.edit.SelectedWay(this.way);
 					} else {
 						// Add to way

js/iD/controller/shape/NoSelection.js

@@ -31,11 +31,11 @@ declare("iD.controller.shape.NoSelection", [iD.controller.ControllerState], {
 	},
 
 	enterState:function() {
-		this.controller.stepper.setSteps([
-			"Click anywhere on the map to start drawing there",
-			"Keep clicking to add each point, and press Enter or double-click when you're done",
-			"Set the type of the road or shape"
-		]).highlight(1);
+		this.controller.stepper.setSteps({
+			begin: "Click anywhere on the map to start drawing there",
+			draw: "Keep clicking to add each point, and press Enter or double-click when you're done",
+			tag: "Set the type of the road or shape"
+		},['begin','draw','tag']).highlight('begin');
 	},
 	
 	processMouseEvent:function(event,entityUI) {

js/iD/ui/StepPane.js

@@ -17,13 +17,15 @@ define(['dojo/_base/declare','dojo/_base/lang'], function(declare,lang){
 
 declare("iD.ui.StepPane", null, {
 
-	divname:null,
-	stepsname:null,			// we probably don't want to have this
-	currentStep:0,
+	divname: null,
+	stepsname: null,			// we probably don't want to have this
+	currentStep: 0,
+	order: null,
 	
 	constructor:function(_divname,_stepsdivname) {
 		this.divname=_divname;
 		this.stepsname=_stepsdivname;
+		this.order=[];
 	},
 
 	// Getters for the <div> containing the steps, and its individual nodes
@@ -33,17 +35,18 @@ declare("iD.ui.StepPane", null, {
 
 	// Add/remove steps
 
-	addStep:function(text) {
+	addStep:function(name,text) {
+		this.order.push(name);
 		this.stepsDiv().appendChild(document.createElement('li')).innerHTML=text;
 	},
-	setStep:function(pos,text) {
-		if (this.stepsNodes().length<pos) { addStep(text); }
-		else { this.stepsNodes()[pos].innerHTML=text; }
+	insertStep:function(pos,name,text) {
+		this.order.splice(pos,0,name);
+		this.stepsNodes()[pos+1].insertBefore(document.createElement('li')).innerHTML=text;
 	},
-	setSteps:function(steps) {
+	setSteps:function(steps,order) {
 		this.clear();
-		for (var i=0; i<steps.length; i++) {
-			this.addStep(steps[i]);
+		for (var i=0; i<order.length; i++) {
+			this.addStep(order[i], steps[order[i]]);
 		}
 		return this;
 	},
@@ -51,15 +54,16 @@ declare("iD.ui.StepPane", null, {
 		for (var i=this.stepsNodes().length-1; i>=1; i--) {
 			this.stepsDiv().removeChild(this.stepsNodes()[i]);
 		}
+		this.order=[];
 	},
 
 	// Change the highlighted step
 
-	highlight:function(step) {
+	highlight:function(stepname) {
 		this.show();
-		this.currentStep=step;
+		this.currentStep=stepname;
 		for (var i=1; i<this.stepsNodes().length; i++) {
-			this.stepsNodes()[i].style.color = i==step ? 'black' : 'lightgray';
+			this.stepsNodes()[i].style.color = this.order[i-1]==stepname ? 'black' : 'lightgray';
 		}
 	},