Popup with a checkbox?

[Hubert]

Hello,

Is it possible to invoke a popup by clicking on a checkbox? Or, alternatively, to invoke a popup when the content (text parameter) of the reveal widget matches a value?

When I tested the documented use with the button, I've found that by pressing the button invoking the popup, TiddlyWiki writes an apparently random array of numbers to the state tiddler, such as: (43,109,93,23).

However, when I tried to match this number by manually populating the state tiddler, the reveal widget did not invoke the popup. Now, I'm aware that the reveal widget type=popup does not really check for content to match but I was just wondering if anyone could share some more information about the internals of the popup mechanism, what's really happening on pressing the button and how much more flexibility is allowed when using popups with the reveal widget.

What I'm trying to implement is a 'confirm dialog' in a popup that would ask the user whether they really want to perform a deletion (buttons would be displayed in the popup invoked).

Many thanks for your input.

Best regards,

Hubert

[Hubert]

A follow-up question, what is the number array being written to the referenced state tiddler on button press that results in the popup being invoked?

For reference, the documentation of the set-field action widget here includes writing to a state tiddler for the popup to be rendered correctly (please see the second example). The example also includes an array of numbers, although different from mine (obviously):

text="(568,1443,33,39)". What is that number?

Many thanks,

Hubert

[Jed Carty]

As far as I can tell they don't do anything. The popup mechanism just checks for the existence of the tiddler.

If I understand what is going on you are looking for something more complex than it actually is.

To make the not-quite simplest popup controlled by a button just paste this into a tiddler:

<$reveal type='popup' class='tc-popup-keep' state='bob' position='above'>

<div style='background-color:pink'>

HELLO!!

</div>

</$reveal>

<$button popup='bob'>

Test

</$button>

The tc-popup-keep class is needed if you want the popup to stay when a person clicks inside the popup. The position='above' part is just to make it more obvious that it isn't in the normal tiddler. The content inside can be any wikitext or html/css like in a normal tiddler. You can style the revealed content using normal css to make it appear in the middle of the screen or wherever you want it.

[BurningTreeC]

A follow-up question, what is the number array being written to the referenced state tiddler on button press that results in the popup being invoked?

For reference, the documentation of the set-field action widget here includes writing to a state tiddler for the popup to be rendered correctly (please see the second example). The example also includes an array of numbers, although different from mine (obviously):

text="(568,1443,33,39)". What is that number?

Hi Hubert, the numbers are sort-of relative coordinates of the button that opens the popup

They're used internally by the popup mechanism to position the popup above/below/leftbelow... the triggering button

[Hubert]

Thanks for all the answers. I should have mentioned at the start that I've read through the documentation prior to posting.

Apologies for getting into too much detail, it appears to me that I wasn't really clear why I'm asking all these convoluted questions ;).

In short, I want to be able to invoke a popup on checking a checkbox instead of on pressing a button. Is that possible?

Thanks,

Hubert

[Jed Carty]

Same thing, different widget. You can probably make it simpler than this and this way the you have to either have your form change the state to remove the revealed text or uncheck the box instead of just clicking outside it.

Alternatively you can just use the previous one and style it as a checkbox. There isn't really much difference functionally between something that looks like a button and something that looks like a checkbox.

<$reveal type='match' state='bob!!text' text='show'>

<div style='background-color:pink'>
HELLO!!
</div>

</$reveal>

<$checkbox checked='show' unchecked='hide' tiddler='bob' field='text'>
Test
</$checkbox>

[Hubert]

Thank you Jed, this solves my use case. I was unnecessarily complicating things.

Best regards,

Hubert