Niche interest - popup placement demo

158 views
Skip to first unread message

clutterstack

unread,
Jul 26, 2021, 3:41:39 PMJul 26
to TiddlyWiki
Hi all,

I made a demonstration of popup placement using the reveal widget's position attribute. It doesn't give you control of all the factors that might affect popup shape and position, but it did help me to understand the behaviour and intent of each positioning option.


Best,
Chris

Ste

unread,
Jul 27, 2021, 11:00:40 AMJul 27
to TiddlyWiki

That's cool! 
I like the ability to set the pop up direction. 
I've been using repopup plugin from the mentat sit (https://thesherwood.github.io/Mentat/)
To keep my polyps in order but I will have a play with this! 

Eric Shulman

unread,
Jul 27, 2021, 11:53:40 AMJul 27
to TiddlyWiki
On Tuesday, July 27, 2021 at 8:00:40 AM UTC-7 Ste wrote:
I like the ability to set the pop up direction. 

The popup position is automatically calculated based on the $button that invokes it, combined with the position="..." keywords.
However, there are MANY more possibilities by using a bit of CSS to adjust the position, like this:

<$button popup=<<qualify "$:/state/popup/myPopup">>> CLICK ME! </$button>
<$reveal state=<<qualify "$:/state/popup/myPopup">> type="popup" position="belowright">
   <div class="tc-drop-down" style="transform:translate(0,calc(-50% - 1em));">
      POPUP CONTENT HERE
      <p/>
      SOME MORE CONTENT
      <p/>
      ETC.
   </div>
</$reveal>

Notes:
1) In the example above, we use "transform:translate(0,calc(-50% - 1em));" to shift the popup y-offset up by half the height of the popup less 1em extra to account for the height of the $button text
2) The result is that the popup appears directly to the right of the $button, but is now vertically centered with the $button text
3) Of course, you can use X,Y values in the translate(...) to adjust the position to put it exactly where you want, with much finer control than just using the built-in position="..." param

enjoy,
-e

TW Tones

unread,
Jul 27, 2021, 6:11:59 PMJul 27
to TiddlyWiki
Ste,

I would not worry about the order of your polyps, just have them, removed :)

Tones

TW Tones

unread,
Jul 27, 2021, 6:17:47 PMJul 27
to TiddlyWiki
Thanks for sharing this.

I have felt it would be nice to be able to detect if a popup is occurring on the left or right half of the screen and align in the opposite direction.

This discussion is informative, I feel I am not making sufficient use of popups to better manage screen real-estate.

Tones

Charlie Veniot

unread,
Jul 27, 2021, 10:15:59 PMJul 27
to TiddlyWiki
Thanks for creating that and sharing !

I love that kind of demonstration.  Very good stuff.

clutterstack

unread,
Jul 28, 2021, 12:00:00 PMJul 28
to TiddlyWiki
@Ste, yes, I also saw recently that @pmario mentioned repopup at github last year (https://github.com/Jermolene/TiddlyWiki5/issues/4531).

I made this demo to understand the current stock behaviour of the reveal widget with popups, partly because it's not intuitive if you only have short lines in the popup  (belowleft can show up to the right of below) -- or if you only have a couple of lines (aboveright can show up below right). 
Adding some more content shows up why the current settings do have logic to them.

@Eric yes, that is a good point, that we can exert further control using these attributes as a base.

Thanks, Tones and CJ.

TW Tones

unread,
Jul 28, 2021, 8:27:25 PMJul 28
to TiddlyWiki
Eric,

Have you ever made a popup also a dropzone?

I would like a popup that has a number of coloured boxes that represent fields I can drop content into. eg a link

just asking.

Thanks
Tones

Eric Shulman

unread,
Jul 28, 2021, 11:21:06 PMJul 28
to TiddlyWiki
On Wednesday, July 28, 2021 at 5:27:25 PM UTC-7 TW Tones wrote:
Have you ever made a popup also a dropzone?
I would like a popup that has a number of coloured boxes that represent fields I can drop content into. eg a link

It's actually quite straightforward.  Try this:
\define dropActions()
<$action-createtiddler $basetitle=<<actionTiddler>>
   tags={{{ [<actionTiddler>get[tags]] }}}
   text={{{ [<actionTiddler>get[text]] }}}/>
\end
<$button popup=<<qualify "$:/state/popup/myPopup">>> CLICK ME! </$button>
<$reveal state=<<qualify "$:/state/popup/myPopup">> type="popup" position="belowright">
   <div class="tc-drop-down" style="transform:translate(0,calc(-50% - 1em));">
      <$droppable tag="div" actions=<<dropActions>>>
      POPUP CONTENT HERE
      <p/>
      SOME MORE CONTENT
      <p/>
      ETC.
     </$droppable>
   </div>
</$reveal

Notes:
* The $droppable widget uses tag="div" so that the entire background of the popup is the drop target
* For this example, dropActions() creates a new tiddler with "TiddlerTitle (n)" that copies the tags and text fields.

enjoy,
-e

TW Tones

unread,
Jul 28, 2021, 11:44:10 PMJul 28
to TiddlyWiki
Thanks Eric,

Here is my resulting popup drop on field.

Works on Tiddlywiki.com

\define dropActions()
<$action-setfield $tiddler=<<currentTiddler>> $field="link" $value=<<actionTiddler>>/>
\end
<$button popup=<<qualify "$:/state/popup/myPopup">>> Open dropzone</$button>
<$reveal state=<<qualify "$:/state/popup/myPopup">> type="popup" position="belowright">
   <div class="tc-drop-down" style="transform:translate(0,calc(-50% - 1em));">
      <$droppable tag="div" actions=<<dropActions>>>
          Drop tiddler or link here {{!!link}}
     </$droppable>
   </div>
</$reveal>

Thanks heaps.

Reply all
Reply to author
Forward
0 new messages