How to Implement Multiple Dropdown Buttons in a Single Tiddler

#1

I’ve encountered a new problem. I want to create a button that, when clicked, displays some annotation text. Usually, there are many annotation texts within a single entry, which would require many annotation buttons. But I don’t want to manually add state IDs for each one. How can I automate this process? Below is my current code.

\procedure O-note(note)
<$let
popupState="">
<$button class="tc-btn-invisible tc-btn-mini" popup=<<popupState>> >^^注^^</$button>
<$reveal type="popup" state=<<popupState>> >
<div class="tc-drop-down">

{{{ [<note>] }}}

</div>
</$reveal>
</$let>
\end
#2

This is quite similar to the tag Core Macro, but it seems I can’t use the list widget here, so I’m unsure how to solve it.

#3

Try including the note text as part of the popupState title.

Something like this:

\procedure O-note(note)
<$let transclusion=<<note>> popupState={{{ [[$:/state/popup/O-note]addsuffix<qualify>] }}}>
<$button class="tc-btn-invisible tc-btn-mini" popup=<<popupState>> >^^注^^</$button>
<$reveal type="popup" state=<<popupState>> class="tc-drop-down"><<note>></$reveal>
</$let>
\end

<<O-note "this is a test note">>

<<O-note "this is another note">>

Note the use of the transclusion variable, which is normally set by the TWCore whenever a $transclude widget is processed. This variable is then used by the <<qualify>> macro to generate the unique “magic number”. In the above code, by setting the transclusion variable, we are using the <<note>> text to generate the unique <<qualify>> value without having the actual note text embedded in the popupState tiddler title.

1 Like
#4

Thank you very much for your quick reply. But would this cause performance issues? Some annotation texts are very long, perhaps several hundred words. Or could we truncate them? I’m not trying to be critical, but I always feel there should be a more elegant solution to this problem.

#5

I’ve updated my previous post to use the transclusion variable. This avoids having the actual note text embedded as part of the popupState tiddler’s title.

-e

#6

This looks like a significant improvement. However, in the test code below, I noticed that the displayed content always ends up showing ‘00’. In other words, the popup is still being duplicated. I added a log widget, and I can confirm this in the console.

\procedure O-note(note)
<$let transclusion=<<note>> popupState={{{ [[$:/state/popup/]] [<qualify>] +[join[]] }}}>
<$button class="tc-btn-invisible tc-btn-mini" popup=<<popupState>> >
<$log  $$filter="[prefix[popupState]]"  />^^注^^</$button>
<$reveal type="popup" state=<<popupState>> class="tc-drop-down"><<note>></$reveal>
</$let>
\end

<<O-note "this is a test note">>

<<O-note "this is another note">>

<<O-note "00


456
">>

<<O-note "00">>

image
image1815×984 141 KB

#7

Something strange is going on here. When I tried this test code:

<$let transclusion="test1" popupState={{{ [[$:/state/popup/O-note]addsuffix<qualify>] }}}>
<<popupState>>
<br>
<$let transclusion="test2" popupState={{{ [[$:/state/popup/O-note]addsuffix<qualify>] }}}>
<<popupState>>

I get two different popupState values (as intended).
But when used in the O-note() procedure, it is always generating the same popupState value. Thus, all the popups are sharing the same state, so they all appear at the same time, with the same content.

hmmm…

-e

#8

Yes, that’s precisely the problem. Due to the time difference, it’s already late night here for me, so I’m off to bed now. I’m looking forward to your good news. I also welcome others to try and solve this and join the discussion. This might involve some of TiddlyWiki’s most complex core mechanisms.

#9

I’ve found a working solution!

\procedure O-note(note)
<$let transclusion=<<note>>>
<$let popupState={{{ [[$:/state/popup/]addsuffix<qualify>] }}}>
<$button class="tc-btn-invisible tc-btn-mini" popup=<<popupState>> >^^注^^</$button>
<$reveal type="popup" state=<<popupState>> class="tc-drop-down"><<note>></$reveal>
</$let>
</$let>
\end

Note that I’ve used separate $let widgets to first set the transclusion variable and then set the popupState variable.

However, if I combine the two $let widgets like this:

<$let transclusion=<<note>> popupState={{{ [[$:/state/popup/]addsuffix<qualify>] }}}>

then the <qualify> macro returns the same value regardless of the value of the <<transclusion>> variable, resulting in the erroneous popup handling we previously saw.

It’s still a mystery why the combined $let doesn’t work but at least there is a solution now.

Just guessing, but perhaps it is a subtle “refresh” dependency issue because <<qualify>> is implemented using Javascript rather than wikitext?

Maybe @jeremyruston can shed some light on this unexpected result?

-e

#10

Thank you very much, this is a suitable solution. Although there might still be some overlap when the content is identical, at least the impact is much smaller now.