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:
@@ -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("");
|
||||
|
||||
@@ -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" }
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user