diff --git a/src/macros_new/gowlers-tracking-ledger/scripts/gowlers-tracking-ledger.js b/src/macros_new/gowlers-tracking-ledger/scripts/gowlers-tracking-ledger.js index 79a3e8a7..14201832 100644 --- a/src/macros_new/gowlers-tracking-ledger/scripts/gowlers-tracking-ledger.js +++ b/src/macros_new/gowlers-tracking-ledger/scripts/gowlers-tracking-ledger.js @@ -1,5 +1,6 @@ const MODULE_ID = "gowlers-tracking-ledger"; +const MODULE_VERSION = "0.1.0"; const TRACK_SETTING = "actorSettings"; const FLAG_SCOPE = "world"; const MAX_HISTORY_ROWS = 100; @@ -291,112 +292,92 @@ function openHistoryDialog(actor, initialTab = "hp") { if (!actor) return; const content = buildHistoryContent(actor, initialTab); - // Create a custom dialog with header button const dialog = new Dialog( { - title: `${actor.name}: Log`, + title: `${actor.name}: Tracking Log`, content, buttons: { close: { label: "Close" } }, }, { - width: 720, + width: 800, + height: "auto", classes: ["pf1-history-dialog"], render: (html) => { - // html is jQuery object of the dialog element - // Find the content root within the dialog - const root = html.find('[data-history-root]')[0]; - if (!root) { - console.warn("[History Dialog] Root element not found"); - return; - } + // Use jQuery for robust event delegation + const $html = $(html); + const $root = $html.find('[data-history-root]'); - console.log("[History Dialog] Root element found, setting up tabs"); + if (!$root.length) return; - // Get all tab buttons and panels - const buttons = Array.from(root.querySelectorAll('.history-tab-link')); - const panels = Array.from(root.querySelectorAll('.history-panel')); + // Tab switching with jQuery delegation + $root.on('click', '[data-history-tab]', function(e) { + e.preventDefault(); + const tabId = $(this).data('history-tab'); - console.log(`[History Dialog] Found ${buttons.length} tabs and ${panels.length} panels`); + // Update tab buttons + $root.find('[data-history-tab]').removeClass('active'); + $root.find(`[data-history-tab="${tabId}"]`).addClass('active'); - // Tab activation function - const activateTab = (tabId) => { - console.log(`[History Dialog] Activating tab: ${tabId}`); - buttons.forEach((btn) => { - const shouldBeActive = btn.dataset.historyTab === tabId; - btn.classList.toggle('active', shouldBeActive); - }); - panels.forEach((panel) => { - const shouldBeActive = panel.dataset.historyPanel === tabId; - panel.style.display = shouldBeActive ? 'block' : 'none'; - panel.classList.toggle('active', shouldBeActive); - }); - }; - - // Bind tab click handlers using event delegation - buttons.forEach((btn, index) => { - btn.style.cursor = 'pointer'; - btn.addEventListener('click', function(event) { - event.preventDefault(); - event.stopPropagation(); - const tabId = this.dataset.historyTab; - console.log(`[History Dialog] Tab clicked: ${tabId}`); - activateTab(tabId); - return false; - }); + // Update panels + $root.find('[data-history-panel]').hide(); + $root.find(`[data-history-panel="${tabId}"]`).show(); }); - // Bind config button in content - const configBtn = root.querySelector('[data-action="open-config"]'); - if (configBtn) { - configBtn.addEventListener('click', (event) => { - event.preventDefault(); - event.stopPropagation(); - console.log("[History Dialog] Config button clicked (content)"); - const api = window.GowlersTrackingLedger; - if (api?.openConfigForActor) { - api.openConfigForActor(actor.id); - } else if (api?.openConfig) { - api.openConfig(); - } - }); - } + // Config button handler + $root.on('click', '[data-action="open-config"]', function(e) { + e.preventDefault(); + const api = window.GowlersTrackingLedger; + if (api?.openConfigForActor) { + api.openConfigForActor(actor.id); + } else if (api?.openConfig) { + api.openConfig(); + } + }); - // Add config button to dialog header if user is GM + // Add config icon to dialog header (GM only) if (game.user?.isGM) { - const header = html.find('.dialog-header')[0]; - if (header) { - const existingBtn = header.querySelector('[data-history-config-header]'); - if (!existingBtn) { - const configHeaderBtn = document.createElement('button'); - configHeaderBtn.type = 'button'; - configHeaderBtn.className = 'history-config-header-btn'; - configHeaderBtn.setAttribute('data-history-config-header', 'true'); - configHeaderBtn.setAttribute('title', 'Configure Actor Tracking'); - configHeaderBtn.innerHTML = ''; - configHeaderBtn.style.cssText = 'border: none; background: transparent; color: #666; cursor: pointer; padding: 8px 10px; margin-right: 8px; transition: color 0.2s;'; - configHeaderBtn.addEventListener('mouseover', () => configHeaderBtn.style.color = '#333'); - configHeaderBtn.addEventListener('mouseout', () => configHeaderBtn.style.color = '#666'); - configHeaderBtn.addEventListener('click', (event) => { - event.preventDefault(); - event.stopPropagation(); - console.log("[History Dialog] Config button clicked (header)"); - const api = window.GowlersTrackingLedger; - if (api?.openConfigForActor) { - api.openConfigForActor(actor.id); - } else if (api?.openConfig) { - api.openConfig(); - } - }); - const closeBtn = header.querySelector('.close'); - if (closeBtn) { - header.insertBefore(configHeaderBtn, closeBtn); - } else { - header.appendChild(configHeaderBtn); + const $header = $html.find('.dialog-header'); + if ($header.length && !$header.find('[data-history-config-header]').length) { + const $configBtn = $(' - ` - : ""; - return `
- ${toolbar}
${panels}
+
+ Gowler's Tracking Ledger v${MODULE_VERSION} +
`; }