add experiment what Karax would look like without DOM diff'ing but with barebones reactive programming

experiments/trello/knete.nim

@@ -0,0 +1,752 @@
+## Raw DOM manipulation. No DOM diff'ing, no cry.
+
+import macros, tables
+from strutils import startsWith, toLowerAscii, toUpperAscii
+
+when defined(js):
+  type kstring* = cstring
+else:
+  type kstring* = string
+
+type
+  Tag* {.pure.} = enum
+    text = "#text",
+
+    html, head, title, base, link, meta, style,
+    script, noscript,
+    body, section, nav, article, aside,
+    h1, h2, h3, h4, h5, h6,
+    header, footer, address, main
+
+    p, hr, pre, blockquote, ol, ul, li,
+    dl, dt, dd,
+    figure, figcaption,
+
+    tdiv = "div",
+
+    a, em, strong, small,
+    strikethrough = "s", cite, quote,
+    dfn, abbr, data, time, code, `var` = "var", samp,
+    kdb, sub, sup, italic = "i", bold = "b", underlined = "u",
+    mark, ruby, rt, rp, bdi, dbo, span, br, wbr,
+    ins, del, img, iframe, embed, `object` = "object",
+    param, video, audio, source, track, canvas, map,
+    area, svg, math,
+
+    table, caption, colgroup, col, tbody, thead,
+    tfoot, tr, td, th,
+
+    form, fieldset, legend, label, input, button,
+    select, datalist, optgroup, option, textarea,
+    keygen, output, progress, meter,
+    details, summary, command, menu
+
+type
+  EventKind* {.pure.} = enum ## The events supported by the virtual DOM.
+    onclick, ## An element is clicked.
+    oncontextmenu, ## An element is right-clicked.
+    ondblclick, ## An element is double clicked.
+    onkeyup, ## A key was released.
+    onkeydown, ## A key is pressed.
+    onkeypressed, # A key was pressed.
+    onfocus, ## An element got the focus.
+    onblur, ## An element lost the focus.
+    onchange, ## The selected value of an element was changed.
+    onscroll, ## The user scrolled within an element.
+
+    onmousedown, ## A pointing device button (usually a mouse) is pressed
+                 ## on an element.
+    onmouseenter, ## A pointing device is moved onto the element that
+                  ## has the listener attached.
+    onmouseleave, ## A pointing device is moved off the element that
+                  ## has the listener attached.
+    onmousemove, ## A pointing device is moved over an element.
+    onmouseout, ## A pointing device is moved off the element that
+                ## has the listener attached or off one of its children.
+    onmouseover, ## A pointing device is moved onto the element that has
+                 ## the listener attached or onto one of its children.
+    onmouseup, ## A pointing device button is released over an element.
+
+    ondrag,  ## An element or text selection is being dragged (every 350ms).
+    ondragend, ## A drag operation is being ended (by releasing a mouse button
+               ## or hitting the escape key).
+    ondragenter, ## A dragged element or text selection enters a valid drop target.
+    ondragleave, ## A dragged element or text selection leaves a valid drop target.
+    ondragover, ## An element or text selection is being dragged over a valid
+                ## drop target (every 350ms).
+    ondragstart, ## The user starts dragging an element or text selection.
+    ondrop, ## An element is dropped on a valid drop target.
+
+    onsubmit, ## A form is submitted
+    oninput, ## An input value changes
+
+    onkeyupenter, ## vdom extension: an input field received the ENTER key press
+    onkeyuplater  ## vdom extension: a key was pressed and some time
+                  ## passed (useful for on-the-fly text completions)
+
+
+macro buildLookupTables(): untyped =
+  var a = newTree(nnkBracket)
+  for i in low(Tag)..high(Tag):
+    let x = $i
+    let y = if x[0] == '#': x else: toUpperAscii(x)
+    a.add(newCall("kstring", newLit(y)))
+  var e = newTree(nnkBracket)
+  for i in low(EventKind)..high(EventKind):
+    e.add(newCall("kstring", newLit(substr($i, 2))))
+
+  template tmpl(a, e) {.dirty.} =
+    const
+      toTagName*: array[Tag, kstring] = a
+      toEventName*: array[EventKind, kstring] = e
+
+  result = getAst tmpl(a, e)
+
+buildLookupTables()
+
+# ---------------- CSS ----------------------------------------------
+
+type
+  StyleAttr* {.pure.} = enum
+    ## The style attributes supported by the virtual DOM.
+    ## Reference: https://www.w3schools.com/jsref/dom_obj_style.asp
+    alignContent
+    alignItems
+    alignSelf
+    animation
+    animationDelay
+    animationDirection
+    animationDuration
+    animationFillMode
+    animationIterationCount
+    animationName
+    animationTimingFunction
+    animationPlayState
+    background
+    backgroundAttachment
+    backgroundColor
+    backgroundImage
+    backgroundPosition
+    backgroundRepeat
+    backgroundClip
+    backgroundOrigin
+    backgroundSize
+    backfaceVisibility
+    border
+    borderBottom
+    borderBottomColor
+    borderBottomLeftRadius
+    borderBottomRightRadius
+    borderBottomStyle
+    borderBottomWidth
+    borderCollapse
+    borderColor
+    borderImage
+    borderImageOutset
+    borderImageRepeat
+    borderImageSlice
+    borderImageSource
+    borderImageWidth
+    borderLeft
+    borderLeftColor
+    borderLeftStyle
+    borderLeftWidth
+    borderRadius
+    borderRight
+    borderRightColor
+    borderRightStyle
+    borderRightWidth
+    borderSpacing
+    borderStyle
+    borderTop
+    borderTopColor
+    borderTopLeftRadius
+    borderTopRightRadius
+    borderTopStyle
+    borderTopWidth
+    borderWidth
+    bottom
+    boxDecorationBreak
+    boxShadow
+    boxSizing
+    captionSide
+    clear
+    clip
+    color
+    columnCount
+    columnFill
+    columnGap
+    columnRule
+    columnRuleColor
+    columnRuleStyle
+    columnRuleWidth
+    columns
+    columnSpan
+    columnWidth
+    content
+    counterIncrement
+    counterReset
+    cursor
+    direction
+    display
+    emptyCells
+    filter
+    flex
+    flexBasis
+    flexDirection
+    flexFlow
+    flexGrow
+    flexShrink
+    flexWrap
+    cssFloat
+    font
+    fontFamily
+    fontSize
+    fontSizeAdjust
+    fontStretch
+    fontStyle
+    fontVariant
+    fontWeight
+    hangingPunctuation
+    height
+    hyphens
+    icon
+    imageOrientation
+    justifyContent
+    left
+    letterSpacing
+    lineHeight
+    listStyle
+    listStyleImage
+    listStylePosition
+    listStyleType
+    margin
+    marginBottom
+    marginLeft
+    marginRight
+    marginTop
+    maxHeight
+    maxWidth
+    minHeight
+    minWidth
+    navDown
+    navIndex
+    navLeft
+    navRight
+    navUp
+    opacity
+    order
+    orphans
+    outline
+    outlineColor
+    outlineOffset
+    outlineStyle
+    outlineWidth
+    overflow
+    overflowX
+    overflowY
+    padding
+    paddingBottom
+    paddingLeft
+    paddingRight
+    paddingTop
+    pageBreakAfter
+    pageBreakBefore
+    pageBreakInside
+    perspective
+    perspectiveOrigin
+    pointerEvents
+    position
+    quotes
+    resize
+    right
+    scrollbar3dLightColor # note: missing in w3schools reference
+    scrollbarArrowColor # note: missing in w3schools reference
+    scrollbarBaseColor # note: missing in w3schools reference
+    scrollbarDarkshadowColor # note: missing in w3schools reference
+    scrollbarFaceColor # note: missing in w3schools reference
+    scrollbarHighlightColor # note: missing in w3schools reference
+    scrollbarShadowColor # note: missing in w3schools reference
+    scrollbarTrackColor # note: missing in w3schools reference
+    tableLayout
+    tabSize
+    textAlign
+    textAlignLast
+    textDecoration
+    textDecorationColor
+    textDecorationLine
+    textDecorationStyle
+    textIndent
+    textJustify
+    textOverflow
+    textShadow
+    textTransform
+    top
+    transform
+    transformOrigin
+    transformStyle
+    transition
+    transitionDelay
+    transitionDuration
+    transitionProperty
+    transitionTimingFunction
+    unicodeBidi
+    userSelect
+    verticalAlign
+    visibility
+    whiteSpace
+    width
+    wordBreak
+    wordSpacing
+    wordWrap
+    widows
+    zIndex
+
+macro buildStyleLookupTable(): untyped =
+  var e = newTree(nnkBracket)
+  for i in low(StyleAttr)..high(StyleAttr):
+    e.add(newCall("kstring", newLit($i)))
+  template tmpl(e) {.dirty.} =
+    const
+      toStyleAttrName: array[StyleAttr, kstring] = e
+  result = getAst tmpl(e)
+
+buildStyleLookupTable()
+
+type
+  StyleObj {.importc.} = object
+    background*: cstring
+    backgroundAttachment*: cstring
+    backgroundColor*: cstring
+    backgroundImage*: cstring
+    backgroundPosition*: cstring
+    backgroundRepeat*: cstring
+    border*: cstring
+    borderBottom*: cstring
+    borderBottomColor*: cstring
+    borderBottomStyle*: cstring
+    borderBottomWidth*: cstring
+    borderColor*: cstring
+    borderLeft*: cstring
+    borderLeftColor*: cstring
+    borderLeftStyle*: cstring
+    borderLeftWidth*: cstring
+    borderRight*: cstring
+    borderRightColor*: cstring
+    borderRightStyle*: cstring
+    borderRightWidth*: cstring
+    borderStyle*: cstring
+    borderTop*: cstring
+    borderTopColor*: cstring
+    borderTopStyle*: cstring
+    borderTopWidth*: cstring
+    borderWidth*: cstring
+    bottom*: cstring
+    captionSide*: cstring
+    clear*: cstring
+    clip*: cstring
+    color*: cstring
+    cursor*: cstring
+    direction*: cstring
+    display*: cstring
+    emptyCells*: cstring
+    cssFloat*: cstring
+    font*: cstring
+    fontFamily*: cstring
+    fontSize*: cstring
+    fontStretch*: cstring
+    fontStyle*: cstring
+    fontVariant*: cstring
+    fontWeight*: cstring
+    height*: cstring
+    left*: cstring
+    letterSpacing*: cstring
+    lineHeight*: cstring
+    listStyle*: cstring
+    listStyleImage*: cstring
+    listStylePosition*: cstring
+    listStyleType*: cstring
+    margin*: cstring
+    marginBottom*: cstring
+    marginLeft*: cstring
+    marginRight*: cstring
+    marginTop*: cstring
+    maxHeight*: cstring
+    maxWidth*: cstring
+    minHeight*: cstring
+    minWidth*: cstring
+    overflow*: cstring
+    padding*: cstring
+    paddingBottom*: cstring
+    paddingLeft*: cstring
+    paddingRight*: cstring
+    paddingTop*: cstring
+    pageBreakAfter*: cstring
+    pageBreakBefore*: cstring
+    pointerEvents*: cstring
+    position*: cstring
+    right*: cstring
+    scrollbar3dLightColor*: cstring
+    scrollbarArrowColor*: cstring
+    scrollbarBaseColor*: cstring
+    scrollbarDarkshadowColor*: cstring
+    scrollbarFaceColor*: cstring
+    scrollbarHighlightColor*: cstring
+    scrollbarShadowColor*: cstring
+    scrollbarTrackColor*: cstring
+    tableLayout*: cstring
+    textAlign*: cstring
+    textDecoration*: cstring
+    textIndent*: cstring
+    textTransform*: cstring
+    transform*: cstring
+    top*: cstring
+    verticalAlign*: cstring
+    visibility*: cstring
+    width*: cstring
+    wordSpacing*: cstring
+    zIndex*: int
+  Style* = ref StyleObj
+
+  ElementObj {.importc.} = object
+    id*, class*, value*: cstring
+    disabled*: bool
+    style*: Style
+  Element* = ref ElementObj
+
+  DocumentObj {.importc.} = object
+  Document = ref DocumentObj
+
+proc setStyle(s: Style; key, val: cstring) {.importcpp: "#[#] = #", noSideEffect.}
+
+proc applyStyles*(e: Element; pairs: openArray[(StyleAttr, kstring)]) =
+  for x in pairs:
+    e.style.setStyle(toStyleAttrName[x[0]], x[1])
+
+# ------- Tree manipulation ---------------------------
+
+var document {.importc.}: Document
+
+proc parent*(x: Element): Element {.importcpp: "#.parentNode".}
+
+proc up*(x: Element; className: cstring): Element =
+  result = x
+  while result != nil and result.class != className:
+    result = result.parent
+
+proc len*(x: Element): int {.importcpp: "#.childNodes.length".}
+proc `[]`*(x: Element; idx: int): Element {.importcpp: "#.childNodes[#]".}
+proc getElementById*(id: cstring): Element {.importc: "document.getElementById", nodecl.}
+proc add*(n, child: Element) {.importcpp: "appendChild".}
+
+proc removeChild(n, child: Element) {.importcpp.}
+proc replaceChild(n, newNode, oldNode: Element) {.importcpp.}
+
+proc replace*(self, by: Element) = replaceChild(self.parent, by, self)
+proc delete*(self: Element) = removeChild(self.parent, self)
+
+proc insertBefore(n, newNode, before: Element) {.importcpp.}
+proc insert*(before, newNode: Element) = insertBefore(before.parent, newNode, before)
+
+proc createTextNode(d: Document, text: cstring): Element {.importcpp.}
+proc text*(s: kstring): Element = createTextNode(document, s)
+
+iterator items*(n: Element): Element =
+  for i in 0..<n.len: yield n[i]
+
+proc createElement(d: Document, identifier: cstring): Element {.importcpp.}
+proc setAttr*(n: Element; key, val: cstring) {.importcpp: "#.setAttribute(@)".}
+
+proc tree*(kind: Tag; kids: varargs[Element]): Element =
+  result = createElement(document, toTagName[kind])
+  for k in kids: result.add k
+
+proc tree*(kind: Tag; attrs: openarray[(kstring, kstring)];
+           kids: varargs[Element]): Element =
+  result = tree(kind, kids)
+  for a in attrs: result.setAttr(a[0], a[1])
+
+# other arbitrary stuff belonging to Element
+proc focus*(e: Element) {.importcpp.}
+proc scrollIntoView*(e: Element) {.importcpp.}
+proc blur*(e: Element) {.importcpp.}
+
+proc toChecked*(checked: bool): cstring =
+  (if checked: cstring"checked" else: cstring(nil))
+
+proc toDisabled*(disabled: bool): cstring =
+  (if disabled: cstring"disabled" else: cstring(nil))
+
+# -------------- Timer handling --------------------
+
+type
+  Timeout* {.importc.} = ref object of RootObj
+
+proc setTimeout*(action: proc(); ms: int): Timeout {.importc, nodecl.}
+proc clearTimeout*(t: Timeout) {.importc, nodecl.}
+
+# -------------- Event handling --------------------
+
+type
+  EventObj {.importc.} = object
+    target*: Element
+    altKey*, ctrlKey*, metaKey*, shiftKey*: bool
+    code*: cstring
+    isComposing*: bool
+    key*: cstring
+    keyCode*: int
+    location*: int
+  Event* = ref EventObj
+
+  EventHandler* = proc (ev: Event) {.closure.}
+
+proc addEventListener(e: Element, ev: cstring, cb: proc(ev: Event),
+  useCapture = false) {.importcpp.}
+
+proc addEventHandler*(e: Element; k: EventKind; action: EventHandler) =
+  case k
+  of EventKind.onkeyuplater:
+    proc laterWrapper(): EventHandler =
+      let action = action
+      var timer: Timeout
+      result = proc (ev: Event) =
+        proc wrapper() = action(ev)
+        if timer != nil: clearTimeout(timer)
+        timer = setTimeout(wrapper, 400)
+
+    e.addEventListener("keyup", laterWrapper())
+  of EventKind.onkeyupenter:
+    proc enterWrapper(): EventHandler =
+      let action = action
+      result = proc (ev: Event) =
+        if ev.keyCode == 13: action(ev)
+
+    e.addEventListener("keyup", enterWrapper())
+  else:
+    e.addEventListener(toEventName[k], action)
+
+proc addEventHandler*(e: Element; k: EventKind; action: proc()) =
+  addEventHandler e, k, (proc (ev: Event) = action())
+
+proc prepareDragData*(ev: Event; datatype, data: cstring)
+  {.importcpp: "#.dataTransfer.setData(@)".}
+
+proc recvDragData*(ev: Event; datatype: cstring): cstring
+  {.importcpp: "#.dataTransfer.getData(@)".}
+
+proc preventDefault*(ev: Event) {.importcpp.}
+
+# ------------------ Init handling -----------------------------------
+
+proc replaceById(id: cstring; newTree: Element) =
+  let x = getElementById(id)
+  x.parent.replaceChild(newTree, x)
+  newTree.id = id
+
+proc setWindowOnload(h: EventHandler) {.importcpp: "window.onload = #".}
+proc setInitializer*(initializer: proc (hashPart: kstring): Element;
+                     root: cstring = "ROOT") =
+  var onhashChange {.importc: "window.onhashchange".}: proc()
+  var hashPart {.importc: "window.location.hash".}: cstring
+
+  setWindowOnload proc (ev: Event) =
+    replaceById root, initializer(hashPart)
+  onhashchange = proc () =
+    replaceById root, initializer(hashPart)
+
+# ------------------ DSL section -------------------------------------
+
+const
+  StmtContext = ["inc", "echo", "dec", "!"]
+  SpecialAttrs = ["id", "class", "value"]
+
+type
+  ComponentKind {.pure.} = enum
+    None,
+    Tag
+
+var
+  allcomponents {.compileTime.} = initTable[string, ComponentKind]()
+
+proc isComponent(x: string): ComponentKind {.compileTime.} =
+  allcomponents.getOrDefault(x)
+
+proc addTags() {.compileTime.} =
+  let x = (bindSym"Tag").getTypeImpl
+  expectKind(x, nnkEnumTy)
+  for i in ord(Tag.html)..ord(Tag.high):
+    # +1 because of empty node at the start of the enum AST:
+    let tag = $x[i+1]
+    allcomponents[tag] = ComponentKind.Tag
+
+static:
+  addTags()
+
+
+proc getName(n: NimNode): string =
+  case n.kind
+  of nnkIdent:
+    result = $n.ident
+  of nnkAccQuoted:
+    result = ""
+    for i in 0..<n.len:
+      result.add getName(n[i])
+  of nnkStrLit..nnkTripleStrLit:
+    result = n.strVal
+  else:
+    #echo repr n
+    expectKind(n, nnkIdent)
+
+proc newDotAsgn(tmp: NimNode, key: string, x: NimNode): NimNode =
+  result = newTree(nnkAsgn, newDotExpr(tmp, newIdentNode key), x)
+
+proc toKstring(n: NimNode): NimNode =
+  if n.kind == nnkStrLit:
+    result = newCall(bindSym"kstring", n)
+  else:
+    result = copyNimNode(n)
+    for child in n:
+      result.add toKstring(child)
+
+proc tcall2(n, tmpContext: NimNode): NimNode =
+  # we need to distinguish statement and expression contexts:
+  # every call statement 's' needs to be transformed to 'dest.add s'.
+  # If expressions need to be distinguished from if statements. Since
+  # we know we start in a statement context, it's pretty simple to
+  # figure out expression contexts: In calls everything is an expression
+  # (except for the last child of the macros we consider here),
+  # lets, consts, types can be considered as expressions
+  # case is complex, calls are assumed to produce a value.
+  when defined(js):
+    template evHandler(): untyped = bindSym"addEventHandler"
+  else:
+    template evHandler(): untyped = ident"addEventHandler"
+
+  case n.kind
+  of nnkLiterals, nnkIdent, nnkSym, nnkDotExpr, nnkBracketExpr:
+    if tmpContext != nil:
+      result = newCall(bindSym"add", tmpContext, n)
+    else:
+      result = n
+  of nnkForStmt, nnkIfExpr, nnkElifExpr, nnkElseExpr,
+      nnkOfBranch, nnkElifBranch, nnkExceptBranch, nnkElse,
+      nnkConstDef, nnkWhileStmt, nnkIdentDefs, nnkVarTuple:
+    # recurse for the last son:
+    result = copyNimTree(n)
+    let L = n.len
+    assert n.len == result.len
+    if L > 0:
+      result[L-1] = tcall2(result[L-1], tmpContext)
+  of nnkStmtList, nnkStmtListExpr, nnkWhenStmt, nnkIfStmt, nnkTryStmt,
+     nnkFinally:
+    # recurse for every child:
+    result = copyNimNode(n)
+    for x in n:
+      result.add tcall2(x, tmpContext)
+  of nnkCaseStmt:
+    # recurse for children, but don't add call for case ident
+    result = copyNimNode(n)
+    result.add n[0]
+    for i in 1 ..< n.len:
+      result.add tcall2(n[i], tmpContext)
+  of nnkProcDef:
+    let name = getName n[0]
+    if name.startsWith"on":
+      # turn it into an anon proc:
+      let anon = copyNimTree(n)
+      anon[0] = newEmptyNode()
+      if tmpContext == nil:
+        error "no Element to attach the event handler to"
+      else:
+        result = newCall(evHandler(), tmpContext,
+                         newDotExpr(bindSym"EventKind", n[0]), anon, ident("kxi"))
+    else:
+      result = n
+  of nnkVarSection, nnkLetSection, nnkConstSection:
+    result = n
+  of nnkCallKinds - {nnkInfix}:
+    let op = getName(n[0])
+    if isComponent(op) == ComponentKind.Tag:
+      let tmp = genSym(nskLet, "tmp")
+      let call = newCall(bindSym"tree", newDotExpr(bindSym"Tag", n[0]))
+      result = newTree(
+        if tmpContext == nil: nnkStmtListExpr else: nnkStmtList,
+        newLetStmt(tmp, call))
+      for i in 1 ..< n.len:
+        # named parameters are transformed into attributes or events:
+        let x = n[i]
+        if x.kind == nnkExprEqExpr:
+          let key = getName x[0]
+          if key.startsWith("on"):
+            result.add newCall(evHandler(),
+              tmp, newDotExpr(bindSym"EventKind", x[0]), x[1])
+          elif key in SpecialAttrs:
+            result.add newDotAsgn(tmp, key, x[1])
+          elif eqIdent(key, "style"):
+            result.add newCall(bindSym"applyStyles", tmp, toKstring x[1])
+          elif eqIdent(key, "setFocus"):
+            result.add newCall(bindSym"focus", tmp)
+          else:
+            result.add newCall(bindSym"setAttr", tmp, newLit(key), x[1])
+        elif eqIdent(x, "setFocus"):
+          result.add newCall(bindSym"focus", tmp)
+        else:
+          result.add tcall2(x, tmp)
+      if tmpContext == nil:
+        result.add tmp
+      else:
+        result.add newCall(bindSym"add", tmpContext, tmp)
+    elif tmpContext != nil and op notin StmtContext:
+      var hasEventHandlers = false
+      for i in 1..<n.len:
+        let it = n[i]
+        if it.kind in {nnkProcDef, nnkStmtList}:
+          hasEventHandlers = true
+          break
+      if not hasEventHandlers:
+        result = newCall(bindSym"add", tmpContext, n)
+      else:
+        let tmp = genSym(nskLet, "tmp")
+        var slicedCall = newCall(n[0])
+        let ex = newTree(nnkStmtListExpr)
+        ex.add newEmptyNode() # will become the let statement
+        for i in 1..<n.len:
+          let it = n[i]
+          if it.kind in {nnkProcDef, nnkStmtList}:
+            ex.add tcall2(it, tmp)
+          else:
+            slicedCall.add it
+        ex[0] = newLetStmt(tmp, slicedCall)
+        ex.add tmp
+        result = newCall(bindSym"add", tmpContext, ex)
+    elif op == "!" and n.len == 2:
+      result = n[1]
+    else:
+      result = n
+  else:
+    result = n
+
+macro buildHtml*(tag, children: untyped): Element =
+  let kids = newProc(procType=nnkDo, body=children)
+  expectKind kids, nnkDo
+  var call: NimNode
+  if tag.kind in nnkCallKinds:
+    call = tag
+  else:
+    call = newCall(tag)
+  call.add body(kids)
+  result = tcall2(call, nil)
+  when defined(debugKaraxDsl):
+    echo repr result
+
+macro buildHtml*(children: untyped): Element =
+  let kids = newProc(procType=nnkDo, body=children)
+  expectKind kids, nnkDo
+  result = tcall2(body(kids), nil)
+  when defined(debugKaraxDsl):
+    echo repr result
+
+macro flatHtml*(tag: untyped): Element =
+  result = tcall2(tag, nil)
+  when defined(debugKaraxDsl):
+    echo repr result

experiments/trello/trello.nim

@@ -0,0 +1,151 @@
+
+import knete, widgets
+import karax / jstrutils
+
+type
+  Attachable* = ref object of RootObj ## an element that is attachable to
+                                      ## DOM elements.
+    attachedTo*: seq[Element]
+
+  TaskId = int
+  Task = ref object
+    id: TaskId
+    name, desc: kstring
+
+  ColumnId = distinct int
+  Column = ref object of Attachable
+    id: ColumnId
+    header: kstring
+    tasks: seq[Task]
+
+  Board = ref object
+    columns: seq[Column]
+
+var b = Board(columns: @[Column(id: ColumnId 0, header: "To Do"),
+                         Column(id: ColumnId 1, header: "Doing"),
+                         Column(id: ColumnId 2, header: "Done")])
+
+proc removeTask(t: TaskId) =
+  for c in b.columns:
+    for i in 0 ..< c.tasks.len:
+      if c.tasks[i].id == t:
+        delete(c.tasks, i)
+        break
+
+proc moveTask(t: TaskId; dest: Column) =
+  for c in b.columns:
+    for i in 0 ..< c.tasks.len:
+      let task = c.tasks[i]
+      if task.id == t:
+        delete(c.tasks, i)
+        dest.tasks.add task
+        return
+
+var nextTaskId = 0 ## negative because they are not yet backed
+                   ## up by the database
+
+proc createTask(c: Column; name, desc: kstring): Task =
+  dec nextTaskId
+  result = Task(id: TaskId nextTaskId, name: name, desc: desc)
+  c.tasks.add result
+
+# --------------------- UI -----------------------------------------------
+
+proc renderTask(t: Task): Element =
+  proc dodelete =
+    removeTask t.id
+    delete result
+
+  proc dragstart(ev: Event) =
+    ev.prepareDragData("taskid", ev.target.id)
+
+  result = buildHtml():
+    tdiv(draggable="true", ondragstart=dragstart, id = &t.id):
+      bindField t.name
+      br()
+      bindField t.desc
+      button(onclick = dodelete):
+        text cross
+
+type
+  NewTaskPanel = object
+    c: Column
+    e: Element
+
+proc open(p: var NewTaskPanel; c: Column) =
+  p.e.style.display = "block"
+  p.c = c
+
+proc newTaskDialog(): NewTaskPanel =
+  var nameInp = buildHtml():
+    input(setFocus = true)
+  var descInp = buildHtml():
+    input()
+
+  proc close =
+    result.e.style.display = "none"
+
+  proc submit =
+    let t = createTask(result.c, nameInp.value, descInp.value)
+    close()
+    result.c.attachedTo[0].add renderTask(t)
+
+  result.e = buildHtml():
+    tdiv(style={display: "none", position: "fixed",
+        left: "0", top: "0", width: "100%", height: "100%",
+        overflow: "auto",
+        backgroundColor: "rgb(0,0,0)",
+        backgroundColor: "rgba(0,0,0,0.4)", zIndex: "1"}):
+      tdiv(style={backgroundColor: "#fefefe",
+          margin: "15% auto", padding: "20px", border: "1px solid #888",
+          width: "80%"}):
+        span(onclick = close, style={color: "#aaa",
+            cssFloat: "right",
+            fontSize: "28px",
+            fontWeight: "bold"}):
+          text cross
+        p:
+          text "Task name"
+          nameInp
+        p:
+          text "Task description"
+          descInp
+        span(onclick = submit, style={color: "#0f0",
+            cssFloat: "left",
+            fontWeight: "bold"}):
+          text "Submit"
+
+var dialog = newTaskDialog()
+
+proc renderColumn(c: Column): Element =
+  proc doadd(c: Column): proc () =
+    result = proc() = dialog.open(c)
+
+  proc allowDrop(ev: Event) = ev.preventDefault()
+  proc drop(ev: Event) =
+    ev.preventDefault()
+    let data = ev.recvDragData("taskid")
+    moveTask(parseInt data, c)
+    ev.target.up("mycolumn").add(getElementById(data))
+
+  result = buildHtml():
+    tdiv(class = "mycolumn", style = {cssFloat: "left", width: "33%"},
+         ondrop = drop, ondragover = allowDrop):
+      tdiv(class = "myheader"):
+        bindField c.header
+        span(onclick = doadd(c)):
+          text plus
+      for t in c.tasks:
+        renderTask(t)
+  c.attachedTo.add result
+
+proc renderBoard(b: Board): Element =
+  result = buildHtml(tdiv):
+    dialog.e
+    for c in b.columns:
+      renderColumn(c)
+
+proc main(hashPart: kstring): Element =
+  result = renderBoard(b)
+
+setInitializer main

experiments/trello/widgets.nim

@@ -0,0 +1,43 @@
+## 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