robert/numberformat.js
robert/numberformat.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Compare commits

base: robert:main
Branches Tags
robert:main
robert:feat-FormatOptions
robert:0.0.1
..
compare: robert:feat-FormatOptions
Branches Tags
robert:feat-FormatOptions
robert:main
robert:0.0.1

2 Commits
main ... feat-Forma

Author SHA1 Message Date
Robert Morrison
ce79079ced
docs: Add currency format docs 
Update docs to show currency formatting
 2022-10-11 22:02:34 +01:00
Robert Morrison
f7f677ec38
feat: Add currency support 
Add support for formatting currency.
This extends the library to become more useful
 2022-10-11 21:43:17 +01:00
2 changed files with 72 additions and 12 deletions
Show Stats Expand all files Collapse all files

27
ReadMe.md
View File

@ -1,18 +1,39 @@
# numberFormat.js # numberFormat.js
A simple JS library that automatically formats numbers on your web page. A simple JS library that automatically formats numbers on your web page.
This is accomplished using the Intl.NumberFormat library to format the
numbers, and some custom elements to locate the numbers that need
formatting and allow them to be replaced by the correct value.
Designed mainly for use on static websites to avoid the bother of Designed mainly for use on static websites to avoid the bother of
formatting numbers manually. formatting numbers manually.
## Usage ## A more succinct description
This library allows DOM modification based on the Intl.NumberFormat library
which is part of JS. Providing a custom element that allows you to
specify number formatting declaratively and without needing to know how to
format numbers.
## Basic Usage
- Host the script somewhere on your system. - Host the script somewhere on your system.
- Ensure you set the language for your HTML element - Ensure you set the language for your HTML element
- Add a script tag to your document head that has the `src` set to this script.\ - Add a script tag to your document head that has the `src` set to this script.\
The script tag must also be set to defer The script tag must also be set to defer
- Surround any numbers you want formatting with `<num> .. </num>` tags.\ - Surround any numbers you want formatting with `<num>` tags.\
These 'custom' tags are used so the script can efficiently find numbers These 'custom' tags are used so the script can efficiently find numbers
without needing to resort to jQuery or regex.\ without needing to resort to jQuery or regex.\
This also allows you to specify numbers you don't want formatted. This also allows you to specify numbers you don't want formatted.
## Formatting Currencies
To format a currency you need to add the `currency` attribute to your num
element with the value set in the format `CURRENCY-FORMAT`.
With currency being the three letter code for the currency.
And format being one of:
- symbol
- narrowSymbol
- code
- name
This is exactly parallel to the Intl.NumberFormat constructor for
formatting currencies.
### Example ### Example
```html ```html
<html lang="YOUR-LANGUAGE"> <html lang="YOUR-LANGUAGE">
@ -22,6 +43,7 @@ formatting numbers manually.
</head> </head>
<body> <body>
<p>This is a formatted number <num>1234567890</num></p> <p>This is a formatted number <num>1234567890</num></p>
<p>This is a simple formatted currency <num currency=GBP>123</num></p>
</body> </body>
</html> </html>
``` ```
@ -40,7 +62,6 @@ formatting numbers manually.
It is a completely different task. It is a completely different task.
## TODO: ## TODO:
- Add support for currency formatting
- Check for optimisations - Check for optimisations
- If this becomes popular host to a CDN - If this becomes popular host to a CDN
- Change custom element\ - Change custom element\

43
numberFormat.js
View File

@ -36,21 +36,60 @@
// No, I will not add a LibreJS compatible comment // No, I will not add a LibreJS compatible comment
// GNU won't support my choice of browser so I won't support their tool // GNU won't support my choice of browser so I won't support their tool
// constant arrays to keep data validated
const currencyDisplays = ['symbol','narrowSymbol','code','name']
function formatNumbers() { function formatNumbers() {
const numbers = document.getElementsByTagName("num"); const numbers = document.getElementsByTagName("num");
const documentLanguage = document.documentElement.lang; const documentLanguage = document.documentElement.lang;
const formatter = Intl.NumberFormat(documentLanguage); var formatter = Intl.NumberFormat(documentLanguage);
for (let num of numbers) { for (let num of numbers) {
var number = parseFloat(num.innerHTML); var number = parseFloat(num.innerHTML);
if (isNaN(number)) { if (isNaN(number)) {
console.error("[numberFormat.js] ERROR: cannot parse num element: " + num.innerHTML); console.error("[numberFormat.js] ERROR: cannot parse num element: ");
console.error(num);
continue; continue;
} }
if (num.attributes.currency) {
var f = _createCurrencyFormatter(num,documentLanguage);
if (f !== undefined) {
formatter = f;
}
}
var formatted = formatter.format(number); var formatted = formatter.format(number);
num.innerHTML = formatted; num.innerHTML = formatted;
} }
} }
function _createCurrencyFormatter(num,documentLanguage) {
var currency;
var currencyDisplay;
var currencyData = num.attributes.currency.value.split('-');
currency = currencyData[0];
if (currencyDisplays.includes(currencyData[1])) {
currencyDisplay = currencyData[1];
}
else {
currencyDisplay = "symbol"
}
try {
formatter = Intl.NumberFormat(documentLanguage,{
style: 'currency',
currency: currency,
currencyDisplay: currencyDisplay,})
return formatter;
} catch (error) {
console.error("[numberFormat.js] ERROR: Failed to create NumberFormat");
console.error(` - Check that ${currency} is a currency code`);
console.error(num)
}
return undefined;
}
// ENTRY POINT
formatNumbers(); formatNumbers();