git.iko.soy/elk
on master help sign in
Add new examples showcasing JavaScript interaction.
a49a51aevancz
Examples/elm-js/ChangeTitle/ChangeTitle.elmnew file+14
compare with master
unifiedsplit
@@ -0,0 +1,14 @@
1+
2+module ChangeTitle where
3+
4+import Foreign.JavaScript
5+import Signal.Input
6+
7+
8+foreign export jsevent "changeTitle"
9+ title :: Signal JSString
10+
11+(field, title) = let (f,t) = textField "" in
12+ (f, lift castStringToJSString t)
13+
14+main = plainText "Change this page's title to: " `beside` field
Examples/elm-js/ChangeTitle/ChangeTitleHelp.jsnew file+3
@@ -0,0 +1,3 @@
1+document.addEventListener('changeTitle', function(e) {
2+ document.title = e.value;
3+ });
Examples/elm-js/ChangeTitle/README.txtnew file+7
@@ -0,0 +1,7 @@
1+
2+To compile this example yourself use:
3+
4+ elm --import-js="ChangeTitleHelp.js" ChangeTitle.elm
5+
6+This compiles the Elm file and includes the necessary JavaScript code.
7+It produces a self-contained HTML file.
Examples/elm-js/ConsoleLog/Log.elmnew file+17
@@ -0,0 +1,17 @@
1+
2+module Log where
3+
4+import Foreign.JavaScript
5+import Signal.Input
6+
7+
8+foreign export jsevent "logMessage"
9+ messages :: Signal JSString
10+
11+(field, message) = textField ""
12+(butn , pressed) = button " Log "
13+
14+messages =
15+ lift castStringToJSString $ keepWhen pressed "" message
16+
17+main = field `beside` butn
Examples/elm-js/ConsoleLog/LogHelp.jsnew file+3
@@ -0,0 +1,3 @@
1+document.addEventListener('logMessage', function(e) {
2+ console.log(e.value);
3+ });
Examples/elm-js/ConsoleLog/README.txtnew file+16
@@ -0,0 +1,16 @@
1+
2+To compile this example yourself use:
3+
4+ elm --import-js="LogHelp.js" Log.elm
5+
6+This compiles the Elm file and includes the necessary JavaScript code.
7+It produces a self-contained HTML file.
8+
9+
10+You can see the logged messages in the developer console of your browser.
11+The keyboard shortcut is F12 in many browsers.
12+
13+
14+Note: Not all browsers like reading the elm-runtime-x.y.z.js file from
15+an absolute path, so you may have to specify a relative path with
16+the --runtime flag (e.g. --runtime="../../../elm/elm-runtime-0.3.5.js").
Examples/elm-js/Form/Form.elmnew file+68
@@ -0,0 +1,68 @@
1+
2+module Form where
3+
4+import Data.Maybe (mapMaybe)
5+import Foreign.JavaScript
6+import Signal.Input
7+import Signal.Window as Win
8+
9+foreign export jsevent "redirect"
10+ redirectTo :: Signal JSString
11+
12+
13+-- Helpers
14+
15+isEmpty xs = case xs of { [] -> True ; _ -> False }
16+
17+getErrors first last email remail =
18+ mapMaybe (\(err,msg) -> if err then Just msg else Nothing)
19+ [ (isEmpty first , "First name required.")
20+ , (isEmpty last , "Last name required.")
21+ , (isEmpty email , "Must enter your email address.")
22+ , (isEmpty remail , "Must re-enter your email address.")
23+ , (email /= remail, "Email addresses do not match.")
24+ ]
25+
26+url first last email =
27+ "login?first=" ++ first ++ "&last=" ++ last ++ "&email="++ email
28+
29+
30+-- Signals
31+
32+(firstBox , first) = textField "First Name"
33+(lastBox , last) = textField "Last Name"
34+(emailBox , email) = textField "Your Email"
35+(remailBox, remail) = textField "Re-enter Email"
36+(butn , press) = button "Submit"
37+
38+pressCount = foldp (\p c -> if p then c+1 else c) 0 press
39+errors = lift4 getErrors first last email remail
40+sendable = lift2 (&&) press (lift isEmpty errors)
41+
42+redirectTo = lift castStringToJSString $
43+ keepWhen sendable "" (lift3 url first last email)
44+
45+
46+-- Display
47+
48+field txt fld =
49+ width 400 . flow right $
50+ [ size 120 30 . box 6 $ plainText txt
51+ , size 200 30 . box 5 $ size 180 20 fld
52+ ]
53+
54+showErrors presses errs =
55+ if presses == 0 || isEmpty errs then rectangle 10 10 else
56+ flow down $ map (text . Text.color red . toText) errs
57+
58+form presses errs (w,h) =
59+ size w h . box 5 . color (rgb 230 230 230) . flow down $
60+ [ field "First Name:" firstBox
61+ , field "Last Name:" lastBox
62+ , field "Your Email:" emailBox
63+ , field "Re-enter Email:" remailBox
64+ , showErrors presses errs
65+ , size 310 40 . box 6 $ size 60 30 butn
66+ ]
67+
68+main = lift3 form pressCount errors Win.dimensions
Examples/elm-js/Form/FormHelp.jsnew file+3
@@ -0,0 +1,3 @@
1+document.addEventListener('redirect', function(e) {
2+ if (e.value.length > 0) { window.location = e.value; }
3+ });
Examples/elm-js/Form/README.txtnew file+16
@@ -0,0 +1,16 @@
1+
2+To compile this example yourself use:
3+
4+ elm --import-js="LogHelp.js" Log.elm
5+
6+This compiles the Elm file and includes the necessary JavaScript code.
7+It produces a self-contained HTML file.
8+
9+
10+You can see the logged messages in the developer console of your browser.
11+The keyboard shortcut is F12 in many browsers.
12+
13+
14+Note: Not all browsers like reading the elm-runtime-x.y.z.js file from
15+an absolute path, so you may have to specify a relative path with
16+the --runtime flag (e.g. --runtime="../../../elm/elm-runtime-0.3.5.js").
Examples/elm-js/Redirect/README.txtnew file+16
@@ -0,0 +1,16 @@
1+
2+To compile this example yourself use:
3+
4+ elm --import-js="LogHelp.js" Log.elm
5+
6+This compiles the Elm file and includes the necessary JavaScript code.
7+It produces a self-contained HTML file.
8+
9+
10+You can see the logged messages in the developer console of your browser.
11+The keyboard shortcut is F12 in many browsers.
12+
13+
14+Note: Not all browsers like reading the elm-runtime-x.y.z.js file from
15+an absolute path, so you may have to specify a relative path with
16+the --runtime flag (e.g. --runtime="../../../elm/elm-runtime-0.3.5.js").
Examples/elm-js/Redirect/Redirect.elmnew file+17
@@ -0,0 +1,17 @@
1+
2+module Redirect where
3+
4+import Foreign.JavaScript
5+import Signal.Input
6+
7+
8+foreign export jsevent "redirect"
9+ redirectTo :: Signal JSString
10+
11+(butn, pressed) = button " Redirect to elm-lang.org "
12+
13+redirectTo =
14+ lift castStringToJSString $
15+ keepWhen pressed "" (constant "http://elm-lang.org/")
16+
17+main = butn
Examples/elm-js/Redirect/RedirectHelp.jsnew file+3
@@ -0,0 +1,3 @@
1+document.addEventListener('redirect', function(e) {
2+ if (e.value.length > 0) { window.location = e.value; }
3+ });