2022-06-06 08:53:59 +00:00
|
|
|
require('./style.scss');
|
2015-11-19 13:57:23 +00:00
|
|
|
|
2022-05-25 18:04:16 +00:00
|
|
|
module.exports = new Class({
|
2015-11-19 13:57:23 +00:00
|
|
|
Extends: Htk.Field
|
|
|
|
,Tag: 'htk-search-entry'
|
|
|
|
|
2022-11-16 01:46:44 +00:00
|
|
|
,render() {
|
2022-05-25 18:04:16 +00:00
|
|
|
var div = this.createRoot('div');
|
2015-11-19 13:57:23 +00:00
|
|
|
div.className = 'htk-search-entry';
|
|
|
|
|
2022-05-25 18:04:16 +00:00
|
|
|
var icon = new Htk.Icon({
|
|
|
|
name: 'search',
|
2016-09-26 09:28:47 +00:00
|
|
|
alt: _('Search')
|
|
|
|
});
|
2022-05-25 18:04:16 +00:00
|
|
|
div.appendChild(icon.node);
|
2015-11-19 13:57:23 +00:00
|
|
|
|
2022-05-25 18:04:16 +00:00
|
|
|
var input = this.createElement('input');
|
2015-11-19 13:57:23 +00:00
|
|
|
input.className = 'entry';
|
|
|
|
input.type = 'text';
|
|
|
|
input.placeholder = _('Search');
|
2022-05-25 18:04:16 +00:00
|
|
|
input.addEventListener('change', this._onChange.bind(this));
|
|
|
|
div.appendChild(input);
|
2015-11-19 13:57:23 +00:00
|
|
|
|
|
|
|
this._input = input;
|
|
|
|
}
|
|
|
|
|
2022-11-16 01:46:44 +00:00
|
|
|
,_onChange() {
|
2015-11-19 13:57:23 +00:00
|
|
|
var newValue;
|
|
|
|
|
|
|
|
if (this._input.value === '')
|
|
|
|
newValue = undefined;
|
|
|
|
else
|
|
|
|
newValue = this._input.value;
|
|
|
|
|
2022-05-25 18:04:16 +00:00
|
|
|
this.valueChanged(newValue);
|
2015-11-19 13:57:23 +00:00
|
|
|
}
|
|
|
|
|
2022-11-16 01:46:44 +00:00
|
|
|
,putValue(value) {
|
2015-11-19 13:57:23 +00:00
|
|
|
if (!value)
|
|
|
|
this._input.value = '';
|
|
|
|
else
|
|
|
|
this._input.value = value;
|
|
|
|
}
|
|
|
|
|
2022-11-16 01:46:44 +00:00
|
|
|
,setEditable(editable) {
|
2015-11-19 13:57:23 +00:00
|
|
|
this.node.readOnly = !editable;
|
|
|
|
}
|
|
|
|
});
|