MediaWiki:Common.js: Difference between revisions

/* 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 < 1200) 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';
}






mw.hook('wikipage.content').add(function () {
  const toc = document.querySelector('#toc, .vector-toc');
  if (!toc) return;

  // Create a placeholder so we can put it back exactly where it was
  const placeholder = document.createComment('TOC_PLACEHOLDER');
  toc.parentNode.insertBefore(placeholder, toc);

  function moveTocToBody() {
    if (toc.parentNode !== document.body) {
      document.body.appendChild(toc);
    }
  }

  function moveTocBack() {
    if (placeholder.parentNode && toc.parentNode === document.body) {
      placeholder.parentNode.insertBefore(toc, placeholder);
    }
  }

  // Example: call these where you toggle floating
  function enterFloating() {
    moveTocToBody();
    toc.classList.add('toc-floating');
  }

  function exitFloating() {
    toc.classList.remove('toc-floating');
    moveTocBack();
  }

  // ---- integrate with your existing onScroll() ----
  const tocTop = placeholder.getBoundingClientRect().top + window.scrollY;

  function onScroll() {
    if (window.scrollY > tocTop) {
      if (!toc.classList.contains('toc-floating')) {
        enterFloating();
      }
    } else {
      if (toc.classList.contains('toc-floating')) {
        exitFloating();
      }
    }
  }

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