1
This commit is contained in:
centron\schwoerer
@@ -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,67 +292,40 @@ 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)");
|
||||
// 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);
|
||||
@@ -359,27 +333,36 @@ function openHistoryDialog(actor, initialTab = "hp") {
|
||||
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 = '<i class="fas fa-cog" style="font-size: 18px;"></i>';
|
||||
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 $header = $html.find('.dialog-header');
|
||||
if ($header.length && !$header.find('[data-history-config-header]').length) {
|
||||
const $configBtn = $('<button/>', {
|
||||
type: 'button',
|
||||
class: 'history-config-header-btn',
|
||||
'data-history-config-header': 'true',
|
||||
title: 'Configure Actor Tracking',
|
||||
html: '<i class="fas fa-cog"></i>',
|
||||
css: {
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
color: '#999',
|
||||
cursor: 'pointer',
|
||||
padding: '4px 8px',
|
||||
marginRight: '4px',
|
||||
fontSize: '18px',
|
||||
transition: 'color 0.2s'
|
||||
}
|
||||
});
|
||||
|
||||
$configBtn.hover(
|
||||
function() { $(this).css('color', '#333'); },
|
||||
function() { $(this).css('color', '#999'); }
|
||||
);
|
||||
|
||||
$configBtn.click(function(e) {
|
||||
e.preventDefault();
|
||||
const api = window.GowlersTrackingLedger;
|
||||
if (api?.openConfigForActor) {
|
||||
api.openConfigForActor(actor.id);
|
||||
@@ -387,16 +370,14 @@ function openHistoryDialog(actor, initialTab = "hp") {
|
||||
api.openConfig();
|
||||
}
|
||||
});
|
||||
const closeBtn = header.querySelector('.close');
|
||||
if (closeBtn) {
|
||||
header.insertBefore(configHeaderBtn, closeBtn);
|
||||
} else {
|
||||
header.appendChild(configHeaderBtn);
|
||||
}
|
||||
console.log("[History Dialog] Config header button added");
|
||||
}
|
||||
|
||||
$header.find('.close').before($configBtn);
|
||||
}
|
||||
}
|
||||
|
||||
// Set initial tab
|
||||
$root.find(`[data-history-tab="${initialTab}"]`).addClass('active');
|
||||
$root.find(`[data-history-panel="${initialTab}"]`).show();
|
||||
},
|
||||
}
|
||||
);
|
||||
@@ -474,14 +455,6 @@ function buildHistoryContent(actor, initialTab = "hp") {
|
||||
})
|
||||
.join("");
|
||||
|
||||
const toolbar = canConfigure
|
||||
? `<div class="history-dialog-toolbar">
|
||||
<button type="button" class="history-config-btn" data-action="open-config">
|
||||
<i class="fas fa-sliders-h"></i> Configure Actor
|
||||
</button>
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
return `
|
||||
<section class="history-dialog-root" data-history-root="${actor.id}">
|
||||
<style>
|
||||
@@ -490,17 +463,18 @@ function buildHistoryContent(actor, initialTab = "hp") {
|
||||
.history-dialog-tabs .item:not(.active) { opacity:0.75; }
|
||||
.history-dialog-tabs .item:first-child { border-top-left-radius:6px; }
|
||||
.history-dialog-tabs .item:last-child { border-top-right-radius:6px; }
|
||||
.history-dialog-tabs .item.active { background:#fff; opacity:1; position:relative; top:1px; }
|
||||
.history-dialog-panels { border:1px solid #b5b3a4; border-top:none; padding:8px; border-radius:0 6px 6px 6px; background:#fff; }
|
||||
.history-dialog-tabs .item.active { background:#fff; opacity:1; position:relative; top:1px; cursor:pointer; }
|
||||
.history-dialog-panels { border:1px solid #b5b3a4; border-top:none; padding:8px; border-radius:0 6px 6px 6px; background:#fff; min-height: 200px; }
|
||||
.history-table { width:100%; border-collapse:collapse; }
|
||||
.history-table th, .history-table td { border:1px solid #b5b3a4; padding:4px; text-align:left; }
|
||||
.history-empty { font-style:italic; }
|
||||
.history-dialog-toolbar { display:flex; justify-content:flex-end; margin-bottom:6px; gap:8px; }
|
||||
.history-config-btn { border:1px solid #b5b3a4; background:#d6d3c8; border-radius:4px; padding:4px 8px; font-size:0.85em; cursor:pointer; }
|
||||
.history-empty { font-style:italic; color: #999; }
|
||||
.history-dialog-footer { font-size: 0.8em; color: #999; text-align: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e0e0e0; }
|
||||
</style>
|
||||
${toolbar}
|
||||
<nav class="history-dialog-tabs">${tabs}</nav>
|
||||
<div class="history-dialog-panels">${panels}</div>
|
||||
<div class="history-dialog-footer">
|
||||
Gowler's Tracking Ledger v${MODULE_VERSION}
|
||||
</div>
|
||||
</section>`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user