Unit additional language support

static/js/units-i18n.js

@@ -1,3 +1,5 @@
+import { parseLocale } from './utils';
+
 /**
  * Object containing imperial units
  */
@@ -26,21 +28,11 @@ export const LOCALE_UNIT_MAP = {
   es: {
     US: IMPERIAL,
     default: METRIC
-  },
-  fr: {
-    default: METRIC
-  },
-  de: {
-    default: METRIC
-  },
-  it: {
-    default: METRIC
-  },
-  ja: {
-    default: METRIC
   }
 };
 
+const unitSystemFallback = METRIC;
+
 /**
  * Gets the distance unit for the specified locale
  * @param {string} locale
@@ -57,12 +49,7 @@ export function getDistanceUnit(locale){
  * @returns {Object}
  */
 function getUnitsForLocale(locale) {
-  const language = locale.substring(0,2);
-  // Note: Getting region this way will be invalid if script tags are used in the future.
-  // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl
-  // Optionally, we can use Intl.locale() but we would need to polyfill it for IE11
-  const region = locale.substring(3,5); 
-  const unitSystemFallback = METRIC;
+  const { language, region } = parseLocale(locale);
 
   const isKnownLanguage = (language in LOCALE_UNIT_MAP);
   if (!isKnownLanguage) {

static/js/utils.js

@@ -13,4 +13,56 @@ export function canonicalizeBoolean (value) {
   } else {
     return false;
   }
-}
+}
+
+/**
+ * Parses a locale code into its constituent parts.
+ * Performs case formatting on the result.
+ * 
+ * @param {string} localeCode 
+ * @returns { language: string, modifier?: string, region?: string } 
+ */
+export function parseLocale(localeCode) {
+  const localeCodeSections = localeCode.replace(/-/g, '_').split('_');
+  const language = localeCodeSections[0].toLowerCase();
+  const parseModifierAndRegion = () => {
+    const numSections = localeCodeSections.length;
+    if (numSections === 1) {
+      return {};
+    } else if (numSections === 2 && language === 'zh') {
+      const ambiguous = localeCodeSections[1].toLowerCase();
+      if (['hans', 'hant'].includes(ambiguous)) {
+        return { modifier: ambiguous };
+      } else {
+        return { region: ambiguous };
+      }
+    } else if (numSections === 2) {
+      return { region: localeCodeSections[1] };
+    } else if (numSections === 3) {
+      return {
+        modifier: localeCodeSections[1],
+        region: localeCodeSections[2]
+      };
+    } else if (numSections > 3) {
+      console.error(
+        `Encountered strangely formatted locale "${localeCode}", ` +
+        `with ${numSections} sections.`);
+    }
+  }
+  const capitalizeFirstLetterOnly = raw => {
+    return raw.charAt(0).toUpperCase() + raw.slice(1).toLowerCase();
+  }
+  const parsedLocale = {
+    language,
+    ...parseModifierAndRegion()
+  };
+
+  if (parsedLocale.modifier) {
+    parsedLocale.modifier = capitalizeFirstLetterOnly(parsedLocale.modifier);
+  }
+  if (parsedLocale.region) {
+    parsedLocale.region = parsedLocale.region.toUpperCase();
+  }
+
+  return parsedLocale;
+}

tests/static/js/utils.js

@@ -1,4 +1,4 @@
-import { canonicalizeBoolean } from '../../../static/js/utils';
+import { canonicalizeBoolean, parseLocale } from '../../../static/js/utils';
 
 describe('canonicalizeBoolean works properly', () => {
   it('case-insensitive string representations of "true" return true', () => {
@@ -25,4 +25,41 @@ describe('canonicalizeBoolean works properly', () => {
     const result = canonicalizeBoolean({});
     expect(result).toEqual(false);
   });
-})
+})
+
+describe('parseLocale', () => {
+  it('performs case formatting', () => {
+    expect(parseLocale('Zh-hans-Ch')).toEqual({
+      language: 'zh',
+      modifier: 'Hans',
+      region: 'CH'
+    })
+  });
+
+  it('chinese with modifier only', () => {
+    expect(parseLocale('ZH_HANS')).toEqual({
+      language: 'zh',
+      modifier: 'Hans'
+    })
+  });
+
+  it('chinese with region only', () => {
+    expect(parseLocale('ZH-cH')).toEqual({
+      language: 'zh',
+      region: 'CH'
+    })
+  });
+
+  it('2 section non-chinese locale', () => {
+    expect(parseLocale('FR-freE')).toEqual({
+      language: 'fr',
+      region: 'FREE'
+    });
+  });
+
+  it('simple language', () => {
+    expect(parseLocale('FR')).toEqual({
+      language: 'fr'
+    });
+  });
+});