Pulling values from dictionary tiddler to use for CSS/HTML

31 views
Skip to first unread message

Matt4

unread,
Jan 28, 2022, 11:29:31 AM1/28/22
to TiddlyWiki
I'm sure there is a better way to do this so I'm hoping someone can help me.

I have a journal tiddler that has a field called mood. I put a value  from 1 to 5 to describe my mood for the day.

I have a dictionary tiddler that has a CSS class for each number. So, it would look something like this

1: bg-red
2: bg-orange
3: bg-yellow
4: bg-green
5: bg-blue

Now what I want to do is to create a bit of HTML that will dynamically build the css classes based on this setup. So, for example, if my mood was 2, it would build the html 

<div class="bg-orange w-10 h-10"></div>

I use this to display a little colored box when viewing the tiddler to show my mood for that day. I can get it to just include the "bg-orange" part, but as soon as I try to add any other class to the DIV, it doesn't work. I get it either not being able to pull in the field value to grab data from the data tiddler, or it just prints out the wikitext as plain text, etc.

Can anyone think of a better way to do this?

Thanks.

Matt4

unread,
Jan 28, 2022, 12:18:56 PM1/28/22
to TiddlyWiki
Sorry to answer my own question but while playing around with this some more I came up with a solution. 

I can just put the rest of the CSS classes in my dictionary tiddler. Now I can pull everything in and not have to concatenate things. 

Data Tiddler:

1: bg-yellow w-10 h-10
2: bg-green w-10 h-10
3: ...etc....

From my tiddler, I call the macro with:

<$macrocall $name="build-mood" color={{!!mood}} />

This pulls in the mood number from the current tiddler and sends it off to the macro.

In the macro tiddler I have this:

\define build-mood(color)
<$set name="colorClass" value={{MoodColors##$color$}}>
<div class=<<colorClass>> >Mood</div>

\end

That pulls in the class from the correct 'mood' lookup in the dictionary tiddler and builds the HTML appropriately. 

Maybe not the best solution, but it does work.

Reply all
Reply to author
Forward
0 new messages