80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
|
const MODULE_ID = "basic_aura_highlighting";
|
||
|
|
const AURA_TAB = "basic-aura-highlighting-aura";
|
||
|
|
|
||
|
|
Hooks.on("renderTokenConfig", injectAuraTab);
|
||
|
|
Hooks.on("renderPrototypeTokenConfig", injectAuraTab);
|
||
|
|
|
||
|
|
function injectAuraTab(app, element) {
|
||
|
|
const root = getRootElement(element);
|
||
|
|
if (!root || root.querySelector(`[data-tab="${AURA_TAB}"]`)) return;
|
||
|
|
|
||
|
|
const tabsNav = findTabsNav(root);
|
||
|
|
const existingTab = findExistingTab(root, tabsNav);
|
||
|
|
if (!tabsNav || !existingTab) {
|
||
|
|
console.warn(`${MODULE_ID} | Could not find token config tabs to add Aura tab.`);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const group = tabsNav.dataset.group || existingTab.dataset.group || "sheet";
|
||
|
|
const auraTabButton = createAuraTabButton(group);
|
||
|
|
tabsNav.append(auraTabButton);
|
||
|
|
|
||
|
|
const auraPanel = createAuraTabPanel(group);
|
||
|
|
existingTab.after(auraPanel);
|
||
|
|
|
||
|
|
auraTabButton.addEventListener("click", (event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
event.stopPropagation();
|
||
|
|
activateAuraTab(root, group);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getRootElement(element) {
|
||
|
|
if (element instanceof HTMLElement) return element;
|
||
|
|
if (element?.[0] instanceof HTMLElement) return element[0];
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
function findTabsNav(root) {
|
||
|
|
return root.querySelector(`nav.tabs[data-group], .tabs[data-group], nav.tabs, .tabs`);
|
||
|
|
}
|
||
|
|
|
||
|
|
function findExistingTab(root, tabsNav) {
|
||
|
|
const group = tabsNav?.dataset.group;
|
||
|
|
const selector = group ? `.tab[data-group="${group}"][data-tab]` : `.tab[data-tab]`;
|
||
|
|
return root.querySelector(selector) || root.querySelector(`.tab[data-tab]`);
|
||
|
|
}
|
||
|
|
|
||
|
|
function createAuraTabButton(group) {
|
||
|
|
const button = document.createElement("a");
|
||
|
|
button.classList.add("item");
|
||
|
|
button.dataset.tab = AURA_TAB;
|
||
|
|
button.dataset.group = group;
|
||
|
|
button.dataset.action = "tab";
|
||
|
|
button.innerHTML = `<i class="fa-solid fa-bullseye"></i> ${game.i18n.localize("BASIC_AURA_HIGHLIGHTING.tabs.aura")}`;
|
||
|
|
return button;
|
||
|
|
}
|
||
|
|
|
||
|
|
function createAuraTabPanel(group) {
|
||
|
|
const panel = document.createElement("section");
|
||
|
|
panel.classList.add("tab");
|
||
|
|
panel.dataset.tab = AURA_TAB;
|
||
|
|
panel.dataset.group = group;
|
||
|
|
panel.innerHTML = `
|
||
|
|
<div class="form-group">
|
||
|
|
<p class="hint">${game.i18n.localize("BASIC_AURA_HIGHLIGHTING.tabs.auraHint")}</p>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
return panel;
|
||
|
|
}
|
||
|
|
|
||
|
|
function activateAuraTab(root, group) {
|
||
|
|
for (const tab of root.querySelectorAll(`.tab[data-group="${group}"], .tab[data-tab]`)) {
|
||
|
|
tab.classList.toggle("active", tab.dataset.tab === AURA_TAB);
|
||
|
|
}
|
||
|
|
|
||
|
|
for (const item of root.querySelectorAll(`[data-group="${group}"][data-tab], .tabs [data-tab]`)) {
|
||
|
|
item.classList.toggle("active", item.dataset.tab === AURA_TAB);
|
||
|
|
}
|
||
|
|
}
|