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?
2018-05-13 20:17:58

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"

2018-05-15 02:25:09

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

2018-05-15 02:33:15
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.
2018-05-15 04:28:58