162141b · elk · git.iko.soy

git.iko.soy/elk

on master help sign in

Improve behavior of text field updates, but not entirely

162141bEvan Czaplicki13 years ago

libraries/Native/Graphics/Input.js+40−28

compare with master

unifiedsplit

@@ -217,7 +217,11 @@ Elm.Native.Graphics.Input.make = function(elm) {

217

218 function renderField(model) {

219 var field = newNode('input');

220+ field.style.border = 'none';

221+ field.style.outline = 'none';

222+ field.style.backgroundColor = 'transparent';

220 field.style.pointerEvents = 'auto';

223 field.style.pointerEvents = 'auto';

224+

221 field.elm_signal = model.signal;

225 field.elm_signal = model.signal;

222 field.elm_handler = model.handler;

226 field.elm_handler = model.handler;

223

227

@@ -227,53 +231,61 @@ Elm.Native.Graphics.Input.make = function(elm) {

227 var selection = model.content.selection;

231 var selection = model.content.selection;

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

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

229 setRange(field, selection.start, selection.end, direction);

233 setRange(field, selection.start, selection.end, direction);

230− field.style.border = 'none';

231

234

232− function update() {

235+ function keyUpdate(event) {

233− var direction = field.selectionDirection === 'backward' ? 'Backward' : 'Forward';

236+ var curr = field.value;

237+ var next = (curr.slice(0, field.selectionStart) +

238+ String.fromCharCode(event.keyCode) +

239+ curr.slice(field.selectionEnd));

240+ var pos = field.selectionEnd + 1;

234 elm.notify(field.elm_signal.id, field.elm_handler({

241 elm.notify(field.elm_signal.id, field.elm_handler({

235 _:{},

242 _:{},

236− string:JS.toString(field.value),

243+ string: JS.toString(next),

237 selection: {

244 selection: {

238− start:field.selectionStart,

245+ start: pos,

239− end:field.selectionEnd,

246+ end: pos,

240− direction: { ctor:direction }

247+ direction: { ctor:'Forward' }

241 },

248 },

242 }));

249 }));

250+ event.preventDefault();

243 }

251 }

252+

253+ function mouseUpdate(event) {

254+ var direction = field.selectionDirection === 'forward' ? 'Forward' : 'Backward';

255+ elm.notify(field.elm_signal.id, field.elm_handler({

256+ _:{},

257+ string: field.value,

258+ selection: {

259+ start: field.selectionStart,

260+ end: field.selectionEnd,

261+ direction: { ctor: direction }

262+ },

263+ }));

264+ }

244− function mousedown() {

265+ function mousedown(event) {

245− update();

266+ mouseUpdate(event);

246 elm.node.addEventListener('mouseup', mouseup);

267 elm.node.addEventListener('mouseup', mouseup);

247 }

268 }

248− function mouseup() {

269+ function mouseup(event) {

249− update();

270+ mouseUpdate(event);

250 elm.node.removeEventListener('mouseup', mouseup)

271 elm.node.removeEventListener('mouseup', mouseup)

251 }

272 }

252− field.addEventListener('keyup', update);

273+ field.addEventListener('keypress', keyUpdate);

253 field.addEventListener('mousedown', mousedown);

274 field.addEventListener('mousedown', mousedown);

254

275

255 return field;

276 return field;

256 }

277 }

257

278

258− function updateField(node, oldModel, newModel) {

279+ function updateField(field, oldModel, newModel) {

280+ field.elm_signal = newModel.signal;

259− node.elmHandler = newModel.handler;

281+ field.elm_handler = newModel.handler;

260− var newStr = JS.fromString(newModel.content.string);

261− if (node.value !== newStr) node.value = newStr;

262

282

283+ field.type = newModel.type;

284+ field.placeholder = JS.fromString(newModel.placeHolder);

285+ field.value = JS.fromString(newModel.content.string);

263 var selection = newModel.content.selection;

286 var selection = newModel.content.selection;

264− var start = selection.start;

265− var end = selection.end;

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

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

267− if (end < start) {

268− start = end;

269− end = selection.start;

270− }

271−

272− if (node.selectionStart !== start

273− || node.selectionEnd !== end

274− || node.selectionDirection !== direction) {

275− setRange(node, start, end, direction);

288+ setRange(field, selection.start, selection.end, direction);

276− }

277 }

289 }

278

290

279 function mkField(type) {

291 function mkField(type) {