define('application/widgets/search/inputfield', [
'rofl/widgets/container',
'application/widgets/search/text',
'rofl/widgets/label',
'rofl/lib/utils'
], function (
Container,
TextInput,
Label,
Utils
) {
'use strict';
var InputField;
InputField = Container.extend({
/**
* Initialises the inputfield widget.
*
* @param {Object} config - The configuration.
* @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._build(config);
this.addClass('inputfield');
},
/**
* Builds the widget.
*
* @param {Object} config - The configuration.
* @param {Object} [config.opts] - The options. Optional.
* @private
*/
_build: function (config) {
this._buildIcon();
this._buildInput(config);
this._buildCursor();
this._buildFocusBar();
},
/**
* Builds the input.
*
* @param {Object} config - The configuration.
* @param {Object} [config.opts] - The options. Optional.
* @private
*/
_buildInput: function (config) {
var input = this._input = new TextInput(config.opts);
this._input = input;
input.isFocusable = Utils.bind(this._isInputFocusable, this);
this.appendChildWidget(input);
},
/**
* Builds a search icon label.
*
* @private
*/
_buildIcon: function () {
var icon = this._icon = new Label({ text: '', classNames: ['icon-search-v2', 'icon'], enableHTML: true });
this.appendChildWidget(icon);
},
/**
* Builds a checkmark label.
*
* @private
*/
_buildCursor: function () {
var label = this._cursor = new Label({ text: '|', classNames: ['cursor'] });
this.appendChildWidget(label);
},
/**
* Builds the focus bar.
*
* @private
*/
_buildFocusBar: function () {
var focusBar = this._focusBar = new Container();
focusBar.addClass('focusbar');
this.appendChildWidget(focusBar);
},
/**
* Determines if the input should be validated.
*
* @returns {boolean} - True if should be validated.
* @private
*/
_shouldValidate: function () {
return this._validateLength;
},
/**
* 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();
},
/**
* Returns cursor.
*
* @returns {Object} - Cursor object.
*/
getCursor: function () {
return this._cursor;
},
/**
* Returns cursor.
*
* @returns {Object} - Cursor object.
*/
getFocusBar: function () {
return this._focusBar;
},
/**
* 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');
},
/**
* Animates focusbar based on timeout.
*/
animateFocusBar: function () {
var self = this;
this._animateTimeout = setTimeout(function () {
self.getFocusBar().setStyleTo('background-position', 'left bottom');
}, 800);
},
/**
* Stops the focusbar animation.
*/
stopFocusbarAnimation: function () {
clearTimeout(this._animateTimeout);
},
/**
* Use given keyboard for editing.
*
* @param {Keyboard} kbd - The keyboard to use.
*/
setKeyboard: function (kbd) {
this._input.setKeyboard(kbd);
}
});
return InputField;
});