on a3801ac help sign in
138 lines 5.9 kB history raw
2module Graphics.Input where
4import Signal (lift,dropRepeats)
5import Native.Graphics.Input as N
6import List
8id x = x
10-- Create a group of buttons.
11--
12-- * The first argument is the default value of the `events` signal.
13-- * The `events` signal represents all of the activity in this group
14-- of buttons.
15-- * The `button` function creates a button
16-- with the given name, like “Submit” or “Cancel”.
17-- The `a` value is sent to `events` whenever the button is pressed.
18buttons : a -> { events : Signal a,
19 button : a -> String -> Element }
21-- Create a button with a given label. The result is an `Element` and
22-- a signal of units. This signal triggers whenever the button is pressed.
23button : String -> (Element, Signal ())
24button txt =
25 let pool = N.buttons ()
26 in (pool.button () txt, pool.events)
28-- Create a group of custom buttons.
29--
30-- * The first argument is the default value of the `events` signal.
31-- * The `events` signal represents all of the activity in this group
32-- of custom buttons.
33-- * The `customButton` function creates a button with three different visual
34-- states, one for up, hovering, and down. The resulting button has dimensions
35-- large enough to fit all three possible `Elements`.
36-- The `a` value is sent to `events` whenever the button is pressed.
37customButtons : a -> { events : Signal a,
38 customButton : a -> Element -> Element -> Element -> Element }
40-- Create a button with custom states for up, hovering, and down
41-- (given in that order). The result is an `Element` and
42-- a signal of units. This signal triggers whenever the button is pressed.
43customButton : Element -> Element -> Element -> (Element, Signal ())
44customButton up hover down =
45 let pool = N.customButtons ()
46 in (pool.customButton () up hover down, pool.events)
48-- Create a group of checkboxes.
49--
50-- * The first argument is the default value of the `events` signal.
51-- * The `events` signal represents all of the activity in this group
52-- of checkboxes.
53-- * The `checkbox` function creates a
54-- checkbox with a given state. The `(Bool -> a)` function is used
55-- when the checkbox is modified. It takes the new state and turns
56-- it into a value that can be sent to `events`. For example, this
57-- lets you add an ID to distinguish between checkboxes.
58checkboxes : a -> { events : Signal a,
59 checkbox : (Bool -> a) -> Bool -> Element }
61-- Create a checkbox with a given start state. Unlike `button`, this result
62-- is a *signal* of elements. That is because a checkbox has state that
63-- updates based on user input.
64-- The boolean signal represents the current state of the checkbox.
65checkbox : Bool -> (Signal Element, Signal Bool)
66checkbox b =
67 let cbs = N.checkboxes b
68 in (lift (cbs.box id) cbs.events, cbs.events)
70-- Represents the current state of a text field. The `string` represents the
71-- characters filling the text field. The `selectionStart` and `selectionEnd`
72-- values represent what the user has selected with their mouse or keyboard.
73-- For example:
74--
75-- { string="She sells sea shells", selectionStart=3, selectionEnd=0 }
76--
77-- This means the user highlighted the substring `"She"` backwards.
78type FieldState = { string:String, selectionStart:Int, selectionEnd:Int }
80-- Create a group of text input fields.
81--
82-- * The first argument is the default value of the `events` signal.
83-- * The `events` signal represents all of the activity in this group
84-- of text fields.
85-- * The `field` function creates a
86-- field with the given ghost text and initial field state.
87-- When the field is modified, the `(FieldState -> a)` function
88-- takes the new state and turns
89-- it into a value that can be sent to `events`. For example, this
90-- lets you add an ID to distinguish between input fields.
91fields : a -> { events : Signal a,
92 field : (FieldState -> a) -> String -> FieldState -> Element }
94-- The empty field state:
95--
96-- { string="", selectionStart=0, selectionEnd=0 }
97emptyFieldState : FieldState
98emptyFieldState = { string="", selectionStart=0, selectionEnd=0 }
100-- Create a field with the given default text. The output is an element that
101-- updates to match the user input and a signal of strings representing the
102-- content of the field.
103field : String -> (Signal Element, Signal String)
104field placeHolder =
105 let tfs = N.fields emptyFieldState
106 changes = dropRepeats tfs.events
107 in (lift (tfs.field id placeHolder) changes,
108 dropRepeats (lift .string changes))
110-- Same as `field` but the UI element blocks out each characters.
111password : String -> (Signal Element, Signal String)
112password placeHolder =
113 let tfs = N.passwords emptyFieldState
114 changes = dropRepeats tfs.events
115 in (lift (tfs.field id placeHolder) changes,
116 dropRepeats (lift .string changes))
118-- Same as `field` but it adds an annotation that this field is for email
119-- addresses. This is helpful for auto-complete and for mobile users who may
120-- get a custom keyboard with an `@` and `.com` button.
121email : String -> (Signal Element, Signal String)
122email placeHolder =
123 let tfs = N.emails emptyFieldState
124 changes = dropRepeats tfs.events
125 in (lift (tfs.field id placeHolder) changes,
126 dropRepeats (lift .string changes))
128-- Create a drop-down menu. When the user selects a string,
129-- the current state of the drop-down is set to the associated
130-- value. This lets you avoid manually mapping the string onto
131-- functions and values.
132dropDown : [(String,a)] -> (Signal Element, Signal a)
134-- Create a drop-down menu for selecting strings. The resulting
135-- signal of strings represents the string that is currently selected.
136stringDropDown : [String] -> (Signal Element, Signal String)
137stringDropDown strs =
138 N.dropDown (List.map (\s -> (s,s)) strs)