Skip to content

Instantly share code, notes, and snippets.

@yayitswei
Last active August 29, 2015 13:56
Show Gist options
  • Save yayitswei/9294380 to your computer and use it in GitHub Desktop.
Save yayitswei/9294380 to your computer and use it in GitHub Desktop.
linked text boxes
(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]})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment