I have two buttons that open the same popup: to open the popup using the other button I must first close the first one. Why?

#1

Both buttons have the same fore example: popup=<<qualify "$:/state/popup/language">>. If I open the popup using the first button A I have to close the popup before I can open the popup using the other button B. If they had different popups, this wouldn’t happen.

In the example I provided (the simplest I could find, I just copied $:/core/ui/Buttons/language and added 2 buttons) it is not a big problem, but I’m finding it annoying with other popups.

e.g.
Button A opens the popup: You last pressed the “A” button
Button B opens the popup: You last pressed the “B” button

I’d prefer to define only one popup and not two different because the popup could be rather long but only some little things changes based on the button I pressed.

Example test:

\define flag-title()
$(languagePluginTitle)$/icon
\end
<span class="tc-popup-keep">
<$button popup=<<qualify "$:/state/popup/language">> tooltip={{$:/language/Buttons/Language/Hint}} aria-label={{$:/language/Buttons/Language/Caption}} class=<<tv-config-toolbar-class>> selectedClass="tc-selected">
<$list filter="[<tv-config-toolbar-icons>match[yes]]">
<span class="tc-image-button">
<$set name="languagePluginTitle" value={{$:/language}}>
<$image source=<<flag-title>>/>
</$set>
</span>
</$list>
<$list filter="[<tv-config-toolbar-text>match[yes]]">
<span class="tc-btn-text"><$text text={{$:/language/Buttons/Language/Caption}}/></span>
</$list>
</$button>
</span>
<$reveal state=<<qualify "$:/state/popup/language">> type="popup" position="below" animate="yes">
<div class="tc-drop-down">
{{$:/snippets/languageswitcher}}
</div>
</$reveal>

<$button popup=<<qualify "$:/state/popup/language">>>
A
</$button>&nbsp;
<$button popup=<<qualify "$:/state/popup/language">>>
B
</$button>
  • How can I make the button open the popup right away without having to close it first?

P.S.

I also added a third button "C" that opens the Palette popup to see what happens if two buttons have different popups: 
\define flag-title()
$(languagePluginTitle)$/icon
\end
<span class="tc-popup-keep">
<$button popup=<<qualify "$:/state/popup/language">> tooltip={{$:/language/Buttons/Language/Hint}} aria-label={{$:/language/Buttons/Language/Caption}} class=<<tv-config-toolbar-class>> selectedClass="tc-selected">
<$list filter="[<tv-config-toolbar-icons>match[yes]]">
<span class="tc-image-button">
<$set name="languagePluginTitle" value={{$:/language}}>
<$image source=<<flag-title>>/>
</$set>
</span>
</$list>
<$list filter="[<tv-config-toolbar-text>match[yes]]">
<span class="tc-btn-text"><$text text={{$:/language/Buttons/Language/Caption}}/></span>
</$list>
</$button>
</span>
<$reveal state=<<qualify "$:/state/popup/language">> type="popup" position="below" animate="yes">
<div class="tc-drop-down">
{{$:/snippets/languageswitcher}}
</div>
</$reveal>

<span class="tc-popup-keep">
<$button popup=<<qualify "$:/state/popup/palette">> tooltip={{$:/language/Buttons/Palette/Hint}} aria-label={{$:/language/Buttons/Palette/Caption}} class=<<tv-config-toolbar-class>> selectedClass="tc-selected">
<$list filter="[<tv-config-toolbar-icons>match[yes]]">
{{$:/core/images/palette}}
</$list>
<$list filter="[<tv-config-toolbar-text>match[yes]]">
<span class="tc-btn-text"><$text text={{$:/language/Buttons/Palette/Caption}}/></span>
</$list>
</$button>
</span>
<$reveal state=<<qualify "$:/state/popup/palette">> type="popup" position="below" animate="yes">
<div class="tc-drop-down" style="font-size:0.7em;">
{{$:/snippets/paletteswitcher}}
</div>
</$reveal>

<$button popup=<<qualify "$:/state/popup/language">>>
A
</$button>&nbsp;
<$button popup=<<qualify "$:/state/popup/language">>>
B
</$button>&nbsp;
<$button popup=<<qualify "$:/state/popup/palette">>>
C
</$button>

If you click on “A” and then on “B” you’ll see the popup disappear and no popup is opened in its place, then if you click “B” and then “C” you’ll see the language popup being opened and then the palette one being opened in its place once “C” is clicked

#2

That is the way the buttons popup function works. Click once on either button to open the popup, again on either button to close.

The popup function is basicaly one which creates and deletes the popup state tiddler.

If you want a different behaviour you need another method.

#3

Ah bad news then, too bad.
I’ll think of an alternative solution, thank you.

1 Like
#4

I have two buttons that open the same popup: to open the popup using the other button I must first close the first one. Why?

Popups stay open until you select an option that is presented or if you click outside the popup. Which means “close without a change”

If you do not select an option, but click the other button, it is still waiting for the first decision. Since the other button is outside the initial popup it will be closed.

That’s the answer to your question in the thread title.

#5

uups. I did not read your PS.
May be your are happier with this example, which defines a unique state variable for every macro call of the popup.

\define flag-title()
$(languagePluginTitle)$/icon
\end

\define make-popup(a)
<$let state={{{ [<qualify "$:/state/popup/language">] [<__a__>] +[join[/]] }}} >

<<state>>

<span class="tc-popup-keep">
<$button popup=<<state>> tooltip={{$:/language/Buttons/Language/Hint}} aria-label={{$:/language/Buttons/Language/Caption}} class=<<tv-config-toolbar-class>> selectedClass="tc-selected">
<$list filter="[<tv-config-toolbar-icons>match[yes]]">
<span class="tc-image-button">
<$set name="languagePluginTitle" value={{$:/language}}>
<$image source=<<flag-title>>/>
</$set>
</span>
</$list>
<$list filter="[<tv-config-toolbar-text>match[yes]]">
<span class="tc-btn-text"><$text text={{$:/language/Buttons/Language/Caption}}/></span>
</$list>
</$button>
</span>
<$reveal state=<<state>> type="popup" position="below" animate="yes">
<div class="tc-drop-down">
{{$:/snippets/languageswitcher}}
</div>
</$reveal>
</$let>
\end

<<make-popup aa>>  --- <<make-popup bb>>

Also be aware of the tc-popup-keep variable. See the docs.

1 Like
Listing of tiddler and position of popup from a edittext widget not working
#6

Thank you, both for the clarification and for the proposed solution!
I’ll do some tests now :grinning_face_with_smiling_eyes:

1 Like