Toggle tags via button and reveal

[JM]

Hi there,

I'm trying to toggle the tag 'urgent' via two different buttons and switching between them via reveal:

<$fieldmangler>
<$reveal type="match" state={{!!title}}  tag="urgent"><$button class='tc-btn-invisible' message="tm-remove-tag" param="urgent">&#9733;</$button></$reveal><$reveal type="nomatch" state={{!!title}} tag="urgent"><$button class='tc-btn-invisible'  message="tm-add-tag" param="urgent">&#9734;</$button></$reveal>
</$fieldmangler>

It works well without the reveal part. :-(

Any hints?

Jens

[PMario]

Hi Jens,

Is it intended to be part of the ViewTemplate or the EditTempate?

-mario

[JM]

... in the ViewTemplate.

I would like to use it as a transclusion in different lists ...

[PMario]

Hi,

Try the attached template tiddler.

\define toggle-urgent()
<$action-listops $tiddler={{!!title}} $field="tags" $subfilter="+[toggle[urgent]]" />
\end

<$button actions=<<toggle-urgent>> >
<$list filter="[all[current]tag[urgent]then[&#9733;]else[&#9734;]]"><<currentTiddler>></$list>
</$button>

You can call it with {{|| my-toggle-template}}

If you want to hide the button use: <$button class="tw-btn-invisible" actions=<<toggle-urgent>> > ... you will only get the star.

have fun!

mario

[JM]

Well that fits my needs. Even if I don't have the slightest idea what you have done. :D

That will be the next step ...

Thank You!

[PMario]

On Monday, May 31, 2021 at 11:20:31 AM UTC+2 JM wrote:

 

<$reveal type="match" state={{!!title}}  tag="urgent"><$button class='tc-btn-invisible' message="tm-remove-tag" param="urgent">&#9733;</$button></$reveal>

The "tag" parameter in the reveal-widget is meant to be an HTML-tag. eg: <div> or <span> ... So that's the wrong parameter.

Toggling tags with reveal produces relatively complicated code. ... The reveal-widget was one of the early widgets, where we didn't have many filter operators. ... Now the list-widget in combination with some filters is much more powerful and probably easier to understand.

I'll create a new post, that explains the filter-thingy ;)

-mario

 

[PMario]

On Monday, May 31, 2021 at 11:49:48 AM UTC+2 PMario wrote:

If you search for "toggle" at tiddlywiki.com you'll find: https://tiddlywiki.com/#toggle%20Operator%20(Examples):%5B%5Btoggle%20Operator%20(Examples)%5D%5D%20%5B%5Btoggle%20Operator%5D%5D

The examples already contain the "action-listops" ...

\define toggle-urgent()
<$action-listops $tiddler={{!!title}} $field="tags" $subfilter="+[toggle[urgent]]" />
\end

I did modify the $fields="tags" and

changed the $subfilter="+[toggle[urgent]]" .. so it toggles between 1 value

There's the action-listops docs. It has a lot of possibilities, but also a lot of examples to play with.

 

<$button actions=<<toggle-urgent>> >

This is a relatively common usage of the button-widget. Using actions=<<macro-name>> will clean up the code, if you need to call more than 1 action. ... It is "best practice".

 

<$list filter="[all[current]tag[urgent]then[&#9733;]else[&#9734;]]"><<currentTiddler>></$list>

all[current] ... will return the currentTiddler variable.

tag[urgent] ... tests if the "urgent" tag is set

then[&#9733;] ... will set the currentTiddler variable of the list-body to the "filled star" character

else[&#9734;] ... will set the currentTiddler variable of the list-body to the "empty star" character

<<currentTiddler>> ... will show the star, depending on tag - then / else ... see: currentTiddler variable

 

</$button>

You can call it with {{|| my-toggle-template}}

Uses the transcluded tiddler as a template. see more info here.

 

If you want to hide the button use: <$button class="tw-btn-invisible" actions=<<toggle-urgent>> > ... you will only get the star.

Just test it ;)

hope that helps

-mario

 

[JM]

Well, I'm impressed. :-)

It's very nice of you to explain all this and I think I understand the basic principle.

After reading the documentation - is there a special reason, that you did use $field="tags" $subfilter="+[toggle[urgent]]" instead of $tags="+[toggle[dringend]]"? (just to proof I understood anything at all)

Thank you!

[PMario]

On Monday, May 31, 2021 at 4:29:16 PM UTC+2 JM wrote:

Well, I'm impressed. :-)

It's very nice of you to explain all this and I think I understand the basic principle.

That's good :-)

 

After reading the documentation - is there a special reason, that you did use $field="tags" $subfilter="+[toggle[urgent]]" instead of $tags="+[toggle[dringend]]"? (just to proof I understood anything at all)

There's no special reason. It worked that way, so I did use it. ... There are several streets, that lead to Rome. ... Not all of them ;)

-m

[TW Tones]

Mario,

Thanks for demonstrating the use of Unicode characters on this. Unlike svg icons its easy to color them and add them to the view toolbar.

Eg in a tiddler tagged view toolbar

\whitespace trim

\define toggle-urgent()

<$action-listops $tiddler={{!!title}} $field="tags" $subfilter="+[toggle[urgent]]" />

\end

<$button actions=<<toggle-urgent>> class="tc-btn-invisible"><$list filter="[all[current]tag[urgent]then[&#9733;]else[&#9734;]]"><span style="color: red;"><<currentTiddler>></span></$list></$button>

Tones