diff --git a/apps/locale/locale.html b/apps/locale/locale.html index 8ec818aae..727437da3 100644 --- a/apps/locale/locale.html +++ b/apps/locale/locale.html @@ -3,8 +3,9 @@ @@ -15,13 +16,15 @@
- + +

- + +
+

-

Then click

@@ -125,15 +128,14 @@ exports = { name : "system", currencySym:"£", }); - function createLocaleModule(lang) { + function createLocaleModule() { console.log(`Language ${lang}`); const translations = document.getElementById('translations').checked; console.log(`Translations: ${translations}`); - const locale = locales[lang]; if (!locale) { - alert(`Language ${lang} not found!`); + alert(`Locale not set for language ${lang}!`); return; } @@ -185,16 +187,10 @@ exports = { name : "system", currencySym:"£", "%P": `d.getHours()<12?${js(locale.ampm[0].toLowerCase())}:${js(locale.ampm[1].toLowerCase())}` }; - var timeN = locale.timePattern[0]; - var timeS = locale.timePattern[1]; - var dateN = locale.datePattern[0]; - var dateS = locale.datePattern[1]; - Object.keys(replaceList).forEach(e => { - timeN = timeN.replace(e,"${"+replaceList[e]+"}"); - timeS = timeS.replace(e,"${"+replaceList[e]+"}"); - dateN = dateN.replace(e,"${"+replaceList[e]+"}"); - dateS = dateS.replace(e,"${"+replaceList[e]+"}"); - }); + var timeN = patternToCode(locale.timePattern[0]); + var timeS = patternToCode(locale.timePattern[1]); + var dateN = patternToCode(locale.datePattern[0]); + var dateS = patternToCode(locale.datePattern[1]); var temperature = locale.temperature=='°F' ? '(t*9/5)+32' : 't'; function getLocaleModule(isLocal) { @@ -246,22 +242,121 @@ exports = { eval(getLocaleModule(true)); console.log("exports:",exports); + function patternToCode(pattern){ + for(const symbol of Object.keys(replaceList)){ + pattern = pattern.replaceAll(symbol,"${"+replaceList[symbol]+"}"); + } + return pattern; + } + function patternToOutput(pattern){ + const code = patternToCode(pattern); + const result = eval(`let d = new Date();\`${code}\``); + return result; + } + function dataList(id, options, formatter){ + let output = ``; + for(const option of options){ + const formatted = formatter?.(option) || option; + output+=`\n` + } + output += "\n"; + return output; + } + var date = new Date(); - document.getElementById("examples").innerHTML = ` + // TODO: This warning should have a link to an article explaining how the formats work, and how long they are allowed to be + document.getElementById("customize-warning").innerText = customizeLocale ? "⚠️ If you make the formats too long, some apps will not work!" : ""; + document.getElementById("examples-short-long").innerHTML = ` ShortLong Day${exports.dow(date,1)}${exports.dow(date,0)} Month${exports.month(date,1)}${exports.month(date,0)} -Date${exports.date(date,1)}${exports.date(date,0)} -Time${exports.time(date,1)}${exports.time(date,0)} -Number${exports.number(12.3456789)}${exports.number(12.3456789,4)} -Distance${exports.distance(12.34,0)}${exports.distance(12345.6,1)} -Speed${exports.speed(123)} -Temperature${exports.temp(12,0)} +Date + ${exports.date(date,1)} + ${exports.date(date,0)} + +${customizeLocale ? `Date format + + + ${dataList("short-date-patterns", [locale?.datePattern["1"], "%-d.%-m.%y", "%-d/%-m/%y", "%d/%m/%Y"], patternToOutput)} + + + + ${dataList("long-date-patterns", [locale?.datePattern["0"], "%-d. %b %Y", "%b %d, %Y"], patternToOutput)} + + ` + : ""} +Time + ${exports.time(date,1)} + ${exports.time(date,0)} + +${customizeLocale ? `Time format + + + ${dataList("short-time-patterns", [ "%HH.%MM", "%HH:%MM"], patternToOutput)} + + + + ${dataList("long-time-patterns", [locale?.timePattern["0"], "%HH.%MM.%SS", "%HH:%MM:%SS"], patternToOutput)} + + ` + : ""} + Number${exports.number(12.3456789)}${exports.number(12.3456789,4)} + Distance${exports.distance(12.34,0)}${exports.distance(12345.6,1)} `; +document.getElementById("examples").innerHTML = ` +Meridian + ${exports.meridian(new Date(0))} / + ${exports.meridian(new Date(43200000))} + +${customizeLocale ? `Meridian names + + + ${dataList("meridian-ams", [locale?.ampm["0"], "AM"])} + + + + ${dataList("meridian-pms", [locale?.ampm["1"], "PM"])} + + ` + : ""} +Speed${exports.speed(123)} +Temperature${exports.temp(12,0)} +`; + + if(customizeLocale){ + document.querySelector("input#short-date-pattern").addEventListener("input", event => { + locale.datePattern["1"] = event.target.value; + document.querySelector("td#short-date-pattern-output").innerText = patternToOutput(event.target.value); + }); + document.querySelector("input#long-date-pattern").addEventListener("input", event => { + locale.datePattern["0"] = event.target.value; + document.querySelector("td#long-date-pattern-output").innerText = patternToOutput(event.target.value); + }); + document.querySelector("input#short-time-pattern").addEventListener("input", event => { + locale.timePattern["1"] = event.target.value; + document.querySelector("td#short-time-pattern-output").innerText = patternToOutput(event.target.value); + }); + document.querySelector("input#long-time-pattern").addEventListener("input", event => { + locale.timePattern["0"] = event.target.value; + document.querySelector("td#long-time-pattern-output").innerText = patternToOutput(event.target.value); + }); + document.querySelector("input#meridian-am").addEventListener("input", event => { + locale.ampm["0"] = event.target.value; + document.querySelector("span#meridian-am-output").innerText = event.target.value; + }); + document.querySelector("input#meridian-pm").addEventListener("input", event => { + locale.ampm["1"] = event.target.value; + document.querySelector("span#meridian-pm-output").innerText = event.target.value; + }); + } return getLocaleModule(false); } + var lang; + var locale; + var customizeLocale; var languageSelector = document.getElementById("languages"); + var customizeSelector = document.getElementById('customize'); languageSelector.innerHTML = Object.keys(locales).map(l=>{ var locale = locales[l]; var localeParts = l.split("_"); // en_GB -> ["en","GB"] @@ -274,18 +369,25 @@ exports = { return `` }).join("\n"); languageSelector.addEventListener('change', function() { - const lang = languageSelector.options[languageSelector.selectedIndex].value; - createLocaleModule(lang); + lang = languageSelector.options[languageSelector.selectedIndex].value; + locale = locales[lang] + createLocaleModule(); + }); + customizeSelector.addEventListener('change', function() { + customizeLocale = customizeSelector.checked; + createLocaleModule(); }); // initial value - createLocaleModule(languageSelector.options[languageSelector.selectedIndex].value); + lang = languageSelector.options[languageSelector.selectedIndex].value; + locale = locales[lang]; + customizeLocale = false; + createLocaleModule(); document.getElementById("upload").addEventListener("click", function() { - const lang = languageSelector.options[languageSelector.selectedIndex].value; - var localeModule = createLocaleModule(lang); + var localeModule = createLocaleModule(); console.log("Locale Module is:",localeModule); sendCustomizedApp({