experiments: added an animation to the example
This commit is contained in:
parent
371ae67c64
commit
037ddef91d
1 changed files with 17 additions and 2 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
|
|
||||||
import vdom, components, karax, karaxdsl, jdict, jstrutils
|
import vdom, components, karax, karaxdsl, jdict, jstrutils, dom
|
||||||
|
|
||||||
var
|
var
|
||||||
images: seq[cstring] = @[cstring"a", "b", "c", "d"]
|
images: seq[cstring] = @[cstring"a", "b", "c", "d"]
|
||||||
|
|
@ -7,14 +7,29 @@ var
|
||||||
proc carousel*(key: VKey): VNode {.component.} =
|
proc carousel*(key: VKey): VNode {.component.} =
|
||||||
state:
|
state:
|
||||||
var counter: int = 0
|
var counter: int = 0
|
||||||
|
var cntdown: int = 5
|
||||||
|
var timer: Timeout = nil
|
||||||
|
|
||||||
|
proc docount() =
|
||||||
|
cntdown = cntdown - 1
|
||||||
|
if cntdown == 0:
|
||||||
|
counter = (counter + 1) mod images.len
|
||||||
|
cntdown = 5
|
||||||
|
else:
|
||||||
|
timer = setTimeout(docount, 30)
|
||||||
|
redraw()
|
||||||
|
|
||||||
proc next(ev: Event; n: VNode) =
|
proc next(ev: Event; n: VNode) =
|
||||||
counter = (counter + 1) mod images.len
|
if timer != nil:
|
||||||
|
clearTimeout(timer)
|
||||||
|
timer = setTimeout(docount, 30)
|
||||||
|
|
||||||
result = buildHtml(tdiv(key=key)):
|
result = buildHtml(tdiv(key=key)):
|
||||||
text images[counter]
|
text images[counter]
|
||||||
button(onclick = next):
|
button(onclick = next):
|
||||||
text "Next"
|
text "Next"
|
||||||
|
if cntdown != 5:
|
||||||
|
text &cntdown
|
||||||
|
|
||||||
proc createDom(): VNode =
|
proc createDom(): VNode =
|
||||||
result = buildHtml(table):
|
result = buildHtml(table):
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue