Add sample of press enter programmatically

examples/todoapp/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <title>Todo app</title>
+  <link rel="stylesheet" href="style.css">
+  
+</head>
+
+<body id="body">
+<div id="ROOT" />
+
+<script type="text/javascript" src="nimcache/todoapp.js"></script>
+<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
+<script type="text/javascript">
+
+function inputTodo(doc) {
+	var inputEvent = document.createEvent('Event');
+	inputEvent.initEvent('input', true, true);
+	doc.value = 'Do task';
+  doc.dispatchEvent(inputEvent);
+  //node.click();
+}
+
+function pressEnter1() {
+  var e = jQuery.Event("keypress");
+  e.which = 13; //choose the one you want
+  e.keyCode = 13;
+  $("#test").trigger(e);
+}
+
+function pressEnter(doc) {
+  var kEvent = document.createEvent("KeyboardEvent");
+  kEvent.initKeyboardEvent("keydown", 
+                  false, 
+                  false, 
+                  null, 
+                  13, 
+                  13, 
+                  false,
+                  false, 
+                  false, 
+                  false, 
+                  false);
+ 
+  doc.dispatchEvent(kEvent);
+}
+
+
+function test() {
+  var t = document.getElementsByClassName('a')[0];
+  t.click();
+}
+
+function main() {
+  var doc = document.getElementsByClassName('new-todo')[0];
+  if (doc == null) {
+    alert("a");
+  }
+  //var doc = getFacts(document);
+  inputTodo(doc);
+  //doc = getFacts(document);
+  pressEnter(doc);
+  //test();
+}
+
+setTimeout(main, 500);
+</script>
+</body>
+</html>
+

examples/todoapp/todoapp.nim

@@ -1,113 +1,19 @@
 
 import vdom, karax, karaxdsl, jstrutils
 
-type
-  Filter = enum
-    all, active, completed
-
-var
-  entries: seq[(cstring, bool)]
-  selectedEntry = -1
-  filter: Filter
-
 proc onTodoEnter(ev: Event; n: VNode) =
-  entries.add((n.value, false))
-  n.value = ""
+  kout cstring"ENTER"
 
-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))
-
-proc createEntry(id: int; d: cstring; completed, selected: bool): VNode =
-  result = buildHtml(tr):
-    li(class=toClass(completed)):
-      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,
-          onblur = focusLost,
-          onkeyupenter = editEntry, value = d, setFocus)
+proc test(ev: Event, n: VNode) = 
+  kout cstring"teeest"
 
 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",
+        input(class = "new-todo", id = "test", placeholder="What needs to be done?", name = "newTodo",
               onkeyupenter = onTodoEnter, setFocus)
-      section(class = "main"):
-        input(class = "toggle-all", `type` = "checkbox", name = "toggle")
-        label(`for` = "toggle-all", onclick = onAllDone):
-          text "Mark all as complete"
-        var entriesCount = 0
-        var completedCount = 0
-        ul(class = "todo-list"):
-          for i, d in pairs(entries):
-            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:
-            a(class = selected(all), href = "#/"):
-              text "All"
-          li:
-            a(class = selected(active), href = "#/active"):
-              text "Active"
-          li:
-            a(class = selected(completed), href = "#/completed"):
-              text "Completed"
-        button(class = "clear-completed", onclick = clearCompleted):
-          text "Clear completed (" & &completedCount & ")"
+      #button(class = "a", onclick = test):
+        #text "TEEEEST"
 
-setOnHashChange(proc(hash: cstring) =
-  if hash == "#/": filter = all
-  elif hash == "#/completed": filter = completed
-  elif hash == "#/active": filter = active
-)
 setRenderer createDom

src/karax.nim

@@ -35,18 +35,21 @@ template keyeventBody() =
 
 proc wrapEvent(d: Node; n: VNode; k: EventKind; action: EventHandler) =
   proc stdWrapper(): (proc (ev: Event)) =
+    kout cstring"wrapEvent"
     let action = action
     let n = n
     result = proc (ev: Event) =
       action(ev, n)
 
   proc enterWrapper(): (proc (ev: Event)) =
+    kout cstring"enterWrapper"
     let action = action
     let n = n
     result = proc (ev: Event) =
       if ev.keyCode == 13: keyeventBody()
 
   proc laterWrapper(): (proc (ev: Event)) =
+    kout cstring"laterWrapper"
     let action = action
     let n = n
     var timer: Timeout
@@ -268,6 +271,7 @@ proc addEventHandler*(n: VNode; k: EventKind; action: EventHandler) =
   ## ``tempNode.addEventHandler(tagNode, EventKind.onEvent, wrapper)``
   ## where ``wrapper`` calls the passed ``action`` and then triggers
   ## a ``redraw``.
+  kout cstring"fdfdfdfdf"
   proc wrapper(ev: Event; n: VNode) =
     action(ev, n)
     redraw()