Merge pull request #136 from osmlab/support-address-field-localization

Support address field ordering localization

index.html

@@ -114,7 +114,8 @@ <h1 data-i18n="app.title" class="mx-auto text-primary">On OpenStreetMap</h1>
         <p data-i18n="step2.addressalt" class="mt-3"></p>
         <!-- address 1 -->
         <div class="form-row">
-          <div class="form-group col-md-5">
+          <!-- Street -->
+          <div id="streetgroup" class="form-group col-md-5">
             <label for='addressalt' data-i18n="step2.street"></label>
             <div class="input-group">
               <div class="input-group-prepend">
@@ -123,7 +124,8 @@ <h1 data-i18n="app.title" class="mx-auto text-primary">On OpenStreetMap</h1>
               <input id='addressalt' autocomplete="street-address" type='text' placeholder='' class="form-control" data-i18n="[placeholder]step2.addressaltplaceholder" />
             </div>
           </div>
-          <div class="form-group col-md-2">
+          <!-- House number -->
+          <div id="hnumbergroup" class="form-group col-md-2">
             <label for="hnumberalt" data-i18n="step2.housenumber"></label>
             <div class="input-group">
               <div class="input-group-prepend">
@@ -132,8 +134,18 @@ <h1 data-i18n="app.title" class="mx-auto text-primary">On OpenStreetMap</h1>
               <input type="text" class="form-control" id="hnumberalt" data-i18n="[placeholder]step2.housenumberplaceholder">
             </div>
           </div>
-
-          <div class="form-group col-md-3">
+          <!-- Place name -->
+          <div id="placenamegroup" class="form-group col-md-5">
+            <label for="placenamealt" data-i18n="step2.placename"></label>
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <span class="input-group-text"><i class="twa twa-cityscape"></i></span>
+              </div>
+              <input type="text" class="form-control" id="placenamealt" data-i18n="[placeholder]step2.placenameplaceholder">
+            </div>
+          </div>
+          <!-- City -->
+          <div id="citygroup" class="form-group col-md-3">
             <label for="city" data-i18n="step2.city"></label>
             <div class="input-group">
               <div class="input-group-prepend">
@@ -142,7 +154,8 @@ <h1 data-i18n="app.title" class="mx-auto text-primary">On OpenStreetMap</h1>
               <input type="text" class="form-control" id="city" data-i18n="[placeholder]step2.cityplaceholder">
             </div>
           </div>
-          <div class="form-group col-md-2">
+          <!-- Postcode -->
+          <div id="postcodegroup" class="form-group col-md-2">
             <label for="postcode" data-i18n="step2.postcode"></label>
             <div class="input-group">
               <div class="input-group-prepend">

js/i18n.js

@@ -19,7 +19,7 @@ const rerender = () => {
     // may have to fix this??
     reloadLists(i18next.resolvedLanguage);
 
-    // these translations won't get re-copied to their current controls 
+    // these translations won't get re-copied to their current controls
     successString = i18n.t('messages.success', {
         escapeInterpolation: false
     });
@@ -31,6 +31,29 @@ const rerender = () => {
     modalText.text = i18n.t('messages.modalTitle');
     modalText.button = i18n.t('messages.modalButton');
 
+    // Move the address fields around to match the localization
+    let parent = $('#hnumbergroup').parent();
+    let hnumber = $('#hnumbergroup').clone();
+    let street = $('#streetgroup').clone();
+    let placename = $('#placenamegroup').clone();
+    let city = $('#citygroup').clone();
+    let postcode = $('#postcodegroup').clone();
+    parent.empty()
+    if (i18next.resolvedLanguage === 'en-US') {
+        // US English should show house number before street name and hide place name
+        parent.append(hnumber);
+        parent.append(street);
+        parent.append(city);
+        parent.append(postcode);
+    } else {
+        // All other languages should show street before house number
+        parent.append(street);
+        parent.append(placename);
+        parent.append(hnumber);
+        parent.append(city);
+        parent.append(postcode);
+    }
+
     $('body').localize();
 };
 
@@ -74,5 +97,5 @@ $(function () {
 
             rerender();
             if (err) return console.error(err);
-        });   
-});   
+        });
+});

js/site.js

@@ -591,6 +591,7 @@ function getNoteBody() {
   if ($("#name").val()) note_body += i18n.t('step2.name') + ": " + $("#name").val() + "\n";
   if ($("#hnumberalt").val()) note_body += "addr:housenumber=" + $("#hnumberalt").val() + "\n";
   if ($("#addressalt").val()) note_body += "addr:street=" + $("#addressalt").val() + "\n";
+  if ($("#placenamealt").val()) note_body += "addr:place=" + $("#placenamealt").val() + "\n";
   if ($("#city").val()) note_body += "addr:city=" + $("#city").val() + "\n";
   if ($("#postcode").val()) note_body += "addr:postcode=" + $("#postcode").val() + "\n";
   if ($("#phone").val()) note_body += i18n.t('step2.phone') + ": " + $("#phone").val() + "\n";

locales/en-GB/translation.json

@@ -23,10 +23,12 @@
     "cataltdesc": "Description",
     "addressalt": "Help us by filling the complete address (housenumber, post code) or improving the previous one",
     "street": "Street",
-    "housenumber": "Housenumber",
+    "placename": "Place Name",
+    "housenumber": "House Number",
     "city": "City",
     "postcode": "Postcode",
     "addressaltplaceholder": "West Main Street",
+    "placenameplaceholder": "Woods Village",
     "housenumberplaceholder": "501",
     "cityplaceholder": "Alexandria",
     "postcodeplaceholder": "50023",

locales/en-US/translation.json

@@ -23,10 +23,12 @@
     "cataltdesc": "Description",
     "addressalt": "Help us by filling the complete address (housenumber, post code) or improving the previous one",
     "street": "Street",
+    "placename": "Place Name",
     "housenumber": "Housenumber",
     "city": "City",
     "postcode": "Zipcode",
     "addressaltplaceholder": "West Main Street",
+    "placenameplaceholder": "Woods Village",
     "housenumberplaceholder": "501",
     "cityplaceholder": "Alexandria",
     "postcodeplaceholder": "50023",

locales/en/translation.json

@@ -24,10 +24,12 @@
     "cataltdesc": "Description",
     "addressalt": "Help us by filling the complete address (housenumber, post code) or improving the previous one",
     "street": "Street",
-    "housenumber": "Housenumber",
+    "placename": "Place Name",
+    "housenumber": "House Number",
     "city": "City",
     "postcode": "Postcode",
     "addressaltplaceholder": "West Main Street",
+    "placenameplaceholder": "Woods Village",
     "housenumberplaceholder": "501",
     "cityplaceholder": "Alexandria",
     "postcodeplaceholder": "50023",

locales/es/translation.json

@@ -22,10 +22,12 @@
     "cataltdesc": "Descripción",
     "addressalt": "Ayúdenos rellenando la dirección completa (número de casa, código postal) o mejorando la anterior",
     "street": "Calle",
+    "placename": "Nombre del lugar",
     "housenumber": "Número de casa",
     "city": "Ciudad",
     "postcode": "Código postal",
     "addressaltplaceholder": "Avenida América, España",
+    "placenameplaceholder": "Pueblo del Bosque",
     "housenumberplaceholder": "501",
     "cityplaceholder": "Alexandria",
     "postcodeplaceholder": "50023",