public function __construct( array $config = [] ) {
$config = array_merge( [
'maxLength' => null,
- 'type' => 'search',
'icon' => 'search',
], $config );
$this->addClasses( [ 'mw-widget-searchInputWidget' ] );
}
+ protected function getInputElement( $config ) {
+ return ( new \OOUI\Tag( 'input' ) )->setAttributes( [ 'type' => 'search' ] );
+ }
+
protected function getJavaScriptClassName() {
return 'mw.widgets.SearchInputWidget';
}
var $form = config.$input ? config.$input.closest( 'form' ) : $();
config = $.extend( {
- type: 'search',
icon: 'search',
maxLength: undefined,
performSearchOnClick: true,
)
} );
}.bind( this ) );
+
+ this.$element.addClass( 'oo-ui-textInputWidget-type-search' );
+ this.updateSearchIndicator();
+ this.connect( this, {
+ disable: 'onDisable'
+ } );
};
/* Setup */
/* Methods */
+ /**
+ * @inheritdoc
+ * @protected
+ */
+ mw.widgets.SearchInputWidget.prototype.getInputElement = function () {
+ return $( '<input>' ).attr( 'type', 'search' );
+ };
+
+ /**
+ * @inheritdoc
+ */
+ mw.widgets.SearchInputWidget.prototype.onIndicatorMouseDown = function ( e ) {
+ if ( e.which === OO.ui.MouseButtons.LEFT ) {
+ // Clear the text field
+ this.setValue( '' );
+ this.$input[ 0 ].focus();
+ return false;
+ }
+ };
+
+ /**
+ * Update the 'clear' indicator displayed on type: 'search' text
+ * fields, hiding it when the field is already empty or when it's not
+ * editable.
+ */
+ mw.widgets.SearchInputWidget.prototype.updateSearchIndicator = function () {
+ if ( this.getValue() === '' || this.isDisabled() || this.isReadOnly() ) {
+ this.setIndicator( null );
+ } else {
+ this.setIndicator( 'clear' );
+ }
+ };
+
+ /**
+ * @inheritdoc
+ */
+ mw.widgets.SearchInputWidget.prototype.onChange = function () {
+ mw.widgets.SearchInputWidget.parent.prototype.onChange.call( this );
+ this.updateSearchIndicator();
+ };
+
+ /**
+ * Handle disable events.
+ *
+ * @param {boolean} disabled Element is disabled
+ * @private
+ */
+ mw.widgets.SearchInputWidget.prototype.onDisable = function () {
+ this.updateSearchIndicator();
+ };
+
+ /**
+ * @inheritdoc
+ */
+ mw.widgets.SearchInputWidget.prototype.setReadOnly = function ( state ) {
+ mw.widgets.SearchInputWidget.parent.prototype.setReadOnly.call( this, state );
+ this.updateSearchIndicator();
+ return this;
+ };
+
/**
* @inheritdoc mw.widgets.TitleWidget
*/