Двухпанельный файловый менеджер JQuery
 

Нужна помощь:help: . Разрабатываю двухпанельный файловый менеджер. Реализация на Js, Jquery. Сидел писал, но проблема в том, что при удалении/создании папки то всё сразу переходит на корневую папку, из-за чего сложно создать подкаталог, в котором должны хранится файлы. Логику развертывания xml разметки я написал, но боги велели ему не работать. Помогите с кодом, мб я просто не в те дебри иду.

document.addEventListener('DOMContentLoaded', function() {
    // Загрузка дерева файлов и папок
    loadTree();
    // Обработчик клика на папку
    document.querySelectorAll('.folder > span').forEach(function(folder) {
        folder.addEventListener('click', function(event) {
            event.stopPropagation();
            event.target.parentNode.classList.toggle('open');
        });
    });

    // Обработчик клика на файл
    document.querySelectorAll('.file > span').forEach(function(file) {
        file.addEventListener('click', function(event) {
            event.stopPropagation();
            var fileName = event.target.parentNode.getAttribute('data-name');
            var fileDescription = event.target.nextElementSibling.textContent;
            var fileContent = localStorage.getItem(fileName);
            displayFile(fileName, fileDescription, fileContent);
        });
    });
});

function loadTree() {
    var rootFolder = document.querySelector('.folder[data-name="Root"]');
    loadFolder(rootFolder);
}

function loadFolder(folder) {
    var folderName = folder.getAttribute('data-name');
    var folderUL = folder.querySelector('ul');
    folderUL.innerHTML = '';
    var folderData = getFolderData(folderName);
    if (!folderData) {
        return;
    }
    folderData.forEach(function(item) {
        var li = document.createElement('li');
        if (item.type === 'folder') {
            li.classList.add('folder');
            li.setAttribute('data-name', item.name);
            li.innerHTML = '<span>' + item.name + '</span><ul></ul>';
        } else if (item.type === 'file') {
            li.classList.add('file');
            li.setAttribute('data-name', item.name);
            li.innerHTML = '<span>' + item.name + '</span><span class="description">' + item.description + '</span>';
        }
        folderUL.appendChild(li);
    });
}
function getFolderData(folderName) {
    // Может быть заменено реальными данными / AJAX запросом
    var data = {
        'Root': [
            { type: 'folder', name: 'Folder1' },
            { type: 'folder', name: 'Folder2' }
        ],
        'Folder1': [
            { type: 'file', name: 'File1.txt', description: '(Описание файла 1)' },
            { type: 'file', name: 'File2.txt', description: '(Описание файла 2)' }
        ],
    };
    return data[folderName];
}
function displayFile(fileName, fileDescription, fileContent) {
    var fileContentDiv = document.getElementById('fileContent');
    fileContentDiv.innerHTML = '<h3>' + fileName + '</h3>' +
        '<p>' + fileDescription + '</p>' +
        '<textarea id="fileContentTextarea" rows="10" cols="50" spellcheck="false">' + fileContent + '</textarea>' +
        '<button onclick="saveFile(\'' + fileName + '\')">Сохранить</button>';
}
function saveFile(fileName) {
    var fileContentTextarea = document.getElementById('fileContentTextarea');
    var fileContent = fileContentTextarea.value;
    localStorage.setItem(fileName, fileContent);
}

function createFolder() {
    var popup = document.getElementById('popup');
    var nameInput = document.getElementById('nameInput');
    var folderSelect = document.getElementById('folderSelect');
    nameInput.value = '';
    folderSelect.value = 'root';
    popup.style.display = 'block';
}

function deleteFolder() {
    var currentFolder = document.querySelector('.folder.open');
    if (currentFolder) {
        if (!currentFolder.parentNode.classList.contains('folder')) {
            alert('Нельзя удалить корневую папку.');
            return;
        }
        var parentFolder = currentFolder.parentNode;
        parentFolder.removeChild(currentFolder);
    } else {
        alert('Выберите папку, которую нужно удалить.');
    }
}

function uploadFile() {
    var currentFolder = document.querySelector('.folder.open');
    if (currentFolder) {
        var popup = document.getElementById('popup');
        popup.style.display = 'block';
    } else {
        alert('Выберите папку, в которую нужно загрузить файл.');
    }
}

function createFolderOrUploadFile() {
    var nameInput = document.getElementById('nameInput');
    var folderSelect = document.getElementById('folderSelect');
    var fileName = nameInput.value;
    if (fileName) {
        if (folderSelect.value === 'root') {
            createFolderInRoot(fileName);
        } else if (folderSelect.value === 'new') {
            createNewFolder(fileName);
        }
    }
}

function createFolderInRoot(folderName) {
    var rootFolder = document.querySelector('.folder[data-name="Root"]');
    var folderUL = rootFolder.querySelector('ul');
    var li = document.createElement('li');
    li.classList.add('folder');
    li.setAttribute('data-name', folderName);
    li.innerHTML = '<span>' + folderName + '</span><ul></ul>';
    folderUL.appendChild(li);

    var popup = document.getElementById('popup');
    popup.style.display = 'none';
    nameInput.value = '';
}

function createNewFolder(folderName) {
    var currentFolder = document.querySelector('.folder.open');
    if (currentFolder) {
        var folderUL = currentFolder.querySelector('ul');
        var li = document.createElement('li');
        li.classList.add('folder');
        li.setAttribute('data-name', folderName);
        li.innerHTML = '<span>' + folderName + '</span><ul></ul>';
        folderUL.appendChild(li);
    } else {
        alert('Выберите папку, в которую нужно добавить новую папку.');
    }

    var popup = document.getElementById('popup');
    popup.style.display = 'none';
    nameInput.value = '';
}

function downloadFile() {
    var currentFile = document.querySelector('.file');
    if (currentFile) {
        var fileName = currentFile.getAttribute('data-name');
        var fileContent = localStorage.getItem(fileName);
        var link = document.createElement('a');
        link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContent));
        link.setAttribute('download', fileName);
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    } else {
        alert('Выберите файл для скачивания.');
    }
}

function deleteFile() {
    var currentFile = document.querySelector('.file');
    if (currentFile) {
        var fileName = currentFile.getAttribute('data-name');
        localStorage.removeItem(fileName);
        var parentFolder = currentFile.parentNode;
        parentFolder.removeChild(currentFile);
    } else {
        alert('Выберите файл, который нужно удалить.');
    }
}

Немного про менеджер. Должно производиться взаимодействие с папкой/файлом через верхнее меню, оно же

<div class="menu">
            <button onclick="createFolder()">Создать папку</button>
            <button onclick="deleteFolder()">Удалить папку</button>
            <button onclick="uploadFile()">Загрузить файл</button>
            <button onclick="downloadFile()">Скачать файл</button>
            <button onclick="deleteFile()">Удалить файл</button>
            <button onclick="renameFile()">Переименовать</button>
        </div>

Папки создаются в data в fn getFolderData. Про HTML всё в порядке, проблема в js и я не понимаю что не так:-/

При нажатии кнопки "Создать папку" вызывается функция createFolder(), которая открывает попап окно, где вводится имя папки.
Это понятно.
А где вызываются функции, которые непосредственно создают эту папку и визуализируют ее : createFolder или createFolderOrUploadFile или createFolderInRoot?