objects can now be collapsed and finally added and made a dark theme default

liz3 · liz3 · commit bb6885f8b543 · 2021-11-23T09:35:46.000+01:00
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
   <link type="text/css" href="style.css" rel="stylesheet" />
 </head>
 
-<body>
+<body class="dark-theme">
   <div id="root">
     <div class="input-wrapper">
     </div>
diff --git a/js/index.js b/js/index.js
@@ -6,15 +6,34 @@ let reevaluate = null;
 const createElementComplex = (containerNode, containerElem, indexOrKey, isArray, level, isRoot = false, parentArray) => {
   const wrapper = domUtils.create("div", ["container-wr"], null);
   const keyWrapper = domUtils.create("div", [], null);
+  const valueWrapper = domUtils.create("div", [isRoot ? "root-wr" : null],  {marginLeft: `${level}rem`});
+
+  if(!isRoot) {
+    const collapseButton = domUtils.createWithText("span", "-", [], {cursor: "pointer", marginRight: "5px"});
+    let hiding = false;
+    collapseButton.addEventListener("click", () => {
+      if(!hiding) {
+        valueWrapper.style.transform = "scaleY(0)";
+        collapseButton.textContent = "+";
+      } else {
+        valueWrapper.style.transform = "scaleY(1)";
+        collapseButton.textContent = "-";
+      }
+      hiding = !hiding;
+    });
+
+    keyWrapper.append(collapseButton);
+
+  }
   keyWrapper.appendChild(domUtils.createWithText("span", isRoot ? "root: " : `${indexOrKey}: `, [], null));
   keyWrapper.appendChild(domUtils.createWithText("span", isArray ? 'array' : 'object', [], {opacity: 0.6}));
 
   let createKey = '';
   let createValue = '';
   let createType = "string";
 
-
   const createWrapper = domUtils.create("div", ["create-row"], null);
+
   const valueInput = domUtils.input("Value", '', newVal => {
     createValue = newVal;
   });
@@ -101,9 +120,9 @@ const createElementComplex = (containerNode, containerElem, indexOrKey, isArray,
   });
     alterBtn.style.display = "inline";
     createWrapper.appendChild(alterBtn);
-}
+  }
   keyWrapper.appendChild(createWrapper);
-  const valueWrapper = domUtils.create("div", [isRoot ? "root-wr" : null],  {marginLeft: `${level}rem`});
+
   wrapper.appendChild(keyWrapper);
   wrapper.appendChild(valueWrapper);
   return {wrapper, keyWrapper, valueWrapper};
@@ -163,7 +182,7 @@ const createElementSimple = (containerNode, containerElem, indexOrKey, isArray)
       ev.stopPropagation();
       closeCurrentEdit();
       closeCurrentEdit = null;
-    });
+   });
     const saveBtn = domUtils.button("Save", () => {
       ev.stopPropagation();
       if (key !== indexOrKey && !isArray) {
@@ -260,13 +279,29 @@ const advance = (node, elem, level, isRoot = false) => {
 
 
 const createEditor = (onParse) => {
-  const editorRoot = domUtils.create("div", [], {padding: "10px 15px"}, false);
-  const area = domUtils.create("textarea", [], {width: "100%", height: "25vh"}, false);
+  const editorRoot = domUtils.create("div", [], {padding: "10px 15px", display: "flex"}, false);
+  const buttonRow = domUtils.create("div", [], null, false);
+  const area = domUtils.create("textarea", [], {width: "100%", height: "20vh", marginRight: "20px"}, false);
   const button = domUtils.button("parse", ev => {
     onParse(area);
   }, false);
+  let isDark = true;
+  const theme = domUtils.button("Dark", ev => {
+    if(isDark) {
+      ev.target.innerHTML = "<span>Light</span>";
+      window.document.body.classList.remove("dark-theme");
+    } else {
+      ev.target.innerHTML = "<span>Dark</span>";
+      window.document.body.classList.add("dark-theme");
+
+    }
+    isDark = !isDark;
+  }, false);
+
   editorRoot.appendChild(area);
-  editorRoot.appendChild(button);
+  buttonRow.appendChild(button);
+  buttonRow.appendChild(theme);
+  editorRoot.appendChild(buttonRow);
   return editorRoot;
 }
 window.addEventListener("DOMContentLoaded", ev => {
diff --git a/style.css b/style.css
@@ -35,8 +35,8 @@ select {
 
 }
 .browser-root {
-  width: 95vw;
-  height: 55vh;
+  width: 98vw;
+  height: 70vh;
   margin: 0 auto;
   border: 2px solid black;
   padding: 4px;
@@ -82,3 +82,32 @@ select {
 .valtype-number {
   color: green;
 }
+.dark-theme {
+    background: #212121;
+}
+.dark-theme input, .dark-theme textarea {
+    background: #2e2e2e;
+    color: #cecece;
+}
+.dark-theme span, .dark-theme div {
+    color: #cecece;
+}
+.dark-theme .browser-root {
+    background: #2e2e2e;
+}
+.dark-theme .btn, .dark-theme select {
+    background: #4e4e4e;
+}
+.dark-theme .btn span, .dark-theme select {
+    color: #eaeaea;
+}
+
+.dark-theme .valtype-null, .dark-theme .valtype-boolean {
+  color: #b12fb1;
+}
+.dark-theme .valtype-string {
+  color: #2f94ff;
+}
+.dark-theme .valtype-number {
+  color: #00dd12;
+}
