MediaWiki:Common.js: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 45: | Line 45: | ||
}); | }); | ||
document.addEventListener("DOMContentLoaded", function () { | document.addEventListener("DOMContentLoaded", function () { | ||
document.querySelectorAll(".mw-dropdown-ui").forEach(container => { | |||
const data = JSON.parse(container.dataset.options || "{}"); | |||
// Build dropdown | |||
let select = document.createElement("select"); | |||
select.style.padding = "6px"; | |||
let defaultOption = document.createElement("option"); | |||
defaultOption.value = ""; | |||
defaultOption.textContent = "Select one"; | |||
select.appendChild(defaultOption); | |||
Object.keys(data).forEach(key => { | |||
let opt = document.createElement("option"); | |||
opt.value = key; | |||
opt.textContent = data[key].label; | |||
select.appendChild(opt); | |||
output.innerHTML = " | }); | ||
output.innerHTML = | // Output panel | ||
} | let output = document.createElement("div"); | ||
output.style.marginLeft = "20px"; | |||
output.style.padding = "12px"; | |||
output.style.border = "1px solid #444"; | |||
output.style.background = "#111"; | |||
output.style.minWidth = "250px"; | |||
output.innerHTML = "Pick something"; | |||
// Layout | |||
let wrapper = document.createElement("div"); | |||
wrapper.style.display = "flex"; | |||
wrapper.style.gap = "20px"; | |||
wrapper.appendChild(select); | |||
wrapper.appendChild(output); | |||
container.appendChild(wrapper); | |||
// Change event | |||
select.addEventListener("change", function () { | |||
let val = this.value; | |||
if (!val || !data[val]) { | |||
output.innerHTML = "Pick something"; | |||
return; | |||
} | |||
output.innerHTML = ` | |||
<b>${data[val].label}</b><br><br> | |||
${data[val].content} | |||
`; | |||
}); | |||
}); | }); | ||
}); | }); | ||
Revision as of 13:55, 21 April 2026
mw.loader.using('mediawiki.util').then(function () {
$(function () {
// Rename Discussion → Discord
const talkTab = document.querySelector('#ca-talk a');
const talkItem = document.querySelector('#ca-talk');
if (talkTab) {
talkTab.textContent = 'Discord';
talkTab.href = 'https://discord.gg/FZtkXeGeUA';
talkTab.target = '_blank';
talkTab.rel = 'noopener noreferrer';
talkTab.addEventListener('click', function (e) {
e.preventDefault();
window.open('https://discord.gg/FZtkXeGeUA', '_blank');
});
}
// Add Road Map BEFORE Discord
const tabList = document.querySelector('#p-associated-pages .vector-menu-content-list, #p-namespaces .vector-menu-content-list');
if (tabList && !document.getElementById('ca-roadmap')) {
const li = document.createElement('li');
li.id = 'ca-roadmap';
li.className = talkItem ? talkItem.className.replace(/\bselected\b|\bactive\b/g, '').trim() : 'mw-list-item';
const a = document.createElement('a');
a.href = 'https://ohwikiguide.com/index.php/Road_Map';
const span = document.createElement('span');
span.textContent = 'Road Map';
a.appendChild(span);
li.appendChild(a);
if (talkItem) {
tabList.insertBefore(li, talkItem);
} else {
tabList.appendChild(li);
}
}
});
});
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".mw-dropdown-ui").forEach(container => {
const data = JSON.parse(container.dataset.options || "{}");
// Build dropdown
let select = document.createElement("select");
select.style.padding = "6px";
let defaultOption = document.createElement("option");
defaultOption.value = "";
defaultOption.textContent = "Select one";
select.appendChild(defaultOption);
Object.keys(data).forEach(key => {
let opt = document.createElement("option");
opt.value = key;
opt.textContent = data[key].label;
select.appendChild(opt);
});
// Output panel
let output = document.createElement("div");
output.style.marginLeft = "20px";
output.style.padding = "12px";
output.style.border = "1px solid #444";
output.style.background = "#111";
output.style.minWidth = "250px";
output.innerHTML = "Pick something";
// Layout
let wrapper = document.createElement("div");
wrapper.style.display = "flex";
wrapper.style.gap = "20px";
wrapper.appendChild(select);
wrapper.appendChild(output);
container.appendChild(wrapper);
// Change event
select.addEventListener("change", function () {
let val = this.value;
if (!val || !data[val]) {
output.innerHTML = "Pick something";
return;
}
output.innerHTML = `
<b>${data[val].label}</b><br><br>
${data[val].content}
`;
});
});
});