Jump to content

MediaWiki:Common.js

From Anandamakaranda
Revision as of 08:59, 28 April 2026 by Chandrashekars (talk | contribs)

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.
/* MediaWiki:Common.js — grantha.io  (v7)
 *
 * Changes vs v6:
 *  1. BUG FIX: The main IIFE was never properly closed in v6 — the "About"
 *     link injection block was pasted inside it without the closing }() );
 *     This broke the JS module boundary and caused the by-Author toggle on
 *     the main page to fail (the grHomeView IIFE ran in a corrupted scope).
 *     Fix: About link injection is now its own self-contained IIFE, cleanly
 *     separated from the transliteration/TOC IIFE.
 *  2. TOC: Remove the auto-generated "Beginning" link (Vector 2022 always
 *     inserts a first TOC entry that links to the page top; on Sanskrit
 *     content pages this is unnecessary and clutters the TOC).
 *  3. TOC: Add "मूल" (Moola) and "उल्लेख" (Ullekha) nav links below the
 *     document title area — Moola links back to the primary bhashya page
 *     (on teeka/vyakhya pages), Ullekha links to the references index page
 *     for the document. Both use the existing data-primary / doc-slug
 *     attributes already present in the page HTML.
 *  4. All other behaviour identical to v6.
 */

( 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 ───────────
  var translatableSpans = [];

  function tagTextNodes() {
    var content = document.querySelector( '.mw-parser-output' );
    if ( content ) {
      var walker = document.createTreeWalker( content, 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-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 );
      } );
    }

    // Tag .vector-toc-text spans for TOC transliteration
    document.querySelectorAll( '.vector-toc .vector-toc-text' ).forEach( function ( span ) {
      if ( span.hasAttribute( 'data-deva' ) ) return;
      var orig = span.textContent;
      if ( !orig.trim() ) return;
      span.setAttribute( 'data-deva', orig );
      translatableSpans.push( span );
    } );
  }

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

  // ── TOC: Remove "Beginning" link ────────────────────────────────
  // Vector 2022 always inserts a first TOC item linking to the page top
  // (labelled "Beginning" in English UI). On Sanskrit content pages this
  // is redundant — remove it so the TOC starts at the first real heading.
  function removeTocBeginning() {
    var toc = document.querySelector( '.vector-toc' );
    if ( !toc ) return;
    /* The "Beginning" entry lives in a <li> that either:
     *   (a) has class vector-toc-list-item AND contains an <a> whose href
     *       ends in the page title with no fragment (i.e. no "#" anchor), or
     *   (b) is the very first <li> inside .vector-toc-contents whose link
     *       has no hash fragment at all (it scrolls to the very top).
     * We target it by its unique id (#vector-toc-beginning) which Vector
     * 2022 reliably sets, with a fallback to the first fragment-free item.
     */
    var beginning = toc.querySelector( '#vector-toc-beginning' );
    if ( !beginning ) {
      /* Fallback: first <li> whose anchor has no "#" in href */
      var items = toc.querySelectorAll( '.vector-toc-list-item' );
      for ( var i = 0; i < items.length; i++ ) {
        var a = items[ i ].querySelector( 'a' );
        if ( a && a.href.indexOf( '#' ) === -1 ) {
          beginning = items[ i ];
          break;
        }
      }
    }
    if ( beginning && beginning.parentNode ) {
      beginning.parentNode.removeChild( beginning );
    }
  }

  // ── TOC: Inject Moola / Ullekha nav links ───────────────────────
  // Adds two navigation buttons above the TOC list:
  //   मूल  → the primary bhashya page this teeka belongs to
  //          (read from .gr-teeka-page[data-primary] when present,
  //           otherwise derived from the current page path)
  //   उल्लेख → the /Ullekha sub-page for this document,
  //          which lists all pramana references cited in it.
  //
  // The nav bar is injected once and is guarded against duplicate runs.
  function injectTocDocNav() {
    var toc = document.querySelector( '.vector-toc' );
    if ( !toc ) return;
    if ( document.getElementById( 'gr-toc-doc-nav' ) ) return;

    /* ── Determine slugs ─────────────────────────────────────────── */
    var artPath = ( window.mw && mw.config && mw.config.get( 'wgArticlePath' ) ) || '/wiki/$1';
    var pageTitle = ( window.mw && mw.config && mw.config.get( 'wgPageName' ) ) || '';

    /* For teeka/vyakhya pages the imported HTML contains:
     *   <div class="gr-teeka-page" data-primary="Brahmasutra" data-slug="Nyayasudha">
     * Use that when available. */
    var teekaPage   = document.querySelector( '.gr-teeka-page' );
    var primarySlug = teekaPage ? ( teekaPage.getAttribute( 'data-primary' ) || '' ) : '';
    var docSlug     = teekaPage ? ( teekaPage.getAttribute( 'data-slug' )    || '' ) : '';

    /* If not a teeka page, derive slugs from the page title.
     * Page titles look like "Brahmasutra" or "Brahmasutra/Part1". */
    if ( !primarySlug ) {
      /* Top-level doc pages: the slug IS the page (or its root) */
      primarySlug = pageTitle.split( '/' )[ 0 ];
      docSlug     = primarySlug;
    }

    if ( !primarySlug ) return;   /* nothing to link to */

    /* ── Build URLs ──────────────────────────────────────────────── */
    function wikiUrl( slug ) {
      if ( window.mw && mw.util && mw.util.getUrl ) {
        return mw.util.getUrl( slug );
      }
      return artPath.replace( '$1', encodeURIComponent( slug ).replace( /%2F/g, '/' ) );
    }

    var moolaUrl   = wikiUrl( primarySlug );
    var ullekhaUrl = wikiUrl( ( teekaPage ? ( primarySlug + '/Vyakhya/' + docSlug ) : primarySlug ) + '/Ullekha' );

    /* ── Don't show Moola link if we ARE the moola page ─────────── */
    var isMoola = !teekaPage && ( pageTitle === primarySlug || pageTitle.indexOf( primarySlug + '/Part' ) === 0 );

    /* ── Build the nav bar ───────────────────────────────────────── */
    var nav = document.createElement( 'div' );
    nav.id = 'gr-toc-doc-nav';

    var navStyle = [
      'display:flex',
      'gap:6px',
      'padding:6px 8px 4px',
      'border-bottom:1px solid var(--border-color-base,#a2a9b1)',
      'margin-bottom:4px',
      'flex-wrap:wrap',
    ].join( ';' );
    nav.setAttribute( 'style', navStyle );

    var btnBase = [
      'display:inline-block',
      'padding:2px 8px',
      'border-radius:3px',
      'font-size:0.82em',
      'font-weight:500',
      'text-decoration:none',
      'border:1px solid currentColor',
      'line-height:1.6',
      'white-space:nowrap',
    ].join( ';' );

    function makeBtn( href, label, colorVar, bgVar ) {
      var a = document.createElement( 'a' );
      a.href = href;
      a.textContent = label;
      a.setAttribute( 'style',
        btnBase + ';'
        + 'color:' + colorVar + ';'
        + 'background:' + bgVar + ';'
      );
      a.setAttribute( 'data-deva-skip', '1' );   /* don't transliterate these */
      a.addEventListener( 'mouseover', function () {
        this.style.opacity = '0.78';
      } );
      a.addEventListener( 'mouseout', function () {
        this.style.opacity = '1';
      } );
      return a;
    }

    if ( !isMoola ) {
      nav.appendChild( makeBtn( moolaUrl,   'मूल',    '#b04b00', '#fff3e0' ) );
    }
    nav.appendChild(   makeBtn( ullekhaUrl, 'उल्लेख', '#1a6496', '#e8f4fc' ) );

    /* Insert the nav bar at the very top of the TOC, before the heading */
    var tocInner = toc.querySelector( '.vector-toc-contents' ) || toc.firstElementChild || toc;
    toc.insertBefore( nav, tocInner );
  }

  // ── TOC active-item highlight ────────────────────────────────────
  // FIX (v6): Instead of relying on CSS :active selectors (which fail because
  // Common.js wraps text nodes in <span data-deva>, making > a or > .link
  // selectors not match the coloured text), we use a MutationObserver to
  // watch each <li> for class changes and imperatively apply/remove the
  // orange colour via inline style on the .vector-toc-link inside it.
  // This is immune to DOM depth and span nesting.
  function watchTocActive() {
    var toc = document.querySelector( '.vector-toc' );
    if ( !toc ) return;
    if ( !window.MutationObserver ) return;
    /* Guard only the structObserver — attach it once per toc element.
       Per-<li> attachment is already guarded by _grHighlightAttached,
       so calling watchTocActive() multiple times is safe and picks up
       any <li> items that weren't in the DOM on the first call. */
    if ( toc._grObserved ) {
      /* Re-scan for any <li> items that arrived after first call */
      toc.querySelectorAll( '.vector-toc-list-item' ).forEach( attachHighlight );
      return;
    }
    toc._grObserved = true;

    var ACTIVE_COLOR  = '#f57c00';
    var ACTIVE_WEIGHT = '700';

    function setLinkActive( li, active ) {
      var link = li.querySelector( '.vector-toc-link' ) || li.querySelector( 'a' );
      if ( !link ) return;
      if ( active ) {
        link.style.setProperty( 'color',       ACTIVE_COLOR,  'important' );
        link.style.setProperty( 'font-weight', ACTIVE_WEIGHT, 'important' );
        link.querySelectorAll( '*' ).forEach( function ( el ) {
          el.style.setProperty( 'color', ACTIVE_COLOR, 'important' );
        } );
      } else {
        link.style.removeProperty( 'color' );
        link.style.removeProperty( 'font-weight' );
        link.querySelectorAll( '*' ).forEach( function ( el ) {
          el.style.removeProperty( 'color' );
        } );
      }
    }

    function attachHighlight( li ) {
      if ( li._grHighlightAttached ) return;
      li._grHighlightAttached = true;
      liObserver.observe( li, { attributes: true, attributeFilter: [ 'class' ] } );
      if ( li.classList.contains( 'vector-toc-list-item-active' ) ) {
        setLinkActive( li, true );
      }
    }

    var liObserver = new MutationObserver( function ( mutations ) {
      mutations.forEach( function ( m ) {
        if ( m.attributeName !== 'class' ) return;
        var li = m.target;
        var isActive = li.classList.contains( 'vector-toc-list-item-active' );
        setLinkActive( li, isActive );

        if ( isActive ) {
          /* ── Auto-expand parent section in TOC ────────────────────────
           * Vector collapses child sections under a parent li. When a child
           * becomes active we must expand its parent by removing the
           * vector-toc-list-item-collapsed class. */
          var ancestor = li.parentNode;
          while ( ancestor && ancestor !== document.body ) {
            if ( ancestor.classList &&
                 ancestor.classList.contains( 'vector-toc-list-item' ) &&
                 ancestor.classList.contains( 'vector-toc-list-item-collapsed' ) ) {
              ancestor.classList.remove( 'vector-toc-list-item-collapsed' );
            }
            ancestor = ancestor.parentNode;
          }

          /* ── Scroll active item into view within the TOC ──────────────
           * Use getBoundingClientRect so measurement is always in viewport
           * coords — avoids offsetTop-relative-to-offsetParent mismatch. */
          var container = document.querySelector( '.vector-sticky-pinned-container' );
          if ( container ) {
            var tocVisible = container.offsetHeight > 0 &&
                             container.offsetParent !== null &&
                             window.getComputedStyle( container ).display !== 'none' &&
                             window.getComputedStyle( container ).visibility !== 'hidden';
            if ( tocVisible ) {
              var liRect = li.getBoundingClientRect();
              var cRect  = container.getBoundingClientRect();
              if ( liRect.top < cRect.top + 4 || liRect.bottom > cRect.bottom - 4 ) {
                var scrollHost = null;
                var node = li.parentNode;
                while ( node && node !== document.body ) {
                  var overflow = window.getComputedStyle( node ).overflowY;
                  if ( ( overflow === 'auto' || overflow === 'scroll' ) &&
                       node.scrollHeight > node.clientHeight ) {
                    scrollHost = node;
                    break;
                  }
                  node = node.parentNode;
                }
                if ( !scrollHost && container.scrollHeight > container.clientHeight ) {
                  scrollHost = container;
                }
                if ( scrollHost ) {
                  var hostRect = scrollHost.getBoundingClientRect();
                  var currentScroll = scrollHost.scrollTop;
                  var liTop = liRect.top - hostRect.top + currentScroll;
                  var target = liTop - ( scrollHost.clientHeight / 2 ) + ( li.offsetHeight / 2 );
                  scrollHost.scrollTop = Math.max( 0, target );
                }
              }
            }
          }
        }
      } );
    } );

    var structObserver = new MutationObserver( function ( mutations ) {
      mutations.forEach( function ( m ) {
        if ( m.type !== 'childList' ) return;
        m.addedNodes.forEach( function ( n ) {
          if ( n.nodeType !== 1 ) return;
          if ( n.classList && n.classList.contains( 'vector-toc-list-item' ) ) {
            attachHighlight( n );
          }
          if ( n.querySelectorAll ) {
            n.querySelectorAll( '.vector-toc-list-item' ).forEach( attachHighlight );
          }

          var newSpans = [];
          if ( n.classList && n.classList.contains( 'vector-toc-text' ) ) newSpans.push( n );
          if ( n.querySelectorAll ) {
            n.querySelectorAll( '.vector-toc-text' ).forEach( function ( s ) { newSpans.push( s ); } );
          }
          newSpans.forEach( function ( span ) {
            if ( span.hasAttribute( 'data-deva' ) ) return;
            var orig = span.textContent;
            if ( !orig.trim() ) return;
            span.setAttribute( 'data-deva', orig );
            if ( currentScript !== 'deva' ) {
              span.textContent = transliterateText( orig, currentScript );
            }
            translatableSpans.push( span );
          } );
        } );
      } );
    } );

    toc.querySelectorAll( '.vector-toc-list-item' ).forEach( attachHighlight );
    structObserver.observe( toc, { childList: true, subtree: true } );

    setTimeout( function () {
      var active = toc.querySelector( '.vector-toc-list-item-active' );
      if ( active ) {
        setLinkActive( active, true );
      }
    }, 300 );
  }

  // ── Init ────────────────────────────────────────────────────────
  function init() {
    var HIDE_IDS = [
      'vector-appearance',
      'vector-appearance-pinned-container',
      'vector-appearance-unpinned-container'
    ];
    function removeHiddenEls() {
      HIDE_IDS.forEach( function ( id ) {
        var el = document.getElementById( id );
        if ( el && el.parentNode ) el.parentNode.removeChild( el );
      } );
      var pageTools = document.getElementById( 'vector-page-tools' ) ||
                      document.querySelector( '.vector-page-tools-pinned-container' );
      if ( pageTools ) {
        pageTools.querySelectorAll( '[aria-controls="vector-appearance"]' )
          .forEach( function ( el ) {
            if ( el.parentNode ) el.parentNode.removeChild( el );
          } );
      }
    }
    removeHiddenEls();

    /* ── Teeka view-mode detection ──────────────────────────────── */
    ( function detectTeekaMode() {
      var teekaPage = document.querySelector( '.gr-teeka-page' );
      if ( !teekaPage ) return;

      var primary = teekaPage.getAttribute( 'data-primary' ) || '';
      var artPath = ( window.mw && mw.config.get( 'wgArticlePath' ) ) || '/wiki/$1';
      var mainUrl = artPath.replace( '$1', primary );

      var qs = window.location.search;
      var refParam = qs.match( /[?&]ref=([01])/ );
      if ( refParam ) {
        document.body.classList.add( refParam[1] === '1' ? 'gr-ref-mode' : 'gr-standalone' );
        return;
      }

      var ref = document.referrer || '';
      var fromMain = ref && primary && ref.indexOf( mainUrl ) !== -1;
      document.body.classList.add( fromMain ? 'gr-ref-mode' : 'gr-standalone' );
    }() );

    if ( window.MutationObserver ) {
      var hideObserver = new MutationObserver( function ( mutations ) {
        var needsClean = false;
        mutations.forEach( function ( m ) {
          if ( m.addedNodes.length ) needsClean = true;
        } );
        if ( needsClean ) removeHiddenEls();
      } );
      hideObserver.observe( document.body, { childList: true, subtree: false } );
      setTimeout( function () { hideObserver.disconnect(); }, 6000 );
    }

    var content       = document.querySelector( '.mw-parser-output' );
    var alreadyTagged = content && content.querySelector( '[data-deva]' );
    if ( !alreadyTagged ) {
      translatableSpans = [];
      tagTextNodes();
    } else {
      document.querySelectorAll( '.vector-toc .vector-toc-text:not([data-deva])' ).forEach( function ( span ) {
        var orig = span.textContent;
        if ( !orig.trim() ) return;
        span.setAttribute( 'data-deva', orig );
        translatableSpans.push( span );
      } );
    }

    var saved = ( function () {
      try { return localStorage.getItem( LS_SCRIPT_KEY ); } catch ( e ) { return null; }
    }() );
    if ( saved && saved !== 'deva' ) {
      applyScript( saved );
    } else {
      currentScript = 'deva';
    }

    /* TOC setup — remove Beginning link, inject doc-nav, start active watcher.
     * Retry at 300ms and 800ms because Vector 2022 renders the TOC after
     * DOMContentLoaded via its own JS. */
    removeTocBeginning();
    injectTocDocNav();
    watchTocActive();
    setTimeout( function () {
      removeTocBeginning();
      injectTocDocNav();
      watchTocActive();
    }, 300 );
    setTimeout( function () {
      removeTocBeginning();
      injectTocDocNav();
      watchTocActive();
    }, 800 );
  }

  // ── React to toolbar dropdown changes ──────────────────────────
  window.addEventListener( 'gr-script-change', function ( e ) {
    var script = e && e.detail && e.detail.script;
    if ( script ) applyScript( script );
  } );

  // ── MediaWiki hook (SPA-style navigation) ───────────────────────
  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();
        } else {
          document.querySelectorAll( '.vector-toc .vector-toc-text:not([data-deva])' ).forEach( function ( span ) {
            var orig = span.textContent;
            if ( !orig.trim() ) return;
            span.setAttribute( 'data-deva', orig );
            translatableSpans.push( span );
          } );
        }
        if ( currentScript !== 'deva' ) applyScript( currentScript );
        removeTocBeginning();
        injectTocDocNav();
        watchTocActive();
      }, 150 );
    } );
  }

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

}() );   /* ← end of main transliteration / TOC IIFE */


// ── Inject "About" link into the header navigation ─────────────────
// This is its own IIFE — completely separate from the main IIFE above.
// (v6 bug: it was incorrectly nested inside the main IIFE without a
//  closing }() ); which broke the module boundary and killed the
//  by-Author toggle on the main page.)
( function () {
  function injectAboutLink() {
    if ( document.getElementById( 'gr-about-link' ) ) return;

    var headerEnd = document.querySelector( '.vector-header-end' ) ||
                    document.querySelector( '#vector-user-links' ) ||
                    document.querySelector( '.mw-header' );
    if ( !headerEnd ) return;

    var aboutLink = document.createElement( 'a' );
    aboutLink.id        = 'gr-about-link';
    aboutLink.href      = ( window.mw
      ? mw.util.getUrl( 'Grantha:About' )
      : '/wiki/Grantha:About' );
    aboutLink.textContent = 'About';
    aboutLink.style.cssText = [
      'color: rgba(255,255,255,0.88)',
      'font-size: 0.88em',
      'font-family: system-ui, sans-serif',
      'font-weight: 500',
      'text-decoration: none',
      'padding: 4px 10px',
      'border-radius: 4px',
      'margin-right: 6px',
      'transition: color 0.15s, background 0.15s',
      'white-space: nowrap',
    ].join( ';' );
    aboutLink.addEventListener( 'mouseover', function () {
      this.style.color = '#fff';
      this.style.background = 'rgba(255,255,255,0.12)';
    } );
    aboutLink.addEventListener( 'mouseout', function () {
      this.style.color = 'rgba(255,255,255,0.88)';
      this.style.background = 'transparent';
    } );

    var userLinks = document.querySelector( '.vector-user-links' ) ||
                    document.querySelector( '#pt-userpage' );
    if ( userLinks && userLinks.parentNode === headerEnd ) {
      headerEnd.insertBefore( aboutLink, userLinks );
    } else {
      headerEnd.appendChild( aboutLink );
    }
  }

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


// ── Main page: by-Grantha / by-Author toggle ──────────────────────
( 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;

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

    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();
  }
}() );