MediaWiki:Common.js: Difference between revisions

From Fate/Starry Night Wiki
Jump to navigation Jump to search
← Older edit
Admin (talk | contribs)
Bureaucrats, Interface administrators, Administrators
136 edits
No edit summary
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 16: Line 16:
   }
   }


  // Avoid duplicating if MW re-renders content
  if (toc.querySelector('.toc-fold-btn')) return;
  // Insert fold button
  const btn = document.createElement('button');
  btn.type = 'button';
  btn.className = 'toc-fold-btn';
  btn.setAttribute('aria-expanded', 'true');
  btn.setAttribute('title', 'Hide table of contents');
  btn.textContent = '⟨⟨'; // folded indicator; we’ll flip it dynamically
  toc.prepend(btn);
  const STORAGE_KEY = 'mw_toc_folded';
  function setFolded(folded) {
    toc.classList.toggle('toc-folded', folded);
    btn.setAttribute('aria-expanded', String(!folded));
    btn.setAttribute('title', folded ? 'Show table of contents' : 'Hide table of contents');
    btn.textContent = folded ? '⟩⟩' : '⟨⟨';
    try { localStorage.setItem(STORAGE_KEY, folded ? '1' : '0'); } catch (e) {}
  }
  // Restore folded state
  let folded = false;
  try { folded = localStorage.getItem(STORAGE_KEY) === '1'; } catch (e) {}
  setFolded(folded);
  btn.addEventListener('click', function (e) {
    e.preventDefault();
    folded = !toc.classList.contains('toc-folded');
    setFolded(folded);
  });
 
   // Don't float if not using desktop
   // Don't float if not using desktop
   if (window.innerWidth < 1200) return;
   if (window.innerWidth < 600) return;
   const tocTop = toc.getBoundingClientRect().top + window.scrollY;
   const tocTop = toc.getBoundingClientRect().top + window.scrollY;
    
    
Line 56: Line 23:
   function onScroll() {
   function onScroll() {
     if (window.scrollY > tocTop) {
     if (window.scrollY > tocTop) {
       toc.classList.add('toc-floating');
       // ONLY when we first enter floating state
      if (!toc.classList.contains('toc-floating')) {
        pinHorizontalPosition();          // 👈 snapshot left + width
        toc.classList.add('toc-floating');
      }
     } else {
     } else {
      // Leaving floating state
       toc.classList.remove('toc-floating');
       toc.classList.remove('toc-floating');
       // optional: when not floating, don’t keep it folded-looking
       unpinHorizontalPosition();
      toc.classList.remove('toc-folded');
      btn.setAttribute('aria-expanded', 'true');
      btn.setAttribute('title', 'Hide table of contents');
      btn.textContent = '⟨⟨';
    }
   }
   }
}


   window.addEventListener('scroll', onScroll, { passive: true });
   window.addEventListener('scroll', onScroll, { passive: true });

Latest revision as of 14:50, 10 February 2026

/* Any JavaScript here will be loaded for all users on every page load. */

/*
  TOC - floating
 */
 mw.hook('wikipage.content').add(function () {
  const toc = document.getElementById('toc');
  if (!toc) return;
  
  // Horizontal pin helper
  function pinHorizontalPosition() {
    const rect = toc.getBoundingClientRect();
    toc.style.setProperty('--toc-left', rect.left + 'px');
    toc.style.left = rect.left + 'px';
    toc.style.width = rect.width + 'px';
  }

  // Don't float if not using desktop
  if (window.innerWidth < 600) return;
  const tocTop = toc.getBoundingClientRect().top + window.scrollY;
  
  // Floating trigger: only float after scrolling past original position
  function onScroll() {
    if (window.scrollY > tocTop) {
      // ONLY when we first enter floating state
      if (!toc.classList.contains('toc-floating')) {
        pinHorizontalPosition();          // 👈 snapshot left + width
        toc.classList.add('toc-floating');
      }
    } else {
      // Leaving floating state
      toc.classList.remove('toc-floating');
      unpinHorizontalPosition();
  }
}

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
});

// Prevent overlap with footer
const footer = document.querySelector('#footer');
const footerTop = footer.getBoundingClientRect().top + window.scrollY;
if (window.scrollY + toc.offsetHeight + 100 > footerTop) {
  toc.style.opacity = '0';
} else {
  toc.style.opacity = '1';
}
Retrieved from "https://wiki.fatechan.top/index.php?title=MediaWiki:Common.js&oldid=109"