Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/231469
Change subject: Evolve TextInputMenuSelectWidget into FloatingMenuSelectWidget
......................................................................
Evolve TextInputMenuSelectWidget into FloatingMenuSelectWidget
* Corrected documentation to (hopefully) better explain what this does
in comparison to regular MenuSelectWidget.
* Do not require a TextInputWidget to be passed. In fact, this code
has always worked with any kind of widget, or in fact any $container.
Document the latter as the primary way this should be used now.
* Preserve the old name (as a deprecated alias), as well as the old
CSS classes and object properties.
Updated references to TextInputMenuSelectWidget in ComboBoxWidget and
LookupElement, the only two built-in widgets that use it.
Change-Id: Idb12d50ecf99ad3adba603096b93cbba85878130
---
M build/modules.json
M src/mixins/LookupElement.js
M src/styles/core.less
M src/styles/theme.less
A src/styles/widgets/FloatingMenuSelectWidget.less
D src/styles/widgets/TextInputMenuSelectWidget.less
M src/themes/apex/widgets.less
M src/themes/blank/widgets.less
M src/themes/mediawiki/widgets.less
M src/widgets/ComboBoxWidget.js
A src/widgets/FloatingMenuSelectWidget.js
M src/widgets/SearchWidget.js
D src/widgets/TextInputMenuSelectWidget.js
13 files changed, 134 insertions(+), 122 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/69/231469/1
diff --git a/build/modules.json b/build/modules.json
index 79cf4c6..f68d6f7 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -103,7 +103,7 @@
"src/widgets/ButtonSelectWidget.js",
"src/widgets/RadioSelectWidget.js",
"src/widgets/MenuSelectWidget.js",
-
"src/widgets/TextInputMenuSelectWidget.js",
+
"src/widgets/FloatingMenuSelectWidget.js",
"src/widgets/OutlineSelectWidget.js",
"src/widgets/TabSelectWidget.js",
"src/widgets/NumberInputWidget.js",
diff --git a/src/mixins/LookupElement.js b/src/mixins/LookupElement.js
index 663cce8..27f05c0 100644
--- a/src/mixins/LookupElement.js
+++ b/src/mixins/LookupElement.js
@@ -1,5 +1,5 @@
/**
- * LookupElement is a mixin that creates a {@link
OO.ui.TextInputMenuSelectWidget menu} of suggested values for
+ * LookupElement is a mixin that creates a {@link
OO.ui.FloatingMenuSelectWidget menu} of suggested values for
* a {@link OO.ui.TextInputWidget text input widget}. Suggested values are
based on the characters the user types
* into the text input field and, in general, the menu is only displayed when
the user types. If a suggested value is chosen
* from the lookup menu, that value becomes the value of the input field.
@@ -28,10 +28,10 @@
// Properties
this.$overlay = config.$overlay || this.$element;
- this.lookupMenu = new OO.ui.TextInputMenuSelectWidget( this, {
+ this.lookupMenu = new OO.ui.FloatingMenuSelectWidget( {
widget: this,
input: this,
- $container: config.$container
+ $container: config.$container || this.$element
} );
this.allowSuggestionsWhenEmpty = config.allowSuggestionsWhenEmpty ||
false;
@@ -142,7 +142,7 @@
* Get lookup menu.
*
* @private
- * @return {OO.ui.TextInputMenuSelectWidget}
+ * @return {OO.ui.FloatingMenuSelectWidget}
*/
OO.ui.mixin.LookupElement.prototype.getLookupMenu = function () {
return this.lookupMenu;
diff --git a/src/styles/core.less b/src/styles/core.less
index 4f9c40f..d822131 100644
--- a/src/styles/core.less
+++ b/src/styles/core.less
@@ -96,7 +96,7 @@
@import 'widgets/MenuSelectWidget.less';
@import 'widgets/MenuOptionWidget.less';
@import 'widgets/MenuSectionOptionWidget.less';
-@import 'widgets/TextInputMenuSelectWidget.less';
+@import 'widgets/FloatingMenuSelectWidget.less';
@import 'widgets/DropdownWidget.less';
@import 'widgets/SelectFileWidget.less';
diff --git a/src/styles/theme.less b/src/styles/theme.less
index 1a77f07..0a69e19 100644
--- a/src/styles/theme.less
+++ b/src/styles/theme.less
@@ -90,7 +90,7 @@
.theme-oo-ui-buttonSelectWidget () {}
.theme-oo-ui-radioSelectWidget () {}
.theme-oo-ui-menuSelectWidget () {}
-.theme-oo-ui-textInputMenuSelectWidget () {}
+.theme-oo-ui-floatingMenuSelectWidget () {}
.theme-oo-ui-outlineSelectWidget () {}
.theme-oo-ui-tabSelectWidget () {}
.theme-oo-ui-numberInputWidget () {}
diff --git a/src/styles/widgets/FloatingMenuSelectWidget.less
b/src/styles/widgets/FloatingMenuSelectWidget.less
new file mode 100644
index 0000000..b669ecc
--- /dev/null
+++ b/src/styles/widgets/FloatingMenuSelectWidget.less
@@ -0,0 +1,5 @@
+@import '../common';
+
+.oo-ui-floatingMenuSelectWidget {
+ .theme-oo-ui-floatingMenuSelectWidget();
+}
diff --git a/src/styles/widgets/TextInputMenuSelectWidget.less
b/src/styles/widgets/TextInputMenuSelectWidget.less
deleted file mode 100644
index 6edc474..0000000
--- a/src/styles/widgets/TextInputMenuSelectWidget.less
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../common';
-
-.oo-ui-textInputMenuSelectWidget {
- .theme-oo-ui-textInputMenuSelectWidget();
-}
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index f12fb12..109e717 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -947,7 +947,7 @@
box-shadow: 0 0.15em 1em 0 rgba(0, 0, 0, 0.2);
}
-.theme-oo-ui-textInputMenuSelectWidget () {}
+.theme-oo-ui-floatingMenuSelectWidget () {}
.theme-oo-ui-outlineSelectWidget () {}
diff --git a/src/themes/blank/widgets.less b/src/themes/blank/widgets.less
index faa1dc5..aa3479a 100644
--- a/src/themes/blank/widgets.less
+++ b/src/themes/blank/widgets.less
@@ -74,7 +74,7 @@
.theme-oo-ui-menuSelectWidget () {}
-.theme-oo-ui-textInputMenuSelectWidget () {}
+.theme-oo-ui-floatingMenuSelectWidget () {}
.theme-oo-ui-outlineSelectWidget () {}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 527b5d8..a83d304 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -1119,7 +1119,7 @@
box-shadow: inset 0 -0.2em 0 0 rgba(0, 0, 0, 0.2), 0 0.1em 0 0 rgba(0,
0, 0, 0.2);
}
-.theme-oo-ui-textInputMenuSelectWidget () {}
+.theme-oo-ui-floatingMenuSelectWidget () {}
.theme-oo-ui-outlineSelectWidget () {}
diff --git a/src/widgets/ComboBoxWidget.js b/src/widgets/ComboBoxWidget.js
index 395d6ae..cf57b86 100644
--- a/src/widgets/ComboBoxWidget.js
+++ b/src/widgets/ComboBoxWidget.js
@@ -50,7 +50,7 @@
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {Object} [menu] Configuration options to pass to the {@link
OO.ui.MenuSelectWidget menu select widget}.
+ * @cfg {Object} [menu] Configuration options to pass to the {@link
OO.ui.FloatingMenuSelectWidget menu select widget}.
* @cfg {Object} [input] Configuration options to pass to the {@link
OO.ui.TextInputWidget text input widget}.
* @cfg {jQuery} [$overlay] Render the menu into a separate layer. This
configuration is useful in cases where
* the expanded menu is larger than its containing `<div>`. The specified
overlay layer is usually on top of the
@@ -83,10 +83,11 @@
role: 'combobox',
'aria-autocomplete': 'list'
} );
- this.menu = new OO.ui.TextInputMenuSelectWidget( this.input, $.extend(
+ this.menu = new OO.ui.FloatingMenuSelectWidget( $.extend(
{
widget: this,
input: this.input,
+ $container: this.input.$element,
disabled: this.isDisabled()
},
config.menu
@@ -122,7 +123,7 @@
/**
* Get the combobox's menu.
- * @return {OO.ui.TextInputMenuSelectWidget} Menu widget
+ * @return {OO.ui.FloatingMenuSelectWidget} Menu widget
*/
OO.ui.ComboBoxWidget.prototype.getMenu = function () {
return this.menu;
diff --git a/src/widgets/FloatingMenuSelectWidget.js
b/src/widgets/FloatingMenuSelectWidget.js
new file mode 100644
index 0000000..5bd0b2c
--- /dev/null
+++ b/src/widgets/FloatingMenuSelectWidget.js
@@ -0,0 +1,114 @@
+/**
+ * FloatingMenuSelectWidget is a menu that will stick under a specified
+ * container, even when it is inserted elsewhere in the document (for example,
+ * in a OO.ui.Window's $overlay). This is sometimes necessary to prevent the
+ * menu from being clipped too aggresively.
+ *
+ * The menu's position is automatically calculated and maintained when the menu
+ * is toggled or the window is resized.
+ *
+ * See OO.ui.ComboBoxWidget for an example of a widget that uses this class.
+ *
+ * @class
+ * @extends OO.ui.MenuSelectWidget
+ *
+ * @constructor
+ * @param {OO.ui.Widget} [inputWidget] Widget to provide the menu for.
+ * Deprecated, omit this parameter and specify `$container` instead.
+ * @param {Object} [config] Configuration options
+ * @cfg {jQuery} [$container=inputWidget.$element] Element to render menu under
+ */
+OO.ui.FloatingMenuSelectWidget = function OoUiFloatingMenuSelectWidget(
inputWidget, config ) {
+ // Allow 'inputWidget' parameter and config for backwards compatibility
+ if ( OO.isPlainObject( inputWidget ) && config === undefined ) {
+ config = inputWidget;
+ inputWidget = config.inputWidget;
+ }
+
+ // Configuration initialization
+ config = config || {};
+
+ // Parent constructor
+ OO.ui.FloatingMenuSelectWidget.parent.call( this, config );
+
+ // Properties
+ this.inputWidget = inputWidget; // For backwards compatibility
+ this.$container = config.$container || this.inputWidget.$element;
+ this.onWindowResizeHandler = this.onWindowResize.bind( this );
+
+ // Initialization
+ this.$element.addClass( 'oo-ui-floatingMenuSelectWidget' );
+ // For backwards compatibility
+ this.$element.addClass( 'oo-ui-textInputMenuSelectWidget' );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.FloatingMenuSelectWidget, OO.ui.MenuSelectWidget );
+
+// For backwards compatibility
+OO.ui.TextInputMenuSelectWidget = OO.ui.FloatingMenuSelectWidget;
+
+/* Methods */
+
+/**
+ * Handle window resize event.
+ *
+ * @private
+ * @param {jQuery.Event} e Window resize event
+ */
+OO.ui.FloatingMenuSelectWidget.prototype.onWindowResize = function () {
+ this.position();
+};
+
+/**
+ * @inheritdoc
+ */
+OO.ui.FloatingMenuSelectWidget.prototype.toggle = function ( visible ) {
+ visible = visible === undefined ? !this.isVisible() : !!visible;
+
+ var change = visible !== this.isVisible();
+
+ if ( change && visible ) {
+ // Make sure the width is set before the parent method runs.
+ // After this we have to call this.position(); again to actually
+ // position ourselves correctly.
+ this.position();
+ }
+
+ // Parent method
+ OO.ui.FloatingMenuSelectWidget.parent.prototype.toggle.call( this,
visible );
+
+ if ( change ) {
+ if ( this.isVisible() ) {
+ this.position();
+ $( this.getElementWindow() ).on( 'resize',
this.onWindowResizeHandler );
+ } else {
+ $( this.getElementWindow() ).off( 'resize',
this.onWindowResizeHandler );
+ }
+ }
+
+ return this;
+};
+
+/**
+ * Position the menu.
+ *
+ * @private
+ * @chainable
+ */
+OO.ui.FloatingMenuSelectWidget.prototype.position = function () {
+ var $container = this.$container,
+ pos = OO.ui.Element.static.getRelativePosition( $container,
this.$element.offsetParent() );
+
+ // Position under input
+ pos.top += $container.height();
+ this.$element.css( pos );
+
+ // Set width
+ this.setIdealSize( $container.width() );
+ // We updated the position, so re-evaluate the clipping state
+ this.clip();
+
+ return this;
+};
diff --git a/src/widgets/SearchWidget.js b/src/widgets/SearchWidget.js
index 1afb980..b5bddf6 100644
--- a/src/widgets/SearchWidget.js
+++ b/src/widgets/SearchWidget.js
@@ -1,6 +1,6 @@
/**
* SearchWidgets combine a {@link OO.ui.TextInputWidget text input field},
where users can type a search query,
- * and a {@link OO.ui.TextInputMenuSelectWidget menu} of search results, which
is displayed beneath the query
+ * and a menu of search results, which is displayed beneath the query
* field. Unlike {@link OO.ui.mixin.LookupElement lookup menus}, search result
menus are always visible to the user.
* Users can choose an item from the menu or type a query into the text field
to search for a matching result item.
* In general, search widgets are used inside a separate {@link OO.ui.Dialog
dialog} window.
diff --git a/src/widgets/TextInputMenuSelectWidget.js
b/src/widgets/TextInputMenuSelectWidget.js
deleted file mode 100644
index 0e9a355..0000000
--- a/src/widgets/TextInputMenuSelectWidget.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * TextInputMenuSelectWidget is a menu that is specially designed to be
positioned beneath
- * a {@link OO.ui.TextInputWidget text input} field. The menu's position is
automatically
- * calculated and maintained when the menu is toggled or the window is resized.
- * See OO.ui.ComboBoxWidget for an example of a widget that uses this class.
- *
- * @class
- * @extends OO.ui.MenuSelectWidget
- *
- * @constructor
- * @param {OO.ui.TextInputWidget} inputWidget Text input widget to provide
menu for
- * @param {Object} [config] Configuration options
- * @cfg {jQuery} [$container=input.$element] Element to render menu under
- */
-OO.ui.TextInputMenuSelectWidget = function OoUiTextInputMenuSelectWidget(
inputWidget, config ) {
- // Allow passing positional parameters inside the config object
- if ( OO.isPlainObject( inputWidget ) && config === undefined ) {
- config = inputWidget;
- inputWidget = config.inputWidget;
- }
-
- // Configuration initialization
- config = config || {};
-
- // Parent constructor
- OO.ui.TextInputMenuSelectWidget.parent.call( this, config );
-
- // Properties
- this.inputWidget = inputWidget;
- this.$container = config.$container || this.inputWidget.$element;
- this.onWindowResizeHandler = this.onWindowResize.bind( this );
-
- // Initialization
- this.$element.addClass( 'oo-ui-textInputMenuSelectWidget' );
-};
-
-/* Setup */
-
-OO.inheritClass( OO.ui.TextInputMenuSelectWidget, OO.ui.MenuSelectWidget );
-
-/* Methods */
-
-/**
- * Handle window resize event.
- *
- * @private
- * @param {jQuery.Event} e Window resize event
- */
-OO.ui.TextInputMenuSelectWidget.prototype.onWindowResize = function () {
- this.position();
-};
-
-/**
- * @inheritdoc
- */
-OO.ui.TextInputMenuSelectWidget.prototype.toggle = function ( visible ) {
- visible = visible === undefined ? !this.isVisible() : !!visible;
-
- var change = visible !== this.isVisible();
-
- if ( change && visible ) {
- // Make sure the width is set before the parent method runs.
- // After this we have to call this.position(); again to actually
- // position ourselves correctly.
- this.position();
- }
-
- // Parent method
- OO.ui.TextInputMenuSelectWidget.parent.prototype.toggle.call( this,
visible );
-
- if ( change ) {
- if ( this.isVisible() ) {
- this.position();
- $( this.getElementWindow() ).on( 'resize',
this.onWindowResizeHandler );
- } else {
- $( this.getElementWindow() ).off( 'resize',
this.onWindowResizeHandler );
- }
- }
-
- return this;
-};
-
-/**
- * Position the menu.
- *
- * @private
- * @chainable
- */
-OO.ui.TextInputMenuSelectWidget.prototype.position = function () {
- var $container = this.$container,
- pos = OO.ui.Element.static.getRelativePosition( $container,
this.$element.offsetParent() );
-
- // Position under input
- pos.top += $container.height();
- this.$element.css( pos );
-
- // Set width
- this.setIdealSize( $container.width() );
- // We updated the position, so re-evaluate the clipping state
- this.clip();
-
- return this;
-};
--
To view, visit https://gerrit.wikimedia.org/r/231469
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Idb12d50ecf99ad3adba603096b93cbba85878130
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
