Docs: Refactor link generation to allow more natural mouse interaction. (#23071)

* Modiefier keys work with link in documentation

* file: should als work

* remove test code

docs/index.html

@@ -474,16 +474,32 @@
 			// First separate the member (if existing) from the page name,
 			// then identify the subpage's URL and set it as URL fragment (re-adding the member)
 
+			const pageURL = getPageURL( pageName );
+
+			if ( pageURL ) {
+
+				window.location.hash = pageURL;
+
+				createNewIframe();
+
+			}
+
+		}
+
+		function getPageURL( pageName ) {
+
 			const splitPageName = decomposePageName( pageName, '.', '.' );
 
 			const currentProperties = pageProperties[ splitPageName[ 0 ] ];
 
 			if ( currentProperties ) {
 
-				window.location.hash = currentProperties.pageURL + splitPageName[ 1 ];
-
-				createNewIframe();
+				return currentProperties.pageURL + splitPageName[ 1 ];
+		
+			} else {
 
+				return null;
+		
 			}
 
 		}

docs/page.js

@@ -61,13 +61,13 @@ function onDocumentLoad() {
 	text = text.replace( /\[name\]/gi, name );
 	text = text.replace( /\[path\]/gi, path );
 	text = text.replace( /\[page:([\w\.]+)\]/gi, '[page:$1 $1]' ); // [page:name] to [page:name title]
-	text = text.replace( /\[page:\.([\w\.]+) ([\w\.\s]+)\]/gi, '[page:' + name + '.$1 $2]' ); // [page:.member title] to [page:name.member title]
-	text = text.replace( /\[page:([\w\.]+) ([\w\.\s]+)\]/gi, '<a onclick="window.parent.setUrlFragment(\'$1\')" title="$1">$2</a>' ); // [page:name title]
+	text = text.replace( /\[page:\.([\w\.]+) ([\w\.\s]+)\]/gi, `[page:${name}.$1 $2]` ); // [page:.member title] to [page:name.member title]
+	text = text.replace( /\[page:([\w\.]+) ([\w\.\s]+)\]/gi, '<a class=\'links\' data-fragment=\'$1\' title=\'$1\'>$2</a>' ); // [page:name title]
 	// text = text.replace( /\[member:.([\w]+) ([\w\.\s]+)\]/gi, "<a onclick=\"window.parent.setUrlFragment('" + name + ".$1')\" title=\"$1\">$2</a>" );
 
 	text = text.replace( /\[(member|property|method|param):([\w]+)\]/gi, '[$1:$2 $2]' ); // [member:name] to [member:name title]
-	text = text.replace( /\[(?:member|property|method):([\w]+) ([\w\.\s]+)\]\s*(\(.*\))?/gi, '<a onclick="window.parent.setUrlFragment(\'' + name + '.$2\')" target="_parent" title="' + name + '.$2" class="permalink">#</a> .<a onclick="window.parent.setUrlFragment(\'' + name + '.$2\')" id="$2">$2</a> $3 : <a class="param" onclick="window.parent.setUrlFragment(\'$1\')">$1</a>' );
-	text = text.replace( /\[param:([\w\.]+) ([\w\.\s]+)\]/gi, '$2 : <a class="param" onclick="window.parent.setUrlFragment(\'$1\')">$1</a>' ); // [param:name title]
+	text = text.replace( /\[(?:member|property|method):([\w]+) ([\w\.\s]+)\]\s*(\(.*\))?/gi, `<a class='permalink links' data-fragment='${name}.$2' target='_parent' title='${name}.$2'>#</a> .<a class='links' data-fragment='${name}.$2' id='$2'>$2</a> $3 : <a class='param links' data-fragment='$1'>$1</a>` );
+	text = text.replace( /\[param:([\w\.]+) ([\w\.\s]+)\]/gi, '$2 : <a class=\'param links\' data-fragment=\'$1\'>$1</a>' ); // [param:name title]
 
 	text = text.replace( /\[link:([\w\:\/\.\-\_\(\)\?\#\=\!\~]+)\]/gi, '<a href="$1" target="_blank">$1</a>' ); // [link:url]
 	text = text.replace( /\[link:([\w:/.\-_()?#=!~]+) ([\w\p{L}:/.\-_'\s]+)\]/giu, '<a href="$1" target="_blank">$2</a>' ); // [link:url title]
@@ -77,10 +77,38 @@ function onDocumentLoad() {
 	text = text.replace( /\[example:([\w\_]+)\]/gi, '[example:$1 $1]' ); // [example:name] to [example:name title]
 	text = text.replace( /\[example:([\w\_]+) ([\w\:\/\.\-\_ \s]+)\]/gi, '<a href="../examples/#$1" target="_blank">$2</a>' ); // [example:name title]
 
-	text = text.replace( /<a class="param" onclick="window.parent.setUrlFragment\('\w+'\)">(null|this|Boolean|Object|Array|Number|String|Integer|Float|TypedArray|ArrayBuffer)<\/a>/gi, '<span class="param">$1</span>' ); // remove links to primitive types
+	text = text.replace( /<a class=\'param links\' data-fragment=\'\w+\'>(undefined|null|this|Boolean|Object|Array|Number|String|Integer|Float|TypedArray|ArrayBuffer)<\/a>/gi, '<span class="param">$1</span>' ); // remove links to primitive types
 
 	document.body.innerHTML = text;
 
+	if ( window.parent.getPageURL ) {
+
+		const links = document.querySelectorAll( '.links' );
+		for ( let i = 0; i < links.length; i ++ ) {
+
+			const pageURL = window.parent.getPageURL( links[ i ].dataset.fragment );
+			if ( pageURL ) {
+
+				links[ i ].href = './index.html#' + pageURL;
+
+			}
+
+		}
+
+	}
+
+	document.body.addEventListener( 'click', event => {
+
+		const element = event.target;
+		if ( element.classList.contains( 'links' ) && event.button === 0 && ! event.shiftKey && ! event.ctrlKey && ! event.metaKey && ! event.altKey ) {
+
+			window.parent.setUrlFragment( element.dataset.fragment );
+			event.preventDefault();
+
+		}
+
+	} );
+
 	// handle code snippets formatting
 
 	const elements = document.getElementsByTagName( 'code' );