feat(gowlers-tracking-ledger): implement tab switching with global handler function

- Add window.switchHistoryTab() global function to handle tab switching via onclick
- Function manages active tab state by toggling CSS classes and display properties
- Includes detailed console logging for debugging tab switches
- Update version to 0.1.6

Fixes tab switching functionality in the history dialog where buttons were not responding to clicks.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
centron\schwoerer
2025-11-19 12:51:58 +01:00
parent e71d54659e
commit b97604d506
2 changed files with 66 additions and 11 deletions

View File

@@ -1,6 +1,6 @@
const MODULE_ID = "gowlers-tracking-ledger";
const MODULE_VERSION = "0.1.3";
const MODULE_VERSION = "0.1.6";
const TRACK_SETTING = "actorSettings";
const FLAG_SCOPE = "world";
const MAX_HISTORY_ROWS = 100;
@@ -78,6 +78,44 @@ const ledgerState = {
actorSettings: null,
};
// Global tab switching function for history dialog
window.switchHistoryTab = function(tabId) {
console.log("[GowlersTracking] Tab switched to:", tabId);
// Find the root element using the data-history-root attribute
const root = document.querySelector('[data-history-root]');
if (!root) {
console.warn("[GowlersTracking] History root element not found");
return;
}
// Remove active class from all tab buttons and hide all panels
root.querySelectorAll('.history-tab-btn').forEach(btn => {
btn.classList.remove('active');
});
root.querySelectorAll('[data-history-panel]').forEach(panel => {
panel.style.display = 'none';
});
// Add active class to clicked button and show its panel
const activeButton = root.querySelector(`.history-tab-btn[data-tab-id="${tabId}"]`);
const activePanel = root.querySelector(`[data-history-panel="${tabId}"]`);
if (activeButton) {
activeButton.classList.add('active');
console.log("[GowlersTracking] Tab button activated:", tabId);
} else {
console.warn("[GowlersTracking] Tab button not found for:", tabId);
}
if (activePanel) {
activePanel.style.display = 'block';
console.log("[GowlersTracking] Tab panel displayed:", tabId);
} else {
console.warn("[GowlersTracking] Tab panel not found for:", tabId);
}
};
Hooks.once("init", () => {
if (game.system.id !== "pf1") return;
@@ -313,23 +351,30 @@ function openHistoryDialog(actor, initialTab = "hp") {
}
// Tab switching
$root.find('[data-history-tab]').off('click').on('click', function(e) {
$root.find('.history-tab-btn').off('click').on('click', function(e) {
e.preventDefault();
const tabId = $(this).attr('data-history-tab');
console.log("[GowlersTracking] Tab clicked:", tabId);
const tabId = $(this).attr('data-tab-id');
console.log("[GowlersTracking] Tab button clicked:", tabId);
// Remove active from all tabs and hide all panels
$root.find('[data-history-tab]').removeClass('active');
$root.find('.history-tab-btn').removeClass('active');
$root.find('[data-history-panel]').hide();
// Add active to clicked tab and show its panel
$root.find(`[data-history-tab="${tabId}"]`).addClass('active');
$root.find(`.history-tab-btn[data-tab-id="${tabId}"]`).addClass('active');
$root.find(`[data-history-panel="${tabId}"]`).show();
console.log("[GowlersTracking] Panel switched to:", tabId);
});
// Add config icon to dialog header (GM only)
if (game.user?.isGM) {
const $header = $html.closest('.dialog').find('.dialog-header');
// Find the window header (Foundry v11 uses .window-header)
const $appWindow = $html.closest('.app, .window-app, .dialog, [role="dialog"]');
const $header = $appWindow.find('.window-header');
console.log("[GowlersTracking] Looking for header - app found:", $appWindow.length > 0, "header found:", $header.length > 0);
if ($header.length && !$header.find('[data-history-config-header]').length) {
const $configBtn = $('<button/>', {
type: 'button',
@@ -363,8 +408,18 @@ function openHistoryDialog(actor, initialTab = "hp") {
}
});
$header.find('.close').before($configBtn);
console.log("[GowlersTracking] Config button added");
// Find the close button and insert before it
const $closeBtn = $header.find('.close');
if ($closeBtn.length) {
$closeBtn.before($configBtn);
console.log("[GowlersTracking] Config button added to header");
} else {
// Fallback: just append to header if close button not found
$header.append($configBtn);
console.log("[GowlersTracking] Config button appended to header (close button not found)");
}
} else {
console.log("[GowlersTracking] Header not found or button already exists");
}
}
},
@@ -433,7 +488,7 @@ function buildHistoryContent(actor, tabArg) {
.map(
(cfg) => {
const isActive = cfg.id === initialTab ? "active" : "";
return `<a class="item history-tab-link ${isActive}" data-history-tab="${cfg.id}">${cfg.label}</a>`;
return `<button type="button" class="history-tab-btn item ${isActive}" data-tab-id="${cfg.id}" onclick="window.switchHistoryTab('${cfg.id}')">${cfg.label}</button>`;
}
)
.join("");

View File

@@ -3,7 +3,7 @@
"type": "module",
"title": "Gowler's Tracking Ledger",
"description": "Adds HP/XP/Currency log buttons to PF1 sheets and opens the tracking dialog preloaded with the actor's logs.",
"version": "0.1.3",
"version": "0.1.6",
"authors": [
{ "name": "Gowler", "url": "https://foundryvtt.com" }
],