MediaWiki:Timeless.js: Difference between revisions

From Ghost Theory Wiki
Newer edit →
PerilM (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,128 edits
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:
/* All JavaScript here will be loaded for users of the Timeless skin */
/* 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('.year-header').forEach(header => {
document.querySelectorAll('#p-years .mw-portlet-body > ul > li').forEach(yearItem => {
   header.addEventListener('click', function () {
   const header = yearItem.querySelector('a');
    const yearItem = this.closest('.year-item');
  if (!header) return;
    const content = yearItem.querySelector('.year-content');
 
    const arrow = this.querySelector('.year-arrow');
  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';


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


/* Search Functionality */
/* Search Functionality */
document.getElementById('searchInput')?.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();
   document.querySelectorAll('.mw-portlet-body a, .year-content a').forEach(link => {
   document.querySelectorAll('#mw-panel a').forEach(link => {
     const linkText = link.textContent.toLowerCase();
     const text = link.textContent.toLowerCase();
     link.parentElement.style.display = linkText.includes(searchTerm) ? 'block' : 'none';
     link.style.display = text.includes(searchTerm) ? 'block' : 'none';
   });
   });
});
});
Retrieved from "https://ghosttheorywiki.com/wiki/MediaWiki:Timeless.js"