Mooeypoo has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/349125 )
Change subject: NumberInputWidget: Remake as an actual TextInputWidget child
......................................................................
NumberInputWidget: Remake as an actual TextInputWidget child
As the name of it suggests, it should be a decendent of InputWidget
and, more specifically, of TextInputWidget. This solves a bunch of
compatibility issues.
To demonstrate this, a demo was added with TagMultiselectWidget
using NumberInputWidget; in its previous version the NumberInputWidget
could not have been used inside the TagInputWidget because it didn't
have the expected API of TextInputWidget.
Bug: T124856
Change-Id: I00164fcaf5092b60243d4e3cdc8992285cee33b4
---
M demos/pages/widgets.js
M src/widgets/NumberInputWidget.js
2 files changed, 26 insertions(+), 84 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/25/349125/1
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index c139838..a013b58 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1388,7 +1388,7 @@
new OO.ui.TagMultiselectWidget( {
allowArbitrary: true,
inputPosition: 'outline',
- inputWidget: new
OO.ui.SearchInputWidget()
+ inputWidget: new
OO.ui.NumberInputWidget()
} ),
{
label: 'TagMultiselectWidget
(inputwidget: OO.ui.SearchInputWidget, inputPosition:outline)',
diff --git a/src/widgets/NumberInputWidget.js b/src/widgets/NumberInputWidget.js
index ac8e6fd..5e71f39 100644
--- a/src/widgets/NumberInputWidget.js
+++ b/src/widgets/NumberInputWidget.js
@@ -18,7 +18,6 @@
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {Object} [input] Configuration options to pass to the {@link
OO.ui.TextInputWidget text input widget}.
* @cfg {Object} [minusButton] Configuration options to pass to the {@link
OO.ui.ButtonWidget decrementing button widget}.
* @cfg {Object} [plusButton] Configuration options to pass to the {@link
OO.ui.ButtonWidget incrementing button widget}.
* @cfg {boolean} [isInteger=false] Whether the field accepts only integer
values.
@@ -29,6 +28,9 @@
* @cfg {boolean} [showButtons=true] Whether to show the plus and minus
buttons.
*/
OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
+ var $field = $( '<div>' )
+ .addClass( 'oo-ui-numberInputWidget-field' );
+
// Configuration initialization
config = $.extend( {
isInteger: false,
@@ -40,16 +42,11 @@
}, config );
// Parent constructor
- OO.ui.NumberInputWidget.parent.call( this, config );
+ OO.ui.NumberInputWidget.parent.call( this, $.extend( config, {
+ type: 'number',
+ validate: this.validateNumber.bind( this )
+ } ) );
- // Properties
- this.input = new OO.ui.TextInputWidget( $.extend(
- {
- disabled: this.isDisabled(),
- type: 'number'
- },
- config.input
- ) );
if ( config.showButtons ) {
this.minusButton = new OO.ui.ButtonWidget( $.extend(
{
@@ -72,11 +69,7 @@
}
// Events
- this.input.connect( this, {
- change: this.emit.bind( this, 'change' ),
- enter: this.emit.bind( this, 'enter' )
- } );
- this.input.$input.on( {
+ this.$input.on( {
keydown: this.onKeyDown.bind( this ),
'wheel mousewheel DOMMouseScroll': this.onWheel.bind( this )
} );
@@ -89,40 +82,28 @@
} );
}
+ // Build the field
+ $field.append( this.$input );
+ if ( config.showButtons ) {
+ $field
+ .prepend( this.minusButton.$element )
+ .append( this.plusButton.$element );
+ }
+
// Initialization
this.setIsInteger( !!config.isInteger );
this.setRange( config.min, config.max );
this.setStep( config.step, config.pageStep );
- this.$field = $( '<div>' ).addClass( 'oo-ui-numberInputWidget-field' )
- .append( this.input.$element );
- this.$element.addClass( 'oo-ui-numberInputWidget' ).append( this.$field
);
- if ( config.showButtons ) {
- this.$field
- .prepend( this.minusButton.$element )
- .append( this.plusButton.$element );
- this.$element.addClass( 'oo-ui-numberInputWidget-buttoned' );
- }
- this.input.setValidation( this.validateNumber.bind( this ) );
+ this.$element
+ .addClass( 'oo-ui-numberInputWidget' )
+ .toggleClass( 'oo-ui-numberInputWidget-buttoned',
config.showButtons )
+ .append( $field );
};
/* Setup */
-OO.inheritClass( OO.ui.NumberInputWidget, OO.ui.Widget );
-
-/* Events */
-
-/**
- * A `change` event is emitted when the value of the input changes.
- *
- * @event change
- */
-
-/**
- * An `enter` event is emitted when the user presses 'enter' inside the text
box.
- *
- * @event enter
- */
+OO.inheritClass( OO.ui.NumberInputWidget, OO.ui.TextInputWidget );
/* Methods */
@@ -133,7 +114,7 @@
*/
OO.ui.NumberInputWidget.prototype.setIsInteger = function ( flag ) {
this.isInteger = !!flag;
- this.input.setValidityFlag();
+ this.setValidityFlag();
};
/**
@@ -157,7 +138,7 @@
}
this.min = min;
this.max = max;
- this.input.setValidityFlag();
+ this.setValidityFlag();
};
/**
@@ -198,30 +179,12 @@
};
/**
- * Get the current value of the widget
- *
- * @return {string}
- */
-OO.ui.NumberInputWidget.prototype.getValue = function () {
- return this.input.getValue();
-};
-
-/**
* Get the current value of the widget as a number
*
* @return {number} May be NaN, or an invalid number
*/
OO.ui.NumberInputWidget.prototype.getNumericValue = function () {
- return +this.input.getValue();
-};
-
-/**
- * Set the value of the widget
- *
- * @param {string} value Invalid values are allowed
- */
-OO.ui.NumberInputWidget.prototype.setValue = function ( value ) {
- this.input.setValue( value );
+ return +this.getValue();
};
/**
@@ -251,7 +214,6 @@
this.setValue( n );
}
};
-
/**
* Validate input
*
@@ -295,7 +257,7 @@
OO.ui.NumberInputWidget.prototype.onWheel = function ( event ) {
var delta = 0;
- if ( !this.isDisabled() && this.input.$input.is( ':focus' ) ) {
+ if ( !this.isDisabled() && this.$input.is( ':focus' ) ) {
// Standard 'wheel' event
if ( event.originalEvent.deltaMode !== undefined ) {
this.sawWheelEvent = true;
@@ -351,24 +313,4 @@
return false;
}
}
-};
-
-/**
- * @inheritdoc
- */
-OO.ui.NumberInputWidget.prototype.setDisabled = function ( disabled ) {
- // Parent method
- OO.ui.NumberInputWidget.parent.prototype.setDisabled.call( this,
disabled );
-
- if ( this.input ) {
- this.input.setDisabled( this.isDisabled() );
- }
- if ( this.minusButton ) {
- this.minusButton.setDisabled( this.isDisabled() );
- }
- if ( this.plusButton ) {
- this.plusButton.setDisabled( this.isDisabled() );
- }
-
- return this;
};
--
To view, visit https://gerrit.wikimedia.org/r/349125
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I00164fcaf5092b60243d4e3cdc8992285cee33b4
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
