User:Chlod/Scripts/GoToTitle.js

// GoToTitle // Author: Chlod // Version: 1.0.1-REL

// Navigate to any page using an input box that opens when you click on the page title. // Non-intrusive to work with other title-modifying userscripts.

(function {   var overlayId = "goto_titleOverlay";    function getTitleInput(parentContainer) {    	var titleInput = document.createElement("input");    	titleInput.style.padding = "0";        titleInput.style.width = "100%";        titleInput.style.height = "100%";        titleInput.style.border = "0";        titleInput.style.fontSize = "inherit";        titleInput.style.fontFamily = "inherit";        titleInput.addEventListener("keydown", function(kdEvent) { if (Array.isArray(window.GoToTitleHooks)) window.GoToTitleHooks.forEach(f => f(kdEvent)); if (kdEvent.key === "Escape") parentContainer.parentElement.removeChild(parentContainer); else if (kdEvent.key === "Enter") window.location.href = mw.config.get("wgArticlePath") .replace('$1', mw.util.wikiUrlencode(titleInput.value)); });       // Because there's no inbuilt value for plain title with namespace.        var namespace = mw.config.get("wgFormattedNamespaces")[mw.config.get("wgNamespaceNumber")];        titleInput.value = (namespace.length > 0 ? namespace + ":" : "") + mw.config.get("wgTitle");       return titleInput;    }    document.body.addEventListener("click", function(event) { var currentParent = event.target; // Traverse click event and check if it hits the title heading. do { if (currentParent == null) // Whoops, we went too far! return; if (currentParent.id === overlayId) return; if (           	// Standard heading            	currentParent.id === "firstHeading"            	// No overlay existing            	&& document.getElementById(overlayId) === null        	) { var relativeContainer = document.createElement("div"); var absoluteContainer = document.createElement("div"); var titleHeight = currentParent.getBoundingClientRect.height; relativeContainer.id = overlayId; relativeContainer.style.position = "relative"; relativeContainer.style.top = "-" + (+(titleHeight + 1)) + "px"; relativeContainer.style.width = "100%"; absoluteContainer.style.position = "absolute"; absoluteContainer.style.width = "100%"; absoluteContainer.style.height = titleHeight + "px"; absoluteContainer.style.top = absoluteContainer.style.left = "0"; relativeContainer.style.fontSize = absoluteContainer.style.fontSize = "inherit"; relativeContainer.style.fontFamily = absoluteContainer.style.fontFamily = "inherit"; var titleInput = getTitleInput(relativeContainer); absoluteContainer.appendChild(titleInput); relativeContainer.appendChild(absoluteContainer); currentParent.appendChild(relativeContainer); titleInput.focus; return; } else if (           	// Vector 2022 floating header            	currentParent.classList.contains("vector-sticky-header-context-bar-primary")            	// No overlay existing            	&& document.getElementById(overlayId) === null        	) { var titleHeight = currentParent.getBoundingClientRect.height; currentParent.style.position = "relative"; var absoluteContainer = document.createElement("div"); absoluteContainer.id = overlayId; absoluteContainer.style.position = "absolute"; absoluteContainer.style.width = "100%"; absoluteContainer.style.height = titleHeight + "px"; absoluteContainer.style.top = absoluteContainer.style.left = "0"; absoluteContainer.style.minHeight = "1.2em"; var titleInput = getTitleInput(absoluteContainer); absoluteContainer.appendChild(titleInput); currentParent.appendChild(absoluteContainer); titleInput.focus; return; }       } while ((currentParent = currentParent.parentElement) !== document.body); // Did not hit event heading. Close if not found. var overlayElement = document.getElementById(overlayId); if (overlayElement != null) { overlayElement.parentElement.removeChild(overlayElement); }   }); });