oly
/
clojure-demos
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix js events not available.
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Oly 2023-06-21 16:03:46 +01:00
parent aa89814afe
commit 7e19e7c20b
3 changed files with 14 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
reagent-reitit-demo/resources/public/documents/reagent-reitit.org
View File

@ -123,7 +123,7 @@ In the example below the function just returns some hiccup with the parameters i
** Form 2 components
Form two components are used so we can track local state of a component, this is appropriate any time we need to react to change forms and user click event's being simple examples.
*** Example Click counter component
#+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs
(defn my-component [title starting-value]
(let [local-state (reagent/atom starting-value)]
@ -137,15 +137,9 @@ Form two components are used so we can track local state of a component, this is
[my-component "Clickable component" 1]
#+END_SRC
*** Example address capture component
#+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs
(defn update-form-data [form-data ^js event]
(prn "test here")
(prn @form-data)
;;(prn (.dir js/console event))
(prn (-> event))
(prn (-> event .-currentTarget))
(prn (-> event .-target ))
(prn (-> event .-target .-value))
(swap! form-data assoc
(keyword (-> event .-target .-name))
(-> event .-target .-value)))
@ -157,14 +151,14 @@ Form two components are used so we can track local state of a component, this is
[:div
(str @form-data)
[:form {:on-submit prn}
[:input {:type "text"
:default-value (str (:test @form-data))
:name "address-line-1"
:on-change form-change :placeholder "Address Line 1"}]
[:input {:type "text" :name "address-line-2" :on-change form-change :placeholder "Address Line 2"}]
[:input {:name "address-line-3" :on-change form-change :placeholder "Address Line 3"}]
[:input {:name "city" :on-change form-change :placeholder "City"}]
[:input {:name "postcode" :on-change form-change :placeholder "Postcode / Zipcode"}]]])))
[:input.db {:type "text"
:default-value (str (:test @form-data))
:name "address-line-1"
:on-change form-change :placeholder "Address Line 1"}]
[:input.db {:type "text" :name "address-line-2" :on-change form-change :placeholder "Address Line 2"}]
[:input.db {:name "address-line-3" :on-change form-change :placeholder "Address Line 3"}]
[:input.db {:name "city" :on-change form-change :placeholder "City"}]
[:input.db {: "postcode" :on-change form-change :placeholder "Postcode / Zipcode"}]]])))
[:div [my-address-form]]
#+END_SRC

6
reagent-reitit-demo/resources/public/index.html
View File

@ -9,7 +9,6 @@
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css">
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/FarhadG/code-mirror-themes/master/themes/rdark.css">
<style>
@ -77,11 +76,6 @@
}
#notification-container {
position: fixed;
z-index: 999999;
top: 12px;
right: 12px;
</style>
<meta name="robots" content="noindex">
<!-- Google tag (gtag.js) -->

35
reagent-reitit-demo/src/clojure_demo/core.cljs
View File

@ -42,7 +42,8 @@
(def sqlh-ns (sci/create-ns 'honey.sql.helpers nil))
(def sci-ctx
(sci/init
{:namespaces
{:classes {'js js/globalThis :allow :all}
:namespaces
{'reagent sci-reagent/reagent-namespace
;'h {'html (sci/copy-var h/html hc-ns)}
'd sci-datascript/core-namespace
@ -103,7 +104,8 @@
(first selected-text)
(.-doc (.-state view-update)))]
(reset! evaled-result (sci/eval-string* sci-ctx
(.toString eval-code)))
(.toString eval-code)
))
(prn "updated delayed"))) 1000)))))
start-state
(.create EditorState
@ -315,34 +317,6 @@
:code (filter (fn filter-code [tag] (org-code (first tag))) dsl)
:body (filter (fn filter-body [tag] (body (first tag))) dsl)})
(defn update-form-data [form-data ^js event]
(prn "test here")
(prn @form-data)
;;(prn (.dir js/console event))
(prn (-> event))
(prn (-> event .-currentTarget))
(prn (-> event .-target))
(prn (-> event .-target .-value))
(swap! form-data assoc
(keyword (-> event .-target .-name))
(-> event .-target .-value)))
(defn my-address-form []
(let [form-data (reagent/atom {})
form-change (partial update-form-data form-data)]
(fn []
[:div
(str @form-data)
[:form {:on-submit prn}
[:input {:type "text"
:default-value (str (:test @form-data))
:name "address-line-1"
:on-change form-change :placeholder "Address Line 1"}]
[:input {:type "text" :name "address-line-2" :on-change form-change :placeholder "Address Line 2"}]
[:input {:name "address-line-3" :on-change form-change :placeholder "Address Line 3"}]
[:input {:name "city" :on-change form-change :placeholder "City"}]
[:input {:name "postcode" :on-change form-change :placeholder "Postcode / Zipcode"}]]])))
;; form two component render demo
;;(h/org->split (parse document1))
(defn demo-page [route]
@ -360,7 +334,6 @@
(fn [route]
(if @content
[:main.mt4.mw7.center.avenir
[my-address-form]
[:h1.f3.f2-ns (:content (last (first (:header @content))))]
[:div.mw7.center.avenir
(into [:ol] (org->replacements theme-toc (:toc @content)))]