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_ID = "gowlers-tracking-ledger";
|
||||||
const MODULE_VERSION = "0.1.3";
|
const MODULE_VERSION = "0.1.6";
|
||||||
const TRACK_SETTING = "actorSettings";
|
const TRACK_SETTING = "actorSettings";
|
||||||
const FLAG_SCOPE = "world";
|
const FLAG_SCOPE = "world";
|
||||||
const MAX_HISTORY_ROWS = 100;
|
const MAX_HISTORY_ROWS = 100;
|
||||||
@@ -78,6 +78,44 @@ const ledgerState = {
|
|||||||
actorSettings: null,
|
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", () => {
|
Hooks.once("init", () => {
|
||||||
if (game.system.id !== "pf1") return;
|
if (game.system.id !== "pf1") return;
|
||||||
|
|
||||||
@@ -313,23 +351,30 @@ function openHistoryDialog(actor, initialTab = "hp") {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Tab switching
|
// 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();
|
e.preventDefault();
|
||||||
const tabId = $(this).attr('data-history-tab');
|
const tabId = $(this).attr('data-tab-id');
|
||||||
console.log("[GowlersTracking] Tab clicked:", tabId);
|
console.log("[GowlersTracking] Tab button clicked:", tabId);
|
||||||
|
|
||||||
// Remove active from all tabs and hide all panels
|
// 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();
|
$root.find('[data-history-panel]').hide();
|
||||||
|
|
||||||
// Add active to clicked tab and show its panel
|
// 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();
|
$root.find(`[data-history-panel="${tabId}"]`).show();
|
||||||
|
|
||||||
|
console.log("[GowlersTracking] Panel switched to:", tabId);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add config icon to dialog header (GM only)
|
// Add config icon to dialog header (GM only)
|
||||||
if (game.user?.isGM) {
|
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) {
|
if ($header.length && !$header.find('[data-history-config-header]').length) {
|
||||||
const $configBtn = $('<button/>', {
|
const $configBtn = $('<button/>', {
|
||||||
type: 'button',
|
type: 'button',
|
||||||
@@ -363,8 +408,18 @@ function openHistoryDialog(actor, initialTab = "hp") {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$header.find('.close').before($configBtn);
|
// Find the close button and insert before it
|
||||||
console.log("[GowlersTracking] Config button added");
|
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(
|
.map(
|
||||||
(cfg) => {
|
(cfg) => {
|
||||||
const isActive = cfg.id === initialTab ? "active" : "";
|
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("");
|
.join("");
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"title": "Gowler's Tracking Ledger",
|
"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.",
|
"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": [
|
"authors": [
|
||||||
{ "name": "Gowler", "url": "https://foundryvtt.com" }
|
{ "name": "Gowler", "url": "https://foundryvtt.com" }
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user