demarches-normaliennes/app/javascript/controllers/format_controller.ts

81 lines
2.4 KiB
TypeScript
Raw Normal View History

import { ApplicationController } from './application_controller';
export class FormatController extends ApplicationController {
connect() {
const format = this.element.getAttribute('data-format');
switch (format) {
case 'list':
this.on('change', (event) => {
const target = event.target as HTMLInputElement;
const value = this.formatList(target.value);
replaceValue(target, value);
});
break;
case 'iban':
this.on('input', (event) => {
const target = event.target as HTMLInputElement;
const value = this.formatIBAN(target.value);
replaceValue(target, value);
});
2023-05-30 14:42:36 +02:00
break;
case 'integer':
this.on('input', (event) => {
const target = event.target as HTMLInputElement;
const value = this.formatInteger(target.value);
replaceValue(target, value);
2023-05-30 14:42:36 +02:00
});
break;
case 'decimal':
this.on('input', (event) => {
const target = event.target as HTMLInputElement;
const value = this.formatDecimal(target.value);
replaceValue(target, value);
});
break;
}
}
private formatList(value: string) {
return value.replace(/;/g, ',');
}
private formatIBAN(value: string) {
return value
.replace(/[^\dA-Z]/gi, '')
.replace(/(.{4})/g, '$1 ')
.trim()
.toUpperCase();
}
2023-05-30 14:42:36 +02:00
private formatInteger(value: string) {
return value.replace(/[^-?\d]/g, '');
2023-05-30 14:42:36 +02:00
}
private formatDecimal(value: string) {
let formattedNumber = value;
const lastDotIndex = value.lastIndexOf('.');
const lastCommaIndex = value.lastIndexOf(',');
if (lastDotIndex != -1 && lastCommaIndex != -1) {
if (lastDotIndex < lastCommaIndex) {
formattedNumber = value.replace(/\./g, '');
} else {
formattedNumber = value.replace(/,/g, '');
}
}
return formattedNumber
.replace(/,/g, '.')
.replace(new RegExp(`[^-?\\d.]`, 'g'), '');
}
}
function replaceValue(target: HTMLInputElement, value: string) {
const delta = target.value.length - value.length;
const start = target.selectionStart;
const end = target.selectionStart;
const dir = target.selectionDirection;
target.value = value;
target.selectionStart = start ? start - delta : 0;
target.selectionEnd = end ? end - delta : 0;
target.selectionDirection = dir;
}