fix linkable rules and support nesting

3 files changed, 23 insertions, 8 deletions

diff --git a/html/Makefile b/html/Makefile
index 40581aea..7657fb06 100644
--- a/html/Makefile
+++ b/html/Makefile
@@ -132,7 +132,7 @@ $(1)/%.html: %.md $(MAKEFILE_LIST) $(HTML_TEMPLATE) $(GENERATE_HOVER_LINKS)
 endef
 
 define generateRulesHtml
-$(1)/%.html: %.md $(MAKEFILE_LIST) $(HTML_TEMPLATE) $(GENERATE_HOVER_LINKS)
+$(1)/%.html: %.md $(MAKEFILE_LIST) $(HTML_TEMPLATE) $(GENERATE_HOVER_LINKS) $(PREPARE_RULES)
 	@echo "building		$$@"
 	@if test \( ! \( -d $$(@D) \) \); then mkdir -p $$(@D);fi
 	$(VERBOSE) if [[ $$$$(cat $$< | wc -l) -gt 80 ]]; \
diff --git a/html/js/linkableRules.js b/html/js/linkableRules.js
index 82261a1e..b590aabe 100644
--- a/html/js/linkableRules.js
+++ b/html/js/linkableRules.js
@@ -21,24 +21,32 @@ through which recipients can access the Corresponding Source.
 @licend  The above is the entire license notice
 for the JavaScript code in this page.
 */
+var highlightedRule;
 function prepareLinkableRules() {
   for (let e of document.querySelectorAll(".rule")) {
     // Add class via js to ensure there is no wrong
     // sense of functionality in browsers without js
     e.classList.add("linkable-rule");
-    // TODO: support nested lists
-    e.onclick = function() {
+    e.onclick = function(event) {
       if (e.matches(':hover') || e.matches(':active')) {
+        // Set background with JS for more control
+        if (highlightedRule) {
+          highlightedRule.classList.remove("highlighted");
+        }
+        highlightedRule = e;
+        e.classList.add("highlighted");
         const origin = window.location.origin;
         const path = window.location.pathname;
         const anchor = e.id;
         let url = origin + '/' + path + '#' + anchor;
         navigator.clipboard.writeText(url);
-        // document.getElementsByTagName("body")[0].focus();
+        // Stop the event handling for potential parent rules
+        event.stopPropagation();
       }
     }
   }
 }
 window.onload = function() {
   prepareLinkableRules();
+  console.log("loaded");
 }
diff --git a/html/template.html b/html/template.html
index 8ae9a6d9..4c9bf623 100644
--- a/html/template.html
+++ b/html/template.html
@@ -23,6 +23,7 @@ $if(document-css)$
   --fg: #1a1a1a;
   --link-color: #1a1a1a;
   --pre-bg: #fdfdfd;
+  --highlight-bg: #fcf3cf;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -34,6 +35,7 @@ $if(document-css)$
     --fg: #ebdbb2; /* dark fg */
     --link-color: #d79921; /* yellow */
     --pre-bg: #1d2021; /* dark bg0_h */
+    --highlight-bg: #504945; /* dark bg2 */
   }
 }
 
@@ -130,10 +132,10 @@ $endif$
   padding: 1em;
   overflow: auto;
 }
-pre  > code {
+pre > code {
   white-space: pre;
 }
-pre  code {
+pre code {
   display: inline-block;
 }
 hr {
@@ -257,11 +259,16 @@ $if(toc)$
 }
 $endif$
 
-li.linkable-rule:active, li.linkable-rule:hover {
-  background-color: #d79921;
+li.linkable-rule.highlighted {
+  background-color: var(--highlight-bg);
   list-style-image: url(link.svg);
 }
 
+li.linkable-rule.highlighted ol {
+  background-color: $if(backgroundcolor)$$backgroundcolor$$else$var(--bg)$endif$;
+  list-style-image: none;
+}
+
 .draft-rate {
   padding-left: 1em;
 }