Add support for min, max and step

[dotmra]

Hey,

I have just started using Preline and I was about to implement Input Number on my site, but I saw that a value below 0 wasn't allowed.

• Add minimum value via data-hs-input-number-min
• Add maximum value via data-hs-input-number-max
• Allows the input enter negative number by default (Before it didn't allow numbers under 0)
• Add incremental/decremental steps via data-hs-input-number-step (the steps can be different between increment and decrement) (Fixes Steps on number input #304)

Let me know if you want me to make any changes.

(I have tested it by running webpack and using the generated minified js in my localhost)

[dotmra]

@jahaganiev
Sorry for mentioning you.

I have made a workaround for the project that I am working on, it will reach production and users on wednesday.
I know that the timeline might not align with yours for the project, however for me I'd be grateful if I could get a review or perhaps some notes. So I can make the changes while the code is fresh in my mind.

Below you can find my workaround, in case others have the same issues.
Note: This is made and tested for normal javascript and not on any frameworks.
I have made a new file that is loaded after the PrelineUI.

Workaround

window.HSInputNumber.prototype.build = function() {
    if (this.input)
        this.buildInput();
    if (this.increment)
        this.buildIncrement();
    if (this.decrement)
        this.buildDecrement();
    if (this.minInputValue && this.inputValue <= this.minInputValue) {
        this.inputValue = this.minInputValue;
        this.input.value = this.minInputValue.toString();
        this.changeValue();
    }
    if (this.input.hasAttribute('disabled'))
        this.disableButtons();
};

window.HSInputNumber.prototype.buildIncrement = function() {
    var _this = this;
    this.increment.addEventListener('click', function () {
        var step = ('hsInputNumberStep' in _this.increment.dataset) ? parseInt(_this.increment.dataset.hsInputNumberStep) : 1;
        _this.changeValue('increment', step);
    });
};

window.HSInputNumber.prototype.buildDecrement = function() {
    var _this = this;
    this.decrement.addEventListener('click', function () {
        var step = ('hsInputNumberStep' in _this.decrement.dataset) ? parseInt(_this.decrement.dataset.hsInputNumberStep) : 1;
        _this.changeValue('decrement', step);
    });
};

window.HSInputNumber.prototype.changeValue = function(event, step) {
    if (event === void 0) { event = 'none'; }
    if (step === void 0) { step = 1; }
    var payload = { inputValue: this.inputValue };
    var minValue = ('hsInputNumberMin' in this.input.dataset) ? parseInt(this.input.dataset.hsInputNumberMin) : null;
    var maxValue = ('hsInputNumberMax' in this.input.dataset) ? parseInt(this.input.dataset.hsInputNumberMax) : null;
    var minInputValue = minValue ?? Number.MIN_SAFE_INTEGER;
    var maxInputValue = maxValue ?? Number.MAX_SAFE_INTEGER;
    this.inputValue = isNaN(this.inputValue) ? 0 : this.inputValue;
    switch (event) {
        case 'increment':
            var incrementedResult = this.inputValue + step;
            this.inputValue = incrementedResult >= minInputValue && incrementedResult <= maxInputValue ? incrementedResult : maxInputValue;
            this.input.value = this.inputValue.toString();
            break;
        case 'decrement':
            var decrementedResult = this.inputValue - step;
            this.inputValue = decrementedResult >= minInputValue && decrementedResult <= maxInputValue ? decrementedResult : minInputValue;
            this.input.value = this.inputValue.toString();
            break;
        default:
            var defaultResult = isNaN(parseInt(this.input.value)) ? 0 : parseInt(this.input.value);
            this.inputValue = defaultResult >= maxInputValue ? maxInputValue : defaultResult <= minInputValue ? minInputValue : defaultResult;
            if (this.inputValue <= minInputValue)
                this.input.value = this.inputValue.toString();
            break;
    }
    payload.inputValue = this.inputValue;
    if (this.inputValue === minInputValue) {
        this.el.classList.add('disabled');
        if (this.decrement)
            this.disableButtons('decrement');
    }
    else {
        this.el.classList.remove('disabled');
        if (this.decrement)
            this.enableButtons('decrement');
    }
    if (this.inputValue === maxInputValue) {
        this.el.classList.add('disabled');
        if (this.increment)
            this.disableButtons('increment');
    }
    else {
        this.el.classList.remove('disabled');
        if (this.increment)
            this.enableButtons('increment');
    }
    this.fireEvent('change', payload);
    this.el.dispatchEvent(new CustomEvent('change.hs.inputNumber', payload));
};

[dotmra]

Currently in my workaround data-hs-input-number-min/max can be set dynamically, because I don't get them from the constructor, but directly in the the changeValue().

Should I change my PR to support min/max to be dynamic like my workaround are, to support backward compatibility with those who might use my workaround?

[dotmra]

@jahaganiev
Any comments?

[olegpix]

@jahaganiev Any comments?

Hi,
We really appreciate your work, it's pretty good!
I have left some comments, please improve the code according to them.
All the best!

[dotmra]

@olegpix

Hi,
We really appreciate your work, it's pretty good!
I have left some comments, please improve the code according to them.
All the best!

Thanks for coming back to me :)

However, I can't see any of your comments.
If you know submit them, I will probably have some time over the next few days to improve the code :)

[olegpix]

@olegpix

Hi,
We really appreciate your work, it's pretty good!
I have left some comments, please improve the code according to them.
All the best!

Thanks for coming back to me :)

However, I can't see any of your comments. If you know submit them, I will probably have some time over the next few days to improve the code :)

Could you check it now, please

[dotmra]

Thanks for the feedback, @olegpix

I have changed the code from using data attributes to using data options.
I've compiled and tested it on localhost in the project mentioned above.

OBS: If anyone is using my temporary workaround, you'll need to change from data attributes to using options. (when & if this PR gets into main)

[olegpix]

Thanks for the feedback, @olegpix

I have changed the code from using data attributes to using data options. I've compiled and tested it on localhost in the project mentioned above.

OBS: If anyone is using my temporary workaround, you'll need to change from data attributes to using options. (when & if this PR gets into main)

Hi,
Perfect job! Thanks for your PR. Could you improve one more thing please? After this we will approve your PR.
Best wishes!

[dotmra]

Hey @olegpix & @jahaganiev

I have set min to default to 0, if min isn't in the data options.

I understand your positions, but I still wanted to mentioned my ideas.
I'll simply set min to null within my project to allow negative numbers, when this gets released.

I hope that in a future update that allows breaking backward compatibility, this function will mimic HTML's own behavior. (either by min/max/step attributes or the default data options mimic that of the input)
Since people in the future that changes to Preline and remove their own input[number] to use HSInputNumber might be confused as I was :)

Thanks for the feedback - Looking forward for the continued development of Preline and more fixes to come.