dungeonslayers/ds4
dungeonslayers/ds4
3
0
Fork 0
Code Issues 9 Pull requests 7 Projects Releases 10 Packages 1 Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/rolls/check-factory.ts
View file

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

26
templates/dialogs/roll-options.hbs
View file

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