Docs: Highlight selected links and move them into view. (#30460)

utils/docs/template/publish.js

@@ -362,7 +362,7 @@ function buildClassNav( items, itemsSeen, linktoFn ) {
 
 				}
 
-				itemNav += `<li>${linktoFn( item.longname, displayName.replace( /\b(module|event):/g, '' ) )}</li>`;
+				itemNav += `<li data-name="${item.longname}">${linktoFn( item.longname, displayName.replace( /\b(module|event):/g, '' ) )}</li>`;
 
 				itemsSeen[ item.longname ] = true;
 
@@ -429,7 +429,7 @@ function buildGlobalsNav( globals, seen ) {
 
 			if ( kind !== 'typedef' && ! hasOwnProp.call( seen, longname ) && Array.isArray( tags ) && tags[ 0 ].title === 'tsl' ) {
 
-				tslNav += `<li>${linkto( longname, name )}</li>`;
+				tslNav += `<li data-name="${longname}">${linkto( longname, name )}</li>`;
 
 				seen[ longname ] = true;
 
@@ -447,7 +447,7 @@ function buildGlobalsNav( globals, seen ) {
 
 			if ( kind !== 'typedef' && ! hasOwnProp.call( seen, longname ) ) {
 
-				globalNav += `<li>${linkto( longname, name )}</li>`;
+				globalNav += `<li data-name="${longname}">${linkto( longname, name )}</li>`;
 
 			}
 

utils/docs/template/static/scripts/page.js

@@ -0,0 +1,113 @@
+const panel = document.getElementById( 'panel' );
+const panelScrim = document.getElementById( 'panelScrim' );
+const expandButton = document.getElementById( 'expandButton' );
+const clearSearchButton = document.getElementById( 'clearSearchButton' );
+const filterInput = document.getElementById( 'filterInput' );
+
+// Functionality for hamburger button (on small devices)
+
+expandButton.onclick = function ( event ) {
+
+	event.preventDefault();
+	panel.classList.toggle( 'open' );
+
+};
+
+panelScrim.onclick = function ( event ) {
+
+	event.preventDefault();
+	panel.classList.toggle( 'open' );
+
+};
+
+// Functionality for search/filter input field
+
+filterInput.onfocus = function () {
+
+	panel.classList.add( 'searchFocused' );
+
+};
+
+filterInput.onblur = function () {
+
+	if ( filterInput.value === '' ) {
+
+		panel.classList.remove( 'searchFocused' );
+
+	}
+
+};
+
+filterInput.oninput = function () {
+
+	const term = filterInput.value.trim();
+
+	// eslint-disable-next-line no-undef
+	search( term ); // defined in search.js
+
+};
+
+clearSearchButton.onclick = function () {
+
+	filterInput.value = '';
+	filterInput.focus();
+	// eslint-disable-next-line no-undef
+	hideSearch(); // defined in search.js
+
+};
+
+//
+
+window.addEventListener( 'DOMContentLoaded', updateNavigation );
+window.addEventListener( 'hashchange', updateNavigation );
+
+function updateNavigation() {
+
+	// unselected elements
+
+	const selected = document.querySelectorAll( 'nav a.selected' );
+	selected.forEach( link => link.classList.remove( 'selected' ) );
+
+	// determine target
+
+	const filename = window.location.pathname.split( '/' ).pop();
+	const pagename = filename.split( '.' )[ 0 ];
+
+	let target = pagename;
+
+	if ( pagename === 'global' ) {
+
+		target = window.location.hash.split( '#' ).pop();
+
+	}
+
+	if ( target === '' ) return;
+
+	// select target and move into view
+
+	const liElement = document.querySelector( `li[data-name="${target}"]` );
+
+	if ( liElement !== null ) {
+
+		const aElement = liElement.firstChild;
+
+		aElement.scrollIntoView( { block: 'center' } );
+		aElement.classList.add( 'selected' );
+
+	}
+
+}
+
+// eslint-disable-next-line no-undef
+prettyPrint();
+
+console.log( [
+	'    __     __',
+	' __/ __\\  / __\\__   ____   _____   _____',
+	'/ __/  /\\/ /  /___\\/ ____\\/ _____\\/ _____\\',
+	'\\/_   __/ /   _   / /  __/ / __  / / __  /_   __   _____',
+	'/ /  / / /  / /  / /  / / /  ___/ /  ___/\\ _\\/ __\\/ _____\\',
+	'\\/__/  \\/__/\\/__/\\/__/  \\/_____/\\/_____/\\/__/ /  / /  ___/',
+	'                                         / __/  /  \\__  \\',
+	'                                         \\/____/\\/_____/'
+].join( '\n' ) );

utils/docs/template/tmpl/layout.tmpl

@@ -61,75 +61,8 @@
     </div>
 </div>
 
-<script> 
-
-const expandButton = document.getElementById( 'expandButton' );
-const clearSearchButton = document.getElementById( 'clearSearchButton' );
-const fliterInput = document.getElementById( 'filterInput' );
-
-// Functionality for hamburger button (on small devices)
-
-expandButton.onclick = function ( event ) {
-
-    event.preventDefault();
-    panel.classList.toggle( 'open' );
-
-};
-
-panelScrim.onclick = function ( event ) {
-
-    event.preventDefault();
-    panel.classList.toggle( 'open' );
-
-};
-
-// Functionality for search/filter input field
-
-fliterInput.onfocus = function () {
-
-    panel.classList.add( 'searchFocused' );
-
-};
-
-fliterInput.onblur = function () {
-
-    if ( fliterInput.value === '' ) {
-
-        panel.classList.remove( 'searchFocused' );
-
-    }
-
-};
-
-filterInput.oninput = function () {
-
-    const term = filterInput.value.trim();
-    search( term ); // defined in search.js
-
-};
-
-clearSearchButton.onclick = function () {
-
-    fliterInput.value = '';
-    fliterInput.focus();
-    hideSearch(); // defined in search.js
-
-};
-
-prettyPrint();
-
-console.log( [
-            '    __     __',
-            ' __/ __\\  / __\\__   ____   _____   _____',
-            '/ __/  /\\/ /  /___\\/ ____\\/ _____\\/ _____\\',
-            '\\/_   __/ /   _   / /  __/ / __  / / __  /_   __   _____',
-            '/ /  / / /  / /  / /  / / /  ___/ /  ___/\\ _\\/ __\\/ _____\\',
-            '\\/__/  \\/__/\\/__/\\/__/  \\/_____/\\/_____/\\/__/ /  / /  ___/',
-            '                                         / __/  /  \\__  \\',
-            '                                         \\/____/\\/_____/'
-].join( '\n' ) );
-</script>
 <script src="scripts/linenumber.js"></script>
+<script src="scripts/page.js"></script>
 <script src="scripts/search.js"></script>
 </body>
 </html>