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