Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/226069
Change subject: TextInputWidget: Handle type: 'search' better
......................................................................
TextInputWidget: Handle type: 'search' better
* Use icon: 'search' by default.
* Use indicator: 'clear' (not overridable), which clears the text when
clicked.
* Suppress user-agent styling, as we've just reimplemented it.
Bug: T106096
Bug: T106348
Change-Id: I9ee924418c89572d086998738f1f99ffaa304f91
---
M demos/pages/widgets.js
M demos/widgets.php
M php/widgets/TextInputWidget.php
M src/styles/widgets/TextInputWidget.less
M src/widgets/TextInputWidget.js
5 files changed, 107 insertions(+), 4 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/69/226069/1
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 12c4327..f6b95ce 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -805,6 +805,13 @@
}
),
new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( { type:
'search' } ),
+ {
+ label: 'TextInputWidget
(type=search)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
new OO.ui.TextInputWidget( {
value: 'Readonly',
readOnly: true
diff --git a/demos/widgets.php b/demos/widgets.php
index e06b96f..9acc4bf 100644
--- a/demos/widgets.php
+++ b/demos/widgets.php
@@ -589,6 +589,13 @@
)
),
new OOUI\FieldLayout(
+ new
OOUI\TextInputWidget( array( 'type' => 'search' ) ),
+ array(
+ 'label' =>
"TextInputWidget (type=search)\xE2\x80\x8E",
+ 'align' => 'top'
+ )
+ ),
+ new OOUI\FieldLayout(
new
OOUI\TextInputWidget( array(
'value' =>
'Readonly',
'readOnly' =>
true
diff --git a/php/widgets/TextInputWidget.php b/php/widgets/TextInputWidget.php
index 7305521..482ca5f 100644
--- a/php/widgets/TextInputWidget.php
+++ b/php/widgets/TextInputWidget.php
@@ -10,6 +10,13 @@
/* Properties */
/**
+ * Input field type.
+ *
+ * @var string
+ */
+ protected $type = null;
+
+ /**
* Prevent changes.
*
* @var boolean
@@ -27,6 +34,10 @@
* @param array $config Configuration options
* @param string $config['type'] HTML tag `type` attribute: 'text',
'password', 'search', 'email'
* or 'url'. Ignored if `multiline` is true. (default: 'text')
+ *
+ * Some values of `type` result in additional behaviors:
+ * - `search`: implies `icon: 'search'` and `indicator: 'clear'`;
when clicked, the indicator
+ * empties the text field
* @param string $config['placeholder'] Placeholder text
* @param boolean $config['autofocus'] Ask the browser to focus this
widget, using the 'autofocus'
* HTML attribute (default: false)
@@ -47,6 +58,11 @@
'required' => false,
'autocomplete' => true,
), $config );
+ if ( $config['type'] === 'search' ) {
+ if ( !array_key_exists( 'icon', $config ) ) {
+ $config['icon'] = 'search';
+ }
+ }
// Parent constructor
parent::__construct( $config );
@@ -60,7 +76,7 @@
// Initialization
$this
- ->addClasses( array( 'oo-ui-textInputWidget' ) )
+ ->addClasses( array( 'oo-ui-textInputWidget',
'oo-ui-textInputWidget-type-' . $this->type ) )
->appendContent( $this->icon, $this->indicator );
$this->setReadOnly( $config['readOnly'] );
if ( isset( $config['placeholder'] ) ) {
diff --git a/src/styles/widgets/TextInputWidget.less
b/src/styles/widgets/TextInputWidget.less
index 919fa82..c8220b8 100644
--- a/src/styles/widgets/TextInputWidget.less
+++ b/src/styles/widgets/TextInputWidget.less
@@ -14,6 +14,28 @@
.oo-ui-box-sizing(border-box);
}
+ // Remove default styling for <input type=search />, especially the
built-in "clear" button
+ input[type="search"] {
+ // Safari
+ -webkit-appearance: none;
+
+ // Internet Explorer
+ &::-ms-clear {
+ display: none;
+ }
+ &::-ms-reveal {
+ display: none;
+ }
+
+ // Chrome
+ &::-webkit-search-decoration,
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-results-button,
+ &::-webkit-search-results-decoration {
+ display: none;
+ }
+ }
+
> .oo-ui-iconElement-icon,
> .oo-ui-indicatorElement-indicator,
> .oo-ui-labelElement-label {
@@ -38,6 +60,12 @@
}
}
+ &.oo-ui-widget-enabled.oo-ui-textInputWidget-type-search {
+ > .oo-ui-indicatorElement-indicator {
+ cursor: pointer;
+ }
+ }
+
&.oo-ui-labelElement > .oo-ui-labelElement-label {
display: block;
}
diff --git a/src/widgets/TextInputWidget.js b/src/widgets/TextInputWidget.js
index 1eeaacd..036c80e 100644
--- a/src/widgets/TextInputWidget.js
+++ b/src/widgets/TextInputWidget.js
@@ -28,6 +28,11 @@
* @param {Object} [config] Configuration options
* @cfg {string} [type='text'] The value of the HTML `type` attribute: 'text',
'password', 'search',
* 'email' or 'url'. Ignored if `multiline` is true.
+ *
+ * Some values of `type` result in additional behaviors:
+ *
+ * - `search`: implies `icon: 'search'` and `indicator: 'clear'`; when
clicked, the indicator
+ * empties the text field
* @cfg {string} [placeholder] Placeholder text
* @cfg {boolean} [autofocus=false] Use an HTML `autofocus` attribute to
* instruct the browser to focus this widget.
@@ -56,6 +61,12 @@
type: 'text',
labelPosition: 'after'
}, config );
+ if ( config.type === 'search' ) {
+ if ( config.icon === undefined ) {
+ config.icon = 'search';
+ }
+ // indicator: 'clear' is set dynamically later, depending on
value
+ }
// Parent constructor
OO.ui.TextInputWidget.parent.call( this, config );
@@ -67,6 +78,7 @@
OO.ui.mixin.LabelElement.call( this, config );
// Properties
+ this.type = config.type;
this.readOnly = false;
this.multiline = !!config.multiline;
this.autosize = !!config.autosize;
@@ -97,13 +109,17 @@
this.$icon.on( 'mousedown', this.onIconMouseDown.bind( this ) );
this.$indicator.on( 'mousedown', this.onIndicatorMouseDown.bind( this )
);
this.on( 'labelChange', this.updatePosition.bind( this ) );
- this.connect( this, { change: 'onChange' } );
+ this.connect( this, {
+ change: 'onChange',
+ disable: 'onDisable'
+ } );
// Initialization
this.$element
- .addClass( 'oo-ui-textInputWidget' )
+ .addClass( 'oo-ui-textInputWidget oo-ui-textInputWidget-type-'
+ this.type )
.append( this.$icon, this.$indicator );
this.setReadOnly( !!config.readOnly );
+ this.updateSearchIndicator();
if ( config.placeholder ) {
this.$input.attr( 'placeholder', config.placeholder );
}
@@ -178,6 +194,10 @@
*/
OO.ui.TextInputWidget.prototype.onIndicatorMouseDown = function ( e ) {
if ( e.which === 1 ) {
+ if ( this.type === 'search' ) {
+ // Clear the text field
+ this.setValue( '' );
+ }
this.$input[ 0 ].focus();
return false;
}
@@ -226,8 +246,19 @@
* @private
*/
OO.ui.TextInputWidget.prototype.onChange = function () {
+ this.updateSearchIndicator();
this.setValidityFlag();
this.adjustSize();
+};
+
+/**
+ * Handle disable events.
+ *
+ * @param {boolean} disabled Element is disabled
+ * @private
+ */
+OO.ui.TextInputWidget.prototype.onDisable = function () {
+ this.updateSearchIndicator();
};
/**
@@ -248,6 +279,7 @@
OO.ui.TextInputWidget.prototype.setReadOnly = function ( state ) {
this.readOnly = !!state;
this.$input.prop( 'readOnly', this.readOnly );
+ this.updateSearchIndicator();
return this;
};
@@ -500,7 +532,6 @@
* This method is called by #setLabelPosition, and can also be called on its
own if
* something causes the label to be mispositioned.
*
- *
* @chainable
*/
OO.ui.TextInputWidget.prototype.updatePosition = function () {
@@ -518,6 +549,20 @@
};
/**
+ * Update the 'clear' indicator displayed on type: 'search' text fields,
hiding it when the field is
+ * already empty or when it's not editable.
+ */
+OO.ui.TextInputWidget.prototype.updateSearchIndicator = function () {
+ if ( this.type === 'search' ) {
+ if ( this.getValue() === '' || this.isDisabled() ||
this.isReadOnly() ) {
+ this.setIndicator( null );
+ } else {
+ this.setIndicator( 'clear' );
+ }
+ }
+};
+
+/**
* Position the label by setting the correct padding on the input.
*
* @private
--
To view, visit https://gerrit.wikimedia.org/r/226069
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I9ee924418c89572d086998738f1f99ffaa304f91
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
