New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Please allow positioning of popups other than centered #6186

Closed
teo1978 opened this Issue Jul 18, 2013 · 3 comments

Comments

Projects
None yet
2 participants
@teo1978

teo1978 commented Jul 18, 2013

This is a feature request (though a feature so basic that its lack seems to me a design flaw).

I was looking at the documentation of the popup widget, and I thought something was missing because I could only find how to determine to what the popup is positioned, but not how it is positioned relative to that, i.e.: centered, to the right of, to the left of, to the bottom of, to the top of, etc.

I'm astonished to find out that's not a lack of documentation: it really can only be centered. Centered to whatever you want but only centered.

CENTERING is only one of at least 9 very commonly needed reasonable ways of positioning a popup relative to a point, and it is not even the most commonly needed positioning. And of course there are infinite less obvious posituonings.

When you open a popup positioned to the window, very often you will want to place it on top, bottom, left, right, top-right, bottom-left, etc of the window.

When you open it relative to the source (i.e. the clicked link that opens it) you ALMOST NEVER want it to be centered to it. Most of the time you'll want it to the right or to the top etc.

So, besides a position-to attribute, it should also have a "position" attribute, or maybe a "position-what" attribute (that is: WHAT is going to coincide with the position-to object? The center, the top-left corner, the bottom-right corner, the center of the right side, the point at 20% height of the right side, etc etc).
I'm not sure exactly what's the best api specification would be, but some more useful positioning scheme than JUST CENTERING definitely must be defined.

Maybe even 3 attributes are needed, because the "position-to" and "position" scheme ("position being something like "left", right, top, etc) only makes sense when the position-to is a POINT. But position-to is usually a box. So you must be allowed to align whatever part (i.e. top, bottom, left, right, xx-corner...) of the popup to whatever part of the position-to target.

The solution is not obvious, but it is evident that "always centering" cannot in any way solve even a significant fraction of the use cases.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jul 18, 2013

Contributor

We are indeed considering adding such a feature. In the meantime, if you need custom positioning, you can always bind to the "popupbeforeposition" event and replace the coordinates in the options object:

$.mobile.document.on( "popupbeforeposition", "#myPopup", function( event, options ) {
  var destination = $( "#elementWhereToPutThePopup" ),
    dstOffset = destination.offset(),
    dstSize = {
      cx: destination.width(),
      cy: destination.height()
    };

  options.x = dstOffset.left;
  options.y = dstOffset.top + dstSize.cy;
});
Contributor

gabrielschulhof commented Jul 18, 2013

We are indeed considering adding such a feature. In the meantime, if you need custom positioning, you can always bind to the "popupbeforeposition" event and replace the coordinates in the options object:

$.mobile.document.on( "popupbeforeposition", "#myPopup", function( event, options ) {
  var destination = $( "#elementWhereToPutThePopup" ),
    dstOffset = destination.offset(),
    dstSize = {
      cx: destination.width(),
      cy: destination.height()
    };

  options.x = dstOffset.left;
  options.y = dstOffset.top + dstSize.cy;
});
@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jul 27, 2013

Contributor

I've written an extension to help with aligning popups.

Here's the demo, and here's the extension.

Contributor

gabrielschulhof commented Jul 27, 2013

I've written an extension to help with aligning popups.

Here's the demo, and here's the extension.

@teo1978

This comment has been minimized.

Show comment
Hide comment
@teo1978

teo1978 Jul 28, 2013

The api seems very counterintuitive, that can't be the definitive fix.
Correct me if wrong:
For x-align:
-1 => align popup's right to target's left
-0.5 => align popup's center to target's left
0 => align popup's left to target's left
0.5 => align popup's center to target's center <<< THIS should be called 0
1 => align popup's right to target's right
1.5 => align popup's center to target's right
+2 => align popup's left to target's right
And the same for Y

  • values should be shifted of -0.5, so that the range would be symmetric, the center-to-center option would be called 0, and opposite numbers would represent vice-versa alignments
  • I'm not user using number is a good idea at all, as it's counterintuitive and it may seem to suggest that the popup moves to the right as the x-align increases, while that is not (nor should it be) the case
  • There are missing options, such as aligning the popup's left or right or top or bottom to the target's center.

Does the demo include all the code? Because at a quick glance I seem to be able to see the extension's code but I don't see how the sliders' values are bound to widget parameters, but that may be my fault.

teo1978 commented Jul 28, 2013

The api seems very counterintuitive, that can't be the definitive fix.
Correct me if wrong:
For x-align:
-1 => align popup's right to target's left
-0.5 => align popup's center to target's left
0 => align popup's left to target's left
0.5 => align popup's center to target's center <<< THIS should be called 0
1 => align popup's right to target's right
1.5 => align popup's center to target's right
+2 => align popup's left to target's right
And the same for Y

  • values should be shifted of -0.5, so that the range would be symmetric, the center-to-center option would be called 0, and opposite numbers would represent vice-versa alignments
  • I'm not user using number is a good idea at all, as it's counterintuitive and it may seem to suggest that the popup moves to the right as the x-align increases, while that is not (nor should it be) the case
  • There are missing options, such as aligning the popup's left or right or top or bottom to the target's center.

Does the demo include all the code? Because at a quick glance I seem to be able to see the extension's code but I don't see how the sliders' values are bound to widget parameters, but that may be my fault.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment