Call formula from var?

Community Usage questions
1

Hi,

I want to set a lot of buttons font-size in the CSS field with this formula for example:

font-size: #{(parseFloat(@{this.height}) + parseFloat(@{this.width})/2) / 10}vw;

I'm hoping it would be easier to manage if I added this formula into a variable, and then call the variable. The problem is that this won't compute correctly.

Is there a way to send this through a variable, or call this from the custom module in a way I'm not thinking of? In case I ever need to change this formula, I only have to do it once from the var and not from every button's CSS etc.

Cheers,
DMDComposer

2

Not sure if there's another way to do this, but my idea relies on storing the formula in the global environment using globals.

First, create a new variable and move it to the top of the tree. (to ensure that it sets the formula before other widget calls it, otherwise you'll get an error). You can call it whatever you want.

Then, add this code to the onCreate prop of this variable:

globals.setFontSize = (h, w) => {
  return (parseFloat(h) + parseFloat(w)/2) / 10
}

Now, you can use it anywhere in your code.
In the CSS of the button, use this:

font-size: #{globals.setFontSize(@{this.height}, @{this.width})}vw;

Hope it helps.
Cheers!

1 Like
3

Thank you Clelson. That's exactly what I was looking for.

Cheers,
DMDComposer