8e2c698 · elk · git.iko.soy

git.iko.soy/elk

Get rid of Selection, simplifying the field API

Real reason is that setSelectionRange also sets the focus. This behavior makes sense, so the underlying issue is that setting the selection for two fields is not meaningful because only one can have focus. How to set focus (for fields or inputs in general) is not really answered yet, so I think it makes the most sense to leave it out for now.

commit8e2c6989b4ae8ef4e8a27478ccb840d757fc2785 authorEvan Czaplicki <info@elm-lang.org> dateMon 3 Mar 2014, 00:08 (13 years ago) parent0dcee3e

2 files changed+10−96

compare with master

unifiedsplit

libraries/Graphics/Input/Field.elm+6−36 libraries/Native/Graphics/Input.js+4−60

libraries/Graphics/Input/Field.elm+6−36

@@ -6,9 +6,6 @@ approach as the [`Graphics.Input`](Graphics-Input) module for describing an

66# Create Fields

77@docs field, password, email

9−# Field Content

10−@docs Content, Selection, Direction, noContent

11−

129# Field Style

1310@docs Style, Outline, noOutline, Highlight, noHighlight, Dimensions, uniformly

1411-}

@@ -75,56 +72,29 @@ defaultStyle =

7572 , style = Text.defaultStyle

7673 }

7774

78−{-| Represents the current content of a text field. For example:

79−

80− Content "She sells sea shells" (Selection 0 3 Backward)

81−

82−This means the user highlighted the substring `"She"` backwards.

83−-}

84−type Content = { string:String, selection:Selection }

85−

86−{-| The selection within a text field. `start` is never greater than `end`:

87−

88− Selection 0 0 Forward -- cursor precedes all characters

89−

90− Selection 5 9 Backward -- highlighting characters starting after

91− -- the 5th and ending after the 9th

92−-}

93−type Selection = { start:Int, end:Int, direction:Direction }

94−

95−{-| The direction of selection.-}

96−data Direction = Forward | Backward

97−

98−{-| A field with no content:

99−

100− Content "" (Selection 0 0 Forward)

101−-}

102−noContent : Content

103−noContent = Content "" (Selection 0 0 Forward)

104−

10575{-| Create a text field. The following example creates a time-varying element

10676called `nameField`. As the user types their name, the field will be updated

10777to match what they have entered.

10878

109− name : Input Content

110− name = input noContent

79+ name : Input String

80+ name = input ""

11181

11282 nameField : Signal Element

11383 nameField = field name.handle id defaultStyle "Name" <~ name.signal

11484-}

115−field : Handle a -> (Content -> a) -> Style -> String -> Content -> Element

85+field : Handle a -> (String -> a) -> Style -> String -> String -> Element

11686field = Native.Graphics.Input.field

11787

11888{-| Same as `field` but the UI element blocks out each characters. -}

119−password : Handle a -> (Content -> a) -> Style -> String -> Content -> Element

89+password : Handle a -> (String -> a) -> Style -> String -> String -> Element

12090password = Native.Graphics.Input.password

12191

12292{-| Same as `field` but it adds an annotation that this field is for email

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

12494get a custom keyboard with an `@` and `.com` button.

12595-}

126−email : Handle a -> (Content -> a) -> Style -> String -> Content -> Element

96+email : Handle a -> (String -> a) -> Style -> String -> String -> Element

12797email = Native.Graphics.Input.email

12898

129−-- area : Handle a -> (Content -> a) -> Handle b -> ((Int,Int) -> b) -> (Int,Int) -> String -> Content -> Element

99+-- area : Handle a -> (String -> a) -> Handle b -> ((Int,Int) -> b) -> (Int,Int) -> String -> String -> Element

130100-- area = Native.Graphics.Input.area

libraries/Native/Graphics/Input.js+4−60

@@ -209,14 +209,6 @@ Elm.Native.Graphics.Input.make = function(elm) {

209209 });

210210 }

211211

212− function setRange(node, start, end, dir) {

213− if (node.parentNode) {

214− node.setSelectionRange(start, end, dir);

215− } else {

216− setTimeout(function(){node.setSelectionRange(start, end, dir);}, 0);

217− }

218− }

219−

220212 function updateIfNeeded(css, attribute, latestAttribute) {

221213 if (css[attribute] !== latestAttribute) {

222214 css[attribute] = latestAttribute;

@@ -267,10 +259,7 @@ Elm.Native.Graphics.Input.make = function(elm) {

267259

268260 field.type = model.type;

269261 field.placeholder = JS.fromString(model.placeHolder);

270− field.value = JS.fromString(model.content.string);

271− var selection = model.content.selection;

272− var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';

273− setRange(field, selection.start, selection.end, direction);

262+ field.value = JS.fromString(model.content);

274263

275264 field.elm_signal = model.signal;

276265 field.elm_handler = model.handler;

@@ -282,15 +271,7 @@ Elm.Native.Graphics.Input.make = function(elm) {

282271 String.fromCharCode(event.keyCode) +

283272 curr.slice(field.selectionEnd));

284273 var pos = field.selectionEnd + 1;

285− elm.notify(field.elm_signal.id, field.elm_handler({

286− _:{},

287− string: JS.toString(next),

288− selection: {

289− start: pos,

290− end: pos,

291− direction: { ctor:'Forward' }

292− },

293− }));

274+ elm.notify(field.elm_signal.id, field.elm_handler(JS.toString(next)));

294275 event.preventDefault();

295276 }

296277

@@ -300,46 +281,12 @@ Elm.Native.Graphics.Input.make = function(elm) {

300281 if (curr === next) {

301282 return;

302283 }

303−

304− var direction = field.selectionDirection === 'forward' ? 'Forward' : 'Backward';

305− var start = field.selectionStart;

306− var end = field.selectionEnd;

307284 field.value = field.elm_old_value;

308−

309− elm.notify(field.elm_signal.id, field.elm_handler({

310− _:{},

311− string: JS.toString(next),

312− selection: {

313− start: start,

314− end: end,

315− direction: { ctor: direction }

316− },

317− }));

285+ elm.notify(field.elm_signal.id, field.elm_handler(JS.toString(next)));

318286 }

319287

320− function mouseUpdate(event) {

321− var direction = field.selectionDirection === 'forward' ? 'Forward' : 'Backward';

322− elm.notify(field.elm_signal.id, field.elm_handler({

323− _:{},

324− string: field.value,

325− selection: {

326− start: field.selectionStart,

327− end: field.selectionEnd,

328− direction: { ctor: direction }

329− },

330− }));

331− }

332− function mousedown(event) {

333− mouseUpdate(event);

334− elm.node.addEventListener('mouseup', mouseup);

335− }

336− function mouseup(event) {

337− mouseUpdate(event);

338− elm.node.removeEventListener('mouseup', mouseup)

339− }

340288 field.addEventListener('keypress', keyUpdate);

341289 field.addEventListener('input', inputUpdate);

342− field.addEventListener('mousedown', mousedown);

343290

344291 return field;

345292 }

@@ -353,12 +300,9 @@ Elm.Native.Graphics.Input.make = function(elm) {

353300

354301 field.type = newModel.type;

355302 field.placeholder = JS.fromString(newModel.placeHolder);

356− var value = JS.fromString(newModel.content.string);

303+ var value = JS.fromString(newModel.content);

357304 field.value = value;

358305 field.elm_old_value = value;

359− var selection = newModel.content.selection;

360− var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';

361− setRange(field, selection.start, selection.end, direction);

362306 }

363307

364308 function mkField(type) {