diff --git a/scripts/module.js b/scripts/module.js
index 693ba72..e0c4351 100644
--- a/scripts/module.js
+++ b/scripts/module.js
@@ -128,85 +128,101 @@ Hooks.once('init', () => {
*/
Hooks.on('renderSettingsConfig', (app, html, data) => {
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 themeSelect = $html.find(`select[name="${MODULE_ID}.colorTheme"]`);
- const updateVisibility = () => {
- const iconType = iconTypeSelect.val();
- const theme = themeSelect.val();
+ // 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;
- // Icon Inputs
- // Standard data-setting-id
- let presetGroup = $html.find(`.form-group[data-setting-id="${MODULE_ID}.presetIcon"]`);
- let customIconGroup = $html.find(`.form-group[data-setting-id="${MODULE_ID}.customIcon"]`);
- let customSvgGroup = $html.find(`.form-group[data-setting-id="${MODULE_ID}.customSvgPath"]`);
+ {
+ // 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 by name and traverse to form-group
- if (!presetGroup.length) presetGroup = $html.find(`select[name="${MODULE_ID}.presetIcon"]`).closest('.form-group');
- if (!customIconGroup.length) customIconGroup = $html.find(`input[name="${MODULE_ID}.customIcon"]`).closest('.form-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');
- // SVG Fallback: Ensure we find it separately because it might be wrapped differently
- if (!customSvgGroup.length) {
- const svgInput = $html.find(`input[name="${MODULE_ID}.customSvgPath"]`);
- // Traverse up to find the closest form-group
- customSvgGroup = svgInput.closest('.form-group');
- }
+ return null;
+ };
- // Reset
- presetGroup.hide();
- customIconGroup.hide();
- customSvgGroup.hide();
+ const updateVisibility = () => {
+ const iconType = iconTypeSelect.val();
+ const theme = themeSelect.val();
- if (iconType === 'preset') {
- presetGroup.show();
- } else if (iconType === 'custom') {
- customIconGroup.show();
- } else if (iconType === 'custom-svg') {
- customSvgGroup.show();
- }
+ // Locate Groups
+ const presetGroup = findGroup('presetIcon');
+ const customIconGroup = findGroup('customIcon');
+ const customSvgGroup = findGroup('customSvgPath');
- // Color Inputs
- let fullColorGroup = $html.find(`.form-group[data-setting-id="${MODULE_ID}.fullColor"]`);
- let emptyColorGroup = $html.find(`.form-group[data-setting-id="${MODULE_ID}.emptyColor"]`);
- let scaleGroup = $html.find(`.form-group[data-setting-id="${MODULE_ID}.trackerScale"]`);
+ // Reset Visibility
+ if (presetGroup) presetGroup.hide();
+ if (customIconGroup) customIconGroup.hide();
+ if (customSvgGroup) customSvgGroup.hide();
- 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');
+ // Apply Logic
+ if (iconType === 'preset' && presetGroup) {
+ presetGroup.show();
+ } else if (iconType === 'custom' && customIconGroup) {
+ customIconGroup.show();
+ } else if (iconType === 'custom-svg' && customSvgGroup) {
+ customSvgGroup.show();
+ }
- if (theme === 'custom') {
- fullColorGroup.show();
- emptyColorGroup.show();
- } else {
- fullColorGroup.hide();
- emptyColorGroup.hide();
- }
+ // Color Inputs
+ const fullColorGroup = findGroup('fullColor');
+ const emptyColorGroup = findGroup('emptyColor');
- // Inject Scale Reset Button if not present
- if (scaleGroup.length && !scaleGroup.find('.scale-reset-btn').length) {
- const input = scaleGroup.find('input[type="range"]');
- const rangeValue = scaleGroup.find('.range-value');
-
- if (input.length) {
- const resetBtn = $(``);
- resetBtn.on('click', () => {
- input.val(1.0).trigger('change');
- if (rangeValue.length) rangeValue.text("1.0");
- });
-
- // Append after the range value display usually found in Foundry sliders
- if (rangeValue.length) {
- rangeValue.after(resetBtn);
+ if (fullColorGroup && emptyColorGroup) {
+ if (theme === 'custom') {
+ fullColorGroup.show();
+ emptyColorGroup.show();
} else {
- input.after(resetBtn);
+ fullColorGroup.hide();
+ emptyColorGroup.hide();
}
}
- }
- };
- iconTypeSelect.on('change', updateVisibility);
- themeSelect.on('change', updateVisibility);
- updateVisibility();
+ // Tracker Scale Reset Button
+ const scaleGroup = findGroup('trackerScale');
+ 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');
+
+ // We want to control the input that actually stores the value
+ const targetInput = numberInput.length ? numberInput : input;
+
+ if (targetInput.length) {
+ const resetBtn = $(``);
+
+ resetBtn.on('click', () => {
+ 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");
+ });
+
+ // Append logic
+ const container = scaleGroup.find('.form-fields');
+ if (container.length) {
+ container.append(resetBtn);
+ } else if (rangeValue.length) {
+ rangeValue.after(resetBtn);
+ } else {
+ targetInput.after(resetBtn);
+ }
+ }
+ }
+ };
+
+ iconTypeSelect.on('change', updateVisibility);
+ themeSelect.on('change', updateVisibility);
+ updateVisibility();
+ }
});
/**