Use CLDR for a translated language list in the localized name field instead of untranslated wmf site matrix (close #2457)

Translate language names in the community index list (close #4990)

modules/ui/fields/localized.js

@@ -1,8 +1,8 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { select as d3_select, event as d3_event } from 'd3-selection';
 
-import { t } from '../../util/locale';
-import { dataWikipedia } from '../../../data';
+import { t, languageName } from '../../util/locale';
+import { dataLanguages } from '../../../data';
 import { services } from '../../services';
 import { svgIcon } from '../../svg';
 import { tooltip } from '../../util/tooltip';
@@ -10,6 +10,20 @@ import { uiCombobox } from '../combobox';
 import { utilDetect } from '../../util/detect';
 import { utilEditDistance, utilGetSetValue, utilNoAuto, utilRebind } from '../../util';
 
+var languagesArray = [];
+function loadLanguagesArray() {
+    if (languagesArray.length !== 0) return;
+
+    for (var code in dataLanguages) {
+        languagesArray.push({
+            localName: languageName(code, { localOnly: true }),
+            nativeName: dataLanguages[code].nativeName,
+            code: code,
+            label: languageName(code)
+        });
+    }
+}
+
 
 export function uiFieldLocalized(field, context) {
     var dispatch = d3_dispatch('change', 'input');
@@ -92,6 +106,9 @@ export function uiFieldLocalized(field, context) {
 
 
     function localized(selection) {
+        // load if needed
+        loadLanguagesArray();
+
         _selection = selection;
         calcLocked();
         var isLocked = field.locked();
@@ -340,12 +357,13 @@ export function uiFieldLocalized(field, context) {
     function changeLang(d) {
         var lang = utilGetSetValue(d3_select(this));
         var t = {};
-        var language = dataWikipedia.find(function(d) {
-            return d[0].toLowerCase() === lang.toLowerCase() ||
-                d[1].toLowerCase() === lang.toLowerCase();
+        var language = languagesArray.find(function(d) {
+            return (d.localName && d.localName.toLowerCase() === lang.toLowerCase()) ||
+                d.label.toLowerCase() === lang.toLowerCase() ||
+                (d.nativeName && d.nativeName.toLowerCase() === lang.toLowerCase());
         });
 
-        if (language) lang = language[2];
+        if (language) lang = language.code;
 
         if (d.lang && d.lang !== lang) {
             t[key(d.lang)] = undefined;
@@ -378,12 +396,13 @@ export function uiFieldLocalized(field, context) {
     function fetchLanguages(value, cb) {
         var v = value.toLowerCase();
 
-        cb(dataWikipedia.filter(function(d) {
-            return d[0].toLowerCase().indexOf(v) >= 0 ||
-            d[1].toLowerCase().indexOf(v) >= 0 ||
-            d[2].toLowerCase().indexOf(v) >= 0;
+        cb(languagesArray.filter(function(d) {
+            return d.label.toLowerCase().indexOf(v) >= 0 ||
+                (d.localName && d.localName.toLowerCase().indexOf(v) >= 0) ||
+                (d.nativeName && d.nativeName.toLowerCase().indexOf(v) >= 0) ||
+                d.code.toLowerCase().indexOf(v) >= 0;
         }).map(function(d) {
-            return { value: d[1] };
+            return { value: d.label };
         }));
     }
 
@@ -482,8 +501,7 @@ export function uiFieldLocalized(field, context) {
         entries.order();
 
         utilGetSetValue(entries.select('.localized-lang'), function(d) {
-            var lang = dataWikipedia.find(function(lang) { return lang[2] === d.lang; });
-            return lang ? lang[1] : d.lang;
+            return languageName(d.lang);
         });
 
         utilGetSetValue(entries.select('.localized-value'),

modules/ui/success.js

@@ -1,7 +1,7 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { select as d3_select } from 'd3-selection';
 
-import { t } from '../util/locale';
+import { t, languageName } from '../util/locale';
 import { data } from '../../data';
 import { svgIcon } from '../svg/icon';
 import { uiDisclosure } from '../ui/disclosure';
@@ -296,10 +296,14 @@ export function uiSuccess(context) {
             }
 
             if (d.languageCodes && d.languageCodes.length) {
+                var languageList = d.languageCodes.map(function(code) {
+                    return languageName(code);
+                }).join(', ');
+
                 moreEnter
                     .append('div')
                     .attr('class', 'community-languages')
-                    .text(t('success.languages', { languages: d.languageCodes.join(', ') }));
+                    .text(t('success.languages', { languages: languageList }));
             }
         }
 

modules/util/detect.js

@@ -1,4 +1,4 @@
-import { currentLocale, setTextDirection } from './locale';
+import { currentLocale, setTextDirection, setLanguageNames } from './locale';
 import { dataLocales } from '../../data/index';
 import { utilStringQs } from './util';
 
@@ -97,13 +97,14 @@ export function utilDetect(force) {
     }
 
     // detect text direction
-    var lang = dataLocales[detected.locale];
+    var lang = dataLocales[detected.locale] || dataLocales[detected.language];
     if ((lang && lang.rtl) || (q.rtl === 'true')) {
         detected.textDirection = 'rtl';
     } else {
         detected.textDirection = 'ltr';
     }
     setTextDirection(detected.textDirection);
+    setLanguageNames((lang && lang.languageNames) || {});
 
     // detect host
     var loc = window.top.location;

modules/util/locale.js

@@ -1,7 +1,10 @@
+import { dataLanguages } from '../../../data';
+
 var translations = Object.create(null);
 
 export var currentLocale = 'en';
 export var textDirection = 'ltr';
+export var languageNames = {};
 
 export function setLocale(val) {
     if (translations[val] !== undefined) {
@@ -73,3 +76,29 @@ export function t(s, o, loc) {
 export function setTextDirection(dir) {
     textDirection = dir;
 }
+
+export function setLanguageNames(obj) {
+    languageNames = obj;
+}
+
+export function languageName(code, options = {}) {
+    if (languageNames[code]) { // name in locale langauge
+        return languageNames[code];
+    }
+    // sometimes we only want the local name
+    if (options.localOnly) return null;
+
+    if (dataLanguages[code]) { // language info
+        if (dataLanguages[code].nativeName) { // name in native language
+            return t('translate.language_and_code', { language: dataLanguages[code].nativeName, code: code });
+        } else if (dataLanguages[code].base && dataLanguages[code].script) {
+            var base = dataLanguages[code].base;
+            if (languageNames[base]) { // base name in locale langauge
+                return t('translate.language_and_code', { language: languageNames[base], code: code });
+            } else if (dataLanguages[code] && dataLanguages[code].nativeName) {
+                return t('translate.language_and_code', { language: dataLanguages[base].nativeName, code: code });
+            }
+        }
+    }
+    return code; // if not found, use the code
+}