2da0a59 · elk · git.iko.soy

git.iko.soy/elk

on master help sign in

Add basic drop down menus.

2da0a59evancz13 years ago

libraries/Graphics/Input.elm+23−4

compare with master

unifiedsplit

@@ -1,8 +1,9 @@

2module Graphics.Input where

4−import Signal (lift)

4+import Signal (lift,dropRepeats)

5import Native.Graphics.Input as N

6+import List

7id x = x

8id x = x

@@ -102,13 +103,17 @@ emptyFieldState = { string="", selectionStart=0, selectionEnd=0 }

102field : String -> (Signal Element, Signal String)

103field : String -> (Signal Element, Signal String)

103field placeHolder =

104field placeHolder =

104 let tfs = N.fields emptyFieldState

105 let tfs = N.fields emptyFieldState

106+ changes = dropRepeats tfs.events

105− in (lift (tfs.field id placeHolder) tfs.events, lift .string tfs.events)

107+ in (lift (tfs.field id placeHolder) changes,

108+ dropRepeats (lift .string changes))

106

109

107-- Same as `field` but the UI element blocks out each characters.

110-- Same as `field` but the UI element blocks out each characters.

108password : String -> (Signal Element, Signal String)

111password : String -> (Signal Element, Signal String)

109password placeHolder =

112password placeHolder =

110 let tfs = N.passwords emptyFieldState

113 let tfs = N.passwords emptyFieldState

114+ changes = dropRepeats tfs.events

111− in (lift (tfs.field id placeHolder) tfs.events, lift .string tfs.events)

115+ in (lift (tfs.field id placeHolder) changes,

116+ dropRepeats (lift .string changes))

112

117

113-- Same as `field` but it adds an annotation that this field is for email

118-- Same as `field` but it adds an annotation that this field is for email

114-- addresses. This is helpful for auto-complete and for mobile users who may

119-- addresses. This is helpful for auto-complete and for mobile users who may

@@ -116,4 +121,18 @@ password placeHolder =

116email : String -> (Signal Element, Signal String)

121email : String -> (Signal Element, Signal String)

117email placeHolder =

122email placeHolder =

118 let tfs = N.emails emptyFieldState

123 let tfs = N.emails emptyFieldState

124+ changes = dropRepeats tfs.events

119− in (lift (tfs.field id placeHolder) tfs.events, lift .string tfs.events)

125+ in (lift (tfs.field id placeHolder) changes,

126+ dropRepeats (lift .string changes))

127+

128+-- Create a drop-down menu. When the user selects a string,

129+-- the current state of the drop-down is set to the associated

130+-- value. This lets you avoid manually mapping the string onto

131+-- functions and values.

132+dropDown : [(String,a)] -> (Signal Element, Signal a)

133+

134+-- Create a drop-down menu for selecting strings. The resulting

135+-- signal of strings represents the string that is currently selected.

136+stringDropDown : [String] -> (Signal Element, Signal String)

137+stringDropDown strs =

138+ N.dropDown (List.map (\s -> (s,s)) strs)

libraries/Native/Graphics/Input.js+48−9

@@ -7,12 +7,50 @@ Elm.Native.Graphics.Input = function(elm) {

7 if (elm.Native.Graphics.Input) return elm.Native.Graphics.Input;

9 var Render = ElmRuntime.use(ElmRuntime.Render.Element);

10− var Utils = ElmRuntime.use(ElmRuntime.Render.Utils);

10+ var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;

11− var newNode = Utils.newElement, fromString = Utils.fromString,

12− toString = Utils.toString;

14 var Signal = Elm.Signal(elm);

12 var Signal = Elm.Signal(elm);

15 var newElement = Elm.Graphics.Element(elm).newElement;

13 var newElement = Elm.Graphics.Element(elm).newElement;

14+ var JS = Elm.Native.JavaScript(elm);

15+ var Tuple2 = Elm.Native.Utils(elm).Tuple2;

16+

17+ function dropDown(values) {

18+ var entries = JS.fromList(values);

19+ var events = Signal.constant(entries[0]._1);

20+

21+ var drop = newNode('select');

22+ drop.style.border = '0 solid';

23+ for (var i = 0; i < entries.length; ++i) {

24+ var option = newNode('option');

25+ var name = JS.fromString(entries[i]._0);

26+ option.value = name;

27+ option.innerHTML = name;

28+ drop.appendChild(option);

29+ }

30+ drop.addEventListener('change', function() {

31+ elm.notify(events.id, entries[drop.selectedIndex]._1);

32+ });

33+

34+ var t = drop.cloneNode(true);

35+ t.style.visibility = "hidden";

36+

37+ elm.node.appendChild(t);

38+ var style = window.getComputedStyle(t, null);

39+ var w = Math.ceil(style.getPropertyValue("width").slice(0,-2) - 0);

40+ var h = Math.ceil(style.getPropertyValue("height").slice(0,-2) - 0);

41+ elm.node.removeChild(t);

42+

43+ console.log(w,h);

44+ var element = A3(newElement, w, h, {

45+ ctor: 'Custom',

46+ type: 'DropDown',

47+ render: function render(model) { return drop; },

48+ update: function update(node, oldModel, newModel) {},

49+ model: {}

50+ });

51+

52+ return Tuple2(Signal.constant(element), events);

53+ }

17 function buttons(defaultValue) {

55 function buttons(defaultValue) {

18 var events = Signal.constant(defaultValue);

56 var events = Signal.constant(defaultValue);

@@ -39,7 +77,7 @@ Elm.Native.Graphics.Input = function(elm) {

39 type: 'Button',

77 type: 'Button',

40 render: render,

78 render: render,

41 update: update,

79 update: update,

42− model: { event:evnt, text:fromString(txt) }

80+ model: { event:evnt, text:JS.fromString(txt) }

43 });

81 });

44 }

82 }

@@ -159,8 +197,8 @@ Elm.Native.Graphics.Input = function(elm) {

159

197

160 field.id = 'test';

198 field.id = 'test';

161 field.type = type;

199 field.type = type;

162− field.placeholder = fromString(model.placeHolder);

200+ field.placeholder = JS.fromString(model.placeHolder);

163− field.value = fromString(model.state.string);

201+ field.value = JS.fromString(model.state.string);

164 setRange(field, model.state.selectionStart, model.state.selectionEnd, 'forward');

202 setRange(field, model.state.selectionStart, model.state.selectionEnd, 'forward');

165 field.style.border = 'none';

203 field.style.border = 'none';

166 state = model.state;

204 state = model.state;

@@ -173,7 +211,7 @@ Elm.Native.Graphics.Input = function(elm) {

173 end = field.selectionStart;

211 end = field.selectionStart;

174 }

212 }

175 state = { _:{},

213 state = { _:{},

176− string:toString(field.value),

214+ string:JS.toString(field.value),

177 selectionStart:start,

215 selectionStart:start,

178 selectionEnd:end };

216 selectionEnd:end };

179 elm.notify(events.id, field.elmHandler(state));

217 elm.notify(events.id, field.elmHandler(state));

@@ -195,7 +233,7 @@ Elm.Native.Graphics.Input = function(elm) {

195 function update(node, oldModel, newModel) {

233 function update(node, oldModel, newModel) {

196 node.elmHandler = newModel.handler;

234 node.elmHandler = newModel.handler;

197 if (state === newModel.state) return;

235 if (state === newModel.state) return;

198− var newStr = fromString(newModel.state.string);

236+ var newStr = JS.fromString(newModel.state.string);

199 if (node.value !== newStr) node.value = newStr;

237 if (node.value !== newStr) node.value = newStr;

200

238

201 var start = newModel.state.selectionStart;

239 var start = newModel.state.selectionStart;

@@ -236,7 +274,8 @@ Elm.Native.Graphics.Input = function(elm) {

236 checkboxes:checkboxes,

274 checkboxes:checkboxes,

237 fields:mkTextPool('text'),

275 fields:mkTextPool('text'),

238 emails:mkTextPool('email'),

276 emails:mkTextPool('email'),

239− passwords:mkTextPool('password')

277+ passwords:mkTextPool('password'),

278+ dropDown:dropDown

240 };

279 };

241

280

242};

281};