MediaWiki:Common.js

/* Tout JavaScript présent ici sera exécuté par tous les utilisateurs à chaque chargement de page. */

/* ============================================================
   NEPHILIM — Double scrollbar (haut + bas) pour tableaux
   À copier dans MediaWiki:Common.js
   
   Fonctionne avec les paires :
     <div class="neph-scroll-top"><div class="neph-scroll-top-spacer"></div></div>
     <div class="neph-scroll-table"> ... </div>
   ============================================================ */

( function () {
  'use strict';

  function initDoubleScroll() {
    // Cherche toutes les paires top + table
    var tops = document.querySelectorAll( '.neph-scroll-top' );

    tops.forEach( function ( topDiv ) {
      // Le conteneur de tableau est l'élément frère suivant
      var tableDiv = topDiv.nextElementSibling;
      if ( !tableDiv || !tableDiv.classList.contains( 'neph-scroll-table' ) ) {
        return;
      }

      // Trouve ou crée le spacer dans la barre haute
      var spacer = topDiv.querySelector( '.neph-scroll-top-spacer' );
      if ( !spacer ) {
        spacer = document.createElement( 'div' );
        spacer.className = 'neph-scroll-top-spacer';
        topDiv.appendChild( spacer );
      }

      // Synchronise la largeur du spacer avec le contenu du tableau
      function syncWidth() {
        spacer.style.width = tableDiv.scrollWidth + 'px';
      }

      syncWidth();

      // Re-synchronise si la fenêtre change de taille
      window.addEventListener( 'resize', syncWidth );

      // Observe aussi les changements de contenu (chargement tardif, etc.)
      if ( typeof ResizeObserver !== 'undefined' ) {
        var ro = new ResizeObserver( syncWidth );
        ro.observe( tableDiv );
      }

      // --- Synchronisation bidirectionnelle du scroll ---
      var syncing = false;

      topDiv.addEventListener( 'scroll', function () {
        if ( !syncing ) {
          syncing = true;
          tableDiv.scrollLeft = topDiv.scrollLeft;
          syncing = false;
        }
      } );

      tableDiv.addEventListener( 'scroll', function () {
        if ( !syncing ) {
          syncing = true;
          topDiv.scrollLeft = tableDiv.scrollLeft;
          syncing = false;
        }
      } );
    } );
  }

  // Lance après le chargement complet de la page
  if ( document.readyState === 'complete' ) {
    initDoubleScroll();
  } else {
    window.addEventListener( 'load', initDoubleScroll );
  }

}() );