Add language toggle buttons that work across multiple tables correctly + description toggle
Versão de:
// ==UserScript==
// @name FFXIV Guide: Toggle language columns
// @name:ko FFXIV Guide: 언어별 세로단 토글
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Add language toggle buttons that work across multiple tables correctly + description toggle
// @description:ko 언어별로 세로단을 가리는 버튼을 추가하는 스크립트 입니다
// @match https://ffxivguide.akurosia.org/translate/
// @grant none
// @license MIT
// ==/UserScript==
(function () {
'use strict';
const languageMap = {
en: { label: '🇺🇸 EN', headers: ['Singular_en', 'Name_en', 'Description_en'] },
de: { label: '🇩🇪 DE', headers: ['Singular_de', 'Name_de', 'Description_de'] },
fr: { label: '🇫🇷 FR', headers: ['Singular_fr', 'Name_fr', 'Description_fr'] },
ja: { label: '🇯🇵 JA', headers: ['Singular_ja', 'Name_ja', 'Description_ja'] },
cn: { label: '🇨🇳 CN', headers: ['Singular_cn', 'Name_cn', 'Description_cn'] },
ko: { label: '🇰🇷 KO', headers: ['Singular_ko', 'Name_ko', 'Description_ko'] },
};
const hiddenLangs = new Set();
const buttonRefs = {};
let descriptionHidden = false;
function toggleLanguage(langKey) {
const { headers } = languageMap[langKey];
const shouldHide = !hiddenLangs.has(langKey);
const tables = document.querySelectorAll('table');
tables.forEach(table => {
const ths = table.querySelectorAll('thead tr th');
const indexes = [];
ths.forEach((th, i) => {
const text = th.textContent.trim();
if (headers.includes(text)) {
indexes.push(i + 1);
}
});
indexes.forEach(index => {
const cells = table.querySelectorAll(`th:nth-child(${index}), td:nth-child(${index})`);
cells.forEach(cell => {
cell.style.display = shouldHide ? 'none' : '';
});
});
});
if (shouldHide) hiddenLangs.add(langKey);
else hiddenLangs.delete(langKey);
updateButtonStyle(langKey);
}
function updateButtonStyle(langKey) {
const btn = buttonRefs[langKey];
if (!btn) return;
const isHidden = hiddenLangs.has(langKey);
btn.style.opacity = isHidden ? '0.4' : '1';
btn.style.backgroundColor = isHidden ? '#222' : '#444';
}
function toggleDescriptionColumns() {
descriptionHidden = !descriptionHidden;
const tables = document.querySelectorAll('table');
tables.forEach(table => {
const ths = table.querySelectorAll('thead tr th');
const indexes = [];
ths.forEach((th, i) => {
const text = th.textContent.trim();
if (text.startsWith('Description_')) {
indexes.push(i + 1);
}
});
indexes.forEach(index => {
const cells = table.querySelectorAll(`th:nth-child(${index}), td:nth-child(${index})`);
cells.forEach(cell => {
cell.style.display = descriptionHidden ? 'none' : '';
});
});
});
const btn = buttonRefs['description'];
if (btn) {
btn.style.opacity = descriptionHidden ? '0.4' : '1';
btn.style.backgroundColor = descriptionHidden ? '#222' : '#444';
}
}
function insertToggleButtons() {
const searchButton = document.getElementById('submit');
if (!searchButton || !searchButton.parentElement) {
setTimeout(insertToggleButtons, 300);
return;
}
const wrapper = document.createElement('div');
wrapper.style.margin = '10px 0';
// Language buttons
Object.entries(languageMap).forEach(([key, { label }]) => {
const btn = document.createElement('button');
btn.textContent = label;
styleButton(btn);
btn.addEventListener('click', () => toggleLanguage(key));
wrapper.appendChild(btn);
buttonRefs[key] = btn;
});
// Description-only toggle
const descBtn = document.createElement('button');
descBtn.textContent = '📝 아이템 설명';
styleButton(descBtn);
descBtn.addEventListener('click', toggleDescriptionColumns);
wrapper.appendChild(descBtn);
buttonRefs['description'] = descBtn;
searchButton.parentElement.insertAdjacentElement('afterend', wrapper);
console.log('[Tampermonkey] ✅ 언어 토글 버튼 + 아이템 설명 토글 완성!');
}
function styleButton(btn) {
btn.style.marginRight = '5px';
btn.style.padding = '4px 8px';
btn.style.fontSize = '12px';
btn.style.cursor = 'pointer';
btn.style.background = '#444';
btn.style.color = '#fff';
btn.style.border = '1px solid #888';
btn.style.borderRadius = '4px';
btn.style.transition = 'all 0.2s ease';
}
insertToggleButtons();
})();