diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt index d63a9847..016c7ad0 100644 --- a/ayanova/devdocs/todo.txt +++ b/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 diff --git a/ayanova/src/api/locale.js b/ayanova/src/api/locale.js index be81e4be..c930eab0 100644 --- a/ayanova/src/api/locale.js +++ b/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 diff --git a/ayanova/src/main.js b/ayanova/src/main.js index 027067bb..a2bbf701 100644 --- a/ayanova/src/main.js +++ b/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" });