Mirror of forum.nim-lang.org

3810 :: Binding a JavsScript object that's not part of the DOM

• def_pri_pub (orginal) [2018-05-13T22:17:58+02:00] view original

  I'm writing an app right now and I need to figure out what the width & height of div, with it's applied CSS styling. Back in vanilla JS, there is the function getComputedStyle() which will give me CSSStyleDeclaration object. That object is not part of the DOM or the BOM, it's part of the CSSOM. I don't really know how to bind this. How would I go about this?

---

• def_pri_pub (orginal) [2018-05-15T04:25:09+02:00] view original

  I figured out how to do this. yglukhov's jsbind worked like a charm to help with this. Thanks for the awesome library!

  Here is a simple to get & set the height of a <div> in Nim.

  import dom
  import jsbind
  
  type CSSStyleDeclaration* = ref object of JSObj
  
  proc cssText*(cssSD: CSSStyleDeclaration): cstring {.jsimportProp.}
  proc length*(cssSD: CSSStyleDeclaration): int {.jsimportProp.}
  
  proc getComputedStyle*(w: Window; element: Element; pseudoElt: Element=nil): CSSStyleDeclaration {.jsimport.}
  proc getPropertyValue*(cssSD: CSSStyleDeclaration; property: cstring): cstring {.jsimport.}
  
  # Main Program
  proc main() =
    var
      content = querySelector("#content")
      cStyle = window.getComputedStyle(content)
    
    content.innerHTML = cStyle.getPropertyValue("height")   # e.g. will say something like "51.2px"
    content.style.height = "800px"
  Run

---

• treeform (orginal) [2018-05-15T04:33:15+02:00] view original

  I feel that it should be part of the dom even if its not. You might get a way with just using div.getBoundingClientRect(). I had the same issue. So I added that to the dom.nim. The getComputedStyle() slightly different.

  I found dom.nim to be a clean example to how to bind to stuff in js that is or is not part of the dom: https://github.com/nim-lang/Nim/blob/master/lib/js/dom.nim

---

• def_pri_pub (orginal) [2018-05-15T06:28:58+02:00] view original

  Does it live update to when the style changes? That's one of the benefits CSSStyleDeclaration is that if you change the CSS for an object, you don't need to query for the style declaration again.

---