fixes + added list open/close indicator

docs/assets/js/docs.js

@@ -48,7 +48,7 @@ class Docs {
             this.handleLocation(window.location);
         } else if (typeof this.defaultViewPath !== 'undefined') {
             // TODO: Do it.
-            console.log("Missing Feature !\nShould load the default view");
+            console.log('Missing Feature !\nShould load the default view');
         }
     }
 
@@ -59,7 +59,7 @@ class Docs {
         const response = await fetch(this.routesPath);
         const json = await response.json();
 
-        return json["routes"];
+        return json['routes'];
     }
 
     /**
@@ -69,21 +69,21 @@ class Docs {
     generateNav(routesData, target) {
         /** @type {Array.<RoutingItem>} */
         const routes = [];
-        const nav = document.createElement("nav");
+        const nav = document.createElement('nav');
 
         routesData.forEach(routeData => {
-            if ("routes" in routeData) {
+            if ('routes' in routeData) {
-                routes.push(new RoutingNode(routeData["name"], routeData["hidden"], routeData["routes"]));
+                routes.push(new RoutingNode(routeData['name'], routeData['hidden'], routeData['routes']));
             } else {
-                routes.push(new Route(routeData["name"], routeData["hidden"], routeData["filepath"]));
+                routes.push(new Route(routeData['name'], routeData['hidden'], routeData['filepath']));
             }
         });
 
         routes.forEach(routingItem => {
-            if (routingItem["hidden"] === false || typeof routingItem["hidden"] === "undefined") {
+            if (routingItem['hidden'] === false || typeof routingItem['hidden'] === 'undefined') {
                 const el = routingItem.buildSelf();
 
-                if (typeof el !== "undefined") {
+                if (typeof el !== 'undefined') {
                     nav.appendChild(el);
                 }
             } else {
@@ -106,11 +106,11 @@ class Docs {
 
         console.log(hashes);
 
-        if (typeof this.currentRoute === "undefined" || this.currentRoute.filepath !== hashes[0]) {
+        if (typeof this.currentRoute === 'undefined' || this.currentRoute.filepath !== hashes[0]) {
             const route = this.findMatchingRoute(hashes[0], this.routes);
 
             // Scroll back to top.
-            document.querySelector("#router-outlet").scrollTop = 0;
+            document.querySelector('#router-outlet').scrollTop = 0;
 
             this.currentRoute = route;
             this.displayRoute(route);
@@ -144,7 +144,7 @@ class Docs {
      * @returns {Route} The matching route.
      */
     findMatchingRoute(filepath, routes) {
-        console.log("filepath:", filepath);
+        console.log('filepath:', filepath);
 
         let match = undefined;
 
@@ -203,7 +203,7 @@ class RoutingItem {
     }
 
     buildSelf() {
-        const element = document.createElement("div");
+        const element = document.createElement('div');
         element.innerText = this.name;
         return element;
     }
@@ -227,12 +227,12 @@ class Route extends RoutingItem {
      * @returns {HTMLAnchorElement} The Route as an HTML link.
      */
     buildSelf(force = false) {
-        if (this.hidden === false || typeof this.hidden === "undefined") {
+        if (this.hidden === false || typeof this.hidden === 'undefined') {
             force = true
         }
 
         if (force) {
-            const element = document.createElement("a");
+            const element = document.createElement('a');
 
             element.href = `#${this.filepath}`;
             element.innerText = this.name;
@@ -286,10 +286,10 @@ class RoutingNode extends RoutingItem {
 
     onExec() {
         this.routesData.forEach(routeData => {
-            if ("routes" in routeData) {
+            if ('routes' in routeData) {
-                this.routes.push(new RoutingNode(routeData["name"], routeData["hidden"], routeData["routes"]));
+                this.routes.push(new RoutingNode(routeData['name'], routeData['hidden'], routeData['routes']));
             } else {
-                this.routes.push(new Route(routeData["name"], routeData["hidden"], routeData["filepath"]));
+                this.routes.push(new Route(routeData['name'], routeData['hidden'], routeData['filepath']));
             }
         });
     }
@@ -298,31 +298,16 @@ class RoutingNode extends RoutingItem {
      * @returns {HTMLUListElement} The RoutingNode as an HTML unordered list.
      */
     buildSelf(force = false) {
-        if (this.hidden === false || typeof this.hidden === "undefined") {
+        if (this.hidden === false || typeof this.hidden === 'undefined') {
             force = true
         }
 
         if (force) {
             const element = document.createElement('section');
-            element.classList.add("node", "hide");
+            element.classList.add('node', 'hide');
 
-
+            const heading = this.buildSelf_Heading(this.name, toggleDisplay);
-            const heading = document.createElement('div');
+            const list = this.buildSelf_List(this.routes);
-            heading.innerText = this.name;
-            heading.addEventListener('click', toggleDisplay);
-
-            const list = document.createElement('ul');
-            // list.classList.add("hide");
-            this.routes.forEach(entry => {
-                const childEl = document.createElement('li');
-                const el = entry.buildSelf();
-
-                if (typeof el !== "undefined") {
-                    childEl.appendChild(el);
-                }
-
-                list.appendChild(childEl);
-            });
 
             element.appendChild(heading);
             element.appendChild(list);
@@ -332,6 +317,45 @@ class RoutingNode extends RoutingItem {
             return;
         }
     }
+
+    buildSelf_Heading(text, onClickCallback) {
+        const wrapper = document.createElement('div');
+        const headingText = document.createElement('span');
+        const headingIcon = document.createElement('img');
+
+        headingText.innerText = text;
+
+        headingIcon.src = './assets/img/icons/baseline_expand_more_white_24dp.png';
+
+        wrapper.appendChild(headingText);
+        wrapper.appendChild(headingIcon);
+
+        if (typeof onClickCallback === "function") {
+            wrapper.addEventListener('click', onClickCallback);
+        }
+
+        return wrapper;
+    }
+
+    /**
+     * @param {Array.<(Route,RoutingNode)>} entries
+     */
+    buildSelf_List(entries) {
+        const list = document.createElement('ul');
+
+        entries.forEach(entry => {
+            const listItem = document.createElement('li');
+            const itemContent = entry.buildSelf();
+
+            if (typeof itemContent !== 'undefined') {
+                listItem.appendChild(itemContent);
+
+                list.appendChild(listItem);
+            }
+        });
+
+        return list;
+    }
 }
 
 // TODO: find them a new home