Mirror of forum.nim-lang.org

6088 :: Updating Element style via Karax (noobish?)

• hrm (orginal) [2020-03-19T02:33:55+01:00] view original

  Hi, I'm newbie. Nice to meet all of you. I'd like to updating element's style by event handler set by Karax. So I wrote like this, but it doesn't work. (With click, text changes but style doesn't update. )

  var mystyle = newJSeq[cstring]()
  mystyle.add cstring"transform"
  mystyle.add cstring"translateX(0px)"
  var t: string = "For many years, computer programmers have been"
  
  proc mainHtml(): VNode =
    result = buildHtml(main(id="main", class="main", style = mystyle )):
      text t
      proc onclick(ev: Event, n: VNode) =
        t = "callback is triggered well...."
        mystyle.setAttr(transform, "translateX(150px")
  
  proc main(): VNode =
    return buildHtml(tdiv):mainHtml()
  setRenderer main
  
  Run

  May be the code around setAttr is wrong, so I read Vstyles.nim but couldnt make my understand where is wrong. Anybody could help?

---

• geotre (orginal) [2020-03-19T12:31:29+01:00] view original

  This works:

  include karax/prelude
  import karax/[vstyles]
  
  var
    t: kstring = "For many years, computer programmers have been"
    offset: kstring = "translateX(0px)"
  
  proc mainHtml: VNode =
    buildHtml:
      tdiv(
        id="main",
        class="main",
        style=style([
          (transform, offset)
        ])
      ):
        text t
        proc onclick(ev: Event, n: VNode) =
          t = "callback is triggered well...."
          offset = "translateX(150px)"
  
  proc main: VNode =
    buildHtml:
      mainHtml()
  
  setRenderer main
  
  Run

---

• hrm (orginal) [2020-03-19T15:35:23+01:00] view original

  Thank you @geotre. It works and seems better.

  I do along with it.

---

• jyapayne (orginal) [2020-03-19T15:45:10+01:00] view original

  @hrm, you could also do it like this (slightly simpler):

  include karax / prelude
  import karax/[vstyles]
  
  var mystyle = style({StyleAttr.transform: "translateX(10px)".kstring})
  var t: string = "For many years, computer programmers have been"
  
  proc mainHtml(): VNode =
    result = buildHtml(main(id="main", class="main", style = mystyle )):
      text t
      proc onclick(ev: Event, n: VNode) =
        t = "callback is triggered well...."
        mystyle = style({StyleAttr.transform: "translateX(150px)".kstring})
  
  proc main(): VNode =
    return buildHtml(tdiv):mainHtml()
  setRenderer main
  Run

---

• hrm (orginal) [2020-03-19T18:07:53+01:00] view original

  Thank you. This works and looks same shape to my code ! Now I guess I can simply use style proc to set style.

---

• hrm (orginal) [2020-03-19T18:45:43+01:00] view original

  Thanks to @geotre and @jyapayne , Maybe, I can update any single style with Karax for now. So I tried updating a style which has more than 2 attributes.

  Using style constructor, this worked.

  include karax / prelude
  import karax / [vstyles]
  
  var mystyle = style([
    (transform, kstring"translateX(0px)"),
    (backgroundColor, kstring"cyan")
    ])
  var t: string = "For many years, computer programmer have been"
  
  proc mainHtml(): VNode =
    bulidHtml(main(id="main", class="main", style = mystyle)):
      text t
      proc onclick(ev: Event, n: VNode) =
        t = "working hard to reduce their works..."
        mystyle = mystyle.merge(style(transform, "translateX(100px)"))
  
  proc main(): VNode =
    return bulidHtml(tdiv): mainHtml()
  setRenderer main
  Run

  and this did NOT work.

  ...
  var offset: kstring = "translateX(0px)"
  var mystyle = style([
    (transform, offset),
    (backgroundColor, "cyan")
    ])
  ...
  # inside callbak
        t = "working hard to reduce their works..." #this changes
        offset = "translateX(150px)" #this doesn't change
  Run

---