Modifier variable in actions parameter of a custom image picker - not working

1

I am using the core image picker macro to create a custom image picker.
Here I am using a html table within this custom template.
In the bottom part of the table , I am transcluding the custom image picker macro.
In the top part, the image selected using the image picker macro will be shown using field transclusion.
Images are shown in single column or two column depending upon the use of a modifier variable. This use of modifier variable is not working. What is wrong with that part of the code. I have used modifier variable similarly in some other contexts which are working.

\define my-image-picker(actions,filter:"[<currentTiddler>transcludes[]suffix[.png]] +[!has[draft.of]$subfilter$sort[title]]",subfilter:"")
\whitespace trim
<div class="tc-image-chooser">
<$macrocall $name="image-picker-list" filter="""$filter$""" actions=<<__actions__>>/>
</div>
\end

\define image-picker-actions()

<$list filter="[<modifier>match[normal]]" variable=nul>

<$action-setfield $tiddler=<<currentTiddler>> $field="image-1" $value=<<imageTitle>>/>
<$action-deletefield $tiddler=<<currentTiddler>> $field="image-2"/>
</$list>
<$list filter="[<modifier>match[alt]]" variable=nul>

<$action-setfield $tiddler=<<currentTiddler>> $field="image-2" $value=<<imageTitle>>/>
</$list>
\end

<div class="my-img-picker">
<table>
<$list filter="[<currentTiddler>!has[image-2]]" >
<tr>
<td style="width:100%;">
<$transclude $tiddler={{!!image-1}} />
</td>
</tr>
<tr>
<td style="width:100%;">
<$transclude $tiddler={{!!image-1}} $field="label"/>
</td>
</tr>
</$list>
<$list filter="[<currentTiddler>has[image-2]]" >
<tr>
<td style="width:50%;">
<$transclude $tiddler={{!!image-1}} />
</td>
<td style="width:50%;">
<$transclude $tiddler={{!!image-2}} />
</td>
</tr>
<tr>
<td style="width:50%;">
<$transclude $tiddler={{!!image-1}} $field="label"/>
</td>
<td style="width:50%;">
<$transclude $tiddler={{!!image-2}} $field="label"/>
</td>
</tr>
</$list>
<tr>
<td colspan=2>
<$transclude $variable='my-image-picker' actions=<<image-picker-actions>> />
</td>
</tr>
</table>
</div>
2

Didn’t see the Modifier variable defined in your script, though there are two references to the variable. Is it defined somewhere with the value “normal” or “alt” ?

3 
\define image-picker-actions()

<$list filter="[<modifier>match[normal]]" variable=nul>

<$action-setfield $tiddler=<<currentTiddler>> $field="image-1" $value=<<imageTitle>>/>
<$action-deletefield $tiddler=<<currentTiddler>> $field="image-2"/>
</$list>
<$list filter="[<modifier>match[alt]]" variable=nul>

<$action-setfield $tiddler=<<currentTiddler>> $field="image-2" $value=<<imageTitle>>/>
</$list>
\end

This is the part of the code with modifier

4

The “Modifier” variable is referred to within that two filters. It has to be defined first before it can be referred to.

If the value of the Modifier variable comes from an text input field or a selector field somewhere, then maybe use the field reference {tiddler_name!!text-input-field} or {tiddler_name!!selector-field} instead of variable (i.e. <modifier>) within the filter. You might want to refer back to your other usages of modifier variable to see how it was defined. There is probably a <$let modifier=...> somewhere. Find out how and where the modifier variable get it’s “normal” or “alt” value ?

5

The modifier variable is set by the TWCore when processing actions triggered by various interactive widgets (see https://tiddlywiki.com/#modifier%20Variable). As of v5.2.0, this variable is also set for actions triggered by the $keyboard widget.

-e

6

Does that mean the image picker macro doesn’t support modifier variable instrinsically. Any way to hack the macro to support modifier variable

7

Give this a try:

  • Edit shadow tiddler $:/core/macros/image-picker
  • change the definition of image-picker-thumbnail() from this:
\define image-picker-thumbnail(actions)
<$button tag="a" tooltip="""$(imageTitle)$""">
<$transclude $variable="__actions__"/>
<$transclude tiddler=<<imageTitle>>/>
</$button>
\end

to this:

\define image-picker-thumbnail(actions)
<$button tag="a" tooltip="""$(imageTitle)$""" actions=<<__actions__>>>
<$transclude tiddler=<<imageTitle>>/>
</$button>
\end

The difference is that the actions are processed by the $button widget’s actions parameter rather than using an “inline” $transclude widget within the body of the $button widget.

The reason this may work is because of the following TWCore code in the $:/core/modules/widgets/button.js handler:

if(self.actions) {
	var modifierKey = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
	self.invokeActionString(self.actions,self,event,{modifier: modifierKey});
}

which handles execution of the $button widget’s actions=... parameter, as compared with

if(self.invokeActions(self,event)) {
	handled = true;
}

which handles execution of “inline” actions within the content of the $button widget. Note how the actions=... handling explicitly gets and passes the modifierKey value, while the handling for the “inline” actions does not.

Let me know how it goes…

-e

8

Thankyou @EricShulman . I will try it once I am back home

9

Ah, I see. The ‘Alt’ is for Alternate key, not the alternate image that I imagine.Thanks for informing :+1: Eric to the rescue as usual !!!

10 
\define my-image-picker-thumbnail(actions)
<$button tag="a" tooltip="""$(imageTitle)$""" actions=<<__actions__>>>
<$transclude tiddler=<<imageTitle>>/>
</$button>
\end

\define my-image-picker-actions()
<$list filter="[<modifier>match[normal]]" variable=nul>
<$action-setfield $tiddler=<<currentTiddler>> $field="image-2" $value=<<imageTitle>>/>
</$list>
<$list filter="[<modifier>match[ctrl]]" variable=nul>
<$action-setfield $tiddler=<<currentTiddler>> $field="image-1" $value=<<imageTitle>>/>
<$action-deletefield $tiddler=<<currentTiddler>> $field="image-2"/>
</$list>
\end

\define my-image-picker-list(filter,actions)
\whitespace trim
<$list filter="""$filter$""" variable="imageTitle">
<$macrocall $name="my-image-picker-thumbnail" actions=<<my-image-picker-actions>>>/>
&#32;
</$list>
\end

\define my-image-picker(actions,filter:"[<currentTiddler>transcludes[]suffix[.png]] +[!has[draft.of]$subfilter$sort[title]]",subfilter:"")
\whitespace trim
<div class="tc-image-chooser">
<$macrocall $name="my-image-picker-list" filter="""$filter$""" actions=<<__actions__>>/>
</div>
\end

<div class="my-img-picker">
<table>
<$list filter="[<currentTiddler>!has[image-2]]" >
<tr>
<td style="width:100%;">
<$transclude $tiddler={{!!image-1}} />
</td>
</tr>
<tr>
<td style="width:100%;">
<$transclude $tiddler={{!!image-1}} $field="label"/>
<$link to={{!!image-1}}><$view tiddler={{!!image-1}} field=title /></$link>
</td>
</tr>
</$list>
<$list filter="[<currentTiddler>has[image-2]]" >
<tr>
<td style="width:50%;">
<$transclude $tiddler={{!!image-1}} />
</td>
<td style="width:50%;">
<$transclude $tiddler={{!!image-2}} />
</td>
</tr>
<tr>
<td style="width:50%;">
<$transclude $tiddler={{!!image-1}} $field="label"/>
<$link to={{!!image-1}}><$view tiddler={{!!image-1}} field=title /></$link>
</td>
<td style="width:50%;">
<$transclude $tiddler={{!!image-2}} $field="label"/>
<$link to={{!!image-2}}><$view tiddler={{!!image-2}} field=title /></$link>
</td>
</tr>
</$list>
<tr>
<td colspan=2>
<$transclude $variable='my-image-picker' actions=<<my-image-picker-actions>> />
</td>
</tr>
</table>
</div>

This code seem to work as I was intending. I had to use ctrl instead of alt to make it work. No idea why.