FIX #17 mark currently viewed document in navigation, show/hide first…

… level of navigation list, NEXT button opens hidden navigation list

src/elements/markdown-top-nav.js

@@ -45,6 +45,20 @@ export class MarkdownTopNav {
         this.navtitle = (currentlinkindex > 0) && (currentlinkindex < window.markdownnav.links.length)
           ? window.markdownnav.links[currentlinkindex].title
           : '';
+        //erase activenavitem class
+        let activenavitems = window.document.getElementsByClassName('activenavitem');
+        for (let item of activenavitems) { item.classList.remove('activenavitem'); }
+        //make current link as class activenavitem
+        let currentnavitem = window.document.getElementById(currentlink);
+        if (currentnavitem) {
+          //set class - so it will have different color
+          currentnavitem.firstChild.classList.add('activenavitem');
+          //show parent ul if hidden
+          if (currentnavitem.parentNode.className === 'w3-hide') {
+            //do open/hide as defined in markdownnav
+            if (window.bodylightnavopenhide) window.bodylightnavopenhide(currentnavitem.parentNode.previousSibling);
+          }
+        }
       }
     }
 

src/elements/markdownnav.css

@@ -125,3 +125,6 @@ nav.vertical li li > a:after { content: '' }
 nav.vertical li li li > a:before { content: '\00a0\00a0\00a0\00a0\00a0\00a0\25a1\00a0' }
 nav.vertical li li li > a:after { content: '' }
 
+.activenavitem {
+  background-color: #ffe69b;
+}

src/elements/markdownnav.js

@@ -6,12 +6,13 @@ import {I18N} from 'aurelia-i18n';
 import {HttpClient} from 'aurelia-fetch-client';
 import {EventAggregator} from 'aurelia-event-aggregator';
 
-//global function
+//global function to operate on translated markdown in navigation panel
+//adds + or - and shows hides list under it
 window.bodylightnavopenhide = function(obj) {
   //set show/hide to
   //console.log('openhide()', obj);
   if (obj.nextSibling.className === 'w3-hide') {
-    obj.nextSibling.className = 'w3-show';
+    obj.nextSibling.className = 'w3-animate-opacity';
     obj.firstChild.className = 'fa fa-minus';
   } else {
     obj.nextSibling.className = 'w3-hide';
@@ -49,7 +50,7 @@ export class Markdownnav {
     this.mdtoc = Markdownit({html: true})
       .use(mk, {'throwOnError': true, 'errorColor': ' #cc0000'})
       .use(iterator, 'url', 'link_open', function(tokens, idx) {
-        //detect link and token in MD
+        //detect links in list and create array of links used by other components
         let aIndex = tokens[idx].attrIndex('href');
         if (aIndex < 0) {
           //tokens[idx].attrPush(['target', '_blank']);
@@ -64,7 +65,16 @@ export class Markdownnav {
       });
     this.navclass = (this.navstyle && this.navstyle.length > 0) ? this.navstyle : 'horizontal';
     //adds rule to add a class to li item
-    this.mdtoc.renderer.rules.list_item_open = function(tokens, idx, options, env, slf) { return '<li class="navitem">'; };
+    this.mdtoc.renderer.rules.list_item_open = function(tokens, idx, options, env, slf) {
+      console.log('markdownnav list item open tokens[idx], options:', tokens, idx);
+      //use link as id
+      let link = null;
+      try {
+        link = tokens[idx + 2].children[0].attrs[0][1];
+      } catch (e) { }
+      if (link) return '<li class="navitem" id="' + link + '">';
+      return '<li class="navitem">';
+    };
     this.mdtoc.renderer.rules.bullet_list_open = function(tokens, idx, options, env, slf) {
       if (window.markdownnavdepth) window.markdownnavdepth++; else window.markdownnavdepth = 1;
       if (window.markdownnavdepth && window.markdownnavdepth === 2) return '<span class="w3-small" onclick="bodylightnavopenhide(this)" ><i class="fa fa-plus"></i></span><ul class="w3-hide">';