From 4ed44ef9f0058b83bcdd1f7c6fa22e7ab3d32f4c Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Tue, 29 Jan 2013 18:34:40 -0500
Subject: [PATCH] Micro translation framework.

---
 index.html                |  4 ++++
 js/id/ui/inspector.js     |  6 +++---
 js/id/ui/layerswitcher.js |  6 +++---
 js/id/ui/notice.js        |  2 +-
 js/id/ui/save.js          | 10 +++++-----
 js/id/ui/success.js       |  4 ++--
 js/id/ui/tag_reference.js |  2 +-
 js/id/ui/userpanel.js     |  2 +-
 locale/en.js              | 40 +++++++++++++++++++++++++++++++++++++++
 locale/locale.js          | 11 +++++++++++
 10 files changed, 71 insertions(+), 16 deletions(-)
 create mode 100644 locale/en.js
 create mode 100644 locale/locale.js
diff --git a/index.html b/index.html
index deadb5add..4b12084e5 100644
--- a/index.html
+++ b/index.html
@@ -125,9 +125,13 @@
         <script src='js/id/graph/validate.js'></script>
 
         <script src='js/id/connection.js'></script>
+
+        <script src='locale/locale.js'></script>
+        <script src='locale/en.js'></script>
     </head>
     <body>
         <div id="iD"></div><script>
+            locale.current = 'en';
             d3.json('keys.json', function(err, keys) {
                 var id = iD();
                 id.connection().keys(keys)
diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js
index d73e3c3b0..7bc5812d6 100644
--- a/js/id/ui/inspector.js
+++ b/js/id/ui/inspector.js
@@ -22,7 +22,7 @@ iD.ui.inspector = function() {
             .attr('class', 'inspector-inner tag-wrap fillL2');
 
         inspectorwrap.append('h4')
-            .text('Edit tags');
+            .text(t('edit_tags'));
 
         tagList = inspectorwrap.append('ul');
 
@@ -149,7 +149,7 @@ iD.ui.inspector = function() {
                             iD.ui.flash()
                                 .select('.content')
                                 .append('h3')
-                                .text('This is no documentation available for this tag combination');
+                                .text(t('no_documentation_combination'));
                         }
                     });
                 } else if (d.key) {
@@ -167,7 +167,7 @@ iD.ui.inspector = function() {
                             iD.ui.flash()
                                 .select('.content')
                                 .append('h3')
-                                .text('This is no documentation available for this key');
+                                .text(t('no_documentation_key'));
                         }
                     });
                 }
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
index 282bd75e2..ea87cb7a9 100644
--- a/js/id/ui/layerswitcher.js
+++ b/js/id/ui/layerswitcher.js
@@ -35,7 +35,7 @@ iD.ui.layerswitcher = function(map) {
             .append('button')
             .attr('tabindex', -1)
             .attr('class', 'fillD')
-            .attr('title', 'Layer Settings')
+            .attr('title', t('layer_settings'))
             .html("<span class='layers icon'></span>")
             .on('click.layerswitcher-toggle', toggle);
 
@@ -59,7 +59,7 @@ iD.ui.layerswitcher = function(map) {
             .append('div')
             .attr('class', 'opacity-options-wrapper');
 
-        opa.append('h4').text('Layers');
+        opa.append('h4').text(t('layers'));
 
         opa.append('ul')
             .attr('class', 'opacity-options')
@@ -68,7 +68,7 @@ iD.ui.layerswitcher = function(map) {
             .enter()
             .append('li')
                 .attr('data-original-title', function(d) {
-                    return (d * 100) + "% opacity";
+                    return t('percent_opacity', { opacity: (d * 100) });
                 })
                 .on('click.set-opacity', function(d) {
                     d3.select('#tile-g')
diff --git a/js/id/ui/notice.js b/js/id/ui/notice.js
index 479673ba1..bcf44b7c9 100644
--- a/js/id/ui/notice.js
+++ b/js/id/ui/notice.js
@@ -18,7 +18,7 @@ iD.ui.notice = function(selection) {
 
     div.append('span')
         .attr('class', 'notice-text')
-        .text('zoom in to edit the map');
+        .text(t('zoom_in_edit'));
 
     notice.message = function(_) {
         if (_) {
diff --git a/js/id/ui/save.js b/js/id/ui/save.js
index 50f9891f7..8784b2ca4 100644
--- a/js/id/ui/save.js
+++ b/js/id/ui/save.js
@@ -9,8 +9,8 @@ iD.ui.save = function() {
             tooltip = bootstrap.tooltip()
                 .placement('bottom');
 
-        selection.html("<span class='label'>Save</span><small id='as-username'></small>")
-            .attr('title', 'Save changes to OpenStreetMap, making them visible to other users')
+        selection.html("<span class='label'>" + t('save') + "</span><small id='as-username'></small>")
+            .attr('title', t('save_help'))
             .attr('tabindex', -1)
             .property('disabled', true)
             .call(tooltip)
@@ -18,7 +18,7 @@ iD.ui.save = function() {
 
             function commit(e) {
                 d3.select('.shaded').remove();
-                var l = iD.ui.loading('Uploading changes to OpenStreetMap.', true);
+                var l = iD.ui.loading(t('uploading_changes'), true);
                 connection.putChangeset(history.changes(), e.comment, history.imagery_used(), function(err, changeset_id) {
                     l.remove();
                     history.reset();
@@ -27,7 +27,7 @@ iD.ui.save = function() {
                         var desc = iD.ui.confirm()
                             .select('.description');
                         desc.append('h2')
-                            .text('An error occurred while trying to save');
+                            .text(t('save_error'));
                         desc.append('p').text(err.responseText);
                     } else {
                         var modal = iD.ui.modal();
@@ -67,7 +67,7 @@ iD.ui.save = function() {
                 });
             } else {
                 iD.ui.confirm().select('.description')
-                    .append('h3').text('You don\'t have any changes to save.');
+                    .append('h3').text(t('no_changes'));
             }
 
         });
diff --git a/js/id/ui/success.js b/js/id/ui/success.js
index 8cc6e328b..fffa7b6ab 100644
--- a/js/id/ui/success.js
+++ b/js/id/ui/success.js
@@ -8,7 +8,7 @@ iD.ui.success = function(connection) {
 
         var section = body.append('div').attr('class','modal-section fillD');
 
-        header.append('h2').text('You Just Edited OpenStreetMap!');
+        header.append('h2').text(t('just_edited'));
 
         var m = '';
         if (changeset.comment) {
@@ -24,7 +24,7 @@ iD.ui.success = function(connection) {
             })
             .attr('target', '_blank')
             .attr('class', 'success-action')
-            .text('View on OSM');
+            .text(t('view_on_osm'));
 
         header.append('a')
             .attr('target', '_blank')
diff --git a/js/id/ui/tag_reference.js b/js/id/ui/tag_reference.js
index eb1ee84bd..cdb22b505 100644
--- a/js/id/ui/tag_reference.js
+++ b/js/id/ui/tag_reference.js
@@ -24,7 +24,7 @@ iD.ui.tagReference = function(selection) {
 
         referenceBody
             .append('h5')
-            .text('Description');
+            .text(t('description'));
 
         if (selection.datum().image) {
             referenceBody
diff --git a/js/id/ui/userpanel.js b/js/id/ui/userpanel.js
index d0d8fa63d..2b28411a6 100644
--- a/js/id/ui/userpanel.js
+++ b/js/id/ui/userpanel.js
@@ -34,7 +34,7 @@ iD.ui.userpanel = function(connection) {
                         .append('a')
                         .attr('class', 'logout')
                         .attr('href', '#')
-                        .text('logout')
+                        .text(t('logout'))
                         .on('click.logout', function() {
                             d3.event.preventDefault();
                             event.logout();
diff --git a/locale/en.js b/locale/en.js
new file mode 100644
index 000000000..2a011a734
--- /dev/null
+++ b/locale/en.js
@@ -0,0 +1,40 @@
+locale.en = {
+    "browse": "Browse",
+    "point": "Point",
+    "line": "Line",
+    "area": "Area",
+
+    "save": "Save",
+    "save_help": "Save changes to OpenStreetMap, making them visible to other users",
+    "no_changes": "You don't have any changes to save.",
+    "save_error": "An error occurred while trying to save",
+    "uploading_changes": "Uploading changes to OpenStreetMap.",
+    "just_edited": "You Just Edited OpenStreetMap!",
+    "okay": "Okay",
+
+    "zoom-in": "Zoom In",
+    "zoom-out": "Zoom Out",
+
+    "browser_notice": "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map.",
+
+    "layer_settings": "Layer Settings",
+
+    "no_documentation_combination":  "This is no documentation available for this tag combination",
+    "no_documentation_key": "This is no documentation available for this key",
+
+    "view_on_osm": "View on OSM",
+
+    "zoom_in_edit": "zoom in to edit the map",
+
+    "edit_tags": "Edit tags",
+
+    "find_location": "Find A Location",
+    "find_placeholder": "find a place",
+
+    "description": "Description",
+
+    "logout": "logout",
+
+    "layers": "Layers",
+    "percent_opacity": "{opacity}% opacity"
+}
diff --git a/locale/locale.js b/locale/locale.js
new file mode 100644
index 000000000..123e08b93
--- /dev/null
+++ b/locale/locale.js
@@ -0,0 +1,11 @@
+var locale = {};
+
+function t(s, o) {
+    if (locale[locale.current][s] !== undefined) {
+        var rep = locale[locale.current][s];
+        if (o) for (var k in o) rep = rep.replace('{' + k + '}', o[k]);
+        return rep;
+    } else {
+        if (console) console.error('key ' + s + ' not found');
+    }
+}
