MediaWiki:Timeless.js: Difference between revisions
From Ghost Theory Wiki
Created page with "→All JavaScript here will be loaded for users of the Timeless skin: →Portlet Toggle: document.querySelectorAll('.portlet-header').forEach(header => { header.addEventListener('click', function () { const portlet = this.closest('.mw-portlet'); const body = portlet.querySelector('.mw-portlet-body'); const arrow = this.querySelector('.portlet-arrow'); body.classList.toggle('collapsed'); arrow.classList.toggle('collapsed'); }); }); /* Year To..." |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* Add custom classes to sidebar portlets */ | ||
document.querySelectorAll('#mw-panel .mw-portlet').forEach(portlet => { | |||
const header = portlet.querySelector('h3'); | |||
if (header) { | |||
header.classList.add('portlet-header'); | |||
const arrow = document.createElement('span'); | |||
arrow.className = 'portlet-arrow'; | |||
arrow.textContent = '▼'; | |||
header.appendChild(arrow); | |||
} | |||
}); | |||
/* Portlet Toggle */ | /* Portlet Toggle */ | ||
document.querySelectorAll('.portlet-header').forEach(header => { | document.querySelectorAll('.portlet-header').forEach(header => { | ||
| Line 13: | Line 24: | ||
/* Year Toggle */ | /* Year Toggle */ | ||
document.querySelectorAll('. | document.querySelectorAll('#p-years .mw-portlet-body > ul > li').forEach(yearItem => { | ||
header. | const header = yearItem.querySelector('a'); | ||
if (!header) return; | |||
header.classList.add('year-header'); | |||
const arrow = document.createElement('span'); | |||
arrow.className = 'year-arrow'; | |||
arrow.textContent = '▼'; | |||
header.appendChild(arrow); | |||
const sublist = yearItem.querySelector('ul'); | |||
if (sublist) { | |||
sublist.classList.add('year-content'); | |||
sublist.style.display = 'none'; | |||
header.addEventListener('click', function (e) { | |||
e.preventDefault(); | |||
sublist.classList.toggle('expanded'); | |||
arrow.classList.toggle('collapsed'); | |||
sublist.style.display = sublist.classList.contains('expanded') ? 'block' : 'none'; | |||
}); | |||
} | |||
}); | }); | ||
/* Search Functionality */ | /* Search Functionality */ | ||
document. | document.querySelector('#p-search input')?.addEventListener('keyup', function (e) { | ||
const searchTerm = e.target.value.toLowerCase(); | const searchTerm = e.target.value.toLowerCase(); | ||
document.querySelectorAll(' | document.querySelectorAll('#mw-panel a').forEach(link => { | ||
const | const text = link.textContent.toLowerCase(); | ||
link | link.style.display = text.includes(searchTerm) ? 'block' : 'none'; | ||
}); | }); | ||
}); | }); | ||
Revision as of 19:00, 15 December 2025
/* Add custom classes to sidebar portlets */
document.querySelectorAll('#mw-panel .mw-portlet').forEach(portlet => {
const header = portlet.querySelector('h3');
if (header) {
header.classList.add('portlet-header');
const arrow = document.createElement('span');
arrow.className = 'portlet-arrow';
arrow.textContent = '▼';
header.appendChild(arrow);
}
});
/* Portlet Toggle */
document.querySelectorAll('.portlet-header').forEach(header => {
header.addEventListener('click', function () {
const portlet = this.closest('.mw-portlet');
const body = portlet.querySelector('.mw-portlet-body');
const arrow = this.querySelector('.portlet-arrow');
body.classList.toggle('collapsed');
arrow.classList.toggle('collapsed');
});
});
/* Year Toggle */
document.querySelectorAll('#p-years .mw-portlet-body > ul > li').forEach(yearItem => {
const header = yearItem.querySelector('a');
if (!header) return;
header.classList.add('year-header');
const arrow = document.createElement('span');
arrow.className = 'year-arrow';
arrow.textContent = '▼';
header.appendChild(arrow);
const sublist = yearItem.querySelector('ul');
if (sublist) {
sublist.classList.add('year-content');
sublist.style.display = 'none';
header.addEventListener('click', function (e) {
e.preventDefault();
sublist.classList.toggle('expanded');
arrow.classList.toggle('collapsed');
sublist.style.display = sublist.classList.contains('expanded') ? 'block' : 'none';
});
}
});
/* Search Functionality */
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';
});
});
