Bartosz Dziewoński has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/398195 )
Change subject: Introduce OO.ui.getDefaultOverlay
......................................................................
Introduce OO.ui.getDefaultOverlay
Widgets that support overlays now use the default overlay
when passed `$overlay: true` in configuration options.
(We can't use it really by default, because that would break
overlay-less widgets used in dialogs.)
Bug: T182602
Change-Id: Ied0541209c4a9d7bf8c0574b0a864ba09fff1b70
---
M demos/pages/widgets.js
M src/core.js
M src/mixins/LookupElement.js
M src/styles/core.less
M src/widgets/CapsuleMultiselectWidget.js
M src/widgets/ComboBoxInputWidget.js
M src/widgets/DropdownWidget.js
M src/widgets/MenuTagMultiselectWidget.js
M src/widgets/PopupButtonWidget.js
M src/widgets/PopupTagMultiselectWidget.js
10 files changed, 62 insertions(+), 8 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/95/398195/1
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 713f536..1380214 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1310,6 +1310,36 @@
new OO.ui.FieldLayout(
new OO.ui.DropdownWidget( {
label: 'Select one',
+ $overlay: true,
+ menu: {
+ items: [
+ new
OO.ui.MenuOptionWidget( {
+ data:
'a',
+ label:
'First'
+ } ),
+ new
OO.ui.MenuOptionWidget( {
+ data:
'b',
+ label:
'Second'
+ } ),
+ new
OO.ui.MenuOptionWidget( {
+ data:
'c',
+ label:
'Third'
+ } ),
+ new
OO.ui.MenuOptionWidget( {
+ data:
'd',
+ label:
'Fourth'
+ } )
+ ]
+ }
+ } ),
+ {
+ label: 'DropdownWidget (using
default overlay)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.DropdownWidget( {
+ label: 'Select one',
$overlay: $overlay,
menu: {
items: [
@@ -1333,7 +1363,7 @@
}
} ),
{
- label: 'DropdownWidget (using
overlay)\u200E',
+ label: 'DropdownWidget (using
custom overlay)\u200E',
align: 'top'
}
),
@@ -2957,6 +2987,9 @@
$overlay.appendTo( 'body' );
demo.once( 'destroy', function () {
+ // We are removing all of the widgets from the page, so also
remove their "detached"
+ // menus and stuff, otherwise they can remain visible forever.
$overlay.remove();
+ OO.ui.$defaultOverlay.empty();
} );
};
diff --git a/src/core.js b/src/core.js
index c2b11e1..1dbc5c4 100644
--- a/src/core.js
+++ b/src/core.js
@@ -541,3 +541,17 @@
left: 0
};
};
+
+/**
+ * Get the default overlay, which is used by various widgets when they are
passed `$overlay: true`.
+ * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
+ *
+ * @return {jQuery} Default overlay node
+ */
+OO.ui.getDefaultOverlay = function () {
+ if ( !OO.ui.$defaultOverlay ) {
+ OO.ui.$defaultOverlay = $( '<div>' ).addClass(
'oo-ui-defaultOverlay' );
+ $( 'body' ).append( OO.ui.$defaultOverlay );
+ }
+ return OO.ui.$defaultOverlay;
+};
diff --git a/src/mixins/LookupElement.js b/src/mixins/LookupElement.js
index 2b334fc..3b0771e 100644
--- a/src/mixins/LookupElement.js
+++ b/src/mixins/LookupElement.js
@@ -34,7 +34,7 @@
OO.ui.mixin.RequestManager.call( this, config );
// Properties
- this.$overlay = config.$overlay || this.$element;
+ this.$overlay = ( config.$overlay === true ? OO.ui.getDefaultOverlay()
: config.$overlay ) || this.$element;
this.lookupMenu = new OO.ui.MenuSelectWidget( {
widget: this,
input: this,
diff --git a/src/styles/core.less b/src/styles/core.less
index 211e06e..394f0a9 100644
--- a/src/styles/core.less
+++ b/src/styles/core.less
@@ -57,3 +57,10 @@
@import 'widgets/CheckboxMultiselectWidget.less';
@import 'widgets/CheckboxMultioptionWidget.less';
@import 'widgets/ProgressBarWidget.less';
+
+.oo-ui-defaultOverlay {
+ position: absolute;
+ top: 0;
+ /* @noflip */
+ left: 0;
+}
diff --git a/src/widgets/CapsuleMultiselectWidget.js
b/src/widgets/CapsuleMultiselectWidget.js
index 5509050..bdd388e 100644
--- a/src/widgets/CapsuleMultiselectWidget.js
+++ b/src/widgets/CapsuleMultiselectWidget.js
@@ -108,7 +108,7 @@
this.$content = $( '<div>' );
this.allowArbitrary = config.allowArbitrary;
this.allowDuplicates = config.allowDuplicates;
- this.$overlay = config.$overlay;
+ this.$overlay = config.$overlay === true ? OO.ui.getDefaultOverlay() :
config.$overlay;
this.menu = new OO.ui.MenuSelectWidget( $.extend(
{
widget: this,
diff --git a/src/widgets/ComboBoxInputWidget.js
b/src/widgets/ComboBoxInputWidget.js
index f4206f3..2026885 100644
--- a/src/widgets/ComboBoxInputWidget.js
+++ b/src/widgets/ComboBoxInputWidget.js
@@ -81,7 +81,7 @@
OO.ui.ComboBoxInputWidget.parent.call( this, config );
// Properties
- this.$overlay = config.$overlay || this.$element;
+ this.$overlay = ( config.$overlay === true ? OO.ui.getDefaultOverlay()
: config.$overlay ) || this.$element;
this.dropdownButton = new OO.ui.ButtonWidget( {
classes: [ 'oo-ui-comboBoxInputWidget-dropdownButton' ],
indicator: 'down',
diff --git a/src/widgets/DropdownWidget.js b/src/widgets/DropdownWidget.js
index f81fb31..2ff930e 100644
--- a/src/widgets/DropdownWidget.js
+++ b/src/widgets/DropdownWidget.js
@@ -63,7 +63,7 @@
// Properties (must be set before TabIndexedElement constructor call)
this.$handle = $( '<span>' );
- this.$overlay = config.$overlay || this.$element;
+ this.$overlay = ( config.$overlay === true ? OO.ui.getDefaultOverlay()
: config.$overlay ) || this.$element;
// Mixin constructors
OO.ui.mixin.IconElement.call( this, config );
diff --git a/src/widgets/MenuTagMultiselectWidget.js
b/src/widgets/MenuTagMultiselectWidget.js
index ce74690..51be094 100644
--- a/src/widgets/MenuTagMultiselectWidget.js
+++ b/src/widgets/MenuTagMultiselectWidget.js
@@ -35,7 +35,7 @@
// Parent constructor
OO.ui.MenuTagMultiselectWidget.parent.call( this, config );
- this.$overlay = config.$overlay || this.$element;
+ this.$overlay = ( config.$overlay === true ? OO.ui.getDefaultOverlay()
: config.$overlay ) || this.$element;
this.menu = this.createMenuWidget( $.extend( {
widget: this,
diff --git a/src/widgets/PopupButtonWidget.js b/src/widgets/PopupButtonWidget.js
index f769c46..ba9e65a 100644
--- a/src/widgets/PopupButtonWidget.js
+++ b/src/widgets/PopupButtonWidget.js
@@ -38,7 +38,7 @@
OO.ui.mixin.PopupElement.call( this, config );
// Properties
- this.$overlay = config.$overlay || this.$element;
+ this.$overlay = ( config.$overlay === true ? OO.ui.getDefaultOverlay()
: config.$overlay ) || this.$element;
// Events
this.connect( this, { click: 'onAction' } );
diff --git a/src/widgets/PopupTagMultiselectWidget.js
b/src/widgets/PopupTagMultiselectWidget.js
index 31c69c6..530bd25 100644
--- a/src/widgets/PopupTagMultiselectWidget.js
+++ b/src/widgets/PopupTagMultiselectWidget.js
@@ -42,7 +42,7 @@
// Parent constructor
OO.ui.PopupTagMultiselectWidget.parent.call( this, $.extend( {
inputPosition: 'none' }, config ) );
- this.$overlay = config.$overlay || this.$element;
+ this.$overlay = ( config.$overlay === true ? OO.ui.getDefaultOverlay()
: config.$overlay ) || this.$element;
if ( !config.popup ) {
// For the default base implementation, we give a popup
--
To view, visit https://gerrit.wikimedia.org/r/398195
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ied0541209c4a9d7bf8c0574b0a864ba09fff1b70
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
