1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
hui.ui.TokenField = function(o) {
this.options = hui.override({key:null},o);
this.element = hui.get(o.element);
this.name = o.name;
this.value = [''];
hui.ui.extend(this);
this._updateUI();
};
hui.ui.TokenField.create = function(o) {
o = o || {};
o.element = hui.build('div',{'class':'hui_tokenfield'});
return new hui.ui.TokenField(o);
};
hui.ui.TokenField.prototype = {
setValue : function(objects) {
this.value = objects || [];
this.value.push('');
this._updateUI();
},
reset : function() {
this.value = [''];
this._updateUI();
},
getValue : function() {
var out = [];
hui.each(this.value,function(value) {
value = hui.string.trim(value);
if (value.length>0) {
out.push(value);
}
});
return out;
},
_updateUI : function() {
this.element.innerHTML='';
hui.each(this.value,function(value,i) {
var input = hui.build('input',{'class':'hui_textinput',parent:this.element,style:{width:'50px'}});
if (this.options.width) {
input.style.width=this.options.width+'px';
}
input.value = value;
hui.listen(input,'keyup',function() {
this._inputChanged(input,i);
}.bind(this));
}.bind(this));
},
_inputChanged : function(input,index) {
if (index==this.value.length-1 && input.value!=this.value[index]) {
this._addField();
}
this.value[index] = input.value;
hui.animate({node:input,css:{width:Math.min(Math.max(input.value.length*7+3,50),150)+'px'},duration:200});
},
$visibilityChanged : function() {
if (hui.dom.isVisible(this.element)) {
this.$$layout();
}
},
$$layout : function() {
var inputs = hui.findAll('input',this.element);
for (var i=0; i < inputs.length; i++) {
inputs[i].style.width = Math.min(Math.max(inputs[i].value.length*7+3,50),150)+'px';
}
},
_addField : function() {
var input = hui.build('input',{'class':'hui_textinput',style:{width:'50px'}});
if (this.options.width) {
input.style.width = this.options.width+'px';
}
var i = this.value.length;
this.value.push('');
this.element.appendChild(input);
var self = this;
hui.listen(input,'keyup',function() {
self._inputChanged(input,i);
});
}
};