1 files changed, 33 insertions, 20 deletions

diff --git a/internal/admin/static/editor.js b/internal/admin/static/editor.js
index 593bf7f..7a4fcb1 100644
--- a/internal/admin/static/editor.js
+++ b/internal/admin/static/editor.js
@@ -3,7 +3,7 @@ var editorFields = [];
 var currentID = null;
 var allIDs = [];
 var treeData = { root: [], dirs: {} };
-var collapsedDirs = {};
+var dirOpenState = {};
 
 function initEditor(type, fields) {
   editorType = type;
@@ -49,6 +49,12 @@ function renderList(filter) {
   }
 
   el.innerHTML = html;
+  el.querySelectorAll('details.dir-group').forEach(function(d) {
+    d.addEventListener('toggle', function() {
+      var n = d.getAttribute('data-name');
+      if (n) dirOpenState[n] = d.open;
+    });
+  });
 }
 
 function renderDirGroup(name, ids, filter) {
@@ -59,30 +65,37 @@ function renderDirGroup(name, ids, filter) {
     displayIds = ids.filter(function(id) { return String(id).toLowerCase().indexOf(filter) >= 0; });
     if (displayIds.length === 0) return '';
   }
-  var expanded = isFiltering ? true : (collapsedDirs[name] === true);
-  var displayName = name || editorType.charAt(0).toUpperCase() + editorType.slice(1);
-  var h = '<div class="dir-group">';
-  if (name) {
-    h += '<div class="dir-header" onclick="toggleDir(\'' + escAttr(name) + '\')" oncontextmenu="showDirContextMenu(event,\'' + escAttr(name) + '\')" ondragover="dirDragOver(event,\'' + escAttr(name) + '\')" ondragleave="dirDragLeave(event)" ondrop="dirDrop(event,\'' + escAttr(name) + '\')">';
-    h += '<span class="dir-arrow">' + (expanded ? '&#9660;' : '&#9654;') + '</span>';
-    h += '<span class="dir-name">' + esc(displayName) + '</span>';
-    h += '<span class="dir-count">' + (isFiltering ? displayIds.length + '/' + ids.length : ids.length) + '</span>';
-    h += '</div>';
+
+  function renderItems() {
+    var h = '';
+    displayIds.forEach(function(id) {
+      h += '<div class="item' + (id === currentID ? ' active' : '') + '" onclick="loadItem(\'' + esc(id) + '\')" draggable="true" ondragstart="itemDragStart(event,\'' + escAttr(id) + '\')" oncontextmenu="showItemContextMenu(event,\'' + escAttr(id) + '\')">' + esc(id) + '</div>';
+    });
+    return h;
   }
-  h += '<div class="dir-items"' + (name && !expanded ? ' style="display:none"' : '') + ' ondragover="dirDragOver(event,\'' + (name || '') + '\')" ondragleave="dirDragLeave(event)" ondrop="dirDrop(event,\'' + (name || '') + '\')">';
-  displayIds.forEach(function(id) {
-    h += '<div class="item' + (id === currentID ? ' active' : '') + '" onclick="loadItem(\'' + esc(id) + '\')" draggable="true" ondragstart="itemDragStart(event,\'' + escAttr(id) + '\')" oncontextmenu="showItemContextMenu(event,\'' + escAttr(id) + '\')">' + esc(id) + '</div>';
-  });
-  h += '</div>';
+
+  if (!name) {
+    var fh = '<div class="dir-items" ondragover="dirDragOver(event,\'\')" ondragleave="dirDragLeave(event)" ondrop="dirDrop(event,\'\')">';
+    fh += renderItems();
+    fh += '</div>';
+    return fh;
+  }
+
+  var open = isFiltering || dirOpenState[name] === true;
+  var openAttr = open ? ' open' : '';
+  var h = '<details class="dir-group" data-name="' + escAttr(name) + '"' + openAttr + '>';
+  h += '<summary class="dir-header" oncontextmenu="showDirContextMenu(event,\'' + escAttr(name) + '\')" ondragover="dirDragOver(event,\'' + escAttr(name) + '\')" ondragleave="dirDragLeave(event)" ondrop="dirDrop(event,\'' + escAttr(name) + '\')">';
+  h += '<span class="dir-arrow"></span>';
+  h += '<span class="dir-name">' + esc(name) + '</span>';
+  h += '<span class="dir-count">' + (isFiltering ? displayIds.length + '/' + ids.length : ids.length) + '</span>';
+  h += '</summary>';
+  h += '<div class="dir-items" ondragover="dirDragOver(event,\'' + name + '\')" ondragleave="dirDragLeave(event)" ondrop="dirDrop(event,\'' + name + '\')">';
+  h += renderItems();
   h += '</div>';
+  h += '</details>';
   return h;
 }
 
-function toggleDir(name) {
-  collapsedDirs[name] = collapsedDirs[name] !== true;
-  renderList('');
-}
-
 function filterList(val) {
   renderList(val);
 }