Supporting Persian and Arabic Numerals in TouchSpin Plugin

[codecupis]

The TouchSpin plugin does not natively support Persian (Farsi) or Arabic numerals. When users input numbers in Persian (e.g., ۱۲۰) or Arabic (e.g., ١٢٠), the plugin fails to process them correctly because it expects standard Latin numerals (e.g., 120).

This issue arises because the plugin's internal logic relies on parseFloat and other JavaScript functions that only recognize Latin numerals. As a result, inputs containing Persian or Arabic numerals are either ignored or cause unexpected behavior.

Solution: Convert Persian and Arabic Numerals to Latin Numerals

To resolve this issue, we added a helper function that converts Persian and Arabic numerals to their Latin equivalents before processing the input. This ensures that the plugin can handle and process numbers in any numeral system.
Steps to Implement the Solution:

Create a Conversion Function:
A JavaScript function was created to replace Persian and Arabic numerals with their corresponding Latin numerals.

function convertPersianArabicToEnglishNumbers(input) {
    const persianNumbers = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
    const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];

    let output = input;
    for (let i = 0; i < 10; i++) {
        output = output.replace(new RegExp(persianNumbers[i], 'g'), i);
        output = output.replace(new RegExp(arabicNumbers[i], 'g'), i);
    }
    return output;
}

Integrate the Conversion Function:
The convertPersianArabicToEnglishNumbers function was integrated into the plugin's logic at key points where user input is processed. Specifically, it was added to:

The _setInitval function to handle initial values.

The _checkValue function to validate and process user input.

The upOnce and downOnce functions to ensure proper increment and decrement operations.

Example integration in _checkValue:

function _checkValue() {
    let val = originalinput.val();
    val = convertPersianArabicToEnglishNumbers(val); // Convert numerals
    val = settings.callback_before_calculation(val);

    if (val === '') {
        if (settings.replacementval !== '') {
            originalinput.val(settings.replacementval);
            originalinput.trigger('change');
        }
        return;
    }

    // Rest of the function logic...
}

Test the Solution:
The plugin was thoroughly tested with inputs containing Persian, Arabic, and Latin numerals to ensure that all cases were handled correctly. The conversion function successfully transformed the numerals, and the plugin processed the inputs as expected.

Code Changes

Here are the key changes made to the plugin:

1. Conversion Function:

function convertPersianArabicToEnglishNumbers(input) {
    const persianNumbers = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
    const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];

    let output = input;
    for (let i = 0; i < 10; i++) {
        output = output.replace(new RegExp(persianNumbers[i], 'g'), i);
        output = output.replace(new RegExp(arabicNumbers[i], 'g'), i);
    }
    return output;
}

2. Integration in _setInitval:

function _setInitval() {
    if (settings.initval !== '' && originalinput.val() === '') {
        let initval = convertPersianArabicToEnglishNumbers(settings.initval);
        originalinput.val(initval);
    }
}

3. Integration in _checkValue:

function _checkValue() {
    let val = originalinput.val();
    val = convertPersianArabicToEnglishNumbers(val); // Convert numerals
    val = settings.callback_before_calculation(val);

    if (val === '') {
        if (settings.replacementval !== '') {
            originalinput.val(settings.replacementval);
            originalinput.trigger('change');
        }
        return;
    }

    // Rest of the function logic...
}

4. Integration in upOnce and downOnce:

function upOnce() {
    if (originalinput.is(':disabled,[readonly]')) {
        return;
    }
    _checkValue();
    let value = parseFloat(settings.callback_before_calculation(convertPersianArabicToEnglishNumbers(elements.input.val())));
    // Rest of the function logic...
}

function downOnce() {
    if (originalinput.is(':disabled,[readonly]')) {
        return;
    }
    _checkValue();
    let value = parseFloat(settings.callback_before_calculation(convertPersianArabicToEnglishNumbers(elements.input.val())));
    // Rest of the function logic...
}

After implementing the solution, the TouchSpin plugin now fully supports Persian and Arabic numerals. Users can input numbers in their preferred numeral system, and the plugin will automatically convert and process them correctly.