smart border experiment

frontend/public/css/site.css

@@ -47,6 +47,7 @@ th {
 }
 td {
     text-align: right;
+    position: relative;
 }
 
 td input {
@@ -65,3 +66,56 @@ td input:not(:focus) {
 }
 
 
+.smartborder {
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+    border: 3px solid blue;
+    position: absolute;
+    left: -4px;
+    top: -4px;
+    background: none;
+    z-index: 999;
+    /*pointer-events: none;*/
+}
+
+td input:not(:focus) + .smartborder {
+    visibility: hidden;
+}
+
+
+.smartborder .button {
+    --button-size: 20px;
+    --half-button-size: 10px;
+    /*pointer-events: all;/* TODO check this (what is "initial"?) */
+    width: var(--button-size);
+    height: var(--button-size);
+    background-color: blue;
+    color: white;
+    border-radius: var(--half-button-size);
+    position: absolute;
+}
+.extendrange.button {
+    left: 100%;
+    top: 100%;
+}
+.fillrange.button {
+    top: 100%;
+    left: calc(50% - var(--half-button-size));
+}
+.moverange.button {
+    top: calc(50% - var(--half-button-size));
+    left: calc(0px - var(--button-size));
+}
+.emptyrange.button {
+    top: calc(0px - var(--button-size));
+    left: calc(100% - var(--button-size) - 5px);
+}
+.deleterange.button {
+    top: calc(0px - var(--button-size));
+    left: 100%;
+}
+.copyrange.button {
+    top: calc(0px - var(--button-size));
+    left: 0;
+}
+

frontend/src/microtables_frontend/core.cljs

@@ -111,6 +111,7 @@
             prepped-for-eval (map (fn [datum] (assoc datum :inputs (apply hash-map (interleave (:vars datum) (:found datum))))) ready)
             evaluated (map (fn [datum] (assoc datum :display (evaluate-expression (subs (:value datum) 1) (:inputs datum)))) prepped-for-eval)
             updated-values (copy-display-values values evaluated)]
+        (println "EVALUATED" evaluated)
         (if (nil? not-ready)
           updated-values
           (recur updated-values not-ready))))))
@@ -140,19 +141,53 @@
                       (toggle-display data c r :display)
                       (add-parsed-variables-to-specific-datum c r data)
                       (re-evaluate data))))
+(defn on-keyPress [c r e]
+  (println "key press" c r (.. e -which) (.keys js/Object e))
+  (if (= 13 (.. e -which)) (.focus (.getElementById js/document (str c (inc r)))))
+  ;TODO TODO TODO TODO TODO TODO TODO TODO TODO
+  )
 
 
 ;; -------------------------
 ;; Views
 
+(defn smart-border [c r]
+  [:div {:class "smartborder"}
+   [:div {:class "extendrange button"
+          :title "extend range"
+          :on-click #(println "extend range")}]
+   [:div {:class "fillrange button"
+          :title "fill range"
+          :on-click #(println "fill range")}]
+   [:div {:class "moverange button"
+          :title "move range"
+          :on-click #(println "move range")}]
+   [:div {:class "emptyrange button"
+          :title "empty range"
+          :on-click #(println "empty range")}]
+   [:div {:class "deleterange button"
+          :title "delete range"
+          :on-click #(println "delete range")}]
+   [:div {:class "copyrange button"
+          :title "copy range"
+          :on-click #(println "copy range")}]
+   ]
+  )
+
 (defn cell [c r data]
   (let [datum (some #(if (and (= c (:col %)) (= r (:row %))) %) data)]
-    ^{:key (str c r)} [:td [:input {:value (if (= (get datum :view nil) :value)
+    ^{:key (str c r)} [:td
+                       [:input {:id (str c r)
+                                    :value (if (= (get datum :view nil) :value)
                                              (get datum :value "")
                                              (get datum :error (get datum :display (get datum :value ""))))
                                     :on-change (partial on-change c r datum)
                                     :on-blur (partial on-leave-cell c r)
-                                    :on-focus (partial on-enter-cell c r)}]]))
+                                    :on-focus (partial on-enter-cell c r)
+                                    :on-paste #(println "paste" %);TODO
+                                    :on-drop #(println "drop" %);TODO
+                                    :on-keyPress (partial on-keyPress c r)}]
+                       (smart-border c r)]))
 (defn row [r cols data]
   ^{:key (str "row-" r)} [:tr
                           (cons
@@ -174,7 +209,7 @@
 
 (defn app []
   [:div
-   [:h3 "Microtables"]
+   ;[:h3 "Microtables"]
    [sheet @data-atom]])
 
 ;; -------------------------