A parseint filter operator

[BurningTreeC]

In advanced stylesheets sometimes I want to parse a configuration value to integer, like for example the sidebarbreakpoint

Therefor, a filter operator that does just that would come in very handy

[saqimtiaz]

@BurningTreeC The math operators already parse their input using $tw.utils.parseNumber as all filter operands and variables are strings.

Try [[5px]add[1]]

Did you run into a situation where one of the math operators was not parsing the input as a number?

[saqimtiaz]

Otherwise this is an easy way to parse something as an integer:

[<myvalue>add[0]]

[AnthonyMuscio]

Saq That is interesting;

So we could use [[5px]add[1]addsuffix[px]]

But is their another way to retain the units while modifying its number?

Tony

[pmario]

I think if you need to calculate CSS values you may want to use CSS calc() function, where you can mix calculations with different units.

In wikitext CSS it's possible to do this:

width: calc(100% - 30px);

width: calc({{value-1}} - {{value-2}});

or a combination with CSS variables / calc and wikitext

:root {
  --first-color: {{color-1}};
  --second-color: {{color-2}};
}

.firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

The second approach may also be more performant, because the browser CSS parser and optimizers can do there magic.

[AnthonyMuscio]

Great stuff Mario. There are so many ways to do things in tiddlywiki, the hard part is finding how to document them and compare the pros and cons of each. We depend on those with the deep experience (such as yourself) to get anywhere. Whilst we are fortunate, this is also why we must try and remove this dependency on bespoke knowledge. Here I am not talking about CSS itself but its intersection with TiddlyWiki widgets, variables and fields.

However is something we may expect others to want to do, ie make a particular css attribute value adjustable, so perhaps we should have an example available in the standard build which tiddlywiki.com can reference. In effect driving self documentation into tiddlywiki Often tiddlywiki contains examples of methods we need, and this should be a continuous process, as each innovation or discovery comes along.

[AnthonyMuscio]

Mario,

Actually my use case was say providing a range slider to alter a value such as the number of px in a margin.

My attached macro needed to work around it.

sideBar-width.json.txt