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

2018-05-15 Thread def_pri_pub
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.


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

2018-05-15 Thread treeform
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](https://github.com/nim-lang/Nim/blob/master/lib/js/dom.nim)


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

2018-05-15 Thread def_pri_pub
I figured out how to do this. [yglukhov's 
jsbind](https://github.com/yglukhov/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  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"



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

2018-05-13 Thread def_pri_pub
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()](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)
 which will give me 
[CSSStyleDeclaration](https://developer.mozilla.org/en-US/docs/Web/API/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?