Mooeypoo has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/349350 )
Change subject: [completely experimental] Have the popup flip positions when
theres no room
......................................................................
[completely experimental] Have the popup flip positions when theres no room
Change-Id: Ib00ab60bc18c4c0f2971cffbc12c5264cc12c7a1
---
M src/widgets/PopupWidget.js
1 file changed, 27 insertions(+), 3 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/50/349350/1
diff --git a/src/widgets/PopupWidget.js b/src/widgets/PopupWidget.js
index e5f8abe..70dde84 100644
--- a/src/widgets/PopupWidget.js
+++ b/src/widgets/PopupWidget.js
@@ -396,6 +396,13 @@
var direction, align, vertical, start, end, near, far, sizeProp,
popupSize, anchorSize, anchorPos,
anchorOffset, anchorMargin, parentPosition, positionProp,
positionAdjustment, floatablePos,
offsetParentPos, containerPos,
+ floatableContainerPos, floatableContainerHeight,
containerHeight, distanceFromEdge,
+ oppositePositions = {
+ top: 'bottom',
+ bottom: 'top',
+ right: 'left',
+ left: 'right'
+ },
popupPos = {},
anchorCss = { left: '', right: '', top: '', bottom: '' },
alignMap = {
@@ -423,7 +430,8 @@
forwards: 'top',
center: 'center',
backwards: 'bottom'
- };
+ },
+ popupPosition = this.popupPosition;
if ( !this.$container ) {
// Lazy-initialize $container if not specified in constructor
@@ -448,7 +456,24 @@
sizeProp = vertical ? 'Height' : 'Width';
popupSize = vertical ? ( this.height || this.$popup.height() ) :
this.width;
- this.setAnchorEdge( anchorEdgeMap[ this.popupPosition ] );
+
+ // Calculate space from the edge, to see if either horizontal or
vertical position
+ // should be flipped. If there's not enough room, flip the position to
the other
+ // side
+ floatableContainerPos = this.$floatableContainer.offset();
+ floatableContainerHeight = this.$floatableContainer.outerHeight();
+ containerHeight = this.$container.outerHeight();
+ anchorSize = this.$anchor[ 0 ][ 'scrollHeight' ];
+ distanceFromEdge = containerHeight - floatableContainerHeight -
floatableContainerPos.top - 7;
+ if ( distanceFromEdge < ( this.$element.outerHeight() + anchorSize ) ) {
+ // Flip to the opposite direction
+ popupPosition = oppositePositions[ positionProp ];
+ }
+
+
+
+
+ this.setAnchorEdge( anchorEdgeMap[ popupPosition ] );
this.horizontalPosition = vertical ? this.popupPosition : hPosMap[
align ];
this.verticalPosition = vertical ? vPosMap[ align ] :
this.popupPosition;
@@ -458,7 +483,6 @@
positionProp = vertical ?
( parentPosition.top !== '' ? 'top' : 'bottom' ) :
( parentPosition.left !== '' ? 'left' : 'right' );
-
// Figure out where the near and far edges of the popup and
$floatableContainer are
floatablePos = this.$floatableContainer.offset();
floatablePos[ far ] = floatablePos[ near ] + this.$floatableContainer[
'outer' + sizeProp ]();
--
To view, visit https://gerrit.wikimedia.org/r/349350
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib00ab60bc18c4c0f2971cffbc12c5264cc12c7a1
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
