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

Initial commit

Browse Source
This commit is contained in:
Robert Morrison 2022-10-07 21:39:54 +01:00
commit 438533249e
Signed by: robert
GPG Key ID: 73E012EB3F4EC696
2 changed files with 108 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
ReadMe.md Normal file
View File

@ -0,0 +1,55 @@
# numberFormat.js
A simple JS library that automatically formats numbers on your web page.
Designed mainly for use on static websites to avoid the bother of
formatting numbers manually.
## Usage
- Host the script somewhere on your system.
- Ensure you set the language for your HTML\
(this will be essential with the first official release.)
- 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.\
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.
### Example
```html
<html lang="YOUR-LANGUAGE">
<head>
<title>test</title>
<script defer src="https://{YOUR_DOMAIN}/somewhere/numberFormat.js"></script>
</head>
<body>
<p>This is a formatted number <num>1234567890</num></p>
</body>
</html>
```
## Design goals
- Code simplicity
- Easily extendable
- Using only native JS
## Design non-goals
- Locale detection\
This is not useful since web pages should be consistent.\
Locale detection would break this.
- Date formatting\
This should be an entirely different package.\
It is a completely different task.
## TODO:
- Add support for currency formatting
- Change language/locale to use document language tag.
- Check for optimisations
- If this becomes popular host to a CDN
- 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.
## Changelog
- 2022-10-07\
Initial Upload of basic script\
Robert Morrison \<sherlock5512\>

53
numberFormat.js Normal file
View File

@ -0,0 +1,53 @@
// numberFormat.js
// ---------------
// A simple tool to automagically format numbers for you using the Intl API
//
// Usage:
// ------
// Just wrap the numbers you want formatted in '<num>' '</num>' tags
// add the script in your document head wiht defer set
// COMING SOON :
// -------------
// Support for currency formatting :)
//The MIT License (MIT)
//Copyright (c) 2022 Robert Morrison <sherlock5512>
//Permission is hereby granted, free of charge, to any person obtaining a copy
//of this software and associated documentation files (the "Software"), to deal
//in the Software without restriction, including without limitation the rights
//to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
//copies of the Software, and to permit persons to whom the Software is
//furnished to do so, subject to the following conditions:
//The above copyright notice and this permission notice shall be included in all
//copies or substantial portions of the Software.
//THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
//SOFTWARE.
// No, I will not add a LibreJS compatible comment
// GNU won't support my choice of browser so I won't support their tool
function formatNumbers() {
const numbers = document.getElementsByTagName("num");
const formatter = Intl.NumberFormat(navigator.language);
for (let num of numbers) {
var number = parseFloat(num.innerHTML);
if (isNaN(number)) {
console.error("[numberFormat.js] ERROR: cannot parse num element: " + num.innerHTML);
continue;
}
var formatted = formatter.format(number);
num.innerHTML = formatted;
}
}
formatNumbers();