cleanup karax project for public consumption

experiments/scrollapp.nim

@@ -0,0 +1,171 @@
+
+import vdom, karax, karaxdsl, jdict, jstrutils
+
+type
+  Filter = enum
+    all, active, completed
+
+const
+  WindowSize = 50 # overestimating it does not harm
+
+var
+  entries: seq[(cstring, bool)]
+  visibleA = 0
+  visibleB = 10_000
+  selectedEntry = -1
+  filter: Filter
+
+proc onTodoEnter(ev: Event; n: VNode) =
+  entries.add((n.value, false))
+  n.value = ""
+
+proc removeHandler(ev: Event; n: VNode) =
+  entries[n.key] = (cstring(nil), false)
+
+proc editHandler(ev: Event; n: VNode) =
+  selectedEntry = n.key
+
+proc focusLost(ev: Event; n: VNode) = selectedEntry = -1
+
+proc editEntry(ev: Event; n: VNode) =
+  entries[n.key][0] = n.value
+  selectedEntry = -1
+
+proc toggleEntry(ev: Event; n: VNode) =
+  let id = n.key
+  entries[id][1] = not entries[id][1]
+
+proc onAllDone(ev: Event; n: VNode) =
+  entries = @[]
+  selectedEntry = -1
+
+proc clearCompleted(ev: Event, n: VNode) =
+  for i in 0..<entries.len:
+    if entries[i][1]: entries[i][0] = nil
+
+proc toClass(completed: bool): cstring =
+  (if completed: cstring"completed" else: cstring(nil))
+
+proc toChecked(checked: bool): cstring =
+  (if checked: cstring"checked" else: cstring(nil))
+
+proc selected(v: Filter): cstring =
+  (if filter == v: cstring"selected" else: cstring(nil))
+
+when false:
+  proc entry(id: int, d: cstring; completed, selected: bool): proc (): VNode =
+    var lastid: type(id)
+    var lastd: type(d)
+    var lastCompleted: type(completed)
+    var lastSelected: type(selected)
+    proc inner(): VNode =
+      if lastid != id or lastd != d or lastCompleted != completed or lastSelected != selected:
+        result = logic(id, d, completed, selected)
+        lastid = id
+        lastd = d
+        lastCompleted = completed
+        lastSelected = selected
+
+    result = inner
+
+proc lazyEntry(args: seq[VNode]): VNode =
+  let id = args[0].intValue
+  let d = args[1].text
+  let completed = args[2].intValue != 0
+  let selected = args[3].intValue != 0
+  result = buildHtml(tr):
+    li(class=toClass(completed), key = id):
+      if not selected:
+        tdiv(class = "view"):
+          input(class = "toggle", `type` = "checkbox", checked = toChecked(completed),
+                onclick=toggleEntry, key = id)
+          label(onDblClick=editHandler, key = id):
+            text d
+          button(class = "destroy", key = id, onclick = removeHandler)
+      else:
+        input(class = "edit", name = "title", key = id,
+          onfocusLost = focusLost,
+          onenter = editEntry, value = d, setFocus)
+
+proc createEntry(id: int; d: cstring; completed, selected: bool): VNode =
+  result = thunk(lazyEntry, id, d, completed, selected)
+
+proc myscroll(ev: Event; n: VNode) =
+  kout cstring"scrolling event here"
+
+proc createDom(): VNode =
+  result = buildHtml(tdiv(class="todomvc-wrapper")):
+    section(class = "todoapp"):
+      header(class = "header"):
+        h1:
+          text "todos"
+        input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
+              onenter = onTodoEnter, setFocus)
+      section(class = "main"):
+        input(class = "toggle-all", `type` = "checkbox", name = "toggle")
+        label(`for` = "toggle-all", onclick = onAllDone):
+          text "Mark all as complete"
+        tdiv(onscroll = myscroll, style = "overflow: visible; width: 0px; display: block; max-height: 1em"):
+          for i in 0..4:
+            tdiv:
+              text entries[i][0]
+
+        var entriesCount = 0
+        var completedCount = 0
+        ul(class = "todo-list"):
+          for i in visibleA..visibleB:
+            let d = entries[i]
+            if d[0] != nil:
+              let b = case filter
+                      of all: true
+                      of active: not d[1]
+                      of completed: d[1]
+              if b:
+                createEntry(i, d[0], d[1], i == selectedEntry)
+              inc completedCount, ord(d[1])
+              inc entriesCount
+      footer(class = "footer"):
+        span(class = "todo-count"):
+          strong:
+            text(&entriesCount)
+          text cstring" item" & &(if entriesCount != 1: "s left" else: " left")
+        ul(class = "filters"):
+          li:
+            anchor(class = selected(all), href = "#/"):
+              text "All"
+          li:
+            anchor(class = selected(active), href = "#/active"):
+              text "Active"
+          li:
+            anchor(class = selected(completed), href = "#/completed"):
+              text "Completed"
+        button(class = "clear-completed", onclick = clearCompleted):
+          text "Clear completed (" & &completedCount & ")"
+
+
+when false:
+  setOnscroll(proc(a, b: VKey; diff: int) =
+    const
+      overshoot1 = 50
+      overshoot2 = 5
+    if diff > 0:
+      # scroll downwards:
+      visibleA = max(a-overshoot2, 0)
+      visibleB = min(b+diff+overshoot1, entries.len-1)
+    elif diff < 0:
+      # scroll upwards:
+      visibleA = max(a+diff-overshoot1, 0)
+      visibleB = min(b+overshoot2, entries.len-1)
+  )
+
+setOnHashChange(proc(hash: cstring) =
+  if hash == cstring"#/": filter = all
+  elif hash == cstring"#/completed": filter = completed
+  elif hash == cstring"#/active": filter = active
+)
+setRenderer createDom
+
+proc onload(session: cstring) {.exportc.} =
+  for i in 0..visibleB:
+    entries.add((cstring"Entry " & &i, false))
+  init()