Anri/mylloon.fr
1
0
Fork 0
Code Issues 21 Pull requests 2 Releases Packages 1 Activity Actions

filetree building
Some checks are pending
ci/woodpecker/push/publish Pipeline is pending
Details

Browse source
This commit is contained in:
Mylloon 2023-11-01 12:59:40 +01:00
parent 9bf1bc807c
commit bbd86393eb
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
3 changed files with 88 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
static/css/cours.css
View file

@ -0,0 +1,39 @@
/* Filetree */
aside {
float: left;
margin-left: 20px;
}
aside ul {
list-style: none;
padding-left: 0.6em;
}
aside li {
position: relative;
}
/* Element */
aside li:before {
content: "";
position: absolute;
top: -0.2em;
left: -1em;
height: 1em;
}
aside li.collapsed > ul {
display: none;
}
aside li.directory::before {
content: "+";
}
aside li:not(.collapsed).directory::before {
content: "-";
}
aside li.directory {
cursor: pointer;
}

44
static/js/cours.js
View file

@ -1,4 +1,44 @@
/**
* Build the filetree
* @param {HTMLElement} parent Root element of the filetree
* @param {{name: string, is_dir: boolean, children: any[]}} data FileNode
*/
const buildFileTree = (parent, data) => {
const ul = document.createElement("ul");
data.forEach((item) => {
const li = document.createElement("li");
li.textContent = item.name;
li.classList.add(item.is_dir ? "directory" : "file");
if (item.is_dir) {
li.classList.add("collapsed");
li.addEventListener("click", function (e) {
if (e.target === li) {
li.classList.toggle("collapsed");
}
});
}
ul.appendChild(li);
if (item.children && item.children.length > 0) {
buildFileTree(li, item.children);
}
});
parent.appendChild(ul);
};
window.addEventListener("load", () => { window.addEventListener("load", () => {
/* Ici on va récuperer le JSON envoyer par le serveur et le transformer const fileTreeElement = document.getElementsByTagName("aside")[0];
* en un jolie filetree */ const dataElement = fileTreeElement.getElementsByTagName("div")[0];
buildFileTree(
fileTreeElement,
JSON.parse(dataElement.getAttribute("data-json")).children
);
console.log(JSON.parse(dataElement.getAttribute("data-json")));
dataElement.remove();
}); });

10
templates/cours.html
View file

@ -6,18 +6,18 @@
</head> </head>
<body> <body>
<header>{{>navbar.html}}</header> <header>{{>navbar.html}}</header>
<main>
{{#data}}
<aside> <aside>
<div id="data" data-json="{{filetree}} "></div> <div data-json="{{#data}}{{filetree}}{{/data}} "></div>
</aside> </aside>
<main>
{{^content}} {{#data}} {{^content}}
<p>Fichier introuvable</p> <p>Fichier introuvable</p>
{{/content}} {{#content}} {{/content}} {{#content}}
<article>{{&content}}</article> <article>{{&content}}</article>
{{/content}} {{/data}} {{/content}} {{/data}}
</main> </main>
<script src="/js/cours.js"></script>
</body> </body>
</html> </html>