define('application/widgets/pin/inputfield', [
'rofl/widgets/container',
'rofl/widgets/input/text',
'application/widgets/login/password',
'rofl/widgets/label',
'rofl/lib/utils',
'application/events/textvalidatedevent'
], function (
Container,
TextInput,
PasswordInput,
Label,
Utils,
TextValidatedEvent
) {
'use strict';
var InputField;
InputField = Container.extend({
/**
* Initialises the inputfield widget.
*
* @param {Object} config - The configuration.
* @param {string} config.title - The input title.
* @param {string} config.type - The input type. TYPES.PASSWORD or TYPES.TEXT.
* @param {Object} [config.opts] - The options. Optional.
*/
init: function init (config) {
var opts = config.opts || {};
init.base.call(this);
this._config = config;
this._validateLength = opts.validateLength;
this._maxLength = opts.maxLength;
this._build(config);
this.addClass('inputfield');
this._onTextChangeBound = Utils.bind(this._onTextChange, this);
},
/**
* Builds the widget.
*
* @param {Object} config - The configuration.
* @private
*/
_build: function (config) {
this._buildInput(config);
this._buildCheckmark();
this._buildCursor();
},
/**
* Builds the input.
*
* @param {Object} config - The configuration.
* @private
*/
_buildInput: function (config) {
var input = new PasswordInput(config.opts);
this._input = input;
input.isFocusable = Utils.bind(this._isInputFocusable, this);
this.appendChildWidget(input);
},
/**
* Builds a checkmark label.
*
* @private
*/
_buildCheckmark: function () {
var label = this._checkmark = new Label({ text: 'q', classNames: ['checkmark', 'icon'] });
this.appendChildWidget(label);
},
/**
* Builds a checkmark label.
*
* @private
*/
_buildCursor: function () {
var label = this._cursor = new Label({ text: '|', classNames: ['cursor'] });
this.appendChildWidget(label);
},
/**
* Shows and hides cursor based on timeout.
*/
showCursorBlink: function () {
var cursor = this._cursor;
clearInterval(this._blinkInterval);
this._blinkInterval = setInterval(function () {
if (cursor.hasClass('visible')) {
cursor.removeClass('visible');
} else {
cursor.addClass('visible');
}
}, 500);
},
/**
* Clears timeouts and intervals.
*/
stopCursorBlink: function () {
clearInterval(this._blinkInterval);
this._cursor.removeClass('visible');
},
/**
* Sets the keyboard to the input.
*
* @param {Object} keyboard - The keyboard.
*/
setKeyboard: function (keyboard) {
this._input.setKeyboard(keyboard);
keyboard.addEventListener('textchange', this._onTextChangeBound);
},
/**
* Determines if the input should be validated.
*
* @returns {boolean} - True if should be validated.
* @private
*/
_shouldValidate: function () {
return this._validateLength;
},
/**
* TextChange event.
*
* @param {Object} e - The event data.
* @private
*/
_onTextChange: function (e) {
if (this._shouldValidate() && e.text.length === this._maxLength) {
this._checkmark.setStyleTo('display', 'block');
this.bubbleEvent(new TextValidatedEvent());
} else {
this._checkmark.setStyleTo('display', 'none');
}
},
/**
* Returns false to disable focus on input fields.
*
* @returns {boolean} - Focusable. False.
* @private
*/
_isInputFocusable: function () {
return false;
},
/**
* Returns value of the input.
*
* @returns {string} - Value of the inupt.
*/
getValue: function () {
return this._input.getValue();
},
/**
* Clears the input field value.
*/
clearInputField: function () {
this._input.clearInputField();
},
/**
* Returns the cursor.
*
* @returns {Object} - The cursor.
*/
getCursor: function () {
return this._cursor;
}
});
return InputField;
});