MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 822: / Line 822: @@
-// ── Inject "About" link into the header ────────────────────────────
+// ── Inject "Help" and "About" links into the header ─────────────────
 ( function () {
-   function injectAboutLink() {
+   function wikiHref( title ) {
+    if ( window.mw && mw.util && mw.util.getUrl ) return mw.util.getUrl( title );
+    var ap = ( window.mw && mw.config && mw.config.get( 'wgArticlePath' ) ) || '/wiki/$1';
+    return ap.replace( '$1', title );
+  }
+  var linkStyle = [
+    '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:4px', 'transition:color 0.15s,background 0.15s',
+    'white-space:nowrap',
+  ].join( ';' );
+  function makeHeaderLink( id, href, label ) {
+    var a = document.createElement( 'a' );
+    a.id = id; a.href = href; a.textContent = label;
+    a.style.cssText = linkStyle;
+    a.addEventListener( 'mouseover', function () {
+      this.style.color = '#fff'; this.style.background = 'rgba(255,255,255,0.12)';
+    } );
+    a.addEventListener( 'mouseout', function () {
+      this.style.color = 'rgba(255,255,255,0.88)'; this.style.background = 'transparent';
+    } );
+    return a;
+  }
+  function injectHeaderLinks() {
      if ( document.getElementById( 'gr-about-link' ) ) return;
@@ Line 832: / Line 859: @@
      if ( !headerEnd ) return;
-     var href;
+     var helpLink  = makeHeaderLink( 'gr-help-link',  wikiHref( 'My_wiki:Help'  ), 'Help'  );
-    if ( window.mw && mw.util && mw.util.getUrl ) {
+     var aboutLink = makeHeaderLink( 'gr-about-link', wikiHref( 'My_wiki:About' ), 'About' );
-      href = mw.util.getUrl( 'My_wiki:About' );
-    } else {
-      var ap = ( window.mw && mw.config && mw.config.get( 'wgArticlePath' ) ) || '/wiki/$1';
-      href = ap.replace( '$1', 'My_wiki:About' );
-    }
-     var a = document.createElement( 'a' );
-    a.id  = 'gr-about-link';
-    a.href = href;
-    a.textContent = 'About';
-    a.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( ';' );
-    a.addEventListener( 'mouseover', function () {
-      this.style.color = '#fff';
-      this.style.background = 'rgba(255,255,255,0.12)';
-    } );
-    a.addEventListener( 'mouseout', function () {
-      this.style.color = 'rgba(255,255,255,0.88)';
-      this.style.background = 'transparent';
-    } );
      var ul = document.querySelector( '.vector-user-links' ) ||
               document.querySelector( '#pt-userpage' );
-     if ( ul && ul.parentNode === headerEnd ) headerEnd.insertBefore( a, ul );
+     if ( ul && ul.parentNode === headerEnd ) {
-     else headerEnd.appendChild( a );
+      headerEnd.insertBefore( aboutLink, ul );
+      headerEnd.insertBefore( helpLink,  aboutLink );
+     } else {
+      headerEnd.appendChild( helpLink );
+      headerEnd.appendChild( aboutLink );
+    }
    }
-   if ( document.readyState === 'loading' ) document.addEventListener( 'DOMContentLoaded', injectAboutLink );
+   if ( document.readyState === 'loading' ) document.addEventListener( 'DOMContentLoaded', injectHeaderLinks );
-   else injectAboutLink();
+   else injectHeaderLinks();
 }() );