MediaWiki:Timeless.js: Difference between revisions

From Ghost Theory Wiki
← Older editNewer edit →
PerilM (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,128 edits
No edit summary
No edit summary
Line 1: Line 1:
/* Add custom classes to sidebar portlets */
/* 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');
  header.classList.add('portlet-header');
    arrow.className = 'portlet-arrow';
 
    arrow.textContent = '▼';
  const arrow = document.createElement('span');
    header.appendChild(arrow);
  arrow.className = 'portlet-arrow';
  }
  arrow.textContent = '▼';
});
  header.appendChild(arrow);


/* Portlet Toggle */
   header.addEventListener('click', () => {
document.querySelectorAll('.portlet-header').forEach(header => {
   header.addEventListener('click', function () {
    const portlet = this.closest('.mw-portlet');
     const body = portlet.querySelector('.mw-portlet-body');
     const body = portlet.querySelector('.mw-portlet-body');
    const arrow = this.querySelector('.portlet-arrow');
     body.classList.toggle('collapsed');
     body.classList.toggle('collapsed');
     arrow.classList.toggle('collapsed');
     arrow.classList.toggle('collapsed');
Line 23: Line 18:
});
});


/* Year Toggle */
/* Year collapsible logic */
document.querySelectorAll('#p-years .mw-portlet-body > ul > li').forEach(yearItem => {
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);


   const sublist = yearItem.querySelector('ul');
   sublist.classList.add('year-content');
  if (sublist) {
  sublist.style.display = 'none';
    sublist.classList.add('year-content');
    sublist.style.display = 'none';


    header.addEventListener('click', function (e) {
  header.addEventListener('click', e => {
      e.preventDefault();
    e.preventDefault();
      sublist.classList.toggle('expanded');
    sublist.classList.toggle('expanded');
      arrow.classList.toggle('collapsed');
    arrow.classList.toggle('collapsed');
      sublist.style.display = sublist.classList.contains('expanded') ? 'block' : 'none';
    sublist.style.display = sublist.classList.contains('expanded') ? 'block' : 'none';
    });
  });
  }
});
});


/* Search Functionality */
/* 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();
Retrieved from "https://ghosttheorywiki.com/wiki/MediaWiki:Timeless.js"