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 arrows to all custom portlets */
```
document.querySelectorAll('#mw-panel .mw-portlet').forEach(portlet => {
mw.loader.using('mediawiki.util').then(function () {
  const header = portlet.querySelector('h3');
  if (!header) return;


   header.classList.add('portlet-header');
   /* Add arrows to all custom portlets */
  document.querySelectorAll('#mw-panel .mw-portlet').forEach(portlet => {
    const header = portlet.querySelector('h3');
    if (!header) return;


  const arrow = document.createElement('span');
    header.classList.add('portlet-header');
  arrow.className = 'portlet-arrow';
  arrow.textContent = '▼';
  header.appendChild(arrow);


  header.addEventListener('click', () => {
    const arrow = document.createElement('span');
    const body = portlet.querySelector('.mw-portlet-body');
    arrow.className = 'portlet-arrow';
    body.classList.toggle('collapsed');
    arrow.textContent = '▼';
    arrow.classList.toggle('collapsed');
    header.appendChild(arrow);
 
    header.addEventListener('click', () => {
      const body = portlet.querySelector('.mw-portlet-body');
      body.classList.toggle('collapsed');
      arrow.classList.toggle('collapsed');
    });
   });
   });
});


/* Year collapsible logic */
  /* Year collapsible logic */
document.querySelectorAll('#mw-panel .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(':scope > a');
  const sublist = yearItem.querySelector('ul');
    const sublist = yearItem.querySelector(':scope > ul');
  if (!header || !sublist) return;
    if (!header || !sublist) return;


  header.classList.add('year-header');
    header.classList.add('year-header');


  const arrow = document.createElement('span');
    const arrow = document.createElement('span');
  arrow.className = 'year-arrow';
    arrow.className = 'year-arrow';
  arrow.textContent = '▼';
    arrow.textContent = '▼';
  header.appendChild(arrow);
    header.appendChild(arrow);


  sublist.classList.add('year-content');
    sublist.classList.add('year-content');
  sublist.style.display = 'none';
    sublist.style.display = 'none';


  header.addEventListener('click', 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 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';
  });
});
});
```
Retrieved from "https://ghosttheorywiki.com/wiki/MediaWiki:Timeless.js"