modules/core/localizer.js (258 lines of code) (raw):

import { utilArrayUniq, utilStringQs } from '@id-sdk/util'; import { fileFetcher } from './file_fetcher'; import { utilDetect } from '../util/detect'; let _mainLocalizer = coreLocalizer(); // singleton let _t = _mainLocalizer.t; export { _mainLocalizer as localizer, // export `t` function for ease-of-use _t as t }; // // coreLocalizer manages language and locale parameters including translated strings // export function coreLocalizer() { let localizer = {}; let _dataLanguages = {}; // `_dataLocales` is an object containing all _supported_ locale codes -> language info. // * `rtl` - right-to-left or left-to-right text direction // * `pct` - the percent of strings translated; 1 = 100%, full coverage // // { // en: { rtl: false, pct: {…} }, // de: { rtl: false, pct: {…} }, // … // } let _dataLocales = {}; // `localeStrings` is an object containing all _loaded_ locale codes -> string data. // { // en: { icons: {…}, toolbar: {…}, modes: {…}, operations: {…}, … }, // de: { icons: {…}, toolbar: {…}, modes: {…}, operations: {…}, … }, // … // } let _localeStrings = {}; // the current locale let _localeCode = 'en-US'; // `_localeCodes` must contain `_localeCode` first, optionally followed by fallbacks let _localeCodes = ['en-US', 'en']; let _languageCode = 'en'; let _textDirection = 'ltr'; let _usesMetric = false; let _languageNames = {}; let _scriptNames = {}; // getters for the current locale parameters localizer.localeCode = () => _localeCode; localizer.localeCodes = () => _localeCodes; localizer.languageCode = () => _languageCode; localizer.textDirection = () => _textDirection; localizer.usesMetric = () => _usesMetric; localizer.languageNames = () => _languageNames; localizer.scriptNames = () => _scriptNames; // The client app may want to manually set the locale, regardless of the // settings provided by the browser let _preferredLocaleCodes = []; localizer.preferredLocaleCodes = function(codes) { if (!arguments.length) return _preferredLocaleCodes; if (typeof codes === 'string') { // be generous and accept delimited strings as input _preferredLocaleCodes = codes.split(/,|;| /gi).filter(Boolean); } else { _preferredLocaleCodes = codes; } return localizer; }; var _loadPromise; localizer.ensureLoaded = () => { if (_loadPromise) return _loadPromise; let filesToFetch = [ 'languages', // load the list of languages 'locales' // load the list of supported locales ]; const localeDirs = { general: 'locales', tagging: 'https://cdn.jsdelivr.net/npm/@openstreetmap/id-tagging-schema@3/dist/translations' }; let fileMap = fileFetcher.fileMap(); for (let scopeId in localeDirs) { const key = `locales_index_${scopeId}`; if (!fileMap[key]) { fileMap[key] = localeDirs[scopeId] + '/index.min.json'; } filesToFetch.push(key); } return _loadPromise = Promise.all(filesToFetch.map(key => fileFetcher.get(key))) .then(results => { _dataLanguages = results[0]; _dataLocales = results[1]; let indexes = results.slice(2); let requestedLocales = (_preferredLocaleCodes || []) .concat(utilDetect().browserLocales) // List of locales preferred by the browser in priority order. .concat(['en']); // fallback to English since it's the only guaranteed complete language _localeCodes = localesToUseFrom(requestedLocales); _localeCode = _localeCodes[0]; // Run iD in the highest-priority locale; the rest are fallbacks let loadStringsPromises = []; indexes.forEach((index, i) => { // // Will always return the index for `en` if nothing else // const fullCoverageIndex = _localeCodes.findIndex(function(locale) { // return index[locale] && index[locale].pct === 1; // }); // // We only need to load locales up until we find one with full coverage // RapiD note: // We always need `en` because it contains RapiD strings that are not localized to other languages. // This means we can't assume that a language with 100% coverage is an alternative for `en`. const fullCoverageIndex = _localeCodes.length - 1; // load them all _localeCodes.slice(0, fullCoverageIndex + 1).forEach(function(code) { let scopeId = Object.keys(localeDirs)[i]; let directory = Object.values(localeDirs)[i]; if (index[code]) loadStringsPromises.push(localizer.loadLocale(code, scopeId, directory)); }); }); return Promise.all(loadStringsPromises); }) .then(() => { updateForCurrentLocale(); }) .catch(err => console.error(err)); // eslint-disable-line }; // Returns the locales from `requestedLocales` supported by iD that we should use function localesToUseFrom(requestedLocales) { let supportedLocales = _dataLocales; let toUse = []; for (let i in requestedLocales) { let locale = requestedLocales[i]; if (supportedLocales[locale]) toUse.push(locale); if (locale.includes('-')) { // Full locale ('es-ES'), add fallback to the base ('es') let langPart = locale.split('-')[0]; if (supportedLocales[langPart]) toUse.push(langPart); } } // remove duplicates return utilArrayUniq(toUse); } function updateForCurrentLocale() { if (!_localeCode) return; _languageCode = _localeCode.split('-')[0]; const currentData = _dataLocales[_localeCode] || _dataLocales[_languageCode]; const hash = utilStringQs(window.location.hash); if (hash.rtl === 'true') { _textDirection = 'rtl'; } else if (hash.rtl === 'false') { _textDirection = 'ltr'; } else { _textDirection = currentData && currentData.rtl ? 'rtl' : 'ltr'; } let locale = _localeCode; if (locale.toLowerCase() === 'en-us') locale = 'en'; _languageNames = _localeStrings.general[locale].languageNames; _scriptNames = _localeStrings.general[locale].scriptNames; _usesMetric = _localeCode.slice(-3).toLowerCase() !== '-us'; } /* Locales */ // Returns a Promise to load the strings for the requested locale localizer.loadLocale = (locale, scopeId, directory) => { // US English is the default if (locale.toLowerCase() === 'en-us') locale = 'en'; if (_localeStrings[scopeId] && _localeStrings[scopeId][locale]) { // already loaded return Promise.resolve(locale); } let fileMap = fileFetcher.fileMap(); const key = `locale_${scopeId}_${locale}`; if (!fileMap[key]) { fileMap[key] = `${directory}/${locale}.min.json`; } return fileFetcher.get(key) .then(d => { if (!_localeStrings[scopeId]) _localeStrings[scopeId] = {}; _localeStrings[scopeId][locale] = d[locale]; return locale; }); }; localizer.pluralRule = function(number) { return pluralRule(number, _localeCode); }; // Returns the plural rule for the given `number` with the given `localeCode`. // One of: `zero`, `one`, `two`, `few`, `many`, `other` function pluralRule(number, localeCode) { // modern browsers have this functionality built-in const rules = 'Intl' in window && Intl.PluralRules && new Intl.PluralRules(localeCode); if (rules) { return rules.select(number); } // fallback to basic one/other, as in English if (number === 1) return 'one'; return 'other'; } /** * Try to find that string in `locale` or the current `_localeCode` matching * the given `stringId`. If no string can be found in the requested locale, * we'll recurse down all the `_localeCodes` until one is found. * * @param {string} stringId string identifier * @param {object?} replacements token replacements and default string * @param {string?} locale locale to use (defaults to currentLocale) * @return {string?} localized string */ localizer.tInfo = function(origStringId, replacements, locale) { let stringId = origStringId.trim(); let scopeId = 'general'; if (stringId[0] === '_') { let split = stringId.split('.'); scopeId = split[0].slice(1); stringId = split.slice(1).join('.'); } locale = locale || _localeCode; let path = stringId .split('.') .map(s => s.replace(/<TX_DOT>/g, '.')) .reverse(); let stringsKey = locale; // US English is the default if (stringsKey.toLowerCase() === 'en-us') stringsKey = 'en'; let result = _localeStrings && _localeStrings[scopeId] && _localeStrings[scopeId][stringsKey]; while (result !== undefined && path.length) { result = result[path.pop()]; } if (result !== undefined) { if (replacements) { if (typeof result === 'object' && Object.keys(result).length) { // If plural forms are provided, dig one level deeper based on the // first numeric token replacement provided. const number = Object.values(replacements).find(function(value) { return typeof value === 'number'; }); if (number !== undefined) { const rule = pluralRule(number, locale); if (result[rule]) { result = result[rule]; } else { // We're pretty sure this should be a plural but no string // could be found for the given rule. Just pick the first // string and hope it makes sense. result = Object.values(result)[0]; } } } if (typeof result === 'string') { for (let key in replacements) { let value = replacements[key]; if (typeof value === 'number') { if (value.toLocaleString) { // format numbers for the locale value = value.toLocaleString(locale, { style: 'decimal', useGrouping: true, minimumFractionDigits: 0 }); } else { value = value.toString(); } } const token = `{${key}}`; const regex = new RegExp(token, 'g'); result = result.replace(regex, value); } } } if (typeof result === 'string') { // found a localized string! return { text: result, locale: locale }; } } // no localized string found... // attempt to fallback to a lower-priority language let index = _localeCodes.indexOf(locale); if (index >= 0 && index < _localeCodes.length - 1) { // eventually this will be 'en' or another locale with 100% coverage let fallback = _localeCodes[index + 1]; return localizer.tInfo(origStringId, replacements, fallback); } if (replacements && 'default' in replacements) { // Fallback to a default value if one is specified in `replacements` return { text: replacements.default, locale: null }; } const missing = `Missing ${locale} translation: ${origStringId}`; if (typeof console !== 'undefined') console.error(missing); // eslint-disable-line return { text: missing, locale: 'en' }; }; localizer.hasTextForStringId = function(stringId) { return !!localizer.tInfo(stringId, { default: 'nothing found'}).locale; }; // Returns only the localized text, discarding the locale info localizer.t = function(stringId, replacements, locale) { return localizer.tInfo(stringId, replacements, locale).text; }; // Returns the localized text wrapped in an HTML element encoding the locale info localizer.t.html = function(stringId, replacements, locale) { const info = localizer.tInfo(stringId, replacements, locale); // text may be empty or undefined if `replacements.default` is return info.text ? localizer.htmlForLocalizedText(info.text, info.locale) : ''; }; localizer.htmlForLocalizedText = function(text, localeCode) { return `<span class="localized-text" lang="${localeCode || 'unknown'}">${text}</span>`; }; localizer.languageName = (code, options) => { if (_languageNames[code]) { // name in locale language // e.g. "German" return _languageNames[code]; } // sometimes we only want the local name if (options && options.localOnly) return null; const langInfo = _dataLanguages[code]; if (langInfo) { if (langInfo.nativeName) { // name in native language // e.g. "Deutsch (de)" return localizer.t('translate.language_and_code', { language: langInfo.nativeName, code: code }); } else if (langInfo.base && langInfo.script) { const base = langInfo.base; // the code of the language this is based on if (_languageNames[base]) { // base language name in locale language const scriptCode = langInfo.script; const script = _scriptNames[scriptCode] || scriptCode; // e.g. "Serbian (Cyrillic)" return localizer.t('translate.language_and_code', { language: _languageNames[base], code: script }); } else if (_dataLanguages[base] && _dataLanguages[base].nativeName) { // e.g. "српски (sr-Cyrl)" return localizer.t('translate.language_and_code', { language: _dataLanguages[base].nativeName, code: code }); } } } return code; // if not found, use the code }; return localizer; }