MediaWiki:Common.js: Difference between revisions

Line 892:

new MutationObserver( function () { if ( document.body.style.paddingTop && document.body.style.paddingTop !== '0px' ) document.body.style.paddingTop = ''; } ).observe( document.body, { attributes:true, attributeFilter:['style'] } );

}

function injectMenuLinks() {

if ( document.getElementById( 'gr-mob-menu-items' ) ) return;

var navDrawer = document.querySelector( '.navigation-drawer' );

Line 899:

var itemStyle = 'display:flex;align-items:center;gap:14px;padding:15px 20px;font-size:16px;color:#2c1810;text-decoration:none;font-family:system-ui,sans-serif;border-bottom:1px solid #f0ebe6;background:#fff;';

function makeItem( href, label ) { var a = document.createElement( 'a' ); a.href = href; a.style.cssText = itemStyle; a.innerHTML = '' + label + ''; return a; }

function wikiUrl( title ) { return ( window.mw && mw.util && mw.util.getUrl ) ? mw.util.getUrl( title ) : '/' + title; }

wrap.appendChild( makeItem( '/Main_Page', 'Home' ) );

wrap.appendChild( makeItem( '/My_wiki:Help', 'Help' ) );

Line 904:

Line 905:

var userName = window.mw ? mw.config.get( 'wgUserName' ) : null;

if ( userName ) {

~~wrap~~.~~appendChild~~( ~~makeItem~~( ( ~~window~~.~~mw && mw~~.~~util~~ &~~& mw~~.~~util~~.~~getUrl~~ ) ~~? mw~~.~~util~~.~~getUrl~~( '~~Special:Profile~~' ) : '/Special:Profile', 'Profile' ) );

// Username button that toggles a dropdown with Profile + Log out

var userWrap = document.createElement( 'div' );

userWrap.id = 'gr-mob-user'; userWrap.style.cssText = 'width:100%;';

var trigger = document.createElement( 'button' );

trigger.type = 'button';

trigger.id = 'gr-mob-user-trigger';

trigger.setAttribute( 'aria-expanded', 'false' );

trigger.style.cssText = itemStyle + 'width:100%;justify-content:space-between;border:none;cursor:pointer;text-align:left;';

trigger.innerHTML =

'' + userName.replace( /</g, '<' ) + '' +

'\u25be';

var menu = document.createElement( 'div' );

menu.id = 'gr-mob-user-menu';

menu.style.cssText = 'display:none;background:#faf6f3;';

var subItemStyle = itemStyle + 'padding-left:40px;background:#faf6f3;';

function makeSubItem( href, label, isLogout ) {

var a = document.createElement( 'a' );

a.href = href; a.style.cssText = subItemStyle;

a.innerHTML = '' + label + '';

if ( isLogout ) a.id = 'gr-mob-logout-link';

return a;

}

menu.appendChild( makeSubItem( wikiUrl( 'Special:Profile' ), 'Profile', false ) );

var la = document.querySelector( 'a[href*="action=logout"]' );

~~wrap~~.appendChild( ~~makeItem~~( la ? la.href : '/index.php?title=Special:UserLogout', 'Log out' ) );

menu.appendChild( makeSubItem( la ? la.href : '/index.php?title=Special:UserLogout', 'Log out', true ) );

trigger.addEventListener( 'click', function () {

var open = menu.style.display === 'none';

menu.style.display = open ? 'block' : 'none';

trigger.setAttribute( 'aria-expanded', open ? 'true' : 'false' );

var caret = document.getElementById( 'gr-mob-user-caret' );

if ( caret ) caret.style.transform = open ? 'rotate(180deg)' : '';

} );

userWrap.appendChild( trigger );

userWrap.appendChild( menu );

wrap.appendChild( userWrap );

}

else wrap.appendChild( makeItem( '/index.php?title=Special:UserLogin', 'Log in' ) );

@@ Line 892: / Line 892: @@
      new MutationObserver( function () { if ( document.body.style.paddingTop && document.body.style.paddingTop !== '0px' ) document.body.style.paddingTop = ''; } ).observe( document.body, { attributes:true, attributeFilter:['style'] } );
    }
-  function injectMenuLinks() {
+ function injectMenuLinks() {
      if ( document.getElementById( 'gr-mob-menu-items' ) ) return;
      var navDrawer = document.querySelector( '.navigation-drawer' );
@@ Line 899: / Line 899: @@
      var itemStyle = 'display:flex;align-items:center;gap:14px;padding:15px 20px;font-size:16px;color:#2c1810;text-decoration:none;font-family:system-ui,sans-serif;border-bottom:1px solid #f0ebe6;background:#fff;';
      function makeItem( href, label ) { var a = document.createElement( 'a' ); a.href = href; a.style.cssText = itemStyle; a.innerHTML = '<span>' + label + '</span>'; return a; }
+    function wikiUrl( title ) { return ( window.mw && mw.util && mw.util.getUrl ) ? mw.util.getUrl( title ) : '/' + title; }
      wrap.appendChild( makeItem( '/Main_Page', 'Home' ) );
      wrap.appendChild( makeItem( '/My_wiki:Help', 'Help' ) );
@@ Line 904: / Line 905: @@
      var userName = window.mw ? mw.config.get( 'wgUserName' ) : null;
      if ( userName ) {
-       wrap.appendChild( makeItem( ( window.mw && mw.util && mw.util.getUrl ) ? mw.util.getUrl( 'Special:Profile' ) : '/Special:Profile', 'Profile' ) );
+       // Username button that toggles a dropdown with Profile + Log out
+      var userWrap = document.createElement( 'div' );
+      userWrap.id = 'gr-mob-user'; userWrap.style.cssText = 'width:100%;';
+      var trigger = document.createElement( 'button' );
+      trigger.type = 'button';
+      trigger.id = 'gr-mob-user-trigger';
+      trigger.setAttribute( 'aria-expanded', 'false' );
+      trigger.style.cssText = itemStyle + 'width:100%;justify-content:space-between;border:none;cursor:pointer;text-align:left;';
+      trigger.innerHTML =
+        '<span>' + userName.replace( /</g, '&lt;' ) + '</span>' +
+        '<span id="gr-mob-user-caret" style="transition:transform 0.2s;">\u25be</span>';
+      var menu = document.createElement( 'div' );
+      menu.id = 'gr-mob-user-menu';
+      menu.style.cssText = 'display:none;background:#faf6f3;';
+      var subItemStyle = itemStyle + 'padding-left:40px;background:#faf6f3;';
+      function makeSubItem( href, label, isLogout ) {
+        var a = document.createElement( 'a' );
+        a.href = href; a.style.cssText = subItemStyle;
+        a.innerHTML = '<span>' + label + '</span>';
+        if ( isLogout ) a.id = 'gr-mob-logout-link';
+        return a;
+      }
+      menu.appendChild( makeSubItem( wikiUrl( 'Special:Profile' ), 'Profile', false ) );
        var la = document.querySelector( 'a[href*="action=logout"]' );
-       wrap.appendChild( makeItem( la ? la.href : '/index.php?title=Special:UserLogout', 'Log out' ) );
+       menu.appendChild( makeSubItem( la ? la.href : '/index.php?title=Special:UserLogout', 'Log out', true ) );
+      trigger.addEventListener( 'click', function () {
+        var open = menu.style.display === 'none';
+        menu.style.display = open ? 'block' : 'none';
+        trigger.setAttribute( 'aria-expanded', open ? 'true' : 'false' );
+        var caret = document.getElementById( 'gr-mob-user-caret' );
+        if ( caret ) caret.style.transform = open ? 'rotate(180deg)' : '';
+      } );
+      userWrap.appendChild( trigger );
+      userWrap.appendChild( menu );
+      wrap.appendChild( userWrap );
      }
      else wrap.appendChild( makeItem( '/index.php?title=Special:UserLogin', 'Log in' ) );