fix: make the HTML ids in the roll options dialog unique

This commit is contained in:
Johannes Loher 2022-05-13 19:23:18 +02:00
parent 82217dd971
commit a94fb55e19
2 changed files with 20 additions and 15 deletions

View file

@ -126,6 +126,7 @@ async function askForInteractiveRollData(
): Promise<Partial<IntermediateInteractiveRollData>> { ): Promise<Partial<IntermediateInteractiveRollData>> {
const usedTemplate = template ?? "systems/ds4/templates/dialogs/roll-options.hbs"; const usedTemplate = template ?? "systems/ds4/templates/dialogs/roll-options.hbs";
const usedTitle = title ?? getGame().i18n.localize("DS4.DialogRollOptionsDefaultTitle"); const usedTitle = title ?? getGame().i18n.localize("DS4.DialogRollOptionsDefaultTitle");
const id = foundry.utils.randomID();
const templateData = { const templateData = {
title: usedTitle, title: usedTitle,
checkTargetNumber: checkTargetNumber, checkTargetNumber: checkTargetNumber,
@ -141,6 +142,7 @@ async function askForInteractiveRollData(
} }
return { value: key, label: translation }; return { value: key, label: translation };
}), }),
id,
}; };
const renderedHtml = await renderTemplate(usedTemplate, templateData); const renderedHtml = await renderTemplate(usedTemplate, templateData);
@ -183,8 +185,10 @@ async function askForInteractiveRollData(
}, },
{ {
activateAdditionalListeners: (html, app) => { activateAdditionalListeners: (html, app) => {
const checkModifierCustomFormGroup = html.find("#check-modifier-custom").parent(".form-group"); const checkModifierCustomFormGroup = html
html.find("#check-modifier").on("change", (event) => { .find(`#check-modifier-custom-${id}`)
.parent(".form-group");
html.find(`#check-modifier-${id}`).on("change", (event) => {
if ( if (
(event.currentTarget as HTMLSelectElement).value === "custom" && (event.currentTarget as HTMLSelectElement).value === "custom" &&
checkModifierCustomFormGroup.hasClass("ds4-hidden") checkModifierCustomFormGroup.hasClass("ds4-hidden")
@ -197,6 +201,7 @@ async function askForInteractiveRollData(
} }
}); });
}, },
id,
}, },
).render(true); ).render(true);
}); });

View file

@ -13,18 +13,18 @@ SPDX-License-Identifier: MIT
!-- @param rollMode: The preselected roll mode (= chat roll-mode). !-- @param rollMode: The preselected roll mode (= chat roll-mode).
!-- @param rollModes: A map of all roll modes and their i18n keys. !-- @param rollModes: A map of all roll modes and their i18n keys.
!-- @param checkModifiers: A map of all check difficulty modifiers and their translations. !-- @param checkModifiers: A map of all check difficulty modifiers and their translations.
!-- @param id: A unique id, used to provided uniqe ids for input elements.
--}} --}}
<form class="ds4-roll-options"> <form class="ds4-roll-options">
<div class="form-group"> <div class="form-group">
<label for="check-target-number">{{localize "DS4.DialogRollOptionsCheckTargetNumberLabel"}}</label> <label for="check-target-number-{{id}}">{{localize "DS4.DialogRollOptionsCheckTargetNumberLabel"}}</label>
<input id="check-target-number" data-dtype="Number" type="number" name="check-target-number" <input id="check-target-number-{{id}}" data-dtype="Number" type="number" name="check-target-number"
value="{{checkTargetNumber}}" /> value="{{checkTargetNumber}}" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="check-modifier">{{localize "DS4.DialogRollOptionsCheckModifierLabel"}}</label> <label for="check-modifier-{{id}}">{{localize "DS4.DialogRollOptionsCheckModifierLabel"}}</label>
<div class="form-fields"> <div class="form-fields">
{{log checkModifiers}} <select id="check-modifier-{{id}}" name="check-modifier" data-dtype="String">
<select id="check-modifier" name="check-modifier" data-dtype="String">
{{#select "0"}} {{#select "0"}}
{{#each checkModifiers as |checkModifier|}} {{#each checkModifiers as |checkModifier|}}
<option value="{{checkModifier.value}}">{{checkModifier.label}}</option> <option value="{{checkModifier.value}}">{{checkModifier.label}}</option>
@ -34,24 +34,24 @@ SPDX-License-Identifier: MIT
</div> </div>
</div> </div>
<div class="form-group ds4-hidden"> <div class="form-group ds4-hidden">
<label for="check-modifier-custom">{{localize "DS4.DialogRollOptionsCheckModifierCustomLabel"}}</label> <label for="check-modifier-custom-{{id}}">{{localize "DS4.DialogRollOptionsCheckModifierCustomLabel"}}</label>
<input id="check-modifier-custom" data-dtype="Number" type="number" name="check-modifier-custom" <input id="check-modifier-custom-{{id}}" data-dtype="Number" type="number" name="check-modifier-custom"
value="0" /> value="0" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="maximum-coup-result">{{localize "DS4.DialogRollOptionsMaximumCoupResultLabel"}}</label> <label for="maximum-coup-result-{{id}}">{{localize "DS4.DialogRollOptionsMaximumCoupResultLabel"}}</label>
<input id="maximum-coup-result" data-dtype="Number" type="number" name="maximum-coup-result" <input id="maximum-coup-result-{{id}}" data-dtype="Number" type="number" name="maximum-coup-result"
value="{{maximumCoupResult}}" /> value="{{maximumCoupResult}}" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="minimum-fumble-result">{{localize "DS4.DialogRollOptionsMinimumFumbleResultLabel"}}</label> <label for="minimum-fumble-result-{{id}}">{{localize "DS4.DialogRollOptionsMinimumFumbleResultLabel"}}</label>
<input id="minimum-fumble-result" data-dtype="Number" type="number" name="minimum-fumble-result" <input id="minimum-fumble-result-{{id}}" data-dtype="Number" type="number" name="minimum-fumble-result"
value="{{minimumFumbleResult}}" /> value="{{minimumFumbleResult}}" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="roll-mode">{{localize "DS4.DialogRollOptionsRollModeLabel"}}</label> <label for="roll-mode-{{id}}">{{localize "DS4.DialogRollOptionsRollModeLabel"}}</label>
<div class="form-fields"> <div class="form-fields">
<select id="roll-mode" name="roll-mode" data-dtype="String"> <select id="roll-mode-{{id}}" name="roll-mode" data-dtype="String">
{{#select rollMode}} {{#select rollMode}}
{{#each rollModes as |rollModeValue rollModeKey|}} {{#each rollModes as |rollModeValue rollModeKey|}}
<option value="{{rollModeKey}}">{{localize rollModeValue}}</option> <option value="{{rollModeKey}}">{{localize rollModeValue}}</option>