Implement delta input for gold fields

This commit is contained in:
Carlos Fernandez 2025-12-08 22:23:09 -05:00
parent 2b1535333a
commit 48427bd421
3 changed files with 56 additions and 2 deletions

View file

@ -178,6 +178,60 @@ export default function DHApplicationMixin(Base) {
_attachPartListeners(partId, htmlElement, options) { _attachPartListeners(partId, htmlElement, options) {
super._attachPartListeners(partId, htmlElement, options); super._attachPartListeners(partId, htmlElement, options);
this._dragDrop.forEach(d => d.bind(htmlElement)); this._dragDrop.forEach(d => d.bind(htmlElement));
for (const deltaInput of htmlElement.querySelectorAll('input[data-allow-delta]')) {
deltaInput.dataset.numValue = deltaInput.value;
deltaInput.inputMode = 'numeric';
deltaInput.pattern = '^[+=\\-]?\d*';
const handleUpdate = (delta = 0) => {
const min = Number(deltaInput.min) || 0;
const max = Number(deltaInput.max) || Infinity;
const current = Number(deltaInput.dataset.numValue);
const rawNumber = Number(deltaInput.value);
if (Number.isNaN(rawNumber)) {
deltaInput.value = delta ? Math.clamp(current + delta, min, max) : current;
return;
}
const newValue =
deltaInput.value.startsWith('+') || deltaInput.value.startsWith('-')
? Math.clamp(current + rawNumber + delta, min, max)
: Math.clamp(rawNumber + delta, min, max);
deltaInput.value = deltaInput.dataset.numValue = newValue;
};
// Force valid characters while inputting
deltaInput.addEventListener('input', () => {
deltaInput.value = /[+=\-]?\d*/.exec(deltaInput.value)?.at(0) ?? deltaInput.value;
});
// Recreate Keyup/Keydown support
deltaInput.addEventListener('keydown', event => {
const step = event.key === 'ArrowUp' ? 1 : event.key === 'ArrowDown' ? -1 : 0;
if (step !== 0) {
handleUpdate(step);
deltaInput.dispatchEvent(new Event("change", { bubbles: true }));
}
});
// Mousewheel while focused support
deltaInput.addEventListener(
'wheel',
event => {
if (deltaInput === document.activeElement) {
event.preventDefault();
handleUpdate(Math.sign(-1 * event.deltaY));
deltaInput.dispatchEvent(new Event("change", { bubbles: true }));
}
},
{ passive: false }
);
deltaInput.addEventListener('change', () => {
handleUpdate();
});
}
} }
/**@inheritdoc */ /**@inheritdoc */

View file

@ -18,7 +18,7 @@
{{#if currency.enabled}} {{#if currency.enabled}}
<div class="input"> <div class="input">
<span>{{localize currency.label}}</span> <span>{{localize currency.label}}</span>
{{formInput currency.field value=currency.value enriched=currency.value toggled=true}} <input type="text" name="{{currency.field.fieldPath}}" data-allow-delta value="{{currency.value}}" data-dtype="Number" min="0" step="1" />
</div> </div>
{{/if}} {{/if}}
{{/each}} {{/each}}

View file

@ -21,7 +21,7 @@
{{#if currency.enabled}} {{#if currency.enabled}}
<div class="input"> <div class="input">
<span>{{localize currency.label}}</span> <span>{{localize currency.label}}</span>
{{formInput currency.field value=currency.value enriched=currency.value toggled=true}} <input type="text" name="{{currency.field.fieldPath}}" data-allow-delta value="{{currency.value}}" data-dtype="Number" min="0" step="1" />
</div> </div>
{{/if}} {{/if}}
{{/each}} {{/each}}