MediaWiki:Gadget-wix-nav.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* ================================================================
   WIX-NAV.JS — Wiki Interactive Experience: Training Navigation
   ================================================================
   Depends on: ext.gadget.wix-core  (window.wix must exist)

   Finds every container with data-wix-module="nav", reads the
   page list from data-wix-pages (JSON), and builds a horizontal
   navigation bar with the current page highlighted.

   DOM contract (set by wikitext snippet):
   ─────────────────────────────────────────
   Container:   [data-wix-module="nav"]
                  data-wix-pages   JSON array of [label, pageName] pairs

   Example:
     data-wix-pages='[["Module 1","Internal:Training/IFRS17/module-1"],
                      ["Module 2","Internal:Training/IFRS17/module-2"]]'
   ================================================================ */

( function () {
  'use strict';

  /* ── Guard ──────────────────────────────────────────────────── */

  mw.hook( 'wikipage.content' ).add( function () {
    var containers = wix.initModules( 'nav' );
    if ( !containers.length ) {
      return;
    }
    containers.forEach( initNav );
  } );


  /* ── Main init ──────────────────────────────────────────────── */

  function initNav( container ) {
    // 1. Read and parse page list
    var raw = wix.data( container, 'wix-pages', '[]' );
    var pages;
    try {
      pages = JSON.parse( raw );
    } catch ( e ) {
      return;
    }
    if ( !pages.length ) {
      return;
    }

    // 2. Detect current page
    var currentPage = mw.config.get( 'wgPageName' ).replace( / /g, '_' );

    // 3. Build menu
    wix.empty( container );

    var menu = wix.el( 'div', {
      className: 'wix-menu',
      'role': 'navigation',
      'aria-label': 'Training navigation'
    } );

    var currentBtn = null;

    pages.forEach( function ( entry ) {
      var label = entry[ 0 ];
      var pageName = entry[ 1 ];
      var normalizedPage = pageName.replace( / /g, '_' );
      var isCurrent = ( normalizedPage === currentPage );
      var btn;

      if ( isCurrent ) {
        btn = wix.el( 'span', {
          className: 'wix-menu-btn wix-menu-btn--current',
          textContent: label,
          'aria-current': 'page'
        } );
        currentBtn = btn;
      } else {
        btn = wix.el( 'a', {
          className: 'wix-menu-btn',
          textContent: label,
          href: mw.util.getUrl( pageName )
        } );
      }

      menu.appendChild( btn );
    } );

    container.appendChild( menu );

    // 4. Scroll current button into view on mobile
    if ( currentBtn ) {
      setTimeout( function () {
        currentBtn.scrollIntoView( {
          inline: 'center',
          block: 'nearest',
          behavior: 'smooth'
        } );
      }, 0 );
    }
  }

}() );