MediaWiki:Common.js: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
$(function () { | $(function () { | ||
function initDropdown(container) { | |||
const | const label = container.dataset.label || "Select"; | ||
const options = JSON.parse(container.dataset.options || "{}"); | |||
const wrapper = document.createElement('div'); | |||
wrapper.className = 'mw-dropdown'; | |||
const button = document.createElement('button'); | |||
button.textContent = label; | |||
button.className = 'mw-dropdown-btn'; | |||
const list = document.createElement('div'); | |||
list.className = 'mw-dropdown-list'; | |||
list.style.display = 'none'; | |||
const content = document.createElement('div'); | |||
content.className = 'mw-dropdown-content'; | |||
Object.keys(options).forEach(key => { | |||
const opt = options[key]; | |||
const item = document.createElement('div'); | |||
item.className = 'mw-dropdown-item'; | |||
item.textContent = opt.label; | |||
item.addEventListener('click', function () { | |||
button.textContent = opt.label; | |||
content.innerHTML = opt.content; | |||
list.style.display = 'none'; | |||
}); | }); | ||
list.appendChild(item); | |||
}); | |||
button.addEventListener('click', function () { | |||
list.style.display = list.style.display === 'none' ? 'block' : 'none'; | |||
}); | }); | ||
wrapper.appendChild(button); | |||
wrapper.appendChild(list); | |||
wrapper.appendChild(content); | |||
container.innerHTML = ''; | |||
container.appendChild(wrapper); | |||
} | |||
// 🔥 INIT ALL DROPDOWNS | |||
document.querySelectorAll('.mw-dropdown-ui').forEach(initDropdown); | |||
}); | }); | ||
}); | }); | ||
Revision as of 18:21, 21 April 2026
mw.loader.using('mediawiki.util').then(function () {
$(function () {
function initDropdown(container) {
const label = container.dataset.label || "Select";
const options = JSON.parse(container.dataset.options || "{}");
const wrapper = document.createElement('div');
wrapper.className = 'mw-dropdown';
const button = document.createElement('button');
button.textContent = label;
button.className = 'mw-dropdown-btn';
const list = document.createElement('div');
list.className = 'mw-dropdown-list';
list.style.display = 'none';
const content = document.createElement('div');
content.className = 'mw-dropdown-content';
Object.keys(options).forEach(key => {
const opt = options[key];
const item = document.createElement('div');
item.className = 'mw-dropdown-item';
item.textContent = opt.label;
item.addEventListener('click', function () {
button.textContent = opt.label;
content.innerHTML = opt.content;
list.style.display = 'none';
});
list.appendChild(item);
});
button.addEventListener('click', function () {
list.style.display = list.style.display === 'none' ? 'block' : 'none';
});
wrapper.appendChild(button);
wrapper.appendChild(list);
wrapper.appendChild(content);
container.innerHTML = '';
container.appendChild(wrapper);
}
// 🔥 INIT ALL DROPDOWNS
document.querySelectorAll('.mw-dropdown-ui').forEach(initDropdown);
});
});