From 438533249e06fe878c0e86090fafc7b83e0d8495 Mon Sep 17 00:00:00 2001 From: Robert Morrison Date: Fri, 7 Oct 2022 21:39:54 +0100 Subject: [PATCH] Initial commit --- ReadMe.md | 55 +++++++++++++++++++++++++++++++++++++++++++++++++ numberFormat.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 108 insertions(+) create mode 100644 ReadMe.md create mode 100644 numberFormat.js diff --git a/ReadMe.md b/ReadMe.md new file mode 100644 index 0000000..f4526a4 --- /dev/null +++ b/ReadMe.md @@ -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 ` .. ` 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 + + + test + + + +

This is a formatted number 1234567890

+ + +``` + +## 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 \ diff --git a/numberFormat.js b/numberFormat.js new file mode 100644 index 0000000..99230ab --- /dev/null +++ b/numberFormat.js @@ -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 '' '' 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 + +//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();