fix: impossible d'ouvrir les sous-dossiers au-delà de 2 niveaux
Cause: renderChildren génère du HTML statique (x-html). Le chevron appelait toggleExpand(id) qui mettait à jour this.expanded[id] mais le <ul> des enfants n'avait pas de x-show → le DOM ne réagissait pas. Fix: toggleExpand(id, btn) accepte maintenant l'élément bouton. Pour les items renderChildren, il: - toggle la classe CSS 'open' sur le chevron (rotation 90°) - trouve le <ul class=ws-tree> frère dans le <li> parent - bascule son style.display entre '' et 'none'
This commit is contained in:
@@ -356,7 +356,7 @@ document.addEventListener('alpine:init', function() {
|
|||||||
var icon = c.is_folder ? '📁' : '📄';
|
var icon = c.is_folder ? '📁' : '📄';
|
||||||
html += '<li><div class="ws-tree-item" style="padding-left:'+(depth*20)+'px" draggable="true" data-folder-id="'+(c.is_folder?c.id:'')+'" ondragstart="var d=document.querySelector(\'[x-data]\').__x.$data;d.onInternalDragStart(event,'+c.id+')" ondragend="event.target.style.opacity=\'\'">';
|
html += '<li><div class="ws-tree-item" style="padding-left:'+(depth*20)+'px" draggable="true" data-folder-id="'+(c.is_folder?c.id:'')+'" ondragstart="var d=document.querySelector(\'[x-data]\').__x.$data;d.onInternalDragStart(event,'+c.id+')" ondragend="event.target.style.opacity=\'\'">';
|
||||||
if (c.is_folder && hasKids) {
|
if (c.is_folder && hasKids) {
|
||||||
html += '<button class="ws-chevron" onclick="event.stopPropagation();document.querySelector(\'[x-data]\').__x.$data.toggleExpand('+c.id+')">▶</button>';
|
html += '<button class="ws-chevron" onclick="event.stopPropagation();var d=document.querySelector(\'[x-data]\').__x.$data;d.toggleExpand('+c.id+',this)">▶</button>';
|
||||||
} else {
|
} else {
|
||||||
html += '<span style="width:16px;flex-shrink:0;"></span>';
|
html += '<span style="width:16px;flex-shrink:0;"></span>';
|
||||||
}
|
}
|
||||||
@@ -389,9 +389,20 @@ document.addEventListener('alpine:init', function() {
|
|||||||
return s.replace(/\\/g,'\\\\').replace(/'/g,"\\'").replace(/"/g,'"');
|
return s.replace(/\\/g,'\\\\').replace(/'/g,"\\'").replace(/"/g,'"');
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleExpand(id) {
|
toggleExpand(id, btn) {
|
||||||
this.expanded[id] = !(this.expanded[id] || false);
|
this.expanded[id] = !(this.expanded[id] || false);
|
||||||
this.expanded = Object.assign({}, this.expanded);
|
this.expanded = Object.assign({}, this.expanded);
|
||||||
|
// For renderChildren static HTML: toggle the sibling <ul> + chevron rotation
|
||||||
|
if (btn) {
|
||||||
|
btn.classList.toggle('open', this.expanded[id]);
|
||||||
|
var li = btn.closest('li');
|
||||||
|
if (li) {
|
||||||
|
var ul = li.querySelector(':scope > ul.ws-tree');
|
||||||
|
if (ul) {
|
||||||
|
ul.style.display = this.expanded[id] ? '' : 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
navigateToFolder(id) {
|
navigateToFolder(id) {
|
||||||
|
|||||||
Reference in New Issue
Block a user