NumPad: How to use plus/minus sign with Variable Fraction demo?

Number entry & pickers
1

Please, can rewrite numpad Variable Fraction demo with plus/minus buttons?

2

Hi Daniel,

Here is a possible solution for your use case:

leftKey: {
    text: '.',
    value: '.'
},
rightKey: {
    text: '+/-',
    variable: 'sign:-:',
    track: false
},
template: '{sign}ddddddddd',
maxLength: 9,
maxScale: 9,
allowLeadingZero: true,
parseValue: function (value) {
    if (value) {
        return value.toString().replace(thousands, '').split('');
    }
    return [];
},
formatValue: function (numbers, variables) {
    var ret = '',
        l = numbers.length,
        decimals,
        i;

    // Add leading zeroes if necessary
    if (numbers[0] == '.') {
        numbers.unshift(0);
        l++;
    }

    ret = numbers.join('').split(decimal);

    var addSign = (+ret.join(decimal) && variables && variables.sign);

    ret[0] = ret[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands);

    return (addSign ? variables.sign : '') + ret.join(decimal);
},
validate: function (data, inst) {
    var s = inst.settings,
        values = data.values,
        variables = data.variables,
        disabledButtons = [],
        invalid = false;

    if (values.length >= s.maxLength || values.indexOf(decimal) !== -1) {
        disabledButtons.push(decimal);
    }

    if (values.length == 1 && values[0] === 0) {
        for (var i = 1; i <= 9; i++) {
            disabledButtons.push(i);
        }
    }

    if (!values.length || values[values.length - 1] == decimal) {
        invalid = true;
    }

    // Only allow max maxScale decimal values
    if (values.length > (s.maxScale + 1) && values[values.length - s.maxScale - 1] == decimal) {
        for (var i = 0; i <= 9; i++) {
            disabledButtons.push(i);
        }
    }

    // Display the formatted value
    if (inst.isVisible()) {
        var sign = variables && variables.sign ? variables.sign : '';
        $('.mbsc-np-dsp', inst._markup).html(sign + inst.settings.formatValue(values) || '&nbsp;');
    }

    return {
        invalid: invalid,
        disabled: disabledButtons
    };
}
3

Thank you. Works like a charm

4

Starting from version 4.10.0 there is a new entryMode setting that supports negative values with variable fractions out of the box! Check out the rewritten demo here as well!