jenkins-bot has submitted this change and it was merged.
Change subject: FloatingMenuSelectWidget: Update position of menus within
overlay while scrolling
......................................................................
FloatingMenuSelectWidget: Update position of menus within overlay while
scrolling
Bug: T112673
Change-Id: I3da9dc4bc28d52e2ca95b2f542777ec2115a97fd
---
M demos/pages/dialogs.js
M src/widgets/FloatingMenuSelectWidget.js
2 files changed, 49 insertions(+), 20 deletions(-)
Approvals:
Esanders: Looks good to me, approved
jenkins-bot: Verified
diff --git a/demos/pages/dialogs.js b/demos/pages/dialogs.js
index 64246d8..4bdd688 100644
--- a/demos/pages/dialogs.js
+++ b/demos/pages/dialogs.js
@@ -446,7 +446,7 @@
DialogWithDropdowns.parent.call( this, config );
}
OO.inheritClass( DialogWithDropdowns, OO.ui.ProcessDialog );
- DialogWithDropdowns.static.title = 'Dialog with dropdowns';
+ DialogWithDropdowns.static.title = 'Dialog with dropdowns ($overlay
test)';
DialogWithDropdowns.static.actions = [
{ action: 'save', label: 'Done', flags: [ 'primary',
'progressive' ] },
{ action: 'cancel', label: 'Cancel', flags: 'safe' }
@@ -455,6 +455,7 @@
return 250;
};
DialogWithDropdowns.prototype.initialize = function () {
+ var $spacer = $( '<div>' ).height( 150 );
DialogWithDropdowns.parent.prototype.initialize.apply( this,
arguments );
this.bookletLayout = new OO.ui.BookletLayout( {
outlined: true
@@ -466,76 +467,77 @@
content: [
'This is a test of various kinds of
dropdown menus and their $overlay config option. ',
'Entries without any icon use a
correctly set $overlay and their menus should be able to extend outside of this
small dialog. ',
- 'Entries with the ', new
OO.ui.IconWidget( { icon: 'alert' } ), ' icon do not, and their menus should be
clipped to the dialog\'s boundaries.'
+ 'Entries with the ', new
OO.ui.IconWidget( { icon: 'alert' } ), ' icon do not, and their menus should be
clipped to the dialog\'s boundaries. ',
+ 'All dropdown menus should stick to the
widget proper, even when scrolling while the menu is open.'
]
} ),
new SamplePage( 'dropdown', {
label: 'DropdownWidget',
- content: [ new OO.ui.DropdownWidget( {
+ content: [ $spacer.clone(), new
OO.ui.DropdownWidget( {
$overlay: this.$overlay,
menu: {
items: this.makeItems()
}
- } ) ]
+ } ), $spacer.clone() ]
} ),
new SamplePage( 'dropdown2', {
label: 'DropdownWidget',
icon: 'alert',
- content: [ new OO.ui.DropdownWidget( {
+ content: [ $spacer.clone(), new
OO.ui.DropdownWidget( {
menu: {
items: this.makeItems()
}
- } ) ]
+ } ), $spacer.clone() ]
} ),
new SamplePage( 'combobox', {
label: 'ComboBoxWidget',
- content: [ new OO.ui.ComboBoxWidget( {
+ content: [ $spacer.clone(), new
OO.ui.ComboBoxWidget( {
$overlay: this.$overlay,
menu: {
items: this.makeItems()
}
- } ) ]
+ } ), $spacer.clone() ]
} ),
new SamplePage( 'combobox2', {
label: 'ComboBoxWidget',
icon: 'alert',
- content: [ new OO.ui.ComboBoxWidget( {
+ content: [ $spacer.clone(), new
OO.ui.ComboBoxWidget( {
menu: {
items: this.makeItems()
}
- } ) ]
+ } ), $spacer.clone() ]
} ),
new SamplePage( 'lookup', {
label: 'LookupElement',
- content: [ new ExampleLookupTextInputWidget( {
+ content: [ $spacer.clone(), new
ExampleLookupTextInputWidget( {
$overlay: this.$overlay,
items: this.makeItems()
- } ) ]
+ } ), $spacer.clone() ]
} ),
new SamplePage( 'lookup2', {
label: 'LookupElement',
icon: 'alert',
- content: [ new ExampleLookupTextInputWidget( {
+ content: [ $spacer.clone(), new
ExampleLookupTextInputWidget( {
items: this.makeItems()
- } ) ]
+ } ), $spacer.clone() ]
} ),
new SamplePage( 'capsule', {
label: 'CapsuleMultiSelectWidget',
- content: [ new OO.ui.CapsuleMultiSelectWidget( {
+ content: [ $spacer.clone(), new
OO.ui.CapsuleMultiSelectWidget( {
$overlay: this.$overlay,
menu: {
items: this.makeItems()
}
- } ) ]
+ } ), $spacer.clone() ]
} ),
new SamplePage( 'capsule2', {
label: 'CapsuleMultiSelectWidget',
icon: 'alert',
- content: [ new OO.ui.CapsuleMultiSelectWidget( {
+ content: [ $spacer.clone(), new
OO.ui.CapsuleMultiSelectWidget( {
menu: {
items: this.makeItems()
}
- } ) ]
+ } ), $spacer.clone() ]
} )
];
this.bookletLayout.addPages( this.pages );
@@ -657,7 +659,7 @@
}
},
{
- name: 'Dialog with dropdowns',
+ name: 'Dialog with dropdowns ($overlay test)',
dialogClass: DialogWithDropdowns,
config: {
size: 'large'
diff --git a/src/widgets/FloatingMenuSelectWidget.js
b/src/widgets/FloatingMenuSelectWidget.js
index 97eb958..18b78f3 100644
--- a/src/widgets/FloatingMenuSelectWidget.js
+++ b/src/widgets/FloatingMenuSelectWidget.js
@@ -35,6 +35,7 @@
this.inputWidget = inputWidget; // For backwards compatibility
this.$container = config.$container || this.inputWidget.$element;
this.onWindowResizeHandler = this.onWindowResize.bind( this );
+ this.onContainerParentScrollHandler =
this.onContainerParentScroll.bind( this );
// Initialization
this.$element.addClass( 'oo-ui-floatingMenuSelectWidget' );
@@ -62,10 +63,20 @@
};
/**
+ * Handle closest scrollable ancestor of $container resize event.
+ *
+ * @private
+ * @param {jQuery.Event} e Scroll event
+ */
+OO.ui.FloatingMenuSelectWidget.prototype.onContainerParentScroll = function ()
{
+ this.position();
+};
+
+/**
* @inheritdoc
*/
OO.ui.FloatingMenuSelectWidget.prototype.toggle = function ( visible ) {
- var change;
+ var change, closestScrollableOfContainer, closestScrollableOfThis;
visible = visible === undefined ? !this.isVisible() : !!visible;
change = visible !== this.isVisible();
@@ -87,6 +98,22 @@
} else {
$( this.getElementWindow() ).off( 'resize',
this.onWindowResizeHandler );
}
+
+ closestScrollableOfContainer =
OO.ui.Element.static.getClosestScrollableContainer( this.$container[ 0 ] );
+ closestScrollableOfThis =
OO.ui.Element.static.getClosestScrollableContainer( this.$element[ 0 ] );
+ if ( closestScrollableOfContainer !== closestScrollableOfThis )
{
+ // If the clippable container is the root, we have to
listen to scroll events and check
+ // jQuery.scrollTop on the window because of browser
inconsistencies
+ if ( $( closestScrollableOfContainer ).is( 'html, body'
) ) {
+ closestScrollableOfContainer =
OO.ui.Element.static.getWindow( closestScrollableOfContainer );
+ }
+
+ if ( this.isVisible() ) {
+ $( closestScrollableOfContainer ).on( 'scroll',
this.onContainerParentScrollHandler );
+ } else {
+ $( closestScrollableOfContainer ).off(
'scroll', this.onContainerParentScrollHandler );
+ }
+ }
}
return this;
--
To view, visit https://gerrit.wikimedia.org/r/238741
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I3da9dc4bc28d52e2ca95b2f542777ec2115a97fd
Gerrit-PatchSet: 2
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
