commit da8b98d09089e32d53573a1cabcb450aa290b4c8 Author: Cecylia Bocovich <cohosh@torproject.org> Date: Tue Oct 15 11:00:45 2019 -0400 Include language name with along with code Use npm cldr package to get the language name that corresponds to the country code for the language switcher --- proxy/make.js | 30 +++++++++++++++++++++++++++++- proxy/package.json | 1 + proxy/static/index.html | 1 - proxy/static/index.js | 13 +++++++------ 4 files changed, 37 insertions(+), 8 deletions(-) diff --git a/proxy/make.js b/proxy/make.js index defcf1f..c7be058 100755 --- a/proxy/make.js +++ b/proxy/make.js @@ -4,6 +4,7 @@ var { writeFileSync, readdirSync, statSync } = require('fs'); var { execSync, spawn } = require('child_process'); +var cldr = require('cldr'); // All files required. var FILES = [ @@ -49,6 +50,20 @@ var copyTranslations = function(outDir) { execSync(`cp -rf translation/* ${outDir}/_locales/`); }; +var getDisplayName = function(locale) { + var code = locale.split("_")[0]; + try { + var name = cldr.extractLanguageDisplayNames(code)[code]; + } + catch(e) { + return ''; + } + if (name === undefined) { + return ''; + } + return name; +} + var availableLangs = function() { let out = "const availableLangs = new Set([\n"; let dirs = readdirSync('translation').filter((f) => { @@ -63,6 +78,19 @@ var availableLangs = function() { return out; }; +var translatedLangs = function() { + let out = "const availableLangs = {\n"; + let dirs = readdirSync('translation').filter((f) => { + const s = statSync(`translation/${f}`); + return s.isDirectory(); + }); + dirs.push('en_US'); + dirs.sort(); + dirs = dirs.map(d => `'${d}': {"name": '${getDisplayName(d)}'},`); + out += dirs.join("\n"); + out += "\n};\n\n"; + return out; +}; var tasks = new Map(); var task = function(key, msg, func) { @@ -94,7 +122,7 @@ task('build', 'build the snowflake proxy', function() { execSync(`cp -r ${STATIC}/ ${outDir}/`); copyTranslations(outDir); concatJS(outDir, 'badge', 'embed.js', availableLangs()); - writeFileSync(`${outDir}/index.js`, availableLangs(), 'utf8'); + writeFileSync(`${outDir}/index.js`, translatedLangs(), 'utf8'); execSync(`cat ${STATIC}/index.js >> ${outDir}/index.js`); console.log('Snowflake prepared.'); }); diff --git a/proxy/package.json b/proxy/package.json index d070c5b..6946691 100644 --- a/proxy/package.json +++ b/proxy/package.json @@ -26,6 +26,7 @@ "jasmine": "2.5.2" }, "dependencies": { + "cldr": "^5.4.1", "wrtc": "^0.0.61", "ws": "^3.3.1", "xmlhttprequest": "^1.8.0" diff --git a/proxy/static/index.html b/proxy/static/index.html index 02f1c34..32cdcde 100644 --- a/proxy/static/index.html +++ b/proxy/static/index.html @@ -20,7 +20,6 @@ <div class="btn-group dropdown pull-right"> <button id="language-switcher" type="button" class="btn btn-dark bg-dark dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - en_US </button> <div id="supported-languages" class="dropdown-menu"> </div> diff --git a/proxy/static/index.js b/proxy/static/index.js index 1acdd5f..80a3aeb 100644 --- a/proxy/static/index.js +++ b/proxy/static/index.js @@ -29,11 +29,11 @@ var getLang = function() { lang = override_lang; } - if (availableLangs.has(lang)) { + if (Object.prototype.hasOwnProperty.call(availableLangs, lang)) { return lang; } lang = lang.split('_')[0]; - if (availableLangs.has(lang)) { + if (Object.prototype.hasOwnProperty.call(availableLangs, lang)) { return lang; } return defaultLang; @@ -64,7 +64,8 @@ fetch(`./_locales/${getLang()}/messages.json`) }) .then((json) => { var language = document.getElementById('language-switcher'); - language.innerText = `${getLang()}` + var lang = `${getLang()}` + language.innerText = availableLangs[lang].name + ' (' + lang + ')'; var messages = new Messages(json); fill(document.body, (m) => { return messages.getMessage(m); @@ -72,11 +73,11 @@ fetch(`./_locales/${getLang()}/messages.json`) }); // Populate language switcher list -availableLangs.forEach(function (lang) { +for (var lang in availableLangs) { var languageList = document.getElementById('supported-languages'); var link = document.createElement('a'); link.setAttribute('href', '?lang='+lang); link.setAttribute('class', "dropdown-item"); - link.innerText = lang; + link.innerText = availableLangs[lang].name + ' (' + lang + ')'; languageList.lastChild.after(link); -}); +}