MediaWiki:Gadget-wix-nav.js - Revision history

Wikilah admin at 12:29, 6 April 2026

2026-04-06T12:29:30Z

← Older revision		Revision as of 20:29, 6 April 2026
Line 253:		Line 253:
	container.appendChild( row );		container.appendChild( row );

			// 6. Make nav buttons square (width = height, measured after layout)
⚫	// 6. Toggle open/close
			setTimeout( function () {
			var h = toggle.offsetHeight;
			if ( h ) {
			btnBack.style.width = h + 'px';
			btnNext.style.width = h + 'px';
			}
			}, 0 );

		⚫	// 7. Toggle open/close
	var isOpen = false;		var isOpen = false;

Wikilah admin at 12:26, 6 April 2026

2026-04-06T12:26:29Z

← Older revision		Revision as of 20:26, 6 April 2026
Line 223:		Line 223:

	var btnBack = wix.el( 'a', {		var btnBack = wix.el( 'a', {
	className: '~~wix-btn wix-btn--outline~~ wix-dropdown-nav-btn',		className: 'wix-dropdown-nav-btn'
	textContent: '\~~u2190 Back~~'		}, [ wix.el( 'span', { className: 'wix-dropdown-nav-arrow', textContent: '\u25BC' } ) ] );
	} );

	var btnNext = wix.el( 'a', {		var btnNext = wix.el( 'a', {
	className: '~~wix-btn~~ wix-dropdown-nav-btn',		className: 'wix-dropdown-nav-btn'
			}, [ wix.el( 'span', { className: 'wix-dropdown-nav-arrow wix-dropdown-nav-arrow--next', textContent: '\u25BC' } ) ] );
	textContent: 'Next \u2192'
	} );

	if ( isFirst \|\| currentIdx === -1 ) {		if ( isFirst \|\| currentIdx === -1 ) {

Wikilah admin at 12:18, 6 April 2026

2026-04-06T12:18:28Z

← Older revision		Revision as of 20:18, 6 April 2026
Line 154:		Line 154:
	}		}

	// 2. Detect current page		// 2. Detect current page and its index
	var currentPage = mw.config.get( 'wgPageName' ).replace( / /g, '_' );		var currentPage = mw.config.get( 'wgPageName' ).replace( / /g, '_' );
	var currentLabel = 'Navigate to\u2026';		var currentLabel = 'Navigate to\u2026';
			var currentIdx = -1;

	pages.forEach( function ( entry ) {		pages.forEach( function ( entry, i ) {
	var normalizedPage = entry[ 1 ].replace( / /g, '_' );		var normalizedPage = entry[ 1 ].replace( / /g, '_' );
	if ( normalizedPage === currentPage ) {		if ( normalizedPage === currentPage ) {
	currentLabel = entry[ 0 ];		currentLabel = entry[ 0 ];
			currentIdx = i;
	}		}
	} );		} );
Line 168:		Line 170:
	wix.empty( container );		wix.empty( container );

	var ~~wrapper~~ = wix.el( 'div', {		var dropdown = wix.el( 'div', {
	className: 'wix-dropdown',		className: 'wix-dropdown',
	'role': 'navigation',		'role': 'navigation',
Line 213:		Line 215:
	} );		} );

	~~wrapper~~.appendChild( toggle );		dropdown.appendChild( toggle );
	~~wrapper~~.appendChild( panel );		dropdown.appendChild( panel );

⚫	container.appendChild( ~~wrapper~~ );
			// 4. Back / Next buttons
			var isFirst = currentIdx <= 0;
			var isLast = currentIdx >= pages.length - 1;

			var btnBack = wix.el( 'a', {
			className: 'wix-btn wix-btn--outline wix-dropdown-nav-btn',
			textContent: '\u2190 Back'
			} );

			var btnNext = wix.el( 'a', {
			className: 'wix-btn wix-dropdown-nav-btn',
			textContent: 'Next \u2192'
			} );

			if ( isFirst \|\| currentIdx === -1 ) {
			btnBack.classList.add( 'wix-dropdown-nav-btn--disabled' );
			btnBack.removeAttribute( 'href' );
			} else {
			btnBack.setAttribute( 'href', mw.util.getUrl( pages[ currentIdx - 1 ][ 1 ] ) );
			}

			if ( isLast \|\| currentIdx === -1 ) {
			btnNext.classList.add( 'wix-dropdown-nav-btn--disabled' );
			btnNext.removeAttribute( 'href' );
			} else {
			btnNext.setAttribute( 'href', mw.util.getUrl( pages[ currentIdx + 1 ][ 1 ] ) );
			}

			// 5. Assemble: Back \| Dropdown \| Next
			var row = wix.el( 'div', { className: 'wix-dropdown-row' }, [
			btnBack,
			dropdown,
			btnNext
			] );

		⚫	container.appendChild( row );

	// 4. Toggle open/close		// 6. Toggle open/close
	var isOpen = false;		var isOpen = false;

Line 226:		Line 264:
	} );		} );

	// 5. Close on click outside		// 7. Close on click outside
	document.addEventListener( 'click', function ( e ) {		document.addEventListener( 'click', function ( e ) {
	if ( isOpen && !~~wrapper~~.contains( e.target ) ) {		if ( isOpen && !dropdown.contains( e.target ) ) {
	isOpen = false;		isOpen = false;
	toggle.classList.remove( 'wix-dropdown-toggle--open' );		toggle.classList.remove( 'wix-dropdown-toggle--open' );

Wikilah admin at 16:29, 1 April 2026

2026-04-01T16:29:40Z

@@ Line 20: / Line 20: @@
 ( function () {
   'use strict';
   /* ── Guard ──────────────────────────────────────────────────── */
@@ Line 29: / Line 64: @@
     var dropdownContainers = wix.initModules( 'nav-dropdown' );
     dropdownContainers.forEach( initNavDropdown );
   } );
@@ Line 196: / Line 234: @@
+      }
     } );
+  }

Wikilah admin at 14:07, 31 March 2026

2026-03-31T14:07:18Z

@@ Line 24: / Line 24: @@
   mw.hook( 'wikipage.content' ).add( function () {
-    var containers = wix.initModules( 'nav' );
+    var navContainers = wix.initModules( 'nav' );
-    containers.forEach( initNav );
+    dropdownContainers.forEach( initNavDropdown );
   } );
@@ Line 98: / Line 98: @@
       }, 0 );
+    }
+  }

Wikilah admin: Created page with "/* ================================================================ 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 wikit..."

2026-03-31T13:09:07Z

Created page with "/* ================================================================ 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 wikit..."

New page

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

}() );