Нужна помощь
. Разрабатываю двухпанельный файловый менеджер. Реализация на 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 и я не понимаю что не так
