83 lines
2.8 KiB
JavaScript
83 lines
2.8 KiB
JavaScript
let tree = {};
|
|
|
|
function create_tree_data(curr_dir) {
|
|
let url = base_url + curr_dir;
|
|
|
|
const xmlHttp = new XMLHttpRequest();
|
|
xmlHttp.onreadystatechange = function () {
|
|
if (this.readyState === 4) {
|
|
if (xmlHttp.status === 200) {
|
|
let data = JSON.parse(xmlHttp.responseText);
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
if (data[i]['Type'] === 'dir') {
|
|
file_path.push(curr_dir + '/' + data[i]['Name']);
|
|
create_tree_data(curr_dir + '/' + data[i]['Name']);
|
|
}
|
|
}
|
|
|
|
tree = file_path.reduce((arr, path) => addPath(path.split('/'), arr), [])[0]['children'];
|
|
create_tree_view();
|
|
}
|
|
}
|
|
}
|
|
|
|
xmlHttp.open("GET", url, true);
|
|
xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
|
|
xmlHttp.send(null);
|
|
}
|
|
|
|
function create_tree_view() {
|
|
let html_tree = document.createElement('div');
|
|
html_tree.innerHTML = `<ul id="tree_ul"></ul>`;
|
|
|
|
document.getElementById("tree").innerHTML = '';
|
|
create_list_view(tree, document.getElementById("tree"), '');
|
|
|
|
// Remove nested-class from root element
|
|
document.getElementsByTagName('ul')[0].classList.remove('nested')
|
|
|
|
let icon = document.getElementsByClassName("folder");
|
|
for (let i = 0; i < icon.length; i++) {
|
|
icon[i].addEventListener("click", function () {
|
|
if (this.parentElement.querySelector(".nested") !== null) {
|
|
this.parentElement.querySelector(".nested").classList.toggle("active");
|
|
}
|
|
this.classList.toggle("folder-open");
|
|
});
|
|
}
|
|
}
|
|
|
|
function tree_onclick(url) {
|
|
window.history.pushState('index', 'Filemanager', 'index.html?path=' + url);
|
|
path_changed();
|
|
}
|
|
|
|
function create_list_view(dataRoot, elementRoot, url) {
|
|
if (dataRoot) {
|
|
const list = document.createElement('ul');
|
|
list.classList.add('nested');
|
|
elementRoot.appendChild(list);
|
|
|
|
Object.keys(dataRoot).forEach(key => {
|
|
const listElement = document.createElement('li');
|
|
listElement.innerHTML = `<span class="folder" id='${(url + '/' + dataRoot[key].text).replaceAll('/', '-')}' onclick="tree_onclick('${url}/${dataRoot[key].text}');">${dataRoot[key].text}</span>`;
|
|
list.appendChild(listElement);
|
|
|
|
create_list_view(dataRoot[key]['children'], listElement, url + '/' + dataRoot[key].text);
|
|
});
|
|
}
|
|
}
|
|
|
|
function addPath(pathcomponents, arr) {
|
|
let component = pathcomponents.shift()
|
|
let comp = arr.find(item => item.text === component)
|
|
if (!comp) {
|
|
comp = {text: component}
|
|
arr.push(comp)
|
|
}
|
|
if (pathcomponents.length) {
|
|
addPath(pathcomponents, comp.children || (comp.children = []))
|
|
}
|
|
return arr
|
|
} |