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