linked text boxes

gistfile1.clj

(ns example.core
  (:require-macros [cljs.core.async.macros :refer [go go-loop]])
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]
            [clojure.string :as string]))

(def app-state (atom {:options {:a 1 :b 2 :c 3}}))

(defmulti changed-option (fn [k _] k))

(defmethod changed-option :a [_ {:keys [a b c]}]
  {:a a
   :b (inc a)
   :c (inc (inc a))})

(defmethod changed-option :b [_ {:keys [a b c]}]
  {:a (dec b)
   :b b
   :c (inc b)})

(defmethod changed-option :c [_ {:keys [a b c]}]
  {:a (dec (dec c))
   :b (dec c)
   :c c})

(enable-console-print!)

(defn text->value [text]
  (if (empty? text) 0 (js/parseFloat text)))

;; if the input isn't numerical then don't allow the text box value to change
;; I modeled it after the Om tutorial, but it doesn't seem to work here
(defn handle-change-numeric [e owner input id]
  (let [text (.. e -target -value)]
    (if (or (empty? text) (re-find #"^\d*\.?\d{0,4}$" text))
      (swap! app-state assoc-in [:options] (changed-option id (assoc @input id (text->value text)))))
      (om/update! input id (id @input))))

(defn numeric-input [input owner & [{:keys [id label] :as opts}]]
  (reify
    om/IRenderState
    (render-state [this state]
                  (dom/div nil
                           (dom/span nil label)
                           (dom/input
                            #js {:id id
                                 :value (id input)
                                 :onChange #(handle-change-numeric % owner input id)})))))

(defn controls-view [options owner]
  (reify
    om/IRenderState
    (render-state [_ state]
      (dom/div #js {:id "controls"}
               (om/build numeric-input options {:opts {:id :a :label "A"}})
               (om/build numeric-input options {:opts {:id :b :label "B"}})
               (om/build numeric-input options {:opts {:id :c :label "C"}})))))

(om/root controls-view
         app-state
         {:target (. js/document (getElementById "controls"))
          :path [:options]})