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 ? '📁' : '📄';
|
||||
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) {
|
||||
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 {
|
||||
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,'"');
|
||||
},
|
||||
|
||||
toggleExpand(id) {
|
||||
toggleExpand(id, btn) {
|
||||
this.expanded[id] = !(this.expanded[id] || false);
|
||||
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) {
|
||||
|
||||
Reference in New Issue
Block a user