Enabling / Disabling a CSS rule with a Button in TW

#1

I would like to create a button in my wiki that can change the styling of some of the classes inside my tiddler by enabling/disabling some css. I’m at a loss for the best way to approach this in tiddlywiki though. Any suggestion?

#2

You can write a stylesheet-tiddler with your CSS-rules and use a checkbox to activate it with the $:/tags/Stylesheet-tag.

<$checkbox tag="$:/tags/Stylesheet" tiddler="$:/_/CSS-rule">
activate CSS-rule
</$checkbox>

https://tiddlywiki.com/#CheckboxWidget

3 Likes
#3

That’s actually pretty genius :slight_smile: Thanks

#4

I also never thought of that.

If you want to use a button instead of a checkbox:

<$button>
<$list filter="[[$:/_/CSS-rule]!tag[$:/tags/Stylesheet]]">
<$action-listops $tiddler="$:/_/CSS-rule" $tags="$:/tags/Stylesheet"/>
</$list>
<$list filter="[[$:/_/CSS-rule]tag[$:/tags/Stylesheet]]">
<$action-listops $tiddler="$:/_/CSS-rule" $tags="-$:/tags/Stylesheet"/>
</$list>
Toggle CSS
</$button>
1 Like
#5

This will make it shadow tiddler, and will update the modified field of it. This will prevent future update of your plugin.

When developing a plugin, you could use a config tiddler with “yes” or “no”. And use a list widget in your style tiddler warpping the css to toggle it by checking the config tiddler.

#6

A shorter and more re-usable way to write the $button code:

\define toggleCSS(tid)
<$button>
<$text text={{{ [<__tid__>tag[$:/tags/Stylesheet]then[disable]else[enable]] [<__tid__>] +[join[ ]] }}}/>
<$action-listops $tiddler=<<__tid__>> $tags="+[toggle[$:/tags/Stylesheet]]"/>
</$button>
\end

<<toggleCSS "$:/_/CSS-rule">>

Notes:

  • By putting the code inside a macro definition with a tid param, it can be re-used to toggle other stylesheet tiddlers, simply by calling <<toggleCSS "tiddlername">>.
  • Add $:/tags/Macro to the tiddler containing this macro definition to make the macro global, so it can be invoked from anywhere.
  • The $button label uses a $text widget with a “filtered transclusion” to output either “enable tiddlername” or “disable tiddlername”, based on the current tag value.
  • A single $action-listops uses the toggle[...] filter to add/remove the $:/tags/Stylesheet tag. This eliminates the need to use $list widgets as conditional tests.

enjoy,
-e

3 Likes
#7

@GameGungeon

FYI, there is an exemple of enabling / disabling stylesheets button in the StyleSheet search of advanced search provided by DelphesNotes SmartSearch.

https://delphes-notes.tiddlyhost.com/#%24%3A%2Fplugins%2Feskha%2FDelphesNotes%2FSmartSearch%2Fui%2FAdvancedSearch%2FStyleSheets:%24%3A%2Fplugins%2Feskha%2FDelphesNotes%2FSmartSearch%2Fui%2FAdvancedSearch%2FStyleSheets

BR,

Eskha

1 Like
#8

something to note, may not be relevant but helped me in the past:
one consequence of removing the stylesheet tag is that you won’t be able to search/filter for it using the tag. i was doing something similar (removing the PageTemplate tag from some things for a custom layout) and found it difficult to “make a list of all tiddlers tagged $:/tags/PageTemplate with checkboxes to toggle them” because when you remove the tag… they are removed from the list.

to fix this, you could add a X $:/tags/Stylesheet tag or similar (note the X) with the same trigger (button press) as the tag removal, and then it will still show up if you search:tags[$:/tags/Stylesheet].

#9

Oh, I could use that in all sorts of ways! Thank you!

1 Like
#10

@Scribs thanks for the inspiration.

Too keep the “tag” hidden as a system tiddler we could rename the tag from $:/tags/Stylesheet to $:/tags/Stylesheet off, I think I may add this feature to my custom tag pill dropdowns in my “Reimagine tags” package.

Perhaps disable tag here?

Try this draft component of my reimagin tags solution.

1 Like