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
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
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.