git.iko.soy/elk
on 40ea6df help sign in
elk/libraries/Graphics/Input.elm
160 lines 6.8 kB history raw
2module Graphics.Input where
4import Basics (String)
5import Signal (Signal,lift,dropRepeats)
6import Native.Graphics.Input
7import List
8import Graphics.Element (Element)
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.Graphics.Input.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 = 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.Graphics.Input.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 = 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.Graphics.Input.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 = checkboxes b
75 in (lift (cbs.checkbox id) cbs.events, cbs.events)
77-- Detect when the mouse is hovering over some elements. This
78-- allows you to create and destroy elements dynamically and still
79-- detect hover information.
80hoverables : a -> { events : Signal a,
81 hoverable : (Bool -> a) -> Element -> Element }
82hoverables = Native.Graphics.Input.hoverables
84-- Detect when the mouse is hovering over a specifici `Element`.
85hoverable : Element -> (Element, Signal Bool)
86hoverable elem =
87 let pool = hoverables False
88 in (pool.hoverable id elem, pool.events)
90-- Represents the current state of a text field. The `string` represents the
91-- characters filling the text field. The `selectionStart` and `selectionEnd`
92-- values represent what the user has selected with their mouse or keyboard.
93-- For example:
94--
95-- { string="She sells sea shells", selectionStart=3, selectionEnd=0 }
96--
97-- This means the user highlighted the substring `"She"` backwards.
98type FieldState = { string:String, selectionStart:Int, selectionEnd:Int }
100-- Create a group of text input fields.
101--
102-- * The first argument is the default value of the `events` signal.
103-- * The `events` signal represents all of the activity in this group
104-- of text fields.
105-- * The `field` function creates a
106-- field with the given ghost text and initial field state.
107-- When the field is modified, the `(FieldState -> a)` function
108-- takes the new state and turns
109-- it into a value that can be sent to `events`. For example, this
110-- lets you add an ID to distinguish between input fields.
111fields : a -> { events : Signal a,
112 field : (FieldState -> a) -> String -> FieldState -> Element }
113fields = Native.Graphics.Input.fields
115-- The empty field state:
116--
117-- { string="", selectionStart=0, selectionEnd=0 }
118emptyFieldState : FieldState
119emptyFieldState = { string="", selectionStart=0, selectionEnd=0 }
121-- Create a field with the given default text. The output is an element that
122-- updates to match the user input and a signal of strings representing the
123-- content of the field.
124field : String -> (Signal Element, Signal String)
125field placeHolder =
126 let tfs = fields emptyFieldState
127 changes = dropRepeats tfs.events
128 in (lift (tfs.field id placeHolder) changes,
129 dropRepeats (lift .string changes))
131-- Same as `field` but the UI element blocks out each characters.
132password : String -> (Signal Element, Signal String)
133password placeHolder =
134 let tfs = Native.Graphics.Input.passwords emptyFieldState
135 changes = dropRepeats tfs.events
136 in (lift (tfs.field id placeHolder) changes,
137 dropRepeats (lift .string changes))
139-- Same as `field` but it adds an annotation that this field is for email
140-- addresses. This is helpful for auto-complete and for mobile users who may
141-- get a custom keyboard with an `@` and `.com` button.
142email : String -> (Signal Element, Signal String)
143email placeHolder =
144 let tfs = Native.Graphics.Input.emails emptyFieldState
145 changes = dropRepeats tfs.events
146 in (lift (tfs.field id placeHolder) changes,
147 dropRepeats (lift .string changes))
149-- Create a drop-down menu. When the user selects a string,
150-- the current state of the drop-down is set to the associated
151-- value. This lets you avoid manually mapping the string onto
152-- functions and values.
153dropDown : [(String,a)] -> (Signal Element, Signal a)
154dropDown = Native.Graphics.Input.dropDown
156-- Create a drop-down menu for selecting strings. The resulting
157-- signal of strings represents the string that is currently selected.
158stringDropDown : [String] -> (Signal Element, Signal String)
159stringDropDown strs =
160 dropDown (List.map (\s -> (s,s)) strs)