[TW5] Popup more persistent ?

[FrD]

Hi,

I'm struggling with popups.

I have a popup, triggered by a button, that transcludes a tiddler containing two buttons.
The behaviour I'm looking for is :
- the first button when clicked does something (it calls <$action-setfield .../>), and does not close the popup,
- the second button also makes a change to a field and closes the popup.

The hard piece is for the first button not to close the popup. Is it possible ?

Thanks

FrD

[Tobias Beer]

Hi FrD,

 

The hard piece is for the first button not to close the popup. Is it possible ?

I guess it's currently only possible if the popup is not rendered within the tiddler being modified by it. 

Not sure, but if you're modifying another tiddler, your popup should not close?!?

Best wishes,

— tb

[FrD]

Hi Tobias,

Thanks for answering.

I've tried your scenario with the popup modifying a field in another tiddler (other than the calling tiddler). The popup is closed anyway.
I've tried to dig in some js files (core/modules/utils/dom/popup.js or reveal.js) but I cannot make much sense of it (too difficult for me for now !)
Maybe there is a way of "forcing" the state of a popup but I can't find how.

FrD

[Eric Shulman]

Popup handling recognizes two special CSS classnames:

   tc-popup-keep

and

   tc-popup-handle

If you assign tc-popup-keep to the <$reveal>, then clicking anywhere within the popup will not dismiss the popup.

If you assign tc-popup-handle to an *individual element within the popup*, then clicking on that element will not dismiss the popup.

For your purposes, something like this:

<$button popup="$:/temp/testpopup">click to test</$button>
<$reveal state="$:/temp/testpopup" type="popup"
   class="tc-drop-down">
<$button class="tc-popup-handle"> click button - stay open</$button>
<$button> click button - close popup</$button>
</$reveal>

enjoy,

-e

Eric Shulman

ELS Design Studios

TiddlyTools - "Small Tools for Big Ideas!"

InsideTiddlyWiki: The Missing Manuals

YOUR DONATIONS ARE VERY IMPORTANT!

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

   http://www.TiddlyTools.com/#Contact

[FrD]

Hi Eric,

Thanks a lot for the answer. It works well except that the button appearance is weird as it retains the style of a clicked button.
Anyway this trick should be in the doc at tiddlywiki.com !

FrD

[Eric Shulman]

When I paste my example code into a new tiddler on tiddlywiki.com, I'm not seeing the weird button appearance.  When I mousedown on a button, it looks pressed in.  When I mouseup, it looks normal again.

Note: using tc-popup-handle in this way might be somewhat of a hack.  The normal use of the class is to detect clicks on a popup "handle" (the element you click to show/hide a popup), so that clicking on a popup handle that is within another popup doesn't dismiss the container.  This is needed to allow nested popups. AFAIK, this class only affects the popup handling behavior and does not have any style attributes associated with it, so it shouldn't change the button appearance.

-e

[Eric Shulman]

On Sunday, October 18, 2015 at 12:09:02 PM UTC-7, FrD wrote:

Thanks a lot for the answer. It works well except that the button appearance is weird as it retains the style of a clicked button.
Anyway this trick should be in the doc at tiddlywiki.com !

There's another way to approach the problem...

First, use "tc-popup-keep" on the <$reveal> to suppress closing when clicking on any element inside the popup (i.e., the usual "sticky" popup).

Then, to dismiss the popup from a button contained within it, you would have that button delete the state tiddler for the reveal (which will make it go away)

   <$action-deletetiddler tiddler="..."/>

thus:

<$button popup="$:/state/popup/something">click</$button>
<$reveal type="popup" state="$:/state/popup/something"
   class="tc-drop-down tc-popup-keep">
   <$button> click and stay open
      <$action-setfield ... />
   </$button>
   <$button> click and close
      <$action-setfield ... />
      <$action-deletetiddler $tiddler="$:/state/popup/something"/>
   </$button>
</$reveal>

enjoy,

-e

[FrD]

Hi Eric,

I'm not with the computer I usually work with.
I'm on a trip with an asus tablet with android and chrome 46.0.xxx .

Maybe it's that particular configuration that gives the strange appearance.

Here is a screenshot.

[FrD]

Hi Eric,

This solution looks promising. I'll give it a try a soon as I have got m computer back.
Thanks again

FrD


ysr

[FrD]

Hi,

have tried the second solution on the tablet. Works perfectly. Will use it for my use-case.

Thanks

FrD