Make intro phases translatable. Fixes #1411.

data/core.yaml

@@ -452,11 +452,13 @@ en:
       trash can icon or pressing the 'Delete' key.
   intro:
     navigation:
+      title: "Navigation"
       drag: "The main map area shows OpenStreetMap data on top of a background. You can navigate by dragging and scrolling, just like any web map. **Drag the map!**"
       select: "Map features are represented three ways: using points, lines or areas. All features can be selected by clicking on them. **Click on the point to select it.**"
       header: "The header shows us the feature type."
       pane: "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor with the close button in the top right.**"
     points:
+      title: "Points"
       add: "Points can be used to represent features such as shops, restaurants and monuments. They mark a specific location, and describe what's there. **Click the Point button to add a new point.**"
       place: "Click to place the point on the map. The point we are adding is a Cafe. **Place the point at the corner of This Street and That Street**"
       place: "The point can be placed by clicking on the map. **Place the point on top of the building.**"
@@ -469,6 +471,7 @@ en:
       reselect_delete: "All features on the map can be deleted. **Click on the point you created.**"
       delete: "The menu around the point contains operations that can be performed on it, including delete. **Delete the point.**"
     areas:
+      title: "Areas"
       add: "Areas are a more detailed way to represent features. They provide information on the boundaries of the feature. Areas can be used for most feature types points can be used for, and are often preferred. **Click the Area button to add a new area.**"
       corner: "Areas are drawn by placing nodes that mark the boundary of the area. **Place the starting node on one of the corners of the playground.**"
       place: "Draw the area by placing more nodes. Finish the area by clicking on the starting node. **Draw an area for the playground.**"
@@ -476,6 +479,7 @@ en:
       choose: "**Choose Playground from the list.**"
       describe: "**Add a name, and close the feature editor**"
     lines:
+      title: "Lines"
       add: "Lines are used to represent features such as roads, railways and rivers. **Click the Line button to add a new line.**"
       start: "**Start the line by clicking on the end of the road.**"
       intersect: "Click to add more nodes to the line. You can drag the map while drawing if necessary. Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on Flower Street, to create an intersection connecting the two lines.**"
@@ -485,6 +489,7 @@ en:
       describe: "**Name the road and close the feature editor.**"
       restart: "The road needs to intersect Flower Street."
     startediting:
+      title: "Start Editing"
       help: "More documentation and this walkthrough are available here."
       save: "Don't forget to regularly save your changes!"
       start: "Start mapping!"

dist/locales/en.json

@@ -274,12 +274,14 @@
     },
     "intro": {
         "navigation": {
+            "title": "Navigation",
             "drag": "The main map area shows OpenStreetMap data on top of a background. You can navigate by dragging and scrolling, just like any web map. **Drag the map!**",
             "select": "Map features are represented three ways: using points, lines or areas. All features can be selected by clicking on them. **Click on the point to select it.**",
             "header": "The header shows us the feature type.",
             "pane": "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor with the close button in the top right.**"
         },
         "points": {
+            "title": "Points",
             "add": "Points can be used to represent features such as shops, restaurants and monuments. They mark a specific location, and describe what's there. **Click the Point button to add a new point.**",
             "place": "The point can be placed by clicking on the map. **Place the point on top of the building.**",
             "search": "There are many different features that can be represented by points. The point you just added is a Cafe. **Search for 'Cafe' **",
@@ -292,6 +294,7 @@
             "delete": "The menu around the point contains operations that can be performed on it, including delete. **Delete the point.**"
         },
         "areas": {
+            "title": "Areas",
             "add": "Areas are a more detailed way to represent features. They provide information on the boundaries of the feature. Areas can be used for most feature types points can be used for, and are often preferred. **Click the Area button to add a new area.**",
             "corner": "Areas are drawn by placing nodes that mark the boundary of the area. **Place the starting node on one of the corners of the playground.**",
             "place": "Draw the area by placing more nodes. Finish the area by clicking on the starting node. **Draw an area for the playground.**",
@@ -300,6 +303,7 @@
             "describe": "**Add a name, and close the feature editor**"
         },
         "lines": {
+            "title": "Lines",
             "add": "Lines are used to represent features such as roads, railways and rivers. **Click the Line button to add a new line.**",
             "start": "**Start the line by clicking on the end of the road.**",
             "intersect": "Click to add more nodes to the line. You can drag the map while drawing if necessary. Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on Flower Street, to create an intersection connecting the two lines.**",
@@ -310,6 +314,7 @@
             "restart": "The road needs to intersect Flower Street."
         },
         "startediting": {
+            "title": "Start Editing",
             "help": "More documentation and this walkthrough are available here.",
             "save": "Don't forget to regularly save your changes!",
             "start": "Start mapping!"

js/id/ui/intro.js

@@ -45,7 +45,7 @@ iD.ui.intro = function(context) {
             var s = iD.ui.intro[step](context, reveal)
                 .on('done', function() {
                     entered.filter(function(d) {
-                        return d.name === s.name;
+                        return d.title === s.title;
                     }).classed('finished', true);
                     enter(steps[i + 1]);
                 });
@@ -77,7 +77,7 @@ iD.ui.intro = function(context) {
                 .on('click', enter);
 
         entered.append('div').attr('class','icon icon-pre-text apply');
-        entered.append('label').text(function(d) { return d.name; });
+        entered.append('label').text(function(d) { return t(d.title); });
         enter(steps[0]);
 
         function enter (newStep) {
@@ -92,7 +92,7 @@ iD.ui.intro = function(context) {
             step.enter();
 
             entered.classed('active', function(d) {
-                return d.name === step.name;
+                return d.title === step.title;
             });
         }
 

js/id/ui/intro/area.js

@@ -4,7 +4,7 @@ iD.ui.intro.area = function(context, reveal) {
         timeout;
 
     var step = {
-        name: 'Areas'
+        title: 'intro.areas.title'
     };
 
     step.enter = function() {
@@ -56,7 +56,7 @@ iD.ui.intro.area = function(context, reveal) {
                 d3.select('.preset-grid-search-wrap input').on('keyup.intro', keySearch);
             }, 500);
         }
-        
+
         function keySearch() {
             var first = d3.select('.grid-button-wrap:first-child');
             if (first.datum().id === 'leisure/playground') {
@@ -70,8 +70,6 @@ iD.ui.intro.area = function(context, reveal) {
             reveal('.pane', 'intro.areas.describe');
             context.on('exit.intro', event.done);
         }
-
-
     };
 
     step.exit = function() {

js/id/ui/intro/line.js

@@ -4,7 +4,7 @@ iD.ui.intro.line = function(context, reveal) {
         timeouts = [];
 
     var step = {
-        name: 'Lines'
+        title: 'intro.lines.title'
     };
 
     function one(target, e, f) {

js/id/ui/intro/navigation.js

@@ -4,7 +4,7 @@ iD.ui.intro.navigation = function(context, reveal) {
         timeouts = [];
 
     var step = {
-        name: 'Navigation'
+        title: 'intro.navigation.title'
     };
 
     function set(f, t) {

js/id/ui/intro/point.js

@@ -4,7 +4,7 @@ iD.ui.intro.point = function(context, reveal) {
         timeouts = [];
 
     var step = {
-        name: 'Points'
+        title: 'intro.points.title'
     };
 
     function setTimeout(f, t) {

js/id/ui/intro/start_editing.js

@@ -5,7 +5,7 @@ iD.ui.intro.startEditing = function(context, reveal) {
         timeouts = [];
 
     var step = {
-        name: 'Start Editing'
+        title: 'intro.startediting.title'
     };
 
     function timeout(f, t) {