MediaWiki:Common.js - Revision history

Chandrashekars at 17:40, 25 April 2026

2026-04-25T17:40:56Z

Chandrashekars at 10:17, 24 April 2026

2026-04-24T10:17:49Z

← Older revision		Revision as of 10:17, 24 April 2026
Line 199:		Line 199:
	link.style.setProperty( 'color', ACTIVE_COLOR, 'important' );		link.style.setProperty( 'color', ACTIVE_COLOR, 'important' );
	link.style.setProperty( 'font-weight', ACTIVE_WEIGHT, 'important' );		link.style.setProperty( 'font-weight', ACTIVE_WEIGHT, 'important' );
	/* ~~Also colour nested spans~~ (e.g. ~~data~~-~~deva~~ spans ~~from transliteration~~) */		/* Colour ALL descendant elements — covers both:
	link.querySelectorAll( '~~span~~' ).forEach( function ( s ) {		* • data-deva <span> wrappers (Devanagari mode, textContent replaced)
	s.style.setProperty( 'color', ACTIVE_COLOR, 'important' );		* • .vector-toc-text / .vector-toc-numb spans (all scripts)
			* After applyScript() runs for non-Deva scripts, textContent is a
			* plain text node so querySelectorAll('span') still finds the
			* structural spans (.vector-toc-text etc.) which need colouring. */
			link.querySelectorAll( '*' ).forEach( function ( el ) {
			el.style.setProperty( 'color', ACTIVE_COLOR, 'important' );
	} );		} );
	} else {		} else {
	link.style.removeProperty( 'color' );		link.style.removeProperty( 'color' );
	link.style.removeProperty( 'font-weight' );		link.style.removeProperty( 'font-weight' );
	link.querySelectorAll( '~~span~~' ).forEach( function ( s ) {		link.querySelectorAll( '*' ).forEach( function ( el ) {
	s.style.removeProperty( 'color' );		el.style.removeProperty( 'color' );
	} );		} );
	}		}
Line 247:		Line 252:
	var cRect = container.getBoundingClientRect();		var cRect = container.getBoundingClientRect();
	if ( liRect.top < cRect.top + 8 \|\| liRect.bottom > cRect.bottom - 8 ) {		if ( liRect.top < cRect.top + 8 \|\| liRect.bottom > cRect.bottom - 8 ) {
	/* ~~Scroll only inside~~ the TOC container, ~~not the page~~ */		/* Find the scrollable ancestor within the TOC container.
	var ~~scrollParent~~ = ~~container.querySelector( '.vector-toc' ) \|\| container~~;		* Vector 2022 uses .vector-sticky-pinned-container as the
	var ~~offset~~ = ~~liRect.top - cRect~~.~~top~~;		* scroll host in some versions, and .vector-toc in others. */
	if ( ~~offset < 8 \|\| offset~~ > ~~cRect~~.~~height - 48~~ ) {		var scrollHost = null;
	~~scrollParent~~.~~scrollTop +~~= ~~offset~~ - ( ~~cRect~~.~~height~~ / 2 );		var candidate = li.parentNode;
			while ( candidate && candidate !== document.body ) {
			if ( candidate.scrollHeight > candidate.clientHeight + 4 ) {
			scrollHost = candidate;
			break;
			}
			candidate = candidate.parentNode;
			}
			if ( scrollHost ) {
			var targetTop = li.offsetTop - ( scrollHost.clientHeight / 2 );
			scrollHost.scrollTop = Math.max( 0, targetTop );
	}		}
	}		}
Line 311:		Line 326:
	// ── Init ────────────────────────────────────────────────────────		// ── Init ────────────────────────────────────────────────────────
	function init() {		function init() {
	/* Remove appearance panel + watchlist overflow ~~from DOM entirely~~		/* Remove appearance panel + watchlist overflow.
	* ~~so they cannot be toggled open even by~~ JS~~. CSS display:none is~~		* Vector injects some of these elements via its own JS after DOMContentLoaded,
	* ~~enough for most cases but DOM removal prevents any JS re-showing~~. */		* so we use a MutationObserver to catch them whenever they appear. */
	[ '#vector-appearance',		var HIDE_SELS = [
			'#vector-appearance',
	'#vector-appearance-pinned-container',		'#vector-appearance-pinned-container',
	'#vector-appearance-unpinned-container',		'#vector-appearance-unpinned-container',
	'.mw-portlet-appearance',		'.mw-portlet-appearance',
	'.mw-portlet-vector-user-menu-overflow',		'.mw-portlet-vector-user-menu-overflow',
	'#p-vector-~~user-menu-overflow~~',		'[aria-controls="vector-appearance"]'
	].forEach( function ( sel ) {		];
	document.querySelectorAll( sel ).forEach( function ( el ) {		function removeHiddenEls() {
	el.parentNode && el.parentNode.removeChild( el );		HIDE_SELS.forEach( function ( sel ) {
			document.querySelectorAll( sel ).forEach( function ( el ) {
			if ( el.parentNode ) el.parentNode.removeChild( el );
			} );
	} );		} );
	} );		}
	/* ~~Remove~~ the appearance ~~toggle BUTTON~~ (~~aria-controls="vector-appearance"~~) */		removeHiddenEls();
	document.~~querySelectorAll~~( '~~[aria~~-~~controls="vector~~-~~appearance"]~~' ).~~forEach~~( function ( el ) {		if ( window.MutationObserver ) {
	~~el.parentNode && el.parentNode~~.~~removeChild~~( el );		var hideObserver = new MutationObserver( function ( mutations ) {
	} );		var needsClean = false;
			mutations.forEach( function ( m ) {
			if ( m.addedNodes.length ) needsClean = true;
			} );
			if ( needsClean ) removeHiddenEls();
			} );
			/* Watch only direct children of body — NOT subtree.
			* Vector appends the appearance panel as a direct child of body.
			* Using subtree:true would fire on every inner DOM change (including
			* Vector setting active classes on TOC items) and interfere with the
			* liObserver that handles active highlight colouring. */
			hideObserver.observe( document.body, { childList: true, subtree: false } );
			/* Also check the header area where Vector sometimes injects the button */
			var mwHeader = document.querySelector( '.mw-header' ) \|\| document.querySelector( '#mw-head' );
			if ( mwHeader ) {
			hideObserver.observe( mwHeader, { childList: true, subtree: true } );
			}
			/* Stop observing after 8s — Vector will have finished by then */
			setTimeout( function () { hideObserver.disconnect(); }, 8000 );
			}

	var content = document.querySelector( '.mw-parser-output' );		var content = document.querySelector( '.mw-parser-output' );

Chandrashekars at 10:03, 24 April 2026

2026-04-24T10:03:03Z

@@ Line 311: / Line 311: @@
    // ── Init ────────────────────────────────────────────────────────
    function init() {
      var content       = document.querySelector( '.mw-parser-output' );
      var alreadyTagged = content && content.querySelector( '[data-deva]' );

Chandrashekars at 09:39, 24 April 2026

2026-04-24T09:39:11Z

Show changes

Chandrashekars at 06:54, 22 April 2026

2026-04-22T06:54:32Z

Show changes

Chandrashekars at 19:13, 19 April 2026

2026-04-19T19:13:56Z

← Older revision		Revision as of 19:13, 19 April 2026
Line 323:		Line 323:
	}		}

			}() );
			// ── Main page: by-Grantha / by-Author toggle ──────────────────
			// Runs only on Main_Page. Attaches click handlers to the two
			// <div role="button"> toggles emitted by make_main_page().
			// Using delegated event attachment here (not onclick= in wikitext)
			// because MediaWiki strips onclick= attributes for security.
			( function () {
			function grHomeView( v ) {
			var gView = document.getElementById( 'gr-view-grantha' );
			var aView = document.getElementById( 'gr-view-author' );
			var gBtn = document.getElementById( 'gr-toggle-grantha' );
			var aBtn = document.getElementById( 'gr-toggle-author' );
			if ( !gView \|\| !aView \|\| !gBtn \|\| !aBtn ) return;

			gView.style.display = ( v === 'grantha' ) ? '' : 'none';
			aView.style.display = ( v === 'author' ) ? '' : 'none';
			gBtn.className = 'gr-toggle-btn' + ( v === 'grantha' ? ' gr-toggle-active' : '' );
			aBtn.className = 'gr-toggle-btn' + ( v === 'author' ? ' gr-toggle-active' : '' );
			try { localStorage.setItem( 'gr_home_view', v ); } catch ( e ) {}
			}

			function initHomeToggle() {
			var gBtn = document.getElementById( 'gr-toggle-grantha' );
			var aBtn = document.getElementById( 'gr-toggle-author' );
			if ( !gBtn \|\| !aBtn ) return; // not on Main_Page

			gBtn.addEventListener( 'click', function () { grHomeView( 'grantha' ); } );
			aBtn.addEventListener( 'click', function () { grHomeView( 'author' ); } );
			// Keyboard support
			[ gBtn, aBtn ].forEach( function ( btn ) {
			btn.addEventListener( 'keydown', function ( e ) {
			if ( e.key === 'Enter' \|\| e.key === ' ' ) btn.click();
			} );
			} );

			// Restore persisted preference
			var saved;
			try { saved = localStorage.getItem( 'gr_home_view' ); } catch ( e ) {}
			if ( saved === 'author' ) grHomeView( 'author' );
			}

			if ( document.readyState === 'loading' ) {
			document.addEventListener( 'DOMContentLoaded', initHomeToggle );
			} else {
			initHomeToggle();
			}
	}() );		}() );

Chandrashekars at 07:16, 17 April 2026

2026-04-17T07:16:55Z

Show changes

Chandrashekars at 18:46, 16 April 2026

2026-04-16T18:46:26Z

Show changes

Chandrashekars at 06:04, 16 April 2026

2026-04-16T06:04:35Z

← Older revision		Revision as of 06:04, 16 April 2026
Line 86:		Line 86:
	ta: {		ta: {
	'अ':'அ','आ':'ஆ','इ':'இ','ई':'ஈ','उ':'உ','ऊ':'ஊ',		'अ':'அ','आ':'ஆ','इ':'இ','ई':'ஈ','उ':'உ','ऊ':'ஊ',
			'ऋ':'ரு','ॠ':'ரூ',
	'ए':'ஏ','ऐ':'ஐ','ओ':'ஓ','औ':'ஔ',		'ए':'ஏ','ऐ':'ஐ','ओ':'ஓ','औ':'ஔ',
	'क':'க','ख':'க','ग':'க','घ':'க','ङ':'ங',		'क':'க','ख':'க','ग':'க','घ':'க','ङ':'ங',
Line 92:		Line 93:
	'त':'த','थ':'த','द':'த','ध':'த','न':'ந',		'त':'த','थ':'த','द':'த','ध':'த','न':'ந',
	'प':'ப','फ':'ப','ब':'ப','भ':'ப','म':'ம',		'प':'ப','फ':'ப','ब':'ப','भ':'ப','म':'ம',
	'य':'ய','र':'ர','ல':'ல','व':'வ',		'य':'ய','र':'ர','ल':'ல','ळ':'ழ','व':'வ',
	'श':'ஶ','ष':'ஷ','स':'ஸ','ह':'ஹ',		'श':'ஶ','ष':'ஷ','स':'ஸ','ह':'ஹ',
	'ा':'ா','ि':'ி','ी':'ீ','ु':'ு','ू':'ூ',		'ा':'ா','ि':'ி','ी':'ீ','ु':'ு','ू':'ூ',
			'ृ':'ு','ॄ':'ூ',
	'े':'ே','ै':'ை','ो':'ோ','ौ':'ௌ',		'े':'ே','ै':'ை','ो':'ோ','ौ':'ௌ',
	'ं':'ம்','ः':':','्':'்','ॐ':'ௐ',		'ं':'ம்','ः':':','ँ':'ம்','्':'்','ॐ':'ௐ','ऽ':'ௗ',
	'०':'0','१':'1','२':'2','३':'3','४':'4',		'०':'0','१':'1','२':'2','३':'3','४':'4',
	'५':'5','६':'6','७':'7','८':'8','९':'9'		'५':'5','६':'6','७':'7','८':'8','९':'9'

Chandrashekars at 11:33, 15 April 2026

2026-04-15T11:33:52Z

← Older revision		Revision as of 11:33, 15 April 2026
Line 182:		Line 182:

	// ── TOC active-item highlight + lazy TOC tagging ───────────────		// ── TOC active-item highlight + lazy TOC tagging ───────────────
	// ~~MutationObserver watches Vector 2022~~ TOC ~~class changes and colours~~		// ── TOC active-item highlight + lazy TOC tagging ───────────────
	~~// the~~ active ~~link orange. This block is not modified for the~~ highlight
	~~// logic, but we additionally tag any~~ TOC ~~text nodes that were not yet~~
	~~// in the DOM when tagTextNodes() ran at boot (Vector 2022 renders the~~
	~~// TOC lazily on first scroll).~~
	function watchTocActive() {		function watchTocActive() {
	var toc = document.querySelector( '.vector-toc' );		var toc = document.querySelector( '.vector-toc' );
Line 192:		Line 188:
	toc._grObserved = true;		toc._grObserved = true;

	~~// Tag any TOC text nodes that appeared after initial tagTextNodes() run~~		var _tagging = false;
	function tagAndApplyToc() {		function tagAndApplyToc() {
			if ( _tagging ) return;
			_tagging = true;
	var walker = document.createTreeWalker( toc, NodeFilter.SHOW_TEXT );		var walker = document.createTreeWalker( toc, NodeFilter.SHOW_TEXT );
	var nodes = [];		var nodes = [];
Line 211:		Line 209:
	newSpans.push( span );		newSpans.push( span );
	} );		} );
	~~// Apply current script to any newly tagged spans~~
	if ( currentScript !== 'deva' && newSpans.length ) {		if ( currentScript !== 'deva' && newSpans.length ) {
	newSpans.forEach( function ( span ) {		newSpans.forEach( function ( span ) {
Line 217:		Line 214:
	} );		} );
	}		}
			_tagging = false;
	}		}

	// Tag immediately ~~(catches~~ TOC ~~if it was~~ already ~~rendered)~~		// Tag immediately in case TOC is already in the DOM
	tagAndApplyToc();		tagAndApplyToc();

	var ~~observer~~ = new MutationObserver( function ( mutations ) {		if ( window.MutationObserver ) {
	mutations.forEach( function ( m ~~) {~~		// Separate observer just for active-item highlight — attribute changes only,
	~~// Tag any new text nodes added to the TOC (lazy render)~~		// never fires from our own DOM writes, safe to run forever
	~~if ( m.addedNodes && m.addedNodes.length~~ ) {		var attrObserver = new MutationObserver( function ( mutations ) {
	~~tagAndApplyToc();~~		mutations.forEach( function ( m ) {
	}		if ( m.attributeName !== 'class' ) return;
	~~// Highlight active item~~
	if ( m.attributeName === 'class' ) {
	var li = m.target;		var li = m.target;
	var link = li.querySelector( ':scope > .vector-toc-link' );		var link = li.querySelector( ':scope > .vector-toc-link' );
Line 240:		Line 236:
	link.style.fontWeight = '';		link.style.fontWeight = '';
	}		}
	}		} );
			} );
			toc.querySelectorAll( '.vector-toc-list-item' ).forEach( function ( li ) {
			attrObserver.observe( li, { attributes: true, attributeFilter: [ 'class' ] } );
	} );		} );
	~~} );~~

	toc.querySelectorAll( '.vector-toc-list-item' ).forEach( function ( li ) {		// Separate observer for lazy TOC population — watches childList but
	~~observer~~.observe( li, { attributes: true, attributeFilter: [ 'class' ] } );		// ignores mutations caused by our own span insertions (those have
	} );		// addedNodes that are <span data-deva="…"> elements we just created)
			var childObserver = new MutationObserver( function ( mutations ) {
	~~// Also watch for new list items being added (TOC populated lazily~~)		var hasExternalAddition = mutations.some( function ( m ) {
	~~observer~~.observe( toc, { childList: true, subtree: true } );		return Array.prototype.some.call( m.addedNodes, function ( n ) {
			return !( n.nodeType === 1 && n.hasAttribute( 'data-deva' ) );
			} );
			} );
			if ( !hasExternalAddition ) return;
			tagAndApplyToc();
			// Attach highlight observer to any newly added list items
			toc.querySelectorAll( '.vector-toc-list-item' ).forEach( function ( li ) {
			attrObserver.observe( li, { attributes: true, attributeFilter: [ 'class' ] } );
			} );
			} );
			childObserver.observe( toc, { childList: true, subtree: true } );
			}
	}		}
			// ── Init ──────────────────────────────────────────────────────
	// ── Init ~~────────────────────────────────────────────────────────~~
	function init() {		function init() {
	var content = document.querySelector( '.mw-parser-output' );		var content = document.querySelector( '.mw-parser-output' );