From b0ad54b942c0a2de4161930da2e3814f35251a62 Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Thu, 13 Jun 2024 18:44:37 +0200 Subject: [PATCH 01/17] Numeric input now supporting formatters; --- lib/ui/elements/_elements.mjs | 5 +- lib/ui/elements/numericFormatter.mjs | 175 --------------------------- lib/ui/elements/numericInput.mjs | 72 +++++++++++ lib/ui/locations/entries/numeric.mjs | 11 +- lib/utils/_utils.mjs | 4 + lib/utils/numericFormatter.mjs | 164 +++++++++++++++++++++++++ 6 files changed, 242 insertions(+), 189 deletions(-) delete mode 100644 lib/ui/elements/numericFormatter.mjs create mode 100644 lib/utils/numericFormatter.mjs diff --git a/lib/ui/elements/_elements.mjs b/lib/ui/elements/_elements.mjs index de606ef827..0500d13bb6 100644 --- a/lib/ui/elements/_elements.mjs +++ b/lib/ui/elements/_elements.mjs @@ -19,7 +19,6 @@ import helpModal from './helpModal.mjs'; import searchbox from './searchbox.mjs'; import slider from './slider.mjs'; import slider_ab from './slider_ab.mjs'; -import { numericFormatter, getSeparators } from './numericFormatter.mjs'; import pills from './pills.mjs' import numericInput from './numericInput.mjs' @@ -39,7 +38,5 @@ export default { helpModal, searchbox, slider, - slider_ab, - numericFormatter, - getSeparators + slider_ab }; \ No newline at end of file diff --git a/lib/ui/elements/numericFormatter.mjs b/lib/ui/elements/numericFormatter.mjs deleted file mode 100644 index c441939d31..0000000000 --- a/lib/ui/elements/numericFormatter.mjs +++ /dev/null @@ -1,175 +0,0 @@ -/** -@module /ui/elements/numericFormatter -*/ - -/** -@function numericFormatter - -@description -Returns the formatted string based on the provided formatterParams. - -@param {Object} entry An infoj entry object. -@param {Integer|String} inValue -The value to be formatted if not available in the entry. -@param {Boolean} numeric -Method returns numeric value if true. - -@returns {string} Returns formatted string from numeric value without the numeric flag. -*/ - -export function numericFormatter(entry, inValue, reverse) { - - //Do nothing if entry is null or no formatter is present - if (!entry) return entry.value || inValue; - - if (!entry.formatter && entry.type !== 'integer') { - return entry.value || inValue; - } - - // If value is 0, return 0 - if (inValue === 0) return 0; - - // If formatter is money use en-GB locale - if (entry.formatter === 'money') { - entry.formatterParams ??= {} - entry.formatterParams.locale = 'en-GB' - }; - - entry.value = inValue || entry.value - - if(!entry.formatterParams?.locale) return entry.value; - - //Do the opposite of formatting - if (numeric) { - return undoFormatting(entry) - } - - //Get the actual formatted value - return getFormatterParams(entry).value -} - -function getFormatterParams(entry, inValue) { - let value = entry.value || inValue; - let prefix = entry.prefix ??= '' - let suffix = entry.suffix ??= '' - let round = entry.round - - if (entry.filterInput) { - prefix = '' - suffix = '' - round = null - } - - if (!value) { - return { value: null } - } - - const negative = value[0] === '-' - - if (negative) { - value = value.substring(1, value.length) - } - - let rawValue; - - //Check if supplied value is a valid number - if (isNaN(parseFloat(value))) { - return { value: `${prefix} ${suffix}`, separators: { thousands: '', decimals: '' } } - } - - // Assign if nullish. - entry.formatterParams ??= {}; - - // Assign user language as locale if nullish but not null. - if (entry.formatterParams.locale !== null || entry.formatter === 'toLocaleString') { - entry.formatterParams.locale ??= mapp.language; - } - - //Setup formatter options for rounding - entry.formatterParams.options ??= {} - entry.formatterParams.options.maximumFractionDigits ??= entry.formatterParams.precision ??= round - entry.formatterParams.options.minimumFractionDigits ??= entry.formatterParams.precision ??= round - - //Tabulator formatterOptions - if (entry.formatterParams?.decimal || entry.formatterParams?.thousand) { - - entry.formatterParams.decimal ??= '.' - - rawValue = parseFloat(value) - - let rawList = rawValue.toLocaleString('en-GB', entry.formatterParams.options).split('.') - - rawList[0] = rawList[0].replaceAll(',', entry.formatterParams.thousand) - rawValue = rawList.join(entry.formatterParams.decimal) - - } else { - - //Infoj formatter options - rawValue = parseFloat(value).toLocaleString(entry.formatterParams.locale, entry.formatterParams.options) - } - - //Add The affixes - let formattedValue = `${prefix}${rawValue}${suffix}` - - //Look for separators in formatterOptions. - let separators = [entry.formatterParams?.thousand, entry.formatterParams?.decimal] - - let localeSeparators = Array.from(new Set(formattedValue.match(/\D/g))) - - localeSeparators[1] ??= '.' - - //If not supplied look in the formatted string - separators[0] = separators[0] ? separators[0] : localeSeparators[0] - separators[1] = separators[1] ? separators[1] : localeSeparators[1] - - formattedValue = `${negative ? '-' : ''}${formattedValue}` - - return { - value: formattedValue, - separators: { - thousands: separators[0], - decimals: separators[1] - } - } -} - -function undoFormatting(entry) { - - //Determine thousand and decimal markers - let value = entry.value - - if (!entry.value) return null; - - const separators = getSeparators(entry) - - const negative = value[0] === '-' - - value = negative ? value.substring(1, value.length) : value - - //Strip out thousand and decimal markers, replacing decimal with '.' - value = value.replaceAll(separators.thousands, '') - - if (separators.decimals) { - value = separators.decimals === '.' || separators.decimals === '' ? value : value.replace(separators.decimals, '.') - } - - if (!Number(value)) { - value = value.replaceAll(/\D+/g, ''); - } - - return `${negative ? '-' : ''}${value}` -} - -export function getSeparators(entry) { - - //Do nothing if entry is null or no formatter is present - if (!entry) return; - - if (!entry.formatter && entry.type !== 'integer') return { decimals: '.' }; - - //Use a number to determine what the fields - //formatted input would look like - entry.value = 1000000.99 - - return getFormatterParams(entry).separators -} \ No newline at end of file diff --git a/lib/ui/elements/numericInput.mjs b/lib/ui/elements/numericInput.mjs index 55a9f1af9d..2f17fa2373 100644 --- a/lib/ui/elements/numericInput.mjs +++ b/lib/ui/elements/numericInput.mjs @@ -33,6 +33,78 @@ export default function numericInput(params) { params.maxlength ??= 256 params.step ??= 1 + if(params.formatter) { + + const container = mapp.utils.html.node`
{ + e.stopPropagation(); + displayValue.classList.add('display-none'); + numericInput.classList.remove('display-none'); + numericInput.focus(); + }} + >`; + + let changeDelay; + + const numericInput = mapp.utils.html.node` + { + if(e.which === 13) refreshDisplay(); + }} + oninput=${ + e => { + numericChecks(e); + if(changeDelay) { + clearTimeout(changeDelay); + changeDelay = null; + } + changeDelay = setTimeout(() => refreshDisplay(), 1200); + } + } + onchange=${e => { + if(changeDelay) { + clearTimeout(changeDelay); + changeDelay = null; + } + changeDelay = setTimeout(() => refreshDisplay(), 1200); + }} + onblur=${() => { + changeDelay = setTimeout(() => refreshDisplay(), 1200); + }}>` + + const displayValue = mapp.utils.html.node`
${formatValue(numericInput.value)}` + + function formatValue(val) { + return mapp.utils.numericFormatter({ ...params, ...{value: val} }) + } + + container.appendChild(displayValue); + container.appendChild(numericInput); + + function refreshDisplay() { + displayValue.textContent = formatValue(numericInput.value) + displayValue.classList.remove('display-none'); + numericInput.classList.add('display-none'); + } + + return container; + } + return mapp.utils.html.node` onFocus(e, entry)} - onBlur=${e => onBlur(e, entry)} - placeholder=${entry.edit.placeholder} - onkeyup=${e => handleKeyUp(e, entry)}>`; - } - return mapp.ui.elements.numericInput({ entry: entry, value: entry.newValue || entry.value, + formatter: entry.formatter, placeholder: entry.edit.placeholder, maxlength: entry.edit.maxlength, min: entry.edit.min, diff --git a/lib/utils/_utils.mjs b/lib/utils/_utils.mjs index 130d42c762..594b4049a5 100644 --- a/lib/utils/_utils.mjs +++ b/lib/utils/_utils.mjs @@ -70,6 +70,8 @@ import {default as verticeGeoms} from './verticeGeoms.mjs' import xhr from './xhr.mjs' +import { numericFormatter, getSeparators } from './numericFormatter.mjs'; + export default { stats, render, @@ -96,4 +98,6 @@ export default { userIndexedDB, verticeGeoms, xhr, + numericFormatter, + getSeparators } \ No newline at end of file diff --git a/lib/utils/numericFormatter.mjs b/lib/utils/numericFormatter.mjs new file mode 100644 index 0000000000..d35d452214 --- /dev/null +++ b/lib/utils/numericFormatter.mjs @@ -0,0 +1,164 @@ +/** +@module /utils/numericFormatter +*/ + +/** +@function numericFormatter + +@description +Returns the formatted string based on the provided formatterParams. + +@param {Object} params An infoj entry or compliant object. +@param {Boolean} entry.undo - removes formatting +Method returns numeric value if true. +@returns {string} Returns formatted string from numeric value without the numeric flag. +*/ +export function numericFormatter(params) { + + if (!params.formatter) return params.value; + + if(params?.type !== 'integer') return params.value; + + // If formatter is money use en-GB locale + if (params.formatter === 'money') { + params.formatterParams ??= {} + params.formatterParams.locale = 'en-GB' + }; + + if(!params.formatterParams?.locale) return params.value; + + //Do the opposite of formatting + if (params.undo) { + return undoFormatting(params) + } + + //Get the actual formatted value + return getFormatterParams(params).value + +} + +function getFormatterParams(params) { + let value = params.value; + let prefix = params.prefix ??= ''; + let suffix = params.suffix ??= ''; + let round = params.round; + + if (params.filterInput) { + prefix = '' + suffix = '' + round = null + } + + if (!value) { + return { value: null } + } + + const negative = value[0] === '-' + + if (negative) { + value = value.substring(1, value.length) + } + + let rawValue; + + //Check if supplied value is a valid number + if (isNaN(parseFloat(value))) { + return { value: `${prefix} ${suffix}`, separators: { thousands: '', decimals: '' } } + } + + // Assign if nullish. + params.formatterParams ??= {}; + + // Assign user language as locale if nullish but not null. + if (params.formatterParams.locale !== null || params.formatter === 'toLocaleString') { + params.formatterParams.locale ??= mapp.language; + } + + //Setup formatter options for rounding + params.formatterParams.options ??= {} + params.formatterParams.options.maximumFractionDigits ??= params.formatterParams.precision ??= round + params.formatterParams.options.minimumFractionDigits ??= params.formatterParams.precision ??= round + + //Tabulator formatterOptions + if (params.formatterParams?.decimal || params.formatterParams?.thousand) { + + params.formatterParams.decimal ??= '.' + + rawValue = parseFloat(value) + + let rawList = rawValue.toLocaleString('en-GB', params.formatterParams.options).split('.') + + rawList[0] = rawList[0].replaceAll(',', params.formatterParams.thousand) + rawValue = rawList.join(params.formatterParams.decimal) + + } else { + + //Infoj formatter options + rawValue = parseFloat(value).toLocaleString(params.formatterParams.locale, params.formatterParams.options) + } + + //Add The affixes + let formattedValue = `${prefix}${rawValue}${suffix}` + + //Look for separators in formatterOptions. + let separators = [params.formatterParams?.thousand, params.formatterParams?.decimal] + + let localeSeparators = Array.from(new Set(formattedValue.match(/\D/g))) + + localeSeparators[1] ??= '.' + + //If not supplied look in the formatted string + separators[0] = separators[0] ? separators[0] : localeSeparators[0] + separators[1] = separators[1] ? separators[1] : localeSeparators[1] + + formattedValue = `${negative ? '-' : ''}${formattedValue}` + + return { + value: formattedValue, + separators: { + thousands: separators[0], + decimals: separators[1] + } + } +} + +function undoFormatting(params) { + + //Determine thousand and decimal markers + let value = params.value + + if (!params.value) return null; + + const separators = getSeparators(params) + + const negative = value[0] === '-' + + value = negative ? value.substring(1, value.length) : value + + //Strip out thousand and decimal markers, replacing decimal with '.' + value = value.replaceAll(separators.thousands, '') + + if (separators.decimals) { + value = separators.decimals === '.' || separators.decimals === '' ? value : value.replace(separators.decimals, '.') + } + + if (!Number(value)) { + value = value.replaceAll(/\D+/g, ''); + } + + return `${negative ? '-' : ''}${value}` +} + +export function getSeparators(params) { + + //Do nothing if entry is null or no formatter is present + if (!params) return; + + if (!params.formatter && params?.type !== 'integer') return { decimals: '.' }; + + //Use a number to determine what the fields + //formatted input would look like + params.value = 1000000.99 + + return getFormatterParams(params).separators +} \ No newline at end of file From f8368bda60b27240a8d253935a87aede734e7b52 Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Thu, 13 Jun 2024 18:44:37 +0200 Subject: [PATCH 02/17] Numeric input now supporting formatters; --- lib/ui/elements/_elements.mjs | 5 +- lib/ui/elements/numericFormatter.mjs | 175 --------------------------- lib/ui/elements/numericInput.mjs | 72 +++++++++++ lib/ui/locations/entries/numeric.mjs | 11 +- lib/utils/_utils.mjs | 4 + lib/utils/numericFormatter.mjs | 164 +++++++++++++++++++++++++ 6 files changed, 242 insertions(+), 189 deletions(-) delete mode 100644 lib/ui/elements/numericFormatter.mjs create mode 100644 lib/utils/numericFormatter.mjs diff --git a/lib/ui/elements/_elements.mjs b/lib/ui/elements/_elements.mjs index f42dc16a4e..05b3e5dfa1 100644 --- a/lib/ui/elements/_elements.mjs +++ b/lib/ui/elements/_elements.mjs @@ -19,7 +19,6 @@ import helpDialog from './helpDialog.mjs'; import searchbox from './searchbox.mjs'; import slider from './slider.mjs'; import slider_ab from './slider_ab.mjs'; -import { numericFormatter, getSeparators } from './numericFormatter.mjs'; import pills from './pills.mjs' import numericInput from './numericInput.mjs' @@ -63,7 +62,5 @@ export default { helpDialog, searchbox, slider, - slider_ab, - numericFormatter, - getSeparators + slider_ab }; \ No newline at end of file diff --git a/lib/ui/elements/numericFormatter.mjs b/lib/ui/elements/numericFormatter.mjs deleted file mode 100644 index c441939d31..0000000000 --- a/lib/ui/elements/numericFormatter.mjs +++ /dev/null @@ -1,175 +0,0 @@ -/** -@module /ui/elements/numericFormatter -*/ - -/** -@function numericFormatter - -@description -Returns the formatted string based on the provided formatterParams. - -@param {Object} entry An infoj entry object. -@param {Integer|String} inValue -The value to be formatted if not available in the entry. -@param {Boolean} numeric -Method returns numeric value if true. - -@returns {string} Returns formatted string from numeric value without the numeric flag. -*/ - -export function numericFormatter(entry, inValue, reverse) { - - //Do nothing if entry is null or no formatter is present - if (!entry) return entry.value || inValue; - - if (!entry.formatter && entry.type !== 'integer') { - return entry.value || inValue; - } - - // If value is 0, return 0 - if (inValue === 0) return 0; - - // If formatter is money use en-GB locale - if (entry.formatter === 'money') { - entry.formatterParams ??= {} - entry.formatterParams.locale = 'en-GB' - }; - - entry.value = inValue || entry.value - - if(!entry.formatterParams?.locale) return entry.value; - - //Do the opposite of formatting - if (numeric) { - return undoFormatting(entry) - } - - //Get the actual formatted value - return getFormatterParams(entry).value -} - -function getFormatterParams(entry, inValue) { - let value = entry.value || inValue; - let prefix = entry.prefix ??= '' - let suffix = entry.suffix ??= '' - let round = entry.round - - if (entry.filterInput) { - prefix = '' - suffix = '' - round = null - } - - if (!value) { - return { value: null } - } - - const negative = value[0] === '-' - - if (negative) { - value = value.substring(1, value.length) - } - - let rawValue; - - //Check if supplied value is a valid number - if (isNaN(parseFloat(value))) { - return { value: `${prefix} ${suffix}`, separators: { thousands: '', decimals: '' } } - } - - // Assign if nullish. - entry.formatterParams ??= {}; - - // Assign user language as locale if nullish but not null. - if (entry.formatterParams.locale !== null || entry.formatter === 'toLocaleString') { - entry.formatterParams.locale ??= mapp.language; - } - - //Setup formatter options for rounding - entry.formatterParams.options ??= {} - entry.formatterParams.options.maximumFractionDigits ??= entry.formatterParams.precision ??= round - entry.formatterParams.options.minimumFractionDigits ??= entry.formatterParams.precision ??= round - - //Tabulator formatterOptions - if (entry.formatterParams?.decimal || entry.formatterParams?.thousand) { - - entry.formatterParams.decimal ??= '.' - - rawValue = parseFloat(value) - - let rawList = rawValue.toLocaleString('en-GB', entry.formatterParams.options).split('.') - - rawList[0] = rawList[0].replaceAll(',', entry.formatterParams.thousand) - rawValue = rawList.join(entry.formatterParams.decimal) - - } else { - - //Infoj formatter options - rawValue = parseFloat(value).toLocaleString(entry.formatterParams.locale, entry.formatterParams.options) - } - - //Add The affixes - let formattedValue = `${prefix}${rawValue}${suffix}` - - //Look for separators in formatterOptions. - let separators = [entry.formatterParams?.thousand, entry.formatterParams?.decimal] - - let localeSeparators = Array.from(new Set(formattedValue.match(/\D/g))) - - localeSeparators[1] ??= '.' - - //If not supplied look in the formatted string - separators[0] = separators[0] ? separators[0] : localeSeparators[0] - separators[1] = separators[1] ? separators[1] : localeSeparators[1] - - formattedValue = `${negative ? '-' : ''}${formattedValue}` - - return { - value: formattedValue, - separators: { - thousands: separators[0], - decimals: separators[1] - } - } -} - -function undoFormatting(entry) { - - //Determine thousand and decimal markers - let value = entry.value - - if (!entry.value) return null; - - const separators = getSeparators(entry) - - const negative = value[0] === '-' - - value = negative ? value.substring(1, value.length) : value - - //Strip out thousand and decimal markers, replacing decimal with '.' - value = value.replaceAll(separators.thousands, '') - - if (separators.decimals) { - value = separators.decimals === '.' || separators.decimals === '' ? value : value.replace(separators.decimals, '.') - } - - if (!Number(value)) { - value = value.replaceAll(/\D+/g, ''); - } - - return `${negative ? '-' : ''}${value}` -} - -export function getSeparators(entry) { - - //Do nothing if entry is null or no formatter is present - if (!entry) return; - - if (!entry.formatter && entry.type !== 'integer') return { decimals: '.' }; - - //Use a number to determine what the fields - //formatted input would look like - entry.value = 1000000.99 - - return getFormatterParams(entry).separators -} \ No newline at end of file diff --git a/lib/ui/elements/numericInput.mjs b/lib/ui/elements/numericInput.mjs index 55a9f1af9d..2f17fa2373 100644 --- a/lib/ui/elements/numericInput.mjs +++ b/lib/ui/elements/numericInput.mjs @@ -33,6 +33,78 @@ export default function numericInput(params) { params.maxlength ??= 256 params.step ??= 1 + if(params.formatter) { + + const container = mapp.utils.html.node`
{ + e.stopPropagation(); + displayValue.classList.add('display-none'); + numericInput.classList.remove('display-none'); + numericInput.focus(); + }} + >`; + + let changeDelay; + + const numericInput = mapp.utils.html.node` + { + if(e.which === 13) refreshDisplay(); + }} + oninput=${ + e => { + numericChecks(e); + if(changeDelay) { + clearTimeout(changeDelay); + changeDelay = null; + } + changeDelay = setTimeout(() => refreshDisplay(), 1200); + } + } + onchange=${e => { + if(changeDelay) { + clearTimeout(changeDelay); + changeDelay = null; + } + changeDelay = setTimeout(() => refreshDisplay(), 1200); + }} + onblur=${() => { + changeDelay = setTimeout(() => refreshDisplay(), 1200); + }}>` + + const displayValue = mapp.utils.html.node`
${formatValue(numericInput.value)}` + + function formatValue(val) { + return mapp.utils.numericFormatter({ ...params, ...{value: val} }) + } + + container.appendChild(displayValue); + container.appendChild(numericInput); + + function refreshDisplay() { + displayValue.textContent = formatValue(numericInput.value) + displayValue.classList.remove('display-none'); + numericInput.classList.add('display-none'); + } + + return container; + } + return mapp.utils.html.node` onFocus(e, entry)} - onBlur=${e => onBlur(e, entry)} - placeholder=${entry.edit.placeholder} - onkeyup=${e => handleKeyUp(e, entry)}>`; - } - return mapp.ui.elements.numericInput({ entry: entry, value: entry.newValue || entry.value, + formatter: entry.formatter, placeholder: entry.edit.placeholder, maxlength: entry.edit.maxlength, min: entry.edit.min, diff --git a/lib/utils/_utils.mjs b/lib/utils/_utils.mjs index 5081f482d7..b0fc12869e 100644 --- a/lib/utils/_utils.mjs +++ b/lib/utils/_utils.mjs @@ -70,6 +70,8 @@ import {default as verticeGeoms} from './verticeGeoms.mjs' import xhr from './xhr.mjs' +import { numericFormatter, getSeparators } from './numericFormatter.mjs'; + export default { stats, render, @@ -96,4 +98,6 @@ export default { userIndexedDB, verticeGeoms, xhr, + numericFormatter, + getSeparators } \ No newline at end of file diff --git a/lib/utils/numericFormatter.mjs b/lib/utils/numericFormatter.mjs new file mode 100644 index 0000000000..d35d452214 --- /dev/null +++ b/lib/utils/numericFormatter.mjs @@ -0,0 +1,164 @@ +/** +@module /utils/numericFormatter +*/ + +/** +@function numericFormatter + +@description +Returns the formatted string based on the provided formatterParams. + +@param {Object} params An infoj entry or compliant object. +@param {Boolean} entry.undo - removes formatting +Method returns numeric value if true. +@returns {string} Returns formatted string from numeric value without the numeric flag. +*/ +export function numericFormatter(params) { + + if (!params.formatter) return params.value; + + if(params?.type !== 'integer') return params.value; + + // If formatter is money use en-GB locale + if (params.formatter === 'money') { + params.formatterParams ??= {} + params.formatterParams.locale = 'en-GB' + }; + + if(!params.formatterParams?.locale) return params.value; + + //Do the opposite of formatting + if (params.undo) { + return undoFormatting(params) + } + + //Get the actual formatted value + return getFormatterParams(params).value + +} + +function getFormatterParams(params) { + let value = params.value; + let prefix = params.prefix ??= ''; + let suffix = params.suffix ??= ''; + let round = params.round; + + if (params.filterInput) { + prefix = '' + suffix = '' + round = null + } + + if (!value) { + return { value: null } + } + + const negative = value[0] === '-' + + if (negative) { + value = value.substring(1, value.length) + } + + let rawValue; + + //Check if supplied value is a valid number + if (isNaN(parseFloat(value))) { + return { value: `${prefix} ${suffix}`, separators: { thousands: '', decimals: '' } } + } + + // Assign if nullish. + params.formatterParams ??= {}; + + // Assign user language as locale if nullish but not null. + if (params.formatterParams.locale !== null || params.formatter === 'toLocaleString') { + params.formatterParams.locale ??= mapp.language; + } + + //Setup formatter options for rounding + params.formatterParams.options ??= {} + params.formatterParams.options.maximumFractionDigits ??= params.formatterParams.precision ??= round + params.formatterParams.options.minimumFractionDigits ??= params.formatterParams.precision ??= round + + //Tabulator formatterOptions + if (params.formatterParams?.decimal || params.formatterParams?.thousand) { + + params.formatterParams.decimal ??= '.' + + rawValue = parseFloat(value) + + let rawList = rawValue.toLocaleString('en-GB', params.formatterParams.options).split('.') + + rawList[0] = rawList[0].replaceAll(',', params.formatterParams.thousand) + rawValue = rawList.join(params.formatterParams.decimal) + + } else { + + //Infoj formatter options + rawValue = parseFloat(value).toLocaleString(params.formatterParams.locale, params.formatterParams.options) + } + + //Add The affixes + let formattedValue = `${prefix}${rawValue}${suffix}` + + //Look for separators in formatterOptions. + let separators = [params.formatterParams?.thousand, params.formatterParams?.decimal] + + let localeSeparators = Array.from(new Set(formattedValue.match(/\D/g))) + + localeSeparators[1] ??= '.' + + //If not supplied look in the formatted string + separators[0] = separators[0] ? separators[0] : localeSeparators[0] + separators[1] = separators[1] ? separators[1] : localeSeparators[1] + + formattedValue = `${negative ? '-' : ''}${formattedValue}` + + return { + value: formattedValue, + separators: { + thousands: separators[0], + decimals: separators[1] + } + } +} + +function undoFormatting(params) { + + //Determine thousand and decimal markers + let value = params.value + + if (!params.value) return null; + + const separators = getSeparators(params) + + const negative = value[0] === '-' + + value = negative ? value.substring(1, value.length) : value + + //Strip out thousand and decimal markers, replacing decimal with '.' + value = value.replaceAll(separators.thousands, '') + + if (separators.decimals) { + value = separators.decimals === '.' || separators.decimals === '' ? value : value.replace(separators.decimals, '.') + } + + if (!Number(value)) { + value = value.replaceAll(/\D+/g, ''); + } + + return `${negative ? '-' : ''}${value}` +} + +export function getSeparators(params) { + + //Do nothing if entry is null or no formatter is present + if (!params) return; + + if (!params.formatter && params?.type !== 'integer') return { decimals: '.' }; + + //Use a number to determine what the fields + //formatted input would look like + params.value = 1000000.99 + + return getFormatterParams(params).separators +} \ No newline at end of file From 6ce7389ea90cd72bffdfbed68ae4f71879642dd0 Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Fri, 14 Jun 2024 14:45:37 +0200 Subject: [PATCH 03/17] Numeric input with formatting support; --- lib/ui/elements/numericInput.mjs | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/lib/ui/elements/numericInput.mjs b/lib/ui/elements/numericInput.mjs index 2f17fa2373..6f93c1ce49 100644 --- a/lib/ui/elements/numericInput.mjs +++ b/lib/ui/elements/numericInput.mjs @@ -85,8 +85,17 @@ export default function numericInput(params) { changeDelay = setTimeout(() => refreshDisplay(), 1200); }}>` - const displayValue = mapp.utils.html.node`
${formatValue(numericInput.value)}` function formatValue(val) { @@ -99,6 +108,7 @@ export default function numericInput(params) { function refreshDisplay() { displayValue.textContent = formatValue(numericInput.value) displayValue.classList.remove('display-none'); + displayValue.style.backgroundColor = "var(--color-changed)"; numericInput.classList.add('display-none'); } @@ -119,7 +129,6 @@ export default function numericInput(params) { function numericChecks(e) { - // remove invalid css e.target.classList.remove('invalid'); let value; From 1d8f890013c7828bc0ff0ff02be4d9cb917e7d50 Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Fri, 14 Jun 2024 16:14:56 +0200 Subject: [PATCH 04/17] numericFormatter - updates; --- lib/ui/elements/numericInput.mjs | 3 ++- lib/ui/locations/entries/numeric.mjs | 36 ---------------------------- lib/utils/numericFormatter.mjs | 35 +++++++++++++++++---------- 3 files changed, 24 insertions(+), 50 deletions(-) diff --git a/lib/ui/elements/numericInput.mjs b/lib/ui/elements/numericInput.mjs index 6f93c1ce49..daf7077523 100644 --- a/lib/ui/elements/numericInput.mjs +++ b/lib/ui/elements/numericInput.mjs @@ -96,9 +96,10 @@ export default function numericInput(params) { width: 100%; text-align: right; pointer-events: none;" - >${formatValue(numericInput.value)}` + >${formatValue()}` function formatValue(val) { + if(val === undefined) return mapp.utils.numericFormatter(params); return mapp.utils.numericFormatter({ ...params, ...{value: val} }) } diff --git a/lib/ui/locations/entries/numeric.mjs b/lib/ui/locations/entries/numeric.mjs index 2577fcd964..9c5843f0d7 100644 --- a/lib/ui/locations/entries/numeric.mjs +++ b/lib/ui/locations/entries/numeric.mjs @@ -126,39 +126,3 @@ function edit(entry) { } }) } - -function onFocus(e, entry) { - e.target.value = parseFloat(entry.newValue || entry.value) - e.target.type = 'number'; -} - -function onBlur(e, entry) { - e.target.type = ''; - e.target.value = mapp.ui.elements.numericFormatter(entry) -} - -function handleKeyUp(e, entry) { - - if (entry.type === 'integer') { - e.target.value = parseInt(e.target.value); - } - - if (entry.type === 'numeric') { - e.target.value = parseFloat(e.target.value); - } - - if (e.target.value === 0) { - entry.newValue = 0; - } - - if(!e.target.value) { - entry.newValue = null - } else { - - entry.newValue = e.target.value; - } - - entry.location.view?.dispatchEvent( - new CustomEvent('valChange', { detail: entry }) - ); -} \ No newline at end of file diff --git a/lib/utils/numericFormatter.mjs b/lib/utils/numericFormatter.mjs index d35d452214..d341fe04d9 100644 --- a/lib/utils/numericFormatter.mjs +++ b/lib/utils/numericFormatter.mjs @@ -15,24 +15,33 @@ Method returns numeric value if true. */ export function numericFormatter(params) { + // do nothing if no formatter if (!params.formatter) return params.value; - - if(params?.type !== 'integer') return params.value; + + // always add formatter params + default locale + params.formatterParams ??= { + locale: 'en-GB' + }; + + // to retire: allow to format other numbers than integers + //if(params?.type !== 'integer') return params.value; // If formatter is money use en-GB locale - if (params.formatter === 'money') { + // to retire. toLocaleString is more flexible + /*if (params.formatter === 'money') { params.formatterParams ??= {} params.formatterParams.locale = 'en-GB' - }; + };*/ - if(!params.formatterParams?.locale) return params.value; + /*if(!params.formatterParams?.locale) { // retire: assigned earlier + return params.value; + }*/ //Do the opposite of formatting - if (params.undo) { - return undoFormatting(params) - } + if (params.undo) return undoFormatting(params) + - //Get the actual formatted value + // Get the actual formatted value return getFormatterParams(params).value } @@ -67,12 +76,12 @@ function getFormatterParams(params) { } // Assign if nullish. - params.formatterParams ??= {}; + //params.formatterParams ??= {}; // done earlier by default // Assign user language as locale if nullish but not null. - if (params.formatterParams.locale !== null || params.formatter === 'toLocaleString') { + /*if (params.formatterParams.locale !== null || params.formatter === 'toLocaleString') { params.formatterParams.locale ??= mapp.language; - } + }*/ //Setup formatter options for rounding params.formatterParams.options ??= {} @@ -86,7 +95,7 @@ function getFormatterParams(params) { rawValue = parseFloat(value) - let rawList = rawValue.toLocaleString('en-GB', params.formatterParams.options).split('.') + let rawList = rawValue.toLocaleString(params.formatterParams.locale, params.formatterParams.options).split('.') rawList[0] = rawList[0].replaceAll(',', params.formatterParams.thousand) rawValue = rawList.join(params.formatterParams.decimal) From 2c1b1462f352e16a8e4086ddc3893429a3be9638 Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Fri, 14 Jun 2024 16:21:25 +0200 Subject: [PATCH 05/17] numericFormatter - cleaning up comments on retired code; --- lib/utils/numericFormatter.mjs | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/lib/utils/numericFormatter.mjs b/lib/utils/numericFormatter.mjs index d341fe04d9..6f80b23543 100644 --- a/lib/utils/numericFormatter.mjs +++ b/lib/utils/numericFormatter.mjs @@ -22,20 +22,6 @@ export function numericFormatter(params) { params.formatterParams ??= { locale: 'en-GB' }; - - // to retire: allow to format other numbers than integers - //if(params?.type !== 'integer') return params.value; - - // If formatter is money use en-GB locale - // to retire. toLocaleString is more flexible - /*if (params.formatter === 'money') { - params.formatterParams ??= {} - params.formatterParams.locale = 'en-GB' - };*/ - - /*if(!params.formatterParams?.locale) { // retire: assigned earlier - return params.value; - }*/ //Do the opposite of formatting if (params.undo) return undoFormatting(params) @@ -75,14 +61,6 @@ function getFormatterParams(params) { return { value: `${prefix} ${suffix}`, separators: { thousands: '', decimals: '' } } } - // Assign if nullish. - //params.formatterParams ??= {}; // done earlier by default - - // Assign user language as locale if nullish but not null. - /*if (params.formatterParams.locale !== null || params.formatter === 'toLocaleString') { - params.formatterParams.locale ??= mapp.language; - }*/ - //Setup formatter options for rounding params.formatterParams.options ??= {} params.formatterParams.options.maximumFractionDigits ??= params.formatterParams.precision ??= round From c0446e27f9b07d8f2278dd347a90bf3648c21220 Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Mon, 17 Jun 2024 11:15:14 +0200 Subject: [PATCH 06/17] numericFormatter reassignment; --- lib/ui/elements/slider_ab.mjs | 6 +++--- lib/ui/layers/filters.mjs | 4 ++-- lib/ui/utils/tabulator.mjs | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/ui/elements/slider_ab.mjs b/lib/ui/elements/slider_ab.mjs index 32b8ef6b22..94a67b932e 100644 --- a/lib/ui/elements/slider_ab.mjs +++ b/lib/ui/elements/slider_ab.mjs @@ -62,7 +62,7 @@ export default params => { } //Get the number value and the formatted value - const numericValue = Number(e.target.value) || mapp.ui.elements.numericFormatter(params.entry,e.target.value,true) + const numericValue = Number(e.target.value) || mapp.utils.numericFormatter(params.entry,e.target.value,true) let value = Number(numericValue) e.target.value = value > params.max ? params.max : value element.style.setProperty(`--${e.target.dataset.id}`, e.target.value < params.min ? params.min : e.target.value) @@ -74,11 +74,11 @@ export default params => { if(e.target.type === 'text' && el.type === 'range'){ el.value = value params.entry.value = value - e.target.value = mapp.ui.elements.numericFormatter(params.entry) + e.target.value = mapp.utils.numericFormatter(params.entry) } else{ params.entry.value = e.target.value - el.value = mapp.ui.elements.numericFormatter(params.entry,e.target.value) + el.value = mapp.utils.numericFormatter(params.entry,e.target.value) } if(el.dataset.id === 'a'){ currMin = Number(el.value) || e.target.value diff --git a/lib/ui/layers/filters.mjs b/lib/ui/layers/filters.mjs index 6448b462fd..34775b1990 100644 --- a/lib/ui/layers/filters.mjs +++ b/lib/ui/layers/filters.mjs @@ -245,14 +245,14 @@ async function filter_numeric(layer, filter) { step: filter.step, entry: entry, label_a: `${mapp.dictionary.layer_filter_greater_than} ${affix}`, // Greater than - val_a: mapp.ui.elements.numericFormatter(entry, filter.minmax[0]), + val_a: mapp.utils.numericFormatter(entry, filter.minmax[0]), slider_a: Number(filter.minmax[0]), callback_a: e => { layer.filter.current[filter.field].gte = Number(e) applyFilter(layer) }, label_b: `${mapp.dictionary.layer_filter_less_than} ${affix}`, // Less than - val_b: mapp.ui.elements.numericFormatter(entry, filter.minmax[1]), + val_b: mapp.utils.numericFormatter(entry, filter.minmax[1]), slider_b: Number(filter.minmax[1]), callback_b: e => { layer.filter.current[filter.field].lte = Number(e) diff --git a/lib/ui/utils/tabulator.mjs b/lib/ui/utils/tabulator.mjs index 4d8d8d571f..4b12c9306d 100644 --- a/lib/ui/utils/tabulator.mjs +++ b/lib/ui/utils/tabulator.mjs @@ -396,10 +396,10 @@ function numeric(_this) { //Get the numeric/integer value. entry.value = e.target.value - const numericValue = mapp.ui.elements.numericFormatter(entry,e.target.value,true) + const numericValue = mapp.utils.numericFormatter(entry,e.target.value,true) //Get the formatted value entry.value = numericValue - const formattedValue = mapp.ui.elements.numericFormatter(entry) + const formattedValue = mapp.utils.numericFormatter(entry) e.target.value = numericValue return { formatted: formattedValue, numericValue: numericValue} From 083dd21e5c7e1664bb58f416fd2adc51671019e4 Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Mon, 17 Jun 2024 16:58:46 +0200 Subject: [PATCH 07/17] numericFormatter - reassignment; --- lib/ui/elements/slider_ab.mjs | 2 +- lib/ui/utils/tabulator.mjs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/ui/elements/slider_ab.mjs b/lib/ui/elements/slider_ab.mjs index 94a67b932e..9543a09419 100644 --- a/lib/ui/elements/slider_ab.mjs +++ b/lib/ui/elements/slider_ab.mjs @@ -51,7 +51,7 @@ export default params => { e.target.value = e.target.value === '' ? replaceValue : e.target.value; //Determine thousand and decimal markers - const separators = mapp.ui.elements.getSeparators(params.entry) || {decimals: '.'} + const separators = mapp.utils.getSeparators(params.entry) || {decimals: '.'} //Ignore empty values or if the user just typed `1.` for example. //Until they type `1.1`. diff --git a/lib/ui/utils/tabulator.mjs b/lib/ui/utils/tabulator.mjs index 4b12c9306d..c87266e1e1 100644 --- a/lib/ui/utils/tabulator.mjs +++ b/lib/ui/utils/tabulator.mjs @@ -383,7 +383,7 @@ function numeric(_this) { function getValues(entry){ const returnValues = { formatted: e.target.value, numericValue: e.target.value} //Get the separators - const separators = mapp.ui.elements.getSeparators(entry) + const separators = mapp.utils.getSeparators(entry) //Ignore empty values or if the user just typed `1.` for example const stringValue = e.target.value.toString() if(!e.target.value && type === 'min') return returnValues; From ecfaeea585e0b5b238d5e797e40c75ceaa5c7e75 Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Tue, 18 Jun 2024 17:21:45 +0200 Subject: [PATCH 08/17] Updated doc; --- lib/ui/elements/numericInput.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ui/elements/numericInput.mjs b/lib/ui/elements/numericInput.mjs index daf7077523..f7d801d678 100644 --- a/lib/ui/elements/numericInput.mjs +++ b/lib/ui/elements/numericInput.mjs @@ -1,5 +1,5 @@ /** -### mapp.ui.elements.numericInput() +### mapp.utils.numericInput() Exports the numericInput elements method. From bdfec84879c4be20ffbb7c4558a4eac3be110957 Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Wed, 19 Jun 2024 13:32:42 +0200 Subject: [PATCH 09/17] Numeric formatter - params assignment; --- lib/utils/numericFormatter.mjs | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/utils/numericFormatter.mjs b/lib/utils/numericFormatter.mjs index 6f80b23543..d712825ecb 100644 --- a/lib/utils/numericFormatter.mjs +++ b/lib/utils/numericFormatter.mjs @@ -33,6 +33,7 @@ export function numericFormatter(params) { } function getFormatterParams(params) { + let value = params.value; let prefix = params.prefix ??= ''; let suffix = params.suffix ??= ''; @@ -60,7 +61,11 @@ function getFormatterParams(params) { if (isNaN(parseFloat(value))) { return { value: `${prefix} ${suffix}`, separators: { thousands: '', decimals: '' } } } - + + // always add formatter params + default locale + params.formatterParams ??= { + locale: 'en-GB' + }; //Setup formatter options for rounding params.formatterParams.options ??= {} params.formatterParams.options.maximumFractionDigits ??= params.formatterParams.precision ??= round From a476da5b23e35b1e152360ccd5fcc13beefac6be Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Wed, 19 Jun 2024 14:23:09 +0200 Subject: [PATCH 10/17] Tables - header filters simplified; --- lib/ui/utils/tabulator.mjs | 43 +------------------------------------- 1 file changed, 1 insertion(+), 42 deletions(-) diff --git a/lib/ui/utils/tabulator.mjs b/lib/ui/utils/tabulator.mjs index c87266e1e1..7c5373a50c 100644 --- a/lib/ui/utils/tabulator.mjs +++ b/lib/ui/utils/tabulator.mjs @@ -365,46 +365,6 @@ function numeric(_this) { // Function to filter the data. function NumericEvent(e, type) { - let formattedValue = e.target.value; - - //Find formatterParams - const entry = _this.layer.infoj.find(entry => entry.label === _this.label && entry.type === 'dataview') - const tableField = entry.table.columns.find(column => column.field === field) - - if(tableField.formatter){ - entry.formatter = tableField.formatter - entry.formatterParams = tableField.formatterParams - entry.filterInput = true - const values = getValues(entry) - formattedValue = values.formatted - e.target.value = values.numericValue - } - - function getValues(entry){ - const returnValues = { formatted: e.target.value, numericValue: e.target.value} - //Get the separators - const separators = mapp.utils.getSeparators(entry) - //Ignore empty values or if the user just typed `1.` for example - const stringValue = e.target.value.toString() - if(!e.target.value && type === 'min') return returnValues; - if(stringValue[0] === '-' && stringValue.length === 1){ - return returnValues; - } - if(tableField.headerFilter === 'numeric' && stringValue.substring(stringValue.indexOf(separators.decimals), stringValue.length) === separators.decimals){ - return returnValues; - } - - //Get the numeric/integer value. - entry.value = e.target.value - const numericValue = mapp.utils.numericFormatter(entry,e.target.value,true) - //Get the formatted value - entry.value = numericValue - const formattedValue = mapp.utils.numericFormatter(entry) - - e.target.value = numericValue - return { formatted: formattedValue, numericValue: numericValue} - } - // If type is min, use >= filter, else use <= filter. const filterType = type === 'min' ? '>=' : '<=' const filterCurrent = type === 'min' ? 'gte' : 'lte' @@ -433,8 +393,7 @@ function numeric(_this) { _this.update(); } } - formattedValue ??= null - e.target.value = formattedValue + } // flex container must be encapsulated since tabulator will strip attribute from most senior item returned. From 158c6cc74013eebe37492806e0e4aa4a496b13fc Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Thu, 20 Jun 2024 18:04:42 +0200 Subject: [PATCH 11/17] Filters ab - updated arguments for numericFormatters; --- lib/ui/layers/filters.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/ui/layers/filters.mjs b/lib/ui/layers/filters.mjs index 34775b1990..d907244c1d 100644 --- a/lib/ui/layers/filters.mjs +++ b/lib/ui/layers/filters.mjs @@ -245,14 +245,14 @@ async function filter_numeric(layer, filter) { step: filter.step, entry: entry, label_a: `${mapp.dictionary.layer_filter_greater_than} ${affix}`, // Greater than - val_a: mapp.utils.numericFormatter(entry, filter.minmax[0]), + val_a: mapp.utils.numericFormatter({... entry, ...{value: filter.minmax[0]} }), slider_a: Number(filter.minmax[0]), callback_a: e => { layer.filter.current[filter.field].gte = Number(e) applyFilter(layer) }, label_b: `${mapp.dictionary.layer_filter_less_than} ${affix}`, // Less than - val_b: mapp.utils.numericFormatter(entry, filter.minmax[1]), + val_b: mapp.utils.numericFormatter({... entry, ...{value: filter.minmax[1]} }), slider_b: Number(filter.minmax[1]), callback_b: e => { layer.filter.current[filter.field].lte = Number(e) From 055d78d7f9541e79b891dde62fc3b534b38a7288 Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Fri, 21 Jun 2024 12:52:08 +0200 Subject: [PATCH 12/17] numericFormatter - improved falsy condition; --- lib/utils/numericFormatter.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/utils/numericFormatter.mjs b/lib/utils/numericFormatter.mjs index d712825ecb..294d4e40d9 100644 --- a/lib/utils/numericFormatter.mjs +++ b/lib/utils/numericFormatter.mjs @@ -45,7 +45,7 @@ function getFormatterParams(params) { round = null } - if (!value) { + if (!value && value !== 0) { return { value: null } } From b5f3b578142df95b70d314302df16caca3c77f47 Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Fri, 21 Jun 2024 15:09:10 +0200 Subject: [PATCH 13/17] Slider ab - updated formatter arguments; --- lib/ui/elements/slider_ab.mjs | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/lib/ui/elements/slider_ab.mjs b/lib/ui/elements/slider_ab.mjs index 9543a09419..063bad5506 100644 --- a/lib/ui/elements/slider_ab.mjs +++ b/lib/ui/elements/slider_ab.mjs @@ -56,14 +56,20 @@ export default params => { //Ignore empty values or if the user just typed `1.` for example. //Until they type `1.1`. const stringValue = e.target.value.toString() + if(stringValue[0] === '-' && stringValue.length === 1) return; + if(params.entry.type !== 'integer'){ if(stringValue.substring(stringValue.indexOf(separators.decimals), stringValue.length) === separators.decimals ) return; } //Get the number value and the formatted value - const numericValue = Number(e.target.value) || mapp.utils.numericFormatter(params.entry,e.target.value,true) + const numericValue = Number(e.target.value) || mapp.utils.numericFormatter({...params.entry, ...{value: e.target.value, undo: true}}) let value = Number(numericValue) + + console.log({ + numericValue: value + }) e.target.value = value > params.max ? params.max : value element.style.setProperty(`--${e.target.dataset.id}`, e.target.value < params.min ? params.min : e.target.value) @@ -78,7 +84,7 @@ export default params => { } else{ params.entry.value = e.target.value - el.value = mapp.utils.numericFormatter(params.entry,e.target.value) + el.value = mapp.utils.numericFormatter({...params.entry,...{value: e.target.value }}) } if(el.dataset.id === 'a'){ currMin = Number(el.value) || e.target.value From 0ad982384c348a29f8408ebdab794dcef5b92afa Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Mon, 24 Jun 2024 11:05:14 +0200 Subject: [PATCH 14/17] Numeric entry - default formatter "toLocaleString" --- lib/ui/locations/entries/numeric.mjs | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/ui/locations/entries/numeric.mjs b/lib/ui/locations/entries/numeric.mjs index 9c5843f0d7..7655ba9fb7 100644 --- a/lib/ui/locations/entries/numeric.mjs +++ b/lib/ui/locations/entries/numeric.mjs @@ -23,7 +23,11 @@ Returns a numeric entry node for the location.view. export default function numeric(entry) { - entry.formatterParams ??= {} + entry.formatter ??= 'toLocaleString'; + + entry.formatterParams ??= { + locale: 'en-GB' + } entry.formatterParams.options ??= {} From 20422f7089f6659127c544b622505bfaf2f745f2 Mon Sep 17 00:00:00 2001 From: Robert Hurst Date: Mon, 24 Jun 2024 14:48:38 +0200 Subject: [PATCH 15/17] Fix double quotes issue --- lib/ui/elements/numericInput.mjs | 49 ++++++++++++++++---------------- 1 file changed, 24 insertions(+), 25 deletions(-) diff --git a/lib/ui/elements/numericInput.mjs b/lib/ui/elements/numericInput.mjs index f7d801d678..338d3340b4 100644 --- a/lib/ui/elements/numericInput.mjs +++ b/lib/ui/elements/numericInput.mjs @@ -33,22 +33,22 @@ export default function numericInput(params) { params.maxlength ??= 256 params.step ??= 1 - if(params.formatter) { - + if (params.formatter) { + const container = mapp.utils.html.node`
{ - e.stopPropagation(); - displayValue.classList.add('display-none'); - numericInput.classList.remove('display-none'); - numericInput.focus(); - }} + e.stopPropagation(); + displayValue.classList.add('display-none'); + numericInput.classList.remove('display-none'); + numericInput.focus(); + }} >`; let changeDelay; - const numericInput = mapp.utils.html.node` + const numericInput = mapp.utils.html.node` { - if(e.which === 13) refreshDisplay(); - }} - oninput=${ - e => { + if (e.which === 13) refreshDisplay(); + }} + oninput=${e => { numericChecks(e); - if(changeDelay) { + if (changeDelay) { clearTimeout(changeDelay); changeDelay = null; } changeDelay = setTimeout(() => refreshDisplay(), 1200); } - } - onchange=${e => { - if(changeDelay) { - clearTimeout(changeDelay); - changeDelay = null; } - changeDelay = setTimeout(() => refreshDisplay(), 1200); - }} + onchange=${e => { + if (changeDelay) { + clearTimeout(changeDelay); + changeDelay = null; + } + changeDelay = setTimeout(() => refreshDisplay(), 1200); + }} onblur=${() => { - changeDelay = setTimeout(() => refreshDisplay(), 1200); - }}>` + changeDelay = setTimeout(() => refreshDisplay(), 1200); + }}>` const displayValue = mapp.utils.html.node`
Date: Tue, 25 Jun 2024 16:05:28 +0200 Subject: [PATCH 16/17] Default formatter inside .numericFormatter; --- lib/ui/elements/slider_ab.mjs | 3 --- lib/utils/numericFormatter.mjs | 2 ++ 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/lib/ui/elements/slider_ab.mjs b/lib/ui/elements/slider_ab.mjs index 063bad5506..93d24bfdb0 100644 --- a/lib/ui/elements/slider_ab.mjs +++ b/lib/ui/elements/slider_ab.mjs @@ -67,9 +67,6 @@ export default params => { const numericValue = Number(e.target.value) || mapp.utils.numericFormatter({...params.entry, ...{value: e.target.value, undo: true}}) let value = Number(numericValue) - console.log({ - numericValue: value - }) e.target.value = value > params.max ? params.max : value element.style.setProperty(`--${e.target.dataset.id}`, e.target.value < params.min ? params.min : e.target.value) diff --git a/lib/utils/numericFormatter.mjs b/lib/utils/numericFormatter.mjs index 294d4e40d9..57302fef5f 100644 --- a/lib/utils/numericFormatter.mjs +++ b/lib/utils/numericFormatter.mjs @@ -14,6 +14,8 @@ Method returns numeric value if true. @returns {string} Returns formatted string from numeric value without the numeric flag. */ export function numericFormatter(params) { + + params.formatter ??= 'toLocaleString'; // do nothing if no formatter if (!params.formatter) return params.value; From bfc29636c362f636bc5dd3c2b8942658f98b36e7 Mon Sep 17 00:00:00 2001 From: Agata Brok Date: Tue, 25 Jun 2024 16:25:05 +0200 Subject: [PATCH 17/17] Updated doc; --- lib/ui/elements/numericInput.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/ui/elements/numericInput.mjs b/lib/ui/elements/numericInput.mjs index 338d3340b4..65ab72d533 100644 --- a/lib/ui/elements/numericInput.mjs +++ b/lib/ui/elements/numericInput.mjs @@ -1,5 +1,5 @@ /** -### mapp.utils.numericInput() +### mapp.ui.elements.numericInput() Exports the numericInput elements method. @@ -23,7 +23,7 @@ Creates a type=number input element with validation checks. @param {string} [params.placeholder] @param {Object} [params.entry] optional location entry @param {Function} [params.callback] -function to execute on keyup event which takes event and entry{} as arguments. +function to execute on `input` event which takes current input value and entry{} as arguments. Callback will only execute with defined entry and after successful numeric validation. @returns {Object} HTML input element */