Add event handlers for dynamically added neo-range-inputs

d6e7fd78adfcecdb0bca84471702b5d978f9d2b9

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 444339e1568c383cea1e2476c35e5885c7f9be98

public/script.js+46 -42 Viewed

     var isManualInput = false;
     var valueBeforeManualInput;
     $(document).on('input', '.range-block-counter input, .neo-range-input').on('click', function () {
         valueBeforeManualInput = $(this).val();
         console.log(valueBeforeManualInput);
     });
 -        .on('change', function (e) {
++
 -            e.target.focus();
 +    $(document).on('change', '.range-block-counter input, .neo-range-input', function (e) {
                     e.target.dispatchEvent(new Eventfocus('keyup'));
 -        })
 +        e.target.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));
 -        .on('keydown', function (e) {
 +    });
 -            const masterSelector = '#' + $(this).data('for');
++
 -            const masterElement = $(masterSelector);
 +    $(document).on('keydown', '.range-block-counter input, .neo-range-input', function (e) {
 -            if (e.key === 'Enter') {
 +        const masterSelector = '#' + $(this).data('for');
                 let        const manualInputmasterElement = Number($(this).val()masterSelector);
 -                if (isManualInput) {
 +        if (e.key === 'Enter') {
 -                    //disallow manual inputs outside acceptable range
 -                    if (manualInput >= Number($(this).attr('min')) && manualInput <= Number($(this).attr('max'))) {
 -                        //if value is ok, assign to slider and update handle text and position
 -                        //newSlider.val(manualInput)
 -                        //handleSlideEvent.call(newSlider, null, { value: parseFloat(manualInput) }, 'manual');
 -                        valueBeforeManualInput = manualInput;
 -                        $(masterElement).val($(this).val()).trigger('input', { forced: true });
 -                    } else {
 -                        //if value not ok, warn and reset to last known valid value
 -                        toastr.warning(`Invalid value. Must be between ${$(this).attr('min')} and ${$(this).attr('max')}`);
 -                        console.log(valueBeforeManualInput);
 -                        //newSlider.val(valueBeforeManualInput)
 -                        $(this).val(valueBeforeManualInput);
 -                    }
 -                }
 -            }
 -        })
 -        .on('keyup', function () {
 -            valueBeforeManualInput = $(this).val();
 -            console.log(valueBeforeManualInput);
 -            isManualInput = true;
 -        })
 -        //trigger slider changes when user clicks away
 -        .on('mouseup blur', function () {
 -            const masterSelector = '#' + $(this).data('for');
 -            const masterElement = $(masterSelector);
             let manualInput = Number($(this).val());
             if (isManualInput) {
                 //ifdisallow valuemanual isinputs betweenoutside correctacceptable range for the slider
                 if (manualInput >= Number($(this).attr('min')) && manualInput <= Number($(this).attr('max'))) {
 +                    //if value is ok, assign to slider and update handle text and position
 +                    //newSlider.val(manualInput)
 +                    //handleSlideEvent.call(newSlider, null, { value: parseFloat(manualInput) }, 'manual');
                     valueBeforeManualInput = manualInput;
 -                    //set the slider value to input value
                     $(masterElement).val($(this).val()).trigger('input', { forced: true });
                 } else {
                     //if value not ok, warn and reset to last known valid value
                     toastr.warning(`Invalid value. Must be between ${$(this).attr('min')} and ${$(this).attr('max')}`);
                     console.log(valueBeforeManualInput);
 +                    //newSlider.val(valueBeforeManualInput)
                     $(this).val(valueBeforeManualInput);
+                }
+            }
 -            isManualInput = false;
 +        }
             });
++
 +    $(document).on('keyup', '.range-block-counter input, .neo-range-input', function () {
 +        valueBeforeManualInput = $(this).val();
 +        console.log(valueBeforeManualInput);
 +        isManualInput = true;
 +    });
++
 +    //trigger slider changes when user clicks away
 +    $(document).on('mouseup blur', '.range-block-counter input, .neo-range-input', function () {
 +        const masterSelector = '#' + $(this).data('for');
 +        const masterElement = $(masterSelector);
 +        let manualInput = Number($(this).val());
 +        if (isManualInput) {
 +            //if value is between correct range for the slider
 +            if (manualInput >= Number($(this).attr('min')) && manualInput <= Number($(this).attr('max'))) {
 +                valueBeforeManualInput = manualInput;
 +                //set the slider value to input value
 +                $(masterElement).val($(this).val()).trigger('input', { forced: true });
 +            } else {
 +                //if value not ok, warn and reset to last known valid value
 +                toastr.warning(`Invalid value. Must be between ${$(this).attr('min')} and ${$(this).attr('max')}`);
 +                console.log(valueBeforeManualInput);
 +                $(this).val(valueBeforeManualInput);
 +            }
 +        }
 +        isManualInput = false;
 +    });
     $('.user_stats_button').on('click', function () {
         userStatsHandler();