Skip to content

Commit

Permalink
Add separate USA locale for different dates, and show examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@gfwilliams
gfwilliams committed Sep 11, 2023
1 parent 4214152 commit ca74c9a
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 38 deletions.
82 changes: 63 additions & 19 deletions apps/locale/locale.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../css/spectre.min.css">
<style>
table { width:100%;}
.table_t {font-weight:bold;width:40%;};
</style>
</head>
<body>

Expand All @@ -13,6 +17,11 @@
<div class="form-group">
<input id="translations" type="checkbox" /> <label for="translations">Add common language translations like "Yes", "No", "On", "Off"<br/><i>(Not recommended. For translations use the option under <code>More...</code> in the app loader.</i></label>
</div>
<p>
<table id="examples">
</p>

</table>
<p>Then click <button id="upload" class="btn btn-primary">Upload</button></p>

<script src="../../core/lib/customize.js"></script>
Expand Down Expand Up @@ -93,21 +102,8 @@
checkChars(locale,localeName);
});

var languageSelector = document.getElementById("languages");
languageSelector.innerHTML = Object.keys(locales).map(l=>{
var localeParts = l.split("_"); // en_GB -> ["en","GB"]
var icon = "";
// If we have a 2 char ISO country code, use it to get the unicode flag
if (localeParts[1] && localeParts[1].length==2)
icon = localeParts[1].toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0)+127397) )+" ";
if (localeParts[1]=="NAV")
icon = "&#9973;&#9992;&#65039; ";
return `<option value="${l}">${icon}${l}</option>`
}).join("\n");

document.getElementById("upload").addEventListener("click", function() {

const lang = languageSelector.options[languageSelector.selectedIndex].value;
function createLocaleModule(lang) {
console.log(`Language ${lang}`);

const translations = document.getElementById('translations').checked;
Expand Down Expand Up @@ -151,7 +147,7 @@

var replaceList = {
"%Y": "d.getFullYear()",
"%y": "(d.getFullYear().toString()).slice(-2)",
"%y": "d.getFullYear().toString().slice(-2)",
"%m": "('0'+(d.getMonth()+1).toString()).slice(-2)",
"%-m": "d.getMonth()+1",
"%d": "('0'+d.getDate()).slice(-2)",
Expand Down Expand Up @@ -182,16 +178,17 @@
`exports.number(n) + ${js(locale.currency_symbol)}`;
var temperature = locale.temperature=='°F' ? '(t*9/5)+32' : 't';

var localeModule = `
function getLocaleModule(isLocal) {
return `
function round(n, dp) {
if (dp===undefined) dp=0;
var p = Math.min(dp,dp - Math.floor(Math.log(n)/Math.log(10)));
var p = Math.max(0,Math.min(dp,dp - Math.floor(Math.log(n)/Math.log(10))));
return n.toFixed(p);
}
var is12;
function getHours(d) {
var h = d.getHours();
if (is12 === undefined) is12 = (require('Storage').readJSON('setting.json', 1) || {})["12hour"];
if (is12 === undefined) is12 = ${isLocal ? "false" : `(require('Storage').readJSON('setting.json', 1) || {})["12hour"]`};
if (!is12) return ('0' + h).slice(-2);
return ((h % 12 == 0) ? 12 : h % 12).toString();
}
Expand Down Expand Up @@ -224,7 +221,54 @@
time: (d,short) => short ? \`${timeS}\` : \`${timeN}\`,
meridian: d => d.getHours() < 12 ? ${js(locale.ampm[0])}:${js(locale.ampm[1])},
};
`.trim();
`.trim()
};

var exports;
eval(getLocaleModule(true));
console.log("exports:",exports);

var date = new Date();
document.getElementById("examples").innerHTML = `
<tr><td class="table_t"></td><td style="font-weight:bold">Short</td><td style="font-weight:bold">Long</td></tr>
<tr><td class="table_t">Day</td><td>${exports.dow(date,1)}</td><td>${exports.dow(date,0)}</td></tr>
<tr><td class="table_t">Month</td><td>${exports.month(date,1)}</td><td>${exports.month(date,0)}</td></tr>
<tr><td class="table_t">Date</td><td>${exports.date(date,1)}</td><td>${exports.date(date,0)}</td></tr>
<tr><td class="table_t">Time</td><td>${exports.time(date,1)}</td><td>${exports.time(date,0)}</td></tr>
<tr><td class="table_t">Number</td><td>${exports.number(12.3456789)}</td><td>${exports.number(12.3456789,4)}</td></tr>
<tr><td class="table_t">Currency</td><td></td><td>${exports.currency(12.34)}</td></tr>
<tr><td class="table_t">Distance</td><td>${exports.distance(12.34,0)}</td><td>${exports.distance(12345.6,1)}</td></tr>
<tr><td class="table_t">Speed</td><td></td><td>${exports.speed(123)}</td></tr>
<tr><td class="table_t">Temperature</td><td></td><td>${exports.temp(12,0)}</td></tr>
`;
return getLocaleModule(false);
}

var languageSelector = document.getElementById("languages");
languageSelector.innerHTML = Object.keys(locales).map(l=>{
var locale = locales[l];
var localeParts = l.split("_"); // en_GB -> ["en","GB"]
var icon = "";
// If we have a 2 char ISO country code, use it to get the unicode flag
if (locale.icon)
icon = locale.icon+" ";
else if (localeParts[1] && localeParts[1].length==2)
icon = localeParts[1].toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0)+127397) )+" ";
return `<option value="${l}">${icon}${l}${locale.notes?" - "+locale.notes:""}</option>`
}).join("\n");
languageSelector.addEventListener('change', function() {
const lang = languageSelector.options[languageSelector.selectedIndex].value;
createLocaleModule(lang);
});
// initial value
createLocaleModule(languageSelector.options[languageSelector.selectedIndex].value);



document.getElementById("upload").addEventListener("click", function() {

const lang = languageSelector.options[languageSelector.selectedIndex].value;
var localeModule = createLocaleModule(lang);

console.log("Locale Module is:",localeModule);
sendCustomizedApp({
Expand Down
58 changes: 39 additions & 19 deletions apps/locale/locales.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,44 @@ var locales = {
day: "Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday",
// No translation for english...
},
"en_US": {
lang: "en_US",
notes: "USA with MM/DD/YY date",
decimal_point: ".",
thousands_sep: ",",
currency_symbol: "$", currency_first: true,
int_curr_symbol: "USD",
speed: "mph",
distance: { 0: "ft", 1: "mi" },
temperature: "°F",
ampm: { 0: "am", 1: "pm" },
timePattern: { 0: "%HH:%MM:%SS ", 1: "%HH:%MM" },
datePattern: { 0: "%b %d, %Y", 1: "%m/%d/%y" },
abmonth: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec",
month: "January,February,March,April,May,June,July,August,September,October,November,December",
abday: "Sun,Mon,Tue,Wed,Thu,Fri,Sat",
day: "Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday",
// No translation for english...
},
"en_US 2": {
lang: "en_US 2", icon:"🇺🇸",
notes: "USA with YYYY-MM-DD date",
decimal_point: ".",
thousands_sep: ",",
currency_symbol: "$", currency_first: true,
int_curr_symbol: "USD",
speed: "mph",
distance: { 0: "ft", 1: "mi" },
temperature: "°F",
ampm: { 0: "am", 1: "pm" },
timePattern: { 0: "%HH:%MM:%SS ", 1: "%HH:%MM" },
datePattern: { 0: "%b %d, %Y", 1: "%Y-%m-%d" },
abmonth: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec",
month: "January,February,March,April,May,June,July,August,September,October,November,December",
abday: "Sun,Mon,Tue,Wed,Thu,Fri,Sat",
day: "Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday",
// No translation for english...
},
"en_IN": {
lang: "en_IN",
decimal_point: ".",
Expand Down Expand Up @@ -118,7 +156,7 @@ var locales = {
// No translation for english...
},
"en_NAV": { // navigation units nautical miles and knots
lang: "en_NAV",
lang: "en_NAV", icon: "&#9973;&#9992;&#65039;",
decimal_point: ".",
thousands_sep: ",",
currency_symbol: "£", currency_first: true,
Expand Down Expand Up @@ -154,24 +192,6 @@ var locales = {
trans: { yes: "ja", Yes: "Ja", no: "nein", No: "Nein", ok: "ok", on: "an", off: "aus",
"< Back": "< Zurück", "Delete": "Löschen", "Mark Unread": "Als ungelesen markieren" }
},
"en_US": {
lang: "en_US",
decimal_point: ".",
thousands_sep: ",",
currency_symbol: "$", currency_first: true,
int_curr_symbol: "USD",
speed: "mph",
distance: { 0: "ft", 1: "mi" },
temperature: "°F",
ampm: { 0: "am", 1: "pm" },
timePattern: { 0: "%HH:%MM:%SS ", 1: "%HH:%MM" },
datePattern: { 0: "%b %d, %Y", 1: "%m/%d/%y" },
abmonth: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec",
month: "January,February,March,April,May,June,July,August,September,October,November,December",
abday: "Sun,Mon,Tue,Wed,Thu,Fri,Sat",
day: "Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday",
// No translation for english...
},
"en_JP": { // we do not have the font, so it is not ja_JP
lang: "en_JP",
decimal_point: ".",
Expand Down

0 comments on commit ca74c9a

Please sign in to comment.