Add event handlers for dynamically added neo-range-inputs

This commit is contained in:
Cohee
2024-08-06 22:28:37 +03:00
parent 444339e156
commit d6e7fd78ad

View File

@ -10745,62 +10745,66 @@ jQuery(async function () {
var isManualInput = false; var isManualInput = false;
var valueBeforeManualInput; var valueBeforeManualInput;
$('.range-block-counter input, .neo-range-input').on('click', function () { $(document).on('input', '.range-block-counter input, .neo-range-input', function () {
valueBeforeManualInput = $(this).val(); valueBeforeManualInput = $(this).val();
console.log(valueBeforeManualInput); 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 Event('keyup')); e.target.focus();
}) 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 manualInput = Number($(this).val()); const masterElement = $(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()); let manualInput = Number($(this).val());
if (isManualInput) { if (isManualInput) {
//if value is between correct range for the slider //disallow manual inputs outside acceptable range
if (manualInput >= Number($(this).attr('min')) && manualInput <= Number($(this).attr('max'))) { 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; valueBeforeManualInput = manualInput;
//set the slider value to input value
$(masterElement).val($(this).val()).trigger('input', { forced: true }); $(masterElement).val($(this).val()).trigger('input', { forced: true });
} else { } else {
//if value not ok, warn and reset to last known valid value //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')}`); toastr.warning(`Invalid value. Must be between ${$(this).attr('min')} and ${$(this).attr('max')}`);
console.log(valueBeforeManualInput); console.log(valueBeforeManualInput);
//newSlider.val(valueBeforeManualInput)
$(this).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 () { $('.user_stats_button').on('click', function () {
userStatsHandler(); userStatsHandler();