Florianschmidtwelzow has uploaded a new change for review.
https://gerrit.wikimedia.org/r/281259
Change subject: Allow to filter ComboboxInputWidget by input
......................................................................
Allow to filter ComboboxInputWidget by input
Bug: T131629
Change-Id: I3f3616758736d73e8dcad56ec7346c66b48299aa
---
M demos/pages/widgets.js
M demos/widgets.php
M php/widgets/ComboBoxInputWidget.php
M src/widgets/ComboBoxInputWidget.js
4 files changed, 49 insertions(+), 2 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/59/281259/1
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 165b298..960cae1 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1259,6 +1259,24 @@
),
new OO.ui.FieldLayout(
new OO.ui.ComboBoxInputWidget( {
+ filterFromInput: true,
+ menu: {
+ items: [
+ new
OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'fgh', label: 'Label for fgh' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } )
+ ]
+ }
+ } ),
+ {
+ label: 'ComboBoxInputWidget
(filter from inpput)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ComboBoxInputWidget( {
disabled: true,
menu: {
items: [
diff --git a/demos/widgets.php b/demos/widgets.php
index 5b91d7f..b3d15f6 100644
--- a/demos/widgets.php
+++ b/demos/widgets.php
@@ -730,6 +730,22 @@
),
new OOUI\FieldLayout(
new
OOUI\ComboBoxInputWidget( [
+
'filterFromInput' => true,
+ 'options' => [
+ [
'data' => 'asd', 'label' => 'Label for asd' ],
+ [
'data' => 'fgh', 'label' => 'Label for fgh' ],
+ [
'data' => 'jkl', 'label' => 'Label for jkl' ],
+ [
'data' => 'zxc', 'label' => 'Label for zxc' ],
+ [
'data' => 'vbn', 'label' => 'Label for vbn' ],
+ ]
+ ] ),
+ [
+ 'label' =>
"ComboBoxInputWidget (filter from inpput)\xE2\x80\x8E",
+ 'align' => 'top'
+ ]
+ ),
+ new OOUI\FieldLayout(
+ new
OOUI\ComboBoxInputWidget( [
'disabled' =>
true,
'options' => [
[
'data' => 'asd', 'label' => 'Label for asd' ],
diff --git a/php/widgets/ComboBoxInputWidget.php
b/php/widgets/ComboBoxInputWidget.php
index 1d84e0d..8a9d821 100644
--- a/php/widgets/ComboBoxInputWidget.php
+++ b/php/widgets/ComboBoxInputWidget.php
@@ -14,15 +14,19 @@
*/
protected $options = [];
+ private $filterFromInput = null;
+
/**
* @param array $config Configuration options
* @param array[] $config['options'] Array of menu options in the format
* `array( 'data' => …, 'label' => … )`
+ * @param boolean $config['filterFromInput'] Filter the displayed
options from the input
*/
public function __construct( array $config = [] ) {
// Config initialization
$config = array_merge( [
'indicator' => 'down',
+ 'filterFromInput' => false,
], $config );
// Parent constructor
@@ -37,6 +41,9 @@
$this->datalist->ensureInfusableId();
$this->datalist->setInfusable( false );
$this->input->setAttributes( [ 'list' =>
$this->datalist->getAttribute( 'id' ) ] );
+ if ( isset( $config['filterFromInput'] ) ) {
+ $this->filterFromInput = $config['filterFromInput'];
+ }
$this->setOptions( isset( $config['options'] ) ?
$config['options'] : [] );
$this->addClasses( [ 'oo-ui-comboBoxInputWidget',
'oo-ui-comboBoxInputWidget-php' ] );
@@ -74,6 +81,9 @@
$o[] = [ 'data' => $data, 'label' => $label ];
}
$config['options'] = $o;
+ if ( isset( $this->filterFromInput ) ) {
+ $config['filterFromInput'] = $this->filterFromInput;
+ }
return parent::getConfig( $config );
}
}
diff --git a/src/widgets/ComboBoxInputWidget.js
b/src/widgets/ComboBoxInputWidget.js
index 2acf54b..9b83846 100644
--- a/src/widgets/ComboBoxInputWidget.js
+++ b/src/widgets/ComboBoxInputWidget.js
@@ -56,12 +56,14 @@
* @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
* containing `<div>` and has a larger area. By default, the menu uses
relative positioning.
+ * @cfg {boolean} [filterFromInput=false] Filter the displayed options from
the input
*/
OO.ui.ComboBoxInputWidget = function OoUiComboBoxInputWidget( config ) {
// Configuration initialization
config = $.extend( {
indicator: 'down',
- autocomplete: false
+ autocomplete: false,
+ filterFromInput: false
}, config );
// For backwards-compatibility with ComboBoxWidget config
$.extend( config, config.input );
@@ -76,7 +78,8 @@
widget: this,
input: this,
$container: this.$element,
- disabled: this.isDisabled()
+ disabled: this.isDisabled(),
+ filterFromInput: config.filterFromInput
},
config.menu
) );
--
To view, visit https://gerrit.wikimedia.org/r/281259
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3f3616758736d73e8dcad56ec7346c66b48299aa
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
