From 3c21a3857ac3205bd9962106de9394b234101113 Mon Sep 17 00:00:00 2001 From: Peter Pfeufer Date: Wed, 27 Aug 2025 20:22:24 +0200 Subject: [PATCH] [ADD] Number formatter --- .../framework/js/auth-framework.js | 43 +++++++++++++++++++ docs/development/custom/framework/js.md | 41 ++++++++++++++++++ 2 files changed, 84 insertions(+) diff --git a/allianceauth/framework/static/allianceauth/framework/js/auth-framework.js b/allianceauth/framework/static/allianceauth/framework/js/auth-framework.js index 6e48fc8b..c638692c 100644 --- a/allianceauth/framework/static/allianceauth/framework/js/auth-framework.js +++ b/allianceauth/framework/static/allianceauth/framework/js/auth-framework.js @@ -272,6 +272,49 @@ function objectDeepMerge (target, ...sources) { return target; } +/** + * Formats a number according to the specified locale. + * This function uses the Intl.NumberFormat API to format the number. + * + * @usage + * In your Django template get the current language code: + * ```django + * {% get_current_language as LANGUAGE_CODE %} + * ``` + * Then use it in your JavaScript: + * ```javascript + * const userLocale = '{{ LANGUAGE_CODE }}'; // e.g., 'en-US', 'de-DE' + * const number = 1234567.89; + * const formattedNumber = numberFormatter({ + * value: number, + * locales: userLocale, + * options: { + * style: 'currency', + * currency: 'ISK' + * } + * }); + * + * // Output will vary based on locale + * // e.g., '1,234,567.89' for 'en-US', '1.234.567,89' for 'de-DE' + * console.log(formattedNumber); + * ``` + * + * @param {number} value The number to format + * @param {string | string[]} locales The locale(s) to use for formatting (e.g., 'en-US', 'de-DE', ['en-US', 'de-DE']). If not provided, the browser's default locale will be used and any language settings from the user will be ignored. + * @param {Object} [options={}] Additional options for number formatting (see `Intl.NumberFormat` documentation - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) + * @return {string} The formatted number as a string + */ +const numberFormatter = ({value, locales, options = {}}) => { + console.log('Formatting number:', value, 'for locale(s):', locales, 'with options:', options); + const formatter = new Intl.NumberFormat(locales, { + maximumFractionDigits: 2, + minimumFractionDigits: 0, + ...options + }); + + return formatter.format(value); +}; + /** * When the document is ready … */ diff --git a/docs/development/custom/framework/js.md b/docs/development/custom/framework/js.md index 70d58e59..8574aab4 100644 --- a/docs/development/custom/framework/js.md +++ b/docs/development/custom/framework/js.md @@ -122,3 +122,44 @@ const merged = objectDeepMerge(target, source1, source2); console.log(merged); // {a: 5, b: {c: 6, d: 3}, e: 4} ``` + +### numberFormatter() + +Formats a number according to the specified locale. +Usage: + +In your template get the current language code: + +```django +{% get_current_language as LANGUAGE_CODE %} +``` + +Then use it in your JavaScript code: + +```javascript +/* global numberFormatter */ + +const userLocale = '{{ LANGUAGE_CODE }}'; // e.g., 'en-US', 'de-DE' +const number = 1234567.89; + +const formattedNumber = numberFormatter({ + value: number, + locales: userLocale, + options: { + style: 'currency', + currency: 'ISK' + } +}); + +console.log(formattedNumber); // e.g. "ISK 1,234,567.89" or "1.234.567,89 ISK" depending on locale +``` + +#### numberFormatter() Parameters + +- `value`: The number to format. +- `locales`: The locale(s) to use for formatting (e.g., `en-US`, `de-DE`, `['en-US', +'de-DE']`). If not provided, the browser's default locale will be used and any + language settings from the user will be ignored. +- `options`: Additional options for number formatting (see [`Intl.NumberFormat` documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)) + - `minimumFractionDigits` is set to 0 by default if not provided. + - `maximumFractionDigits` is set to 2 by default if not provided.