RevealWidget as conditional trigger mechanism for ActionWidgets

[hobbyist writer]

Hi everyone.

I would like to share with you some code. It consists of two interrelated Tiddlers that:

1. Store and display Geo-position.
   
2. Prompt the user for changes, if she/he decides to.
3. Fill some default value upon a change request, if the value is empty.

Now this is simple to accomplish especially using JavaScript, BUT...

I happened to notice that the <$reveal> widget can be used to conditionally trigger ActionWidgets. Here are the contents of the Tiddlers. Note that one only needs to

• transclude {{:/_template/geo}} in any Tiddler as interface, and

• reference the Geo-position by {{$:/_template/geo!!_position}}

tags:
title: $:/_template/geo


<$set name="thepos" value="51.5007, -0.1246">
<$button>
<$action-sendmessage $message="tm-modal" $param="$:/_template/geo-prompt"/>
<$reveal type="match" state="$:/_template/geo!!_position" text="">
<$action-setfield $tiddler="$:/_template/geo" $field="_position" $value=<<thepos>>/>
</$reveal>
<$reveal type="match" state="$:/_template/geo!!_position" text=" ">
<$action-setfield $tiddler="$:/_template/geo" $field="_position" $value=<<thepos>>/>
</$reveal>
<font size=3>''{{!!_caption}}'' <font color=#BD1745>{{!!_position}}</font></font>
</$button>
</$set>

tags:
title: $:/_template/geo-prompt


!! {{$:/_template/geo!!_caption}}

<$edit-text tiddler="$:/_template/geo" field="_position" placeholder="51.5007, -0.1246" class="tc-edit-texteditor"/>

I look forward to learning from your feedback. Sorry if this is trivial or a mere repetition.

Best,
Mehdi

[Felix Küppers]

Hi Mehdi,

while I would probably use javascript at this point, I did not even know this is possible with widgets :)

Just a remark: I would not use a space character to distinguish states in the reveal widget, better use type="nomatch" for the opposite. Also a reveal widget creates a dom element, maybe better to use the list element for if-else analogy in this case (yes, even though it is called list widget it can be used for if else operations).

-Felix

On 18.06.2015 06:04, hobbyist writer wrote:

Hi everyone.

I would like to share with you some code. It consists of three interrelated Tiddlers that:

1. Store and display Geo-position.
   
2. Prompt the user for changes, if she/he decides to.
3. Fill some default value upon a change request, if the value is empty.

Now this is simple to accomplish especially using JavaScript, BUT...

I happened to notice that the <$reveal> widget can be used to conditionally trigger ActionWidgets. Here are the contents of the Tiddlers. Note that we only need to

• transclude {{:/_template/geo-button}} in any Tiddler as interface, and


• reference the Geo-position by {{$:/_template/geo!!_position}}

tags:
title: $:/_template/geo-button

<$set name="thepos" value="51.5007, -0.1246">
<$button>
<$action-sendmessage $message="tm-modal" $param="$:/_template/geo-prompt"/>
<$reveal type="match" state="$:/_template/geo!!_position" text="">
<$action-setfield $tiddler="$:/_template/geo" $field="_position" $value=<<thepos>>/>
</$reveal>
<$reveal type="match" state="$:/_template/geo!!_position" text=" ">
<$action-setfield $tiddler="$:/_template/geo" $field="_position" $value=<<thepos>>/>
</$reveal>

{{$:/_template/geo}}
</$button>
</$set>

tags:
title: $:/_template/geo-prompt


! {{$:/_template/geo!!_caption}}

<$edit-text tiddler="$:/_template/geo" field="_position" placeholder="51.5007, -0.1246" class="tc-edit-texteditor" focus="true"/>

tags:
title: $:/_template/geo

<font size=3>''{{!!_caption}}'' <font color=#BD1745>{{!!_position}}</font></font>

I look forward to learning from your feedback. I apologize if this is trivial or a mere repetition, but to me it was new and non-trivial.

Best,
Mehdi

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5e68c471-acbd-4a9c-9b28-a87a383920d4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[hobbyist writer]

Hi Felix,

Thank you very much for the tips. I have a couple of questions if I may:

Just a remark: I would not use a space character to distinguish states in the reveal widget, better use type="nomatch" for the opposite.

That construct acts as a switch statement which could have been avoided if I could pass regexp to <$reveal> in order to signal an empty string (null or filled with spaces, tabs ...). In fact this here is a quick dirty workaround and it fails if the user types in two spaces or more. I don't know how I can cover the possible cases as “nomatch”.

...maybe better to use the list element for if-else analogy in this case (yes, even though it is called list widget it can be used for if else operations).

I'm trying to manipulated the contents of a single field of a specific Tiddler. My understanding is that the list element pipes Tiddler names into its enclosure. Would you please give a rough code snippet for this?

Also a reveal widget creates a dom element,...

Would you happen to know how I can find the exact objects created in order to access them in JS code?

And finally; I tried to accomplish this by a JavaScript macro but it didn't work because the macro kept firing the popup without being called. So I found this: "http://tiddlywiki.com/dev/#JavaScript%20Macros".

Macros are just used to return a chunk of wikitext for further processing. They should not make modifications to tiddlers in the wiki store. The reason is that you cannott control when the macro is called; it may be called repeatedly as part of refresh processing. So it is important that macros do not have any other side effects beyond generating their text.

 

Thank you; and best wishes,
Mehdi

[Felix Küppers]

Hi Mehdi,

Just a remark: I would not use a space character to distinguish states in the reveal widget, better use type="nomatch" for the opposite.

I don't know how I can cover the possible cases as “nomatch”.

Maybe it is not suited for your case but I was refering to the "Accordion or Slider" in tiddlywiki.com/#RevealWidget which uses no match to create an if-else.
 

...maybe better to use the list element for if-else analogy in this case (yes, even though it is called list widget it can be used for if else operations).

I'm trying to manipulated the contents of a single field of a specific Tiddler. My understanding is that the list element pipes Tiddler names into its enclosure.

Yes it does, but it doesn't wrap its children into a p element like the reveal widget. I mean, you are using the reveal widget to create a conditional statement so it is not necessary to have a p element inside the button.
 

Would you please give a rough code snippet for this?

Not sure if it works but something like this

tags:
title: $:/_template/geo-button


<$set name="thepos" value="51.5007, -0.1246">
<$button>
<$action-sendmessage $message="tm-modal" $param="$:/_template/geo-prompt"/>

<$list filter=[field:title[$:/_template/geo]has[text]first[]">
<$action-setfield $tiddler="$:/_template/geo" $field="_position" $value=<<thepos>>/>
</$list>
<$list filter=[field:title[$:/_template/geo]!has[text]first[]">

<$action-setfield $tiddler="$:/_template/geo" $field="_position" $value=<<thepos>>/>

</$list>
{{$:/_template/geo}}
</$button>
</$set>

Also a reveal widget creates a dom element,...

Would you happen to know how I can find the exact objects created in order to access them in JS code?

From inside a widget tree you can access the dom elements but otherwise it is only possible by e.g. adding a unique class attribute to the button or similar.

And finally; I tried to accomplish this by a JavaScript macro but it didn't work because the macro kept firing the popup without being called. So I found this: "http://tiddlywiki.com/dev/#JavaScript%20Macros".

Macros are just used to return a chunk of wikitext for further processing. They should not make modifications to tiddlers in the wiki store. The reason is that you cannott control when the macro is called; it may be called repeatedly as part of refresh processing. So it is important that macros do not have any other side effects beyond generating their text.

Macros are always called when the wiki changed and the parent widgets refresh their children. This may happen on every keystroke.

-Felix

[Felix Küppers]

I meant

<$list filter=[field:title[$:/_template/geo]has[_position]">

[hobbyist writer]

Hi Felix,

...

Maybe it is not suited for your case but I was refering to the "Accordion or Slider" in tiddlywiki.com/#RevealWidget which uses no match to create an if-else.
 

...

Yes it does, but it doesn't wrap its children into a p element like the reveal widget. I mean, you are using the reveal widget to create a conditional statement so it is not necessary to have a p element inside the button.

Now I understand what you meant.

Not sure if it works but something like this...

 

You pointed me in the right direction. I managed to pass regexp to the action widget. Here is the code that works:

tags:
title: $:/_template/geo-button

<$set name="thepos" value="51.47685, -0.00053">

<$button>
<$action-sendmessage $message="tm-modal" $param="$:/_template/geo-prompt"/>

<$list filter="[field:title[$:/_template/geo]regexp:_position[^\s*$]]">
<$action-setfield $tiddler={{!!title}} $field="_position" $value=<<thepos>>/>
</$list>
{{$:/_template/geo}}
</$button>
</$set>

Beautifully done. Thanks a lot.
Mehdi

[hobbyist writer]

...

From inside a widget tree you can access the dom elements but otherwise it is only possible by e.g. adding a unique class attribute to the button or similar.

...

Macros are always called when the wiki changed and the parent widgets refresh their children. This may happen on every keystroke.

Clear. Thanks.

[Felix Küppers]

Hi Mehdi,

> You pointed me in the right direction. I managed to pass regexp to the
> action widget.

Yes, really nice!

-Felix

P.S. For complex regular expressions that include square brackets etc.,
use can always use the set widget to prepare the expression (explained
at tiddlywiki.com).

[hobbyist writer]

P.S. For complex regular expressions that include square brackets etc.,
use can always use the set widget to prepare the expression (explained
at tiddlywiki.com).

I'll remember it. Thanks.