put placeholders back

mercure-imaging · Mar 22, 2024 · 18feef2 · 18feef2
1 parent 7ebcff4
commit 18feef2
Showing 1 changed file with 54 additions and 27 deletions.
diff --git a/webinterface/templates/base.html b/webinterface/templates/base.html
@@ -107,7 +107,12 @@
       </p>
     </div>
   </footer>
-
+  <style>
+    .json_container .cm-line:first-child::before {
+      content: attr(placeholder);
+    }
+  </style>
+
   <script type="module">
     import { JSONEditor } from "{{ url_for('static', path='/js/svelte-jsoneditor.js') }}"
     $(document).ready(function () {
@@ -152,33 +157,55 @@
         //   }
         // });
         $("[data-json]").map(((i,el)=>{
-            let new_div = document.createElement("div")
-            // new_div.style = "height: 50px;"
-            el = $(el)
-            el.hide(0)
-            el.after(new_div);
-
-            let ed = new JSONEditor({
-                target: new_div,
-                props: {
-                    mode: "text",
-                    mainMenuBar: false,
-                    statusBar: false,
-                    navigationBar: false,
-                    askToFormat: false,
-                    onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => {
-                        if (contentErrors) {
-                            return;
-                        }
-                        el.val(updatedContent.text);
-                    },
-                    }})
-                    el.on("input", (evt)=> {
-                      ed.set({"text":el.val()});
-                    })
-                    ed.set({"text":el.val()})
+          let new_div = document.createElement("div")
+          $(new_div).addClass("json_container")
+          el = $(el)
+          el.hide(0)
+          el.after(new_div);
+
+          let ed = new JSONEditor({
+              target: new_div,
+              props: {
+                  mode: "text",
+                  mainMenuBar: false,
+                  statusBar: false,
+                  navigationBar: false,
+                  askToFormat: false,
+                  onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => {
+                      if (contentErrors) {
+                          return;
+                      }
+                      if (!updatedContent.text) {
+                       setTimeout(()=>$(new_div).find(".cm-line").attr("placeholder",el.attr("placeholder")), 100);
+                      }
+                      el.val(updatedContent.text);
+                  },
+                  onFocus: (content) => {
+                    if (!$(new_div).find(".cm-line").text()) 
+                      setTimeout(()=>$(new_div).find(".cm-line").attr("placeholder",el.attr("placeholder")), 100);
+                  },
+                  onBlur: (content) => {
+                    if (!$(new_div).find(".cm-line").text()) 
+                      setTimeout(()=>$(new_div).find(".cm-line").attr("placeholder",el.attr("placeholder")), 100);
+                  }
+                  }});
+          el.on("input", (evt)=> {
+            ed.select(null);
+            ed.set({"text":el.val()});
+            // if (!el.val()) {
+            //   setTimeout(()=>$(new_div).find(".cm-line").attr("placeholder",el.attr("placeholder")), 1000);
+            // }
+          })
+          // if (el.val() == "") {
+          //   ed.set({"text": el.attr("placeholder")})
+          // } else {
+          ed.set({"text":el.val()})
+          if (!el.val()) {
+            setTimeout(()=>$(new_div).find(".cm-line").attr("placeholder",el.attr("placeholder")), 500);
+          }
+          // }
         }))
-
+        
       });