43 lines
978 B
Nim
43 lines
978 B
Nim
## Common widget implemenations
|
|
|
|
import knete
|
|
|
|
const
|
|
cross* = "x"
|
|
plus* = kstring"+"
|
|
|
|
const
|
|
LEFT* = 37
|
|
UP* = 38
|
|
RIGHT* = 39
|
|
DOWN* = 40
|
|
TAB* = 9
|
|
ESC* = 27
|
|
ENTER* = 13
|
|
|
|
proc editable*(x: kstring; onchanged: proc (value: kstring);
|
|
isEdited = false): Element =
|
|
proc onenter(ev: Event) = ev.target.blur()
|
|
proc submit(ev: Event) =
|
|
onchanged(ev.target.value)
|
|
# close the loop: This is a common pattern in Knete.
|
|
replace(result, editable(ev.target.value, onchanged, false))
|
|
|
|
proc makeEditable() =
|
|
# close the loop: This is a common pattern in Knete.
|
|
replace(result, editable(x, onchanged, true))
|
|
|
|
result = buildHtml():
|
|
if isEdited:
|
|
input(class = "edit",
|
|
onblur = submit,
|
|
onkeyupenter = onenter,
|
|
value = x,
|
|
setFocus = true)
|
|
else:
|
|
span(onclick = makeEditable):
|
|
text x
|
|
|
|
template bindField*(field): Element =
|
|
editable field, proc (value: kstring) =
|
|
field = value
|