simon/scittle
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

cljs-ajax example

Browse source
This commit is contained in:
Michiel Borkent 2021-06-11 14:31:57 +02:00
parent f5b014864f
commit f10870268e
3 changed files with 51 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
resources/public/html/cljs-ajax.html Normal file
View file

@ -0,0 +1,23 @@
<html>
<head>
<script src="https://borkdude.github.io/scittle/js/scittle.js" type="application/javascript"></script>
<script src="https://borkdude.github.io/scittle/js/scittle.cljs-ajax.js" type="application/javascript"></script>
<script type="application/x-scittle">
(require '[ajax.core :refer [GET]])
(defn handler [response]
(js/alert (str response)))
(defn make-request []
(GET "html/cljs-ajax.html" {:handler handler}))
;; export function to use from JavaScript:
(set! (.-make_request js/window) make-request)
</script>
</head>
<body>
<button onclick="make_request()">
Click me!
</button>
</body>
</html>

25
resources/public/index.html
View file

@ -6,6 +6,7 @@
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="js/scittle.reagent.js" type="application/javascript"></script> <script src="js/scittle.reagent.js" type="application/javascript"></script>
<script src="js/scittle.cljs-ajax.js" type="application/javascript"></script>
<script type="application/x-scittle"> <script type="application/x-scittle">
(defn my-alert [] (defn my-alert []
(js/alert "You clicked!")) (js/alert "You clicked!"))
@ -25,6 +26,17 @@
(rdom/render [my-component] (.getElementById js/document "app")) (rdom/render [my-component] (.getElementById js/document "app"))
(require '[ajax.core :refer [GET]])
(defn handler [response]
(js/alert (str response)))
(defn make-request []
(GET "html/cljs-ajax.html" {:handler handler}))
;; export function to use from JavaScript:
(set! (.-make_request js/window) make-request)
(def code-tags (.querySelectorAll js/document "code[data-type='scittle']")) (def code-tags (.querySelectorAll js/document "code[data-type='scittle']"))
(require '[goog.object :as gobject]) (require '[goog.object :as gobject])
@ -38,6 +50,7 @@
(set! (.-innerText code) response) (set! (.-innerText code) response)
(.highlightElement js/hljs code)))) (.highlightElement js/hljs code))))
(.send req))) (.send req)))
</script> </script>
<script src="cljs/script.cljs" type="application/x-scittle"></script> <script src="cljs/script.cljs" type="application/x-scittle"></script>
@ -98,6 +111,18 @@
<div id="app"></div> <div id="app"></div>
<a name="cljs-ajax"></a>
<h2><a href="#cljs-ajax">Cljs-ajax plugin</a></h2>
To enable <a href="https://github.com/JulianBirch/cljs-ajax">cljs-ajax</a>,
in addition to <tt>scittle.js</tt>, you need to include <tt>scittle.cljs-ajax.js</tt>:
<pre><code data-type="scittle" data-src="html/cljs-ajax.html" class="html"></code></pre>
<button onclick="make_request()">
Click me!
</button>
<a name="examples"></a> <a name="examples"></a>
<h2><a href="#examples">Examples</a></h2> <h2><a href="#examples">Examples</a></h2>
<ul> <ul>

5
script/release.clj
View file

@ -21,8 +21,9 @@
(def html-source-dir (fs/file "resources" "public" "html")) (def html-source-dir (fs/file "resources" "public" "html"))
(def html-target-dir (fs/file "gh-pages" "html")) (def html-target-dir (fs/file "gh-pages" "html"))
(fs/create-dirs html-target-dir) (fs/create-dirs html-target-dir)
(doseq [html ["export.html" "reagent.html"]] (doseq [html ["export.html" "reagent.html" "cljs-ajax.html"]]
(fs/copy (fs/file html-source-dir html) html-target-dir)) (fs/copy (fs/file html-source-dir html) html-target-dir
{:replace-existing true}))
(def style-source-dir (fs/file "resources" "public" "css")) (def style-source-dir (fs/file "resources" "public" "css"))
(def style-target-dir (fs/file "gh-pages" "css")) (def style-target-dir (fs/file "gh-pages" "css"))