MediaWiki:Common.js: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
$(function () { | $(function () { | ||
let selectedLeft = null; | let selectedLeft = null; | ||
let selectedRight = null; | let selectedRight = null; | ||
/* | /* TABS */ | ||
document.querySelectorAll('.mw-tab-buttons').forEach(group => { | document.querySelectorAll('.mw-tab-buttons').forEach(group => { | ||
const buttons = group.querySelectorAll('.mw-tab-btn'); | const buttons = group.querySelectorAll('.mw-tab-btn'); | ||
| Line 15: | Line 14: | ||
const container = group.closest('.mw-tab-content') || document; | const container = group.closest('.mw-tab-content') || document; | ||
container.querySelectorAll('.mw-tab-content').forEach(c => | container.querySelectorAll('.mw-tab-content').forEach(c => c.style.display = 'none'); | ||
container.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active')); | |||
container.querySelectorAll('.mw-tab-btn').forEach(b => | |||
this.classList.add('active'); | this.classList.add('active'); | ||
| Line 33: | Line 27: | ||
}); | }); | ||
/* | /* DROPDOWNS */ | ||
function initDropdown(container) { | function initDropdown(container) { | ||
const label = container.dataset.label | const label = container.dataset.label; | ||
const options = JSON.parse(container.dataset.options | const options = JSON.parse(container.dataset.options); | ||
const wrapper = document.createElement('div'); | const wrapper = document.createElement('div'); | ||
| Line 46: | Line 40: | ||
Object.keys(options).forEach(key => { | Object.keys(options).forEach(key => { | ||
const item = document.createElement('div'); | const item = document.createElement('div'); | ||
item.textContent = | item.textContent = options[key].label; | ||
item. | item.onclick = function () { | ||
button.textContent = | button.textContent = options[key].label; | ||
list.style.display = 'none'; | list.style.display = 'none'; | ||
if (container.classList.contains('combo-left')) | if (container.classList.contains('combo-left')) selectedLeft = key; | ||
if (container.classList.contains('combo-right')) selectedRight = key; | |||
if (container.classList.contains('combo-right')) | |||
updateCombo(); | updateCombo(); | ||
} | }; | ||
list.appendChild(item); | list.appendChild(item); | ||
}); | }); | ||
button. | button.onclick = function () { | ||
list.style.display = list.style.display === 'none' ? 'block' : 'none'; | list.style.display = list.style.display === 'none' ? 'block' : 'none'; | ||
} | }; | ||
wrapper.appendChild(button); | wrapper.appendChild(button); | ||
| Line 80: | Line 69: | ||
document.querySelectorAll('.mw-dropdown-ui').forEach(initDropdown); | document.querySelectorAll('.mw-dropdown-ui').forEach(initDropdown); | ||
/* | /* RESULT LOGIC */ | ||
function updateCombo() { | function updateCombo() { | ||
const result = document.getElementById('combo-result'); | const result = document.getElementById('combo-result'); | ||
if (!result | |||
if (!selectedLeft || !selectedRight) { | |||
result.style.display = 'none'; | |||
return; | |||
} | |||
result.style.display = 'block'; | |||
if (selectedLeft === 'flame_resonance' && selectedRight === 'burn') { | if (selectedLeft === 'flame_resonance' && selectedRight === 'burn') { | ||
Revision as of 18:31, 21 April 2026
mw.loader.using('mediawiki.util').then(function () {
$(function () {
let selectedLeft = null;
let selectedRight = null;
/* TABS */
document.querySelectorAll('.mw-tab-buttons').forEach(group => {
const buttons = group.querySelectorAll('.mw-tab-btn');
buttons.forEach(btn => {
btn.addEventListener('click', function () {
const tabId = this.dataset.tab;
const container = group.closest('.mw-tab-content') || document;
container.querySelectorAll('.mw-tab-content').forEach(c => c.style.display = 'none');
container.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
const target = container.querySelector('#' + tabId);
if (target) target.style.display = 'block';
});
});
if (buttons.length > 0) buttons[0].click();
});
/* DROPDOWNS */
function initDropdown(container) {
const label = container.dataset.label;
const options = JSON.parse(container.dataset.options);
const wrapper = document.createElement('div');
const button = document.createElement('button');
const list = document.createElement('div');
button.textContent = label;
list.style.display = 'none';
Object.keys(options).forEach(key => {
const item = document.createElement('div');
item.textContent = options[key].label;
item.onclick = function () {
button.textContent = options[key].label;
list.style.display = 'none';
if (container.classList.contains('combo-left')) selectedLeft = key;
if (container.classList.contains('combo-right')) selectedRight = key;
updateCombo();
};
list.appendChild(item);
});
button.onclick = function () {
list.style.display = list.style.display === 'none' ? 'block' : 'none';
};
wrapper.appendChild(button);
wrapper.appendChild(list);
container.innerHTML = '';
container.appendChild(wrapper);
}
document.querySelectorAll('.mw-dropdown-ui').forEach(initDropdown);
/* RESULT LOGIC */
function updateCombo() {
const result = document.getElementById('combo-result');
if (!selectedLeft || !selectedRight) {
result.style.display = 'none';
return;
}
result.style.display = 'block';
if (selectedLeft === 'flame_resonance' && selectedRight === 'burn') {
result.innerHTML = "Max Burn Stack +2, Burn Duration -20%. Flash Effect: Burn DMG +5%";
} else {
result.innerHTML = "No data for this combination.";
}
}
});
});