Jump to content

User:Fred Gandt/navigationUI.js

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
if ( mw.config.get( "skin" ) === "vector" ) {
	$( document ).ready( () => {
		"use strict";
		const eById = id => document.getElementById( id ),
					cE = e => document.createElement( e ),
					
					NAMESPACE = mw.config.get( "wgFormattedNamespaces" )[ mw.config.get( "wgNamespaceNumber" ) ],
					URL_ENCODED_USERNAME = mw.util.wikiUrlencode( mw.config.get( "wgUserName" ) ),
					URL_ENCODED_PAGE_TITLE = mw.util.wikiUrlencode( mw.config.get( "wgTitle" ) ),
					USER_OPT_PREVIEW_ON_FIRST = mw.user.options.values.previewonfirst,
					VIEWS_UL = eById( "p-views" ).querySelector( "ul" ),
					MW_CONTENT_TEXT = eById( "mw-content-text" ),
					STYLE_SHEET = new CSSStyleSheet(),
					EDIT_LINK = eById( "ca-edit" ),
					CONTENT = eById( "content" ),
					MW_HEAD = eById( "mw-head" ),
					FOOTER = eById( "footer" ),
					TOP = eById( "top" ),
					
					menuLink = ( href, txt ) => {
						const A = cE( "a" );
						A.href = href;
						A.textContent = txt;
						return A;
					},
					
					userPageLinks = sbpg => {
						sbpg = sbpg || "";
						const UPL = cE( "div" );
						UPL.append( menuLink( `/w/index.php?title=User:${URL_ENCODED_USERNAME}${sbpg}&action=edit`, "edit" ) );
						UPL.append( menuLink( `/w/index.php?title=User:${URL_ENCODED_USERNAME}${sbpg}&action=history`, "history" ) );
						UPL.append( menuLink( `/wiki/User_talk:${URL_ENCODED_USERNAME}${sbpg}`, "talk" ) );
						const UPTL = cE( "div" );
						UPTL.append( menuLink( `/w/index.php?title=User_talk:${URL_ENCODED_USERNAME}${sbpg}&action=edit`, "edit" ) );
						UPTL.append( menuLink( `/w/index.php?title=User_talk:${URL_ENCODED_USERNAME}${sbpg}&action=history`, "history" ) );
						UPL.append( UPTL );
						return UPL;
					},
					
					newHeaderLinkTab = ( actn, txt, ttl ) => {
						const LI =  cE( "li" ),
									SPAN = cE( "span" ),
									A = menuLink( `/w/index.php?title=${NAMESPACE}:${URL_ENCODED_PAGE_TITLE}&action=${actn}`, "" );
						SPAN.textContent = txt;
						A.title = ttl || "";
						A.append( SPAN );
						LI.append( A );
						EDIT_LINK.before( LI );
					},
					
					newHeaderButtonTab = ( txt, fnc ) => {
						const LI =  cE( "li" );
						LI.textContent = txt;
						LI.classList.add( "fg-navigation-ui-head-button-tab" );
						if ( fnc ) {
							LI.addEventListener( "click", fnc, { passive: true } );
						}
						VIEWS_UL.prepend( LI );
						return LI;
					};
					
		let add_section_preview_links;
			
		document.adoptedStyleSheets = [ ...document.adoptedStyleSheets, STYLE_SHEET ];
		STYLE_SHEET.replaceSync( `#mw-head-base { height: 2.55em }
#content { border-top: 0 }
#left-navigation { margin: 0 0 0 11em }
#right-navigation { margin: 0 }
#p-logo { display: none }
#mw-head {
	border-bottom: 1px solid #a7d7f9;
	background-color: white;
	position: fixed;
	right: unset;
	left: unset;
	width: 100%;
	z-index: 2;
}
#p-views, #p-cactions, #p-personal, #p-search { display: inline-block }
#p-search {
	margin-left: 1em;
	float: none;
}
#p-personal {
	position: relative;
	right: 0;
	top: 0;
}
#p-personal ul { padding: 0 }
#mw-panel {
	background-color: #f6f6f6;
	overflow: hidden auto;
	position: fixed;
	height: 100vh;
	left: unset;
	width: 11em;
	padding: 0;
	z-index: 3;
}
#footer {
	background-color: #f6f6f6;
	padding: 1em 1em 3em;
}
.fg-links-dropdown {
	box-shadow: 0 .5em 1em -0.2em #00000080;
	overscroll-behavior: contain;
	border-radius: 0 0 3px 3px;
	border: 1px solid #a7d7f9;
	background-color: white;
	position: absolute;
	padding: .5em 1em;
	max-height: 70vh;
	overflow: auto;
	border-top: 0;
	display: none;
	z-index: 1;
}
#pt-userpage { font-size: .8em }
#pt-userpage:hover > .fg-links-dropdown, #fg-toc:hover > .fg-links-dropdown { display: block }
.fg-links-dropdown a {
	padding: 0px 0px 0em !important;
	background: none !important;
	text-transform: capitalize;
	display: block !important;
	height: unset !important;
	float: none !important;
}
.fg-links-dropdown div {
	border-left: 1px solid #b3b3b3;
	padding: 0 0 0 1em;
}
#pt-logout {
	font-size: unset;
	float: none;
	margin: 0;
}
.vector-menu-tabs-legacy li { background-image: linear-gradient(to top,#77c1f6 0,#e8f2f8 0,#ffffff 100%) }
.ui-resizable { width: unset !important }
.fg-navigation-ui-head-button-tab {
	padding: 1.1em .3em .55em !important;
	font-size: 0.9em;
	cursor: pointer;
	color: #66c0ff;
}
.mw-editsection a + a { margin-left: 1em }` );
		
		MW_HEAD.querySelectorAll( "#pt-mytalk, #pt-sandbox, #pt-preferences, #pt-watchlist, #pt-mycontris, #pt-betafeatures, #pt-adminlinks" ).forEach( e => e.remove() );
		MW_HEAD.querySelectorAll( ".collapsible" ).forEach( e => e.classList.remove( "collapsible" ) );
		eById( "p-search" ).before( eById( "p-personal" ) );
		
		if ( mw.config.get( "wgIsProbablyEditable" ) && EDIT_LINK ) {
			newHeaderLinkTab( "purge", "Purge", "Purge the current page" );
			if ( !USER_OPT_PREVIEW_ON_FIRST ) {
				newHeaderLinkTab( "edit&preview=yes", "Preview", "Edit this page with a preview" );
				add_section_preview_links = true;
			}
		}
		
		const TOCABLE = [];
		MW_CONTENT_TEXT.querySelectorAll( "div.mw-heading" ).forEach( section => {
			if ( add_section_preview_links ) {
				const A = section.querySelector( ".mw-editsection a" ),
							AC = A?.cloneNode( true );
				if ( AC ) {
					AC.href += "&preview=yes";
					AC.textContent = "preview";
					A.after( AC );
				}
			}
			const H = section.querySelector( "h2, h3, h4, h5, h6" );
			if ( H ) {
				const ML = menuLink( `#${H.id}`, H.textContent );
				ML.style.marginLeft = `${/([2-6])$/.exec( H.tagName )[ 1 ] - 2}em`;
				TOCABLE.push( ML );
			}
		} );
		if ( TOCABLE.length ) {
			const TOC_TAB = newHeaderButtonTab( "ToC" ),
						TOC_DROPDOWN = cE( "div" );
			TOC_DROPDOWN.classList.add( "fg-links-dropdown" );
			TOC_DROPDOWN.append( ...TOCABLE );
			TOC_TAB.id = "fg-toc";
			TOC_TAB.append( TOC_DROPDOWN );
			VIEWS_UL.prepend( TOC_TAB );
		}
		
		newHeaderButtonTab( "▼", () => FOOTER.scrollIntoView() );
		newHeaderButtonTab( "▲", () => TOP.scrollIntoView() );
		
		const USER_LINKS_DROPDOWN = cE( "div" );
		USER_LINKS_DROPDOWN.classList.add( "fg-links-dropdown" );
		USER_LINKS_DROPDOWN.append( userPageLinks() );
		USER_LINKS_DROPDOWN.append( menuLink( `/wiki/User:${URL_ENCODED_USERNAME}/sandbox`, "sandbox" ) );
		USER_LINKS_DROPDOWN.append( userPageLinks( "/sandbox" ) );
		USER_LINKS_DROPDOWN.append( menuLink( `/wiki/User:${URL_ENCODED_USERNAME}/common.js`, "user JS" ) );
		USER_LINKS_DROPDOWN.append( userPageLinks( "/common.js" ) );
		USER_LINKS_DROPDOWN.append( menuLink( `/wiki/User:${URL_ENCODED_USERNAME}/common.css`, "user CSS" ) );
		USER_LINKS_DROPDOWN.append( userPageLinks( "/common.css" ) );
		
		USER_LINKS_DROPDOWN.append( menuLink( `/wiki/Special:PrefixIndex/User:${URL_ENCODED_USERNAME}`, "user pages" ) );
		USER_LINKS_DROPDOWN.append( menuLink( `/wiki/Special:PrefixIndex/User talk:${URL_ENCODED_USERNAME}`, "user talk pages" ) );
		
		USER_LINKS_DROPDOWN.append( menuLink( `/wiki/Special:Contributions/${URL_ENCODED_USERNAME}`, "contributions" ) );
		USER_LINKS_DROPDOWN.append( menuLink( "/wiki/Special:SpecialPages", "special" ) );
		
		const WATCHLIST_LINKS = cE( "div" );
		USER_LINKS_DROPDOWN.append( menuLink( "/wiki/Special:Watchlist", "watchlist" ) );
		WATCHLIST_LINKS.append( menuLink( "/wiki/Special:EditWatchlist", "edit" ) );
		WATCHLIST_LINKS.append( menuLink( "/wiki/Special:EditWatchlist/raw", "raw" ) );
		USER_LINKS_DROPDOWN.append( WATCHLIST_LINKS );
		
		const PREF_LINKS = cE( "div" );
		USER_LINKS_DROPDOWN.append( menuLink( "/wiki/Special:Preferences", "preferences" ) );
		PREF_LINKS.append( menuLink( "/wiki/Special:Preferences#mw-prefsection-rendering", "appearance" ) );
		PREF_LINKS.append( menuLink( "/wiki/Special:Preferences#mw-prefsection-editing", "editing" ) );
		PREF_LINKS.append( menuLink( "/wiki/Special:Preferences#mw-prefsection-rc", "recent changes" ) );
		PREF_LINKS.append( menuLink( "/wiki/Special:Preferences#mw-prefsection-watchlist", "watchlist" ) );
		PREF_LINKS.append( menuLink( "/wiki/Special:Preferences#mw-prefsection-gadgets", "gadgets" ) );
		PREF_LINKS.append( menuLink( "/wiki/Special:Preferences#mw-prefsection-searchoptions", "search" ) );
		PREF_LINKS.append( menuLink( "/wiki/Special:Preferences#mw-prefsection-betafeatures", "beta" ) );
		PREF_LINKS.append( menuLink( "/wiki/Special:Preferences#mw-prefsection-echo", "notifications" ) );
		USER_LINKS_DROPDOWN.append( PREF_LINKS );
		
		const GLOBAL_PREF_LINKS = cE( "div" );
		USER_LINKS_DROPDOWN.append( menuLink( "/wiki/Special:GlobalPreferences", "global preferences" ) );
		GLOBAL_PREF_LINKS.append( menuLink( "/wiki/Special:GlobalPreferences#mw-prefsection-rendering", "appearance" ) );
		GLOBAL_PREF_LINKS.append( menuLink( "/wiki/Special:GlobalPreferences#mw-prefsection-editing", "editing" ) );
		GLOBAL_PREF_LINKS.append( menuLink( "/wiki/Special:GlobalPreferences#mw-prefsection-rc", "recent changes" ) );
		GLOBAL_PREF_LINKS.append( menuLink( "/wiki/Special:GlobalPreferences#mw-prefsection-watchlist", "watchlist" ) );
		GLOBAL_PREF_LINKS.append( menuLink( "/wiki/Special:GlobalPreferences#mw-prefsection-gadgets", "gadgets" ) );
		GLOBAL_PREF_LINKS.append( menuLink( "/wiki/Special:GlobalPreferences#mw-prefsection-searchoptions", "search" ) );
		GLOBAL_PREF_LINKS.append( menuLink( "/wiki/Special:GlobalPreferences#mw-prefsection-centralnotice-banners", "banners" ) );
		GLOBAL_PREF_LINKS.append( menuLink( "/wiki/Special:GlobalPreferences#mw-prefsection-betafeatures", "beta" ) );
		GLOBAL_PREF_LINKS.append( menuLink( "/wiki/Special:GlobalPreferences#mw-prefsection-echo", "notifications" ) );
		USER_LINKS_DROPDOWN.append( GLOBAL_PREF_LINKS );
		
		if ( ~mw.config.get( "wgUserGroups" ).indexOf( "sysop" ) ) {
			USER_LINKS_DROPDOWN.append( menuLink( "/wiki/Special:AdminLinks", "admin links" ) );
		}
		
		USER_LINKS_DROPDOWN.append( eById( "pt-logout" ) );
		
		eById( "pt-userpage" ).append( USER_LINKS_DROPDOWN );
			
		eById( "wpSummary" )?.addEventListener( "keypress", evt => {
			if ( evt.key === "Enter" ) {
				evt.preventDefault();
			}
		} );
	} );
}