Niche interest - popup placement demo

[clutterstack]

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.

https://clutterstack-tw-notes.tiddlyhost.com/#Demo%20-%20popup%20positioning%20with%20reveal%20widget

Best,

Chris

[Ste]

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]

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]

Ste,

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

Tones

[TW Tones]

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]

Thanks for creating that and sharing !

I love that kind of demonstration.  Very good stuff.

[clutterstack]

@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]

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]

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]

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.