Doc: Use ":target" CSS pseudo-class to highlight target element.

No longer need to manage the highlight manually with JS code.
Support for ":target" was finally added in IE 9.

Did have to replace "a name" with "id" for it to work on IE 11.
(In Chromium and Firefox, ":target" does work with "a name".)

ISHelp/ISHelpGen/ISHelpGen.dpr

@@ -15,7 +15,7 @@ uses
   PathFunc in '..\..\Components\PathFunc.pas';
 
 const
-  Version = '1.20';
+  Version = '1.21';
 
   XMLFileVersion = '1';
 
@@ -283,7 +283,7 @@ begin
       [AnchorName, CurrentTopicName]);
   DefinedTopics.Add(S);
 
-  Result := Format('<a name="%s">%s</a>', [EscapeHTML(AnchorName), InnerContents]);
+  Result := Format('<span id="%s">%s</span>', [EscapeHTML(AnchorName), InnerContents]);
 end;
 
 function GenerateTopicLinkHTML(const TopicName, AnchorName, InnerContents: String): String;

ISHelp/Staging-dark/styles.css

@@ -4,7 +4,7 @@
   Portions by Martijn Laan
   For conditions of distribution and use, see LICENSE.TXT.
 
-	Style sheet used by topic_*.htm
+  Style sheet used by topic_*.htm
 */
 
 HTML {
@@ -59,7 +59,7 @@ A[href]:hover {
 	color: hsl(206, 100%, 43%);
 	text-decoration: underline;
 }
-A.highlighted {
+span:target {
 	background-color: #ffff00;
 	color: black;
 }

ISHelp/Staging/contents.js

@@ -214,27 +214,7 @@ function init_index_tab_elements()
 		}
 	}
 
-	var indexBody = document.getElementById("tabbody-index");
-	indexBody.onclick = index_tab_element_clicked;
-	indexBody.innerHTML = html;
-}
-
-function index_tab_element_clicked(evt)
-{
-	// If an index link is clicked and only the hash changes on bodyframe
-	// (i.e. still same page), bodyframe doesn't receive any notification.
-	// So we must manually tell it to update the highlight.
-
-	var element = evt ? evt.target : event.srcElement;
-	if (element.tagName.toLowerCase() == "a") {
-		var href = element.getAttribute("href");
-		if (href != null && href != "" && element.getAttribute("target") == "bodyframe") {
-			var bodyFrame = window.parent.frames["bodyframe"];
-			if (bodyFrame) {
-				bodyFrame.set_href_and_highlight_anchor(href);
-			}
-		}
-	}
+	document.getElementById("tabbody-index").innerHTML = html;
 }
 
 window.addEventListener("message", (event) => {

ISHelp/Staging/styles.css

@@ -72,7 +72,7 @@ A[href]:hover {
 	color: var(--link-hover-fg-color);
 	text-decoration: underline;
 }
-A.highlighted {
+span:target {
 	background-color: #ffff00;
 	color: black;
 }

ISHelp/Staging/topic.js

@@ -11,32 +11,6 @@ window.onload = topic_loaded;
 
 var redirectBox = null;
 var topicRedirectURL;
-var curHighlightedAnchor = null;
-var lastHash = "";
-
-function is_href_local_anchor(path)
-{
-	// Returns true if an A element's HREF points to an anchor on the current page.
-
-	if (path.charAt(0) == "#") {
-		return true;
-	}
-
-	// On IE (6), # HREFs are prepended with a full path when read via DOM.
-	// Check if 'path' includes a hash, and if the part before the hash
-	// matches the current window.location.
-
-	var re = /^([^#]+)(#.*)?$/;
-	var pathMatches = path.match(re);
-	if (pathMatches && pathMatches[2] !== undefined && pathMatches[2] != "") {
-		var curLocationMatches = window.location.href.match(re);
-		if (curLocationMatches && curLocationMatches[1] == pathMatches[1]) {
-			return true;
-		}
-	}
-
-	return false;
-}
 
 function get_viewport_element()
 {
@@ -68,9 +42,6 @@ function create_redirect_box()
 
 function topic_loaded()
 {
-	document.body.onclick = topic_element_clicked;
-	update_anchor_highlight();
-
 	var matches;
 
 	if (window == window.top &&
@@ -95,18 +66,6 @@ function topic_loaded()
 			window.parent.postMessage("ishelp_topic_loaded:" + matches[1], "*");
 		}
 	}
-
-	// HTML Help: If an Index entry is clicked and only the hash changes,
-	// we don't receive any notification by default.
-	if (window.location.protocol == "mk:") {
-		if ("onhashchange" in window) {
-			// IE 8+ supports the onhashchange event.
-			window.onhashchange = update_anchor_highlight;
-		} else {
-			// On older IE versions, we have to poll.
-			window.setInterval(update_anchor_highlight, 300);
-		}
-	}
 }
 
 function topic_redirect()
@@ -116,64 +75,3 @@ function topic_redirect()
 
 	window.location.href = topicRedirectURL;
 }
-
-function set_anchor_highlight(newAnchor)
-{
-	if (curHighlightedAnchor != newAnchor) {
-		if (curHighlightedAnchor) curHighlightedAnchor.className = "";
-		curHighlightedAnchor = newAnchor;
-		if (curHighlightedAnchor) curHighlightedAnchor.className = "highlighted";
-	}
-}
-
-function update_anchor_highlight()
-{
-	var anchorName = "";
-	var hash = window.location.hash;
-	if (hash === lastHash) {
-		// This function can be called from setInterval,
-		// so exit quickly if the hash hasn't changed.
-		return;
-	}
-	lastHash = hash;
-	if (hash.charAt(0) == "#") {
-		anchorName = hash.substr(1);
-	}
-
-	var newAnchor = null;
-	if (anchorName != "") {
-		var anchors = document.getElementsByTagName("a");
-		var i;
-		for (i = 0; i < anchors.length; i++) {
-			if (anchors[i].getAttribute("name") === anchorName) {
-				newAnchor = anchors[i];
-				break;
-			}
-		}
-	}
-	set_anchor_highlight(newAnchor);
-}
-
-function set_href_and_highlight_anchor(href)
-{
-	// At the moment an onclick event is fired, window.location.hash hasn't
-	// been updated yet. This function synchronously updates window.location,
-	// then moves the highlight to the new hash's anchor.
-
-	// Clear current highlight first, so user doesn't see it scrolling.
-	lastHash = "";
-	set_anchor_highlight(null);
-	window.location.href = href;
-	update_anchor_highlight();
-}
-
-function topic_element_clicked(evt)
-{
-	var element = evt ? evt.target : event.srcElement;
-	if (element.tagName.toLowerCase() == "a") {
-		var href = element.getAttribute("href");
-		if (href != null && is_href_local_anchor(href)) {
-			set_href_and_highlight_anchor(href);
-		}
-	}
-}