oleg901,
|
Сообщение от oleg901
|
|
папка, внутри класса массив с такими же element и Folder(тип файлы и папки);
|
Может тогда Folder и File? А кто подумает об BlockDevice, CharacterDevice, Socket, SymbolicLink? Можно вместо этих классов сделать Entry, который описывает вхождение в файловой системе.
|
Сообщение от oleg901
|
|
Но мне нужно, что бы все папки внутри папок сколько бы я не создал открывались и при нажатии многоточия поднимался на уровень выше пока не вернется на главную самый верхний уровень.
|
Вот поменял ваш код... (Упс! Кажется вы уже свой код не узнаете!)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="https://cdn.glitch.com/348d485e-4ba6-4841-a41e-5865874b2d66/files.css" />
</head>
<body>
<main id="app"></main>
<script>
/*
это только mockup, напишите в методе fetchDirectoryContent(path)
реальное получение данных папки
*/
const fs = {
"/": [{
mode: 16877,
path: "direct"
}, {
mode: 33204,
path: "index.html"
}, {
mode: 33204,
path: "style.css"
}, {
mode: 33204,
path: "pic.png"
}],
"/direct": [{
mode: 16877,
path: ".."
}, {
mode: 16877,
path: "direct1"
}],
"/direct/direct1": [{
mode: 16877,
path: ".."
}, {
mode: 33204,
path: "file.css"
}, {
mode: 33204,
path: "file1.css"
}],
};
</script>
<script type="module">
import { Component, render, html } from "https://unpkg.com/htm/preact/standalone.module.js";
class Entry {
constructor({ mode, path }) {
this.mode = mode;
this.path = path;
}
/* совместимо с node.js — [url]https://github.com/nodejs/node-v0.x-archive/issues/3045[/url] (т. е. stats.mode)*/
static DIR = 0x4000;
static FILE = 0x8000;
get isFile() {
return (this.mode & Entry.FILE) !== 0;
}
get isDirectory() {
return (this.mode & Entry.DIR) !== 0;
}
get type() {
return this.isFile ? "file" : this.isDirectory ? "directory" : "entry";
}
get extension() {
const dotIndex = this.path.lastIndexOf(".");
return dotIndex !== -1 ? this.path.slice(dotIndex + 1) : "";
}
}
class App extends Component {
state = {
index: "/",
entries: []
}
linkHandler = (entry, path) => event => {
event.preventDefault();
if(entry.isDirectory) {
this.fetchDirectoryContent(path);
}
}
componentDidMount() {
this.fetchDirectoryContent("/");
}
fetchDirectoryContent(path) {
const { pathname } = new URL(path, "file:///");
console.log(pathname);
this.setState({
index: pathname,
entries: fs[pathname.replace(/(?<=..)\/$/g, "")].map(entry => new Entry(entry))
});
}
render() {
const { index, entries } = this.state;
return html`
<header>
<h1>
<i>Index of </i> ${index}
</h1>
</header>
<ul id="files">
${
entries.map(entry => {
const fullEntryPath = [index.replace(/\/$/g, ""), entry.path].join("/");
return html`
<li>
<a
href="#index=${encodeURIComponent(fullEntryPath)}"
class="${entry.type} ${entry.extension}"
onClick=${this.linkHandler(entry, fullEntryPath)}
>${entry.path}</a>
</li>
`
})
}
</ul>
`;
}
}
render(html`<${App} />`, document.getElementById("app"));
</script>
</body>
</html>