Inicio Explorar Ayuda
Iniciar sesión
lu
/
lp
espejo de git://github.com/heyLu/lp
Vigilar 1
Destacar 0
Fork 0
Código Incidencias 0 Commits 146 Releases 1 Wiki
Explorar el Código

simple example of checked inputs using om.

Lucas Stadler %!s(int64=12) %!d(string=hace) años
padre
651a0e1b8b
commit
25f41d0fa7
Se han modificado 3 ficheros con 89 adiciones y 2 borrados
Dividir vista Mostrar estadísticas de diff
  1. 65 0
      clj/clarity/cljs/clarity.cljs
  2. 21 0
      clj/clarity/map-typed.html
  3. 3 2
      clj/clarity/project.clj

+ 65 - 0
clj/clarity/cljs/clarity.cljs
Ver fichero 

@ -0,0 +1,65 @@
1 
(ns clarity
2 
  (:require [om.core :as om :include-macros true]
3 
            [om.dom :as dom :include-macros true]))
4
5 
(enable-console-print!)
6
7 
; data for one node: type and optionally data
8 
;  if data is present, fill the node with the data
9 
;  on input, check if input conforms to data, if it
10 
;  does change the data, if it doesn't signal the
11 
;  error and don't change the data
12
13 
(def example-state
14 
  (atom
15 
   {:type 'String
16 
    :data "hello"}))
17
18 
(defmulti make-typed-input
19 
  (fn [type & _]
20 
    (if (seq? type)
21 
      (first type)
22 
      type)))
23
24 
(defn change-data
25 
  ([ev owner]
26 
   (om/set-state! owner :data (.. ev -target -value)))
27 
  ([ev owner pred parse]
28 
   (when (pred (.-target ev))
29 
     (om/set-state! owner :data (parse (.. ev -target -value))))))
30
31 
(defn valid? [el]
32 
  (.. el -validity -valid))
33
34 
(defn read-keyword [str]
35 
  (let [name (.substr str 1)]
36 
    (if (seq name)
37 
      (keyword name)
38 
      nil)))
39
40 
(defmethod make-typed-input 'Keyword [type data owner]
41 
  (reify
42 
    om/IInitState
43 
    (init-state [_] {:data data})
44 
    om/IRender
45 
    (render [_]
46 
      (dom/input #js {:type text
47 
                      :placeholder ":my.ns/identifier"
48 
                      :pattern "^:(\\w+|\\w+(\\.\\w+)*\\/\\w+)$"
49 
                      :onChange #(change-data % owner valid? read-keyword)}))))
50
51 
(defmethod make-typed-input 'String [type data owner]
52 
  (reify
53 
    om/IInitState
54 
    (init-state [_] {:data data})
55 
    om/IRender
56 
    (render [_]
57 
      (dom/input #js {:type "text"
58 
                      :value (om/get-state owner :data)
59 
                      :onChange #(change-data % owner)}))))
60
61 
(defn typed-input [typed-data owner]
62 
  (let [{:keys [type data]} typed-data]
63 
    (make-typed-input type data owner)))
64
65 
(om/root (atom {:type 'Keyword}) typed-input (.getElementById js/document "typed_input"))

+ 21 - 0
clj/clarity/map-typed.html
Ver fichero 

@ -0,0 +1,21 @@
1 
<!doctype html>
2 
<html>
3 
<head>
4 
	<title>editing a map (clarity)</title>
5 
	<meta charset="utf-8" />
6 
	<style type="text/css">
7 
	.field {
8 
		display: block;
9 
		margin: 0.5em 1em;
10 
	}
11 
	</style>
12 
</head>
13
14 
<body>
15 
    <div id="typed_input">
16 
    </div>
17
18 
    <script src="http://fb.me/react-0.8.0.js"></script>
19 
    <script src="target/cljsbuild-main.js"></script>
20 
</body>
21 
</html>

+ 3 - 2
clj/clarity/project.clj
Ver fichero 

@ -1,13 +1,14 @@
1 1 
(defproject clarity "0.0-SNAPSHOT"
2 2 
  :dependencies [[org.clojure/clojure "1.5.1"]
3 3 
                 [org.clojure/core.typed "0.2.19"]
4 
                 [org.clojure/clojurescript "0.0-2080"]
4 
                 [org.clojure/clojurescript "0.0-2138"]
5 5
6 6 
                 [com.datomic/datomic-free "0.9.4331"]
7 7
8 
                 [om "0.1.5"]
9
8 10 
                 [ring "1.2.1"]
9 11 
                 [compojure "1.1.6"]
10
11 12 
                 [hiccup "1.0.4"]]
12 13 
  :source-paths ["."]
13 14 
  :plugins [[lein-ring "0.8.8"]