MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 950: / Line 950: @@
      highlightOnArrival();
      wireUllekhaLinks();
+  }
+}() );
+/* ── Mobile TOC overlay — add to bottom of Common.js ─────────── */
+( function () {
+  if ( window.innerWidth > 768 ) return;
+  function initMobileToc() {
+    if ( document.getElementById( 'gr-mob-toc-btn' ) ) return;
+    var toc = document.querySelector( '.vector-toc' );
+    if ( !toc ) return;
+    /* Backdrop */
+    var backdrop = document.createElement( 'div' );
+    backdrop.className = 'gr-mobile-toc-backdrop';
+    backdrop.id = 'gr-mob-toc-backdrop';
+    document.body.appendChild( backdrop );
+    /* Panel */
+    var panel = document.createElement( 'div' );
+    panel.className = 'gr-mobile-toc-panel';
+    panel.id = 'gr-mob-toc-panel';
+    /* Panel header */
+    var header = document.createElement( 'div' );
+    header.className = 'gr-mobile-toc-header';
+    var titleEl = document.createElement( 'div' );
+    titleEl.className = 'gr-mobile-toc-title';
+    titleEl.textContent = 'विषयसूची';
+    var closeBtn = document.createElement( 'button' );
+    closeBtn.className = 'gr-mobile-toc-close';
+    closeBtn.innerHTML = '✕';
+    header.appendChild( titleEl );
+    header.appendChild( closeBtn );
+    panel.appendChild( header );
+    /* Clone TOC contents */
+    var tocContents = toc.querySelector( '.vector-toc-contents' );
+    if ( tocContents ) {
+      var clone = tocContents.cloneNode( true );
+      panel.appendChild( clone );
+    }
+    document.body.appendChild( panel );
+    /* Toggle button */
+    var btn = document.createElement( 'button' );
+    btn.className = 'gr-mobile-toc-btn';
+    btn.id = 'gr-mob-toc-btn';
+    btn.innerHTML = '☰ Contents';
+    document.body.appendChild( btn );
+    function openToc() {
+      panel.classList.add( 'open' );
+      backdrop.classList.add( 'open' );
+    }
+    function closeToc() {
+      panel.classList.remove( 'open' );
+      backdrop.classList.remove( 'open' );
+    }
+    btn.addEventListener( 'click', openToc );
+    closeBtn.addEventListener( 'click', closeToc );
+    backdrop.addEventListener( 'click', closeToc );
+    /* Close on link click */
+    panel.querySelectorAll( 'a' ).forEach( function ( a ) {
+      a.addEventListener( 'click', closeToc );
+    } );
+  }
+  if ( document.readyState === 'loading' ) {
+    document.addEventListener( 'DOMContentLoaded', function () {
+      setTimeout( initMobileToc, 400 );
+    } );
+  } else {
+    setTimeout( initMobileToc, 400 );
    }
 }() );