add toggle children button to nodes

This commit is contained in:
Yisroel Baum 2026-04-20 09:35:53 +03:00
parent d26734facf
commit 12fd5a88b6
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9

View file

@ -43,7 +43,7 @@ function buildTree(nodes) {
return roots; return roots;
} }
function renderTree(nodes, textId) { function renderTree(nodes, textId, depth = 0) {
const ul = document.createElement('ul'); const ul = document.createElement('ul');
nodes.forEach(node => { nodes.forEach(node => {
const li = document.createElement('li'); const li = document.createElement('li');
@ -61,11 +61,28 @@ function renderTree(nodes, textId) {
const bulkBtn = document.createElement('button'); const bulkBtn = document.createElement('button');
bulkBtn.textContent = 'Bulk add children'; bulkBtn.textContent = 'Bulk add children';
bulkBtn.className = 'bulk-add-children'; bulkBtn.className = 'bulk-add-children';
bulkBtn.addEventListener('click', () => toggleBulkAddForm(li, node.id, textId)); bulkBtn.addEventListener(
'click',
() => toggleBulkAddForm(li, node.id, textId)
);
li.appendChild(bulkBtn); li.appendChild(bulkBtn);
if (node.children.length > 0) { if (node.children.length > 0) {
li.appendChild(renderTree(node.children, textId)); const childUl = renderTree(node.children, textId, depth + 1);
const childrenVisible = depth === 0;
childUl.style.display = childrenVisible ? '' : 'none';
const toggleBtn = document.createElement('button');
toggleBtn.className = 'toggle-children';
toggleBtn.textContent = childrenVisible ? '▼' : '▶';
toggleBtn.addEventListener('click', () => {
const isHidden = childUl.style.display === 'none';
childUl.style.display = isHidden ? '' : 'none';
toggleBtn.textContent = isHidden ? '▼' : '▶';
});
li.appendChild(toggleBtn);
li.appendChild(childUl);
} }
ul.appendChild(li); ul.appendChild(li);