ayanova/devdocs/todo.txt

@@ -49,7 +49,14 @@ SHELL / NAV / MENUS / LAYOUT
 
 TODO: LOCALIZATION
 	- ACTIONS
+		- Move localization methods to the LOCALE object and then call it from the filters 
+		- Browser languages in locale:
+			- some functions are better called with the full array of browser languages because sometimes it needs to use a fallback
+			- Only the date picker seems to have an issue with handling the full array of languages, the javascript number and date formatters do not and expect a full range			
+			- Need a manual override setting for locale tag "en-US" etc as some browsers seem to be shitty at it
+		- CURRENCY code, need to be able to set currency as a user option, no way to deduce it except maybe a default through deduction of locale
 		- AM PM or 24 hour time sb a setting in locale
+		
 		- TRY AN ALTERNATE LANGUAGE IN VUETIFY USING THEIR METHOD, SEE WHATS INVOLVED
 		- Find out how to override the default locale for vuetify to set specific items to our localized text version
 			- this saves having to use a whole locale for just the calendar etc

ayanova/src/api/locale.js

@@ -194,54 +194,22 @@ export default {
     return ret;
   },
   ////////////////////////////////////////////////////////
-  // attempt to determine user's preferred first browser language setting
-  // https://stackoverflow.com/a/46514247/8939
+  // attempt to determine user's preferred language settings
+  // As of Jan 2020 all major browsers support
+  //  navigator.languages
+  // but some use navigator.language (singular) to denote UI language preference
+  // not browsing language preference
+  // so the ideal way to do this is to use navigator.languages[0] for the preferred language
+  // and ignore the singular property since we don't care about the actual browser UI language
+  // only how the user expects to see the page itself
   //
-  //
-  getFirstBrowserLanguage() {
-    var nav = window.navigator,
-      browserLanguagePropertyKeys = [
-        "language",
-        "browserLanguage",
-        "systemLanguage",
-        "userLanguage"
-      ],
-      i,
-      language,
-      len,
-      shortLanguage = null;
-
-    // support for HTML 5.1 "navigator.languages"
-    if (Array.isArray(nav.languages)) {
-      for (i = 0; i < nav.languages.length; i++) {
-        language = nav.languages[i];
-        len = language.length;
-        if (!shortLanguage && len) {
-          shortLanguage = language;
-        }
-        if (language && len > 2) {
-          return language;
-        }
-      }
-    }
-
-    // support for other well known properties in browsers
-    for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
-      language = nav[browserLanguagePropertyKeys[i]];
-      //skip this loop iteration if property is null/undefined.  IE11 fix.
-      if (language == null) {
-        continue;
-      }
-      len = language.length;
-      if (!shortLanguage && len) {
-        shortLanguage = language;
-      }
-      if (language && len > 2) {
-        return language;
-      }
-    }
-
-    return shortLanguage;
+  // also for sake of future proofing and edge cases need to have it be manually settable as well
+  //  ############### TODO: modify both of these to put the user's manual override first in line (if there is one)
+  getBrowserLanguages() {
+    return window.navigator.languages;
+  },
+  getBrowserFirstLanguage() {
+    return window.navigator.languages[0];
   },
   ////////////////////////////////////////////////////////
   // dynamically set the vuetify language elements from

ayanova/src/main.js

@@ -159,7 +159,7 @@ Vue.filter(
       .toDate();
 
     return localizedDate.toLocaleString(
-      window.$gz.locale.getFirstBrowserLanguage(),
+      window.$gz.locale.getBrowserLanguages(),
       {
         dateStyle: "short",
         timeStyle: "short",
@@ -181,7 +181,7 @@ Vue.filter("shortdateonlylocalized", function vueFilterShortDateOnlyLocalized(
     .toDate();
 
   return localizedDate.toLocaleDateString(
-    window.$gz.locale.getFirstBrowserLanguage(),
+    window.$gz.locale.getBrowserLanguages(),
     {
       dateStyle: "short"
     }
@@ -202,7 +202,7 @@ Vue.filter("shorttimeonlylocalized", function vueFilterShortTimeOnlyLocalized(
     .toDate();
 
   return localizedDate.toLocaleTimeString(
-    window.$gz.locale.getFirstBrowserLanguage(),
+    window.$gz.locale.getBrowserLanguages(),
     {
       timeStyle: "short",
       hour12: locale.format().hour12
@@ -211,10 +211,10 @@ Vue.filter("shorttimeonlylocalized", function vueFilterShortTimeOnlyLocalized(
 });
 
 //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#Browser_compatibility
-TODO: Need to specify currency from list of standard values and add to locale settings rather than using symbol I guess
+//https://www.currency-iso.org/en/home.html
 Vue.filter("currency", function vueFilterCurrency(value) {
   if (!value) return "";
-  return value.toLocaleString(window.$gz.locale.getFirstBrowserLanguage(), {
+  return value.toLocaleString(window.$gz.locale.getBrowserLanguages(), {
     style: "currency",
     currency: "EUR"
   });