Assistance with popup feature in custom widget, custom or core bug?

#1

I am not sure if my code is buggy or the custom widget method is budggy.

Paste the following into a tiddler on tiddlywiki.com

  • You will see two ? icons.
  • Click on one then the other, they don’t both open at once but the content of both is the content of the second one.
  • The first seems to work as expected when the second one is deleted.
    • Its like the two invocations of the same widget are confused.
    • I had it working before.

There is self documentation in this tiddler for a work in progress, I just can’t understand where it goes wrong and why?

\procedure cp-popup-state() <$macrocall $name=qualify title={{{ [<cp-popup-prefix>addsuffix<cp-n>] }}}/>
\widget $custom.popup()
<$parameters cp-name={{$:/core/images/help}}  cp-display-filter="[<display-filter>!is[blank]else<currentTiddler>]" cp-popup-prefix="$:/temp/custom.popup" cp-button-class="tc-btn-invisible" $params="cp-params">
<$setmultiplevariables $names="[<cp-params>jsonindexes[]]" 
   $values="[<cp-params>jsonindexes[]] :map[<cp-params>jsonget<currentTiddler>]">
<$list filter=<<cp-display-filter>> variable=~ emptyMessage=<<!cp-display-filter>> >
<$button popup=<<cp-popup-state>> tooltip=<<cp-tooltip>> class=<<cp-button-class>> >
<<cp-name>>
</$button>
<$reveal type="popup" state=<<cp-popup-state>> position=<<cp-position>> >
<div class="tc-drop-down" style.padding=".5em .5em .5em .3em" >
<$slot $name="ts-raw">
</div>
</$reveal>
</$list>
</$setmultiplevariables>
</$parameters>
\end $custom.popup

;Simplest form <<n>>

<$custom.popup>
content <<cp-n>>
</$custom.popup>
<hr>
<$custom.popup cp-n=2>
<<cp-n>> <<cp-popup-state>>
</$custom.popup>

;Internal variables make use of the custom popup prefix `cp-` leaving all others available
* `<<cp-name>>` name or button transclusion to use on button, 
** default=`{{$:/core/images/help}}` {{$:/core/images/help}}
* `<<currentTiddler>>` as usual (is not changed) 
* `<<cp-tooltip>>` tooltip then appears on popup button (no default)
* `<<cp-display-filter>>` uses existing variable or currentTiddler by default.
** * `<<!cp-display-filter>>` what to display instead of popup button if do not pass display-filter test (no default)
* `<<cp-popup-state>>` A concatenation of the following used as popup state tiddler title
** `<<cp-popup-prefix>>`
** `<<cp-n>>` a number of string to add uniqueness to a tiddler when $custom.popup is used more than once in the same context (like current tiddler)
* `<<cp-button-class>>`
* `<<cp-position>>` Position: left, above, aboveleft, aboveright, right, belowleft, belowright or below (as per reveal widget
* `<<cp-@params>>` all parameters and values in JSON

;Status;
* Broken after cp-prefixes added
* two areas showing on ether click
* cp-n qualifier not working?
** both showing the same content
#2

Hi @TW_Tones,
Looks like the problem comes from the cp-popup-state procedure or the use of the qualify macro within.
If you replace this procedure by a <$qualify> widget inside the custom widget it works.
Please note I also closed the <$slot> tag.

Here is the modified code:

\widget $custom.popup()
<$parameters cp-name={{$:/core/images/help}}  cp-display-filter="[<display-filter>!is[blank]else<currentTiddler>]" cp-popup-prefix="$:/temp/custom.popup" cp-button-class="tc-btn-invisible" $params="cp-params">
<$setmultiplevariables $names="[<cp-params>jsonindexes[]]" 
   $values="[<cp-params>jsonindexes[]] :map[<cp-params>jsonget<currentTiddler>]">
<$qualify title={{{ [<cp-popup-prefix>addsuffix<cp-n>] }}} name="cp-popup-state">
<$list filter=<<cp-display-filter>> variable=~ emptyMessage=<<!cp-display-filter>> >
<$button popup=<<cp-popup-state>> tooltip=<<cp-tooltip>> class=<<cp-button-class>> >
<<cp-name>>
</$button>
<$reveal type="popup" state=<<cp-popup-state>> position=<<cp-position>> >
<div class="tc-drop-down" style.padding=".5em .5em .5em .3em" >
<$slot $name="ts-raw"/>
</div>
</$reveal>
</$list>
</$qualify>
</$setmultiplevariables>
</$parameters>
\end $custom.popup

;Simplest form <<n>>

<$custom.popup>
content <<cp-n>>
</$custom.popup>
<hr>
<$custom.popup cp-n=2>
<<cp-n>> <<cp-popup-state>>
</$custom.popup>

;Internal variables make use of the custom popup prefix `cp-` leaving all others available
* `<<cp-name>>` name or button transclusion to use on button, 
** default=`{{$:/core/images/help}}` {{$:/core/images/help}}
* `<<currentTiddler>>` as usual (is not changed) 
* `<<cp-tooltip>>` tooltip then appears on popup button (no default)
* `<<cp-display-filter>>` uses existing variable or currentTiddler by default.
** * `<<!cp-display-filter>>` what to display instead of popup button if do not pass display-filter test (no default)
* `<<cp-popup-state>>` A concatenation of the following used as popup state tiddler title
** `<<cp-popup-prefix>>`
** `<<cp-n>>` a number of string to add uniqueness to a tiddler when $custom.popup is used more than once in the same context (like current tiddler)
* `<<cp-button-class>>`
* `<<cp-position>>` Position: left, above, aboveleft, aboveright, right, belowleft, belowright or below (as per reveal widget
* `<<cp-@params>>` all parameters and values in JSON

;Fixed;
* Broken after cp-prefixes added
* two areas showing on ether click
* cp-n qualifier not working?
** both showing the same content

Fred

1 Like
#4

Thanks so much @tw-FRed it is so important to have a peer review code when there is a persistent problem. Certianly the key problem was not closing the <$slot $name="ts-raw"/> with the /, something that would be clear if we had a basic syntax checker.

Also I did not realise the qualify widget actualy set the variable given in the name parameter. Thus we also need to close the Qualify widget as well.

  • Of course this is similar to let, set and vars widgets
  • It indicates a useful pattern we could include in other widgets where we want to use the result of the widget in subsequent code.

I will not try and publish this and some related solutions soon.

  • This one - custom.popup widget that displays its content on click
  • Filter driven - popup that list tiddlers you can navigate to (or open below)
  • Filter driven - popup that list tiddlers and performs actions on the one selected.

I wanted to give future requests like this How to create button that allows you to choose between two templates - #20 by Xabrina an “out of the box” solution.

1 Like