fixes + added list open/close indicator

This commit is contained in:
Atomos821 2020-11-26 09:23:36 +01:00
parent e825da135d
commit 1a34e9730a

View File

@ -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) {
routes.push(new RoutingNode(routeData["name"], routeData["hidden"], routeData["routes"]));
if ('routes' in routeData) {
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) {
this.routes.push(new RoutingNode(routeData["name"], routeData["hidden"], routeData["routes"]));
if ('routes' in routeData) {
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 = document.createElement('div');
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);
});
const heading = this.buildSelf_Heading(this.name, toggleDisplay);
const list = this.buildSelf_List(this.routes);
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