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