MediaWiki:Timeless.js: Difference between revisions
From Ghost Theory Wiki
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Add custom | /* Add arrows to all custom portlets */ | ||
document.querySelectorAll('#mw-panel .mw-portlet').forEach(portlet => { | document.querySelectorAll('#mw-panel .mw-portlet').forEach(portlet => { | ||
const header = portlet.querySelector('h3'); | const header = portlet.querySelector('h3'); | ||
if (header) | if (!header) return; | ||
header.classList.add('portlet-header'); | |||
const arrow = document.createElement('span'); | |||
arrow.className = 'portlet-arrow'; | |||
arrow.textContent = '▼'; | |||
header.appendChild(arrow); | |||
header.addEventListener('click', () => { | |||
header.addEventListener('click', | |||
const body = portlet.querySelector('.mw-portlet-body'); | const body = portlet.querySelector('.mw-portlet-body'); | ||
body.classList.toggle('collapsed'); | body.classList.toggle('collapsed'); | ||
arrow.classList.toggle('collapsed'); | arrow.classList.toggle('collapsed'); | ||
| Line 23: | Line 18: | ||
}); | }); | ||
/* Year | /* Year collapsible logic */ | ||
document.querySelectorAll('# | document.querySelectorAll('#mw-panel .mw-portlet-body > ul > li').forEach(yearItem => { | ||
const header = yearItem.querySelector('a'); | const header = yearItem.querySelector('a'); | ||
if (!header) return; | const sublist = yearItem.querySelector('ul'); | ||
if (!header || !sublist) return; | |||
header.classList.add('year-header'); | header.classList.add('year-header'); | ||
| Line 35: | Line 31: | ||
header.appendChild(arrow); | header.appendChild(arrow); | ||
sublist.classList.add('year-content'); | |||
sublist.style.display = 'none'; | |||
header.addEventListener('click', e => { | |||
e.preventDefault(); | |||
sublist.classList.toggle('expanded'); | |||
arrow.classList.toggle('collapsed'); | |||
sublist.style.display = sublist.classList.contains('expanded') ? 'block' : 'none'; | |||
}); | |||
}); | }); | ||
/* Search | /* Search filter */ | ||
document.querySelector('#p-search input')?.addEventListener('keyup', function (e) { | document.querySelector('#p-search input')?.addEventListener('keyup', function (e) { | ||
const searchTerm = e.target.value.toLowerCase(); | const searchTerm = e.target.value.toLowerCase(); | ||
Revision as of 19:13, 15 December 2025
/* Add arrows to all custom portlets */
document.querySelectorAll('#mw-panel .mw-portlet').forEach(portlet => {
const header = portlet.querySelector('h3');
if (!header) return;
header.classList.add('portlet-header');
const arrow = document.createElement('span');
arrow.className = 'portlet-arrow';
arrow.textContent = '▼';
header.appendChild(arrow);
header.addEventListener('click', () => {
const body = portlet.querySelector('.mw-portlet-body');
body.classList.toggle('collapsed');
arrow.classList.toggle('collapsed');
});
});
/* Year collapsible logic */
document.querySelectorAll('#mw-panel .mw-portlet-body > ul > li').forEach(yearItem => {
const header = yearItem.querySelector('a');
const sublist = yearItem.querySelector('ul');
if (!header || !sublist) return;
header.classList.add('year-header');
const arrow = document.createElement('span');
arrow.className = 'year-arrow';
arrow.textContent = '▼';
header.appendChild(arrow);
sublist.classList.add('year-content');
sublist.style.display = 'none';
header.addEventListener('click', e => {
e.preventDefault();
sublist.classList.toggle('expanded');
arrow.classList.toggle('collapsed');
sublist.style.display = sublist.classList.contains('expanded') ? 'block' : 'none';
});
});
/* Search filter */
document.querySelector('#p-search input')?.addEventListener('keyup', function (e) {
const searchTerm = e.target.value.toLowerCase();
document.querySelectorAll('#mw-panel a').forEach(link => {
const text = link.textContent.toLowerCase();
link.style.display = text.includes(searchTerm) ? 'block' : 'none';
});
});
