fixes + added list open/close indicator
This commit is contained in:
parent
e825da135d
commit
1a34e9730a
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user