MediaWiki:Common.js: Difference between revisions

Revision as of 10:56, 15 April 2026

/* MediaWiki:Common.js — grantha.io
 *
 * Responsibilities:
 *  1. Transliteration engine (Devanāgarī → IAST / Kannada / Tamil).
 *  2. Tag all transliteratable text nodes once per page load.
 *  3. Apply the script stored in localStorage('grantha_reader_script')
 *     so every page opens in the user's preferred script automatically.
 *  4. Listen for the 'gr-script-change' CustomEvent dispatched by the
 *     ReaderToolbar dropdown and re-apply the new script immediately.
 *  5. TOC active-item highlight via MutationObserver (unchanged).
 *
 * The script-switcher bar/buttons previously built here are removed —
 * the ReaderToolbar extension now owns the dropdown UI.
 *
 * localStorage key shared with ReaderToolbar: 'grantha_reader_script'
 */

( function () {

  var LS_SCRIPT_KEY = 'grantha_reader_script';
  var currentScript = 'deva';

  // ── IAST transliteration ────────────────────────────────────────
  function devanagariToIAST( text ) {
    var CONSONANTS = {
      'क':'k','ख':'kh','ग':'g','घ':'gh','ङ':'ṅ',
      'च':'c','छ':'ch','ज':'j','झ':'jh','ञ':'ñ',
      'ट':'ṭ','ठ':'ṭh','ड':'ḍ','ढ':'ḍh','ण':'ṇ',
      'त':'t','थ':'th','द':'d','ध':'dh','न':'n',
      'प':'p','फ':'ph','ब':'b','भ':'bh','म':'m',
      'य':'y','र':'r','ल':'l','ळ':'ḷ','व':'v',
      'श':'ś','ष':'ṣ','स':'s','ह':'h'
    };
    var DIACRITICS = {
      'ा':'ā','ि':'i','ी':'ī','ु':'u','ू':'ū',
      'ृ':'ṛ','ॄ':'ṝ','े':'e','ै':'ai','ो':'o','ौ':'au'
    };
    var VOWELS = {
      'अ':'a','आ':'ā','इ':'i','ई':'ī','उ':'u','ऊ':'ū',
      'ऋ':'ṛ','ॠ':'ṝ','ए':'e','ऐ':'ai','ओ':'o','औ':'au','ऽ':"'"
    };
    var MISC = {
      'ं':'ṃ','ः':'ḥ','ँ':'m̐','ॐ':'oṃ',
      '०':'0','१':'1','२':'2','३':'3','४':'4',
      '५':'5','६':'6','७':'7','८':'8','९':'9'
    };
    var HALANTA = '्';
    var chars = Array.from( text );
    var result = '';
    var i = 0;
    while ( i < chars.length ) {
      var ch   = chars[ i ];
      var next = chars[ i + 1 ];
      if ( CONSONANTS[ ch ] ) {
        var base = CONSONANTS[ ch ];
        if ( next === HALANTA )          { result += base;               i += 2; }
        else if ( DIACRITICS[ next ] )   { result += base + DIACRITICS[ next ]; i += 2; }
        else if ( next === 'ं' || next === 'ः' ) { result += base + 'a' + MISC[ next ]; i += 2; }
        else                             { result += base + 'a';         i++;    }
      } else if ( VOWELS[ ch ] )         { result += VOWELS[ ch ];       i++; }
      else if ( DIACRITICS[ ch ] )       { result += DIACRITICS[ ch ];   i++; }
      else if ( MISC[ ch ] )             { result += MISC[ ch ];         i++; }
      else                               { result += ch;                 i++; }
    }
    return result;
  }

  // ── Character maps for Kannada / Tamil ─────────────────────────
  var SCRIPT_MAP = {
    kn: {
      'अ':'ಅ','आ':'ಆ','इ':'ಇ','ई':'ಈ','उ':'ಉ','ऊ':'ಊ','ऋ':'ಋ',
      'ए':'ಏ','ऐ':'ಐ','ओ':'ಓ','औ':'ಔ','ऽ':'ಽ',
      'क':'ಕ','ख':'ಖ','ग':'ಗ','घ':'ಘ','ङ':'ಙ',
      'च':'ಚ','छ':'ಛ','ज':'ಜ','झ':'ಝ','ञ':'ಞ',
      'ट':'ಟ','ठ':'ಠ','ड':'ಡ','ढ':'ಢ','ण':'ಣ',
      'त':'ತ','थ':'ಥ','द':'ದ','ध':'ಧ','न':'ನ',
      'प':'ಪ','फ':'ಫ','ब':'ಬ','भ':'ಭ','म':'ಮ',
      'य':'ಯ','र':'ರ','ल':'ಲ','व':'ವ',
      'श':'ಶ','ष':'ಷ','स':'ಸ','ह':'ಹ',
      'ा':'ಾ','ि':'ಿ','ी':'ೀ','ु':'ು','ू':'ೂ',
      'ृ':'ೃ','े':'ೇ','ै':'ೈ','ो':'ೋ','ौ':'ೌ',
      'ं':'ಂ','ः':'ಃ','्':'್',
      '०':'೦','१':'೧','२':'೨','३':'೩','४':'೪',
      '५':'೫','६':'೬','७':'೭','८':'೮','९':'೯'
    },
    ta: {
      'अ':'அ','आ':'ஆ','इ':'இ','ई':'ஈ','उ':'உ','ऊ':'ஊ',
      'ए':'ஏ','ऐ':'ஐ','ओ':'ஓ','औ':'ஔ',
      'क':'க','ख':'க','ग':'க','घ':'க','ङ':'ங',
      'च':'ச','छ':'ச','ज':'ஜ','झ':'ஜ','ञ':'ஞ',
      'ट':'ட','ठ':'ட','ड':'ட','ढ':'ட','ण':'ண',
      'त':'த','थ':'த','द':'த','ध':'த','न':'ந',
      'प':'ப','फ':'ப','ब':'ப','भ':'ப','म':'ம',
      'य':'ய','र':'ர','ல':'ல','व':'வ',
      'श':'ஶ','ष':'ஷ','स':'ஸ','ह':'ஹ',
      'ा':'ா','ि':'ி','ी':'ீ','ु':'ு','ू':'ூ',
      'े':'ே','ै':'ை','ो':'ோ','ौ':'ௌ',
      'ं':'ம்','ः':':','्':'்','ॐ':'ௐ',
      '०':'0','१':'1','२':'2','३':'3','४':'4',
      '५':'5','६':'6','७':'7','८':'8','९':'9'
    }
  };

  var PRE = [
    [ /ङ्क/g, 'ंक' ], [ /ङ्ख/g, 'ंख' ], [ /ङ्ग/g, 'ंग' ], [ /ङ्घ/g, 'ंघ' ],
    [ /ञ्च/g, 'ंच' ], [ /ञ्ज/g, 'ंज' ], [ /ण्ट/g, 'ंट' ], [ /ण्ड/g, 'ंड' ],
    [ /न्त/g, 'ंत' ], [ /न्द/g, 'ंद' ], [ /म्ब/g, 'ंब' ], [ /म्भ/g, 'ंभ' ]
  ];

  function transliterateText( text, script ) {
    if ( script === 'en' ) return devanagariToIAST( text );
    var map = SCRIPT_MAP[ script ];
    if ( !map ) return text;
    var t = text;
    PRE.forEach( function ( p ) { t = t.replace( p[ 0 ], p[ 1 ] ); } );
    return Array.from( t ).map( function ( ch ) {
      return map[ ch ] !== undefined ? map[ ch ] : ch;
    } ).join( '' );
  }

  // ── Tag all transliteratable text nodes once per page ───────────
  // Wraps each text node in a <span data-deva="original"> so that
  // applyScript() can flip the content without touching innerHTML.
  // Covers both .mw-parser-output AND the TOC sidebar so that script
  // switching is truly global across content and navigation.
  var translatableSpans = [];

  function tagTextNodes() {
    // Collect all roots to walk: main content + Vector 2022 TOC sidebar
    var roots = [];
    var content = document.querySelector( '.mw-parser-output' );
    if ( content ) roots.push( content );

    // Vector 2022 sidebar TOC lives outside .mw-parser-output
    var vtoc = document.querySelector( '.vector-toc' );
    if ( vtoc ) roots.push( vtoc );

    // Legacy inline TOC (#toc) is inside .mw-parser-output on older skins —
    // the data-deva guard prevents double-wrapping if it was already covered.
    // Only add it as a separate root when there is no .mw-parser-output.
    if ( !content ) {
      var ltoc = document.querySelector( '#toc' );
      if ( ltoc ) roots.push( ltoc );
    }

    roots.forEach( function ( root ) {
      var walker = document.createTreeWalker( root, NodeFilter.SHOW_TEXT );
      var nodes  = [];
      while ( walker.nextNode() ) nodes.push( walker.currentNode );

      nodes.forEach( function ( node ) {
        var p = node.parentNode;
        if ( !p ) return;
        if ( p.hasAttribute && p.hasAttribute( 'data-deva' ) ) return;
        if ( p.closest ) {
          if ( p.closest( '.gr-script-bar' ) ||  // legacy bar (harmless guard)
               p.closest( '.gr-controls' )   ||  // toolbar controls
               p.closest( '.mw-editsection' ) ) return;
        }
        var orig = node.textContent;
        if ( !orig.trim() ) return;
        var span = document.createElement( 'span' );
        span.setAttribute( 'data-deva', orig );
        span.textContent = orig;
        p.replaceChild( span, node );
        translatableSpans.push( span );
      } );
    } );
  }

  // ── Apply a script to all tagged spans ─────────────────────────
  function applyScript( script ) {
    currentScript = script;
    translatableSpans.forEach( function ( span ) {
      if ( !span.parentNode ) return; // detached node
      var orig = span.getAttribute( 'data-deva' );
      span.textContent = ( script === 'deva' )
        ? orig
        : transliterateText( orig, script );
    } );
  }

  // ── TOC active-item highlight + lazy TOC tagging ───────────────
  // ── TOC active-item highlight + lazy TOC tagging ───────────────
  function watchTocActive() {
    var toc = document.querySelector( '.vector-toc' );
    if ( !toc || toc._grObserved ) return;
    toc._grObserved = true;

    var _tagging = false;
    function tagAndApplyToc() {
      if ( _tagging ) return;
      _tagging = true;
      var walker = document.createTreeWalker( toc, NodeFilter.SHOW_TEXT );
      var nodes  = [];
      while ( walker.nextNode() ) nodes.push( walker.currentNode );
      var newSpans = [];
      nodes.forEach( function ( node ) {
        var p = node.parentNode;
        if ( !p ) return;
        if ( p.hasAttribute && p.hasAttribute( 'data-deva' ) ) return;
        var orig = node.textContent;
        if ( !orig.trim() ) return;
        var span = document.createElement( 'span' );
        span.setAttribute( 'data-deva', orig );
        span.textContent = orig;
        p.replaceChild( span, node );
        translatableSpans.push( span );
        newSpans.push( span );
      } );
      if ( currentScript !== 'deva' && newSpans.length ) {
        newSpans.forEach( function ( span ) {
          span.textContent = transliterateText( span.getAttribute( 'data-deva' ), currentScript );
        } );
      }
      _tagging = false;
    }

    // Tag immediately in case TOC is already in the DOM
    tagAndApplyToc();

    if ( window.MutationObserver ) {
      // Separate observer just for active-item highlight — attribute changes only,
      // never fires from our own DOM writes, safe to run forever
      var attrObserver = new MutationObserver( function ( mutations ) {
        mutations.forEach( function ( m ) {
          if ( m.attributeName !== 'class' ) return;
          var li   = m.target;
          var link = li.querySelector( ':scope > .vector-toc-link' );
          if ( !link ) return;
          if ( li.classList.contains( 'vector-toc-list-item-active' ) ) {
            link.style.color      = '#f57c00';
            link.style.fontWeight = '700';
          } else {
            link.style.color      = '';
            link.style.fontWeight = '';
          }
        } );
      } );
      toc.querySelectorAll( '.vector-toc-list-item' ).forEach( function ( li ) {
        attrObserver.observe( li, { attributes: true, attributeFilter: [ 'class' ] } );
      } );

      // Separate observer for lazy TOC population — watches childList but
      // 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 ) {
        var hasExternalAddition = mutations.some( function ( m ) {
          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 } );
    }
  }

    if ( !alreadyTagged ) {
      translatableSpans = [];
      tagTextNodes();
    }

    // Apply the globally persisted script preference immediately
    var saved = ( function () {
      try { return localStorage.getItem( LS_SCRIPT_KEY ); } catch ( e ) { return null; }
    }() );
    if ( saved && saved !== 'deva' ) {
      applyScript( saved );
    } else {
      currentScript = 'deva';
    }

    // watchTocActive handles both highlight colouring AND lazy TOC tagging
    watchTocActive();
  }

  // ── React to toolbar dropdown changes on the same page ─────────
  // The ReaderToolbar dispatches 'gr-script-change' when the user
  // picks a new script.  We just call applyScript() — no need to
  // touch localStorage again (the toolbar already wrote it).
  window.addEventListener( 'gr-script-change', function ( e ) {
    var script = e && e.detail && e.detail.script;
    if ( script ) applyScript( script );
  } );

  // ── MediaWiki hook (SPA-style navigation support) ───────────────
  if ( window.mw ) {
    mw.hook( 'wikipage.content' ).add( function () {
      setTimeout( function () {
        var content      = document.querySelector( '.mw-parser-output' );
        var alreadyTagged = content && content.querySelector( '[data-deva]' );
        if ( !alreadyTagged ) {
          translatableSpans = [];
          tagTextNodes();
        }
        // Re-apply current script to newly loaded content
        if ( currentScript !== 'deva' ) {
          applyScript( currentScript );
        }
        watchTocActive();
      }, 150 );
    } );
  }

  // ── Fallback for non-MW environments ───────────────────────────
  if ( document.readyState === 'loading' ) {
    document.addEventListener( 'DOMContentLoaded', init );
  } else {
    init();
  }

}() );