git.iko.soy/elk
on abe95cc help sign in
elk/libraries/Graphics/Input.elm
119 lines 5.2 kB history raw
2module Graphics.Input where
4import Signal (lift)
5import Native.Graphics.Input as N
7id x = x
9-- Create a group of buttons.
10--
11-- * The first argument is the default value of the `events` signal.
12-- * The `events` signal represents all of the activity in this group
13-- of buttons.
14-- * The `button` function creates a button
15-- with the given name, like “Submit” or “Cancel”.
16-- The `a` value is sent to `events` whenever the button is pressed.
17buttons : a -> { events : Signal a,
18 button : a -> String -> Element }
20-- Create a button with a given label. The result is an `Element` and
21-- a signal of units. This signal triggers whenever the button is pressed.
22button : String -> (Element, Signal ())
23button txt =
24 let pool = N.buttons ()
25 in (pool.button () txt, pool.events)
27-- Create a group of custom buttons.
28--
29-- * The first argument is the default value of the `events` signal.
30-- * The `events` signal represents all of the activity in this group
31-- of custom buttons.
32-- * The `customButton` function creates a button with three different visual
33-- states, one for up, hovering, and down. The resulting button has dimensions
34-- large enough to fit all three possible `Elements`.
35-- The `a` value is sent to `events` whenever the button is pressed.
36customButtons : a -> { events : Signal a,
37 customButton : a -> Element -> Element -> Element -> Element }
39-- Create a button with custom states for up, hovering, and down
40-- (given in that order). The result is an `Element` and
41-- a signal of units. This signal triggers whenever the button is pressed.
42customButton : Element -> Element -> Element -> (Element, Signal ())
43customButton up hover down =
44 let pool = N.customButtons ()
45 in (pool.button () up hover down, pool.events)
47-- Create a group of checkboxes.
48--
49-- * The first argument is the default value of the `events` signal.
50-- * The `events` signal represents all of the activity in this group
51-- of checkboxes.
52-- * The `checkbox` function creates a
53-- checkbox with a given state. The `(Bool -> a)` function is used
54-- when the checkbox is modified. It takes the new state and turns
55-- it into a value that can be sent to `events`. For example, this
56-- lets you add an ID to distinguish between checkboxes.
57checkboxes : a -> { events : Signal a,
58 checkbox : (Bool -> a) -> Bool -> Element }
60-- Create a checkbox with a given start state. Unlike `button`, this result
61-- is a *signal* of elements. That is because a checkbox has state that
62-- updates based on user input.
63-- The boolean signal represents the current state of the checkbox.
64checkbox : Bool -> (Signal Element, Signal Bool)
65checkbox b =
66 let cbs = N.checkboxes b
67 in (lift (cbs.box id) cbs.events, cbs.events)
69-- Represents the current state of a text field. The `string` represents the
70-- characters filling the text field. The `selectionStart` and `selectionEnd`
71-- values represent what the user has selected with their mouse or keyboard.
72-- For example:
73--
74-- { string="She sells sea shells", selectionStart=3, selectionEnd=0 }
75--
76-- This means the user highlighted the substring `"She"` backwards.
77type FieldState = { string:String, selectionStart:Int, selectionEnd:Int }
79-- Create a group of text input fields.
80--
81-- * The first argument is the default value of the `events` signal.
82-- * The `events` signal represents all of the activity in this group
83-- of text fields.
84-- * The `field` function creates a
85-- field with the given ghost text and initial field state.
86-- When the field is modified, the `(FieldState -> a)` function
87-- takes the new state and turns
88-- it into a value that can be sent to `events`. For example, this
89-- lets you add an ID to distinguish between input fields.
90fields : a -> { events : Signal a,
91 field : (FieldState -> a) -> String -> FieldState -> Element }
93-- The empty field state:
94--
95-- { string="", selectionStart=0, selectionEnd=0 }
96emptyFieldState : FieldState
97emptyFieldState = { string="", selectionStart=0, selectionEnd=0 }
99-- Create a field with the given default text. The output is an element that
100-- updates to match the user input and a signal of strings representing the
101-- content of the field.
102field : String -> (Signal Element, Signal String)
103field placeHolder =
104 let tfs = N.fields emptyFieldState
105 in (lift (tfs.field id placeHolder) tfs.events, lift .string tfs.events)
107-- Same as `field` but the UI element blocks out each characters.
108password : String -> (Signal Element, Signal String)
109password placeHolder =
110 let tfs = N.passwords emptyFieldState
111 in (lift (tfs.field id placeHolder) tfs.events, lift .string tfs.events)
113-- Same as `field` but it adds an annotation that this field is for email
114-- addresses. This is helpful for auto-complete and for mobile users who may
115-- get a custom keyboard with an `@` and `.com` button.
116email : String -> (Signal Element, Signal String)
117email placeHolder =
118 let tfs = N.emails emptyFieldState
119 in (lift (tfs.field id placeHolder) tfs.events, lift .string tfs.events)