Merge pull request #201 from mapbox/localize-placeholder

Localize placeholder based on first language

CHANGELOG.md

@@ -1,5 +1,5 @@
 ## Unreleased
-
+- Localize placeholder based on language set in constructor options [#150](https://github.com/mapbox/mapbox-gl-geocoder/issues/150)
 - `trackProximity` turned on by default [#195](https://github.com/mapbox/mapbox-gl-geocoder/issues/195)
 - Bump suggestions to v1.3.4
 

lib/index.js

@@ -8,6 +8,8 @@ var exceptions = require('./exceptions');
 var MapboxClient = require('@mapbox/mapbox-sdk');
 var mbxGeocoder = require('@mapbox/mapbox-sdk/services/geocoding');
 var MapboxEventManager = require('./events');
+var localization = require('./localization');
+var subtag = require('subtag');
 var geocoderService;
 
 /**
@@ -56,7 +58,6 @@ function MapboxGeocoder(options) {
 
 MapboxGeocoder.prototype = {
   options: {
-    placeholder: 'Search',
     zoom: 16,
     flyTo: true,
     trackProximity: true,
@@ -92,7 +93,7 @@ MapboxGeocoder.prototype = {
 
     this._inputEl = document.createElement('input');
     this._inputEl.type = 'text';
-    this._inputEl.placeholder = this.options.placeholder;
+    this._inputEl.placeholder = this._getPlaceholderText();
 
     this._inputEl.addEventListener('keydown', this._onKeyDown);
     this._inputEl.addEventListener('change', this._onChange);
@@ -388,6 +389,27 @@ MapboxGeocoder.prototype = {
     return this.options.proximity;
   },
 
+  /**
+   * Get the text to use as the search bar placeholder
+   * 
+   * If placeholder is provided in options, then use options.placeholder
+   * Otherwise, if language is provided in options, then use the localized string of the first language if available
+   * Otherwise use the default
+   * 
+   * @returns {String} the value to use as the search bar placeholder
+   * @private
+   */
+  _getPlaceholderText: function(){
+    if (this.options.placeholder) return this.options.placeholder;
+    if (this.options.language){
+      var firstLanguage = this.options.language.split(",")[0];
+      var language = subtag.language(firstLanguage);
+      var localizedValue = localization.placeholder[language];
+      if (localizedValue)  return localizedValue;
+    }
+    return 'Search';
+  },
+
   /**
    * Subscribe to events that happen within the plugin.
    * @param {String} type name of event. Available events and the data passed into their respective event objects are:

lib/localization.js

@@ -0,0 +1,35 @@
+'use strict';
+
+/**
+ * Localized values for the placeholder string
+ * 
+ * @private
+ */
+var placeholder = {
+    // list drawn from https://docs.mapbox.com/api/search/#language-coverage
+  'de': 'Suche', // german
+  'it': 'Ricerca', //italian
+  'en': 'Search', // english
+  'nl': 'Zoeken', //dutch
+  'fr': 'Chercher',  //french
+  'ca': 'Cerca', //catalan
+  'he': 'לחפש', //hebrew
+  'ja': 'サーチ',  //japanese
+  'lv': 'Meklēt', //latvian
+  'pt': 'Procurar', //portuguese 
+  'sr': 'Претрага', //serbian
+  'zh': '搜索', //chinese-simplified
+  'cs': 'Vyhledávání', //czech
+  'hu': 'Keresés', //hungarian
+  'ka': 'ძიება', // georgian
+  'nb': 'Søke', //norwegian
+  'sk': 'Vyhľadávanie', //slovak
+  'th': 'ค้นหา', //thai
+  'fi': 'Hae',//finnish
+  'is': 'Leita',//icelandic
+  'ko': '수색',//korean
+  'pl':  'Szukaj', //polish
+  'sl': 'Iskanje' //slovenian
+}
+
+module.exports = {placeholder: placeholder};

package.json

@@ -55,6 +55,7 @@
     "lodash.debounce": "^4.0.6",
     "request": "^2.88.0",
     "sinon": "^7.2.3",
+    "subtag": "^0.5.0",
     "suggestions": "^1.3.4",
     "xtend": "^4.0.1"
   }

test/test.geocoder.js

@@ -6,6 +6,7 @@ var mapboxgl = require('mapbox-gl');
 var once = require('lodash.once');
 var mapboxEvents = require('./../lib/events');
 var sinon = require('sinon');
+var localization = require('./../lib/localization');
 
 mapboxgl.accessToken = process.env.MapboxAccessToken;
 
@@ -442,5 +443,13 @@ test('geocoder', function(tt) {
     );
   });
 
+  tt.test('placeholder localization', (t)=>{
+    var ensureLanguages = ['de', 'en', 'fr', 'it', 'nl', 'ca', 'cs', 'fr', 'he', 'hu', 'is', 'ja', 'ka', 'ko', 'lv', 'ka', 'ko', 'lv', 'nb', 'pl', 'pt', 'sk', 'sl', 'sr', 'th', 'zh'];
+    ensureLanguages.forEach(function(languageTag){
+      t.equals(typeof(localization.placeholder[languageTag]), 'string', 'localized placeholder value is present for language=' + languageTag);
+    });
+    t.end();
+  });
+
   tt.end();
 });

test/test.ui.js

@@ -84,5 +84,29 @@ test('Geocoder#inputControl', function(tt) {
     t.end();
   });
 
+  tt.test('placeholder language localization', function(t){
+    t.plan(1);
+    setup({language: 'de-DE'});
+    t.equal(
+      map.getContainer().querySelector('.mapboxgl-ctrl-geocoder input')
+        .placeholder,
+      'Suche',
+      'placeholder is localized based on language'
+    );
+    t.end();
+  });
+
+  tt.test('placeholder language localization with more than one language specified', function(t){
+    t.plan(1);
+    setup({language: 'de-DE,lv'});
+    t.equal(
+      map.getContainer().querySelector('.mapboxgl-ctrl-geocoder input')
+        .placeholder,
+      'Suche',
+      'placeholder is localized based on language'
+    );
+    t.end();
+  })
+
   tt.end();
 });