git.iko.soy/elk
on master help sign in
Merge branch 'input' into dev
ea28a87Evan Czaplicki
changelog.txt+9−3
compare with master
unifiedsplit
@@ -1,14 +1,20 @@
1
1
2## next
2## next
3
3
4+Breaking Changes:
5+
6+ * Overhaul Graphics.Input library to make it easier to understand and use
4 * Change syntax for "import open List" to "import List (..)"
7 * Change syntax for "import open List" to "import List (..)"
5 * Support Trampolining (thanks to Max New and Tim Hobbs)
8 * Support Trampolining (thanks to Max New and Tim Hobbs)
6− * Drastically improved performance on markdown parsing (thanks to @Dandandan)
7 * Improved JSON format for types generated by elm-doc
9 * Improved JSON format for types generated by elm-doc
10+ * Remove problematic Mouse.isClicked signal
8 * Revise the semantics of keepWhen and dropWhen to only update when
11 * Revise the semantics of keepWhen and dropWhen to only update when
9− * the filtered signal changes (thanks Max New and Janis Voigtländer)
12+ the filtered signal changes (thanks Max New and Janis Voigtländer)
13+
14+Improvements:
15+
16+ * Drastically improved performance on markdown parsing (thanks to @Dandandan)
10 * Add Date.fromTime function
17 * Add Date.fromTime function
11− * Remove problematic Mouse.isClicked signal
12 * Fix serious bugs in Bitwise library
18 * Fix serious bugs in Bitwise library
13 * Fix bug in exporting Maybe values through ports
19 * Fix bug in exporting Maybe values through ports
14
20
libraries/Graphics/Element.elm+5−2
@@ -53,7 +53,8 @@ type Properties = {
53 color : Maybe Color,
53 color : Maybe Color,
54 href : JSString,
54 href : JSString,
55 tag : JSString,
55 tag : JSString,
56− hover : ()
56+ hover : (),
57+ click : ()
57 }
58 }
58
59
59type Element = { props : Properties, element : ElementPrim }
60type Element = { props : Properties, element : ElementPrim }
@@ -128,7 +129,9 @@ link href e = let p = e.props in
128
129
129emptyStr = JS.fromString ""
130emptyStr = JS.fromString ""
130newElement w h e =
131newElement w h e =
131− { props = Properties (Native.Utils.guid ()) w h 1 Nothing emptyStr emptyStr (), element = e }
132+ { props = Properties (Native.Utils.guid ()) w h 1 Nothing emptyStr emptyStr () ()
133+ , element = e
134+ }
132
135
133data ElementPrim
136data ElementPrim
134 = Image ImageStyle Int Int JSString
137 = Image ImageStyle Int Int JSString
libraries/Graphics/Input.elm+185−156
@@ -1,199 +1,228 @@
1module Graphics.Input where
1module Graphics.Input where
2−
3{-| This module is for creating standard input widgets such as buttons and
2{-| This module is for creating standard input widgets such as buttons and
4−text boxes. In general, functions in this library return a signal representing
3+text fields. All functions in this library follow a general pattern in which
5−events from the user.
4+you create an `Input` that many elements can report to:
5+
6+```haskell
7+clicks : Input ()
8+clicks = input ()
6
9
7−The simplest inputs are *one-way inputs*, meaning the user can update
10+clickableYogi : Element
8−them, but the programmer cannot. If you need to update an input from
11+clickableYogi = clickable clicks.handle () (image 40 40 "/yogi.jpg")
9−within the program you want the slightly more complex *two-way inputs*.
12+```
10−This document will always show the one-way inputs first, *then* the
11−two-way inputs.
12
13
13−# Buttons
14+Whenever the user clicks on the resulting `clickableYogi` element, it sends an
14−@docs button, customButton, buttons, customButtons
15+update to the `clicks` input. You will see this pattern again and again in
16+examples in this library, so just read on to get a better idea of how it works!
15
17
16−# Fields
18+# Creating Inputs
17−@docs field, password, email, fields, FieldState, emptyFieldState
19+@docs Input, input
18
20
19−# Checkboxes
21+# Basic Input Elements
22+Text fields come later.
20−@docs checkbox, checkboxes
23+@docs button, customButton, checkbox, dropDown
21
24
22−# Drop Downs
25+# Clicks and Hovers
23−@docs stringDropDown, dropDown
26+@docs clickable, hoverable
24
27
25−# Mouse Hover
28+# Text Fields
26−@docs hoverable, hoverables
29+@docs field, password, email, noContent, FieldContent, Selection, Direction
27-}
30-}
28
31
29−import Basics (String)
30−import Signal (Signal,lift,dropRepeats)
32+import Signal (Signal)
31−import Native.Graphics.Input
32−import List
33import Graphics.Element (Element)
33import Graphics.Element (Element)
34−import Maybe (Maybe)
34+import Native.Graphics.Input
35−import JavaScript (JSString)
36
35
37−id x = x
36+{-| This is the key abstraction of this library. An `Input` is a record
37+of two fields:
38
38
39−{-| Create a group of buttons.
39+ 1. `signal` — all values coming to this input from “the world”
40+ 2. `handle` — a way to refer to this particular input and send it values
40
41
41− * The first argument is the default value of the `events` signal.
42+This will make more sense as you see more examples.
42− * The `events` signal represents all of the activity in this group
43− of buttons.
44− * The `button` function creates a button
45− with the given name, like “Submit” or “Cancel”.
46− The `a` value is sent to `events` whenever the button is pressed.
47-}
43-}
48−buttons : a -> { events : Signal a,
44+type Input a = { signal : Signal a, handle : Handle a }
49− button : a -> String -> Element }
45+
50−buttons = Native.Graphics.Input.buttons
46+data Handle a = Handle
47+
48+{-| Create a new `Input`. You just give the initial value for the
49+input’s `signal`.
51
50
52−{-| Create a button with a given label. The result is an `Element` and
51+Note for Advanced Users: creating an `Input` is an inherently imperative
53−a signal of units. This signal triggers whenever the button is pressed.
52+action, so this is one of very few impure functions in Elm. That means
53+`(input ())` and `(input ())` are actually two different inputs with different
54+signals and handles. By design, Elm’s impure functions can only be useful
55+as you build your signal graph at startup, so Elm is still pure at runtime.
54-}
56-}
55−button : String -> (Element, Signal ())
57+input : a -> Input a
56−button txt =
58+input = Native.Graphics.Input.input
57− let pool = buttons ()
59+
58− in (pool.button () txt, pool.events)
60+{-| Create a standard button. The following example begins making a basic
59−
61+calculator:
60−{-| Create a group of custom buttons.
62+
61−
63+ data Keys = Number Int | Plus | Minus | Clear
62− * The first argument is the default value of the `events` signal.
64+
63− * The `events` signal represents all of the activity in this group
65+ keys : Input Keys
64− of custom buttons.
66+ keys = input Clear
65− * The `customButton` function creates a button with three different visual
67+
66− states, one for up, hovering, and down. The resulting button has dimensions
68+ calculator : Element
67− large enough to fit all three possible `Elements`.
69+ calculator =
68− The `a` value is sent to `events` whenever the button is pressed.
70+ flow right [ button keys.handle (Number 1) "1"
71+ , button keys.handle (Number 2) "2"
72+ , button keys.handle Plus "+"
73+ ]
74+
75+If the user presses the "+" button, `keys.signal` will update to `Plus`. If the
76+users presses "2", `keys.signal` will update to `(Number 2)`.
69-}
77-}
70−customButtons : a -> { events : Signal a,
78+button : Handle a -> a -> String -> Element
71− customButton : a -> Element -> Element -> Element -> Element }
72−customButtons = Native.Graphics.Input.customButtons
79+button = Native.Graphics.Input.button
73
80
74−{-| Create a button with custom states for up, hovering, and down
81+{-| Same as `button` but lets you customize buttons to look however you want.
75−(given in that order). The result is an `Element` and a signal of
82+
76−units. This signal triggers whenever the button is pressed.
83+ click : Input ()
84+ click = input ()
85+
86+ prettyButton : Element
87+ prettyButton =
88+ customButton click.handle
89+ (image 100 40 "/button_up.jpg")
90+ (image 100 40 "/button_hover.jpg")
91+ (image 100 40 "/button_down.jpg")
77-}
92-}
78−customButton : Element -> Element -> Element -> (Element, Signal ())
93+customButton : Handle a -> a -> Element -> Element -> Element -> Element
79−customButton up hover down =
94+customButton = Native.Graphics.Input.customButton
80− let pool = customButtons ()
95+
81− in (pool.customButton () up hover down, pool.events)
96+{-| Create a checkbox. The following example creates three synced checkboxes:
82−
97+
83−{-| Create a group of checkboxes.
98+ check : Input Bool
84−
99+ check = input False
85− * The first argument is the default value of the `events` signal.
100+
86− * The `events` signal represents all of the activity in this group
101+ boxes : Bool -> Element
87− of checkboxes.
102+ boxes checked =
88− * The `checkbox` function creates a
103+ let box = container 40 40 middle (checkbox check.handle id checked)
89− checkbox with a given state. The `(Bool -> a)` function is used
104+ in flow right [ box, box, box ]
90− when the checkbox is modified. It takes the new state and turns
105+
91− it into a value that can be sent to `events`. For example, this
106+ main : Signal Element
92− lets you add an ID to distinguish between checkboxes.
107+ main = boxes <~ check.signal
93-}
108-}
94−checkboxes : a -> { events : Signal a,
95− checkbox : (Bool -> a) -> Bool -> Element }
109+checkbox : Handle a -> (Bool -> a) -> Bool -> Element
96−checkboxes = Native.Graphics.Input.checkboxes
110+checkbox = Native.Graphics.Input.checkbox
97−
111+
98−{-| Create a checkbox with a given start state. Unlike `button`, this
112+{-| Create a drop-down menu. The following drop-down lets you choose your
99−result is a *signal* of elements. That is because a checkbox has state
113+favorite British sport:
100−that updates based on user input. The boolean signal represents the
114+
101−current state of the checkbox.
115+ data Sport = Football | Cricket | Snooker
116+
117+ sport : Input Sport
118+ sport = input Nothing
119+
120+ sportDropDown : Element
121+ sportDropDown =
122+ dropDown sport.handle
123+ [ ("" , Nothing)
124+ , ("Football", Just Football)
125+ , ("Cricket" , Just Cricket)
126+ , ("Snooker" , Just Snooker)
127+ ]
128+
129+If the user selects "Football" from the drop down menue, `sport.signal`
130+will update to `Just Football`.
102-}
131-}
103−checkbox : Bool -> (Signal Element, Signal Bool)
132+dropDown : Handle a -> [(String,a)] -> Element
104−checkbox b =
133+dropDown = Native.Graphics.Input.dropDown
105− let cbs = checkboxes b
134+
106− in (lift (cbs.checkbox id) cbs.events, cbs.events)
135+{-| Detect mouse hovers over a specific `Element`. In the following example,
107−
136+we will create a hoverable picture called `cat`.
108−{-| Detect when the mouse is hovering over some elements. This
137+
109−allows you to create and destroy elements dynamically and still
138+ hover : Input Bool
110−detect hover information.
139+ hover = input False
140+
141+ cat : Element
142+ cat = image 30 30 "/cat.jpg"
143+ |> hoverable hover.handle id
144+
145+When the mouse hovers above the `cat` element, `hover.signal` will become
146+`True`. When the mouse leaves it, `hover.signal` will become `False`.
111-}
147-}
112−hoverables : a -> { events : Signal a,
113− hoverable : (Bool -> a) -> Element -> Element }
148+hoverable : Handle a -> (Bool -> a) -> Element -> Element
114−hoverables = Native.Graphics.Input.hoverables
149+hoverable = Native.Graphics.Input.hoverable
115
150
116−{-| Detect when the mouse is hovering over a specific `Element`. -}
151+{-| Detect mouse clicks on a specific `Element`. In the following example,
117−hoverable : Element -> (Element, Signal Bool)
152+we will create a clickable picture called `cat`.
118−hoverable elem =
119− let pool = hoverables False
120− in (pool.hoverable id elem, pool.events)
121
153
122−{-| Represents the current state of a text field. The `string` represents the
154+ data Picture = Cat | Hat
123−characters filling the text field. The `selectionStart` and `selectionEnd`
155+
124−values represent what the user has selected with their mouse or keyboard.
156+ picture : Input Picture
125−For example:
157+ picture = input Cat
158+
159+ cat : Element
160+ cat = image 30 30 "/cat.jpg"
161+ |> clickable picture.handle Cat
162+
163+ hat : Element
164+ hat = image 30 30 "/hat.jpg"
165+ |> clickable picture.handle Hat
166+
167+When the user clicks on the `cat` element, `picture.signal` receives
168+an update containing the value `Cat`. When the user clicks on the `hat` element,
169+`picture.signal` receives an update containing the value `Hat`. This lets you
170+distinguish which element was clicked. In a more complex example, they could be
171+distinguished with IDs or more complex data structures.
172+-}
173+clickable : Handle a -> a -> Element -> Element
174+clickable = Native.Graphics.Input.clickable
126
175
127− { string="She sells sea shells", selectionStart=3, selectionEnd=0 }
176+{-| Represents the current content of a text field. For example:
177+
178+ FieldContent "She sells sea shells" (Selection 0 3 Backward)
128
179
129This means the user highlighted the substring `"She"` backwards.
180This means the user highlighted the substring `"She"` backwards.
130-}
181-}
131−type FieldState = { string:String, selectionStart:Int, selectionEnd:Int }
182+type FieldContent = { string:String, selection:Selection }
132−
183+
133−{-| Create a group of text input fields.
184+{-| The selection within a text field. `start` is never greater than `end`:
134−
185+
135− * The first argument is the default value of the `events` signal.
186+ Selection 0 0 Forward -- cursor precedes all characters
136− * The `events` signal represents all of the activity in this group
187+
137− of text fields.
188+ Selection 5 9 Backward -- highlighting characters starting after
138− * The `field` function creates a
189+ -- the 5th and ending after the 9th
139− field with the given ghost text and initial field state.
140− When the field is modified, the `(FieldState -> a)` function
141− takes the new state and turns
142− it into a value that can be sent to `events`. For example, this
143− lets you add an ID to distinguish between input fields.
144-}
190-}
145−fields : a -> { events : Signal a,
191+type Selection = { start:Int, end:Int, direction:Direction }
146− field : (FieldState -> a) -> String -> FieldState -> Element }
192+
147−fields = Native.Graphics.Input.fields
193+{-| The direction of selection.-}
194+data Direction = Forward | Backward
148
195
149−{-| The empty field state:
196+{-| A field with no content:
150
197
151− { string="", selectionStart=0, selectionEnd=0 }
198+ FieldContent "" (Selection 0 0 Forward)
152-}
199-}
153−emptyFieldState : FieldState
200+noContent : FieldContent
154−emptyFieldState = { string="", selectionStart=0, selectionEnd=0 }
201+noContent = FieldContent "" (Selection 0 0 Forward)
155
202
156−{-| Create a field with the given default text. The output is an element
203+{-| Create a text field. The following example creates a time-varying element
157−that updates to match the user input and a signal of strings representing
204+called `nameField`. As the user types their name, the field will be updated
158−the content of the field.
205+to match what they have entered.
206+
207+ name : Input FieldContent
208+ name = input noContent
209+
210+ nameField : Signal Element
211+ nameField = field name.handle (\content -> content) "Name" <~ nameContent
159-}
212-}
160−field : String -> (Signal Element, Signal String)
213+field : Handle a -> (FieldContent -> a) -> String -> FieldContent -> Element
161−field placeHolder =
214+field = Native.Graphics.Input.field
162− let tfs = fields emptyFieldState
163− changes = dropRepeats tfs.events
164− in (lift (tfs.field id placeHolder) changes,
165− dropRepeats (lift .string changes))
166
215
167{-| Same as `field` but the UI element blocks out each characters. -}
216{-| Same as `field` but the UI element blocks out each characters. -}
168−password : String -> (Signal Element, Signal String)
217+password : Handle a -> (FieldContent -> a) -> String -> FieldContent -> Element
169−password placeHolder =
170− let tfs = Native.Graphics.Input.passwords emptyFieldState
218+password = Native.Graphics.Input.password
171− changes = dropRepeats tfs.events
172− in (lift (tfs.field id placeHolder) changes,
173− dropRepeats (lift .string changes))
174
219
175{-| Same as `field` but it adds an annotation that this field is for email
220{-| Same as `field` but it adds an annotation that this field is for email
176addresses. This is helpful for auto-complete and for mobile users who may
221addresses. This is helpful for auto-complete and for mobile users who may
177get a custom keyboard with an `@` and `.com` button.
222get a custom keyboard with an `@` and `.com` button.
178-}
223-}
179−email : String -> (Signal Element, Signal String)
224+email : Handle a -> (FieldContent -> a) -> String -> FieldContent -> Element
180−email placeHolder =
181− let tfs = Native.Graphics.Input.emails emptyFieldState
182− changes = dropRepeats tfs.events
183− in (lift (tfs.field id placeHolder) changes,
184− dropRepeats (lift .string changes))
185−
186−{-| Create a drop-down menu. When the user selects a string,
187−the current state of the drop-down is set to the associated
188−value. This lets you avoid manually mapping the string onto
189−functions and values.
190−-}
191−dropDown : [(String,a)] -> (Signal Element, Signal a)
192−dropDown = Native.Graphics.Input.dropDown
225+email = Native.Graphics.Input.email
193
226
194−{-| Create a drop-down menu for selecting strings. The resulting
227+-- area : Handle a -> (FieldContent -> a) -> Handle b -> ((Int,Int) -> b) -> (Int,Int) -> String -> FieldContent -> Element
195−signal of strings represents the string that is currently selected.
228+-- area = Native.Graphics.Input.area
196−-}
197−stringDropDown : [String] -> (Signal Element, Signal String)
198−stringDropDown strs =
199− dropDown (List.map (\s -> (s,s)) strs)
libraries/Native/Graphics/Input.js+324−305
@@ -1,309 +1,328 @@
1Elm.Native.Graphics.Input = {};
1Elm.Native.Graphics.Input = {};
2Elm.Native.Graphics.Input.make = function(elm) {
2Elm.Native.Graphics.Input.make = function(elm) {
3−
4− elm.Native = elm.Native || {};
3+ elm.Native = elm.Native || {};
5− elm.Native.Graphics = elm.Native.Graphics || {};
4+ elm.Native.Graphics = elm.Native.Graphics || {};
6− elm.Native.Graphics.Input = elm.Native.Graphics.Input || {};
5+ elm.Native.Graphics.Input = elm.Native.Graphics.Input || {};
7− if (elm.Native.Graphics.Input.values) return elm.Native.Graphics.Input.values;
6+ if (elm.Native.Graphics.Input.values) return elm.Native.Graphics.Input.values;
8−
7+
9− var Render = ElmRuntime.use(ElmRuntime.Render.Element);
8+ var Render = ElmRuntime.use(ElmRuntime.Render.Element);
10− var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;
9+ var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;
11−
10+
12− var Signal = Elm.Signal.make(elm);
11+ var Signal = Elm.Signal.make(elm);
13− var newElement = Elm.Graphics.Element.make(elm).newElement;
12+ var newElement = Elm.Graphics.Element.make(elm).newElement;
14− var JS = Elm.Native.JavaScript.make(elm);
13+ var JS = Elm.Native.JavaScript.make(elm);
15− var Utils = Elm.Native.Utils.make(elm);
14+ var Utils = Elm.Native.Utils.make(elm);
16− var Tuple2 = Utils.Tuple2;
15+ var Tuple2 = Utils.Tuple2;
17−
16+
17+ function input(initialValue) {
18+ var signal = Signal.constant(initialValue);
19+ return { _:{}, signal:signal, handle:signal };
20+ }
21+
18− function dropDown(values) {
22+ function renderDropDown(signal, values) {
23+ return function(_) {
19− var entries = JS.fromList(values);
24+ var entries = JS.fromList(values);
20− var events = Signal.constant(entries[0]._1);
25+
21−
22− var drop = newNode('select');
26+ var drop = newNode('select');
23− drop.style.pointerEvents = 'auto';
24− drop.style.border = '0 solid';
27+ drop.style.border = '0 solid';
28+ drop.style.pointerEvents = 'auto';
25− for (var i = 0; i < entries.length; ++i) {
29+ for (var i = 0; i < entries.length; ++i) {
26− var option = newNode('option');
30+ var option = newNode('option');
27− var name = JS.fromString(entries[i]._0);
31+ var name = JS.fromString(entries[i]._0);
28− option.value = name;
32+ option.value = name;
29− option.innerHTML = name;
33+ option.innerHTML = name;
30− drop.appendChild(option);
34+ drop.appendChild(option);
31− }
35+ }
32− drop.addEventListener('change', function() {
36+ drop.addEventListener('change', function() {
33− elm.notify(events.id, entries[drop.selectedIndex]._1);
37+ elm.notify(signal.id, entries[drop.selectedIndex]._1);
34− });
38+ });
35−
39+
36− var t = drop.cloneNode(true);
40+ var t = drop.cloneNode(true);
37− t.style.visibility = "hidden";
41+ t.style.visibility = "hidden";
38−
42+
39− elm.node.appendChild(t);
43+ elm.node.appendChild(t);
40− var style = window.getComputedStyle(t, null);
44+ var style = window.getComputedStyle(t, null);
41− var w = Math.ceil(style.getPropertyValue("width").slice(0,-2) - 0);
45+ var w = Math.ceil(style.getPropertyValue("width").slice(0,-2) - 0);
42− var h = Math.ceil(style.getPropertyValue("height").slice(0,-2) - 0);
46+ var h = Math.ceil(style.getPropertyValue("height").slice(0,-2) - 0);
43− elm.node.removeChild(t);
47+ elm.node.removeChild(t);
44−
48+ return drop;
49+ };
50+ }
51+
52+ function updateDropDown(node, oldModel, newModel) {
53+ }
54+
55+ function dropDown(signal, values) {
45− var element = A3(newElement, w, h, {
56+ return A3(newElement, 100, 24, {
46− ctor: 'Custom',
57+ ctor: 'Custom',
47− type: 'DropDown',
58+ type: 'DropDown',
48− render: function render(model) { return drop; },
59+ render: renderDropDown(signal,values),
49− update: function update(node, oldModel, newModel) {},
60+ update: updateDropDown,
50− model: {}
61+ model: {}
51− });
62+ });
52−
53− return Tuple2(Signal.constant(element), events);
54− }
63+ }
55−
64+
56− function buttons(defaultValue) {
65+ function renderButton(model) {
57− var events = Signal.constant(defaultValue);
66+ var node = newNode('button');
58−
67+ node.style.display = 'block';
59− function render(model) {
60− var b = newNode('button');
61− b.style.pointerEvents = 'auto';
68+ node.style.pointerEvents = 'auto';
62− b.style.display = 'block';
69+ node.elm_signal = model.signal;
63− b.elmEvent = model.event;
70+ node.elm_value = model.value;
64− function click() { elm.notify(events.id, b.elmEvent); }
71+ function click() {
72+ elm.notify(node.elm_signal.id, node.elm_value);
73+ }
65− b.addEventListener('click', click);
74+ node.addEventListener('click', click);
66− b.innerHTML = model.text;
75+ node.innerHTML = model.text;
67− return b;
76+ return node;
68− }
77+ }
69−
78+
70− function update(node, oldModel, newModel) {
79+ function updateButton(node, oldModel, newModel) {
71− node.elmEvent = newModel.event;
80+ node.elm_signal = newModel.signal;
81+ node.elm_value = nemModel.value;
72− var txt = newModel.text;
82+ var txt = newModel.text;
73− if (oldModel.text !== txt) node.innerHTML = txt;
83+ if (oldModel.text !== txt) node.innerHTML = txt;
74− }
84+ }
75−
85+
76− function button(evnt, txt) {
86+ function button(signal, value, text) {
77− return A3(newElement, 100, 40, {
87+ return A3(newElement, 100, 40, {
78− ctor: 'Custom',
88+ ctor: 'Custom',
79− type: 'Button',
89+ type: 'Button',
80− render: render,
90+ render: renderButton,
81− update: update,
91+ update: updateButton,
82− model: { event:evnt, text:JS.fromString(txt) }
92+ model: { signal:signal, value:value, text:JS.fromString(text) }
83− });
93+ });
84− }
85−
86− return { _:{}, button:F2(button), events:events };
87− }
94+ }
88−
95+
89− function customButtons(defaultValue) {
96+ function renderCustomButton(model) {
90− var events = Signal.constant(defaultValue);
91−
92− function render(model) {
93− var btn = newNode('div');
97+ var btn = newNode('div');
94− btn.style.pointerEvents = 'auto';
98+ btn.style.pointerEvents = 'auto';
95− btn.elmEvent = model.event;
99+ btn.elm_signal = model.signal;
96−
100+ btn.elm_value = model.value;
101+
97− btn.elmUp = Render.render(model.up);
102+ btn.elm_up = Render.render(model.up);
98− btn.elmHover = Render.render(model.hover);
103+ btn.elm_hover = Render.render(model.hover);
99− btn.elmDown = Render.render(model.down);
104+ btn.elm_down = Render.render(model.down);
100−
105+
101− function replace(node) {
106+ function replace(node) {
107+ if (node !== btn.firstChild) {
102− if (node !== btn.firstChild) btn.replaceChild(node, btn.firstChild);
108+ btn.replaceChild(node, btn.firstChild);
109+ }
103− }
110+ }
104− var overCount = 0;
111+ var overCount = 0;
105− function over(e) {
112+ function over(e) {
106− if (overCount++ > 0) return;
113+ if (overCount++ > 0) return;
107− replace(btn.elmHover);
114+ replace(btn.elm_hover);
108− }
115+ }
109− function out(e) {
116+ function out(e) {
110− if (btn.contains(e.toElement || e.relatedTarget)) return;
117+ if (btn.contains(e.toElement || e.relatedTarget)) return;
111− overCount = 0;
118+ overCount = 0;
112− replace(btn.elmUp);
119+ replace(btn.elm_up);
113− }
120+ }
114− function up() {
121+ function up() {
115− replace(btn.elmHover);
122+ replace(btn.elm_hover);
116− elm.notify(events.id, btn.elmEvent);
123+ elm.notify(btn.elm_signal.id, btn.elm_value);
117− }
124+ }
118− function down() { replace(btn.elmDown); }
125+ function down() {
126+ replace(btn.elm_down);
127+ }
119− btn.addEventListener('mouseover', over);
128+ btn.addEventListener('mouseover', over);
120− btn.addEventListener('mouseout' , out);
129+ btn.addEventListener('mouseout' , out);
121− btn.addEventListener('mousedown', down);
130+ btn.addEventListener('mousedown', down);
122− btn.addEventListener('mouseup' , up);
131+ btn.addEventListener('mouseup' , up);
123−
132+
124− btn.appendChild(btn.elmUp);
133+ btn.appendChild(btn.elm_up);
125−
134+
126− var clicker = newNode('div');
135+ var clicker = newNode('div');
127− clicker.style.width = btn.elmUp.style.width;
136+ clicker.style.width = btn.elm_up.style.width;
128− clicker.style.height = btn.elmUp.style.height;
137+ clicker.style.height = btn.elm_up.style.height;
129− clicker.style.position = 'absolute';
138+ clicker.style.position = 'absolute';
130− clicker.style.top = 0;
139+ clicker.style.top = 0;
131− btn.appendChild(clicker);
140+ btn.appendChild(clicker);
132−
141+
133− return btn;
142+ return btn;
134− }
143+ }
135−
144+
136− function update(node, oldModel, newModel) {
145+ function updateCustomButton(node, oldModel, newModel) {
137− node.elmEvent = newModel.event;
146+ var signal = newModel.signal;
147+ node.elm_up.elm_signal = signal;
148+ node.elm_hover.elm_signal = signal;
149+ node.elm_down.elm_signal = signal;
150+
151+ var value = newModel.value;
152+ node.elm_up.elm_value = value;
153+ node.elm_hover.elm_value = value;
154+ node.elm_down.elm_value = value;
155+
138− Render.update(node.elmUp, oldModel.up, newModel.up)
156+ Render.update(node.elm_up, oldModel.up, newModel.up)
139− Render.update(node.elmHover, oldModel.hover, newModel.hover)
157+ Render.update(node.elm_hover, oldModel.hover, newModel.hover)
140− Render.update(node.elmDown, oldModel.down, newModel.down)
158+ Render.update(node.elm_down, oldModel.down, newModel.down)
159+ }
160+
161+ function max3(a,b,c) {
162+ var ab = a > b ? a : b;
163+ return ab > c ? ab : c;
141− }
164+ }
142−
165+
143− function button(evnt, up, hover, down) {
166+ function customButton(signal, value, up, hover, down) {
144− return A3(newElement,
167+ return A3(newElement,
145− Math.max(up.props.width, hover.props.width, down.props.width),
168+ max3(up.props.width, hover.props.width, down.props.width),
146− Math.max(up.props.height, hover.props.height, down.props.height),
169+ max3(up.props.height, hover.props.height, down.props.height),
147− { ctor: 'Custom',
170+ { ctor: 'Custom',
148− type: 'CustomButton',
171+ type: 'CustomButton',
149− render: render,
172+ render: renderCustomButton,
150− update: update,
173+ update: updateCustomButton,
151− model: { event:evnt, up:up, hover:hover, down:down }
174+ model: { signal:signal, value:value, up:up, hover:hover, down:down }
152− });
175+ });
153− }
154−
155− return { _:{}, customButton:F4(button), events:events };
156− }
176+ }
157−
177+
158−
178+ function renderCheckbox(model) {
159− function hoverables(defaultValue) {
179+ var node = newNode('input');
160− var events = Signal.constant(defaultValue);
180+ node.type = 'checkbox';
161− function hoverable(handler, elem) {
181+ node.checked = model.checked;
162− function onHover(bool) {
182+ node.style.display = 'block';
163− elm.notify(events.id, handler(bool));
164− }
165− var props = Utils.replace([['hover',onHover]], elem.props);
166− return { props:props, element:elem.element };
167− }
168− return { _:{}, hoverable:F2(hoverable), events:events };
169− }
170−
171−
172− function checkboxes(defaultValue) {
173− var events = Signal.constant(defaultValue);
174−
175− function render(model) {
176− var b = newNode('input');
177− b.style.pointerEvents = 'auto';
183+ node.style.pointerEvents = 'auto';
178− b.type = 'checkbox';
184+ node.elm_signal = model.signal;
179−
180− b.checked = model.checked;
181− b.style.display = 'block';
182− b.elmHandler = model.handler;
185+ node.elm_handler = model.handler;
183− function change() { elm.notify(events.id, b.elmHandler(b.checked)); }
186+ function change() {
187+ elm.notify(node.elm_signal.id, node.elm_handler(node.checked));
188+ }
184− b.addEventListener('change', change);
189+ node.addEventListener('change', change);
185− return b;
190+ return node;
186− }
191+ }
187−
192+
188− function update(node, oldModel, newModel) {
193+ function updateCheckbox(node, oldModel, newModel) {
194+ node.elm_signal = newModel.signal;
189− node.elmHandler = newModel.handler;
195+ node.elm_handler = newModel.handler;
190− node.checked = newModel.checked;
196+ node.checked = newModel.checked;
191− return true;
197+ return true;
192− }
198+ }
193−
199+
194− function box(handler, checked) {
200+ function checkbox(signal, handler, checked) {
195− return A3(newElement, 13, 13, {
201+ return A3(newElement, 13, 13, {
196− ctor: 'Custom',
202+ ctor: 'Custom',
197− type: 'CheckBox',
203+ type: 'CheckBox',
198− render: render,
204+ render: renderCheckbox,
199− update: update,
205+ update: updateCheckbox,
200− model: { checked:checked, handler:handler }
206+ model: { signal:signal, handler:handler, checked:checked }
201− });
207+ });
202− }
203−
204− return { _:{}, checkbox:F2(box), events:events };
205− }
208+ }
206−
209+
207− function setRange(node, start, end, dir) {
210+ function setRange(node, start, end, dir) {
208− if (node.parentNode) {
211+ if (node.parentNode) {
209− node.setSelectionRange(start, end, dir);
212+ node.setSelectionRange(start, end, dir);
210− } else {
213+ } else {
211− setTimeout(function(){node.setSelectionRange(start, end, dir);}, 0);
214+ setTimeout(function(){node.setSelectionRange(start, end, dir);}, 0);
212− }
215+ }
213− }
216+ }
214−
217+
215− function mkTextPool(type) { return function fields(defaultValue) {
218+ function renderField(model) {
216− var events = Signal.constant(defaultValue);
217−
218− var state = null;
219−
220− function render(model) {
221− var field = newNode('input');
219+ var field = newNode('input');
222− field.style.pointerEvents = 'auto';
220+ field.style.pointerEvents = 'auto';
223− field.elmHandler = model.handler;
221+ field.elm_signal = model.signal;
224−
222+ field.elm_handler = model.handler;
225− field.id = 'test';
223+
226− field.type = type;
224+ field.type = model.type;
227− field.placeholder = JS.fromString(model.placeHolder);
225+ field.placeholder = JS.fromString(model.placeHolder);
228− field.value = JS.fromString(model.state.string);
226+ field.value = JS.fromString(model.content.string);
229− setRange(field, model.state.selectionStart, model.state.selectionEnd, 'forward');
227+ var selection = model.content.selection;
228+ var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';
229+ setRange(field, selection.start, selection.end, direction);
230− field.style.border = 'none';
230+ field.style.border = 'none';
231− state = model.state;
231+
232−
233− function update() {
232+ function update() {
234− var start = field.selectionStart,
235− end = field.selectionEnd;
236− if (field.selectionDirection === 'backward') {
233+ var direction = field.selectionDirection === 'backward' ? 'Backward' : 'Forward';
237− start = end;
234+ elm.notify(field.elm_signal.id, field.elm_handler({
238− end = field.selectionStart;
235+ _:{},
239− }
240− state = { _:{},
241− string:JS.toString(field.value),
236+ string:JS.toString(field.value),
242− selectionStart:start,
237+ selection: {
238+ start:field.selectionStart,
243− selectionEnd:end };
239+ end:field.selectionEnd,
244− elm.notify(events.id, field.elmHandler(state));
240+ direction: { ctor:direction }
241+ },
242+ }));
245− }
243+ }
246− function mousedown() {
244+ function mousedown() {
247− update();
245+ update();
248− elm.node.addEventListener('mouseup', mouseup);
246+ elm.node.addEventListener('mouseup', mouseup);
249− }
247+ }
250− function mouseup() {
248+ function mouseup() {
251− update();
249+ update();
252− elm.node.removeEventListener('mouseup', mouseup)
250+ elm.node.removeEventListener('mouseup', mouseup)
253− }
251+ }
254− field.addEventListener('keyup', update);
252+ field.addEventListener('keyup', update);
255− field.addEventListener('mousedown', mousedown);
253+ field.addEventListener('mousedown', mousedown);
256−
254+
257− return field;
255+ return field;
258− }
256+ }
259−
257+
260− function update(node, oldModel, newModel) {
258+ function updateField(node, oldModel, newModel) {
261− node.elmHandler = newModel.handler;
259+ node.elmHandler = newModel.handler;
262− if (state === newModel.state) return;
263− var newStr = JS.fromString(newModel.state.string);
260+ var newStr = JS.fromString(newModel.content.string);
264− if (node.value !== newStr) node.value = newStr;
261+ if (node.value !== newStr) node.value = newStr;
265−
262+
266− var start = newModel.state.selectionStart;
263+ var selection = newModel.content.selection;
267− var end = newModel.state.selectionEnd;
264+ var start = selection.start;
265+ var end = selection.end;
268− var direction = 'forward';
266+ var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';
269− if (end < start) {
267+ if (end < start) {
270− start = end;
268+ start = end;
271− end = newModel.state.selectionStart;
269+ end = selection.start;
272− direction = 'backward';
273− }
270+ }
274−
271+
275− if (node.selectionStart !== start
272+ if (node.selectionStart !== start
276− || node.selectionEnd !== end
273+ || node.selectionEnd !== end
277− || node.selectionDirection !== direction) {
274+ || node.selectionDirection !== direction) {
278− setRange(node, start, end, direction);
275+ setRange(node, start, end, direction);
279− }
276+ }
280− }
277+ }
281−
278+
279+ function mkField(type) {
282− function field(handler, placeHolder, state) {
280+ function field(signal, handler, placeHolder, content) {
283− return A3(newElement, 200, 30,
281+ return A3(newElement, 200, 30, {
284− { ctor: 'Custom',
282+ ctor: 'Custom',
285− type: type + 'Input',
283+ type: type + 'Input',
286− render: render,
284+ render: renderField,
287− update: update,
285+ update: updateField,
286+ model: {
287+ signal:signal,
288− model: { handler:handler,
288+ handler:handler,
289− placeHolder:placeHolder,
289+ placeHolder:placeHolder,
290− state:state }
290+ content:content,
291+ type:type
292+ }
291− });
293+ });
292− }
294+ }
293−
295+ return F4(field);
294− return { _:{}, field:F3(field), events:events };
296+ }
297+
298+
299+ function hoverable(signal, handler, element) {
300+ function onHover(bool) {
301+ elm.notify(signal.id, handler(bool));
302+ }
303+ var props = Utils.replace([['hover',onHover]], elem.props);
304+ return { props:props, element:elem.element };
295− }
305+ }
306+
307+ function clickable(signal, value, element) {
308+ function onClick(bool) {
309+ elm.notify(signal.id, value);
296− }
310+ }
297−
311+ var props = Utils.replace([['click',onClick]], elem.props);
312+ return { props:props, element:elem.element };
313+ }
314+
298− return elm.Native.Graphics.Input.values = {
315+ return elm.Native.Graphics.Input.values = {
299− buttons:buttons,
316+ input:input,
300− customButtons:customButtons,
317+ button:F3(button),
301− hoverables:hoverables,
318+ customButton:F5(customButton),
302− checkboxes:checkboxes,
319+ checkbox:F3(checkbox),
303− fields:mkTextPool('text'),
320+ dropDown:F2(dropDown),
304− emails:mkTextPool('email'),
321+ field:mkField('text'),
305− passwords:mkTextPool('password'),
322+ email:mkField('email'),
306− dropDown:dropDown
323+ password:mkField('password'),
324+ hoverable:F3(hoverable),
325+ clickable:F3(clickable)
307− };
326+ };
308
327
309};
328};
runtime/Render/Element.js+33−5
@@ -28,16 +28,30 @@ function setProps(props, e) {
28 e.appendChild(a);
28 e.appendChild(a);
29 }
29 }
30 if (props.hover.ctor !== '_Tuple0') {
30 if (props.hover.ctor !== '_Tuple0') {
31− var overCount = 0;
32 e.style.pointerEvents = 'auto';
31 e.style.pointerEvents = 'auto';
32+ e.elm_hover_handler = props.hover;
33+ e.elm_hover_count = 0;
33 e.addEventListener('mouseover', function() {
34 e.addEventListener('mouseover', function() {
34− if (overCount++ > 0) return;
35+ if (e.elm_hover_count++ > 0) return;
35− props.hover(true);
36+ var handler = e.elm_hover_handler;
37+ if (handler !== null) {
38+ handler(true);
39+ }
36 });
40 });
37 e.addEventListener('mouseout', function(evt) {
41 e.addEventListener('mouseout', function(evt) {
38 if (e.contains(evt.toElement || evt.relatedTarget)) return;
42 if (e.contains(evt.toElement || evt.relatedTarget)) return;
39− overCount = 0;
43+ e.elm_hover_count = 0;
40− props.hover(false);
44+ var handler = e.elm_hover_handler;
45+ if (handler !== null) {
46+ handler(false);
47+ }
48+ });
49+ }
50+ if (props.click.ctor !== '_Tuple0') {
51+ e.style.pointerEvents = 'auto';
52+ e.elm_click_handler = props.click;
53+ e.addEventListener('click', function() {
54+ e.elm_click_handler(Tuple0);
41 });
55 });
42 }
56 }
43 return e;
57 return e;
@@ -322,6 +336,20 @@ function updateProps(node, curr, next) {
322 node.lastNode.href = props.href;
336 node.lastNode.href = props.href;
323 }
337 }
324 }
338 }
339+
340+ // update hover handlers
341+ if (props.hover.ctor !== '_Tuple0') {
342+ e.elm_hover_handler = props.hover;
343+ } else if (e.elm_hover_handler) {
344+ e.elm_hover_handler = null;
345+ }
346+
347+ // update click handlers
348+ if (props.click.ctor !== '_Tuple0') {
349+ e.elm_click_handler = props.click;
350+ } else if (e.elm_click_handler) {
351+ e.elm_click_handler = null;
352+ }
325}
353}
326
354
327return { render:render, update:update };
355return { render:render, update:update };