cosmo/dh-feartrackerplus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Improve robustness of settings panel dynamic visibility and scale reset button injection by using a dedicated group finder and more flexible element targeting.

Browse source
This commit is contained in:
CPTN Cosmo 2025-12-19 01:55:06 +01:00
parent 409528b30d
commit 52929e9cdb
1 changed files with 79 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

92
scripts/module.js
View file

@ -128,52 +128,55 @@ Hooks.once('init', () => {
*/ */
Hooks.on('renderSettingsConfig', (app, html, data) => { Hooks.on('renderSettingsConfig', (app, html, data) => {
const $html = $(html); const $html = $(html);
// Use a more robust selector for the select elements, in case implicit binding changes
const iconTypeSelect = $html.find(`select[name="${MODULE_ID}.iconType"]`); const iconTypeSelect = $html.find(`select[name="${MODULE_ID}.iconType"]`);
const themeSelect = $html.find(`select[name="${MODULE_ID}.colorTheme"]`); const themeSelect = $html.find(`select[name="${MODULE_ID}.colorTheme"]`);
// If we can't find the main selects, we can't do anything (likely custom settings window or other issue)
if (!iconTypeSelect.length || !themeSelect.length) return;
{
// Helper to find setting group
const findGroup = (key) => {
// Try data-setting-id first (standard in V10/V11+)
let group = $html.find(`.form-group[data-setting-id="${MODULE_ID}.${key}"]`);
if (group.length) return group;
// Fallback: Find input/select by name and go up to form-group
const input = $html.find(`[name="${MODULE_ID}.${key}"]`);
if (input.length) return input.closest('.form-group');
return null;
};
const updateVisibility = () => { const updateVisibility = () => {
const iconType = iconTypeSelect.val(); const iconType = iconTypeSelect.val();
const theme = themeSelect.val(); const theme = themeSelect.val();
// Icon Inputs // Locate Groups
// Standard data-setting-id const presetGroup = findGroup('presetIcon');
let presetGroup = $html.find(`.form-group[data-setting-id="${MODULE_ID}.presetIcon"]`); const customIconGroup = findGroup('customIcon');
let customIconGroup = $html.find(`.form-group[data-setting-id="${MODULE_ID}.customIcon"]`); const customSvgGroup = findGroup('customSvgPath');
let customSvgGroup = $html.find(`.form-group[data-setting-id="${MODULE_ID}.customSvgPath"]`);
// Fallback: Find input by name and traverse to form-group // Reset Visibility
if (!presetGroup.length) presetGroup = $html.find(`select[name="${MODULE_ID}.presetIcon"]`).closest('.form-group'); if (presetGroup) presetGroup.hide();
if (!customIconGroup.length) customIconGroup = $html.find(`input[name="${MODULE_ID}.customIcon"]`).closest('.form-group'); if (customIconGroup) customIconGroup.hide();
if (customSvgGroup) customSvgGroup.hide();
// SVG Fallback: Ensure we find it separately because it might be wrapped differently // Apply Logic
if (!customSvgGroup.length) { if (iconType === 'preset' && presetGroup) {
const svgInput = $html.find(`input[name="${MODULE_ID}.customSvgPath"]`);
// Traverse up to find the closest form-group
customSvgGroup = svgInput.closest('.form-group');
}
// Reset
presetGroup.hide();
customIconGroup.hide();
customSvgGroup.hide();
if (iconType === 'preset') {
presetGroup.show(); presetGroup.show();
} else if (iconType === 'custom') { } else if (iconType === 'custom' && customIconGroup) {
customIconGroup.show(); customIconGroup.show();
} else if (iconType === 'custom-svg') { } else if (iconType === 'custom-svg' && customSvgGroup) {
customSvgGroup.show(); customSvgGroup.show();
} }
// Color Inputs // Color Inputs
let fullColorGroup = $html.find(`.form-group[data-setting-id="${MODULE_ID}.fullColor"]`); const fullColorGroup = findGroup('fullColor');
let emptyColorGroup = $html.find(`.form-group[data-setting-id="${MODULE_ID}.emptyColor"]`); const emptyColorGroup = findGroup('emptyColor');
let scaleGroup = $html.find(`.form-group[data-setting-id="${MODULE_ID}.trackerScale"]`);
if (!fullColorGroup.length) fullColorGroup = $html.find(`input[name="${MODULE_ID}.fullColor"]`).closest('.form-group');
if (!emptyColorGroup.length) emptyColorGroup = $html.find(`input[name="${MODULE_ID}.emptyColor"]`).closest('.form-group');
if (!scaleGroup.length) scaleGroup = $html.find(`input[name="${MODULE_ID}.trackerScale"]`).closest('.form-group');
if (fullColorGroup && emptyColorGroup) {
if (theme === 'custom') { if (theme === 'custom') {
fullColorGroup.show(); fullColorGroup.show();
emptyColorGroup.show(); emptyColorGroup.show();
@ -181,24 +184,36 @@ Hooks.on('renderSettingsConfig', (app, html, data) => {
fullColorGroup.hide(); fullColorGroup.hide();
emptyColorGroup.hide(); emptyColorGroup.hide();
} }
}
// Inject Scale Reset Button if not present // Tracker Scale Reset Button
if (scaleGroup.length && !scaleGroup.find('.scale-reset-btn').length) { const scaleGroup = findGroup('trackerScale');
const input = scaleGroup.find('input[type="range"]'); if (scaleGroup && !scaleGroup.find('.scale-reset-btn').length) {
const input = scaleGroup.find('input[type="range"]'); // Try range first
const numberInput = scaleGroup.find(`input[name="${MODULE_ID}.trackerScale"]`); // Fallback/Number input
const rangeValue = scaleGroup.find('.range-value'); const rangeValue = scaleGroup.find('.range-value');
if (input.length) { // We want to control the input that actually stores the value
const targetInput = numberInput.length ? numberInput : input;
if (targetInput.length) {
const resetBtn = $(`<button type="button" class="scale-reset-btn" title="Reset to 1.0x" style="flex: 0 0 30px; margin-left: 5px;"><i class="fas fa-undo"></i></button>`); const resetBtn = $(`<button type="button" class="scale-reset-btn" title="Reset to 1.0x" style="flex: 0 0 30px; margin-left: 5px;"><i class="fas fa-undo"></i></button>`);
resetBtn.on('click', () => { resetBtn.on('click', () => {
input.val(1.0).trigger('change'); targetInput.val(1.0).trigger('change');
// Retrieve the range input again to update it visually if we targeted the number input
if (input.length) input.val(1.0);
if (rangeValue.length) rangeValue.text("1.0"); if (rangeValue.length) rangeValue.text("1.0");
}); });
// Append after the range value display usually found in Foundry sliders // Append logic
if (rangeValue.length) { const container = scaleGroup.find('.form-fields');
if (container.length) {
container.append(resetBtn);
} else if (rangeValue.length) {
rangeValue.after(resetBtn); rangeValue.after(resetBtn);
} else { } else {
input.after(resetBtn); targetInput.after(resetBtn);
} }
} }
} }
@ -207,6 +222,7 @@ Hooks.on('renderSettingsConfig', (app, html, data) => {
iconTypeSelect.on('change', updateVisibility); iconTypeSelect.on('change', updateVisibility);
themeSelect.on('change', updateVisibility); themeSelect.on('change', updateVisibility);
updateVisibility(); updateVisibility();
}
}); });
/** /**