Доброго времени суток, пилил простенький проводничок файлов на фронте и зашел в тупик я не могу продумать гибкий алгоритм хождения папок
Смысл в том что есть два класса:
"element" - типа обычного файла;
"Folder" - папка, внутри класса массив с такими же element и Folder(тип файлы и папки);
и
объект "failing" - в нем есть массив который который хранит все! И метод "render" он отрисовывает все на экран.
Кстати класс "Folder" тоже содержит идентичный метод.
У меня получилось добиться того, что я на пример нажимаю на папку и у меня отрисовывает содержимое папки нажимаю многоточие (тип назад) у меня выводится первый уровень. Но мне нужно, что бы все папки внутри папок сколько бы я не создал открывались и при нажатии многоточия поднимался на уровень выше пока не вернется на главную самый верхний уровень.
Вот код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<script type="text/javascript">
let b = document.getElementsByTagName('body')[0];
class element {
constructor(name) {
this.name = name;
this.size = "Не реализовано!";
this.data = "Не реализовано!";
this.type = "file";
}
}
class Folder extends element {
constructor(name, size, data) {
super(name, size, data);
this.name = name;
this.size = size;
this.data = data;
this.mass = [beack];
this.type = "folder";
}
render() {
b.innerHTML = "";
for (let i = 0; i < this.mass.length; i++) {
let div = document.createElement('div');
b.appendChild(div);
if (this.mass[i].type === "folder") {
div.innerHTML = `<p class="folder" id ="${i}">${this.mass[i].name}</p>`;
}
else {
if (i === 0) {
div.innerHTML = `<p class="beack" id ="${i}"> ${this.mass[i].name}</p>`;
}
else {
div.innerHTML = `<p class="file" id ="${i}"> ${this.mass[i].name}</p>`;
}
}
}
}
}
let beack = {
name: "..."
}
let failing = {
mass: [],
render() {
b.innerHTML = "";
for (let i = 0; i < this.mass.length; i++) {
let div = document.createElement('div');
b.appendChild(div);
if (this.mass[i].type === "folder") {
div.innerHTML = `<p class="folder" id ="${i}">${this.mass[i].name}</p>`;
}
else {
div.innerHTML = `<p class="file" id ="${i}"> ${this.mass[i].name}</p>`;
}
}
}
}
let index = new element("index.html"),
style = new element("style.css"),
direct = new Folder("direct"),
direct1 = new Folder("direct1"),
file1 = new element("file.css"),
file2 = new element("file1.css");
direct1.mass.push(file1);
direct.mass.push(direct1);
failing.mass.push(index);
failing.mass.push(style);
failing.mass.push(direct);
failing.render()
console.log(failing);
document.addEventListener("click", function(e) {
//console.log(e.target);
if (e.target.className === "folder") {
failing.mass[+e.target.attributes.id.value].render();
}
if (e.target.className === "beack") {
failing.render();
}
})
За ранее спасибо за помощь. Этот форум меня не раз выручал и много чему научил похоже мне нужен еще один урок
