refactor(admin): simplify css and js of card collapsing and side bar directories

1 files changed, 28 insertions, 32 deletions

diff --git a/internal/admin/static/moduleeditor.js b/internal/admin/static/moduleeditor.js
index b2eb79f..ff9d8a4 100644
--- a/internal/admin/static/moduleeditor.js
+++ b/internal/admin/static/moduleeditor.js
@@ -106,6 +106,9 @@ function renderModuleEditor(id, data) {
   html += '</div>';
 
   $('#editorMain').innerHTML = html;
+  document.querySelectorAll('details.obj-card').forEach(function(d) {
+    d.addEventListener('toggle', function() { expandedCards[d.getAttribute('data-card')] = d.open; });
+  });
   setupSearchFields();
 }
 
@@ -116,43 +119,41 @@ function renderCurrent() {
 }
 
 function renderCard(sec, data) {
-  var collapsed = expandedCards[sec.id] === false;
+  var openAttr = expandedCards[sec.id] === false ? '' : ' open';
   var isFull = cardWidths[sec.id] !== undefined ? cardWidths[sec.id] : (sec.fullWidth || false);
   var fullClass = isFull ? ' obj-card-full' : '';
-  var h = '<div class="obj-card' + fullClass + '" data-card="' + sec.id + '">';
-  h += '<div class="obj-card-header" onclick="toggleCard(\'' + sec.id + '\')">';
-  h += '<span class="obj-card-arrow">' + (collapsed ? '&#9654;' : '&#9660;') + '</span>';
+  var h = '<details class="obj-card' + fullClass + '" data-card="' + sec.id + '"' + openAttr + '>';
+  h += '<summary class="obj-card-header">';
+  h += '<span class="obj-card-arrow"></span>';
   h += '<span class="obj-card-label">' + sec.label + '</span>';
-  h += '<button class="btn btn-sm obj-card-expand" onclick="event.stopPropagation();toggleCardWidth(\'' + sec.id + '\')" title="' + (isFull ? 'Half width' : 'Full width') + '">' + (isFull ? '\u2190' : '\u2192') + '</button>';
+  h += '<button class="btn btn-sm obj-card-expand" onclick="event.preventDefault();toggleCardWidth(\'' + sec.id + '\')" title="' + (isFull ? 'Half width' : 'Full width') + '">' + (isFull ? '\u2190' : '\u2192') + '</button>';
   if (!sec.always) {
-    h += '<button class="btn btn-sm btn-danger obj-card-remove" onclick="event.stopPropagation();removeSection(\'' + sec.id + '\')">X</button>';
+    h += '<button class="btn btn-sm btn-danger obj-card-remove" onclick="event.preventDefault();removeSection(\'' + sec.id + '\')">X</button>';
   }
-  h += '</div>';
-  if (!collapsed) {
-    h += '<div class="obj-card-body">';
+  h += '</summary>';
+  h += '<div class="obj-card-body">';
 
-    if (sec.isArray) {
-      h += renderArraySection(sec, data);
-    } else {
-      h += '<div class="obj-card-grid">';
-      sec.fields.forEach(function(f) {
-        h += renderField(sec, f, data, -1);
+  if (sec.isArray) {
+    h += renderArraySection(sec, data);
+  } else {
+    h += '<div class="obj-card-grid">';
+    sec.fields.forEach(function(f) {
+      h += renderField(sec, f, data, -1);
+    });
+    h += '</div>';
+
+    if (sec.inline) {
+      sec.inline.forEach(function(il) {
+        if (il.type === 'kv') {
+          h += ced_renderKV(sec, il, data);
+        } else if (il.type === 'kv_search') {
+          h += ced_renderKVSearch(sec, il, data);
+        }
       });
-      h += '</div>';
-
-      if (sec.inline) {
-        sec.inline.forEach(function(il) {
-          if (il.type === 'kv') {
-            h += ced_renderKV(sec, il, data);
-          } else if (il.type === 'kv_search') {
-            h += ced_renderKVSearch(sec, il, data);
-          }
-        });
-      }
     }
-    h += '</div>';
   }
   h += '</div>';
+  h += '</details>';
   return h;
 }
 
@@ -177,11 +178,6 @@ function renderField(sec, f, data, idx) {
   return ced_renderField(sec, f, data, idx, null, null, cardPath, fieldID, getVal);
 }
 
-function toggleCard(id) {
-  expandedCards[id] = expandedCards[id] === false ? true : false;
-  renderCurrent();
-}
-
 function toggleCardWidth(id) {
   cardWidths[id] = !cardWidths[id];
   renderCurrent();