From e26c5ff255cf523edf06ad5cacc706e54bb35c9c Mon Sep 17 00:00:00 2001
From: "chris (daiyi)" <daiyitastic@gmail.com>
Date: Wed, 20 Sep 2017 09:03:45 +0200
Subject: [PATCH] App state strings and integers as editable fields

---
 resources/day8/re_frame/trace/main.css  | 13 ++++++++
 resources/day8/re_frame/trace/main.less |  6 ++--
 src/day8/re_frame/trace/app_state.cljs  | 41 +++++++++++++++++++++----
 3 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/resources/day8/re_frame/trace/main.css b/resources/day8/re_frame/trace/main.css
index 160714b..665d035 100644
--- a/resources/day8/re_frame/trace/main.css
+++ b/resources/day8/re_frame/trace/main.css
@@ -464,3 +464,16 @@
 #--re-frame-trace-- .re-frame-trace--object > span {
   vertical-align: text-top;
 }
+#--re-frame-trace-- .data-structure-editable.string:before {
+  color: #8f8f8f;
+  content: "\"";
+}
+#--re-frame-trace-- .data-structure-editable.string:after {
+  color: #8f8f8f;
+  content: "\"";
+}
+#--re-frame-trace-- .data-structure-editable input {
+  border: none;
+  border-bottom: 1px #333 dotted;
+  padding: 0;
+}
diff --git a/resources/day8/re_frame/trace/main.less b/resources/day8/re_frame/trace/main.less
index c31576d..ceaafc0 100644
--- a/resources/day8/re_frame/trace/main.less
+++ b/resources/day8/re_frame/trace/main.less
@@ -596,8 +596,10 @@
       }
     }
 
-    &>span {
-      vertical-align: text-top;
+    input {
+      border: none;
+      border-bottom: 1px #333 dotted;
+      padding: 0;
     }
   }
 }
diff --git a/src/day8/re_frame/trace/app_state.cljs b/src/day8/re_frame/trace/app_state.cljs
index 63fb1a7..94a9af7 100644
--- a/src/day8/re_frame/trace/app_state.cljs
+++ b/src/day8/re_frame/trace/app_state.cljs
@@ -11,12 +11,41 @@
        (reduce (fn [acc [property value]]
                  (assoc acc (keyword property) value)) {})))
 
+(defn data-input [{:keys [title on-save on-change on-stop]}]
+  (let [val  (r/atom title)
+        save #(let [v (-> @val str str/trim)]
+                (when (pos? (count v))
+                  (on-save v)))]
+    (fn []
+      [:input {:type        (cond (integer? "number")
+                                  (string?  "text"))
+               :value       @val
+               :size        (if (zero? (count (str @val)))
+                              1
+                              (count (str @val)))
+               :on-change   #(do (reset! val (-> % .-target .-value))
+                                 (on-change %))
+               :on-key-down #(case (.-which %)
+                               13 (save)
+                               nil)}])))
+
+(defn editable
+  [raw]
+  (let [val (r/atom raw)]
+    [:span {:class (str/join " " ["data-structure-editable"
+                                  (when (string? raw) "string")])}
+      [data-input {:title     raw
+                   :on-save   #(js/console.log %)
+                   :on-change #(reset! val (.. % -target -value))}]]))
+
+
 (defn str->hiccup
   [string]
-  (cond (= string "span")   :span
-        (= string "style")  :style
-        (= string ", ")     " "
-        :else               string))
+  (cond (= string "span")              :span
+        (= string "style")             :style
+        (= string ", ")                " "
+        (str/starts-with? string "\"") [editable (str/replace string "\"" "")]
+        :else                          string))
 
 (declare jsonml->hiccup)
 
@@ -45,8 +74,8 @@
          (= "object" (first jsonml))) [data-structure jsonml]
     (array? jsonml)                   (mapv jsonml->hiccup jsonml)
     (object? jsonml)                  {:style (string->css (js->clj jsonml))}
-    (or (string? jsonml)
-        (integer? jsonml))            (str->hiccup jsonml)))
+    (string? jsonml)                  (str->hiccup jsonml)
+    (integer? jsonml)                 [editable jsonml]))
 
 (defn tab [data]
   [:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}}