Compare commits
2 Commits
main
...
feat-Forma
| Author | SHA1 | Date | |
|---|---|---|---|
|
ce79079ced
|
||
|
|
f7f677ec38
|
31
ReadMe.md
31
ReadMe.md
|
|
@ -1,18 +1,39 @@
|
|||
# numberFormat.js
|
||||
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
|
||||
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.
|
||||
- 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.\
|
||||
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
|
||||
without needing to resort to jQuery or regex.\
|
||||
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
|
||||
```html
|
||||
<html lang="YOUR-LANGUAGE">
|
||||
|
|
@ -22,6 +43,7 @@ formatting numbers manually.
|
|||
</head>
|
||||
<body>
|
||||
<p>This is a formatted number <num>1234567890</num></p>
|
||||
<p>This is a simple formatted currency <num currency=GBP>123</num></p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
|
@ -40,7 +62,6 @@ formatting numbers manually.
|
|||
It is a completely different task.
|
||||
|
||||
## TODO:
|
||||
- Add support for currency formatting
|
||||
- Check for optimisations
|
||||
- If this becomes popular host to a CDN
|
||||
- Change custom element\
|
||||
|
|
@ -51,9 +72,9 @@ formatting numbers manually.
|
|||
- Allow for setting locale for individual numbers.
|
||||
- Automate releases that include a minified version\
|
||||
I personally don't care for minified JS but some people love it\
|
||||
This is an extremely low-priority task.
|
||||
This is an extremely low-priority task.
|
||||
|
||||
## Changelog
|
||||
## Changelog
|
||||
- 2022-10-08\
|
||||
Get language from DOM
|
||||
Robert Morrison \<sherlock5512\>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
// numberFormat.js
|
||||
// numberFormat.js
|
||||
// ---------------
|
||||
// A simple tool to automagically format numbers for you using the Intl API
|
||||
//
|
||||
// Usage:
|
||||
// Usage:
|
||||
// ------
|
||||
// Just wrap the numbers you want formatted in '<num>' '</num>' tags
|
||||
// add the script in your document head wiht defer set
|
||||
// add the script in your document head wiht defer set
|
||||
|
||||
// COMING SOON :
|
||||
// -------------
|
||||
|
|
@ -36,21 +36,60 @@
|
|||
// No, I will not add a LibreJS compatible comment
|
||||
// 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() {
|
||||
|
||||
|
||||
const numbers = document.getElementsByTagName("num");
|
||||
const documentLanguage = document.documentElement.lang;
|
||||
const formatter = Intl.NumberFormat(documentLanguage);
|
||||
|
||||
var formatter = Intl.NumberFormat(documentLanguage);
|
||||
|
||||
for (let num of numbers) {
|
||||
var number = parseFloat(num.innerHTML);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
if (num.attributes.currency) {
|
||||
var f = _createCurrencyFormatter(num,documentLanguage);
|
||||
if (f !== undefined) {
|
||||
formatter = f;
|
||||
}
|
||||
}
|
||||
|
||||
var formatted = formatter.format(number);
|
||||
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();
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user