IVY-450: highlight active page in tree

asciidoc/js/menu.js

@@ -0,0 +1,25 @@
+/*
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+function highlightActiveMenuItem() {
+    var pageId = document.body.dataset.pageId;
+    if (pageId) {
+        var id = CSS.escape('xooki-' + pageId);
+        document.querySelector('#' + id + ' a')?.classList.add('active-menu-item');
+    }
+}

asciidoc/style/style.css

@@ -316,6 +316,11 @@ table.tableblock .valign-middle {
     padding-left: 22px;
     margin-bottom: 3px;
 }
+.treeview a.active-menu-item {
+    background-color: #eef4e0;
+    border-left: 3px solid #7a9438;
+    padding-left: 4px;
+}
 .treeview li.submenu {
     background: white url(../images/closed.gif) no-repeat left 1px;
 }

asciidoc/templates/document.html.slim

@@ -25,12 +25,16 @@ html lang=(attr :lang, 'en' unless attr? :nolang)
     link rel="stylesheet" type="text/css" href="#{page.relativeRoot}style/style.css"
     script src="#{page.relativeRoot}js/jquery.pack.js" type="text/javascript"
     script src="#{page.relativeRoot}js/jquery.treeview.js" type="text/javascript"
+    script src="#{page.relativeRoot}js/menu.js" type="text/javascript"
     link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"
     script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" type="text/javascript"
     javascript:
-      $(document).ready(function(){$("#treemenu").Treeview({speed: "fast",store: true});});
+      $(document).ready(function() {
+        $("#treemenu").Treeview({speed: "fast",store: true});
+        highlightActiveMenuItem();
+      });
       hljs.initHighlightingOnLoad();
-  body
+  body data-page-id="#{page.id}"
     div id="body"
       table id="header" summary="Navigation elements." border="0" cellpadding="0" cellspacing="0" width="100%"
         tr