Fix js events not available.

reagent-reitit-demo/resources/public/documents/reagent-reitit.org

@@ -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"
+        [:input.db {:type "text"
-                 :default-value (str (:test @form-data))
+                    :default-value (str (:test @form-data))
-                 :name "address-line-1"
+                    :name "address-line-1"
-                 :on-change form-change :placeholder "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.db {: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.db {:name "address-line-3"  :on-change form-change :placeholder "Address Line 3"}]
-        [:input {:name "city" :on-change form-change :placeholder "City"}]
+        [:input.db {:name "city" :on-change form-change :placeholder "City"}]
-        [:input {:name "postcode" :on-change form-change :placeholder "Postcode / Zipcode"}]]])))
+        [:input.db {: "postcode" :on-change form-change :placeholder "Postcode / Zipcode"}]]])))
 
 [:div [my-address-form]]
 #+END_SRC

reagent-reitit-demo/resources/public/index.html

@@ -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) -->

reagent-reitit-demo/src/clojure_demo/core.cljs

@@ -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)))]