mediawiki-extensions-Visual.../modules/ve/ui/widgets/ve.ui.TextInputWidget.js
Trevor Parscal eec6b99369 Add icon option to ve.ui.TextInputWidget
Changes:

ve.ui.Widget.css
* Add styles for decorated text input widgets and their icon elements

ve.ui.TextInputWidget.js
* Add icon option which adds an icon before input text

Change-Id: Ib48d795391cb5d110e7dc05658d51129792dfc33
2013-05-29 12:39:07 +01:00

57 lines
1.4 KiB
JavaScript

/*!
* VisualEditor UserInterface TextInputWidget class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Creates an ve.ui.TextInputWidget object.
*
* @class
* @extends ve.ui.InputWidget
*
* @constructor
* @param {Object} [config] Config options
* @cfg {string} [placeholder] Placeholder text
* @cfg {string} [icon] Symbolic name of icon
*/
ve.ui.TextInputWidget = function VeUiTextInputWidget( config ) {
// Parent constructor
ve.ui.InputWidget.call( this, config );
// Initialization
this.$.addClass( 've-ui-textInputWidget' );
if ( config.icon ) {
this.$.addClass( 've-ui-textInputWidget-decorated' );
this.$.append(
$( '<span>' )
.addClass( 've-ui-textInputWidget-icon ve-ui-icon-' + config.icon )
.mousedown( ve.bind( function () {
this.$input.focus();
return false;
}, this ) )
);
}
if ( config.placeholder ) {
this.$input.attr( 'placeholder', config.placeholder );
}
};
/* Inheritance */
ve.inheritClass( ve.ui.TextInputWidget, ve.ui.InputWidget );
/* Methods */
/**
* Get input element.
*
* @method
* @param {Object} [config] Config options
* @return {jQuery} Input element
*/
ve.ui.TextInputWidget.prototype.getInputElement = function ( config ) {
return config.multiline ? this.$$( '<textarea>' ) : this.$$( '<input>' ).attr( 'type', 'text' );
};