Allow field colours to update

client/js/fields.js

@@ -1,32 +1,38 @@
 let thisLevel = 0;
 let depth = 0;
 
-const fields = document.querySelectorAll('.ss-gridfield-item');
-Array.prototype.forEach.call(fields, function(el) {
-  switch (el.getAttribute('data-class')) {
-    case 'Iliain\\UserformColumns\\FormFields\\EditableColumnStartField': {
-      depth += 1;
-      thisLevel = depth;
-      break;
+const columnDecorator = () => {
+  const fields = document.querySelectorAll('.ss-gridfield-item');
+  Array.prototype.forEach.call(fields, (el) => {
+    switch (el.getAttribute('data-class')) {
+      case 'Iliain\\UserformColumns\\FormFields\\EditableColumnStartField': {
+        depth += 1;
+        thisLevel = depth;
+        break;
+      }
+      case 'Iliain\\UserformColumns\\FormFields\\EditableColumnEndField': {
+        thisLevel = depth;
+        depth -= 1;
+        break;
+      }
+      default: {
+        thisLevel = depth;
+      }
     }
-    case 'Iliain\\UserformColumns\\FormFields\\EditableColumnEndField': {
-      thisLevel = depth;
-      depth -= 1;
-      break;
-    }
-    default: {
-      thisLevel = depth;
-    }
-  }
 
-  if (thisLevel > 0) {
-    el.classList.toggle("incolumn");
-  }
+    if (thisLevel > 0) {
+      el.classList.add('incolumn');
+    }
 
-  for (let i = 1; i <= 5; i++) {
-    if (thisLevel >= i) {
-      el.classList.toggle(`incolumn-level-${i}`);
+    for (let i = 1; i <= 5; i += 1) {
+      if (thisLevel >= i) {
+        el.classList.add(`incolumn-level-${i}`);
+      }
     }
-  }
-});
+  });
+};
+columnDecorator();
 
+const targetNode = document.querySelector('#Form_EditForm');
+const mutationObserver = new MutationObserver(columnDecorator);
+mutationObserver.observe(targetNode, { childList: true, subtree: true });